@kyndryl-design-system/shidoka-applications 1.6.2 → 1.6.4

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

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

package/components/reusable/checkbox/checkboxGroup.js

@@ -53,5 +53,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._validate(!1,!1),this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!0),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},s=""!==this.invalidText?this.invalidText:this.required&&!this.value.length?"A selection is required.":"";this.internals.setValidity(i,s,this.checkboxes[0]),e&&(this.internalValidationMsg=this.internals.validationMessage),t&&this.internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}_handleSlotChange(){this.requestUpdate()}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};d.styles=n,d.formAssociated=!0,e([l({type:String})],d.prototype,"name",void 0),e([l({type:Array})],d.prototype,"value",void 0),e([l({type:Boolean})],d.prototype,"required",void 0),e([l({type:Boolean})],d.prototype,"disabled",void 0),e([l({type:Boolean})],d.prototype,"horizontal",void 0),e([l({type:Boolean})],d.prototype,"selectAll",void 0),e([l({type:Boolean})],d.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],d.prototype,"selectAllIndeterminate",void 0),e([l({type:Boolean})],d.prototype,"hideLegend",void 0),e([l({type:Boolean})],d.prototype,"filterable",void 0),e([o()],d.prototype,"searchTerm",void 0),e([l({type:Boolean})],d.prototype,"limitCheckboxes",void 0),e([o()],d.prototype,"limitRevealed",void 0),e([l({type:Object})],d.prototype,"textStrings",void 0),e([l({type:String})],d.prototype,"invalidText",void 0),e([a()],d.prototype,"checkboxes",void 0),e([o()],d.prototype,"internals",void 0),e([o()],d.prototype,"internalValidationMsg",void 0),e([o()],d.prototype,"isInvalid",void 0),d=e([s("kyn-checkbox-group")],d);export{d as CheckboxGroup};
+    `}updated(e){if(e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this._validate(!1,!1),this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),e.has("invalidText")&&void 0!==e.get("invalidText")&&this._validate(!1,!1),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},s=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:s;this.internals.setValidity(i,l,this.checkboxes[0]),e&&(this.internalValidationMsg=s),t&&this.internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}_handleSlotChange(){this.requestUpdate()}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&(this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};d.styles=n,d.formAssociated=!0,e([l({type:String})],d.prototype,"name",void 0),e([l({type:Array})],d.prototype,"value",void 0),e([l({type:Boolean})],d.prototype,"required",void 0),e([l({type:Boolean})],d.prototype,"disabled",void 0),e([l({type:Boolean})],d.prototype,"horizontal",void 0),e([l({type:Boolean})],d.prototype,"selectAll",void 0),e([l({type:Boolean})],d.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],d.prototype,"selectAllIndeterminate",void 0),e([l({type:Boolean})],d.prototype,"hideLegend",void 0),e([l({type:Boolean})],d.prototype,"filterable",void 0),e([o()],d.prototype,"searchTerm",void 0),e([l({type:Boolean})],d.prototype,"limitCheckboxes",void 0),e([o()],d.prototype,"limitRevealed",void 0),e([l({type:Object})],d.prototype,"textStrings",void 0),e([l({type:String})],d.prototype,"invalidText",void 0),e([a()],d.prototype,"checkboxes",void 0),e([o()],d.prototype,"internals",void 0),e([o()],d.prototype,"internalValidationMsg",void 0),e([o()],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 '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this.selectAll\n            ? html`\n                <kyn-checkbox\n                  class=\"select-all\"\n                  value=\"selectAll\"\n                  ?checked=${this.selectAllChecked}\n                  ?indeterminate=${this.selectAllIndeterminate}\n                  ?required=${this.required}\n                  ?disabled=${this.disabled}\n                  ?invalid=${this.invalidText !== '' ||\n                  this.internalValidationMsg !== ''}\n                >\n                  ${this.textStrings.selectAll}\n                </kyn-checkbox>\n              `\n            : null}\n\n          <slot @slotchange=${this._handleSlotChange}></slot>\n\n          ${this.limitCheckboxes\n            ? html`\n                <button\n                  class=\"reveal-toggle\"\n                  @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                >\n                  ${this.limitRevealed\n                    ? this.textStrings.showLess\n                    : html`\n                        ${this.textStrings.showMore} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = CheckedBoxesCount === this.checkboxes.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n\n      // set form data value\n      // const entries = new FormData();\n      // this.value.forEach((value) => {\n      //   entries.append(this.name, value);\n      // });\n      // this.internals.setFormValue(entries);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n\n    if (changedProps.has('limitCheckboxes')) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.required && !this.value.length\n        ? 'A selection is required.'\n        : '';\n\n    // set validity on custom element, anchor to first checkbox\n    this.internals.setValidity(Validity, ValidationMessage, this.checkboxes[0]);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    this.value.forEach((value) => {\n      e.formData.append(this.name, value);\n    });\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_handleSlotChange","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","_validate","checked","includes","CheckedBoxesCount","filter","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","validationMessage","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","requestUpdate","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"u5BAqBO,IAAMA,EAAN,cAA4BC,EAA5BC,kCAWLC,KAAIC,KAAG,GAIPD,KAAKE,MAAe,GAIpBF,KAAQG,UAAG,EAIXH,KAAQI,UAAG,EAIXJ,KAAUK,YAAG,EAIbL,KAASM,WAAG,EAMZN,KAAgBO,kBAAG,EAMnBP,KAAsBQ,wBAAG,EAIzBR,KAAUS,YAAG,EAIbT,KAAUU,YAAG,EAMbV,KAAUW,WAAG,GAIbX,KAAeY,iBAAG,EAMlBZ,KAAaa,eAAG,EAIhBb,KAAAc,YAAc,CACZR,UAAW,aACXS,SAAU,YACVC,SAAU,aAKZhB,KAAWiB,YAAG,GAcdjB,KAAAkB,UAAYlB,KAAKmB,kBAOjBnB,KAAqBoB,sBAAG,GAOxBpB,KAASqB,WAAG,CA8Tb,CA5TUC,SACP,OAAOC,CAAI;4BACavB,KAAKI;UACvBJ,KAAKU,WACHa,CAAI;;;;;;;wBAOQvB,KAAKW;4BACAa,GAAaxB,KAAKyB,cAAcD;;cAGjD;;sBAEUxB,KAAKK,WAAa,aAAe;2BAC5BL,KAAKS,WAAa,UAAY;cAC3CT,KAAKG,SAAWoB,CAAI,kCAAoC;;;;YAI1DvB,KAAKM,UACHiB,CAAI;;;;6BAIWvB,KAAKO;mCACCP,KAAKQ;8BACVR,KAAKG;8BACLH,KAAKI;6BACe,KAArBJ,KAAKiB,aACe,KAA/BjB,KAAKoB;;oBAEHpB,KAAKc,YAAYR;;gBAGvB;;8BAEgBN,KAAK0B;;YAEvB1B,KAAKY,gBACHW,CAAI;;;2BAGS,IAAMvB,KAAK2B,iBAAiB3B,KAAKa;;oBAExCb,KAAKa,cACHb,KAAKc,YAAYE,SACjBO,CAAI;0BACAvB,KAAKc,YAAYC,aAAaf,KAAK4B,WAAWC;;;gBAI1D;;;UAGJ7B,KAAKqB,UACHE,CAAI;;kCAEkBO;kBAChB9B,KAAKiB,aAAejB,KAAKoB;;cAG/B;;KAGT,CAEQW,QAAQC,GAQf,GAPIA,EAAaC,IAAI,SAEnBjC,KAAK4B,WAAWM,SAASC,IACvBA,EAASlC,KAAOD,KAAKC,IAAI,IAIzB+B,EAAaC,IAAI,SAAU,CAC7BjC,KAAKoC,WAAU,GAAO,GAGtBpC,KAAK4B,WAAWM,SAASC,IACvBA,EAASE,QAAUrC,KAAKE,MAAMoC,SAASH,EAASjC,MAAM,IAGxD,MAAMqC,EAAoBvC,KAAK4B,WAAWY,QACvCL,GAAaA,EAASE,UACvBR,OAGF7B,KAAKO,iBAAmBgC,IAAsBvC,KAAK4B,WAAWC,OAG9D7B,KAAKQ,uBACH+B,EAAoBvC,KAAK4B,WAAWC,QAAUU,EAAoB,CAQrE,CAEGP,EAAaC,IAAI,aAEnBjC,KAAK4B,WAAWM,SAASC,IACvBA,EAAShC,SAAWH,KAAKG,QAAQ,IAIjC6B,EAAaC,IAAI,aAEnBjC,KAAK4B,WAAWM,SAASC,IACvBA,EAAS/B,SAAWJ,KAAKI,QAAQ,IAKnC4B,EAAaC,IAAI,qBACmBQ,IAApCT,EAAaU,IAAI,gBAEjB1C,KAAKoC,WAAU,GAAO,IAItBJ,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAEjBjC,KAAKqB,UACkB,KAArBrB,KAAKiB,aAAqD,KAA/BjB,KAAKoB,sBAIlCpB,KAAK4B,WAAWM,SAASC,IACvBA,EAASQ,QAAU3C,KAAKqB,SAAS,KAIjCW,EAAaC,IAAI,oBACnBjC,KAAK2B,iBAAgB,EAExB,CAEOS,UAAUQ,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArB/C,KAAKiB,YAClB+B,aAAchD,KAAKG,WAAaH,KAAKE,MAAM2B,QAIvCoB,EACiB,KAArBjD,KAAKiB,YACDjB,KAAKiB,YACLjB,KAAKG,WAAaH,KAAKE,MAAM2B,OAC7B,2BACA,GAGN7B,KAAKkB,UAAUgC,YAAYJ,EAAUG,EAAmBjD,KAAK4B,WAAW,IAGpEgB,IACF5C,KAAKoB,sBAAwBpB,KAAKkB,UAAUiC,mBAI1CN,GACF7C,KAAKkB,UAAUkC,gBAElB,CAEOC,sBAAsB7B,GAC5B,MAAMtB,EAAQsB,EAAE8B,OAAOpD,MAEvB,GAAc,cAAVA,EACEsB,EAAE8B,OAAOjB,QACXrC,KAAKE,MAAQF,KAAK4B,WACfY,QAAQL,IAAcA,EAAS/B,WAC/BmD,KAAKpB,GACGA,EAASjC,QAGpBF,KAAKE,MAAQ,OAEV,CACL,MAAMsD,EAAY,IAAIxD,KAAKE,OAC3B,GAAIsD,EAAUlB,SAASpC,GAAQ,CAC7B,MAAMuD,EAAQD,EAAUE,QAAQxD,GAChCsD,EAAUG,OAAOF,EAAO,EACzB,MACCD,EAAUI,KAAK1D,GAEjBF,KAAKE,MAAQsD,CACd,CAEDxD,KAAKoC,WAAU,GAAM,GAErBpC,KAAK6D,kBACN,CAEOA,mBACN,MAAMC,EAAQ,IAAIC,YAAY,2BAA4B,CACxDT,OAAQ,CAAEpD,MAAOF,KAAKE,SAExBF,KAAKgE,cAAcF,EACpB,CAEOG,gBAAgBzC,GACtBxB,KAAKE,MAAMgC,SAAShC,IAClBsB,EAAE0C,SAASC,OAAOnE,KAAKC,KAAMC,EAAM,GAEtC,CAEOuB,cAAcD,GACpB,IAAI4C,EAAe,EAEnBpE,KAAKW,WAAaa,EAAE8B,OAAOpD,MAAMmE,cAEjCrE,KAAK4B,WAAWM,SAASoC,IAEvB,MAAMC,EAAQD,EAAWE,WAAWC,cAAc,QAAQC,cAAc,CACtEC,SAAS,IAEX,IAAIC,EAAe,GACnB,IAAK,IAAIC,EAAI,EAAGA,EAAIN,EAAM1C,OAAQgD,IAChCD,GAAgBL,EAAMM,GAAGC,YAAYC,OAInC/E,KAAKY,kBAAoBZ,KAAKa,cAE9B+D,EAAaP,cAAc/B,SAAStC,KAAKW,aACzCyD,EAAe,GAEfE,EAAWU,MAAMC,QAAU,QAC3Bb,KAEAE,EAAWU,MAAMC,QAAU,OAGzBL,EAAaP,cAAc/B,SAAStC,KAAKW,YAC3C2D,EAAWU,MAAMC,QAAU,QAE3BX,EAAWU,MAAMC,QAAU,MAE9B,GAEJ,CAEOtD,gBAAgBuD,GAGtBlF,KAAKa,cAAgBqE,EAErBlF,KAAKW,WAAa,GAElBX,KAAK4B,WAAWM,SAAQ,CAACoC,EAAYb,MAC9BzD,KAAKY,iBAAmBZ,KAAKa,cAChCyD,EAAWU,MAAMC,QAAU,QAGzBX,EAAWU,MAAMC,QADfxB,EAVM,EAWmB,QAEA,MAE9B,GAEJ,CAEO/B,oBACN1B,KAAKmF,eACN,CAEOC,iBACNpF,KAAKoB,sBAAwBpB,KAAKkB,UAAUiC,iBAC7C,CAEQkC,oBACPC,MAAMD,oBAGNrF,KAAKuF,iBAAiB,sBAAuB/D,GAC3CxB,KAAKqD,sBAAsB7B,KAGzBxB,KAAKkB,UAAUsE,OACjBxF,KAAKkB,UAAUsE,KAAKD,iBAAiB,YAAa/D,GAChDxB,KAAKiE,gBAAgBzC,KAGvBxB,KAAKuF,iBAAiB,WAAW,KAC/BvF,KAAKoF,gBAAgB,IAG1B,CAEQK,uBACPzF,KAAK0F,oBAAoB,sBAAuBlE,GAC9CxB,KAAKqD,sBAAsB7B,KAGzBxB,KAAKkB,UAAUsE,OACjBxF,KAAKkB,UAAUsE,KAAKE,oBAAoB,YAAalE,GACnDxB,KAAKiE,gBAAgBzC,KAGvBxB,KAAK0F,oBAAoB,WAAW,KAClC1F,KAAKoF,gBAAgB,KAIzBE,MAAMG,sBACP,GAvae5F,EAAM8F,OAAGC,EAMlB/F,EAAcgG,gBAAG,EAIxBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRpG,EAAAqG,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,SACKtG,EAAAqG,UAAA,aAAA,GAIvBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACDvG,EAAAqG,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACDvG,EAAAqG,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACCvG,EAAAqG,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACAvG,EAAAqG,UAAA,iBAAA,GAMlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACOvG,EAAAqG,UAAA,wBAAA,GAMzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACavG,EAAAqG,UAAA,8BAAA,GAI/BJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACCvG,EAAAqG,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACCvG,EAAAqG,UAAA,kBAAA,GAMnBJ,EAAA,CADCO,KACexG,EAAAqG,UAAA,kBAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACMvG,EAAAqG,UAAA,uBAAA,GAMxBJ,EAAA,CADCO,KACqBxG,EAAAqG,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMM,UAKhBzG,EAAAqG,UAAA,mBAAA,GAIFJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACDpG,EAAAqG,UAAA,mBAAA,GAOjBJ,EAAA,CADCS,KACuB1G,EAAAqG,UAAA,kBAAA,GAOxBJ,EAAA,CADCO,KACkCxG,EAAAqG,UAAA,iBAAA,GAOnCJ,EAAA,CADCO,KAC0BxG,EAAAqG,UAAA,6BAAA,GAO3BJ,EAAA,CADCO,KACiBxG,EAAAqG,UAAA,iBAAA,GA3GPrG,EAAaiG,EAAA,CADzBU,EAAc,uBACF3G"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this.selectAll\n            ? html`\n                <kyn-checkbox\n                  class=\"select-all\"\n                  value=\"selectAll\"\n                  ?checked=${this.selectAllChecked}\n                  ?indeterminate=${this.selectAllIndeterminate}\n                  ?required=${this.required}\n                  ?disabled=${this.disabled}\n                  ?invalid=${this.invalidText !== '' ||\n                  this.internalValidationMsg !== ''}\n                >\n                  ${this.textStrings.selectAll}\n                </kyn-checkbox>\n              `\n            : null}\n\n          <slot @slotchange=${this._handleSlotChange}></slot>\n\n          ${this.limitCheckboxes\n            ? html`\n                <button\n                  class=\"reveal-toggle\"\n                  @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                >\n                  ${this.limitRevealed\n                    ? this.textStrings.showLess\n                    : html`\n                        ${this.textStrings.showMore} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      // set checked state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.checked = this.value.includes(checkbox.value);\n      });\n\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = CheckedBoxesCount === this.checkboxes.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n\n      // set form data value\n      // const entries = new FormData();\n      // this.value.forEach((value) => {\n      //   entries.append(this.name, value);\n      // });\n      // this.internals.setFormValue(entries);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n\n    if (changedProps.has('limitCheckboxes')) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first checkbox\n    this.internals.setValidity(Validity, ValidationMessage, this.checkboxes[0]);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = InternalMsg;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    this.value.forEach((value) => {\n      e.formData.append(this.name, value);\n    });\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_handleSlotChange","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","_validate","checked","includes","CheckedBoxesCount","filter","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","requestUpdate","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}

