@kyndryl-design-system/shidoka-applications 1.3.8 → 1.4.0

package/components/reusable/checkbox/checkboxGroup.d.ts

@@ -77,6 +77,7 @@ export declare class CheckboxGroup extends LitElement {
     private _handleFormdata;
     private _handleFilter;
     private _toggleRevealed;
+    private _handleInvalid;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/components/reusable/checkbox/checkboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoEN,OAAO,CAAC,YAAY,EAAE,GAAG;IAuDlC,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,eAAe;IAoBd,iBAAiB;IAejB,oBAAoB;CAa9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
+{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoEN,OAAO,CAAC,YAAY,EAAE,GAAG;IAgElC,OAAO,CAAC,SAAS;IA6BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAmBjB,oBAAoB;CAiB9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as a}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import n from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/warning--filled/16.js';let h=class extends i{constructor(){super(...arguments),this.name="",this.value=[],this.required=!1,this.disabled=!1,this.horizontal=!1,this.selectAll=!1,this.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this.limitRevealed=!1,this.textStrings={selectAll:"Select all",showMore:"Show more",showLess:"Show less"},this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as a}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as o}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import n from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/warning--filled/16.js';let r=class extends i{constructor(){super(...arguments),this.name="",this.value=[],this.required=!1,this.disabled=!1,this.horizontal=!1,this.selectAll=!1,this.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this.limitRevealed=!1,this.textStrings={selectAll:"Select all",showMore:"Show more",showLess:"Show less"},this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
       <fieldset ?disabled=${this.disabled}>
         ${this.filterable?t`
               <kyn-text-input
@@ -46,10 +46,10 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
 
         ${this.isInvalid?t`
               <div class="error">
-                <kd-icon .icon="${r}"></kd-icon>
+                <kd-icon .icon="${h}"></kd-icon>
                 ${this.invalidText||this.internalValidationMsg}
               </div>
             `:null}
       </fieldset>
-    `}updated(e){e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")&&this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)})),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(){this.required&&(this.value.length?(this.internals.setValidity({}),this.internalValidationMsg=""):(this.internals.setValidity({valueMissing:!0},"A selection is required."),this.internalValidationMsg=this.internals.validationMessage))}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};h.styles=n,h.formAssociated=!0,e([l({type:String})],h.prototype,"name",void 0),e([l({type:Array})],h.prototype,"value",void 0),e([l({type:Boolean})],h.prototype,"required",void 0),e([l({type:Boolean})],h.prototype,"disabled",void 0),e([l({type:Boolean})],h.prototype,"horizontal",void 0),e([l({type:Boolean})],h.prototype,"selectAll",void 0),e([l({type:Boolean})],h.prototype,"hideLegend",void 0),e([l({type:Boolean})],h.prototype,"filterable",void 0),e([o()],h.prototype,"searchTerm",void 0),e([l({type:Boolean})],h.prototype,"limitCheckboxes",void 0),e([o()],h.prototype,"limitRevealed",void 0),e([l({type:Object})],h.prototype,"textStrings",void 0),e([l({type:String})],h.prototype,"invalidText",void 0),e([a()],h.prototype,"checkboxes",void 0),e([o()],h.prototype,"internals",void 0),e([o()],h.prototype,"internalValidationMsg",void 0),e([o()],h.prototype,"isInvalid",void 0),h=e([s("kyn-checkbox-group")],h);export{h as CheckboxGroup};
+    `}updated(e){e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")&&(this._validate(!1,!1),this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}))),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!0),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"A selection is required.":"";this.internals.setValidity(i,s,this.checkboxes[0]),e&&(this.internalValidationMsg=this.internals.validationMessage),t&&this.internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};r.styles=n,r.formAssociated=!0,e([l({type:String})],r.prototype,"name",void 0),e([l({type:Array})],r.prototype,"value",void 0),e([l({type:Boolean})],r.prototype,"required",void 0),e([l({type:Boolean})],r.prototype,"disabled",void 0),e([l({type:Boolean})],r.prototype,"horizontal",void 0),e([l({type:Boolean})],r.prototype,"selectAll",void 0),e([l({type:Boolean})],r.prototype,"hideLegend",void 0),e([l({type:Boolean})],r.prototype,"filterable",void 0),e([a()],r.prototype,"searchTerm",void 0),e([l({type:Boolean})],r.prototype,"limitCheckboxes",void 0),e([a()],r.prototype,"limitRevealed",void 0),e([l({type:Object})],r.prototype,"textStrings",void 0),e([l({type:String})],r.prototype,"invalidText",void 0),e([o()],r.prototype,"checkboxes",void 0),e([a()],r.prototype,"internals",void 0),e([a()],r.prototype,"internalValidationMsg",void 0),e([a()],r.prototype,"isInvalid",void 0),r=e([s("kyn-checkbox-group")],r);export{r as CheckboxGroup};
 //# sourceMappingURL=checkboxGroup.js.map

package/components/reusable/checkbox/checkboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this.selectAll\n            ? html`\n                <kyn-checkbox\n                  class=\"select-all\"\n                  value=\"selectAll\"\n                  ?required=${this.required}\n                  ?disabled=${this.disabled}\n                  ?invalid=${this.invalidText !== '' ||\n                  this.internalValidationMsg !== ''}\n                >\n                  ${this.textStrings.selectAll}\n                </kyn-checkbox>\n              `\n            : null}\n\n          <slot></slot>\n\n          ${this.limitCheckboxes\n            ? html`\n                <button\n                  class=\"reveal-toggle\"\n                  @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                >\n                  ${this.limitRevealed\n                    ? this.textStrings.showLess\n                    : html`\n                        ${this.textStrings.showMore} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      // set form data value\n      // const entries = new FormData();\n      // this.value.forEach((value) => {\n      //   entries.append(this.name, value);\n      // });\n      // this.internals.setFormValue(entries);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n\n    if (changedProps.has('limitCheckboxes')) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate() {\n    if (this.required) {\n      if (!this.value.length) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'A selection is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n      }\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate();\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    this.value.forEach((value) => {\n      e.formData.append(this.name, value);\n    });\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","checked","includes","invalid","_validate","setValidity","valueMissing","validationMessage","_handleCheckboxChange","detail","filter","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this.selectAll\n            ? html`\n                <kyn-checkbox\n                  class=\"select-all\"\n                  value=\"selectAll\"\n                  ?required=${this.required}\n                  ?disabled=${this.disabled}\n                  ?invalid=${this.invalidText !== '' ||\n                  this.internalValidationMsg !== ''}\n                >\n                  ${this.textStrings.selectAll}\n                </kyn-checkbox>\n              `\n            : null}\n\n          <slot></slot>\n\n          ${this.limitCheckboxes\n            ? html`\n                <button\n                  class=\"reveal-toggle\"\n                  @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                >\n                  ${this.limitRevealed\n                    ? this.textStrings.showLess\n                    : html`\n                        ${this.textStrings.showMore} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      // set form data value\n      // const entries = new FormData();\n      // this.value.forEach((value) => {\n      //   entries.append(this.name, value);\n      // });\n      // this.internals.setFormValue(entries);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n\n    if (changedProps.has('limitCheckboxes')) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.required && !this.value.length\n        ? 'A selection is required.'\n        : '';\n\n    // set validity on custom element, anchor to first checkbox\n    this.internals.setValidity(Validity, ValidationMessage, this.checkboxes[0]);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    this.value.forEach((value) => {\n      e.formData.append(this.name, value);\n    });\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","_validate","checked","includes","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","validationMessage","reportValidity","_handleCheckboxChange","detail","filter","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}

package/components/reusable/datePicker/datepicker.d.ts

@@ -72,9 +72,9 @@ export declare class DatePicker extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     private handleInput;
     updated(changedProps: PropertyValues): void;
-    private validateMinDate;
-    private validateMaxDate;
+    private _validate;
     private _handleFormdata;
+    private _handleInvalid;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/components/reusable/datePicker/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EACL,iBAAiB,EAIlB,MAAM,QAAQ,CAAC;AAGhB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAEjE,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,SAAM;IAEb;;0DAEsD;IAEtD,IAAI,SAAM;IAEV,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsDf,OAAO,CAAC,WAAW;IAYV,OAAO,CAAC,YAAY,EAAE,cAAc;IAuC7C,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,eAAe;IAId,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;CAStC;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAEjE,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;0DAEsD;IAEtD,IAAI,EAAG,MAAM,CAAC;IAEd,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,cAAc;IA4B7C,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/datePicker/datepicker.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as r}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as o}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as d,regexDateFormat as h,regexDateTimeFormat as p,regexDateTimeFormatSec as m}from"./defs.js";import v from"./datepicker.scss.js";let u=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.caption="",this.value="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.maxDate="",this.minDate="",this.step="",this.datePickerType=d.SINGLE,this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as o}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as r}from"./defs.js";import p from"./datepicker.scss.js";let h=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.caption="",this.value="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.datePickerType=r.SINGLE,this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
       <label
         class="datepicker-label-text"
         for=${this.name}
@@ -9,21 +9,21 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
       </label>
 
       <div
-        class="${o({"input-wrapper":!0})}"
+        class="${d({"input-wrapper":!0})}"
       >
         <input
-          class="${o({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+          class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
           datePickerType=${this.datePickerType}
-          type=${this.datePickerType===d.WITHITIME?"datetime-local":"date"}
+          type=${this.datePickerType===r.WITHITIME?"datetime-local":"date"}
           id=${this.name?this.name:"datepicker-1"}
           name=${this.name}
           value=${this.value}
           ?required=${this.required}
           ?disabled=${this.disabled}
           ?invalid=${this.isInvalid}
-          min=${r(this.minDate)}
-          max=${r(this.maxDate)}
-          step=${r(this.step)}
+          min=${o(this.minDate)}
+          max=${o(this.maxDate)}
+          step=${o(this.step)}
           @input=${t=>this.handleInput(t)}
         />
       </div>
@@ -34,5 +34,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             </div>
           `:null}
       ${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
-    `}handleInput(t){this.value=t.target.value;const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("value")&&t.has("value")){if(this.inputEl.value=this.value,this.internals.setValidity({}),this.internalValidationMsg="",this.required&&(!this.value||""===this.value))return this.internals.setValidity({valueMissing:!0},"This field is required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.value&&""!==this.minDate&&this.validateMinDate(),""!==this.value&&""!==this.maxDate&&this.validateMaxDate()}}validateMinDate(){h.test(this.minDate)||p.test(this.minDate)||m.test(this.minDate)?this.value<this.minDate&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter date as min date or later."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid min date."),this.internalValidationMsg=this.internals.validationMessage)}validateMaxDate(){h.test(this.maxDate)||p.test(this.maxDate)||m.test(this.maxDate)?this.value>this.maxDate&&(this.internals.setValidity({rangeOverflow:!0},"Please enter date as max date or earlier."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid max date."),this.internalValidationMsg=this.internals.validationMessage)}_handleFormdata(t){t.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t)))}disconnectedCallback(){this.internals.form&&this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),super.disconnectedCallback()}};u.styles=v,u.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},u.formAssociated=!0,t([n()],u.prototype,"internals",void 0),t([s({type:String})],u.prototype,"size",void 0),t([s({type:String})],u.prototype,"caption",void 0),t([s({type:String})],u.prototype,"value",void 0),t([s({type:String})],u.prototype,"name",void 0),t([s({type:Boolean})],u.prototype,"required",void 0),t([s({type:Boolean})],u.prototype,"disabled",void 0),t([s({type:String})],u.prototype,"invalidText",void 0),t([s({type:String})],u.prototype,"warnText",void 0),t([s({type:String})],u.prototype,"maxDate",void 0),t([s({type:String})],u.prototype,"minDate",void 0),t([s({type:String})],u.prototype,"step",void 0),t([s({type:String})],u.prototype,"datePickerType",void 0),t([l("input")],u.prototype,"inputEl",void 0),t([n()],u.prototype,"internalValidationMsg",void 0),t([n()],u.prototype,"isInvalid",void 0),u=t([a("kyn-date-picker")],u);export{u as DatePicker};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h as DatePicker};
 //# sourceMappingURL=datepicker.js.map

