@kyndryl-design-system/shidoka-applications 1.3.4 → 1.3.6

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

@@ -6,6 +6,11 @@ import { LitElement } from 'lit';
  */
 export declare class Checkbox extends LitElement {
     static styles: import("lit").CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     /** Checkbox value. */
     value: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,sBAAsB;IAEtB,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB,oEAAoE;IAEpE,aAAa,UAAS;IAEb,MAAM;IAuBf,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF,sBAAsB;IAEtB,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB,oEAAoE;IAEpE,aAAa,UAAS;IAEb,MAAM;IAuBf,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/checkbox/checkbox.js

@@ -17,5 +17,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           .indeterminate=${this.indeterminate}
         />
       </label>
-    `}handleChange(e){const t=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(t)}};n.styles=d,e([s({type:String})],n.prototype,"value",void 0),e([s({type:String})],n.prototype,"name",void 0),e([s({type:Boolean})],n.prototype,"checked",void 0),e([s({type:Boolean})],n.prototype,"required",void 0),e([s({type:Boolean})],n.prototype,"disabled",void 0),e([s({type:Boolean})],n.prototype,"invalid",void 0),e([s({type:Boolean})],n.prototype,"visiblyHidden",void 0),e([s({type:Boolean})],n.prototype,"indeterminate",void 0),n=e([o("kyn-checkbox")],n);export{n as Checkbox};
+    `}handleChange(e){const t=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(t)}};n.styles=d,n.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},e([s({type:String})],n.prototype,"value",void 0),e([s({type:String})],n.prototype,"name",void 0),e([s({type:Boolean})],n.prototype,"checked",void 0),e([s({type:Boolean})],n.prototype,"required",void 0),e([s({type:Boolean})],n.prototype,"disabled",void 0),e([s({type:Boolean})],n.prototype,"invalid",void 0),e([s({type:Boolean})],n.prototype,"visiblyHidden",void 0),e([s({type:Boolean})],n.prototype,"indeterminate",void 0),n=e([o("kyn-checkbox")],n);export{n as Checkbox};
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"sqBAWO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAKLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAMPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CAsCjB,CApCUC,SACP,OAAOC,CAAI;yBACUV,KAAKK,qBAAqBL,KAAKM;sBAClCK,EAAS,CAAE,UAAWX,KAAKO;;;;;;iBAMhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEOK,aAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GArFejB,EAAMyB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP9B,EAAA+B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR9B,EAAA+B,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIhC,EAAA+B,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIhC,EAAA+B,UAAA,qBAAA,GAjDX/B,EAAQ2B,EAAA,CADpBM,EAAc,iBACFjC"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"sqBAWO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAULC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAMPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CAsCjB,CApCUC,SACP,OAAOC,CAAI;yBACUV,KAAKK,qBAAqBL,KAAKM;sBAClCK,EAAS,CAAE,UAAWX,KAAKO;;;;;;iBAMhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEOK,aAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GA1FejB,EAAMyB,OAAGC,EAET1B,EAAA2B,kBAAoB,IAC/B1B,EAAW0B,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPhC,EAAAiC,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRhC,EAAAiC,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFlC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlC,EAAAiC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFlC,EAAAiC,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIlC,EAAAiC,UAAA,qBAAA,GAtDXjC,EAAQ6B,EAAA,CADpBM,EAAc,iBACFnC"}

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

