npm - @kyndryl-design-system/shidoka-applications - Versions diffs - 2.42.2 → 2.42.4 - Mend

@kyndryl-design-system/shidoka-applications 2.42.2 → 2.42.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -173,8 +173,6 @@ export declare class Dropdown extends Dropdown_base {
     private handleTagClear;
     private handleClear;
     private handleSearchClick;
-    private handleButtonBlur;
-    private handleSearchBlur;
     private handleSearchKeydown;
     private handleSearchInput;
     private _updateSelectedOptions;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;;AAwBnB;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,aAAqB;IACjD,OAAgB,MAAM,MAAgB;IAEtC,kBAAkB;IAElB,KAAK,SAAM;IAEX,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,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,SAAS,UAAS;IAElB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B,gCAAgC;IAEhC,YAAY,SAAa;IAEzB,8CAA8C;IAE9C,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAAU;IAE/C;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,iCAAiC;IAEjC,WAAW;;;;;;;;;MAAuB;IAElC,4CAA4C;IAE5C,cAAc,UAAS;IAEvB;;OAEG;IAEH,YAAY;;;;;;;;;MAAuB;IAEnC;;;OAGG;IAEH,cAAc,SAAM;IAEpB;;;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,eAAe,EAAG,WAAW,CAAC;IAE9B;;;OAGG;IAEH,gBAAgB,EAAG,gBAAgB,CAAC;IAEpC;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAM;IAE1B;;OAEG;IACH,iBAAiB,EAAE,GAAG,CAAS;IAE/B;;OAEG;IACH,sBAAsB,SAAM;IAEnB,MAAM;IA8Lf,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,mBAAmB;IA8DlB,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,cAAc;IAiKtB,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,~~gBAAgB;IAaxB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,~~mBAAmB;IA2C3B,OAAO,CAAC,iBAAiB;IAoCzB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,YAAY;IA6CpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAgBjB,oBAAoB;IAc7B,OAAO,CAAC,WAAW;IA+BnB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,WAAW;IASV,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAqElC,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;CA0B5B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
1	+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;;AAwBnB;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,aAAqB;IACjD,OAAgB,MAAM,MAAgB;IAEtC,kBAAkB;IAElB,KAAK,SAAM;IAEX,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,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,SAAS,UAAS;IAElB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B,gCAAgC;IAEhC,YAAY,SAAa;IAEzB,8CAA8C;IAE9C,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAAU;IAE/C;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,iCAAiC;IAEjC,WAAW;;;;;;;;;MAAuB;IAElC,4CAA4C;IAE5C,cAAc,UAAS;IAEvB;;OAEG;IAEH,YAAY;;;;;;;;;MAAuB;IAEnC;;;OAGG;IAEH,cAAc,SAAM;IAEpB;;;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,eAAe,EAAG,WAAW,CAAC;IAE9B;;;OAGG;IAEH,gBAAgB,EAAG,gBAAgB,CAAC;IAEpC;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAM;IAE1B;;OAEG;IACH,iBAAiB,EAAE,GAAG,CAAS;IAE/B;;OAEG;IACH,sBAAsB,SAAM;IAEnB,MAAM;IA8Lf,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,mBAAmB;IA8DlB,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,cAAc;IAiKtB,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,mBAAmB;IA2C3B,OAAO,CAAC,iBAAiB;IAoCzB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,YAAY;IA6CpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAgBjB,oBAAoB;IAc7B,OAAO,CAAC,WAAW;IA+BnB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,WAAW;IASV,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAqElC,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;CA0B5B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/dropdown/dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{o as i,n as o,t as l,l as a,i as s,e as r}from"../../../vendor/lit-461e78e6.js";import{i as n,x as d,s as h}from"../../../vendor/lit-element-c6c02f24.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as c}from"../../../vendor/deepmerge-ts-e62363e6.js";import"./dropdownOption.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../button/button.js";import{e as u,f as v,g as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a585cb92.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../checkbox/checkboxSubgroup.js";import"../../../tag-5e217e29.js";import"../link/link.js";import"../link/defs.js";import"../loaders/skeleton.js";var g=n`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{o as i,n as o,t as l,l as s,i as a,e as r}from"../../../vendor/lit-461e78e6.js";import{i as n,x as d,s as h}from"../../../vendor/lit-element-c6c02f24.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as c}from"../../../vendor/deepmerge-ts-e62363e6.js";import"./dropdownOption.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../button/button.js";import{e as u,f as v,g as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a585cb92.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../checkbox/checkboxSubgroup.js";import"../../../tag-5e217e29.js";import"../link/link.js";import"../link/defs.js";import"../loaders/skeleton.js";var g=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -774,7 +774,7 @@ kyn-tag-group {
               @click=${()=>this.handleClick()}
               @keydown=${e=>this.handleButtonKeydown(e)}
               @mousedown=${e=>{this.searchable||e.preventDefault()}}
-              @blur=${e=>this.handleButtonBlur(e)}
+              @blur=${e=>e.stopPropagation()}
             >
               ${this.multiple&&this.value.length?d`
                     <button
@@ -800,7 +800,7 @@ kyn-tag-group {
                       aria-disabled=${this.disabled}
                       @keydown=${e=>this.handleSearchKeydown(e)}
                       @input=${e=>this.handleSearchInput(e)}
-                      @blur=${e=>this.handleSearchBlur(e)}
+                      @blur=${e=>e.stopPropagation()}
                       @click=${e=>this.handleSearchClick(e)}
                     />
                   `:d`
@@ -924,5 +924,5 @@ kyn-tag-group {
           ${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.updateChildOptions(),this._updateOptions(),this._updateSelectedText()}updateChildOptions(){var e;(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("#children")).assignedElements({flatten:!0}).forEach((e=>{"KYN-DROPDOWN-OPTION"===e.tagName&&(e.allowAddOption=this.allowAddOption)}))}handleClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.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));const t=e.relatedTarget;t&&(t.closest("kyn-dropdown-option")||t.classList.contains("search")||t.closest(".add-option"))||(this.open=!1,this.assistiveText="Dropdown menu options.")}handleKeyboard(e,t,i){var o;const l=[0,32],a=[...Array.from((null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelectorAll(".select-all"))||[]),...this.options.filter((e=>"none"!==e.style.display))],s=a.find((e=>e.highlighted)),r=a.find((e=>e.selected));let n=s?a.indexOf(s):a.find((e=>e.selected))?a.indexOf(r):0;l.includes(t)&&e.preventDefault();const d=this.open;if("button"===i||"addOption"===i){let o=l.includes(t)||13===t||40==t||38==t;if(e.target===this.clearMultipleEl&&13===t&&(o=!1,a[n].highlighted=!1,a[n].selected=!a[n].selected,n=0,13!==t))return;o&&(this.open=!0,this.allowAddOption&&"button"===i&&13===t?setTimeout((()=>{var e;null===(e=this.addOptionInputEl)||void 0===e||e.focus()}),100):this.multiple||""===this.value||a[n].scrollIntoView({block:"nearest"}))}switch(t){case 0:case 32:case 13:return a[n].highlighted=!0,void(d&&(this.multiple?(a[n].selected=!a[n].selected,this._handleClick({detail:{value:a[n].value,selected:a[n].selected}})):(a.forEach((e=>e.selected=!1)),a[n].selected=!0,this.open=!1,this.assistiveText=`Selected ${a[n].value}`)));case 40:{let e=s||r?n===a.length-1?0:n+1:0;return a[e].disabled&&(e=e===a.length-1?0:e+1),a[e].focus(),a[n].highlighted=!1,a[e].highlighted=!0,a[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=a[e].text)}case 38:{let e=0===n?a.length-1:n-1;return a[e].disabled&&(e=0===e?a.length-1:e-1),a[e].focus(),a[n].highlighted=!1,a[e].highlighted=!0,a[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=a[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){var t;if(e.stopPropagation(),this.multiple){const e=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));this.value=e.length?e:[]}else this.value="";this._validate(!0,!1),this._updateSelectedOptions(),this.emitValue();const i=new CustomEvent("on-clear-all",{detail:{value:this.value}});this.dispatchEvent(i)}handleTagClear(e){this.updateValue(e.value,!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._validate(!0,!1),this._updateSelectedOptions(),this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i,o,l;"kyn-dropdown-option"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.localName)||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("options"))||(null===(o=e.relatedTarget)||void 0===o?void 0:o.classList.contains("search"))||(null===(l=e.relatedTarget)||void 0===l?void 0:l.closest(".add-option"))||(this.open=!1),this._validate(!0,!1)}handleSearchBlur(e){var t,i,o,l;e.relatedTarget&&("kyn-dropdown-option"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.localName)||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("options"))||(null===(o=e.relatedTarget)||void 0===o?void 0:o.classList.contains("select"))||(null===(l=e.relatedTarget)||void 0===l?void 0:l.closest(".add-option")))||(this.open=!1),this._validate(!0,!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted)),i=this.options.findIndex((e=>e.highlighted));this.searchTextEntered=!1,13===e.keyCode&&(this.searchTextEntered=!0,t?(this.prevSearchKeydownIndex!==i&&(this.multiple?t.selected=!t.selected:(this.options.forEach((e=>e.selected=!1)),t.selected=!0,this.open=!1),this.updateValue(t.value,t.selected)),t.selected?(this.assistiveText=`Selected ${t.innerHTML}`,this.prevSearchKeydownIndex=i):this.assistiveText=`Deselected ${t.innerHTML}`):this.assistiveText="No item matched."),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"}),this.searchTextEntered&&(this.assistiveText="Option Matched"))}}_updateSelectedOptions(){this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value}))}_handleClick(e){var t;if("selectAll"===e.detail.value){this.selectAllChecked=e.detail.selected;const i=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));e.detail.selected?(this.value=this.options.filter((e=>!e.disabled||e.disabled&&e.selected)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=i.length?i:[],this.assistiveText="Deselected all items."),this._validate(!0,!1)}else this.updateValue(e.detail.value,e.detail.selected),this.assistiveText=e.detail.selected?`Selected ${e.detail.value}`:`Deselected ${e.detail.value}`;this._updateSelectedOptions(),this.multiple||(this.open=!1),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==(null==t?void 0:t.localName)&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),this._onConnected(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.addEventListener("on-blur",(e=>this._handleBlur(e)))}disconnectedCallback(){this._onDisconnected(),document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-click",(e=>this._handleClick(e))),this.removeEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.removeEventListener("on-blur",(e=>this._handleBlur(e))),super.disconnectedCallback()}updateValue(e,t=!1){if(this.multiple){const i=""===this.value?[]:JSON.parse(JSON.stringify(this.value));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)},o=this.required&&!this.value.length?"Please fill out this field.":"",l=""!==this.invalidText?this.invalidText:o;this._internals.setValidity(i,l,this.buttonEl),e&&(this._internalValidationMsg=o),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)}willUpdate(e){e.has("textStrings")&&(this._textStrings=c(b,this.textStrings))}updated(e){var t,i;if(this._onUpdated(e),e.has("value")){this._updateOptions();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._updateTags(),this._updateSelectedText()}if(e.has("open")||e.has("openDirection")){if(this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),"up"===this.openDirection)this._openUpwards=!0;else if("down"===this.openDirection)this._openUpwards=!1;else if(this.open){const e=.6;this._openUpwards=this.buttonEl.getBoundingClientRect().top>window.innerHeight*e}this.open&&!this.multiple&&(null===(i=this.options.find((e=>e.selected)))||void 0===i||i.scrollIntoView({block:"nearest"}))}e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple})),e.has("searchText")&&this.searchEl&&(this.searchEl.value=this.searchText),e.has("allowAddOption")&&this.updateChildOptions()}_updateTags(){if(this.multiple){const e=Array.from(this.querySelectorAll("kyn-dropdown-option")),t=[];e&&(e.forEach((e=>{e.selected&&t.push({value:e.value,text:e.textContent,disabled:e.disabled})})),this._tags=t)}}_updateOptions(){Array.from(this.querySelectorAll("kyn-dropdown-option")).forEach((e=>{if(e.multiple=this.multiple,this.multiple){const t=this.value.includes(e.value);e.selected=t}else e.selected=this.value===e.value}))}_handleInputNewOption(e){const t=e.target;this.newOptionValue=t.value}_handleRemoveOption(){this.assistiveText="MY option removed ",setTimeout((()=>{this.open=!1,this.buttonEl.focus()}),100)}_updateSelectedText(){const e=Array.from(this.querySelectorAll("kyn-dropdown-option"));if(!this.multiple){if(e.length&&""!==this.value){const t=e.find((e=>e.value===this.value));t?this.text=t.textContent.trim():(this.text="",console.warn(`No dropdown option found with value: ${this.value}`))}this.searchable&&this.text&&(this.searchText=this.text===this.placeholder?"":this.text,this.searchEl.value=this.searchText)}}};w.styles=g,e([o({type:String})],w.prototype,"label",void 0),e([o({type:String})],w.prototype,"size",void 0),e([o({type:Boolean})],w.prototype,"inline",void 0),e([o({type:String})],w.prototype,"caption",void 0),e([o({type:String})],w.prototype,"placeholder",void 0),e([o({type:Boolean})],w.prototype,"open",void 0),e([o({type:Boolean})],w.prototype,"searchable",void 0),e([o({type:Boolean})],w.prototype,"filterSearch",void 0),e([o({type:Boolean})],w.prototype,"multiple",void 0),e([o({type:Boolean})],w.prototype,"required",void 0),e([o({type:Boolean})],w.prototype,"hideLabel",void 0),e([o({type:Boolean})],w.prototype,"disabled",void 0),e([o({type:Boolean})],w.prototype,"hideTags",void 0),e([o({type:Boolean})],w.prototype,"selectAll",void 0),e([o({type:String})],w.prototype,"selectAllText",void 0),e([o({type:String})],w.prototype,"menuMinWidth",void 0),e([o({type:String})],w.prototype,"openDirection",void 0),e([o({type:Boolean})],w.prototype,"selectAllChecked",void 0),e([o({type:Boolean})],w.prototype,"selectAllIndeterminate",void 0),e([o({type:Object})],w.prototype,"textStrings",void 0),e([o({type:Boolean})],w.prototype,"allowAddOption",void 0),e([l()],w.prototype,"_textStrings",void 0),e([l()],w.prototype,"newOptionValue",void 0),e([l()],w.prototype,"text",void 0),e([o({type:String})],w.prototype,"searchText",void 0),e([l()],w.prototype,"assistiveText",void 0),e([a({selector:"kyn-dropdown-option"})],w.prototype,"options",void 0),e([a({selector:"kyn-dropdown-option[selected]"})],w.prototype,"selectedOptions",void 0),e([s(".search")],w.prototype,"searchEl",void 0),e([s(".select")],w.prototype,"buttonEl",void 0),e([s(".options")],w.prototype,"listboxEl",void 0),e([s(".clear-multiple")],w.prototype,"clearMultipleEl",void 0),e([s(".add-option-input")],w.prototype,"addOptionInputEl",void 0),e([l()],w.prototype,"_openUpwards",void 0),e([l()],w.prototype,"_tags",void 0),w=e([r("kyn-dropdown")],w);export{w as Dropdown};