package/components/reusable/datePicker/datepicker.js

@@ -34,5 +34,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             </div>
           `:null}
       ${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
-    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h as DatePicker};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h as DatePicker};
 //# sourceMappingURL=datepicker.js.map

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

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

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

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

package/components/reusable/daterangepicker/daterangepicker.js

@@ -52,5 +52,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             </div>
           `:null}
       ${""===this.warnText||this.isInvalid?null:i`<div class="warn">${this.warnText}</div>`}
-    `}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),(t.has("startDate")||t.has("endDate"))&&this._validate(!1,!1)}handleStartDate(t){this.startDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}handleEndDate(t){this.endDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}_validate(t,i){const e=this.inputElStart.checkValidity(),s=this.inputElEnd.checkValidity();if(e&&s)this.internals.setValidity({});else if(e){if(!s){const t=""!==this.invalidText?{...this.inputElEnd.validity,customError:!0}:this.inputElEnd.validity,i=""!==this.invalidText?this.invalidText:this.inputElEnd.validationMessage;this.internals.setValidity(t,i,this.inputElEnd)}}else{const t=""!==this.invalidText?{...this.inputElStart.validity,customError:!0}:this.inputElStart.validity,i=""!==this.invalidText?this.invalidText:this.inputElStart.validationMessage;this.internals.setValidity(t,i,this.inputElStart)}t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}_emitValue(t){const i=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate,origEvent:t}});this.dispatchEvent(i)}_handleFormdata(t){const i=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";t.formData.append(this.name,i)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=o,h.formAssociated=!0,h.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"startDate",void 0),t([a({type:String})],h.prototype,"endDate",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([d("input.date-start")],h.prototype,"inputElStart",void 0),t([d("input.date-end")],h.prototype,"inputElEnd",void 0),h=t([s("kyn-date-range-picker")],h);export{h as DateRangePicker};
+    `}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1),(t.has("startDate")||t.has("endDate"))&&this._validate(!1,!1)}handleStartDate(t){this.startDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}handleEndDate(t){this.endDate=t.target.value,this._validate(!0,!1),this._emitValue(t)}_validate(t,i){const e=this.inputElStart.checkValidity(),s=this.inputElEnd.checkValidity();if(e&&s)this.internals.setValidity({});else if(e){if(!s){const t=""!==this.invalidText?{...this.inputElEnd.validity,customError:!0}:this.inputElEnd.validity,i=""!==this.invalidText?this.invalidText:this.inputElEnd.validationMessage;this.internals.setValidity(t,i,this.inputElEnd)}}else{const t=""!==this.invalidText?{...this.inputElStart.validity,customError:!0}:this.inputElStart.validity,i=""!==this.invalidText?this.invalidText:this.inputElStart.validationMessage;this.internals.setValidity(t,i,this.inputElStart)}t&&(this.internalValidationMsg=this.inputElStart.validationMessage||this.inputElEnd.validationMessage),i&&this.internals.reportValidity()}_emitValue(t){const i=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate,origEvent:t}});this.dispatchEvent(i)}_handleFormdata(t){const i=""!==this.startDate&&""!==this.endDate?`${this.startDate}:${this.endDate}`:"";t.formData.append(this.name,i)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=o,h.formAssociated=!0,h.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"startDate",void 0),t([a({type:String})],h.prototype,"endDate",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([d("input.date-start")],h.prototype,"inputElStart",void 0),t([d("input.date-end")],h.prototype,"inputElEnd",void 0),h=t([s("kyn-date-range-picker")],h);export{h as DateRangePicker};
 //# sourceMappingURL=daterangepicker.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B;;;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;IAElB;;;OAGG;IAEH,YAAY,UAAS;IAEZ,MAAM;IA2LN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAoBjB,oBAAoB;IAiB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,SAAS;IASR,UAAU,CAAC,YAAY,EAAE,GAAG;IAgB5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAwFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B;;;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;IAElB;;;OAGG;IAEH,YAAY,UAAS;IAEZ,MAAM;IA2LN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAoBjB,oBAAoB;IAiB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,SAAS;IASR,UAAU,CAAC,YAAY,EAAE,GAAG;IAgB5B,OAAO,CAAC,YAAY,EAAE,GAAG;IA8FlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/dropdown/dropdown.js

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

package/components/reusable/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport './dropdownOption';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n  static override styles = DropdownScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Dropdown name. */\n  @property({ type: String })\n  name = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Dropdown invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /**\n   * Selected option value.\n   * @ignore\n   */\n  @state()\n  value: any = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   * @ignore\n   */\n  @state()\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              role=\"button\"\n              aria-labelledby=\"label-${this.name}\"\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.searchable ? '-1' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"Clear selections\"\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              ${this.multiple && this.selectAll\n                ? html`\n                    <kyn-dropdown-option\n                      class=\"select-all\"\n                      value=\"selectAll\"\n                      multiple\n                      ?selected=${this.selectAllChecked}\n                      ?indeterminate=${this.selectAllIndeterminate}\n                      ?disabled=${this.disabled}\n                    >\n                      ${this.selectAllText}\n                    </kyn-dropdown-option>\n                  `\n                : null}\n\n              <slot\n                id=\"children\"\n                @slotchange=${() => this.handleSlotChange()}\n              ></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n        </div>\n\n        ${this.multiple && !this.hideTags && this.value.length\n          ? html`\n              <div class=\"tags\">\n                ${this.value.map((value: string) => {\n                  const option = this.options.find(\n                    (option) => option.value === value\n                  );\n                  const nodes = option.shadowRoot\n                    .querySelector('slot')\n                    .assignedNodes({\n                      flatten: true,\n                    });\n                  let text = '';\n                  for (let i = 0; i < nodes.length; i++) {\n                    text += nodes[i].textContent.trim();\n                  }\n\n                  return html`\n                    <button\n                      class=\"tag\"\n                      aria-label=\"Deselect ${text}\"\n                      @click=${() => this.handleTagClear(option.value)}\n                    >\n                      ${text}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `;\n                })}\n              </div>\n            `\n          : null}\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\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  public resetSelection() {\n    this._updateChildren();\n    this.emitValue();\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const highlightedEl = this.options.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = this.options.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? this.options.indexOf(highlightedEl)\n      : this.options.find((option: any) => option.selected)\n      ? this.options.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    // open the listbox\n    if (target === 'button') {\n      const openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (openDropdown) {\n        this.open = true;\n        this.options[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        if (target === 'list') {\n          this.updateValue(\n            this.options[highlightedIndex].value,\n            !this.options[highlightedIndex].selected\n          );\n          this.assistiveText = 'Selected an item.';\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === this.options.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? this.options.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE && option) {\n      this.updateValue(option.value, option.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    // find matches\n    const options = this.options.filter((option: any) => {\n      const text = option.text;\n      return text.toLowerCase().startsWith(value.toLowerCase());\n    });\n\n    // reset options highlighted state\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // option highlight and scroll\n    if (value !== '' && options.length) {\n      options[0].highlighted = true;\n      options[0].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter((option) => !option.disabled)\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    this._updateSelectedOptions();\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    if (this.multiple) {\n      this.value.forEach((value: string) => {\n        e.formData.append(this.name, value);\n      });\n    } else {\n      e.formData.append(this.name, this.value);\n    }\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    const values = JSON.parse(JSON.stringify(this.value));\n\n    // set value\n    if (this.multiple) {\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.required && !this.value.length\n        ? 'Please fill out this field.'\n        : '';\n\n    // set validity on custom element, anchor to buttonEl\n    this.internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        // open dropdown upwards if closer to bottom fo viewport\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * 0.6\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\n      }\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked =\n        this.selectedOptions.length === this.options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        this.selectedOptions.length < this.options.length &&\n        this.selectedOptions.length > 0;\n\n      // close listbox\n      if (!this.multiple) {\n        this.open = false;\n      }\n\n      // set form data value\n      // if (this.multiple) {\n      //   const entries = new FormData();\n      //   this.value.forEach((value: string) => {\n      //     entries.append(this.name, value);\n      //   });\n      //   this.internals.setFormValue(entries);\n      // } else {\n      //   this.internals.setFormValue(this.value);\n      // }\n\n      // update selected option text\n      if (!this.multiple) {\n        if (this.options.length && this.value !== '') {\n          const option = this.options.find(\n            (option) => option.value === this.value\n          );\n          const nodes = option.shadowRoot.querySelector('slot').assignedNodes({\n            flatten: true,\n          });\n          let text = '';\n          for (let i = 0; i < nodes.length; i++) {\n            text += nodes[i].textContent.trim();\n          }\n          this.text = text;\n        }\n\n        // set search input value\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        if (this.searchEl) {\n          this.searchEl.value = this.searchText;\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n  }\n\n  private _updateChildren() {\n    const Slot: any = this.shadowRoot?.querySelector('slot#children');\n    const Options = Slot?.assignedElements();\n\n    // get value from selected options\n    if (Options) {\n      const values: any = [];\n      let value = '';\n      Options.forEach((option: any) => {\n        option.multiple = this.multiple;\n\n        if (option.selected) {\n          if (this.multiple) {\n            values.push(option.value);\n          } else {\n            value = option.value;\n          }\n        }\n      });\n\n      // set initial values\n      if (this.multiple) {\n        this.value = values;\n      } else {\n        this.value = value;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","hideTags","selectAll","selectAllText","selectAllChecked","selectAllIndeterminate","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","_openUpwards","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","nodes","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","handleTagClear","firstUpdated","resetSelection","_updateChildren","emitValue","focus","handleKeyboard","keyCode","forEach","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","selected","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","_validate","_updateSelectedOptions","_a","classList","contains","_b","filter","toLowerCase","startsWith","_handleClick","detail","_handleBlur","origEvent","_handleFormdata","formData","append","_handleInvalid","validationMessage","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","reportValidity","event","CustomEvent","dispatchEvent","willUpdate","changedProps","has","getBoundingClientRect","top","window","innerHeight","updated","undefined","get","selectedOptions","listboxEl","preventScroll","Slot","Options","assignedElements","styles","DropdownScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport './dropdownOption';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n  static override styles = DropdownScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Dropdown name. */\n  @property({ type: String })\n  name = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Dropdown invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /**\n   * Selected option value.\n   * @ignore\n   */\n  @state()\n  value: any = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   * @ignore\n   */\n  @state()\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              role=\"button\"\n              aria-labelledby=\"label-${this.name}\"\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.searchable ? '-1' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"Clear selections\"\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              ${this.multiple && this.selectAll\n                ? html`\n                    <kyn-dropdown-option\n                      class=\"select-all\"\n                      value=\"selectAll\"\n                      multiple\n                      ?selected=${this.selectAllChecked}\n                      ?indeterminate=${this.selectAllIndeterminate}\n                      ?disabled=${this.disabled}\n                    >\n                      ${this.selectAllText}\n                    </kyn-dropdown-option>\n                  `\n                : null}\n\n              <slot\n                id=\"children\"\n                @slotchange=${() => this.handleSlotChange()}\n              ></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n        </div>\n\n        ${this.multiple && !this.hideTags && this.value.length\n          ? html`\n              <div class=\"tags\">\n                ${this.value.map((value: string) => {\n                  const option = this.options.find(\n                    (option) => option.value === value\n                  );\n                  const nodes = option.shadowRoot\n                    .querySelector('slot')\n                    .assignedNodes({\n                      flatten: true,\n                    });\n                  let text = '';\n                  for (let i = 0; i < nodes.length; i++) {\n                    text += nodes[i].textContent.trim();\n                  }\n\n                  return html`\n                    <button\n                      class=\"tag\"\n                      aria-label=\"Deselect ${text}\"\n                      @click=${() => this.handleTagClear(option.value)}\n                    >\n                      ${text}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `;\n                })}\n              </div>\n            `\n          : null}\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\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  public resetSelection() {\n    this._updateChildren();\n    this.emitValue();\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const highlightedEl = this.options.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = this.options.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? this.options.indexOf(highlightedEl)\n      : this.options.find((option: any) => option.selected)\n      ? this.options.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    // open the listbox\n    if (target === 'button') {\n      const openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (openDropdown) {\n        this.open = true;\n        this.options[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        if (target === 'list') {\n          this.updateValue(\n            this.options[highlightedIndex].value,\n            !this.options[highlightedIndex].selected\n          );\n          this.assistiveText = 'Selected an item.';\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === this.options.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? this.options.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE && option) {\n      this.updateValue(option.value, option.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    // find matches\n    const options = this.options.filter((option: any) => {\n      const text = option.text;\n      return text.toLowerCase().startsWith(value.toLowerCase());\n    });\n\n    // reset options highlighted state\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // option highlight and scroll\n    if (value !== '' && options.length) {\n      options[0].highlighted = true;\n      options[0].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter((option) => !option.disabled)\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    this._updateSelectedOptions();\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    if (this.multiple) {\n      this.value.forEach((value: string) => {\n        e.formData.append(this.name, value);\n      });\n    } else {\n      e.formData.append(this.name, this.value);\n    }\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    const values = JSON.parse(JSON.stringify(this.value));\n\n    // set value\n    if (this.multiple) {\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this.internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        // open dropdown upwards if closer to bottom fo viewport\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * 0.6\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\n      }\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      // close listbox\n      if (!this.multiple) {\n        this.open = false;\n      }\n\n      // set form data value\n      // if (this.multiple) {\n      //   const entries = new FormData();\n      //   this.value.forEach((value: string) => {\n      //     entries.append(this.name, value);\n      //   });\n      //   this.internals.setFormValue(entries);\n      // } else {\n      //   this.internals.setFormValue(this.value);\n      // }\n\n      // update selected option text\n      if (!this.multiple) {\n        if (this.options.length && this.value !== '') {\n          const option = this.options.find(\n            (option) => option.value === this.value\n          );\n          const nodes = option.shadowRoot.querySelector('slot').assignedNodes({\n            flatten: true,\n          });\n          let text = '';\n          for (let i = 0; i < nodes.length; i++) {\n            text += nodes[i].textContent.trim();\n          }\n          this.text = text;\n        }\n\n        // set search input value\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        if (this.searchEl) {\n          this.searchEl.value = this.searchText;\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n  }\n\n  private _updateChildren() {\n    const Slot: any = this.shadowRoot?.querySelector('slot#children');\n    const Options = Slot?.assignedElements();\n\n    // get value from selected options\n    if (Options) {\n      const values: any = [];\n      let value = '';\n      Options.forEach((option: any) => {\n        option.multiple = this.multiple;\n\n        if (option.selected) {\n          if (this.multiple) {\n            values.push(option.value);\n          } else {\n            value = option.value;\n          }\n        }\n      });\n\n      // set initial values\n      if (this.multiple) {\n        this.value = values;\n      } else {\n        this.value = value;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","hideTags","selectAll","selectAllText","selectAllChecked","selectAllIndeterminate","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","_openUpwards","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","nodes","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","handleTagClear","firstUpdated","resetSelection","_updateChildren","emitValue","focus","handleKeyboard","keyCode","forEach","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","selected","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","_validate","_updateSelectedOptions","_a","classList","contains","_b","filter","toLowerCase","startsWith","_handleClick","detail","_handleBlur","origEvent","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","event","CustomEvent","dispatchEvent","willUpdate","changedProps","has","getBoundingClientRect","top","window","innerHeight","updated","undefined","get","Options","assignedElements","SelectedOptions","listboxEl","preventScroll","Slot","styles","DropdownScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}

package/components/reusable/dropdown/dropdownOption.js

@@ -27,5 +27,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
 
         ${this.selected&&!this.multiple?t`<kd-icon .icon=${n}></kd-icon>`:null}
       </li>
-    `}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});let i="";for(let e=0;e<t.length;e++)i+=t[e].textContent.trim();this.text=i}handleClick(e){if(this.disabled)return;this.multiple?this.selected=!this.selected:this.selected=!0;const t=new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}});this.dispatchEvent(t)}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}};r.styles=d,e([s({type:String})],r.prototype,"value",void 0),e([s({type:Boolean,reflect:!0})],r.prototype,"selected",void 0),e([s({type:Boolean})],r.prototype,"disabled",void 0),e([l()],r.prototype,"highlighted",void 0),e([s({type:Boolean})],r.prototype,"multiple",void 0),e([s()],r.prototype,"text",void 0),e([s({type:Boolean})],r.prototype,"indeterminate",void 0),r=e([o("kyn-dropdown-option")],r);export{r as DropdownOption};
+    `}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});let i="";for(let e=0;e<t.length;e++)i+=t[e].textContent.trim();this.text=i}handleClick(e){if(this.disabled)return;this.multiple?this.selected=!this.selected:this.selected=!0;const t=new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}});this.dispatchEvent(t)}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}};r.styles=d,e([s({type:String})],r.prototype,"value",void 0),e([s({type:Boolean,reflect:!0})],r.prototype,"selected",void 0),e([s({type:Boolean})],r.prototype,"disabled",void 0),e([l()],r.prototype,"highlighted",void 0),e([s({type:Boolean})],r.prototype,"multiple",void 0),e([s()],r.prototype,"text",void 0),e([s({type:Boolean,reflect:!0})],r.prototype,"indeterminate",void 0),r=e([o("kyn-dropdown-option")],r);export{r as DropdownOption};
 //# sourceMappingURL=dropdownOption.js.map

