@kyndryl-design-system/shidoka-applications 1.29.2 → 1.30.0

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":"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"}
+{"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,QAAQ,CAAC;AAChB,OAAO,2DAA2D,CAAC;AAMnE;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uEAAuE;IAEvE,aAAa,UAAS;IAEtB,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,YAAY,UAAS;IAErB,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,gCAAgC;IAEhC,YAAY,SAAa;IAEzB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;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;IAoMN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IASrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IA0HtB,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,YAAY;IA+BpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAsBjB,oBAAoB;IAkB7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,WAAW;IASV,OAAO,CAAC,YAAY,EAAE,GAAG;IAoHlC,OAAO,CAAC,cAAc;IAUtB,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

@@ -122,7 +122,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
                     <kyn-tag
                       label=${i}
                       ?disabled=${this.disabled}
-                      @on-close=${e=>this.handleTagClear(e.detail.value)}
+                      @on-close=${()=>this.handleTagClear(e)}
                     ></kyn-tag>
                   `}))}
               </kyn-tag-group>
@@ -143,5 +143,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.updateByValue?this._updateOptions():(this._updateChildren(),this.emitValue())}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}_handleLabelClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.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&&"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.filter((e=>"none"!==e.style.display)),a=l.find((e=>e.highlighted)),o=l.find((e=>e.selected)),n=a?l.indexOf(a):l.find((e=>e.selected))?l.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,l[n].highlighted=!0,this.multiple||""===this.value||l[n].scrollIntoView({block:"nearest"}))}switch(t){case 13:return this.updateValue(l[n].value,!l[n].selected),this.assistiveText="Selected an item.",void this.emitValue();case 40:{let e=a||o?n===l.length-1?0:n+1:0;return l[e].disabled&&(e=e===l.length-1?0:e+1),l[n].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[e].text)}case 38:{let e=0===n?l.length-1:n-1;return l[e].disabled&&(e=0===e?l.length-1:e-1),l[n].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[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();const t=new CustomEvent("on-clear-all",{detail:{value:this.value}});this.dispatchEvent(t)}handleTagClear(e){this.updateValue(e,!1),this._updateSelectedOptions(),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this._emitSearch(),this.filterSearch&&this.options.map((e=>{e.style.display="block"})),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;if(this.searchText=t,this.open=!0,this._emitSearch(),this.filterSearch)this.options.map((e=>{e.text.toLowerCase().includes(t.toLowerCase())?e.style.display="block":e.style.display="none"}));else{const e=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&e.length&&(e[0].highlighted=!0,e[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.multiple||(this.open=!1),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)}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),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(){document.removeEventListener("click",(e=>this._handleClickOut(e))),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)}_emitSearch(){const e=new CustomEvent("on-search",{detail:{searchText:this.searchText}});this.dispatchEvent(e)}updated(e){var t,i;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));this.selectAllChecked=i.length===e.length,this.selectAllIndeterminate=i.length<e.length&&i.length>0,this.updateByValue&&this._updateOptions();const s=Array.from(this.querySelectorAll("kyn-dropdown-option"));if(!this.multiple){if(s.length&&""!==this.value){const e=s.find((e=>e.value===this.value));this.text=e.textContent}this.searchable&&this.text&&(this.searchText=this.text===this.placeholder?"":this.text,this.searchEl.value=this.searchText)}}if(e.has("open")&&(this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),this.open)){this.multiple||null===(i=this.options.find((e=>e.selected)))||void 0===i||i.scrollIntoView({block:"nearest"});const e=.6;this.buttonEl.getBoundingClientRect().top>window.innerHeight*e?this._openUpwards=!0:this._openUpwards=!1}e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple})),e.has("searchText")&&(this.searchEl.value=this.searchText)}_updateOptions(){this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value}))}_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([a()],v.prototype,"internals",void 0),e([l({type:Boolean})],v.prototype,"updateByValue",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,"filterSearch",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:String})],v.prototype,"menuMinWidth",void 0),e([l({type:Boolean})],v.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],v.prototype,"selectAllIndeterminate",void 0),e([l({type:String})],v.prototype,"value",void 0),e([a()],v.prototype,"text",void 0),e([l({type:String})],v.prototype,"searchText",void 0),e([a()],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([o(".search")],v.prototype,"searchEl",void 0),e([o(".select")],v.prototype,"buttonEl",void 0),e([o(".options")],v.prototype,"listboxEl",void 0),e([a()],v.prototype,"internalValidationMsg",void 0),e([a()],v.prototype,"isInvalid",void 0),e([a()],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.updateByValue?this._updateOptions():(this._updateChildren(),this.emitValue())}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}_handleLabelClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.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&&"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.filter((e=>"none"!==e.style.display)),a=l.find((e=>e.highlighted)),o=l.find((e=>e.selected)),n=a?l.indexOf(a):l.find((e=>e.selected))?l.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,l[n].highlighted=!0,this.multiple||""===this.value||l[n].scrollIntoView({block:"nearest"}))}switch(t){case 13:return this.updateValue(l[n].value,!l[n].selected),this.assistiveText="Selected an item.",void this.emitValue();case 40:{let e=a||o?n===l.length-1?0:n+1:0;return l[e].disabled&&(e=e===l.length-1?0:e+1),l[n].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[e].text)}case 38:{let e=0===n?l.length-1:n-1;return l[e].disabled&&(e=0===e?l.length-1:e-1),l[n].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[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();const t=new CustomEvent("on-clear-all",{detail:{value:this.value}});this.dispatchEvent(t)}handleTagClear(e){this.updateValue(e,!1),this._updateSelectedOptions(),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this._emitSearch(),this.filterSearch&&this.options.map((e=>{e.style.display="block"})),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;if(this.searchText=t,this.open=!0,this._emitSearch(),this.filterSearch)this.options.map((e=>{e.text.toLowerCase().includes(t.toLowerCase())?e.style.display="block":e.style.display="none"}));else{const e=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&e.length&&(e[0].highlighted=!0,e[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.multiple||(this.open=!1),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)}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),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(){document.removeEventListener("click",(e=>this._handleClickOut(e))),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)}_emitSearch(){const e=new CustomEvent("on-search",{detail:{searchText:this.searchText}});this.dispatchEvent(e)}updated(e){var t,i;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));this.selectAllChecked=i.length===e.length,this.selectAllIndeterminate=i.length<e.length&&i.length>0,this.updateByValue&&this._updateOptions();const s=Array.from(this.querySelectorAll("kyn-dropdown-option"));if(!this.multiple){if(s.length&&""!==this.value){const e=s.find((e=>e.value===this.value));this.text=e.textContent}this.searchable&&this.text&&(this.searchText=this.text===this.placeholder?"":this.text,this.searchEl.value=this.searchText)}}if(e.has("open")&&(this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),this.open)){this.multiple||null===(i=this.options.find((e=>e.selected)))||void 0===i||i.scrollIntoView({block:"nearest"});const e=.6;this.buttonEl.getBoundingClientRect().top>window.innerHeight*e?this._openUpwards=!0:this._openUpwards=!1}e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple})),e.has("searchText")&&this.searchEl&&(this.searchEl.value=this.searchText)}_updateOptions(){this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value}))}_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([a()],v.prototype,"internals",void 0),e([l({type:Boolean})],v.prototype,"updateByValue",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,"filterSearch",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:String})],v.prototype,"menuMinWidth",void 0),e([l({type:Boolean})],v.prototype,"selectAllChecked",void 0),e([l({type:Boolean})],v.prototype,"selectAllIndeterminate",void 0),e([l({type:String})],v.prototype,"value",void 0),e([a()],v.prototype,"text",void 0),e([l({type:String})],v.prototype,"searchText",void 0),e([a()],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([o(".search")],v.prototype,"searchEl",void 0),e([o(".select")],v.prototype,"buttonEl",void 0),e([o(".options")],v.prototype,"listboxEl",void 0),e([a()],v.prototype,"internalValidationMsg",void 0),e([a()],v.prototype,"isInvalid",void 0),e([a()],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 '../tag';\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 * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\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  /** @ignore */\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  /** Update by value instead of deriving value from child selections. */\n  @property({ type: Boolean })\n  updateByValue = false;\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  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = 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  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\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   * Dropdown value(s).\n   */\n  @property({ type: String })\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   */\n  @property({ type: String })\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\n          for=${this.name}\n          id=\"label-${this.name}\"\n          class=\"label-text\"\n          @click=${this._handleLabelClick}\n        >\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              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.disabled ? '' : '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                      ?disabled=${this.disabled}\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              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              style=\"min-width: ${this.menuMinWidth};\"\n              aria-labelledby=\"label-${this.name}\"\n              name=${this.name}\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          <!--\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n            -->\n        </div>\n\n        ${this.multiple && !this.hideTags && this.value.length\n          ? html`\n              <kyn-tag-group filter>\n                ${this.value.map((value: string) => {\n                  const Options: any = Array.from(\n                    this.querySelectorAll('kyn-dropdown-option')\n                  );\n\n                  const option = Options.find(\n                    (option: any) => option.value === value\n                  );\n                  const text = option.textContent;\n\n                  return html`\n                    <kyn-tag\n                      label=${text}\n                      ?disabled=${this.disabled}\n                      @on-close=${(e: any) =>\n                        this.handleTagClear(e.detail.value)}\n                    ></kyn-tag>\n                  `;\n                })}\n              </kyn-tag-group>\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    if (this.updateByValue) {\n      this._updateOptions();\n    } else {\n      this._updateChildren();\n      this.emitValue();\n    }\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 _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.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.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 visibleOptions = this.options.filter(\n      (option: any) => option.style.display !== 'none'\n    );\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.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        visibleOptions[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          visibleOptions[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        this.updateValue(\n          visibleOptions[highlightedIndex].value,\n          !visibleOptions[highlightedIndex].selected\n        );\n        this.assistiveText = 'Selected an item.';\n        this.emitValue();\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[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    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\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    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\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    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\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\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    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\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  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\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    document.removeEventListener('click', (e) => this._handleClickOut(e));\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  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\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._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      // 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      if (this.updateByValue) {\n        this._updateOptions();\n      }\n\n      // update selected option text\n      const AllOptions: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n\n      if (!this.multiple) {\n        if (AllOptions.length && this.value !== '') {\n          const option = AllOptions.find(\n            (option: any) => option.value === this.value\n          );\n\n          this.text = option.textContent;\n        }\n\n        // set search input value\n        if (this.searchable && this.text) {\n          this.searchText = this.text === this.placeholder ? '' : this.text;\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      if (this.open) {\n        if (!this.multiple) {\n          // scroll to selected option\n          this.options\n            .find((option) => option.selected)\n            ?.scrollIntoView({ block: 'nearest' });\n        }\n\n        // open dropdown upwards if closer to bottom of viewport\n        const Threshold = 0.6;\n\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * Threshold\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\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    if (changedProps.has('searchText')) {\n      this.searchEl.value = this.searchText;\n    }\n  }\n\n  private _updateOptions() {\n    this.options.forEach((option) => {\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 _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","updateByValue","size","inline","caption","placeholder","name","open","searchable","filterSearch","multiple","required","disabled","invalidText","hideTags","selectAll","selectAllText","menuMinWidth","selectAllChecked","selectAllIndeterminate","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","_openUpwards","render","html","_handleLabelClick","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","Array","from","querySelectorAll","find","option","textContent","handleTagClear","detail","firstUpdated","resetSelection","_updateOptions","_updateChildren","emitValue","focus","buttonEl","handleKeyboard","keyCode","forEach","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","visibleOptions","filter","style","display","highlightedEl","selectedEl","selected","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","stopPropagation","_validate","_updateSelectedOptions","event","CustomEvent","dispatchEvent","_emitSearch","_a","classList","contains","_b","toLowerCase","startsWith","_handleClick","_handleBlur","origEvent","_handleFormdata","formData","append","_handleInvalid","_handleClickOut","composedPath","connectedCallback","super","document","addEventListener","form","disconnectedCallback","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","Options","shadowRoot","querySelector","assignedElements","SelectedOptions","AllOptions","listboxEl","preventScroll","Threshold","getBoundingClientRect","top","window","innerHeight","Slot","styles","DropdownScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","Boolean","String","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 '../tag';\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 * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\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  /** @ignore */\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  /** Update by value instead of deriving value from child selections. */\n  @property({ type: Boolean })\n  updateByValue = false;\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  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = 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  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\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   * Dropdown value(s).\n   */\n  @property({ type: String })\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   */\n  @property({ type: String })\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\n          for=${this.name}\n          id=\"label-${this.name}\"\n          class=\"label-text\"\n          @click=${this._handleLabelClick}\n        >\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              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.disabled ? '' : '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                      ?disabled=${this.disabled}\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              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              style=\"min-width: ${this.menuMinWidth};\"\n              aria-labelledby=\"label-${this.name}\"\n              name=${this.name}\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          <!--\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n            -->\n        </div>\n\n        ${this.multiple && !this.hideTags && this.value.length\n          ? html`\n              <kyn-tag-group filter>\n                ${this.value.map((value: string) => {\n                  const Options: any = Array.from(\n                    this.querySelectorAll('kyn-dropdown-option')\n                  );\n\n                  const option = Options.find(\n                    (option: any) => option.value === value\n                  );\n                  const text = option.textContent;\n\n                  return html`\n                    <kyn-tag\n                      label=${text}\n                      ?disabled=${this.disabled}\n                      @on-close=${() => this.handleTagClear(value)}\n                    ></kyn-tag>\n                  `;\n                })}\n              </kyn-tag-group>\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    if (this.updateByValue) {\n      this._updateOptions();\n    } else {\n      this._updateChildren();\n      this.emitValue();\n    }\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 _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.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.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 visibleOptions = this.options.filter(\n      (option: any) => option.style.display !== 'none'\n    );\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.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        visibleOptions[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          visibleOptions[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        this.updateValue(\n          visibleOptions[highlightedIndex].value,\n          !visibleOptions[highlightedIndex].selected\n        );\n        this.assistiveText = 'Selected an item.';\n        this.emitValue();\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[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    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\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    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\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    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\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\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    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\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  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\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    document.removeEventListener('click', (e) => this._handleClickOut(e));\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  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\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._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      // 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      if (this.updateByValue) {\n        this._updateOptions();\n      }\n\n      // update selected option text\n      const AllOptions: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n\n      if (!this.multiple) {\n        if (AllOptions.length && this.value !== '') {\n          const option = AllOptions.find(\n            (option: any) => option.value === this.value\n          );\n\n          this.text = option.textContent;\n        }\n\n        // set search input value\n        if (this.searchable && this.text) {\n          this.searchText = this.text === this.placeholder ? '' : this.text;\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      if (this.open) {\n        if (!this.multiple) {\n          // scroll to selected option\n          this.options\n            .find((option) => option.selected)\n            ?.scrollIntoView({ block: 'nearest' });\n        }\n\n        // open dropdown upwards if closer to bottom of viewport\n        const Threshold = 0.6;\n\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * Threshold\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\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    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n  }\n\n  private _updateOptions() {\n    this.options.forEach((option) => {\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 _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","updateByValue","size","inline","caption","placeholder","name","open","searchable","filterSearch","multiple","required","disabled","invalidText","hideTags","selectAll","selectAllText","menuMinWidth","selectAllChecked","selectAllIndeterminate","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","_openUpwards","render","html","_handleLabelClick","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","Array","from","querySelectorAll","find","option","textContent","handleTagClear","firstUpdated","resetSelection","_updateOptions","_updateChildren","emitValue","focus","buttonEl","handleKeyboard","keyCode","forEach","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","visibleOptions","filter","style","display","highlightedEl","selectedEl","selected","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","stopPropagation","_validate","_updateSelectedOptions","event","CustomEvent","detail","dispatchEvent","_emitSearch","_a","classList","contains","_b","toLowerCase","startsWith","_handleClick","_handleBlur","origEvent","_handleFormdata","formData","append","_handleInvalid","_handleClickOut","composedPath","connectedCallback","super","document","addEventListener","form","disconnectedCallback","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","Options","shadowRoot","querySelector","assignedElements","SelectedOptions","AllOptions","listboxEl","preventScroll","Threshold","getBoundingClientRect","top","window","innerHeight","Slot","styles","DropdownScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","Boolean","String","queryAssignedElements","selector","query","customElement"],"mappings":"+xCA2BO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAoBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAaG,eAAG,EAIhBH,KAAII,KAAG,KAIPJ,KAAMK,QAAG,EAITL,KAAOM,QAAG,GAIVN,KAAWO,YAAG,GAIdP,KAAIQ,KAAG,GAIPR,KAAIS,MAAG,EAIPT,KAAUU,YAAG,EAIbV,KAAYW,cAAG,EAIfX,KAAQY,UAAG,EAIXZ,KAAQa,UAAG,EAIXb,KAAQc,UAAG,EAIXd,KAAWe,YAAG,GAIdf,KAAQgB,UAAG,EAIXhB,KAASiB,WAAG,EAIZjB,KAAakB,cAAG,aAIhBlB,KAAYmB,aAAG,UAMfnB,KAAgBoB,kBAAG,EAMnBpB,KAAsBqB,wBAAG,EAMzBrB,KAAKsB,MAAQ,GAObtB,KAAIuB,KAAG,GAMPvB,KAAUwB,WAAG,GAObxB,KAAayB,cAAG,yBA0ChBzB,KAAqB0B,sBAAG,GAOxB1B,KAAS2B,WAAG,EAOZ3B,KAAY4B,cAAG,CAq3BhB,CAn3BU,MAAAC,GACP,OAAOC,CAAI;;;oBAGK9B,KAAKc;gBACTd,KAAKS;kBACHT,KAAKK;sBACDL,KAAKU;;;gBAGXV,KAAKQ;sBACCR,KAAKQ;;mBAERR,KAAK+B;;YAEZ/B,KAAKa,SAAWiB,CAAI,kCAAoC;;;;;kBAKlDE,EAAS,CACfC,SAAS,EACTxB,KAAMT,KAAKS;;;;uBAKAuB,EAAS,CAChBE,QAAQ,EACR,WAA0B,OAAdlC,KAAKI,KACjB,WAA0B,OAAdJ,KAAKI,KACjBC,OAAQL,KAAKK;uCAEUL,KAAKQ;8BACdR,KAAKS;;;mBAGhBT,KAAKQ;qBACHR,KAAKQ;0BACAR,KAAKa;0BACLb,KAAKc;yBACNd,KAAK2B;yBACL3B,KAAKc,SAAW,GAAK;uBACvB,IAAMd,KAAKmC;yBACRC,GAAWpC,KAAKqC,oBAAoBD;2BAClCA,IACPpC,KAAKU,YACR0B,EAAEE,gBACH;sBAEMF,GAAWpC,KAAKuC,iBAAiBH;;gBAExCpC,KAAKY,UAAYZ,KAAKsB,MAAMkB,OAC1BV,CAAI;;;;kCAIY9B,KAAKc;+BACPsB,GAAapC,KAAKyC,oBAAoBL;;wBAE9CpC,KAAKsB,MAAMkB;uCACIE;;oBAGrB;gBACF1C,KAAKU,WACHoB,CAAI;;;;oCAIc9B,KAAKO;8BACXP,KAAKwB;kCACDxB,KAAKc;iCACLsB,GAAWpC,KAAK2C,oBAAoBP;+BACtCA,GAAWpC,KAAK4C,kBAAkBR;8BACnCA,GAAWpC,KAAK6C,iBAAiBT;+BAChCA,GAAWpC,KAAK8C,kBAAkBV;;oBAGhDN,CAAI;;wBAEE9B,KAAKY,UAEY,KAAfZ,KAAKsB,MADLtB,KAAKO,YAGLP,KAAKuB;;;;kDAImBwB;;;;;sBAK5Bf,EAAS,CACfgB,SAAS,EACTvC,KAAMT,KAAKS,KACXwC,QAASjD,KAAK4B;kCAEI5B,KAAKmB;uCACAnB,KAAKQ;qBACvBR,KAAKQ;;;8BAGIR,KAAKS;6BACNT,KAAKS;yBACR2B,GAAWpC,KAAKkD,kBAAkBd;sBACrCA,GAAWpC,KAAKmD,eAAef;;gBAEtCpC,KAAKY,UAAYZ,KAAKiB,UACpBa,CAAI;;;;;kCAKY9B,KAAKoB;uCACApB,KAAKqB;kCACVrB,KAAKc;;wBAEfd,KAAKkB;;oBAGX;;;;8BAIY,IAAMlB,KAAKoD;;;;;YAK7BpD,KAAKU,YAAcV,KAAKqD,UAAgC,KAApBrD,KAAKwB,WACvCM,CAAI;;;;2BAIUM,GAAWpC,KAAKsD,YAAYlB;;mCAErBmB;;gBAGrB;;YAEFvD,KAAK2B,UACHG,CAAI,sCAAsC0B,gBAC1C;;;;UAIJxD,KAAKY,WAAaZ,KAAKgB,UAAYhB,KAAKsB,MAAMkB,OAC5CV,CAAI;;kBAEE9B,KAAKsB,MAAMmC,KAAKnC,IAChB,MAOMC,EAPemC,MAAMC,KACzB3D,KAAK4D,iBAAiB,wBAGDC,MACpBC,GAAgBA,EAAOxC,QAAUA,IAEhByC,YAEpB,OAAOjC,CAAI;;8BAECP;kCACIvB,KAAKc;kCACL,IAAMd,KAAKgE,eAAe1C;;mBAEzC;;cAIP;UACe,KAAjBtB,KAAKM,QACHwB,CAAI,yBAAyB9B,KAAKM,iBAClC;UACFN,KAAK2B,UACHG,CAAI;;kBAEE9B,KAAKe,aAAef,KAAK0B;;cAG/B;;;;;;;;YAQA1B,KAAKyB;;;KAId,CAEQ,YAAAwC,GAEkB,KAArBjE,KAAKO,cACHP,KAAKU,WACPV,KAAKO,YAAc,SAEfP,KAAKY,SACPZ,KAAKO,YAAc,eAEnBP,KAAKO,YAAc,mBAI1B,CAEO,gBAAA6C,GACNpD,KAAKkE,gBACN,CAMM,cAAAA,GACDlE,KAAKG,cACPH,KAAKmE,kBAELnE,KAAKoE,kBACLpE,KAAKqE,YAER,CAEO,WAAAlC,GACDnC,KAAKc,WACRd,KAAKS,MAAQT,KAAKS,KAGdT,KAAKU,YACPV,KAAKqD,SAASiB,QAGnB,CAEO,iBAAAvC,GACD/B,KAAKc,WACRd,KAAKS,MAAQT,KAAKS,KAEdT,KAAKU,WACPV,KAAKqD,SAASiB,QAEdtE,KAAKuE,SAASD,QAGnB,CAEO,mBAAAjC,CAAoBD,GAC1BpC,KAAKwE,eAAepC,EAAGA,EAAEqC,QAAS,SACnC,CAEO,iBAAAvB,CAAkBd,GACH,IAEjBA,EAAEqC,SACJrC,EAAEE,iBAGJtC,KAAKwE,eAAepC,EAAGA,EAAEqC,QAAS,OACnC,CAEO,cAAAtB,CAAef,GACrBpC,KAAKgD,QAAQ0B,SAASZ,GAAYA,EAAOa,aAAc,IAIrDvC,EAAEwC,eAC4B,wBAA9BxC,EAAEwC,cAAcC,YAEhB7E,KAAKS,MAAO,GAEdT,KAAKyB,cAAgB,wBACtB,CAEO,cAAA+C,CAAepC,EAAQqC,EAAiBK,GAC9C,MAAMC,EAAoB,CAAC,EAAG,IAOxBC,EAAiBhF,KAAKgD,QAAQiC,QACjCnB,GAAyC,SAAzBA,EAAOoB,MAAMC,UAE1BC,EAAgBJ,EAAenB,MAClCC,GAAgBA,EAAOa,cAEpBU,EAAaL,EAAenB,MAAMC,GAAgBA,EAAOwB,WACzDC,EAAmBH,EACrBJ,EAAeQ,QAAQJ,GACvBJ,EAAenB,MAAMC,GAAgBA,EAAOwB,WAC5CN,EAAeQ,QAAQH,GACvB,EAQJ,GALIN,EAAkBU,SAAShB,IAC7BrC,EAAEE,iBAIW,WAAXwC,EAAqB,EAErBC,EAAkBU,SAAShB,IA3BR,KA4BnBA,GA3BwB,IA4BxBA,GA3BsB,IA4BtBA,KAGAzE,KAAKS,MAAO,EACZuE,EAAeO,GAAkBZ,aAAc,EAG1C3E,KAAKY,UAA2B,KAAfZ,KAAKsB,OACzB0D,EAAeO,GAAkBG,eAAe,CAAEC,MAAO,YAG9D,CAED,OAAQlB,GACN,KA5CqB,GAoDnB,OANAzE,KAAK4F,YACHZ,EAAeO,GAAkBjE,OAChC0D,EAAeO,GAAkBD,UAEpCtF,KAAKyB,cAAgB,yBACrBzB,KAAKqE,YAGP,KArD0B,GAqDA,CAExB,IAAIwB,EACDT,GAAkBC,EAEfE,IAAqBP,EAAexC,OAAS,EAC7C,EACA+C,EAAmB,EAHnB,EAkBN,OAZIP,EAAea,GAAW/E,WAC5B+E,EACEA,IAAcb,EAAexC,OAAS,EAAI,EAAIqD,EAAY,GAG9Db,EAAeO,GAAkBZ,aAAc,EAC/CK,EAAea,GAAWlB,aAAc,EAGxCK,EAAea,GAAWH,eAAe,CAAEC,MAAO,iBAElD3F,KAAKyB,cAAgBuD,EAAea,GAAWtE,KAEhD,CACD,KA5EwB,GA4EA,CAEtB,IAAIsE,EACmB,IAArBN,EACIP,EAAexC,OAAS,EACxB+C,EAAmB,EAezB,OAZIP,EAAea,GAAW/E,WAC5B+E,EACgB,IAAdA,EAAkBb,EAAexC,OAAS,EAAIqD,EAAY,GAG9Db,EAAeO,GAAkBZ,aAAc,EAC/CK,EAAea,GAAWlB,aAAc,EAGxCK,EAAea,GAAWH,eAAe,CAAEC,MAAO,iBAElD3F,KAAKyB,cAAgBuD,EAAea,GAAWtE,KAEhD,CACD,KAjGsB,GA6GpB,OAVAvB,KAAKS,MAAO,EAGRT,KAAKU,WACPV,KAAKqD,SAASiB,QAEdtE,KAAKuE,SAASD,aAGhBtE,KAAKyB,cAAgB,0BAGvB,QACE,OAGL,CAEO,mBAAAgB,CAAoBL,GAC1BA,EAAE0D,kBAGE9F,KAAKY,SACPZ,KAAKsB,MAAQ,GAEbtB,KAAKsB,MAAQ,GAGftB,KAAK+F,WAAU,GAAM,GACrB/F,KAAKgG,yBACLhG,KAAKqE,YAEL,MAAM4B,EAAQ,IAAIC,YAAY,eAAgB,CAC5CC,OAAQ,CACN7E,MAAOtB,KAAKsB,SAGhBtB,KAAKoG,cAAcH,EACpB,CAEO,cAAAjC,CAAe1C,GAErBtB,KAAK4F,YAAYtE,GAAO,GACxBtB,KAAKgG,yBACLhG,KAAKqE,WACN,CAEO,WAAAf,CAAYlB,GAClBA,EAAE0D,kBAGF9F,KAAKuB,KAAO,GACZvB,KAAKwB,WAAa,GAClBxB,KAAKqD,SAAS/B,MAAQ,GAEtBtB,KAAKqG,cAEDrG,KAAKW,cAEPX,KAAKgD,QAAQS,KAAKK,IAChBA,EAAOoB,MAAMC,QAAU,OAAO,IAK7BnF,KAAKY,WACRZ,KAAKsB,MAAQ,GACbtB,KAAKgG,yBACLhG,KAAKqE,YAER,CAEO,iBAAAvB,CAAkBV,GACxBA,EAAE0D,kBACF9F,KAAKS,MAAO,CACb,CAEO,gBAAA8B,CAAiBH,YAGH,QAAjBkE,EAAAlE,EAAEwC,qBAAe,IAAA0B,OAAA,EAAAA,EAAAC,UAAUC,SAAS,cACrB,QAAfC,EAAArE,EAAEwC,qBAAa,IAAA6B,OAAA,EAAAA,EAAEF,UAAUC,SAAS,aAErCxG,KAAKS,MAAO,EAEf,CAEO,gBAAAoC,CAAiBT,WAGpBA,EAAEwC,gBAC4B,wBAA9BxC,EAAEwC,cAAcC,YACC,QAAfyB,EAAAlE,EAAEwC,qBAAa,IAAA0B,OAAA,EAAAA,EAAEC,UAAUC,SAAS,cACnB,QAAjBC,EAAArE,EAAEwC,qBAAe,IAAA6B,OAAA,EAAAA,EAAAF,UAAUC,SAAS,cAEvCxG,KAAKS,MAAO,EAEf,CAEO,mBAAAkC,CAAoBP,GAC1BA,EAAE0D,kBAEF,MAEMhC,EAAS9D,KAAKgD,QAAQa,MAAMC,GAAWA,EAAOa,cAF7B,KAKnBvC,EAAEqC,SAA8BX,IAClC9D,KAAK4F,YAAY9B,EAAOxC,MAAOwC,EAAOwB,UACtCtF,KAAKyB,cAAgB,qBANC,KAUpBW,EAAEqC,UACJzE,KAAKS,MAAO,EACZT,KAAKuE,SAASD,QAEjB,CAEO,iBAAA1B,CAAkBR,GACxB,MAAMd,EAAQc,EAAE0C,OAAOxD,MAMvB,GALAtB,KAAKwB,WAAaF,EAClBtB,KAAKS,MAAO,EAEZT,KAAKqG,cAEDrG,KAAKW,aAEPX,KAAKgD,QAAQS,KAAKK,IACHA,EAAOvC,KACXmF,cAAcjB,SAASnE,EAAMoF,eACpC5C,EAAOoB,MAAMC,QAAU,QAEvBrB,EAAOoB,MAAMC,QAAU,MACxB,QAEE,CAEL,MAAMnC,EAAUhD,KAAKgD,QAAQiC,QAAQnB,GACtBA,EAAOvC,KACRmF,cAAcC,WAAWrF,EAAMoF,iBAI7C1G,KAAKgD,QAAQ0B,SAASZ,GAAYA,EAAOa,aAAc,IAGzC,KAAVrD,GAAgB0B,EAAQR,SAC1BQ,EAAQ,GAAG2B,aAAc,EACzB3B,EAAQ,GAAG0C,eAAe,CAAEC,MAAO,YAEtC,CACF,CAEO,sBAAAK,GAENhG,KAAKgD,QAAQ0B,SAASZ,IAChB9D,KAAKY,SACPkD,EAAOwB,SAAWtF,KAAKsB,MAAMmE,SAAS3B,EAAOxC,OAE7CwC,EAAOwB,SAAWtF,KAAKsB,QAAUwC,EAAOxC,KACzC,GAEJ,CAEO,YAAAsF,CAAaxE,GACI,cAAnBA,EAAE+D,OAAO7E,OACPc,EAAE+D,OAAOb,UACXtF,KAAKsB,MAAQtB,KAAKgD,QACfiC,QAAQnB,IAAYA,EAAOhD,WAC3B2C,KAAKK,GACGA,EAAOxC,QAElBtB,KAAKyB,cAAgB,wBAErBzB,KAAKsB,MAAQ,GACbtB,KAAKyB,cAAgB,yBAGvBzB,KAAK+F,WAAU,GAAM,KAErB/F,KAAK4F,YAAYxD,EAAE+D,OAAO7E,MAAOc,EAAE+D,OAAOb,UAC1CtF,KAAKyB,cAAgB,qBAGvBzB,KAAKgG,yBAGAhG,KAAKY,WACRZ,KAAKS,MAAO,GAIdT,KAAKqE,WACN,CAEO,WAAAwC,CAAYzE,GAClB,MAAMwC,EAAgBxC,EAAE+D,OAAOW,UAAUlC,gBAGtCA,GAC4B,wBAA5BA,EAAcC,WACe,iBAA5BD,EAAcC,aAEhB7E,KAAKS,MAAO,EAEf,CAEO,eAAAsG,CAAgB3E,GAClBpC,KAAKY,SACPZ,KAAKsB,MAAMoD,SAASpD,IAClBc,EAAE4E,SAASC,OAAOjH,KAAKQ,KAAMc,EAAM,IAGrCc,EAAE4E,SAASC,OAAOjH,KAAKQ,KAAMR,KAAKsB,MAErC,CAEO,cAAA4F,GACNlH,KAAK+F,WAAU,GAAM,EACtB,CAEO,eAAAoB,CAAgB/E,GACjBA,EAAEgF,eAAe3B,SAASzF,QAC7BA,KAAKS,MAAO,EAEf,CAEQ,iBAAA4G,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUpF,GAAMpC,KAAKmH,gBAAgB/E,KAG/DpC,KAAKwH,iBAAiB,YAAapF,GAAWpC,KAAK4G,aAAaxE,KAGhEpC,KAAKwH,iBAAiB,WAAYpF,GAAWpC,KAAK6G,YAAYzE,KAE1DpC,KAAKC,UAAUwH,OACjBzH,KAAKC,UAAUwH,KAAKD,iBAAiB,YAAapF,GAChDpC,KAAK+G,gBAAgB3E,KAGvBpC,KAAKwH,iBAAiB,WAAW,KAC/BxH,KAAKkH,gBAAgB,IAG1B,CAEQ,oBAAAQ,GACPH,SAASI,oBAAoB,SAAUvF,GAAMpC,KAAKmH,gBAAgB/E,KAClEpC,KAAKwH,iBAAiB,YAAapF,GAAWpC,KAAK4G,aAAaxE,KAChEpC,KAAKwH,iBAAiB,WAAYpF,GAAWpC,KAAK6G,YAAYzE,KAE1DpC,KAAKC,UAAUwH,OACjBzH,KAAKC,UAAUwH,KAAKE,oBAAoB,YAAavF,GACnDpC,KAAK+G,gBAAgB3E,KAGvBpC,KAAK2H,oBAAoB,WAAW,KAClC3H,KAAKkH,gBAAgB,KAIzBI,MAAMI,sBACP,CAEO,WAAA9B,CAAYtE,EAAegE,GAAW,GAC5C,MAAMsC,EAASC,KAAKC,MAAMD,KAAKE,UAAU/H,KAAKsB,QAG9C,GAAItB,KAAKY,SAAU,CAEjB,GAAI0E,EACFsC,EAAOI,KAAK1G,OACP,CACL,MAAM2G,EAAQL,EAAOpC,QAAQlE,GAC7BsG,EAAOM,OAAOD,EAAO,EACtB,CAEDjI,KAAKsB,MAAQsG,CACd,MACC5H,KAAKsB,MAAQA,EAGftB,KAAK+F,WAAU,GAAM,GAGhB/F,KAAKY,WACJZ,KAAKU,WACPV,KAAKqD,SAASiB,QAEdtE,KAAKuE,SAASD,QAGnB,CAEO,SAAAyB,CAAUoC,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArBtI,KAAKe,YAClBwH,aACEvI,KAAKa,YACHb,KAAKsB,OACJtB,KAAKY,WAAaZ,KAAKsB,MAAMkB,SAC5BxC,KAAKY,UAA2B,KAAfZ,KAAKsB,QAIxBkH,EACJxI,KAAKa,WAAab,KAAKsB,MAAMkB,OAAS,8BAAgC,GAClEiG,EACiB,KAArBzI,KAAKe,YAAqBf,KAAKe,YAAcyH,EAG/CxI,KAAKC,UAAUyI,YAAYL,EAAUI,EAAmBzI,KAAKuE,UAGzD4D,IACFnI,KAAK0B,sBAAwB8G,GAI3BJ,GACFpI,KAAKC,UAAU0I,gBAElB,CAEO,SAAAtE,GACN,MAAM4B,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACN7E,MAAOtB,KAAKsB,SAGhBtB,KAAKoG,cAAcH,EACpB,CAEO,WAAAI,GACN,MAAMJ,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACN3E,WAAYxB,KAAKwB,cAGrBxB,KAAKoG,cAAcH,EACpB,CAEQ,OAAA2C,CAAQC,WAmBf,IAjBEA,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjB9I,KAAK2B,UACkB,KAArB3B,KAAKe,aAAqD,KAA/Bf,KAAK0B,uBAMlCmH,EAAaC,IAAI,qBACmBC,IAApCF,EAAaG,IAAI,gBAEjBhJ,KAAK+F,WAAU,GAAO,GAGpB8C,EAAaC,IAAI,SAAU,CAC7B9I,KAAK+F,WAAU,GAAO,GAEtB,MACMkD,GAD2B,QAAf3C,EAAAtG,KAAKkJ,kBAAU,IAAA5C,OAAA,EAAAA,EAAE6C,cAAc,kBAChBC,mBAAmBnE,QACjDnB,IAAiBA,EAAOhD,WAErBuI,EAA8BJ,EAAQhE,QACzCnB,GAAgBA,EAAOwB,WAI1BtF,KAAKoB,iBAAmBiI,EAAgB7G,SAAWyG,EAAQzG,OAG3DxC,KAAKqB,uBACHgI,EAAgB7G,OAASyG,EAAQzG,QAAU6G,EAAgB7G,OAAS,EAalExC,KAAKG,eACPH,KAAKmE,iBAIP,MAAMmF,EAAkB5F,MAAMC,KAC5B3D,KAAK4D,iBAAiB,wBAGxB,IAAK5D,KAAKY,SAAU,CAClB,GAAI0I,EAAW9G,QAAyB,KAAfxC,KAAKsB,MAAc,CAC1C,MAAMwC,EAASwF,EAAWzF,MACvBC,GAAgBA,EAAOxC,QAAUtB,KAAKsB,QAGzCtB,KAAKuB,KAAOuC,EAAOC,WACpB,CAGG/D,KAAKU,YAAcV,KAAKuB,OAC1BvB,KAAKwB,WAAaxB,KAAKuB,OAASvB,KAAKO,YAAc,GAAKP,KAAKuB,KAC7DvB,KAAKqD,SAAS/B,MAAQtB,KAAKwB,WAE9B,CACF,CAED,GAAIqH,EAAaC,IAAI,UACf9I,KAAKS,OAAST,KAAKU,aAErBV,KAAKuJ,UAAUjF,MAAM,CAAEkF,eAAe,IACtCxJ,KAAKyB,cACH,4DAGAzB,KAAKS,MAAM,CACRT,KAAKY,UAIJ,QAFJ6F,EAAAzG,KAAKgD,QACFa,MAAMC,GAAWA,EAAOwB,kBACvB,IAAAmB,GAAAA,EAAAf,eAAe,CAAEC,MAAO,YAI9B,MAAM8D,EAAY,GAGhBzJ,KAAKuE,SAASmF,wBAAwBC,IACtCC,OAAOC,YAAcJ,EAErBzJ,KAAK4B,cAAe,EAEpB5B,KAAK4B,cAAe,CAEvB,CAGCiH,EAAaC,IAAI,aAEnB9I,KAAKgD,QAAQ0B,SAASZ,IACpBA,EAAOlD,SAAWZ,KAAKY,QAAQ,IAI/BiI,EAAaC,IAAI,eAAiB9I,KAAKqD,WACzCrD,KAAKqD,SAAS/B,MAAQtB,KAAKwB,WAE9B,CAEO,cAAA2C,GACNnE,KAAKgD,QAAQ0B,SAASZ,IAChB9D,KAAKY,SACPkD,EAAOwB,SAAWtF,KAAKsB,MAAMmE,SAAS3B,EAAOxC,OAE7CwC,EAAOwB,SAAWtF,KAAKsB,QAAUwC,EAAOxC,KACzC,GAEJ,CAEO,eAAA8C,SACN,MAAM0F,EAA2B,QAAfxD,EAAAtG,KAAKkJ,kBAAU,IAAA5C,OAAA,EAAAA,EAAE6C,cAAc,iBAC3CF,EAAUa,eAAAA,EAAMV,mBAGtB,GAAIH,EAAS,CACX,MAAMrB,EAAc,GACpB,IAAItG,EAAQ,GACZ2H,EAAQvE,SAASZ,IACfA,EAAOlD,SAAWZ,KAAKY,SAEnBkD,EAAOwB,WACLtF,KAAKY,SACPgH,EAAOI,KAAKlE,EAAOxC,OAEnBA,EAAQwC,EAAOxC,MAElB,IAICtB,KAAKY,SACPZ,KAAKsB,MAAQsG,EAEb5H,KAAKsB,MAAQA,CAEhB,CACF,GAziCezB,EAAMkK,OAAGC,EAGTnK,EAAAoK,kBAAoB,IAC/BnK,EAAWmK,kBACdC,gBAAgB,GAOXrK,EAAcsK,gBAAG,EAOxBC,EAAA,CADCC,KACkCxK,EAAAyK,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACI5K,EAAAyK,UAAA,qBAAA,GAItBF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACN7K,EAAAyK,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACH5K,EAAAyK,UAAA,cAAA,GAIfF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACL7K,EAAAyK,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACD7K,EAAAyK,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACR7K,EAAAyK,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACL5K,EAAAyK,UAAA,YAAA,GAIbF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACC5K,EAAAyK,UAAA,kBAAA,GAInBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACG5K,EAAAyK,UAAA,oBAAA,GAIrBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACD5K,EAAAyK,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACD5K,EAAAyK,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACD5K,EAAAyK,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACD7K,EAAAyK,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACD5K,EAAAyK,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACA5K,EAAAyK,UAAA,iBAAA,GAIlBF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACW7K,EAAAyK,UAAA,qBAAA,GAI7BF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACO7K,EAAAyK,UAAA,oBAAA,GAMzBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACO5K,EAAAyK,UAAA,wBAAA,GAMzBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,WACa5K,EAAAyK,UAAA,8BAAA,GAM/BF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACF7K,EAAAyK,UAAA,aAAA,GAOhBF,EAAA,CADCC,KACSxK,EAAAyK,UAAA,YAAA,GAMVF,EAAA,CADCG,EAAS,CAAEC,KAAME,UACF7K,EAAAyK,UAAA,kBAAA,GAOhBF,EAAA,CADCC,KACwCxK,EAAAyK,UAAA,qBAAA,GAOzCF,EAAA,CADCO,EAAsB,CAAEC,SAAU,yBACd/K,EAAAyK,UAAA,eAAA,GAOrBF,EAAA,CADCO,EAAsB,CAAEC,SAAU,mCACN/K,EAAAyK,UAAA,uBAAA,GAO7BF,EAAA,CADCS,EAAM,YACqBhL,EAAAyK,UAAA,gBAAA,GAO5BF,EAAA,CADCS,EAAM,YACgBhL,EAAAyK,UAAA,gBAAA,GAOvBF,EAAA,CADCS,EAAM,aACiBhL,EAAAyK,UAAA,iBAAA,GAOxBF,EAAA,CADCC,KAC0BxK,EAAAyK,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiBxK,EAAAyK,UAAA,iBAAA,GAOlBF,EAAA,CADCC,KACoBxK,EAAAyK,UAAA,oBAAA,GAtLVzK,EAAQuK,EAAA,CADpBU,EAAc,iBACFjL"}

package/components/reusable/stepper/index.d.ts

@@ -0,0 +1,4 @@
+export { Stepper } from './stepper';
+export { StepperItem } from './stepperItem';
+export { StepperItemChild } from './stepperItemChild';
+//# sourceMappingURL=index.d.ts.map

package/components/reusable/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/components/reusable/stepper/index.js

@@ -0,0 +1,2 @@
+export{Stepper}from"./stepper.js";export{StepperItem}from"./stepperItem.js";export{StepperItemChild}from"./stepperItemChild.js";
+//# sourceMappingURL=index.js.map

package/components/reusable/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/reusable/stepper/stepper.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import './stepperItem';
+/**
+ * Stepper
+ * @slot unnamed - Slot for step items.
+ * @fires on-click - Captures the event and emits the active step and original event details when click on any step title. This is only for procedure type stepper. Status stepper doesn't emit this event.
+ */
+export declare class Stepper extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Stepper type `'procedure'` & `'status'`.
+     *
+     * procedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.
+     *
+     * status: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.
+     *
+     * Note: Read the stepper guidelines for more info.
+     */
+    stepperType: string;
+    /** Wheter the stepper is in vertical type. */
+    vertical: boolean;
+    /** Stepper size `'large'` & `'small'`. */
+    stepperSize: string;
+    /** Curent index of stepper. Usefull for navigation logic like next, prev etc.*/
+    currentIndex: number;
+    /**
+     * Internal state to identify whether stepper is responsive after certain width.
+     * @ignore
+     */
+    isResponsive: boolean;
+    /**
+     * Queries any slotted step items.
+     * @ignore
+     */
+    steps: Array<any>;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changedProperties: any): void;
+    private _handleStepClick;
+    /** @internal */
+    private _debounceResize;
+    private _updateContainerWidth;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-stepper': Stepper;
+    }
+}
+//# sourceMappingURL=stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AAEH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,+BAAiB;IAEvC;;;;;;;OAOG;IAEH,WAAW,SAAe;IAE1B,8CAA8C;IAE9C,QAAQ,UAAS;IAEjB,0CAA0C;IAE1C,WAAW,SAAW;IAEtB,gFAAgF;IAEhF,YAAY,SAAK;IAEjB;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;IAeN,YAAY,IAAI,IAAI;IAiBpB,OAAO,CAAC,iBAAiB,EAAE,GAAG;IA0BvC,OAAO,CAAC,gBAAgB;IAWxB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEH,OAAO,CAAC,qBAAqB;IAWpB,iBAAiB;IASjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}

package/components/reusable/stepper/stepper.js

@@ -0,0 +1,8 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as r}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as p}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as o}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{debounce as n}from"../../../common/helpers/helpers.js";import l from"./stepper.scss.js";import"./stepperItem.js";let d=class extends s{constructor(){super(...arguments),this.stepperType="procedure",this.vertical=!1,this.stepperSize="large",this.currentIndex=0,this.isResponsive=!1,this._debounceResize=n((()=>{this._updateContainerWidth()}))}render(){return t`
+      <div
+        class=${this.vertical?"vertical-stepper-wrapper":(this.isResponsive?"stepper-responsive":"")+" horizontal-stepper-wrapper"}
+      >
+        <slot></slot>
+      </div>
+    `}firstUpdated(){var e;this._updateContainerWidth(),(null===(e=this.steps)||void 0===e?void 0:e.length)>0&&(this.steps[0].isFirstStep=!0,this.steps[this.steps.length-1].isLastStep=!0,this.steps.length>=3&&(this.steps[this.steps.length-2].isSecondLastStep=!0),2===this.steps.length&&(this.steps[0].isTwoStepStepper=!0),this.steps.forEach(((e,t)=>e.stepIndex=t)))}updated(e){var t,s,i,r;e.has("stepperSize")&&(null===(t=this.steps)||void 0===t||t.forEach((e=>{"large"===this.stepperSize?e.stepSize="large":e.stepSize="small"}))),e.has("vertical")&&(null===(s=this.steps)||void 0===s||s.forEach((e=>{e.vertical=this.vertical}))),e.has("stepperType")&&(null===(i=this.steps)||void 0===i||i.forEach((e=>{e.stepperType=this.stepperType}))),e.has("isResponsive")&&(null===(r=this.steps)||void 0===r||r.forEach((e=>{e.isResponsive=this.isResponsive})))}_handleStepClick(e){const t=new CustomEvent("on-click",{detail:{origEvent:e.detail.origEvent,step:e.detail.step,stepIndex:e.detail.stepIndex}});this.dispatchEvent(t)}_updateContainerWidth(){const e=this.renderRoot.querySelector(".horizontal-stepper-wrapper");if(e){const t=e.clientWidth;this.isResponsive=t<=672,this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.addEventListener("on-step-click",(e=>this._handleStepClick(e))),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){this.removeEventListener("on-step-click",(e=>this._handleStepClick(e))),window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}};d.styles=l,e([r({type:String})],d.prototype,"stepperType",void 0),e([r({type:Boolean})],d.prototype,"vertical",void 0),e([r({type:String})],d.prototype,"stepperSize",void 0),e([r({type:Number})],d.prototype,"currentIndex",void 0),e([p()],d.prototype,"isResponsive",void 0),e([o({selector:"kyn-stepper-item"})],d.prototype,"steps",void 0),d=e([i("kyn-stepper")],d);export{d as Stepper};
+//# sourceMappingURL=stepper.js.map

package/components/reusable/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../../src/components/reusable/stepper/stepper.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport stepperStyles from './stepper.scss';\nimport './stepperItem';\n\n/**\n * Stepper\n * @slot unnamed - Slot for step items.\n * @fires on-click - Captures the event and emits the active step and original event details when click on any step title. This is only for procedure type stepper. Status stepper doesn't emit this event.\n */\n\n@customElement('kyn-stepper')\nexport class Stepper extends LitElement {\n  static override styles = stepperStyles;\n\n  /** Stepper type `'procedure'` & `'status'`.\n   *\n   * procedure: Allows a user to move through a series of steps that need to be completed, such as filling out a series of forms. The user can therefore know where they are in the sequence, and can go back to previous steps if needed. Procedure should use the `'large'` size stepper.\n   *\n   * status: Should not allow the user navigate to previous steps for ex: sequential forms, payment gateway etc. Should use the `'small'` size to avoid unnecessary clutter.\n   *\n   * Note: Read the stepper guidelines for more info.\n   */\n  @property({ type: String })\n  stepperType = 'procedure';\n\n  /** Wheter the stepper is in vertical type. */\n  @property({ type: Boolean })\n  vertical = false;\n\n  /** Stepper size `'large'` & `'small'`. */\n  @property({ type: String })\n  stepperSize = 'large';\n\n  /** Curent index of stepper. Usefull for navigation logic like next, prev etc.*/\n  @property({ type: Number })\n  currentIndex = 0;\n\n  /**\n   * Internal state to identify whether stepper is responsive after certain width.\n   * @ignore\n   */\n  @state()\n  isResponsive = false;\n\n  /**\n   * Queries any slotted step items.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-stepper-item' })\n  steps!: Array<any>;\n\n  override render() {\n    return html`\n      <div\n        class=${this.vertical\n          ? 'vertical-stepper-wrapper'\n          : `${\n              this.isResponsive ? 'stepper-responsive' : ''\n            } horizontal-stepper-wrapper`}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  // when firstmost load component\n  override firstUpdated(): void {\n    this._updateContainerWidth();\n    if (this.steps?.length > 0) {\n      this.steps[0].isFirstStep = true;\n      this.steps[this.steps.length - 1].isLastStep = true;\n\n      if (this.steps.length >= 3) {\n        this.steps[this.steps.length - 2].isSecondLastStep = true;\n      }\n      // Only 2 steps - 1st is left align and 2nd is right aligned\n      if (this.steps.length === 2) {\n        this.steps[0].isTwoStepStepper = true;\n      }\n      this.steps.forEach((step, index) => (step.stepIndex = index));\n    }\n  }\n\n  override updated(changedProperties: any) {\n    if (changedProperties.has('stepperSize')) {\n      this.steps?.forEach((step: any) => {\n        this.stepperSize === 'large'\n          ? (step.stepSize = 'large')\n          : (step.stepSize = 'small');\n      });\n    }\n    if (changedProperties.has('vertical')) {\n      this.steps?.forEach((step) => {\n        step.vertical = this.vertical;\n      });\n    }\n    if (changedProperties.has('stepperType')) {\n      this.steps?.forEach((step: any) => {\n        step.stepperType = this.stepperType;\n      });\n    }\n    if (changedProperties.has('isResponsive')) {\n      this.steps?.forEach((step: any) => {\n        step.isResponsive = this.isResponsive;\n      });\n    }\n  }\n\n  // Called when click on any step's title.\n  private _handleStepClick(e: any) {\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e.detail.origEvent,\n        step: e.detail.step,\n        stepIndex: e.detail.stepIndex,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._updateContainerWidth();\n  });\n\n  private _updateContainerWidth() {\n    const stepperElement = this.renderRoot.querySelector(\n      '.horizontal-stepper-wrapper'\n    );\n    if (stepperElement) {\n      const containerWidth = stepperElement.clientWidth;\n      this.isResponsive = containerWidth <= 672;\n      this.requestUpdate();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // capture step click event when click on step's title\n    this.addEventListener('on-step-click', (e: any) =>\n      this._handleStepClick(e)\n    );\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-step-click', (e: any) =>\n      this._handleStepClick(e)\n    );\n    window.removeEventListener('resize', this._debounceResize);\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-stepper': Stepper;\n  }\n}\n"],"names":["Stepper","LitElement","constructor","this","stepperType","vertical","stepperSize","currentIndex","isResponsive","_debounceResize","debounce","_updateContainerWidth","render","html","firstUpdated","steps","_a","length","isFirstStep","isLastStep","isSecondLastStep","isTwoStepStepper","forEach","step","index","stepIndex","updated","changedProperties","has","stepSize","_b","_c","_d","_handleStepClick","e","event","CustomEvent","detail","origEvent","dispatchEvent","stepperElement","renderRoot","querySelector","containerWidth","clientWidth","requestUpdate","connectedCallback","super","addEventListener","window","disconnectedCallback","removeEventListener","styles","stepperStyles","__decorate","property","type","String","prototype","Boolean","Number","state","queryAssignedElements","selector","customElement"],"mappings":"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"}

package/components/reusable/stepper/stepper.scss.js

@@ -0,0 +1,48 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.vertical-stepper-wrapper,
+.stepper-responsive {
+  display: inline-flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.horizontal-stepper-wrapper {
+  display: flex;
+  padding: 0;
+  justify-content: center;
+}`;export{t as default};
+//# sourceMappingURL=stepper.scss.js.map

package/components/reusable/stepper/stepper.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/stepper/stepperItem.d.ts

@@ -0,0 +1,84 @@
+import { LitElement } from 'lit';
+import '@kyndryl-design-system/shidoka-foundation/components/icon';
+import '@kyndryl-design-system/shidoka-foundation/components/link';
+import './stepperItemChild';
+/** Stepper Item.
+ * @fires on-step-click - Emits the step details to the parent stepper component when click on step title.
+ * @slot tooltip - Slot for tooltip.
+ * @slot child - Children slot. Used for nested children in vertical stepper. Visible only when step state is active. Do not use inside stepperType `'status'`.
+ * @slot unnamed - Optional slot for content in vertical stepper. Visible only when step state is active.
+ */
+export declare class StepperItem extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Whether the stepper is in vertical type. */
+    vertical: boolean;
+    /** Stepper size `'large'` & `'small'`. */
+    stepSize: string;
+    /** Step name. */
+    stepName: string;
+    /** Step title. Required for actions.*/
+    stepTitle: string;
+    /** Step state. `'pending'`, `'active'`, `'completed'`, `'excluded'`, `'warning'` & `'destructive'`.
+     *
+     * `'pending'`, `'active'` and `'completed'` / `'excluded'` states has 0%, 50% & 100% progress set internally.
+     */
+    stepState: string;
+    /** Stepper type. Inherited from <kyn-stepper>.
+     * @ignore
+     */
+    stepperType: string;
+    /** Disable step. */
+    disabled: boolean;
+    /** Optional. Show counter for vertical stepper when stepState is `'pending'`. */
+    showCounter: boolean;
+    /** Progress of stepper.
+     * @ignore
+     */
+    progress: number;
+    /** Internal state to indicate whether it's 1st step.
+     * @ignore
+     */
+    isFirstStep: boolean;
+    /** Internal state for step index.
+     * @ignore
+     */
+    stepIndex: number;
+    /** Internal state to indicate whether it's last step.
+     * @ignore
+     */
+    isLastStep: boolean;
+    /** Internal state to indicate whether it's second-last step.
+     * @ignore
+     */
+    isSecondLastStep: boolean;
+    /** Internal state to indicate whether only two steps are there inside `<kyn-wrapper>`.
+     * @ignore
+     */
+    isTwoStepStepper: boolean;
+    /** Open children toggle
+     * @ignore
+     */
+    openChildren: boolean;
+    /** if its responsive
+     * @ignore
+     */
+    isResponsive: boolean;
+    /**
+     * Queries any slotted step child items.
+     * @ignore
+     */
+    childSteps: Array<any>;
+    render(): import("lit-html").TemplateResult<1>;
+    private _handleChildToggle;
+    private _handleStepClick;
+    firstUpdated(): Promise<void>;
+    updated(changedProps: any): void;
+    private updateChildren;
+    private getProgressValue;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-stepper-item': StepperItem;
+    }
+}
+//# sourceMappingURL=stepperItem.d.ts.map

package/components/reusable/stepper/stepperItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepperItem.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/stepper/stepperItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAiBnE,OAAO,oBAAoB,CAAC;AAE5B;;;;;GAKG;AAEH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,+BAAqB;IAE3C,+CAA+C;IAE/C,QAAQ,UAAS;IAEjB,0CAA0C;IAE1C,QAAQ,SAAW;IAEnB,iBAAiB;IAEjB,QAAQ,SAAM;IAEd,uCAAuC;IAEvC,SAAS,SAAM;IAEf;;;OAGG;IAEH,SAAS,SAAa;IAEtB;;OAEG;IAEH,WAAW,SAAe;IAE1B,oBAAoB;IAEpB,QAAQ,UAAS;IAEjB,iFAAiF;IAEjF,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,SAAS,SAAK;IAEd;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEf,MAAM;IAgRf,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,gBAAgB;IAgBT,YAAY;IAYlB,OAAO,CAAC,YAAY,EAAE,GAAG;IAqBlC,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,gBAAgB;CAYzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,WAAW,CAAC;KACjC;CACF"}