@@ -9,6 +9,11 @@ import { DATE_PICKER_TYPES } from './defs';
  */
 export declare class DatePicker extends LitElement {
     static styles: import("lit").CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     /**
      * Associate the component with forms.
      * @ignore

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;;;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,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"}

package/components/reusable/datePicker/datepicker.js

@@ -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.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;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};
 //# 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  /**\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","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"oiCAqBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAcLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,KAIPH,KAAOI,QAAG,GAIVJ,KAAKK,MAAG,GAIRL,KAAIM,KAAG,GAIPN,KAAQO,UAAG,EAIXP,KAAQQ,UAAG,EAIXR,KAAWS,YAAG,GAIdT,KAAQU,SAAG,GAMXV,KAAOW,QAAG,GAMVX,KAAOY,QAAG,GAMVZ,KAAIa,KAAG,GAIPb,KAAAc,eAAoCC,EAAkBC,OActDhB,KAAqBiB,sBAAG,GAOxBjB,KAASkB,WAAG,CA8Kb,CA5KUC,SACP,OAAOC,CAAI;;;cAGDpB,KAAKM;oBACCN,KAAKQ;;UAEfR,KAAKO,SAAWa,CAAI,kCAAoC;;;;;iBAKjDC,EAAS,CAChB,iBAAiB;;;mBAIRA,EAAS,CAChB,WAA0B,OAAdrB,KAAKG,KACjB,WAA0B,OAAdH,KAAKG;2BAEFH,KAAKc;iBACfd,KAAKc,iBAAmBC,EAAkBO,UAC7C,iBACA;eACCtB,KAAKM,KAAON,KAAKM,KAAO;iBACtBN,KAAKM;kBACJN,KAAKK;sBACDL,KAAKO;sBACLP,KAAKQ;qBACNR,KAAKkB;gBACVK,EAAUvB,KAAKY;gBACfW,EAAUvB,KAAKW;iBACdY,EAAUvB,KAAKa;mBACZW,GAAWxB,KAAKyB,YAAYD;;;QAGvB,KAAjBxB,KAAKI,QACHgB,CAAI,yBAAyBpB,KAAKI,iBAClC;QACFJ,KAAKkB,UACHE,CAAI;;gBAEEpB,KAAKS,aAAeT,KAAKiB;;YAG/B;QACgB,KAAlBjB,KAAKU,UAAoBV,KAAKkB,UAE5B,KADAE,CAAI,qBAAqBpB,KAAKU;KAGrC,CAGOe,YAAYD,GAClBxB,KAAKK,MAAQmB,EAAEE,OAAOrB,MAEtB,MAAMsB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNxB,MAAOmB,EAAEE,OAAOrB,MAChByB,UAAWN,KAGfxB,KAAK+B,cAAcJ,EACpB,CAEQK,QAAQC,GAYf,IAVEA,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBlC,KAAKkB,UACkB,KAArBlB,KAAKS,aAAqD,KAA/BT,KAAKiB,4BAKFkB,IAA9BF,EAAaG,IAAI,UAA0BH,EAAaC,IAAI,SAAU,CAQxE,GAPAlC,KAAKqC,QAAQhC,MAAQL,KAAKK,MAG1BL,KAAKC,UAAUqC,YAAY,CAAA,GAC3BtC,KAAKiB,sBAAwB,GAGzBjB,KAAKO,YAAcP,KAAKK,OAAwB,KAAfL,KAAKK,OAMxC,OALAL,KAAKC,UAAUqC,YACb,CAAEC,cAAc,GAChB,gCAEFvC,KAAKiB,sBAAwBjB,KAAKC,UAAUuC,mBAI3B,KAAfxC,KAAKK,OAAiC,KAAjBL,KAAKY,SAC5BZ,KAAKyC,kBAGY,KAAfzC,KAAKK,OAAiC,KAAjBL,KAAKW,SAC5BX,KAAK0C,iBAER,CACF,CAEOD,kBAEJE,EAAgBC,KAAK5C,KAAKY,UAC1BiC,EAAoBD,KAAK5C,KAAKY,UAC9BkC,EAAuBF,KAAK5C,KAAKY,SAE7BZ,KAAKK,MAAQL,KAAKY,UACpBZ,KAAKC,UAAUqC,YACb,CAAES,gBAAgB,GAClB,2CAEF/C,KAAKiB,sBAAwBjB,KAAKC,UAAUuC,oBAG9CxC,KAAKC,UAAUqC,YACb,CAAEU,iBAAiB,GACnB,gCAEFhD,KAAKiB,sBAAwBjB,KAAKC,UAAUuC,kBAE/C,CAEOE,kBAEJC,EAAgBC,KAAK5C,KAAKW,UAC1BkC,EAAoBD,KAAK5C,KAAKW,UAC9BmC,EAAuBF,KAAK5C,KAAKW,SAE7BX,KAAKK,MAAQL,KAAKW,UACpBX,KAAKC,UAAUqC,YACb,CAAEW,eAAe,GACjB,6CAEFjD,KAAKiB,sBAAwBjB,KAAKC,UAAUuC,oBAG9CxC,KAAKC,UAAUqC,YACb,CAAEU,iBAAiB,GACnB,gCAEFhD,KAAKiB,sBAAwBjB,KAAKC,UAAUuC,kBAE/C,CAEOU,gBAAgB1B,GACtBA,EAAE2B,SAASC,OAAOpD,KAAKM,KAAMN,KAAKK,MACnC,CAEQgD,oBACPC,MAAMD,oBAEFrD,KAAKC,UAAUsD,MACjBvD,KAAKC,UAAUsD,KAAKC,iBAAiB,YAAahC,GAChDxB,KAAKkD,gBAAgB1B,IAG1B,CAEQiC,uBACHzD,KAAKC,UAAUsD,MACjBvD,KAAKC,UAAUsD,KAAKG,oBAAoB,YAAalC,GACnDxB,KAAKkD,gBAAgB1B,KAIzB8B,MAAMG,sBACP,GArQe5D,EAAM8D,OAAGC,EAMlB/D,EAAcgE,gBAAG,EAOxBC,EAAA,CADCC,KACkClE,EAAAmE,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACNtE,EAAAmE,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACLtE,EAAAmE,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACPtE,EAAAmE,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACRtE,EAAAmE,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDvE,EAAAmE,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDvE,EAAAmE,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACDtE,EAAAmE,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACJtE,EAAAmE,UAAA,gBAAA,GAMdF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACLtE,EAAAmE,UAAA,eAAA,GAMbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACLtE,EAAAmE,UAAA,eAAA,GAMbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACRtE,EAAAmE,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UAC2CtE,EAAAmE,UAAA,sBAAA,GAO7DF,EAAA,CADCO,EAAM,UACoBxE,EAAAmE,UAAA,eAAA,GAO3BF,EAAA,CADCC,KAC0BlE,EAAAmE,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiBlE,EAAAmE,UAAA,iBAAA,GAzFPnE,EAAUiE,EAAA,CADtBQ,EAAc,oBACFzE"}
+{"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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"}

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

@@ -13,6 +13,11 @@ export declare class DateRangePicker extends LitElement {
      * @ignore
      */
     static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     /** Regex format for minDate / maxDate
      * @ignore
      */

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;;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;;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"}

package/components/reusable/daterangepicker/daterangepicker.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'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as r}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}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 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`
       <label
         class="datepicker-label-text"
         for=${this.name}
@@ -11,7 +11,7 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
       <div class="wrapper">
         <div class="input-wrapper">
           <input
-            class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"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=${r(this.minDate)}
-            max=${r(null!==(i=null!==(t=this.endDate)&&void 0!==t?t:this.maxDate)&&void 0!==i?i:"")}
-            step=${r(this.step)}
+            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)}
             @input=${t=>this.handleStartDate(t)}
           />
         </div>