package/components/reusable/dropdown/dropdownOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DropdownOptionScss from './dropdownOption.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport checkmarkIcon from '@carbon/icons/es/checkmark/20';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @slot unnamed - Slot for option text.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n  static override styles = DropdownOptionScss;\n\n  /** Option value. */\n  @property({ type: String })\n  value = '';\n\n  /** Option selected state. */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** Option disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Option highlighted state for keyboard navigation, automatically derived.\n   * @ignore\n   */\n  @state()\n  highlighted = false;\n\n  /** Multi-select state, derived from parent.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Option text, automatically derived.\n   * @ignore\n   */\n  @property()\n  text: any = '';\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <li\n        role=\"option\"\n        ?highlighted=${this.highlighted}\n        ?selected=${this.selected}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @click=${(e: any) => this.handleClick(e)}\n        @blur=${(e: any) => this.handleBlur(e)}\n        tabindex=\"-1\"\n      >\n        <span>\n          ${this.multiple\n            ? html`\n                <input\n                  type=\"checkbox\"\n                  tabindex=\"-1\"\n                  @mousedown=${(e: any) => e.preventDefault()}\n                  .checked=${this.selected}\n                  ?checked=${this.selected}\n                  ?disabled=${this.disabled}\n                  .indeterminate=${this.indeterminate}\n                />\n              `\n            : null}\n\n          <slot @slotchange=${(e: any) => this.handleSlotChange(e)}></slot>\n        </span>\n\n        ${this.selected && !this.multiple\n          ? html`<kd-icon .icon=${checkmarkIcon}></kd-icon>`\n          : null}\n      </li>\n    `;\n  }\n\n  private handleSlotChange(e: any) {\n    // set text prop from slotted text, for ease of access\n    const nodes = e.target.assignedNodes({ flatten: true });\n    let text = '';\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this.text = text;\n  }\n\n  private handleClick(e: Event) {\n    // prevent click if disabled\n    if (this.disabled) {\n      return;\n    }\n\n    // update selected state\n    if (this.multiple) {\n      this.selected = !this.selected;\n    } else {\n      this.selected = true;\n    }\n\n    // emit selected value, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        selected: this.selected,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleBlur(e: any) {\n    // emit blur event, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-blur', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown-option': DropdownOption;\n  }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","highlighted","multiple","text","indeterminate","render","html","e","handleClick","handleBlur","preventDefault","handleSlotChange","checkmarkIcon","nodes","target","assignedNodes","flatten","i","length","textContent","trim","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":"0zBAYO,IAAMA,EAAN,cAA6BC,EAA7BC,kCAKLC,KAAKC,MAAG,GAIRD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAOXH,KAAWI,aAAG,EAMdJ,KAAQK,UAAG,EAOXL,KAAIM,KAAQ,GAIZN,KAAaO,eAAG,CAwFjB,CAtFUC,SACP,OAAOC,CAAI;;;uBAGQT,KAAKI;oBACRJ,KAAKE;oBACLF,KAAKG;oBACLH,KAAKK;iBACPK,GAAWV,KAAKW,YAAYD;gBAC7BA,GAAWV,KAAKY,WAAWF;;;;YAIhCV,KAAKK,SACHI,CAAI;;;;+BAIcC,GAAWA,EAAEG;6BAChBb,KAAKE;6BACLF,KAAKE;8BACJF,KAAKG;mCACAH,KAAKO;;gBAG1B;;8BAEiBG,GAAWV,KAAKc,iBAAiBJ;;;UAGtDV,KAAKE,WAAaF,KAAKK,SACrBI,CAAI,kBAAkBM,eACtB;;KAGT,CAEOD,iBAAiBJ,GAEvB,MAAMM,EAAQN,EAAEO,OAAOC,cAAc,CAAEC,SAAS,IAChD,IAAIb,EAAO,GAEX,IAAK,IAAIc,EAAI,EAAGA,EAAIJ,EAAMK,OAAQD,IAChCd,GAAQU,EAAMI,GAAGE,YAAYC,OAG/BvB,KAAKM,KAAOA,CACb,CAEOK,YAAYD,GAElB,GAAIV,KAAKG,SACP,OAIEH,KAAKK,SACPL,KAAKE,UAAYF,KAAKE,SAEtBF,KAAKE,UAAW,EAIlB,MAAMsB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACN1B,SAAUF,KAAKE,SACfD,MAAOD,KAAKC,MACZ4B,UAAWnB,KAGfV,KAAK8B,cAAcN,EACpB,CAEOZ,WAAWF,GAEjB,MAAMc,EAAQ,IAAIC,YAAY,UAAW,CACvCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNC,UAAWnB,KAGfV,KAAK8B,cAAcN,EACpB,GA3He3B,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPvC,EAAAwC,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnB1C,EAAAwC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDzC,EAAAwC,UAAA,gBAAA,GAOjBJ,EAAA,CADCO,KACmB3C,EAAAwC,UAAA,mBAAA,GAMpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDzC,EAAAwC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,KACcrC,EAAAwC,UAAA,YAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIzC,EAAAwC,UAAA,qBAAA,GArCXxC,EAAcoC,EAAA,CAD1BQ,EAAc,wBACF5C"}
+{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DropdownOptionScss from './dropdownOption.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport checkmarkIcon from '@carbon/icons/es/checkmark/20';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @slot unnamed - Slot for option text.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n  static override styles = DropdownOptionScss;\n\n  /** Option value. */\n  @property({ type: String })\n  value = '';\n\n  /** Option selected state. */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** Option disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Option highlighted state for keyboard navigation, automatically derived.\n   * @ignore\n   */\n  @state()\n  highlighted = false;\n\n  /** Multi-select state, derived from parent.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Option text, automatically derived.\n   * @ignore\n   */\n  @property()\n  text: any = '';\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <li\n        role=\"option\"\n        ?highlighted=${this.highlighted}\n        ?selected=${this.selected}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @click=${(e: any) => this.handleClick(e)}\n        @blur=${(e: any) => this.handleBlur(e)}\n        tabindex=\"-1\"\n      >\n        <span>\n          ${this.multiple\n            ? html`\n                <input\n                  type=\"checkbox\"\n                  tabindex=\"-1\"\n                  @mousedown=${(e: any) => e.preventDefault()}\n                  .checked=${this.selected}\n                  ?checked=${this.selected}\n                  ?disabled=${this.disabled}\n                  .indeterminate=${this.indeterminate}\n                />\n              `\n            : null}\n\n          <slot @slotchange=${(e: any) => this.handleSlotChange(e)}></slot>\n        </span>\n\n        ${this.selected && !this.multiple\n          ? html`<kd-icon .icon=${checkmarkIcon}></kd-icon>`\n          : null}\n      </li>\n    `;\n  }\n\n  private handleSlotChange(e: any) {\n    // set text prop from slotted text, for ease of access\n    const nodes = e.target.assignedNodes({ flatten: true });\n    let text = '';\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this.text = text;\n  }\n\n  private handleClick(e: Event) {\n    // prevent click if disabled\n    if (this.disabled) {\n      return;\n    }\n\n    // update selected state\n    if (this.multiple) {\n      this.selected = !this.selected;\n    } else {\n      this.selected = true;\n    }\n\n    // emit selected value, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        selected: this.selected,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleBlur(e: any) {\n    // emit blur event, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-blur', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown-option': DropdownOption;\n  }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","highlighted","multiple","text","indeterminate","render","html","e","handleClick","handleBlur","preventDefault","handleSlotChange","checkmarkIcon","nodes","target","assignedNodes","flatten","i","length","textContent","trim","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":"0zBAYO,IAAMA,EAAN,cAA6BC,EAA7BC,kCAKLC,KAAKC,MAAG,GAIRD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAOXH,KAAWI,aAAG,EAMdJ,KAAQK,UAAG,EAOXL,KAAIM,KAAQ,GAIZN,KAAaO,eAAG,CAwFjB,CAtFUC,SACP,OAAOC,CAAI;;;uBAGQT,KAAKI;oBACRJ,KAAKE;oBACLF,KAAKG;oBACLH,KAAKK;iBACPK,GAAWV,KAAKW,YAAYD;gBAC7BA,GAAWV,KAAKY,WAAWF;;;;YAIhCV,KAAKK,SACHI,CAAI;;;;+BAIcC,GAAWA,EAAEG;6BAChBb,KAAKE;6BACLF,KAAKE;8BACJF,KAAKG;mCACAH,KAAKO;;gBAG1B;;8BAEiBG,GAAWV,KAAKc,iBAAiBJ;;;UAGtDV,KAAKE,WAAaF,KAAKK,SACrBI,CAAI,kBAAkBM,eACtB;;KAGT,CAEOD,iBAAiBJ,GAEvB,MAAMM,EAAQN,EAAEO,OAAOC,cAAc,CAAEC,SAAS,IAChD,IAAIb,EAAO,GAEX,IAAK,IAAIc,EAAI,EAAGA,EAAIJ,EAAMK,OAAQD,IAChCd,GAAQU,EAAMI,GAAGE,YAAYC,OAG/BvB,KAAKM,KAAOA,CACb,CAEOK,YAAYD,GAElB,GAAIV,KAAKG,SACP,OAIEH,KAAKK,SACPL,KAAKE,UAAYF,KAAKE,SAEtBF,KAAKE,UAAW,EAIlB,MAAMsB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACN1B,SAAUF,KAAKE,SACfD,MAAOD,KAAKC,MACZ4B,UAAWnB,KAGfV,KAAK8B,cAAcN,EACpB,CAEOZ,WAAWF,GAEjB,MAAMc,EAAQ,IAAIC,YAAY,UAAW,CACvCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNC,UAAWnB,KAGfV,KAAK8B,cAAcN,EACpB,GA3He3B,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPvC,EAAAwC,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnB1C,EAAAwC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDzC,EAAAwC,UAAA,gBAAA,GAOjBJ,EAAA,CADCO,KACmB3C,EAAAwC,UAAA,mBAAA,GAMpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDzC,EAAAwC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,KACcrC,EAAAwC,UAAA,YAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACd1C,EAAAwC,UAAA,qBAAA,GArCXxC,EAAcoC,EAAA,CAD1BQ,EAAc,wBACF5C"}

package/components/reusable/radioButton/radioButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,+BAAwB;IAE9C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,yCAAyC;IAEzC,IAAI,SAAM;IAEV,yCAAyC;IAEzC,KAAK,SAAM;IAEX,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,YAAY,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE1B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwBN,OAAO,CAAC,YAAY,EAAE,GAAG;IA0DlC,OAAO,CAAC,SAAS;IAiCjB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAmBjB,oBAAoB,IAAI,IAAI;CAiBtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,gBAAgB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"radioButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,+BAAwB;IAE9C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,yCAAyC;IAEzC,IAAI,SAAM;IAEV,yCAAyC;IAEzC,KAAK,SAAM;IAEX,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,YAAY,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE1B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwBN,OAAO,CAAC,YAAY,EAAE,GAAG;IA0DlC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB;IAmBjB,oBAAoB,IAAI,IAAI;CAiBtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,gBAAgB,CAAC;KAC5C;CACF"}