+    `}firstUpdated(){""===this.placeholder&&(this.searchable?this.placeholder="Search":this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.updateChildOptions(),this._updateOptions(),this._updateSelectedText()}updateChildOptions(){var e;(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("#children")).assignedElements({flatten:!0}).forEach((e=>{"KYN-DROPDOWN-OPTION"===e.tagName&&(e.allowAddOption=this.allowAddOption)}))}handleClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.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));const t=e.relatedTarget;t&&(t.closest("kyn-dropdown-option")||t.classList.contains("search")||t.closest(".add-option"))||(this.open=!1,this.assistiveText="Dropdown menu options.")}handleKeyboard(e,t,i){var o;const l=[0,32],s=[...Array.from((null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelectorAll(".select-all"))||[]),...this.options.filter((e=>"none"!==e.style.display))],a=s.find((e=>e.highlighted)),r=s.find((e=>e.selected));let n=a?s.indexOf(a):s.find((e=>e.selected))?s.indexOf(r):0;l.includes(t)&&e.preventDefault();const d=this.open;if("button"===i||"addOption"===i){let o=l.includes(t)||13===t||40==t||38==t;if(e.target===this.clearMultipleEl&&13===t&&(o=!1,s[n].highlighted=!1,s[n].selected=!s[n].selected,n=0,13!==t))return;o&&(this.open=!0,this.allowAddOption&&"button"===i&&13===t?setTimeout((()=>{var e;null===(e=this.addOptionInputEl)||void 0===e||e.focus()}),100):this.multiple||""===this.value||s[n].scrollIntoView({block:"nearest"}))}switch(t){case 0:case 32:case 13:return s[n].highlighted=!0,void(d&&(this.multiple?(s[n].selected=!s[n].selected,this._handleClick({detail:{value:s[n].value,selected:s[n].selected}})):(s.forEach((e=>e.selected=!1)),s[n].selected=!0,this.open=!1,this.assistiveText=`Selected ${s[n].value}`)));case 40:{let e=a||r?n===s.length-1?0:n+1:0;return s[e].disabled&&(e=e===s.length-1?0:e+1),s[e].focus(),s[n].highlighted=!1,s[e].highlighted=!0,s[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=s[e].text)}case 38:{let e=0===n?s.length-1:n-1;return s[e].disabled&&(e=0===e?s.length-1:e-1),s[e].focus(),s[n].highlighted=!1,s[e].highlighted=!0,s[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=s[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){var t;if(e.stopPropagation(),this.multiple){const e=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));this.value=e.length?e:[]}else this.value="";this._validate(!0,!1),this._updateSelectedOptions(),this.emitValue();const i=new CustomEvent("on-clear-all",{detail:{value:this.value}});this.dispatchEvent(i)}handleTagClear(e){this.updateValue(e.value,!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._validate(!0,!1),this._updateSelectedOptions(),this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted)),i=this.options.findIndex((e=>e.highlighted));this.searchTextEntered=!1,13===e.keyCode&&(this.searchTextEntered=!0,t?(this.prevSearchKeydownIndex!==i&&(this.multiple?t.selected=!t.selected:(this.options.forEach((e=>e.selected=!1)),t.selected=!0,this.open=!1),this.updateValue(t.value,t.selected)),t.selected?(this.assistiveText=`Selected ${t.innerHTML}`,this.prevSearchKeydownIndex=i):this.assistiveText=`Deselected ${t.innerHTML}`):this.assistiveText="No item matched."),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"}),this.searchTextEntered&&(this.assistiveText="Option Matched"))}}_updateSelectedOptions(){this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value}))}_handleClick(e){var t;if("selectAll"===e.detail.value){this.selectAllChecked=e.detail.selected;const i=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));e.detail.selected?(this.value=this.options.filter((e=>!e.disabled||e.disabled&&e.selected)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=i.length?i:[],this.assistiveText="Deselected all items."),this._validate(!0,!1)}else this.updateValue(e.detail.value,e.detail.selected),this.assistiveText=e.detail.selected?`Selected ${e.detail.value}`:`Deselected ${e.detail.value}`;this._updateSelectedOptions(),this.multiple||(this.open=!1),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==(null==t?void 0:t.localName)&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),this._onConnected(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.addEventListener("on-blur",(e=>this._handleBlur(e)))}disconnectedCallback(){this._onDisconnected(),document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-click",(e=>this._handleClick(e))),this.removeEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.removeEventListener("on-blur",(e=>this._handleBlur(e))),super.disconnectedCallback()}updateValue(e,t=!1){if(this.multiple){const i=""===this.value?[]:JSON.parse(JSON.stringify(this.value));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)},o=this.required&&!this.value.length?"Please fill out this field.":"",l=""!==this.invalidText?this.invalidText:o;this._internals.setValidity(i,l,this.buttonEl),e&&(this._internalValidationMsg=o),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)}willUpdate(e){e.has("textStrings")&&(this._textStrings=c(b,this.textStrings))}updated(e){var t,i;if(this._onUpdated(e),e.has("value")){this._updateOptions();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._updateTags(),this._updateSelectedText()}if(e.has("open")||e.has("openDirection")){if(this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),"up"===this.openDirection)this._openUpwards=!0;else if("down"===this.openDirection)this._openUpwards=!1;else if(this.open){const e=.6;this._openUpwards=this.buttonEl.getBoundingClientRect().top>window.innerHeight*e}this.open&&!this.multiple&&(null===(i=this.options.find((e=>e.selected)))||void 0===i||i.scrollIntoView({block:"nearest"}))}e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple})),e.has("searchText")&&this.searchEl&&(this.searchEl.value=this.searchText),e.has("allowAddOption")&&this.updateChildOptions()}_updateTags(){if(this.multiple){const e=Array.from(this.querySelectorAll("kyn-dropdown-option")),t=[];e&&(e.forEach((e=>{e.selected&&t.push({value:e.value,text:e.textContent,disabled:e.disabled})})),this._tags=t)}}_updateOptions(){Array.from(this.querySelectorAll("kyn-dropdown-option")).forEach((e=>{if(e.multiple=this.multiple,this.multiple){const t=this.value.includes(e.value);e.selected=t}else e.selected=this.value===e.value}))}_handleInputNewOption(e){const t=e.target;this.newOptionValue=t.value}_handleRemoveOption(){this.assistiveText="MY option removed ",setTimeout((()=>{this.open=!1,this.buttonEl.focus()}),100)}_updateSelectedText(){const e=Array.from(this.querySelectorAll("kyn-dropdown-option"));if(!this.multiple){if(e.length&&""!==this.value){const t=e.find((e=>e.value===this.value));t?this.text=t.textContent.trim():(this.text="",console.warn(`No dropdown option found with value: ${this.value}`))}this.searchable&&this.text&&(this.searchText=this.text===this.placeholder?"":this.text,this.searchEl.value=this.searchText)}}};w.styles=g,e([o({type:String})],w.prototype,"label",void 0),e([o({type:String})],w.prototype,"size",void 0),e([o({type:Boolean})],w.prototype,"inline",void 0),e([o({type:String})],w.prototype,"caption",void 0),e([o({type:String})],w.prototype,"placeholder",void 0),e([o({type:Boolean})],w.prototype,"open",void 0),e([o({type:Boolean})],w.prototype,"searchable",void 0),e([o({type:Boolean})],w.prototype,"filterSearch",void 0),e([o({type:Boolean})],w.prototype,"multiple",void 0),e([o({type:Boolean})],w.prototype,"required",void 0),e([o({type:Boolean})],w.prototype,"hideLabel",void 0),e([o({type:Boolean})],w.prototype,"disabled",void 0),e([o({type:Boolean})],w.prototype,"hideTags",void 0),e([o({type:Boolean})],w.prototype,"selectAll",void 0),e([o({type:String})],w.prototype,"selectAllText",void 0),e([o({type:String})],w.prototype,"menuMinWidth",void 0),e([o({type:String})],w.prototype,"openDirection",void 0),e([o({type:Boolean})],w.prototype,"selectAllChecked",void 0),e([o({type:Boolean})],w.prototype,"selectAllIndeterminate",void 0),e([o({type:Object})],w.prototype,"textStrings",void 0),e([o({type:Boolean})],w.prototype,"allowAddOption",void 0),e([l()],w.prototype,"_textStrings",void 0),e([l()],w.prototype,"newOptionValue",void 0),e([l()],w.prototype,"text",void 0),e([o({type:String})],w.prototype,"searchText",void 0),e([l()],w.prototype,"assistiveText",void 0),e([s({selector:"kyn-dropdown-option"})],w.prototype,"options",void 0),e([s({selector:"kyn-dropdown-option[selected]"})],w.prototype,"selectedOptions",void 0),e([a(".search")],w.prototype,"searchEl",void 0),e([a(".select")],w.prototype,"buttonEl",void 0),e([a(".options")],w.prototype,"listboxEl",void 0),e([a(".clear-multiple")],w.prototype,"clearMultipleEl",void 0),e([a(".add-option-input")],w.prototype,"addOptionInputEl",void 0),e([l()],w.prototype,"_openUpwards",void 0),e([l()],w.prototype,"_tags",void 0),w=e([r("kyn-dropdown")],w);export{w as Dropdown};
 //# sourceMappingURL=dropdown.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n title: 'Dropdown',\n selectedOptions: 'List of selected options',\n requiredText: 'Required',\n errorText: 'Error',\n clearAll: 'Clear all',\n clear: 'Clear',\n addItem: 'Add item...',\n add: 'Add',\n};\n\nconst KEY = {\n Enter: 'Enter',\n Escape: 'Escape',\n ArrowDown: 'ArrowDown',\n ArrowUp: 'ArrowUp',\n} as const;\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 * @fires on-add-option - Captures the add button click and emits the newly added option.\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 tooltip - Slot for tooltip.\n /\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n static override styles = DropdownScss;\n\n /* Label text. /\n @property({ type: String })\n label = '';\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 /* 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 /* Visually hide the label. /\n @property({ type: Boolean })\n hideLabel = false;\n\n /* Dropdown disabled state. /\n @property({ type: Boolean })\n disabled = false;\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 /* Controls direction that dropdown opens. /\n @property({ type: String })\n openDirection: 'auto' \| 'up' \| 'down' = 'auto';\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 /* Text string customization. /\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /* Enables the \"Add New Option\" feature. /\n @property({ type: Boolean })\n allowAddOption = false;\n\n /* Internal text strings.\n * @internal\n /\n @state()\n _textStrings = _defaultTextStrings;\n\n /\n New dropdown option value.\n * @ignore\n /\n @state()\n newOptionValue = '';\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 Queries the .clear-multiple DOM element.\n * @ignore\n /\n @query('.clear-multiple')\n clearMultipleEl!: HTMLElement;\n\n /\n Queries the .add-option-input DOM element.\n * @ignore\n /\n @query('.add-option-input')\n addOptionInputEl!: HTMLInputElement;\n\n /\n Open drawer upwards.\n * @ignore\n /\n @state()\n _openUpwards = false;\n\n /\n Tags value/text reference.\n * @ignore\n /\n @state()\n _tags: Array<object> = [];\n\n /* Toggles on clicking enter key in the search input.\n * @internal\n /\n searchTextEntered: any = false;\n\n /* Toggles on clicking enter key in the search input.\n * @internal\n /\n prevSearchKeydownIndex = -1;\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 id=\"label-${this.name}\"\n class=\"label-text ${this.hideLabel \|\| this.inline ? 'sr-only' : ''}\"\n for=${this.name}\n aria-disabled=${this.disabled}\n @click=${() => this._handleLabelClick()}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText \|\| 'Required'}\n ></abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></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 'input-custom': 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 title=${this._textStrings.title}\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=\"${this.value\n .length} items selected. Clear selections\"\n ?disabled=${this.disabled}\n title=${this._textStrings.clear}\n @click=${(e: Event) => this.handleClearMultiple(e)}\n >\n ${this.value.length}\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\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 aria-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 aria-disabled=${this.disabled}>\n ${this.multiple\n ? this.placeholder\n : this.value === ''\n ? this.placeholder\n : this.text}\n </span>\n `}\n\n <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n </div>\n\n <div\n id=\"options\"\n class=${classMap({\n options: true,\n open: this.open,\n upwards: this._openUpwards,\n })}\n aria-hidden=${!this.open}\n @keydown=${this.handleListKeydown}\n @blur=${this.handleListBlur}\n >\n ${this.allowAddOption\n ? html`\n <div class=\"add-option\">\n <input\n class=\"add-option-input\"\n type=\"text\"\n placeholder=${this._textStrings.addItem}\n .value=${this.newOptionValue}\n aria-label=\"Add new option\"\n @input=${this._handleInputNewOption}\n @keydown=${this._onAddOptionInputKeydown}\n @focus=${this._onAddOptionInputFocus}\n />\n <kyn-button\n type=\"button\"\n size=\"small\"\n kind=\"secondary\"\n @on-click=${this._handleAddOption}\n >\n ${this._textStrings.add}\n </kyn-button>\n </div>\n `\n : null}\n\n <div role=\"listbox\" aria-labelledby=\"label-${this.name}\">\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 </div>\n </div>\n </div>\n ${this.searchText !== ''\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"clear-button dropdown-clear\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${(e: Event) => this.handleClear(e)}\n >\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : null}\n </div>\n ${this.renderHelperContent()}\n </div>\n `;\n }\n\n private _onAddOptionInputKeydown(e: KeyboardEvent) {\n e.stopPropagation();\n switch (e.key) {\n case KEY.Enter:\n this._handleAddOption();\n break;\n case KEY.Escape:\n this.newOptionValue = '';\n this.open = false;\n this.buttonEl.focus();\n break;\n case KEY.ArrowDown:\n this.handleKeyboard(e, 40, 'addOption');\n break;\n case KEY.ArrowUp:\n this.handleKeyboard(e, 38, 'addOption');\n break;\n }\n }\n\n private _onAddOptionInputFocus() {\n this.assistiveText = 'Add new option input';\n }\n\n private _handleAddOption() {\n const v = this.newOptionValue.trim();\n if (!v) return;\n this.dispatchEvent(\n new CustomEvent('on-add-option', { detail: { value: v } })\n );\n this.newOptionValue = '';\n }\n\n private renderHelperContent() {\n return html`\n ${\n this.multiple && !this.hideTags && this._tags.length\n ? html`\n <kyn-tag-group\n filter\n role=\"list\"\n aria-label=${this._textStrings.selectedOptions}\n >\n ${this._tags.map((tag: any) => {\n return html`\n <kyn-tag\n role=\"listitem\"\n label=${tag.text}\n ?disabled=${this.disabled \|\| tag.disabled}\n @on-close=${() => this.handleTagClear(tag)}\n ></kyn-tag>\n `;\n })}\n </kyn-tag-group>\n `\n : null\n }\n ${\n this.caption !== ''\n ? html`\n <div class=\"caption\" aria-disabled=${this.disabled}>\n ${this.caption}\n </div>\n `\n : null\n }\n ${\n this._isInvalid\n ? html`\n <div class=\"error\">\n <span\n class=\"error-icon\"\n role=\"img\"\n title=${this._textStrings.errorText}\n aria-label=${this._textStrings.errorText}\n >${unsafeSVG(errorIcon)}</span\n >\n ${this.invalidText \|\| this._internalValidationMsg}\n </div>\n `\n : null\n }\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.updateChildOptions();\n this._updateOptions();\n this._updateSelectedText();\n }\n\n private updateChildOptions() {\n // Get all slotted kyn-dropdown-option elements\n const slot = this.shadowRoot?.querySelector('#children') as HTMLSlotElement;\n const options = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n // Pass allowAddOption to each kyn-dropdown-option\n options.forEach((option) => {\n if (option.tagName === 'KYN-DROPDOWN-OPTION') {\n (option as any).allowAddOption = this.allowAddOption;\n }\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 } else {\n this.buttonEl.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: FocusEvent): void {\n this.options.forEach((o) => (o.highlighted = false));\n const target = e.relatedTarget as HTMLElement \| null;\n\n if (\n target &&\n (target.closest('kyn-dropdown-option') \|\|\n target.classList.contains('search') \|\|\n target.closest('.add-option'))\n ) {\n return;\n }\n\n this.open = false;\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 = [\n ...Array.from(this.shadowRoot?.querySelectorAll('.select-all') \|\| []),\n ...this.options.filter((option: any) => option.style.display !== 'none'),\n ];\n // visibleOptions.forEach((e) => (e.tabIndex = 0));\n\n const highlightedEl = visibleOptions.find(\n (option: any) => option.highlighted\n );\n const selectedEl = visibleOptions.find((option: any) => option.selected);\n let 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 const isListboxElOpened = this.open;\n // open the listbox\n if (target === 'button' \|\| target === 'addOption') {\n let 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 (e.target === this.clearMultipleEl && keyCode === ENTER_KEY_CODE) {\n openDropdown = false;\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n highlightedIndex = 0;\n if (keyCode !== ENTER_KEY_CODE) return;\n }\n\n if (openDropdown) {\n this.open = true;\n\n if (\n this.allowAddOption &&\n target === 'button' &&\n keyCode === ENTER_KEY_CODE\n ) {\n setTimeout(() => {\n this.addOptionInputEl?.focus();\n }, 100);\n } else {\n // scroll to highlighted option\n if (!this.multiple && this.value !== '') {\n visibleOptions[highlightedIndex].scrollIntoView({\n block: 'nearest',\n });\n }\n }\n }\n }\n switch (keyCode) {\n case 0:\n case 32:\n case ENTER_KEY_CODE: {\n // select highlighted option\n visibleOptions[highlightedIndex].highlighted = true;\n if (isListboxElOpened) {\n if (this.multiple) {\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n this._handleClick({\n detail: {\n value: visibleOptions[highlightedIndex].value,\n selected: visibleOptions[highlightedIndex].selected,\n },\n });\n } else {\n visibleOptions.forEach((e) => (e.selected = false));\n visibleOptions[highlightedIndex].selected = true;\n this.open = false;\n this.assistiveText = `Selected ${visibleOptions[highlightedIndex].value}`;\n }\n }\n return;\n }\n case DOWN_ARROW_KEY_CODE: {\n // go to next option\n let nextIndex =\n !highlightedEl && !selectedEl\n ? 0\n : highlightedIndex === 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[nextIndex].focus();\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[nextIndex].focus();\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 const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\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(tag: any) {\n // remove value\n this.updateValue(tag.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._validate(true, false);\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?.localName !== 'kyn-dropdown-option' &&\n !e.relatedTarget?.classList.contains('options') &&\n !e.relatedTarget?.classList.contains('search') &&\n !e.relatedTarget?.closest('.add-option')\n ) {\n this.open = false;\n }\n this._validate(true, false);\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 !e.relatedTarget?.closest('.add-option'))\n ) {\n this.open = false;\n }\n this._validate(true, false);\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 const highlightedIndex = this.options.findIndex(\n (option) => option.highlighted\n );\n this.searchTextEntered = false;\n // select option\n if (e.keyCode === ENTER_KEY_CODE) {\n this.searchTextEntered = true;\n if (option) {\n if (this.prevSearchKeydownIndex !== highlightedIndex) {\n if (this.multiple) {\n option.selected = !option.selected;\n } else {\n this.options.forEach((e) => (e.selected = false));\n option.selected = true;\n this.open = false;\n }\n this.updateValue(option.value, option.selected);\n }\n\n if (option.selected) {\n this.assistiveText = `Selected ${option.innerHTML}`;\n this.prevSearchKeydownIndex = highlightedIndex;\n } else {\n this.assistiveText = `Deselected ${option.innerHTML}`;\n }\n } else {\n this.assistiveText = 'No item matched.';\n }\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 if (this.searchTextEntered) this.assistiveText = 'Option Matched';\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 this.selectAllChecked = e.detail.selected;\n\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n if (e.detail.selected) {\n this.value = this.options\n .filter(\n (option) => !option.disabled \|\| (option.disabled && option.selected)\n )\n .map((option) => {\n return option.value;\n });\n this.assistiveText = 'Selected all items.';\n } else {\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\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 = e.detail.selected\n ? `Selected ${e.detail.value}`\n : `Deselected ${e.detail.value}`;\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 _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // preserve FormMixin connectedCallback function\n this._onConnected();\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 this.addEventListener('on-remove-option', () => this._handleRemoveOption());\n\n // capture child options blur event\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n }\n\n override disconnectedCallback() {\n // preserve FormMixin disconnectedCallback function\n this._onDisconnected();\n\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n this.removeEventListener('on-remove-option', () =>\n this._handleRemoveOption()\n );\n this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n super.disconnectedCallback();\n }\n\n private updateValue(value: string, selected = false) {\n // set value\n if (this.multiple) {\n const values =\n this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\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 willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n }\n }\n\n override updated(changedProps: any) {\n // preserve FormMixin updated function\n this._onUpdated(changedProps);\n\n if (changedProps.has('value')) {\n this._updateOptions();\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 this._updateTags();\n this._updateSelectedText();\n }\n\n if (changedProps.has('open') \|\| changedProps.has('openDirection')) {\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.openDirection === 'up') {\n this._openUpwards = true;\n } else if (this.openDirection === 'down') {\n this._openUpwards = false;\n } else if (this.open) {\n const openThreshold = 0.6;\n this._openUpwards =\n this.buttonEl.getBoundingClientRect().top >\n window.innerHeight * openThreshold;\n }\n\n if (this.open && !this.multiple) {\n this.options\n .find((option) => option.selected)\n ?.scrollIntoView({ block: 'nearest' });\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 if (changedProps.has('allowAddOption')) {\n this.updateChildOptions();\n }\n }\n\n // add selected options to Tags array\n private _updateTags() {\n if (this.multiple) {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n const Tags: Array<object> = [];\n\n if (Options) {\n Options.forEach((option: any) => {\n if (option.selected) {\n Tags.push({\n value: option.value,\n text: option.textContent,\n disabled: option.disabled,\n });\n }\n });\n\n this._tags = Tags;\n }\n }\n }\n\n private _updateOptions() {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n\n Options.forEach((option: any) => {\n // set option multiple state\n option.multiple = this.multiple;\n\n if (this.multiple) {\n const Selected = this.value.includes(option.value);\n // set option selected state\n option.selected = Selected;\n } else {\n option.selected = this.value === option.value;\n }\n });\n }\n\n private _handleInputNewOption(e: Event) {\n const target = e.target as HTMLInputElement;\n this.newOptionValue = target.value;\n }\n\n private _handleRemoveOption() {\n this.assistiveText = 'MY option removed ';\n setTimeout(() => {\n this.open = false;\n this.buttonEl.focus();\n }, 100);\n }\n\n private _updateSelectedText() {\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 if (option) {\n this.text = option.textContent.trim();\n } else {\n this.text = '';\n console.warn(`No dropdown option found with value: ${this.value}`);\n }\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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown': Dropdown;\n }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","clear","addItem","add","KEY","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","openDirection","selectAllChecked","selectAllIndeterminate","textStrings","allowAddOption","_textStrings","newOptionValue","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","_handleInputNewOption","_onAddOptionInputKeydown","_onAddOptionInputFocus","_handleAddOption","handleSlotChange","handleClear","renderHelperContent","stopPropagation","key","buttonEl","focus","handleKeyboard","v","trim","dispatchEvent","CustomEvent","detail","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","updateChildOptions","_updateOptions","_updateSelectedText","shadowRoot","querySelector","assignedElements","flatten","forEach","option","tagName","searchEl","keyCode","o","highlighted","target","relatedTarget","closest","classList","contains","SPACEBAR_KEY_CODE","visibleOptions","Array","from","querySelectorAll","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","setTimeout","addOptionInputEl","scrollIntoView","block","_handleClick","nextIndex","DisabledSelectedOptions","_validate","_updateSelectedOptions","emitValue","event","updateValue","_emitSearch","localName","_b","_c","_d","findIndex","innerHTML","toLowerCase","startsWith","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","_handleRemoveOption","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","SelectedOptions","_updateTags","listboxEl","preventScroll","openThreshold","getBoundingClientRect","top","window","innerHeight","Tags","textContent","Selected","AllOptions","console","warn","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n title: 'Dropdown',\n selectedOptions: 'List of selected options',\n requiredText: 'Required',\n errorText: 'Error',\n clearAll: 'Clear all',\n clear: 'Clear',\n addItem: 'Add item...',\n add: 'Add',\n};\n\nconst KEY = {\n Enter: 'Enter',\n Escape: 'Escape',\n ArrowDown: 'ArrowDown',\n ArrowUp: 'ArrowUp',\n} as const;\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 * @fires on-add-option - Captures the add button click and emits the newly added option.\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 tooltip - Slot for tooltip.\n /\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n static override styles = DropdownScss;\n\n /* Label text. /\n @property({ type: String })\n label = '';\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 /* 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 /* Visually hide the label. /\n @property({ type: Boolean })\n hideLabel = false;\n\n /* Dropdown disabled state. /\n @property({ type: Boolean })\n disabled = false;\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 /* Controls direction that dropdown opens. /\n @property({ type: String })\n openDirection: 'auto' \| 'up' \| 'down' = 'auto';\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 /* Text string customization. /\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /* Enables the \"Add New Option\" feature. /\n @property({ type: Boolean })\n allowAddOption = false;\n\n /* Internal text strings.\n * @internal\n /\n @state()\n _textStrings = _defaultTextStrings;\n\n /\n New dropdown option value.\n * @ignore\n /\n @state()\n newOptionValue = '';\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 Queries the .clear-multiple DOM element.\n * @ignore\n /\n @query('.clear-multiple')\n clearMultipleEl!: HTMLElement;\n\n /\n Queries the .add-option-input DOM element.\n * @ignore\n /\n @query('.add-option-input')\n addOptionInputEl!: HTMLInputElement;\n\n /\n Open drawer upwards.\n * @ignore\n /\n @state()\n _openUpwards = false;\n\n /\n Tags value/text reference.\n * @ignore\n /\n @state()\n _tags: Array<object> = [];\n\n /* Toggles on clicking enter key in the search input.\n * @internal\n /\n searchTextEntered: any = false;\n\n /* Toggles on clicking enter key in the search input.\n * @internal\n /\n prevSearchKeydownIndex = -1;\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 id=\"label-${this.name}\"\n class=\"label-text ${this.hideLabel \|\| this.inline ? 'sr-only' : ''}\"\n for=${this.name}\n aria-disabled=${this.disabled}\n @click=${() => this._handleLabelClick()}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText \|\| 'Required'}\n ></abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></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 'input-custom': 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 title=${this._textStrings.title}\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) => e.stopPropagation()}\n >\n ${this.multiple && this.value.length\n ? html`\n <button\n class=\"clear-multiple\"\n aria-label=\"${this.value\n .length} items selected. Clear selections\"\n ?disabled=${this.disabled}\n title=${this._textStrings.clear}\n @click=${(e: Event) => this.handleClearMultiple(e)}\n >\n ${this.value.length}\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\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 aria-disabled=${this.disabled}\n @keydown=${(e: any) => this.handleSearchKeydown(e)}\n @input=${(e: any) => this.handleSearchInput(e)}\n @blur=${(e: any) => e.stopPropagation()}\n @click=${(e: any) => this.handleSearchClick(e)}\n />\n `\n : html`\n <span aria-disabled=${this.disabled}>\n ${this.multiple\n ? this.placeholder\n : this.value === ''\n ? this.placeholder\n : this.text}\n </span>\n `}\n\n <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n </div>\n\n <div\n id=\"options\"\n class=${classMap({\n options: true,\n open: this.open,\n upwards: this._openUpwards,\n })}\n aria-hidden=${!this.open}\n @keydown=${this.handleListKeydown}\n @blur=${this.handleListBlur}\n >\n ${this.allowAddOption\n ? html`\n <div class=\"add-option\">\n <input\n class=\"add-option-input\"\n type=\"text\"\n placeholder=${this._textStrings.addItem}\n .value=${this.newOptionValue}\n aria-label=\"Add new option\"\n @input=${this._handleInputNewOption}\n @keydown=${this._onAddOptionInputKeydown}\n @focus=${this._onAddOptionInputFocus}\n />\n <kyn-button\n type=\"button\"\n size=\"small\"\n kind=\"secondary\"\n @on-click=${this._handleAddOption}\n >\n ${this._textStrings.add}\n </kyn-button>\n </div>\n `\n : null}\n\n <div role=\"listbox\" aria-labelledby=\"label-${this.name}\">\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 </div>\n </div>\n </div>\n ${this.searchText !== ''\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"clear-button dropdown-clear\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${(e: Event) => this.handleClear(e)}\n >\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : null}\n </div>\n ${this.renderHelperContent()}\n </div>\n `;\n }\n\n private _onAddOptionInputKeydown(e: KeyboardEvent) {\n e.stopPropagation();\n switch (e.key) {\n case KEY.Enter:\n this._handleAddOption();\n break;\n case KEY.Escape:\n this.newOptionValue = '';\n this.open = false;\n this.buttonEl.focus();\n break;\n case KEY.ArrowDown:\n this.handleKeyboard(e, 40, 'addOption');\n break;\n case KEY.ArrowUp:\n this.handleKeyboard(e, 38, 'addOption');\n break;\n }\n }\n\n private _onAddOptionInputFocus() {\n this.assistiveText = 'Add new option input';\n }\n\n private _handleAddOption() {\n const v = this.newOptionValue.trim();\n if (!v) return;\n this.dispatchEvent(\n new CustomEvent('on-add-option', { detail: { value: v } })\n );\n this.newOptionValue = '';\n }\n\n private renderHelperContent() {\n return html`\n ${\n this.multiple && !this.hideTags && this._tags.length\n ? html`\n <kyn-tag-group\n filter\n role=\"list\"\n aria-label=${this._textStrings.selectedOptions}\n >\n ${this._tags.map((tag: any) => {\n return html`\n <kyn-tag\n role=\"listitem\"\n label=${tag.text}\n ?disabled=${this.disabled \|\| tag.disabled}\n @on-close=${() => this.handleTagClear(tag)}\n ></kyn-tag>\n `;\n })}\n </kyn-tag-group>\n `\n : null\n }\n ${\n this.caption !== ''\n ? html`\n <div class=\"caption\" aria-disabled=${this.disabled}>\n ${this.caption}\n </div>\n `\n : null\n }\n ${\n this._isInvalid\n ? html`\n <div class=\"error\">\n <span\n class=\"error-icon\"\n role=\"img\"\n title=${this._textStrings.errorText}\n aria-label=${this._textStrings.errorText}\n >${unsafeSVG(errorIcon)}</span\n >\n ${this.invalidText \|\| this._internalValidationMsg}\n </div>\n `\n : null\n }\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.updateChildOptions();\n this._updateOptions();\n this._updateSelectedText();\n }\n\n private updateChildOptions() {\n // Get all slotted kyn-dropdown-option elements\n const slot = this.shadowRoot?.querySelector('#children') as HTMLSlotElement;\n const options = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n // Pass allowAddOption to each kyn-dropdown-option\n options.forEach((option) => {\n if (option.tagName === 'KYN-DROPDOWN-OPTION') {\n (option as any).allowAddOption = this.allowAddOption;\n }\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 } else {\n this.buttonEl.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: FocusEvent): void {\n this.options.forEach((o) => (o.highlighted = false));\n const target = e.relatedTarget as HTMLElement \| null;\n\n if (\n target &&\n (target.closest('kyn-dropdown-option') \|\|\n target.classList.contains('search') \|\|\n target.closest('.add-option'))\n ) {\n return;\n }\n\n this.open = false;\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 = [\n ...Array.from(this.shadowRoot?.querySelectorAll('.select-all') \|\| []),\n ...this.options.filter((option: any) => option.style.display !== 'none'),\n ];\n // visibleOptions.forEach((e) => (e.tabIndex = 0));\n\n const highlightedEl = visibleOptions.find(\n (option: any) => option.highlighted\n );\n const selectedEl = visibleOptions.find((option: any) => option.selected);\n let 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 const isListboxElOpened = this.open;\n // open the listbox\n if (target === 'button' \|\| target === 'addOption') {\n let 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 (e.target === this.clearMultipleEl && keyCode === ENTER_KEY_CODE) {\n openDropdown = false;\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n highlightedIndex = 0;\n if (keyCode !== ENTER_KEY_CODE) return;\n }\n\n if (openDropdown) {\n this.open = true;\n\n if (\n this.allowAddOption &&\n target === 'button' &&\n keyCode === ENTER_KEY_CODE\n ) {\n setTimeout(() => {\n this.addOptionInputEl?.focus();\n }, 100);\n } else {\n // scroll to highlighted option\n if (!this.multiple && this.value !== '') {\n visibleOptions[highlightedIndex].scrollIntoView({\n block: 'nearest',\n });\n }\n }\n }\n }\n switch (keyCode) {\n case 0:\n case 32:\n case ENTER_KEY_CODE: {\n // select highlighted option\n visibleOptions[highlightedIndex].highlighted = true;\n if (isListboxElOpened) {\n if (this.multiple) {\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n this._handleClick({\n detail: {\n value: visibleOptions[highlightedIndex].value,\n selected: visibleOptions[highlightedIndex].selected,\n },\n });\n } else {\n visibleOptions.forEach((e) => (e.selected = false));\n visibleOptions[highlightedIndex].selected = true;\n this.open = false;\n this.assistiveText = `Selected ${visibleOptions[highlightedIndex].value}`;\n }\n }\n return;\n }\n case DOWN_ARROW_KEY_CODE: {\n // go to next option\n let nextIndex =\n !highlightedEl && !selectedEl\n ? 0\n : highlightedIndex === 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[nextIndex].focus();\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[nextIndex].focus();\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 const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\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(tag: any) {\n // remove value\n this.updateValue(tag.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._validate(true, false);\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 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 const highlightedIndex = this.options.findIndex(\n (option) => option.highlighted\n );\n this.searchTextEntered = false;\n // select option\n if (e.keyCode === ENTER_KEY_CODE) {\n this.searchTextEntered = true;\n if (option) {\n if (this.prevSearchKeydownIndex !== highlightedIndex) {\n if (this.multiple) {\n option.selected = !option.selected;\n } else {\n this.options.forEach((e) => (e.selected = false));\n option.selected = true;\n this.open = false;\n }\n this.updateValue(option.value, option.selected);\n }\n\n if (option.selected) {\n this.assistiveText = `Selected ${option.innerHTML}`;\n this.prevSearchKeydownIndex = highlightedIndex;\n } else {\n this.assistiveText = `Deselected ${option.innerHTML}`;\n }\n } else {\n this.assistiveText = 'No item matched.';\n }\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 if (this.searchTextEntered) this.assistiveText = 'Option Matched';\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 this.selectAllChecked = e.detail.selected;\n\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n if (e.detail.selected) {\n this.value = this.options\n .filter(\n (option) => !option.disabled \|\| (option.disabled && option.selected)\n )\n .map((option) => {\n return option.value;\n });\n this.assistiveText = 'Selected all items.';\n } else {\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\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 = e.detail.selected\n ? `Selected ${e.detail.value}`\n : `Deselected ${e.detail.value}`;\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 _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // preserve FormMixin connectedCallback function\n this._onConnected();\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 this.addEventListener('on-remove-option', () => this._handleRemoveOption());\n\n // capture child options blur event\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n }\n\n override disconnectedCallback() {\n // preserve FormMixin disconnectedCallback function\n this._onDisconnected();\n\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n this.removeEventListener('on-remove-option', () =>\n this._handleRemoveOption()\n );\n this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n super.disconnectedCallback();\n }\n\n private updateValue(value: string, selected = false) {\n // set value\n if (this.multiple) {\n const values =\n this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\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 willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n }\n }\n\n override updated(changedProps: any) {\n // preserve FormMixin updated function\n this._onUpdated(changedProps);\n\n if (changedProps.has('value')) {\n this._updateOptions();\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 this._updateTags();\n this._updateSelectedText();\n }\n\n if (changedProps.has('open') \|\| changedProps.has('openDirection')) {\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.openDirection === 'up') {\n this._openUpwards = true;\n } else if (this.openDirection === 'down') {\n this._openUpwards = false;\n } else if (this.open) {\n const openThreshold = 0.6;\n this._openUpwards =\n this.buttonEl.getBoundingClientRect().top >\n window.innerHeight * openThreshold;\n }\n\n if (this.open && !this.multiple) {\n this.options\n .find((option) => option.selected)\n ?.scrollIntoView({ block: 'nearest' });\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 if (changedProps.has('allowAddOption')) {\n this.updateChildOptions();\n }\n }\n\n // add selected options to Tags array\n private _updateTags() {\n if (this.multiple) {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n const Tags: Array<object> = [];\n\n if (Options) {\n Options.forEach((option: any) => {\n if (option.selected) {\n Tags.push({\n value: option.value,\n text: option.textContent,\n disabled: option.disabled,\n });\n }\n });\n\n this._tags = Tags;\n }\n }\n }\n\n private _updateOptions() {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n\n Options.forEach((option: any) => {\n // set option multiple state\n option.multiple = this.multiple;\n\n if (this.multiple) {\n const Selected = this.value.includes(option.value);\n // set option selected state\n option.selected = Selected;\n } else {\n option.selected = this.value === option.value;\n }\n });\n }\n\n private _handleInputNewOption(e: Event) {\n const target = e.target as HTMLInputElement;\n this.newOptionValue = target.value;\n }\n\n private _handleRemoveOption() {\n this.assistiveText = 'MY option removed ';\n setTimeout(() => {\n this.open = false;\n this.buttonEl.focus();\n }, 100);\n }\n\n private _updateSelectedText() {\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 if (option) {\n this.text = option.textContent.trim();\n } else {\n this.text = '';\n console.warn(`No dropdown option found with value: ${this.value}`);\n }\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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown': Dropdown;\n }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","clear","addItem","add","KEY","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","openDirection","selectAllChecked","selectAllIndeterminate","textStrings","allowAddOption","_textStrings","newOptionValue","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","stopPropagation","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","_handleInputNewOption","_onAddOptionInputKeydown","_onAddOptionInputFocus","_handleAddOption","handleSlotChange","handleClear","renderHelperContent","key","buttonEl","focus","handleKeyboard","v","trim","dispatchEvent","CustomEvent","detail","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","updateChildOptions","_updateOptions","_updateSelectedText","shadowRoot","querySelector","assignedElements","flatten","forEach","option","tagName","searchEl","keyCode","o","highlighted","target","relatedTarget","closest","classList","contains","SPACEBAR_KEY_CODE","visibleOptions","Array","from","querySelectorAll","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","setTimeout","addOptionInputEl","scrollIntoView","block","_handleClick","nextIndex","DisabledSelectedOptions","_validate","_updateSelectedOptions","emitValue","event","updateValue","_emitSearch","findIndex","innerHTML","toLowerCase","startsWith","_handleBlur","origEvent","localName","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","_handleRemoveOption","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","SelectedOptions","_updateTags","listboxEl","preventScroll","openThreshold","getBoundingClientRect","top","window","innerHeight","_b","Tags","textContent","Selected","AllOptions","console","warn","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}

package/components/reusable/radioButton/radioButton.js CHANGED Viewed

@@ -124,10 +124,11 @@ input[disabled]:not(:checked) {
   background: var(--kd-color-background-forms-disabled);
 }
 input[disabled][checked] {
+  border-width: 2px;
   border-color: var(--kd-color-border-ui-disabled);
 }
 input[disabled][checked]::before {
-  background: var(--kd-color-background-ui-default-disabled);
+  background: var(--kd-color-border-ui-disabled);
 }`;let l=class extends a{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.required=!1,this.disabled=!1,this.invalid=!1}render(){return i`
       <label ?disabled=${this.disabled} ?invalid=${this.invalid}>
         <span><slot></slot></span>

package/components/reusable/radioButton/radioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radioButton.js","sources":["../../../../src/components/reusable/radioButton/radioButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport RadioButtonScss from './radioButton.scss';\n\n/*\n Radio button.\n * @fires on-radio-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n /\n@customElement('kyn-radio-button')\nexport class RadioButton extends LitElement {\n static override styles = RadioButtonScss;\n\n /* @ignore /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* Radio button value. /\n @property({ type: String })\n value = '';\n\n /\n Radio button name, inherited from the parent group.\n * @ignore\n /\n @property({ type: String })\n name = '';\n\n /\n Radio button checked state, inherited from the parent group if value matches.\n * @ignore\n /\n @property({ type: Boolean })\n checked = false;\n\n /\n Makes the input required, inherited from the parent group.\n * @ignore\n /\n @property({ type: Boolean })\n required = false;\n\n /\n Radio button disabled state, inherited from the parent group.\n /\n @property({ type: Boolean })\n disabled = false;\n\n /\n Radio button group invalid state, inherited from the parent group.\n * @ignore\n */\n @property({ type: Boolean })\n invalid = false;\n\n override render() {\n return html`\n <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n <span><slot></slot></span>\n <input\n type=\"radio\"\n name=${this.name}\n value=${this.value}\n .checked=${this.checked}\n ?checked=${this.checked}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.invalid}\n @change=${(e: any) => this.handleChange(e)}\n />\n </label>\n `;\n }\n\n private handleChange(e: Event) {\n const input = e.target as HTMLInputElement;\n\n this.checked = input.checked;\n\n const event = new CustomEvent('on-radio-change', {\n bubbles: true,\n composed: true,\n detail: {\n checked: input.checked,\n value: input.value,\n origEvent: e,\n },\n });\n\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-radio-button': RadioButton;\n }\n}\n"],"names":["RadioButton","LitElement","constructor","this","value","name","checked","required","disabled","invalid","render","html","e","handleChange","input","target","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","RadioButtonScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~GAUO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAWLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAOPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,CAsCX,CApCU,MAAAC,GACP,OAAOC,CAAI;yBACUR,KAAKK,qBAAqBL,KAAKM;;;;iBAIvCN,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLG,GAAWT,KAAKU,aAAaD;;;KAI/C,CAEO,YAAAC,CAAaD,GACnB,MAAME,EAAQF,EAAEG,OAEhBZ,KAAKG,QAAUQ,EAAMR,QAErB,MAAMU,EAAQ,IAAIC,YAAY,kBAAmB,CAC/CC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNd,QAASQ,EAAMR,QACfF,MAAOU,EAAMV,MACbiB,UAAWT,KAIfT,KAAKmB,cAAcN,EACpB,GAjFehB,EAAMuB,OAAGC,EAGTxB,EAAAyB,kBAAoB,IAC/BxB,EAAWwB,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP9B,EAAA+B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR9B,EAAA+B,UAAA,YAAA,GAOVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GA7CL/B,EAAW2B,EAAA,CADvBM,EAAc,qBACFjC"}
1	+ {"version":3,"file":"radioButton.js","sources":["../../../../src/components/reusable/radioButton/radioButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport RadioButtonScss from './radioButton.scss';\n\n/*\n Radio button.\n * @fires on-radio-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n /\n@customElement('kyn-radio-button')\nexport class RadioButton extends LitElement {\n static override styles = RadioButtonScss;\n\n /* @ignore /\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* Radio button value. /\n @property({ type: String })\n value = '';\n\n /\n Radio button name, inherited from the parent group.\n * @ignore\n /\n @property({ type: String })\n name = '';\n\n /\n Radio button checked state, inherited from the parent group if value matches.\n * @ignore\n /\n @property({ type: Boolean })\n checked = false;\n\n /\n Makes the input required, inherited from the parent group.\n * @ignore\n /\n @property({ type: Boolean })\n required = false;\n\n /\n Radio button disabled state, inherited from the parent group.\n /\n @property({ type: Boolean })\n disabled = false;\n\n /\n Radio button group invalid state, inherited from the parent group.\n * @ignore\n */\n @property({ type: Boolean })\n invalid = false;\n\n override render() {\n return html`\n <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n <span><slot></slot></span>\n <input\n type=\"radio\"\n name=${this.name}\n value=${this.value}\n .checked=${this.checked}\n ?checked=${this.checked}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.invalid}\n @change=${(e: any) => this.handleChange(e)}\n />\n </label>\n `;\n }\n\n private handleChange(e: Event) {\n const input = e.target as HTMLInputElement;\n\n this.checked = input.checked;\n\n const event = new CustomEvent('on-radio-change', {\n bubbles: true,\n composed: true,\n detail: {\n checked: input.checked,\n value: input.value,\n origEvent: e,\n },\n });\n\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-radio-button': RadioButton;\n }\n}\n"],"names":["RadioButton","LitElement","constructor","this","value","name","checked","required","disabled","invalid","render","html","e","handleChange","input","target","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","RadioButtonScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAWLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAOPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,CAsCX,CApCU,MAAAC,GACP,OAAOC,CAAI;yBACUR,KAAKK,qBAAqBL,KAAKM;;;;iBAIvCN,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLG,GAAWT,KAAKU,aAAaD;;;KAI/C,CAEO,YAAAC,CAAaD,GACnB,MAAME,EAAQF,EAAEG,OAEhBZ,KAAKG,QAAUQ,EAAMR,QAErB,MAAMU,EAAQ,IAAIC,YAAY,kBAAmB,CAC/CC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNd,QAASQ,EAAMR,QACfF,MAAOU,EAAMV,MACbiB,UAAWT,KAIfT,KAAKmB,cAAcN,EACpB,GAjFehB,EAAMuB,OAAGC,EAGTxB,EAAAyB,kBAAoB,IAC/BxB,EAAWwB,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP9B,EAAA+B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR9B,EAAA+B,UAAA,YAAA,GAOVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GA7CL/B,EAAW2B,EAAA,CADvBM,EAAc,qBACFjC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.42.2",
+  "version": "2.42.4",
   "description": "Shidoka Web Components for Applications",
   "license": "MIT",
   "main": "index.js",
@@ -28,7 +28,7 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.4.10",
+    "@kyndryl-design-system/shidoka-foundation": "^2.4.13",
     "@kyndryl-design-system/shidoka-icons": "^2.12.1",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",