@@ -29,16 +29,16 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
         <span class="range-span">—</span>
         <div class="input-wrapper">
           <input
-            class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             type="date"
             id="${this.name}-end"
             name="${this.name}-end"
             value=${this.endDate}
             ?disabled=${this.disabled}
             ?invalid=${this.isInvalid}
-            min=${r(null!==(s=null!==(a=this.startDate)&&void 0!==a?a:this.minDate)&&void 0!==s?s:"")}
-            max=${r(this.maxDate)}
-            step=${r(this.step)}
+            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)}
             @input=${t=>this.handleEndDate(t)}
           />
         </div>
@@ -51,5 +51,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>`}
-    `}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,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};
+    `}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};
 //# 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  /** 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","__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 } 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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"}

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

@@ -9,6 +9,11 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
  */
 export declare class Dropdown extends LitElement {
     static styles: import("lit").CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     /**
      * Associate the component with forms.
      * @ignore

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;;;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;IAWrB,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;IAWrB,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"}

package/components/reusable/dropdown/dropdown.js

@@ -128,5 +128,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           ${this.assistiveText}
         </div>
       </div>
-    `}firstUpdated(){""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){"selectAll"===e.detail.value?(e.detail.selected?(this.value=this.options.filter((e=>!e.disabled)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._setValidity()):(this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._setValidity(),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_setValidity(){this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg=""))}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const t=e.get("value");if((this.multiple?e.has("value")&&void 0!==t&&""!==t&&t!==this.value:e.has("value")&&void 0!==t&&t!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value})),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([l({type:Boolean})],v.prototype,"selectAll",void 0),e([l({type:String})],v.prototype,"selectAllText",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
+    `}firstUpdated(){""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){"selectAll"===e.detail.value?(e.detail.selected?(this.value=this.options.filter((e=>!e.disabled)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._setValidity()):(this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._setValidity(),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_setValidity(){this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg=""))}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const t=e.get("value");if((this.multiple?e.has("value")&&void 0!==t&&""!==t&&t!==this.value:e.has("value")&&void 0!==t&&t!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value})),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([l({type:Boolean})],v.prototype,"selectAll",void 0),e([l({type:String})],v.prototype,"selectAllText",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
 //# sourceMappingURL=dropdown.js.map