package/components/reusable/radioButton/radioButtonGroup.js

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

package/components/reusable/radioButton/radioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioButtonGroup.js","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport RadioButtonGroupScss from './radioButtonGroup.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Radio button group container.\n * @fires on-radio-group-change - Captures the change event and emits the selected value.\n * @slot unnamed - Slot for individual radio buttons.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-radio-button-group')\nexport class RadioButtonGroup extends LitElement {\n  static override styles = RadioButtonGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Radio button input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Radio button group selected value. */\n  @property({ type: String })\n  value = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Radio button group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Radio button group horizontal layout. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Radio button group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted radio buttons.\n   * @ignore\n   */\n  @queryAssignedElements()\n  radioButtons!: 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        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend>\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          <slot></slot>\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      // set checked state for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.checked = radio.value === this.value;\n      });\n\n      // set form data value\n      // this.internals.setFormValue(this.value);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //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      // set invalid state for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.invalid = this.isInvalid;\n      });\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && this.value === '',\n    };\n\n    // set validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.required && this.value === ''\n        ? 'A selection is required.'\n        : '';\n\n    // set validity on custom element, anchor to first radio\n    this.internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.radioButtons[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleRadioChange(e: any) {\n    // set selected value\n    this.value = e.detail.value;\n\n    this._validate(false, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-radio-group-change', {\n      detail: { value: e.detail.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child radio buttons change event\n    this.addEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-radio-button-group': RadioButtonGroup;\n  }\n}\n"],"names":["RadioButtonGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","errorIcon","updated","changedProps","has","radioButtons","forEach","radio","_validate","checked","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","ValidationMessage","setValidity","validationMessage","reportValidity","_handleRadioChange","e","detail","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","RadioButtonGroupScss","formAssociated","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","state","customElement"],"mappings":"k2BAmBO,IAAMA,EAAN,cAA+BC,EAA/BC,kCAWLC,KAAIC,KAAG,GAIPD,KAAKE,MAAG,GAIRF,KAAQG,UAAG,EAIXH,KAAQI,UAAG,EAIXJ,KAAUK,YAAG,EAIbL,KAAWM,YAAG,GAcdN,KAAAO,UAAYP,KAAKQ,kBAOjBR,KAAqBS,sBAAG,GAOxBT,KAASU,WAAG,CA8Kb,CA5KUC,SACP,OAAOC,CAAI;4BACaZ,KAAKI;sBACXJ,KAAKK,WAAa,aAAe;;cAEzCL,KAAKG,SAAWS,CAAI,kCAAoC;;;;;;;UAO5DZ,KAAKU,UACHE,CAAI;;kCAEkBC;kBAChBb,KAAKM,aAAeN,KAAKS;;cAG/B;;KAGT,CAEQK,QAAQC,GACXA,EAAaC,IAAI,SAEnBhB,KAAKiB,aAAaC,SAASC,IACzBA,EAAMlB,KAAOD,KAAKC,IAAI,IAItBc,EAAaC,IAAI,WACnBhB,KAAKoB,WAAU,GAAO,GAGtBpB,KAAKiB,aAAaC,SAASC,IACzBA,EAAME,QAAUF,EAAMjB,QAAUF,KAAKE,KAAK,KAO1Ca,EAAaC,IAAI,aAEnBhB,KAAKiB,aAAaC,SAASC,IACzBA,EAAMhB,SAAWH,KAAKG,QAAQ,IAI9BY,EAAaC,IAAI,aAEnBhB,KAAKiB,aAAaC,SAASC,IACzBA,EAAMf,SAAWJ,KAAKI,QAAQ,IAKhCW,EAAaC,IAAI,qBACmBM,IAApCP,EAAaQ,IAAI,gBAEjBvB,KAAKoB,WAAU,GAAO,IAItBL,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBhB,KAAKU,UACkB,KAArBV,KAAKM,aAAqD,KAA/BN,KAAKS,sBAKlCT,KAAKiB,aAAaC,SAASC,IACzBA,EAAMK,QAAUxB,KAAKU,SAAS,IAGnC,CAEOU,UAAUK,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArB5B,KAAKM,YAClBuB,aAAc7B,KAAKG,UAA2B,KAAfH,KAAKE,OAIhC4B,EACiB,KAArB9B,KAAKM,YACDN,KAAKM,YACLN,KAAKG,UAA2B,KAAfH,KAAKE,MACtB,2BACA,GAGNF,KAAKO,UAAUwB,YACbJ,EACAG,EACA9B,KAAKiB,aAAa,IAIhBQ,IACFzB,KAAKS,sBAAwBT,KAAKO,UAAUyB,mBAI1CN,GACF1B,KAAKO,UAAU0B,gBAElB,CAEOC,mBAAmBC,GAEzBnC,KAAKE,MAAQiC,EAAEC,OAAOlC,MAEtBF,KAAKoB,WAAU,GAAO,GAGtB,MAAMiB,EAAQ,IAAIC,YAAY,wBAAyB,CACrDF,OAAQ,CAAElC,MAAOiC,EAAEC,OAAOlC,SAE5BF,KAAKuC,cAAcF,EACpB,CAEOG,gBAAgBL,GACtBA,EAAEM,SAASC,OAAO1C,KAAKC,KAAMD,KAAKE,MACnC,CAEOyC,iBACN3C,KAAKS,sBAAwBT,KAAKO,UAAUyB,iBAC7C,CAEQY,oBACPC,MAAMD,oBAGN5C,KAAK8C,iBAAiB,mBAAoBX,GACxCnC,KAAKkC,mBAAmBC,KAGtBnC,KAAKO,UAAUwC,OACjB/C,KAAKO,UAAUwC,KAAKD,iBAAiB,YAAaX,GAChDnC,KAAKwC,gBAAgBL,KAGvBnC,KAAK8C,iBAAiB,WAAW,KAC/B9C,KAAK2C,gBAAgB,IAG1B,CAEQK,uBACPhD,KAAKiD,oBAAoB,mBAAoBd,GAC3CnC,KAAKkC,mBAAmBC,KAGtBnC,KAAKO,UAAUwC,OACjB/C,KAAKO,UAAUwC,KAAKE,oBAAoB,YAAad,GACnDnC,KAAKwC,gBAAgBL,KAGvBnC,KAAKiD,oBAAoB,WAAW,KAClCjD,KAAK2C,gBAAgB,KAIzBE,MAAMG,sBACP,GAvOenD,EAAMqD,OAAGC,EAMlBtD,EAAcuD,gBAAG,EAIxBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR3D,EAAA4D,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP3D,EAAA4D,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD7D,EAAA4D,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD7D,EAAA4D,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACC7D,EAAA4D,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACD3D,EAAA4D,UAAA,mBAAA,GAOjBJ,EAAA,CADCM,KACyB9D,EAAA4D,UAAA,oBAAA,GAO1BJ,EAAA,CADCO,KACkC/D,EAAA4D,UAAA,iBAAA,GAOnCJ,EAAA,CADCO,KAC0B/D,EAAA4D,UAAA,6BAAA,GAO3BJ,EAAA,CADCO,KACiB/D,EAAA4D,UAAA,iBAAA,GA3DP5D,EAAgBwD,EAAA,CAD5BQ,EAAc,2BACFhE"}
+{"version":3,"file":"radioButtonGroup.js","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport RadioButtonGroupScss from './radioButtonGroup.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Radio button group container.\n * @fires on-radio-group-change - Captures the change event and emits the selected value.\n * @slot unnamed - Slot for individual radio buttons.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-radio-button-group')\nexport class RadioButtonGroup extends LitElement {\n  static override styles = RadioButtonGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Radio button input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Radio button group selected value. */\n  @property({ type: String })\n  value = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Radio button group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Radio button group horizontal layout. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Radio button group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted radio buttons.\n   * @ignore\n   */\n  @queryAssignedElements()\n  radioButtons!: 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        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend>\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          <slot></slot>\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('name')) {\n      // set name for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      this._validate(false, false);\n\n      // set checked state for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.checked = radio.value === this.value;\n      });\n\n      // set form data value\n      // this.internals.setFormValue(this.value);\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.required = this.required;\n      });\n    }\n\n    if (changedProps.has('disabled')) {\n      // set disabled for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n\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      // set invalid state for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.invalid = this.isInvalid;\n      });\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && this.value === '',\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && this.value === '' ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first radio\n    this.internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.radioButtons[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = InternalMsg;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleRadioChange(e: any) {\n    // set selected value\n    this.value = e.detail.value;\n\n    this._validate(false, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-radio-group-change', {\n      detail: { value: e.detail.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child radio buttons change event\n    this.addEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-radio-button-group': RadioButtonGroup;\n  }\n}\n"],"names":["RadioButtonGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","errorIcon","updated","changedProps","has","radioButtons","forEach","radio","_validate","checked","undefined","get","invalid","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleRadioChange","e","detail","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","RadioButtonGroupScss","formAssociated","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","state","customElement"],"mappings":"k2BAmBO,IAAMA,EAAN,cAA+BC,EAA/BC,kCAWLC,KAAIC,KAAG,GAIPD,KAAKE,MAAG,GAIRF,KAAQG,UAAG,EAIXH,KAAQI,UAAG,EAIXJ,KAAUK,YAAG,EAIbL,KAAWM,YAAG,GAcdN,KAAAO,UAAYP,KAAKQ,kBAOjBR,KAAqBS,sBAAG,GAOxBT,KAASU,WAAG,CA4Kb,CA1KUC,SACP,OAAOC,CAAI;4BACaZ,KAAKI;sBACXJ,KAAKK,WAAa,aAAe;;cAEzCL,KAAKG,SAAWS,CAAI,kCAAoC;;;;;;;UAO5DZ,KAAKU,UACHE,CAAI;;kCAEkBC;kBAChBb,KAAKM,aAAeN,KAAKS;;cAG/B;;KAGT,CAEQK,QAAQC,GACXA,EAAaC,IAAI,SAEnBhB,KAAKiB,aAAaC,SAASC,IACzBA,EAAMlB,KAAOD,KAAKC,IAAI,IAItBc,EAAaC,IAAI,WACnBhB,KAAKoB,WAAU,GAAO,GAGtBpB,KAAKiB,aAAaC,SAASC,IACzBA,EAAME,QAAUF,EAAMjB,QAAUF,KAAKE,KAAK,KAO1Ca,EAAaC,IAAI,aAEnBhB,KAAKiB,aAAaC,SAASC,IACzBA,EAAMhB,SAAWH,KAAKG,QAAQ,IAI9BY,EAAaC,IAAI,aAEnBhB,KAAKiB,aAAaC,SAASC,IACzBA,EAAMf,SAAWJ,KAAKI,QAAQ,IAKhCW,EAAaC,IAAI,qBACmBM,IAApCP,EAAaQ,IAAI,gBAEjBvB,KAAKoB,WAAU,GAAO,IAItBL,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBhB,KAAKU,UACkB,KAArBV,KAAKM,aAAqD,KAA/BN,KAAKS,sBAKlCT,KAAKiB,aAAaC,SAASC,IACzBA,EAAMK,QAAUxB,KAAKU,SAAS,IAGnC,CAEOU,UAAUK,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArB5B,KAAKM,YAClBuB,aAAc7B,KAAKG,UAA2B,KAAfH,KAAKE,OAIhC4B,EACJ9B,KAAKG,UAA2B,KAAfH,KAAKE,MAAe,2BAA6B,GAC9D6B,EACiB,KAArB/B,KAAKM,YAAqBN,KAAKM,YAAcwB,EAG/C9B,KAAKO,UAAUyB,YACbL,EACAI,EACA/B,KAAKiB,aAAa,IAIhBQ,IACFzB,KAAKS,sBAAwBqB,GAI3BJ,GACF1B,KAAKO,UAAU0B,gBAElB,CAEOC,mBAAmBC,GAEzBnC,KAAKE,MAAQiC,EAAEC,OAAOlC,MAEtBF,KAAKoB,WAAU,GAAO,GAGtB,MAAMiB,EAAQ,IAAIC,YAAY,wBAAyB,CACrDF,OAAQ,CAAElC,MAAOiC,EAAEC,OAAOlC,SAE5BF,KAAKuC,cAAcF,EACpB,CAEOG,gBAAgBL,GACtBA,EAAEM,SAASC,OAAO1C,KAAKC,KAAMD,KAAKE,MACnC,CAEOyC,iBACN3C,KAAKoB,WAAU,GAAM,EACtB,CAEQwB,oBACPC,MAAMD,oBAGN5C,KAAK8C,iBAAiB,mBAAoBX,GACxCnC,KAAKkC,mBAAmBC,KAGtBnC,KAAKO,UAAUwC,OACjB/C,KAAKO,UAAUwC,KAAKD,iBAAiB,YAAaX,GAChDnC,KAAKwC,gBAAgBL,KAGvBnC,KAAK8C,iBAAiB,WAAW,KAC/B9C,KAAK2C,gBAAgB,IAG1B,CAEQK,uBACPhD,KAAKiD,oBAAoB,mBAAoBd,GAC3CnC,KAAKkC,mBAAmBC,KAGtBnC,KAAKO,UAAUwC,OACjB/C,KAAKO,UAAUwC,KAAKE,oBAAoB,YAAad,GACnDnC,KAAKwC,gBAAgBL,KAGvBnC,KAAKiD,oBAAoB,WAAW,KAClCjD,KAAK2C,gBAAgB,KAIzBE,MAAMG,sBACP,GArOenD,EAAMqD,OAAGC,EAMlBtD,EAAcuD,gBAAG,EAIxBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR3D,EAAA4D,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP3D,EAAA4D,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD7D,EAAA4D,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD7D,EAAA4D,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACC7D,EAAA4D,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACD3D,EAAA4D,UAAA,mBAAA,GAOjBJ,EAAA,CADCM,KACyB9D,EAAA4D,UAAA,oBAAA,GAO1BJ,EAAA,CADCO,KACkC/D,EAAA4D,UAAA,iBAAA,GAOnCJ,EAAA,CADCO,KAC0B/D,EAAA4D,UAAA,6BAAA,GAO3BJ,EAAA,CADCO,KACiB/D,EAAA4D,UAAA,iBAAA,GA3DP5D,EAAgBwD,EAAA,CAD5BQ,EAAc,2BACFhE"}

