@kyndryl-design-system/shidoka-applications 1.1.2 → 1.1.4

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

@@ -45,7 +45,10 @@ export declare class CheckboxGroup extends LitElement {
     isInvalid: boolean;
     render(): import("lit-html").TemplateResult<1>;
     updated(changedProps: any): void;
+    private _handleCheckboxChange;
+    private _handleFormdata;
     connectedCallback(): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEtB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsBN,OAAO,CAAC,YAAY,EAAE,GAAG;IAiEzB,iBAAiB;CAuB3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
+{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEtB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsBN,OAAO,CAAC,YAAY,EAAE,GAAG;IAiElC,OAAO,CAAC,qBAAqB;IAkB7B,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAejB,oBAAoB;CAa9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as o}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as a}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./checkboxGroup.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/warning--filled/16.js';let d=class extends i{constructor(){super(...arguments),this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as o}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./checkboxGroup.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/warning--filled/16.js';let d=class extends i{constructor(){super(...arguments),this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
       <fieldset ?disabled=${this.disabled}>
         <legend>
           ${this.required?t`<span class="required">*</span>`:null}
@@ -14,5 +14,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
               </div>
             `:null}
       </fieldset>
-    `}updated(e){if(e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=new FormData;this.value.forEach((t=>{e.append(this.name,t)})),this.internals.setFormValue(e),this.required&&(this.value.length?(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""):(this.internals.setValidity({valueMissing:!0},"A selection is required."),this.internalValidationMsg=this.internals.validationMessage))}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid})))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>{const t=e.detail.value,i=[...this.value];if(i.includes(t)){const e=i.indexOf(t);i.splice(e,1)}else i.push(t);this.value=i;const s=new CustomEvent("on-checkbox-group-change",{detail:{value:i}});this.dispatchEvent(s)}))}};d.styles=l,d.formAssociated=!0,e([o({type:String})],d.prototype,"name",void 0),e([o({type:Array})],d.prototype,"value",void 0),e([o({type:Boolean})],d.prototype,"required",void 0),e([o({type:Boolean})],d.prototype,"disabled",void 0),e([o({type:String})],d.prototype,"invalidText",void 0),e([n()],d.prototype,"checkboxes",void 0),e([a()],d.prototype,"internals",void 0),e([a()],d.prototype,"internalValidationMsg",void 0),e([a()],d.prototype,"isInvalid",void 0),d=e([s("kyn-checkbox-group")],d);export{d as CheckboxGroup};
+    `}updated(e){e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")&&(this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)})),this.required&&(this.value.length?(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""):(this.internals.setValidity({valueMissing:!0},"A selection is required."),this.internalValidationMsg=this.internals.validationMessage))),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid})))}_handleCheckboxChange(e){const t=e.detail.value,i=[...this.value];if(i.includes(t)){const e=i.indexOf(t);i.splice(e,1)}else i.push(t);this.value=i;const s=new CustomEvent("on-checkbox-group-change",{detail:{value:i}});this.dispatchEvent(s)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};d.styles=l,d.formAssociated=!0,e([a({type:String})],d.prototype,"name",void 0),e([a({type:Array})],d.prototype,"value",void 0),e([a({type:Boolean})],d.prototype,"required",void 0),e([a({type:Boolean})],d.prototype,"disabled",void 0),e([a({type:String})],d.prototype,"invalidText",void 0),e([o()],d.prototype,"checkboxes",void 0),e([n()],d.prototype,"internals",void 0),e([n()],d.prototype,"internalValidationMsg",void 0),e([n()],d.prototype,"isInvalid",void 0),d=e([s("kyn-checkbox-group")],d);export{d as CheckboxGroup};
 //# sourceMappingURL=checkboxGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  value!: Array<string>;\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        <legend>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </legend>\n\n        <slot></slot>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      // set form data value\n      const entries = new FormData();\n      this.value.forEach((value) => {\n        entries.append(this.name, value);\n      });\n      this.internals.setFormValue(entries);\n\n      // set validity\n      if (this.required) {\n        if (!this.value.length) {\n          this.internals.setValidity(\n            { valueMissing: true },\n            'A selection is required.'\n          );\n          this.internalValidationMsg = this.internals.validationMessage;\n        } else {\n          this.internals.setValidity({});\n          this.internalValidationMsg = '';\n          this.invalidText = '';\n        }\n      }\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) => {\n      // set selected value\n      const value = e.detail.value;\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n\n      // emit selected value\n      const event = new CustomEvent('on-checkbox-group-change', {\n        detail: { value: newValues },\n      });\n      this.dispatchEvent(event);\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","required","disabled","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","errorIcon","updated","changedProps","has","checkboxes","forEach","checkbox","checked","value","includes","entries","FormData","append","setFormValue","length","setValidity","valueMissing","validationMessage","invalid","connectedCallback","super","addEventListener","e","detail","newValues","index","indexOf","splice","push","event","CustomEvent","dispatchEvent","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","queryAssignedElements","state","customElement"],"mappings":"+1BAmBO,IAAMA,EAAN,cAA4BC,EAA5BC,kCAWLC,KAAIC,KAAG,GAQPD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAIXH,KAAWI,YAAG,GAcdJ,KAAAK,UAAYL,KAAKM,kBAOjBN,KAAqBO,sBAAG,GAOxBP,KAASQ,WAAG,CAgHb,CA9GUC,SACP,OAAOC,CAAI;4BACaV,KAAKG;;YAErBH,KAAKE,SAAWQ,CAAI,kCAAoC;;;;;;UAM1DV,KAAKQ,UACHE,CAAI;;kCAEkBC;kBAChBX,KAAKI,aAAeJ,KAAKO;;cAG/B;;KAGT,CAEQK,QAAQC,GAQf,GAPIA,EAAaC,IAAI,SAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAAShB,KAAOD,KAAKC,IAAI,IAIzBY,EAAaC,IAAI,SAAU,CAE7Bd,KAAKe,WAAWC,SAASC,IACvBA,EAASC,QAAUlB,KAAKmB,MAAMC,SAASH,EAASE,MAAM,IAIxD,MAAME,EAAU,IAAIC,SACpBtB,KAAKmB,MAAMH,SAASG,IAClBE,EAAQE,OAAOvB,KAAKC,KAAMkB,EAAM,IAElCnB,KAAKK,UAAUmB,aAAaH,GAGxBrB,KAAKE,WACFF,KAAKmB,MAAMM,QAOdzB,KAAKK,UAAUqB,YAAY,CAAA,GAC3B1B,KAAKO,sBAAwB,GAC7BP,KAAKI,YAAc,KARnBJ,KAAKK,UAAUqB,YACb,CAAEC,cAAc,GAChB,4BAEF3B,KAAKO,sBAAwBP,KAAKK,UAAUuB,mBAOjD,CAEGf,EAAaC,IAAI,aAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAASf,SAAWF,KAAKE,QAAQ,IAIjCW,EAAaC,IAAI,aAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAASd,SAAWH,KAAKG,QAAQ,KAInCU,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAEjBd,KAAKQ,UACkB,KAArBR,KAAKI,aAAqD,KAA/BJ,KAAKO,sBAIlCP,KAAKe,WAAWC,SAASC,IACvBA,EAASY,QAAU7B,KAAKQ,SAAS,IAGtC,CAEQsB,oBACPC,MAAMD,oBAGN9B,KAAKgC,iBAAiB,sBAAuBC,IAE3C,MAAMd,EAAQc,EAAEC,OAAOf,MACjBgB,EAAY,IAAInC,KAAKmB,OAC3B,GAAIgB,EAAUf,SAASD,GAAQ,CAC7B,MAAMiB,EAAQD,EAAUE,QAAQlB,GAChCgB,EAAUG,OAAOF,EAAO,EACzB,MACCD,EAAUI,KAAKpB,GAEjBnB,KAAKmB,MAAQgB,EAGb,MAAMK,EAAQ,IAAIC,YAAY,2BAA4B,CACxDP,OAAQ,CAAEf,MAAOgB,KAEnBnC,KAAK0C,cAAcF,EAAM,GAE5B,GArKe3C,EAAM8C,OAAGC,EAMlB/C,EAAcgD,gBAAG,EAIxBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRpD,EAAAqD,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,SACItD,EAAAqD,UAAA,aAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACDvD,EAAAqD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACDvD,EAAAqD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACDpD,EAAAqD,UAAA,mBAAA,GAOjBJ,EAAA,CADCO,KACuBxD,EAAAqD,UAAA,kBAAA,GAOxBJ,EAAA,CADCQ,KACkCzD,EAAAqD,UAAA,iBAAA,GAOnCJ,EAAA,CADCQ,KAC0BzD,EAAAqD,UAAA,6BAAA,GAO3BJ,EAAA,CADCQ,KACiBzD,EAAAqD,UAAA,iBAAA,GAvDPrD,EAAaiD,EAAA,CADzBS,EAAc,uBACF1D"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  value!: Array<string>;\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        <legend>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </legend>\n\n        <slot></slot>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      // set form data value\n      // const entries = new FormData();\n      // this.value.forEach((value) => {\n      //   entries.append(this.name, value);\n      // });\n      // this.internals.setFormValue(entries);\n\n      // set validity\n      if (this.required) {\n        if (!this.value.length) {\n          this.internals.setValidity(\n            { valueMissing: true },\n            'A selection is required.'\n          );\n          this.internalValidationMsg = this.internals.validationMessage;\n        } else {\n          this.internals.setValidity({});\n          this.internalValidationMsg = '';\n          this.invalidText = '';\n        }\n      }\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n    const newValues = [...this.value];\n    if (newValues.includes(value)) {\n      const index = newValues.indexOf(value);\n      newValues.splice(index, 1);\n    } else {\n      newValues.push(value);\n    }\n    this.value = newValues;\n\n    // emit selected value\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: newValues },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    this.value.forEach((value) => {\n      e.formData.append(this.name, value);\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","required","disabled","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","errorIcon","updated","changedProps","has","checkboxes","forEach","checkbox","checked","value","includes","length","setValidity","valueMissing","validationMessage","invalid","_handleCheckboxChange","e","detail","newValues","index","indexOf","splice","push","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","queryAssignedElements","state","customElement"],"mappings":"+1BAmBO,IAAMA,EAAN,cAA4BC,EAA5BC,kCAWLC,KAAIC,KAAG,GAQPD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAIXH,KAAWI,YAAG,GAcdJ,KAAAK,UAAYL,KAAKM,kBAOjBN,KAAqBO,sBAAG,GAOxBP,KAASQ,WAAG,CA6Ib,CA3IUC,SACP,OAAOC,CAAI;4BACaV,KAAKG;;YAErBH,KAAKE,SAAWQ,CAAI,kCAAoC;;;;;;UAM1DV,KAAKQ,UACHE,CAAI;;kCAEkBC;kBAChBX,KAAKI,aAAeJ,KAAKO;;cAG/B;;KAGT,CAEQK,QAAQC,GACXA,EAAaC,IAAI,SAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAAShB,KAAOD,KAAKC,IAAI,IAIzBY,EAAaC,IAAI,WAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAASC,QAAUlB,KAAKmB,MAAMC,SAASH,EAASE,MAAM,IAWpDnB,KAAKE,WACFF,KAAKmB,MAAME,QAOdrB,KAAKK,UAAUiB,YAAY,CAAA,GAC3BtB,KAAKO,sBAAwB,GAC7BP,KAAKI,YAAc,KARnBJ,KAAKK,UAAUiB,YACb,CAAEC,cAAc,GAChB,4BAEFvB,KAAKO,sBAAwBP,KAAKK,UAAUmB,qBAS9CX,EAAaC,IAAI,aAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAASf,SAAWF,KAAKE,QAAQ,IAIjCW,EAAaC,IAAI,aAEnBd,KAAKe,WAAWC,SAASC,IACvBA,EAASd,SAAWH,KAAKG,QAAQ,KAInCU,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAEjBd,KAAKQ,UACkB,KAArBR,KAAKI,aAAqD,KAA/BJ,KAAKO,sBAIlCP,KAAKe,WAAWC,SAASC,IACvBA,EAASQ,QAAUzB,KAAKQ,SAAS,IAGtC,CAEOkB,sBAAsBC,GAC5B,MAAMR,EAAQQ,EAAEC,OAAOT,MACjBU,EAAY,IAAI7B,KAAKmB,OAC3B,GAAIU,EAAUT,SAASD,GAAQ,CAC7B,MAAMW,EAAQD,EAAUE,QAAQZ,GAChCU,EAAUG,OAAOF,EAAO,EACzB,MACCD,EAAUI,KAAKd,GAEjBnB,KAAKmB,MAAQU,EAGb,MAAMK,EAAQ,IAAIC,YAAY,2BAA4B,CACxDP,OAAQ,CAAET,MAAOU,KAEnB7B,KAAKoC,cAAcF,EACpB,CAEOG,gBAAgBV,GACtB3B,KAAKmB,MAAMH,SAASG,IAClBQ,EAAEW,SAASC,OAAOvC,KAAKC,KAAMkB,EAAM,GAEtC,CAEQqB,oBACPC,MAAMD,oBAGNxC,KAAK0C,iBAAiB,sBAAuBf,GAC3C3B,KAAK0B,sBAAsBC,KAGzB3B,KAAKK,UAAUsC,MACjB3C,KAAKK,UAAUsC,KAAKD,iBAAiB,YAAaf,GAChD3B,KAAKqC,gBAAgBV,IAG1B,CAEQiB,uBACP5C,KAAK6C,oBAAoB,sBAAuBlB,GAC9C3B,KAAK0B,sBAAsBC,KAGzB3B,KAAKK,UAAUsC,MACjB3C,KAAKK,UAAUsC,KAAKE,oBAAoB,YAAalB,GACnD3B,KAAKqC,gBAAgBV,KAIzBc,MAAMG,sBACP,GAlMe/C,EAAMiD,OAAGC,EAMlBlD,EAAcmD,gBAAG,EAIxBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRvD,EAAAwD,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,SACIzD,EAAAwD,UAAA,aAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACD1D,EAAAwD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACD1D,EAAAwD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACDvD,EAAAwD,UAAA,mBAAA,GAOjBJ,EAAA,CADCO,KACuB3D,EAAAwD,UAAA,kBAAA,GAOxBJ,EAAA,CADCQ,KACkC5D,EAAAwD,UAAA,iBAAA,GAOnCJ,EAAA,CADCQ,KAC0B5D,EAAAwD,UAAA,6BAAA,GAO3BJ,EAAA,CADCQ,KACiB5D,EAAAwD,UAAA,iBAAA,GAvDPxD,EAAaoD,EAAA,CADzBS,EAAc,uBACF7D"}

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

@@ -69,6 +69,9 @@ export declare class DatePicker extends LitElement {
     updated(changedProps: PropertyValues): void;
     private validateMinDate;
     private validateMaxDate;
+    private _handleFormdata;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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;IAwC7C,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,eAAe;CAqBxB;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;;;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;IAwC7C,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

@@ -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 s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as r}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as o}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as d,regexDateFormat as h,regexDateTimeFormat as p,regexDateTimeFormatSec as m}from"./defs.js";import v from"./datepicker.scss.js";let u=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.caption="",this.value="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.maxDate="",this.minDate="",this.step="",this.datePickerType=d.SINGLE,this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as r}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import{DATE_PICKER_TYPES as o,regexDateFormat as h,regexDateTimeFormat as p,regexDateTimeFormatSec as m}from"./defs.js";import v from"./datepicker.scss.js";let u=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.caption="",this.value="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.maxDate="",this.minDate="",this.step="",this.datePickerType=o.SINGLE,this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
       <label
         class="datepicker-label-text"
         for=${this.name}
@@ -9,12 +9,12 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
       </label>
 
       <div
-        class="${o({"input-wrapper":!0})}"
+        class="${d({"input-wrapper":!0})}"
       >
         <input
-          class="${o({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+          class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
           datePickerType=${this.datePickerType}
-          type=${this.datePickerType===d.WITHITIME?"datetime-local":"date"}
+          type=${this.datePickerType===o.WITHITIME?"datetime-local":"date"}
           id=${this.name?this.name:"datepicker-1"}
           name=${this.name}
           value=${this.value}
@@ -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.setFormValue(this.value),this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText="",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)}};u.styles=v,u.formAssociated=!0,t([n()],u.prototype,"internals",void 0),t([a({type:String})],u.prototype,"size",void 0),t([a({type:String})],u.prototype,"caption",void 0),t([a({type:String})],u.prototype,"value",void 0),t([a({type:String})],u.prototype,"name",void 0),t([a({type:Boolean})],u.prototype,"required",void 0),t([a({type:Boolean})],u.prototype,"disabled",void 0),t([a({type:String})],u.prototype,"invalidText",void 0),t([a({type:String})],u.prototype,"warnText",void 0),t([a({type:String})],u.prototype,"maxDate",void 0),t([a({type:String})],u.prototype,"minDate",void 0),t([a({type:String})],u.prototype,"step",void 0),t([a({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([s("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.invalidText="",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};
 //# 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      this.invalidText = '';\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}\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","setFormValue","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","regexDateFormat","test","regexDateTimeFormat","regexDateTimeFormatSec","rangeUnderflow","patternMismatch","rangeOverflow","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,CAuJb,CArJUC,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,CASxE,GARAlC,KAAKqC,QAAQhC,MAAQL,KAAKK,MAE1BL,KAAKC,UAAUqC,aAAatC,KAAKK,OACjCL,KAAKC,UAAUsC,YAAY,CAAA,GAC3BvC,KAAKiB,sBAAwB,GAC7BjB,KAAKS,YAAc,GAGfT,KAAKO,YAAcP,KAAKK,OAAwB,KAAfL,KAAKK,OAMxC,OALAL,KAAKC,UAAUsC,YACb,CAAEC,cAAc,GAChB,gCAEFxC,KAAKiB,sBAAwBjB,KAAKC,UAAUwC,mBAI3B,KAAfzC,KAAKK,OAAiC,KAAjBL,KAAKY,SAC5BZ,KAAK0C,kBAGY,KAAf1C,KAAKK,OAAiC,KAAjBL,KAAKW,SAC5BX,KAAK2C,iBAER,CACF,CAEOD,kBAEJE,EAAgBC,KAAK7C,KAAKY,UAC1BkC,EAAoBD,KAAK7C,KAAKY,UAC9BmC,EAAuBF,KAAK7C,KAAKY,SAE7BZ,KAAKK,MAAQL,KAAKY,UACpBZ,KAAKC,UAAUsC,YACb,CAAES,gBAAgB,GAClB,2CAEFhD,KAAKiB,sBAAwBjB,KAAKC,UAAUwC,oBAG9CzC,KAAKC,UAAUsC,YACb,CAAEU,iBAAiB,GACnB,gCAEFjD,KAAKiB,sBAAwBjB,KAAKC,UAAUwC,kBAE/C,CAEOE,kBAEJC,EAAgBC,KAAK7C,KAAKW,UAC1BmC,EAAoBD,KAAK7C,KAAKW,UAC9BoC,EAAuBF,KAAK7C,KAAKW,SAE7BX,KAAKK,MAAQL,KAAKW,UACpBX,KAAKC,UAAUsC,YACb,CAAEW,eAAe,GACjB,6CAEFlD,KAAKiB,sBAAwBjB,KAAKC,UAAUwC,oBAG9CzC,KAAKC,UAAUsC,YACb,CAAEU,iBAAiB,GACnB,gCAEFjD,KAAKiB,sBAAwBjB,KAAKC,UAAUwC,kBAE/C,GA9Oe5C,EAAMsD,OAAGC,EAMlBvD,EAAcwD,gBAAG,EAOxBC,EAAA,CADCC,KACkC1D,EAAA2D,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACN9D,EAAA2D,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACL9D,EAAA2D,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACP9D,EAAA2D,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACR9D,EAAA2D,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACD/D,EAAA2D,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACD/D,EAAA2D,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACD9D,EAAA2D,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACJ9D,EAAA2D,UAAA,gBAAA,GAMdF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACL9D,EAAA2D,UAAA,eAAA,GAMbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACL9D,EAAA2D,UAAA,eAAA,GAMbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACR9D,EAAA2D,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UAC2C9D,EAAA2D,UAAA,sBAAA,GAO7DF,EAAA,CADCO,EAAM,UACoBhE,EAAA2D,UAAA,eAAA,GAO3BF,EAAA,CADCC,KAC0B1D,EAAA2D,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiB1D,EAAA2D,UAAA,iBAAA,GAzFP3D,EAAUyD,EAAA,CADtBQ,EAAc,oBACFjE"}
+{"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      this.invalidText = '';\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":"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"}

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

@@ -70,6 +70,9 @@ export declare class DateRangePicker extends LitElement {
     private validateMinDate;
     private validateMaxDate;
     private validateStartEndDate;
+    private _handleFormdata;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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;IAwE7C,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,oBAAoB;CAa7B;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;;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;IAwE7C,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

@@ -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.invalidText="",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.invalidText="",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(){const t=`${this.startDate}:${this.endDate}`;this.internals.setFormValue(t),this.startDate>this.endDate&&(this.internals.setValidity({patternMismatch:!0},"State date must be before end date."),this.internalValidationMsg=this.internals.validationMessage)}};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.invalidText="",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.invalidText="",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};
 //# 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.invalidText = '';\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.invalidText = '';\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\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","combineVals","setFormValue","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  /** 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.invalidText = '';\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.invalidText = '';\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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"}

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

@@ -116,7 +116,11 @@ export declare class Dropdown extends LitElement {
     private handleSearchBlur;
     private handleSearchKeydown;
     private handleSearchInput;
+    private _handleClick;
+    private _handleBlur;
+    private _handleFormdata;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     private updateValue;
     private emitValue;
     updated(changedProps: any): void;

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,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;;;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;IA6JN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAsBtB,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;IAanB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBhB,iBAAiB;IA2B1B,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;CA+FnC;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,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;;;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;IA6JN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAsBtB,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;IAanB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;CA+FnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/dropdown/dropdown.js

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