package/components/reusable/datePicker/datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  DATE_PICKER_TYPES,\n  regexDateFormat,\n  regexDateTimeFormat,\n  regexDateTimeFormatSec,\n} from './defs';\nimport DatePickerScss from './datepicker.scss';\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends LitElement {\n  static override styles = DatePickerScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n  @property({ type: String })\n  value = '';\n\n  /** Datepicker name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate = '';\n\n  /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step = '';\n\n  /** Date picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div\n        class=\"${classMap({\n          'input-wrapper': true,\n        })}\"\n      >\n        <input\n          class=\"${classMap({\n            'size--sm': this.size === 'sm',\n            'size--lg': this.size === 'lg',\n          })}\"\n          datePickerType=${this.datePickerType}\n          type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n            ? 'datetime-local'\n            : 'date'}\n          id=${this.name ? this.name : 'datepicker-1'}\n          name=${this.name}\n          value=${this.value}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.isInvalid}\n          min=${ifDefined(this.minDate)}\n          max=${ifDefined(this.maxDate)}\n          step=${ifDefined(this.step)}\n          @input=${(e: any) => this.handleInput(e)}\n        />\n      </div>\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  // calls when start date or value change\n  private handleInput(e: any) {\n    this.value = e.target.value;\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (changedProps.get('value') !== undefined && changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n      this.internals.setValidity({});\n      this.internalValidationMsg = '';\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.value !== '' && this.minDate !== '') {\n        this.validateMinDate();\n      }\n      // validate max\n      if (this.value !== '' && this.maxDate !== '') {\n        this.validateMaxDate();\n      }\n    }\n  }\n\n  private validateMinDate(): void {\n    if (\n      regexDateFormat.test(this.minDate) ||\n      regexDateTimeFormat.test(this.minDate) ||\n      regexDateTimeFormatSec.test(this.minDate)\n    ) {\n      if (this.value < this.minDate) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter date as min date or later.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateMaxDate(): void {\n    if (\n      regexDateFormat.test(this.maxDate) ||\n      regexDateTimeFormat.test(this.maxDate) ||\n      regexDateTimeFormatSec.test(this.maxDate)\n    ) {\n      if (this.value > this.maxDate) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter date as max date or earlier.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","maxDate","minDate","step","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","e","handleInput","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","regexDateFormat","test","regexDateTimeFormat","regexDateTimeFormatSec","rangeUnderflow","patternMismatch","rangeOverflow","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}
+{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DATE_PICKER_TYPES } from './defs';\nimport DatePickerScss from './datepicker.scss';\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends LitElement {\n  static override styles = DatePickerScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n  @property({ type: String })\n  value = '';\n\n  /** Datepicker name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate!: string;\n\n  /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step!: string;\n\n  /** Date picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div\n        class=\"${classMap({\n          'input-wrapper': true,\n        })}\"\n      >\n        <input\n          class=\"${classMap({\n            'size--sm': this.size === 'sm',\n            'size--lg': this.size === 'lg',\n          })}\"\n          datePickerType=${this.datePickerType}\n          type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n            ? 'datetime-local'\n            : 'date'}\n          id=${this.name ? this.name : 'datepicker-1'}\n          name=${this.name}\n          value=${this.value}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.isInvalid}\n          min=${ifDefined(this.minDate)}\n          max=${ifDefined(this.maxDate)}\n          step=${ifDefined(this.step)}\n          @input=${(e: any) => this.handleInput(e)}\n        />\n      </div>\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  // calls when start date or value change\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (changedProps.has('value')) {\n      // this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","minDate","maxDate","step","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","inputEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}

package/components/reusable/datePicker/defs.js

@@ -1,2 +1,2 @@
-var d;!function(d){d.SINGLE="single",d.WITHITIME="date-time"}(d||(d={}));const t=/^\d{4}-\d{2}-\d{2}$/,e=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/,n=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;export{d as DATE_PICKER_TYPES,t as regexDateFormat,e as regexDateTimeFormat,n as regexDateTimeFormatSec};
+var e;!function(e){e.SINGLE="single",e.WITHITIME="date-time"}(e||(e={}));export{e as DATE_PICKER_TYPES};
 //# sourceMappingURL=defs.js.map

package/components/reusable/datePicker/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/datePicker/defs.ts"],"sourcesContent":["\nexport enum DATE_PICKER_TYPES {\n    SINGLE = 'single',\n    WITHITIME = 'date-time',\n}\nexport const regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\nexport const regexDateTimeFormat = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}$/;\nexport const regexDateTimeFormatSec = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$/;"],"names":["DATE_PICKER_TYPES","regexDateFormat","regexDateTimeFormat","regexDateTimeFormatSec"],"mappings":"IACYA,GAAZ,SAAYA,GACRA,EAAA,OAAA,SACAA,EAAA,UAAA,WACH,CAHD,CAAYA,IAAAA,EAGX,CAAA,IACM,MAAMC,EAAkB,sBAClBC,EAAsB,kCACtBC,EAAyB"}
+{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/datePicker/defs.ts"],"sourcesContent":["\nexport enum DATE_PICKER_TYPES {\n    SINGLE = 'single',\n    WITHITIME = 'date-time',\n}\nexport const regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\nexport const regexDateTimeFormat = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}$/;\nexport const regexDateTimeFormatSec = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$/;"],"names":["DATE_PICKER_TYPES"],"mappings":"IACYA,GAAZ,SAAYA,GACRA,EAAA,OAAA,SACAA,EAAA,UAAA,WACH,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

package/components/reusable/daterangepicker/daterangepicker.d.ts

@@ -18,10 +18,6 @@ export declare class DateRangePicker extends LitElement {
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    /** Regex format for minDate / maxDate
-     * @ignore
-     */
-    regexDateFormat: RegExp;
     /**
      * Attached internals for form association.
      * @ignore
@@ -67,15 +63,24 @@ export declare class DateRangePicker extends LitElement {
      * @ignore
      */
     isInvalid: boolean;
+    /**
+     * Queries the Start Date <input> DOM element.
+     * @ignore
+     */
+    inputElStart: HTMLInputElement;
+    /**
+     * Queries the End Date <input> DOM element.
+     * @ignore
+     */
+    inputElEnd: HTMLInputElement;
     render(): import("lit-html").TemplateResult<1>;
     updated(changedProps: PropertyValues): void;
     private handleStartDate;
     private handleEndDate;
-    private validateAndDispatchEvent;
-    private validateMinDate;
-    private validateMaxDate;
-    private validateStartEndDate;
+    private _validate;
+    private _emitValue;
     private _handleFormdata;
+    private _handleInvalid;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/components/reusable/daterangepicker/daterangepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAuB;IAC7C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB;;;;MAG/B;IAEF;;OAEG;IAEH,eAAe,SAAyB;IAExC;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,kDAAkD;IAElD,SAAS,SAAM;IAEf,gDAAgD;IAEhD,OAAO,SAAM;IAEb,iFAAiF;IAEjF,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,SAAM;IAEb;;0DAEsD;IAEtD,IAAI,SAAM;IAEV;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAqEN,OAAO,CAAC,YAAY,EAAE,cAAc;IAsE7C,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,eAAe;IAQd,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,eAAe,CAAC;KAC1C;CACF"}
+{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAuB;IAC7C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,kDAAkD;IAElD,SAAS,SAAM;IAEf,gDAAgD;IAEhD,OAAO,SAAM;IAEb,iFAAiF;IAEjF,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;0DAEsD;IAEtD,IAAI,EAAG,MAAM,CAAC;IAEd;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,YAAY,EAAG,gBAAgB,CAAC;IAEhC;;;OAGG;IAEH,UAAU,EAAG,gBAAgB,CAAC;IAErB,MAAM;IAwEN,OAAO,CAAC,YAAY,EAAE,cAAc;IAwB7C,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,SAAS;IAuDjB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,eAAe,CAAC;KAC1C;CACF"}

package/components/reusable/daterangepicker/daterangepicker.js

@@ -1,17 +1,17 @@
-import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as d}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import l from"./daterangepicker.scss.js";let o=class extends i{constructor(){super(...arguments),this.regexDateFormat=/^\d{4}-\d{2}-\d{2}$/,this.internals=this.attachInternals(),this.caption="",this.size="md",this.startDate="",this.endDate="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.maxDate="",this.minDate="",this.step="",this.internalValidationMsg="",this.isInvalid=!1}render(){var t,i,a,s;return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as i}from'./../../../external/lit-html/lit-html.js';import{LitElement as e}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as d}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as l}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import o from"./daterangepicker.scss.js";let h=class extends e{constructor(){super(...arguments),this.internals=this.attachInternals(),this.caption="",this.size="md",this.startDate="",this.endDate="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.internalValidationMsg="",this.isInvalid=!1}render(){var t,e,s,a;return i`
       <label
         class="datepicker-label-text"
         for=${this.name}
         ?disabled=${this.disabled}
       >
-        ${this.required?e`<span class="required">*</span>`:null}
+        ${this.required?i`<span class="required">*</span>`:null}
         <slot></slot>
       </label>
 
       <div class="wrapper">
         <div class="input-wrapper">
           <input
-            class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"date-start":!0,"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             type="date"
             id="${this.name}-start"
             name="${this.name}-start"
@@ -19,9 +19,9 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             ?required=${this.required}
             ?disabled=${this.disabled}
             ?invalid=${this.isInvalid}
-            min=${d(this.minDate)}
-            max=${d(null!==(i=null!==(t=this.endDate)&&void 0!==t?t:this.maxDate)&&void 0!==i?i:"")}
-            step=${d(this.step)}
+            min=${l(this.minDate)}
+            max=${l(null!==(e=null!==(t=this.endDate)&&void 0!==t?t:this.maxDate)&&void 0!==e?e:"")}
+            step=${l(this.step)}
             @input=${t=>this.handleStartDate(t)}
           />
         </div>
@@ -29,27 +29,28 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
         <span class="range-span">—</span>
         <div class="input-wrapper">
           <input
-            class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"date-end":!0,"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             type="date"
             id="${this.name}-end"
             name="${this.name}-end"
             value=${this.endDate}
+            ?required=${this.required}
             ?disabled=${this.disabled}
             ?invalid=${this.isInvalid}
-            min=${d(null!==(s=null!==(a=this.startDate)&&void 0!==a?a:this.minDate)&&void 0!==s?s:"")}
-            max=${d(this.maxDate)}
-            step=${d(this.step)}
+            min=${l(null!==(a=null!==(s=this.startDate)&&void 0!==s?s:this.minDate)&&void 0!==a?a:"")}
+            max=${l(this.maxDate)}
+            step=${l(this.step)}
             @input=${t=>this.handleEndDate(t)}
           />
         </div>
       </div>
 
-      ${""!==this.caption?e` <div class="caption">${this.caption}</div> `:null}
-      ${this.isInvalid?e`
+      ${""!==this.caption?i` <div class="caption">${this.caption}</div> `:null}
+      ${this.isInvalid?i`
             <div class="error">
               ${this.invalidText||this.internalValidationMsg}
             </div>
           `:null}
-      ${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
-    `}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("startDate")&&t.has("startDate")){if(this.internals.setValidity({}),this.internalValidationMsg="",this.required&&(!this.startDate||""===this.startDate))return this.internals.setValidity({valueMissing:!0},"Both dates are required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.startDate&&""!==this.minDate&&this.validateMinDate(this.startDate),""!==this.startDate&&""!==this.maxDate&&this.validateMaxDate(this.startDate),""!==this.startDate&&""!==this.endDate&&this.validateStartEndDate()}if(void 0!==t.get("endDate")&&t.has("endDate")){if(this.internals.setValidity({}),this.internalValidationMsg="",this.required&&(!this.endDate||""===this.endDate))return this.internals.setValidity({valueMissing:!0},"Both dates are required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.endDate&&""!==this.minDate&&this.validateMinDate(this.endDate),""!==this.endDate&&""!==this.maxDate&&this.validateMaxDate(this.endDate),""!==this.startDate&&""!==this.endDate&&this.validateStartEndDate()}}handleStartDate(t){this.startDate=t.target.value,""!==this.startDate&&this.validateAndDispatchEvent()}handleEndDate(t){this.endDate=t.target.value,""!==this.endDate&&this.validateAndDispatchEvent()}validateAndDispatchEvent(){if(this.startDate<=this.endDate){const t=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate}});this.dispatchEvent(t)}}validateMinDate(t){this.regexDateFormat.test(this.minDate)?t<this.minDate&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter date as min date or later."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid min date."),this.internalValidationMsg=this.internals.validationMessage)}validateMaxDate(t){this.regexDateFormat.test(this.maxDate)?t>this.maxDate&&(this.internals.setValidity({rangeOverflow:!0},"Please enter date as max date or earlier."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid max date."),this.internalValidationMsg=this.internals.validationMessage)}validateStartEndDate(){this.startDate>this.endDate&&(this.internals.setValidity({patternMismatch:!0},"State date must be before end date."),this.internalValidationMsg=this.internals.validationMessage)}_handleFormdata(t){const e=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";t.formData.append(this.name,e)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t)))}disconnectedCallback(){this.internals.form&&this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),super.disconnectedCallback()}};o.styles=l,o.formAssociated=!0,o.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},t([n()],o.prototype,"regexDateFormat",void 0),t([n()],o.prototype,"internals",void 0),t([s({type:String})],o.prototype,"caption",void 0),t([s({type:String})],o.prototype,"size",void 0),t([s({type:String})],o.prototype,"startDate",void 0),t([s({type:String})],o.prototype,"endDate",void 0),t([s({type:String})],o.prototype,"name",void 0),t([s({type:Boolean})],o.prototype,"required",void 0),t([s({type:Boolean})],o.prototype,"disabled",void 0),t([s({type:String})],o.prototype,"invalidText",void 0),t([s({type:String})],o.prototype,"warnText",void 0),t([s({type:String})],o.prototype,"maxDate",void 0),t([s({type:String})],o.prototype,"minDate",void 0),t([s({type:String})],o.prototype,"step",void 0),t([n()],o.prototype,"internalValidationMsg",void 0),t([n()],o.prototype,"isInvalid",void 0),o=t([a("kyn-date-range-picker")],o);export{o as DateRangePicker};
+      ${""===this.warnText||this.isInvalid?null:i`<div class="warn">${this.warnText}</div>`}
+    `}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),(t.has("startDate")||t.has("endDate"))&&this._validate(!1,!1)}handleStartDate(t){this.startDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}handleEndDate(t){this.endDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}_validate(t,i){const e=this.inputElStart.checkValidity(),s=this.inputElEnd.checkValidity();if(e&&s)this.internals.setValidity({});else if(e){if(!s){const t=""!==this.invalidText?{...this.inputElEnd.validity,customError:!0}:this.inputElEnd.validity,i=""!==this.invalidText?this.invalidText:this.inputElEnd.validationMessage;this.internals.setValidity(t,i,this.inputElEnd)}}else{const t=""!==this.invalidText?{...this.inputElStart.validity,customError:!0}:this.inputElStart.validity,i=""!==this.invalidText?this.invalidText:this.inputElStart.validationMessage;this.internals.setValidity(t,i,this.inputElStart)}t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}_emitValue(t){const i=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate,origEvent:t}});this.dispatchEvent(i)}_handleFormdata(t){const i=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";t.formData.append(this.name,i)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=o,h.formAssociated=!0,h.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"startDate",void 0),t([a({type:String})],h.prototype,"endDate",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([d("input.date-start")],h.prototype,"inputElStart",void 0),t([d("input.date-end")],h.prototype,"inputElEnd",void 0),h=t([s("kyn-date-range-picker")],h);export{h as DateRangePicker};
 //# sourceMappingURL=daterangepicker.js.map

package/components/reusable/daterangepicker/daterangepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport DateRangePickerScss from './daterangepicker.scss';\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends LitElement {\n  static override styles = DateRangePickerScss;\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Regex format for minDate / maxDate\n   * @ignore\n   */\n  @state()\n  regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Datepicker Start date in YYYY-MM-DD format. */\n  @property({ type: String })\n  startDate = '';\n\n  /** Datepicker End date in YYYY-MM-DD format. */\n  @property({ type: String })\n  endDate = '';\n\n  /** Datepicker name. Required prop. as there could many fields into single form*/\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate = '';\n\n  /** Minimum date in YYYY-MM-DD format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step = '';\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div class=\"wrapper\">\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-start\"\n            name=\"${this.name}-start\"\n            value=${this.startDate}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minDate)}\n            max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleStartDate(e)}\n          />\n        </div>\n\n        <span class=\"range-span\">—</span>\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-end\"\n            name=\"${this.name}-end\"\n            value=${this.endDate}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n            max=${ifDefined(this.maxDate)}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleEndDate(e)}\n          />\n        </div>\n      </div>\n\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.get('startDate') !== undefined &&\n      changedProps.has('startDate')\n    ) {\n      this.internals.setValidity({});\n      this.internalValidationMsg = '';\n      // set validity\n      if (this.required && (!this.startDate || this.startDate === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Both dates are required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.startDate !== '' && this.minDate !== '') {\n        this.validateMinDate(this.startDate);\n      }\n      //validate max\n      if (this.startDate !== '' && this.maxDate !== '') {\n        this.validateMaxDate(this.startDate);\n      }\n      // validate start & end date\n      if (this.startDate !== '' && this.endDate !== '') {\n        this.validateStartEndDate();\n      }\n    }\n\n    if (\n      changedProps.get('endDate') !== undefined &&\n      changedProps.has('endDate')\n    ) {\n      this.internals.setValidity({});\n      this.internalValidationMsg = '';\n      // set validity\n      if (this.required && (!this.endDate || this.endDate === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Both dates are required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.endDate !== '' && this.minDate !== '') {\n        this.validateMinDate(this.endDate);\n      }\n      //validate max\n      if (this.endDate !== '' && this.maxDate !== '') {\n        this.validateMaxDate(this.endDate);\n      }\n      // validate start & end date\n      if (this.startDate !== '' && this.endDate !== '') {\n        this.validateStartEndDate();\n      }\n    }\n  }\n  // on-change start date\n  private handleStartDate(e: any) {\n    this.startDate = e.target.value;\n    if (this.startDate !== '') {\n      this.validateAndDispatchEvent();\n    }\n  }\n  // on-change end date\n  private handleEndDate(e: any) {\n    this.endDate = e.target.value;\n    if (this.endDate !== '') {\n      this.validateAndDispatchEvent();\n    }\n  }\n  // Note: dispatch (on-input) event only if both dates are valid (i.e. startDate <= endDate)\n  private validateAndDispatchEvent() {\n    if (this.startDate <= this.endDate) {\n      // emit selected start & end date value\n      const event = new CustomEvent('on-input', {\n        detail: {\n          startDate: this.startDate,\n          endDate: this.endDate,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n  // validate minDate with start & end date\n  private validateMinDate(date: String): void {\n    if (this.regexDateFormat.test(this.minDate)) {\n      if (date < this.minDate) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter date as min date or later.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n  // validate maxDate with start & end date\n  private validateMaxDate(date: String): void {\n    if (this.regexDateFormat.test(this.maxDate)) {\n      if (date > this.maxDate) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter date as max date or earlier.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateStartEndDate(): void {\n    // Save combine values to form data\n    // const combineVals = `${this.startDate}:${this.endDate}`;\n    // this.internals.setFormValue(combineVals);\n\n    if (this.startDate > this.endDate) {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'State date must be before end date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    const combineVals =\n      this.startDate !== '' && this.endDate !== ''\n        ? `${this.startDate}:${this.endDate}`\n        : '';\n    e.formData.append(this.name, combineVals);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-range-picker': DateRangePicker;\n  }\n}\n"],"names":["DateRangePicker","LitElement","constructor","this","regexDateFormat","internals","attachInternals","caption","size","startDate","endDate","name","required","disabled","invalidText","warnText","maxDate","minDate","step","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","_b","_a","e","handleStartDate","_d","_c","handleEndDate","updated","changedProps","has","undefined","get","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","validateStartEndDate","target","value","validateAndDispatchEvent","event","CustomEvent","detail","dispatchEvent","date","test","rangeUnderflow","patternMismatch","rangeOverflow","_handleFormdata","combineVals","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DateRangePickerScss","formAssociated","shadowRootOptions","delegatesFocus","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport DateRangePickerScss from './daterangepicker.scss';\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends LitElement {\n  static override styles = DateRangePickerScss;\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Datepicker Start date in YYYY-MM-DD format. */\n  @property({ type: String })\n  startDate = '';\n\n  /** Datepicker End date in YYYY-MM-DD format. */\n  @property({ type: String })\n  endDate = '';\n\n  /** Datepicker name. Required prop. as there could many fields into single form*/\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate!: string;\n\n  /** Minimum date in YYYY-MM-DD format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step!: string;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  /**\n   * Queries the Start Date <input> DOM element.\n   * @ignore\n   */\n  @query('input.date-start')\n  inputElStart!: HTMLInputElement;\n\n  /**\n   * Queries the End Date <input> DOM element.\n   * @ignore\n   */\n  @query('input.date-end')\n  inputElEnd!: HTMLInputElement;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div class=\"wrapper\">\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'date-start': true,\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-start\"\n            name=\"${this.name}-start\"\n            value=${this.startDate}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minDate)}\n            max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleStartDate(e)}\n          />\n        </div>\n\n        <span class=\"range-span\">—</span>\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'date-end': true,\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-end\"\n            name=\"${this.name}-end\"\n            value=${this.endDate}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n            max=${ifDefined(this.maxDate)}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleEndDate(e)}\n          />\n        </div>\n      </div>\n\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (changedProps.has('startDate') || changedProps.has('endDate')) {\n      this._validate(false, false);\n    }\n  }\n\n  // on-change start date\n  private handleStartDate(e: any) {\n    this.startDate = e.target.value;\n\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  // on-change end date\n  private handleEndDate(e: any) {\n    this.endDate = e.target.value;\n\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const StartValid = this.inputElStart.checkValidity();\n    const EndValid = this.inputElEnd.checkValidity();\n\n    if (StartValid && EndValid) {\n      // clear validation errors\n      this.internals.setValidity({});\n    } else if (!StartValid) {\n      // validate start date\n\n      // get validity state from inputEl, combine customError flag if invalidText is provided\n      const Validity =\n        this.invalidText !== ''\n          ? { ...this.inputElStart.validity, customError: true }\n          : this.inputElStart.validity;\n\n      // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n      const ValidationMessage =\n        this.invalidText !== ''\n          ? this.invalidText\n          : this.inputElStart.validationMessage;\n\n      this.internals.setValidity(\n        Validity,\n        ValidationMessage,\n        this.inputElStart\n      );\n    } else if (!EndValid) {\n      // validate end date\n\n      // get validity state from inputEl, combine customError flag if invalidText is provided\n      const Validity =\n        this.invalidText !== ''\n          ? { ...this.inputElEnd.validity, customError: true }\n          : this.inputElEnd.validity;\n\n      // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n      const ValidationMessage =\n        this.invalidText !== ''\n          ? this.invalidText\n          : this.inputElEnd.validationMessage;\n\n      this.internals.setValidity(Validity, ValidationMessage, this.inputElEnd);\n    }\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _emitValue(e: any) {\n    const event = new CustomEvent('on-input', {\n      detail: {\n        startDate: this.startDate,\n        endDate: this.endDate,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    const combineVals =\n      this.startDate !== '' && this.endDate !== ''\n        ? `${this.startDate}:${this.endDate}`\n        : '';\n    e.formData.append(this.name, combineVals);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-range-picker': DateRangePicker;\n  }\n}\n"],"names":["DateRangePicker","LitElement","constructor","this","internals","attachInternals","caption","size","startDate","endDate","name","required","disabled","invalidText","warnText","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","minDate","_b","_a","maxDate","step","e","handleStartDate","_d","_c","handleEndDate","updated","changedProps","has","undefined","get","_validate","target","value","_emitValue","interacted","report","StartValid","inputElStart","checkValidity","EndValid","inputElEnd","setValidity","Validity","validity","customError","ValidationMessage","validationMessage","reportValidity","event","CustomEvent","detail","origEvent","dispatchEvent","_handleFormdata","combineVals","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DateRangePickerScss","formAssociated","shadowRootOptions","delegatesFocus","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}

package/components/reusable/dropdown/dropdown.d.ts

@@ -131,10 +131,11 @@ export declare class Dropdown extends LitElement {
     private _handleClick;
     private _handleBlur;
     private _handleFormdata;
+    private _handleInvalid;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private updateValue;
-    private _setValidity;
+    private _validate;
     private emitValue;
     updated(changedProps: any): void;
     private _updateChildren;

package/components/reusable/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAyFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAoBjB,oBAAoB;IAiB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAwFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}