package/components/reusable/textArea/textArea.js

@@ -33,5 +33,5 @@ ${this.value}</textarea
               </div>
             `:null}
       </div>
-    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&this._validate(!1,!1),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0)}_validate(t,e){const i=""!==this.invalidText?{...this.textareaEl.validity,customError:!0}:this.textareaEl.validity,a=""!==this.invalidText?this.invalidText:this.textareaEl.validationMessage;this.internals.setValidity(i,a,this.textareaEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()}))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=r,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([s({type:String})],h.prototype,"caption",void 0),t([s({type:String})],h.prototype,"value",void 0),t([s({type:String})],h.prototype,"placeholder",void 0),t([s({type:String})],h.prototype,"name",void 0),t([s({type:Boolean})],h.prototype,"required",void 0),t([s({type:Boolean})],h.prototype,"disabled",void 0),t([s({type:String})],h.prototype,"invalidText",void 0),t([s({type:Number})],h.prototype,"maxLength",void 0),t([s({type:Number})],h.prototype,"minLength",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([l("textarea")],h.prototype,"textareaEl",void 0),h=t([a("kyn-text-area")],h);export{h as TextArea};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&this._validate(!1,!1),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.textareaEl.validity,customError:!0}:this.textareaEl.validity,a=""!==this.invalidText?this.invalidText:this.textareaEl.validationMessage;this.internals.setValidity(i,a,this.textareaEl),t&&(this.internalValidationMsg=this.textareaEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()}))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=r,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([s({type:String})],h.prototype,"caption",void 0),t([s({type:String})],h.prototype,"value",void 0),t([s({type:String})],h.prototype,"placeholder",void 0),t([s({type:String})],h.prototype,"name",void 0),t([s({type:Boolean})],h.prototype,"required",void 0),t([s({type:Boolean})],h.prototype,"disabled",void 0),t([s({type:String})],h.prototype,"invalidText",void 0),t([s({type:Number})],h.prototype,"maxLength",void 0),t([s({type:Number})],h.prototype,"minLength",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([l("textarea")],h.prototype,"textareaEl",void 0),h=t([a("kyn-text-area")],h);export{h as TextArea};
 //# sourceMappingURL=textArea.js.map

package/components/reusable/textArea/textArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n  static override styles = TextAreaScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  /**\n   * Queries the <textarea> DOM element.\n   * @ignore\n   */\n  @query('textarea')\n  textareaEl!: HTMLTextAreaElement;\n\n  override render() {\n    return html`\n      <div class=\"text-area\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"input-wrapper\">\n          <textarea\n            id=${this.name}\n            name=${this.name}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this.handleInput(e)}\n          >\n${this.value}</textarea\n          >\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.maxLength\n            ? html`\n                <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n              `\n            : null}\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      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\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.has('value')) {\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from textareaEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.textareaEl.validity, customError: true }\n        : this.textareaEl.validity;\n    // set validationMessage to invalidText if present, otherwise use textareaEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.textareaEl.validationMessage;\n\n    // set validity on custom element, anchor to textareaEl\n    this.internals.setValidity(Validity, ValidationMessage, this.textareaEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    this.addEventListener('invalid', () => {\n      this._handleInvalid();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-area': TextArea;\n  }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","internalValidationMsg","isInvalid","render","html","ifDefined","minLength","maxLength","e","handleInput","errorIcon","length","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","textareaEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextAreaScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","query","customElement"],"mappings":"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"}
+{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n  static override styles = TextAreaScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  /**\n   * Queries the <textarea> DOM element.\n   * @ignore\n   */\n  @query('textarea')\n  textareaEl!: HTMLTextAreaElement;\n\n  override render() {\n    return html`\n      <div class=\"text-area\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"input-wrapper\">\n          <textarea\n            id=${this.name}\n            name=${this.name}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this.handleInput(e)}\n          >\n${this.value}</textarea\n          >\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.maxLength\n            ? html`\n                <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n              `\n            : null}\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      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\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.has('value')) {\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from textareaEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.textareaEl.validity, customError: true }\n        : this.textareaEl.validity;\n    // set validationMessage to invalidText if present, otherwise use textareaEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.textareaEl.validationMessage;\n\n    // set validity on custom element, anchor to textareaEl\n    this.internals.setValidity(Validity, ValidationMessage, this.textareaEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.textareaEl.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\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    this.addEventListener('invalid', () => {\n      this._handleInvalid();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-area': TextArea;\n  }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","internalValidationMsg","isInvalid","render","html","ifDefined","minLength","maxLength","e","handleInput","errorIcon","length","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","textareaEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextAreaScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","query","customElement"],"mappings":"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"}

package/components/reusable/textInput/textInput.js

@@ -50,5 +50,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               </div>
             `:null}
       </div>
-    `}_handleInput(t){this.value=t.target.value,this._validate(!0,!1),this._emitValue(t)}_handleClear(){this.value="",this.inputEl.value="",this._validate(!0,!1),this._emitValue()}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0)}firstUpdated(){this.determineIfSlotted()}determineIfSlotted(){this.iconSlotted=!!this.iconSlot.length}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};c.styles=h,c.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},c.formAssociated=!0,t([n()],c.prototype,"internals",void 0),t([o({type:String})],c.prototype,"type",void 0),t([o({type:String})],c.prototype,"size",void 0),t([o({type:String})],c.prototype,"caption",void 0),t([o({type:String})],c.prototype,"value",void 0),t([o({type:String})],c.prototype,"placeholder",void 0),t([o({type:String})],c.prototype,"name",void 0),t([o({type:Boolean})],c.prototype,"required",void 0),t([o({type:Boolean})],c.prototype,"disabled",void 0),t([o({type:String})],c.prototype,"invalidText",void 0),t([o({type:String})],c.prototype,"pattern",void 0),t([o({type:Number})],c.prototype,"maxLength",void 0),t([o({type:Number})],c.prototype,"minLength",void 0),t([o({type:Boolean})],c.prototype,"iconRight",void 0),t([o({type:Boolean})],c.prototype,"hideLabel",void 0),t([a("input")],c.prototype,"inputEl",void 0),t([n()],c.prototype,"iconSlotted",void 0),t([l({slot:"icon"})],c.prototype,"iconSlot",void 0),t([n()],c.prototype,"internalValidationMsg",void 0),t([n()],c.prototype,"isInvalid",void 0),c=t([s("kyn-text-input")],c);export{c as TextInput};
+    `}_handleInput(t){this.value=t.target.value,this._validate(!0,!1),this._emitValue(t)}_handleClear(){this.value="",this.inputEl.value="",this._validate(!0,!1),this._emitValue()}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}firstUpdated(){this.determineIfSlotted()}determineIfSlotted(){this.iconSlotted=!!this.iconSlot.length}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};c.styles=h,c.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},c.formAssociated=!0,t([n()],c.prototype,"internals",void 0),t([o({type:String})],c.prototype,"type",void 0),t([o({type:String})],c.prototype,"size",void 0),t([o({type:String})],c.prototype,"caption",void 0),t([o({type:String})],c.prototype,"value",void 0),t([o({type:String})],c.prototype,"placeholder",void 0),t([o({type:String})],c.prototype,"name",void 0),t([o({type:Boolean})],c.prototype,"required",void 0),t([o({type:Boolean})],c.prototype,"disabled",void 0),t([o({type:String})],c.prototype,"invalidText",void 0),t([o({type:String})],c.prototype,"pattern",void 0),t([o({type:Number})],c.prototype,"maxLength",void 0),t([o({type:Number})],c.prototype,"minLength",void 0),t([o({type:Boolean})],c.prototype,"iconRight",void 0),t([o({type:Boolean})],c.prototype,"hideLabel",void 0),t([a("input")],c.prototype,"inputEl",void 0),t([n()],c.prototype,"iconSlotted",void 0),t([l({slot:"icon"})],c.prototype,"iconSlot",void 0),t([n()],c.prototype,"internalValidationMsg",void 0),t([n()],c.prototype,"isInvalid",void 0),c=t([s("kyn-text-input")],c);export{c as TextInput};
 //# sourceMappingURL=textInput.js.map

package/components/reusable/textInput/textInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TextInputScss from './textInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n * @slot icon - Slot for contextual icon.\n */\n@customElement('kyn-text-input')\nexport class TextInput extends LitElement {\n  static override styles = TextInputScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input type, limited to options that are \"text like\". */\n  @property({ type: String })\n  type = 'text';\n\n  /** Input 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  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** RegEx pattern to validate. */\n  @property({ type: String })\n  pattern!: string;\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /** Place icon on the right. */\n  @property({ type: Boolean })\n  iconRight = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Evaluates if an icon is slotted.\n   * @ignore\n   */\n  @state()\n  iconSlotted = false;\n\n  /**\n   * Queries any slotted icons.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  iconSlot!: Array<HTMLElement>;\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      <div class=\"text-input\" ?disabled=${this.disabled}>\n        <label\n          class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\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            'icon--left': this.iconSlotted && !this.iconRight,\n            'icon--right': this.iconSlotted && this.iconRight,\n          })}\"\n        >\n          <span class=\"context-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=${this.type}\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            pattern=${ifDefined(this.pattern)}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this._handleInput(e)}\n          />\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.value !== ''\n            ? html`\n                <button\n                  ?disabled=${this.disabled}\n                  class=\"clear\"\n                  @click=${() => this._handleClear()}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\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      </div>\n    `;\n  }\n\n  private _handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _handleClear() {\n    this.value = '';\n    this.inputEl.value = '';\n\n    this._validate(true, false);\n    this._emitValue();\n  }\n\n  private _emitValue(e?: any) {\n    const Detail: any = {\n      value: this.value,\n    };\n    if (e) {\n      Detail.origEvent = e;\n    }\n\n    const event = new CustomEvent('on-input', {\n      detail: Detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  override updated(changedProps: any) {\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.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n  }\n\n  override firstUpdated() {\n    this.determineIfSlotted();\n  }\n\n  private determineIfSlotted() {\n    this.iconSlotted = this.iconSlot.length ? true : false;\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-input': TextInput;\n  }\n}\n"],"names":["TextInput","LitElement","constructor","this","internals","attachInternals","type","size","caption","value","placeholder","name","required","disabled","invalidText","iconRight","hideLabel","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","pattern","minLength","maxLength","e","_handleInput","errorIcon","_handleClear","clearIcon","target","_validate","_emitValue","inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","firstUpdated","determineIfSlotted","iconSlot","length","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextInputScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"2pCA0BO,IAAMA,EAAN,cAAwBC,EAAxBC,kCAmBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,OAIPH,KAAII,KAAG,KAIPJ,KAAOK,QAAG,GAIVL,KAAKM,MAAG,GAIRN,KAAWO,YAAG,GAIdP,KAAIQ,KAAG,GAIPR,KAAQS,UAAG,EAIXT,KAAQU,UAAG,EAIXV,KAAWW,YAAG,GAgBdX,KAASY,WAAG,EAIZZ,KAASa,WAAG,EAcZb,KAAWc,aAAG,EAcdd,KAAqBe,sBAAG,GAOxBf,KAASgB,WAAG,CAuMb,CArMUC,SACP,OAAOC,CAAI;0CAC2BlB,KAAKU;;8BAEjBV,KAAKa,UAAY,UAAY;gBAC3Cb,KAAKQ;;YAETR,KAAKS,SAAWS,CAAI,kCAAoC;;;;;mBAKjDC,EAAS,CAChB,iBAAiB,EACjB,aAAcnB,KAAKc,cAAgBd,KAAKY,UACxC,cAAeZ,KAAKc,aAAed,KAAKY;;;;;;;qBAQ/BO,EAAS,CAChB,WAA0B,OAAdnB,KAAKI,KACjB,WAA0B,OAAdJ,KAAKI;mBAEZJ,KAAKG;iBACPH,KAAKQ;mBACHR,KAAKQ;oBACJR,KAAKM;0BACCN,KAAKO;wBACPP,KAAKS;wBACLT,KAAKU;uBACNV,KAAKgB;sBACNI,EAAUpB,KAAKqB;wBACbD,EAAUpB,KAAKsB;wBACfF,EAAUpB,KAAKuB;qBACjBC,GAAWxB,KAAKyB,aAAaD;;;YAGvCxB,KAAKgB,UACHE,CAAI,sCAAsCQ,gBAC1C;YACa,KAAf1B,KAAKM,MACHY,CAAI;;8BAEYlB,KAAKU;;2BAER,IAAMV,KAAK2B;;mCAEHC;;gBAGrB;;;UAGa,KAAjB5B,KAAKK,QACHa,CAAI,yBAAyBlB,KAAKK,iBAClC;UACFL,KAAKgB,UACHE,CAAI;;kBAEElB,KAAKW,aAAeX,KAAKe;;cAG/B;;KAGT,CAEOU,aAAaD,GACnBxB,KAAKM,MAAQkB,EAAEK,OAAOvB,MAEtBN,KAAK8B,WAAU,GAAM,GACrB9B,KAAK+B,WAAWP,EACjB,CAEOG,eACN3B,KAAKM,MAAQ,GACbN,KAAKgC,QAAQ1B,MAAQ,GAErBN,KAAK8B,WAAU,GAAM,GACrB9B,KAAK+B,YACN,CAEOA,WAAWP,GACjB,MAAMS,EAAc,CAClB3B,MAAON,KAAKM,OAEVkB,IACFS,EAAOC,UAAYV,GAGrB,MAAMW,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQJ,IAEVjC,KAAKsC,cAAcH,EACpB,CAEOL,UAAUS,EAAqBC,GAErC,MAAMC,EACiB,KAArBzC,KAAKW,YACD,IAAKX,KAAKgC,QAAQU,SAAUC,aAAa,GACzC3C,KAAKgC,QAAQU,SAEbE,EACiB,KAArB5C,KAAKW,YACDX,KAAKW,YACLX,KAAKgC,QAAQa,kBAGnB7C,KAAKC,UAAU6C,YAAYL,EAAUG,EAAmB5C,KAAKgC,SAGzDO,IACFvC,KAAKe,sBAAwBf,KAAKC,UAAU4C,mBAI1CL,GACFxC,KAAKC,UAAU8C,gBAElB,CAEQC,QAAQC,IAEbA,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBlD,KAAKgB,UACkB,KAArBhB,KAAKW,aAAqD,KAA/BX,KAAKe,uBAKhCkC,EAAaC,IAAI,WACnBlD,KAAKgC,QAAQ1B,MAAQN,KAAKM,MAI1BN,KAAK8B,WAAU,GAAO,IAItBmB,EAAaC,IAAI,qBACmBC,IAApCF,EAAaG,IAAI,gBAEjBpD,KAAK8B,WAAU,GAAO,EAEzB,CAEQuB,eACPrD,KAAKsD,oBACN,CAEOA,qBACNtD,KAAKc,cAAcd,KAAKuD,SAASC,MAClC,CAEOC,gBAAgBjC,GACtBA,EAAEkC,SAASC,OAAO3D,KAAKQ,KAAMR,KAAKM,MACnC,CAEOsD,iBACN5D,KAAKe,sBAAwBf,KAAKC,UAAU4C,iBAC7C,CAEQgB,oBACPC,MAAMD,oBAEF7D,KAAKC,UAAU8D,OACjB/D,KAAKC,UAAU8D,KAAKC,iBAAiB,YAAaxC,GAChDxB,KAAKyD,gBAAgBjC,KAGvBxB,KAAKgE,iBAAiB,WAAW,KAC/BhE,KAAK4D,gBAAgB,IAG1B,CAEQK,uBACHjE,KAAKC,UAAU8D,OACjB/D,KAAKC,UAAU8D,KAAKG,oBAAoB,YAAa1C,GACnDxB,KAAKyD,gBAAgBjC,KAGvBxB,KAAKkE,oBAAoB,WAAW,KAClClE,KAAK4D,gBAAgB,KAIzBE,MAAMG,sBACP,GAnTepE,EAAMsE,OAAGC,EAETvE,EAAAwE,kBAAoB,IAC/BvE,EAAWuE,kBACdC,gBAAgB,GAOXzE,EAAc0E,gBAAG,EAOxBC,EAAA,CADCC,KACkC5E,EAAA6E,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACJ/E,EAAA6E,UAAA,YAAA,GAIdF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACN/E,EAAA6E,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACL/E,EAAA6E,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACP/E,EAAA6E,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACD/E,EAAA6E,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACR/E,EAAA6E,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACDhF,EAAA6E,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACDhF,EAAA6E,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACD/E,EAAA6E,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACD/E,EAAA6E,UAAA,eAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAM2E,UACCjF,EAAA6E,UAAA,iBAAA,GAInBF,EAAA,CADCG,EAAS,CAAExE,KAAM2E,UACCjF,EAAA6E,UAAA,iBAAA,GAInBF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACAhF,EAAA6E,UAAA,iBAAA,GAIlBF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACAhF,EAAA6E,UAAA,iBAAA,GAOlBF,EAAA,CADCO,EAAM,UACoBlF,EAAA6E,UAAA,eAAA,GAO3BF,EAAA,CADCC,KACmB5E,EAAA6E,UAAA,mBAAA,GAOpBF,EAAA,CADCQ,EAAsB,CAAEC,KAAM,UACDpF,EAAA6E,UAAA,gBAAA,GAO9BF,EAAA,CADCC,KAC0B5E,EAAA6E,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiB5E,EAAA6E,UAAA,iBAAA,GA9GP7E,EAAS2E,EAAA,CADrBU,EAAc,mBACFrF"}
+{"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TextInputScss from './textInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n * @slot icon - Slot for contextual icon.\n */\n@customElement('kyn-text-input')\nexport class TextInput extends LitElement {\n  static override styles = TextInputScss;\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input type, limited to options that are \"text like\". */\n  @property({ type: String })\n  type = 'text';\n\n  /** Input 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  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** RegEx pattern to validate. */\n  @property({ type: String })\n  pattern!: string;\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /** Place icon on the right. */\n  @property({ type: Boolean })\n  iconRight = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Evaluates if an icon is slotted.\n   * @ignore\n   */\n  @state()\n  iconSlotted = false;\n\n  /**\n   * Queries any slotted icons.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  iconSlot!: Array<HTMLElement>;\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      <div class=\"text-input\" ?disabled=${this.disabled}>\n        <label\n          class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\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            'icon--left': this.iconSlotted && !this.iconRight,\n            'icon--right': this.iconSlotted && this.iconRight,\n          })}\"\n        >\n          <span class=\"context-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=${this.type}\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            pattern=${ifDefined(this.pattern)}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this._handleInput(e)}\n          />\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.value !== ''\n            ? html`\n                <button\n                  ?disabled=${this.disabled}\n                  class=\"clear\"\n                  @click=${() => this._handleClear()}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\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      </div>\n    `;\n  }\n\n  private _handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _handleClear() {\n    this.value = '';\n    this.inputEl.value = '';\n\n    this._validate(true, false);\n    this._emitValue();\n  }\n\n  private _emitValue(e?: any) {\n    const Detail: any = {\n      value: this.value,\n    };\n    if (e) {\n      Detail.origEvent = e;\n    }\n\n    const event = new CustomEvent('on-input', {\n      detail: Detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.inputEl.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  override updated(changedProps: any) {\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.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n  }\n\n  override firstUpdated() {\n    this.determineIfSlotted();\n  }\n\n  private determineIfSlotted() {\n    this.iconSlotted = this.iconSlot.length ? true : false;\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-input': TextInput;\n  }\n}\n"],"names":["TextInput","LitElement","constructor","this","internals","attachInternals","type","size","caption","value","placeholder","name","required","disabled","invalidText","iconRight","hideLabel","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","pattern","minLength","maxLength","e","_handleInput","errorIcon","_handleClear","clearIcon","target","_validate","_emitValue","inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","firstUpdated","determineIfSlotted","iconSlot","length","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextInputScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"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"}

package/components/reusable/timepicker/timepicker.js

@@ -32,5 +32,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             `:null}
         ${""===this.warnText||this.isInvalid?null:i`<div class="warn">${this.warnText}</div>`}
       </div>
-    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};p.styles=[r],p.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},p.formAssociated=!0,t([n()],p.prototype,"internals",void 0),t([a({type:String})],p.prototype,"size",void 0),t([a({type:String})],p.prototype,"caption",void 0),t([a({type:String})],p.prototype,"value",void 0),t([a({type:String})],p.prototype,"name",void 0),t([a({type:Boolean})],p.prototype,"required",void 0),t([a({type:Boolean})],p.prototype,"disabled",void 0),t([a({type:String})],p.prototype,"invalidText",void 0),t([a({type:String})],p.prototype,"warnText",void 0),t([a({type:String})],p.prototype,"maxTime",void 0),t([a({type:String})],p.prototype,"minTime",void 0),t([a({type:String})],p.prototype,"step",void 0),t([l("input")],p.prototype,"inputEl",void 0),t([n()],p.prototype,"internalValidationMsg",void 0),t([n()],p.prototype,"isInvalid",void 0),p=t([s("kyn-time-picker")],p);export{p as TimePicker};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.inputEl.validationMessage),i&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};p.styles=[r],p.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},p.formAssociated=!0,t([n()],p.prototype,"internals",void 0),t([a({type:String})],p.prototype,"size",void 0),t([a({type:String})],p.prototype,"caption",void 0),t([a({type:String})],p.prototype,"value",void 0),t([a({type:String})],p.prototype,"name",void 0),t([a({type:Boolean})],p.prototype,"required",void 0),t([a({type:Boolean})],p.prototype,"disabled",void 0),t([a({type:String})],p.prototype,"invalidText",void 0),t([a({type:String})],p.prototype,"warnText",void 0),t([a({type:String})],p.prototype,"maxTime",void 0),t([a({type:String})],p.prototype,"minTime",void 0),t([a({type:String})],p.prototype,"step",void 0),t([l("input")],p.prototype,"inputEl",void 0),t([n()],p.prototype,"internalValidationMsg",void 0),t([n()],p.prototype,"isInvalid",void 0),p=t([s("kyn-time-picker")],p);export{p as TimePicker};
 //# sourceMappingURL=timepicker.js.map

package/components/reusable/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../../../src/components/reusable/timepicker/timepicker.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport TimePickerScss from './timepicker.scss';\n\n/**\n * Time picker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minTime - Minimum Time in hh:mm format.\n * @prop {string} maxTime - Maximum Time hh:mm format.\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-time-picker')\nexport class TimePicker extends LitElement {\n  static override styles = [TimePickerScss];\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input 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  /** The value of the time input is always in 24-hour format that includes leading zeros: hh:mm,\n   *  regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).\n   *  If the time includes seconds (by step attribute), the format is always hh:mm:ss */\n  @property({ type: String })\n  value = '';\n\n  /** Time input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Time input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Time input warn text. */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum time in hh:mm or hh:mm:ss format\n   * only must always greater than minTime. */\n  @property({ type: String })\n  maxTime!: string;\n\n  /** Minimum time in hh:mm or hh:mm:ss format\n   *  only & must always lesser than maxTime. */\n  @property({ type: String })\n  minTime!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * It takes value that equates to the number of seconds you want to increment by;\n   * the default (60 sec.). If you specify a value of less than 60 sec., the time input will show a seconds input area alongside the hours and minutes */\n  @property({ type: String })\n  step!: string;\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      <div class=\"time-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\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            type=\"time\"\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            step=${ifDefined(this.step)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minTime)}\n            max=${ifDefined(this.maxTime)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\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      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\n\n    if (changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      //set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-time-picker': TimePicker;\n  }\n}\n"],"names":["TimePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","step","minTime","maxTime","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TimePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}
+{"version":3,"file":"timepicker.js","sources":["../../../../src/components/reusable/timepicker/timepicker.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport TimePickerScss from './timepicker.scss';\n\n/**\n * Time picker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minTime - Minimum Time in hh:mm format.\n * @prop {string} maxTime - Maximum Time hh:mm format.\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-time-picker')\nexport class TimePicker extends LitElement {\n  static override styles = [TimePickerScss];\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input 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  /** The value of the time input is always in 24-hour format that includes leading zeros: hh:mm,\n   *  regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).\n   *  If the time includes seconds (by step attribute), the format is always hh:mm:ss */\n  @property({ type: String })\n  value = '';\n\n  /** Time input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Time input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Time input warn text. */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum time in hh:mm or hh:mm:ss format\n   * only must always greater than minTime. */\n  @property({ type: String })\n  maxTime!: string;\n\n  /** Minimum time in hh:mm or hh:mm:ss format\n   *  only & must always lesser than maxTime. */\n  @property({ type: String })\n  minTime!: string;\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * It takes value that equates to the number of seconds you want to increment by;\n   * the default (60 sec.). If you specify a value of less than 60 sec., the time input will show a seconds input area alongside the hours and minutes */\n  @property({ type: String })\n  step!: string;\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      <div class=\"time-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\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            type=\"time\"\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            step=${ifDefined(this.step)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minTime)}\n            max=${ifDefined(this.maxTime)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\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      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    this._validate(true, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, false);\n    }\n\n    if (changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      //set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.inputEl.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this._validate(true, false);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-time-picker': TimePicker;\n  }\n}\n"],"names":["TimePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","step","minTime","maxTime","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TimePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",