npm - @kyndryl-design-system/shidoka-applications - Versions diffs - 1.1.13 → 1.1.15 - Mend

@kyndryl-design-system/shidoka-applications 1.1.13 → 1.1.15

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 (13) hide show

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

@@ -102,7 +102,7 @@ export declare class Dropdown extends LitElement {
      * Retrieves the selected values from the list of child options and sets value property.
      * @function
      */
-    private resetSelection;
+    resetSelection(): void;
     private handleClick;
     private handleButtonKeydown;
     private handleListKeydown;
@@ -124,6 +124,7 @@ export declare class Dropdown extends LitElement {
     private updateValue;
     private emitValue;
     updated(changedProps: any): void;
+    private _updateChildren;
 }
 declare global {
     interface HTMLElementTagNameMap {

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":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsKN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;~~IACH~~,~~OAAO,CAAC,~~cAAc;~~IAsBtB~~,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA8CnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;~~CAwFnC~~;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":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsKN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAwBrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA8CnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAyFlC,OAAO,CAAC,eAAe;CAWxB;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{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as a}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as h}from'./../../../external/lit-html/directives/class-map.js';import r from"./dropdown.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/chevron--down/24.js';import p from'./../../../external/@carbon/icons/es/warning--filled/24.js';import c from'./../../../external/@carbon/icons/es/close/24.js';import u from'./../../../external/@carbon/icons/es/close/16.js';let v=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.name="",this.open=!1,this.searchable=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.invalidText="",this.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as a}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as h}from'./../../../external/lit-html/directives/class-map.js';import d from"./dropdown.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/24.js';import p from'./../../../external/@carbon/icons/es/warning--filled/24.js';import c from'./../../../external/@carbon/icons/es/close/24.js';import u from'./../../../external/@carbon/icons/es/close/16.js';let v=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.name="",this.open=!1,this.searchable=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.invalidText="",this.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
       <div
         class="dropdown"
         ?disabled=${this.disabled}
@@ -54,7 +54,7 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
                     ${this.multiple||""===this.value?this.placeholder:this.text}
                   `}
-              <kd-icon class="arrow-icon" .icon=${d}></kd-icon>
+              <kd-icon class="arrow-icon" .icon=${r}></kd-icon>
             </div>
             <ul
@@ -112,5 +112,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
           ${this.assistiveText}
         </div>
       </div>
-    `}firstUpdated(){this.resetSelection(),""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){const t=[];let e="";this.options.forEach((i=>{i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],l=this.options.find((t=>t.highlighted)),o=this.options.find((t=>t.selected)),a=l?this.options.indexOf(l):this.options.find((t=>t.selected))?this.options.indexOf(o):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=l||o?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(t){this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item.",this.emitValue()}_handleBlur(t){const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}_handleFormdata(t){this.multiple?this.value.forEach((e=>{t.formData.append(this.name,e)})):t.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),this.internals.form&&this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t)))}disconnectedCallback(){this.addEventListener("on-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),this.internals.form&&this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),super.disconnectedCallback()}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="")),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const e=t.get("value");if((this.multiple?t.has("value")&&void 0!==e&&""!==e&&e!==this.value:t.has("value")&&void 0!==e&&e!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple)){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let e="";for(let i=0;i<t.length;i++)e+=t[i].textContent.trim();this.text=e}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}};v.styles=r,v.formAssociated=!0,t([o()],v.prototype,"internals",void 0),t([l({type:String})],v.prototype,"size",void 0),t([l({type:Boolean})],v.prototype,"inline",void 0),t([l({type:String})],v.prototype,"caption",void 0),t([l({type:String})],v.prototype,"placeholder",void 0),t([l({type:String})],v.prototype,"name",void 0),t([l({type:Boolean})],v.prototype,"open",void 0),t([l({type:Boolean})],v.prototype,"searchable",void 0),t([l({type:Boolean})],v.prototype,"multiple",void 0),t([l({type:Boolean})],v.prototype,"required",void 0),t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:String})],v.prototype,"invalidText",void 0),t([o()],v.prototype,"value",void 0),t([o()],v.prototype,"text",void 0),t([o()],v.prototype,"searchText",void 0),t([o()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([o()],v.prototype,"internalValidationMsg",void 0),t([o()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
+    `}firstUpdated(){this.resetSelection(),""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren();const t=[];let e="";this.options.forEach((i=>{i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],l=this.options.find((t=>t.highlighted)),o=this.options.find((t=>t.selected)),a=l?this.options.indexOf(l):this.options.find((t=>t.selected))?this.options.indexOf(o):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=l||o?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(t){this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item.",this.emitValue()}_handleBlur(t){const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}_handleFormdata(t){this.multiple?this.value.forEach((e=>{t.formData.append(this.name,e)})):t.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),this.internals.form&&this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t)))}disconnectedCallback(){this.addEventListener("on-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),this.internals.form&&this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),super.disconnectedCallback()}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="")),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const e=t.get("value");if((this.multiple?t.has("value")&&void 0!==e&&""!==e&&e!==this.value:t.has("value")&&void 0!==e&&e!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple)){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let e="";for(let i=0;i<t.length;i++)e+=t[i].textContent.trim();this.text=e}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}_updateChildren(){this.options.forEach((t=>{t.multiple=this.multiple}))}};v.styles=d,v.formAssociated=!0,t([o()],v.prototype,"internals",void 0),t([l({type:String})],v.prototype,"size",void 0),t([l({type:Boolean})],v.prototype,"inline",void 0),t([l({type:String})],v.prototype,"caption",void 0),t([l({type:String})],v.prototype,"placeholder",void 0),t([l({type:String})],v.prototype,"name",void 0),t([l({type:Boolean})],v.prototype,"open",void 0),t([l({type:Boolean})],v.prototype,"searchable",void 0),t([l({type:Boolean})],v.prototype,"multiple",void 0),t([l({type:Boolean})],v.prototype,"required",void 0),t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:String})],v.prototype,"invalidText",void 0),t([o()],v.prototype,"value",void 0),t([o()],v.prototype,"text",void 0),t([o()],v.prototype,"searchText",void 0),t([o()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([o()],v.prototype,"internalValidationMsg",void 0),t([o()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
 //# sourceMappingURL=dropdown.js.map

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

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

@@ -403,6 +403,9 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 .tags {
   margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
 }
 .tag {
@@ -418,7 +421,6 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   height: 24px;
   padding: 0 8px;
   border-radius: 16px;
-  margin-right: 4px;
   border: none;
   cursor: pointer;
 }

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

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

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

@@ -11,12 +11,16 @@ export declare class OverflowMenu extends LitElement {
     open: boolean;
     /** Anchors the menu to the right of the button. */
     anchorRight: boolean;
+    /** Use fixed instead of absolute position. Useful when placed within elements with overflow scroll. */
+    fixed: boolean;
     /** Button assistive text.. */
     assistiveText: string;
     /** Queries for slotted menu items.
      * @internal
      */
     menuItems: any;
+    _btnEl: any;
+    _menuEl: any;
     /**
      * A generated unique id
      * @ignore

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

	@@ -1 +1 @@
1	- {"version":3,"file":"overflowMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;~~AASvC~~,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAQ;IAE9B,uBAAuB;IAEvB,IAAI,UAAS;IAEb,mDAAmD;IAEnD,WAAW,UAAS;IAEpB,8BAA8B;IAE9B,aAAa,SAAiB;IAE9B;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;~~IAEhB~~;;;OAGG;IACM,OAAO,CAAC,GAAG,CAAuB;IAElC,MAAM;~~IAgCf~~,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;~~IAKlB~~,OAAO,CAAC,gBAAgB;IAMf,UAAU,CAAC,YAAY,EAAE,GAAG;IAQrC,OAAO,CAAC,cAAc;IAOb,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
1	+ {"version":3,"file":"overflowMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAQ;IAE9B,uBAAuB;IAEvB,IAAI,UAAS;IAEb,mDAAmD;IAEnD,WAAW,UAAS;IAEpB,uGAAuG;IAEvG,KAAK,UAAS;IAEd,8BAA8B;IAE9B,aAAa,SAAiB;IAE9B;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAGhB,MAAM,EAAG,GAAG,CAAC;IAGb,OAAO,EAAG,GAAG,CAAC;IAEd;;;OAGG;IACM,OAAO,CAAC,GAAG,CAAuB;IAElC,MAAM;IAiCf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,gBAAgB;IAMf,UAAU,CAAC,YAAY,EAAE,GAAG;IAQrC,OAAO,CAAC,cAAc;IAOb,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}

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

@@ -1,19 +1,19 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import a from"./overflowMenu.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import m from'./../../../external/@carbon/icons/es/overflow-menu--horizontal/16.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorRight=!1,this.assistiveText="Toggle Menu",this._id=crypto.randomUUID()}render(){const e={btn:!0,open:this.open},o={menu:!0,open:this.open,right:this.anchorRight};return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as m}from'./../../../external/lit-html/directives/class-map.js';import a from"./overflowMenu.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/overflow-menu--horizontal/16.js';let h=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorRight=!1,this.fixed=!1,this.assistiveText="Toggle Menu",this._id=crypto.randomUUID()}render(){const e={btn:!0,open:this.open},o={menu:!0,open:this.open,right:this.anchorRight,fixed:this.fixed};return t`
       <div class="overflow-menu">
         <button
-          class=${r(e)}
+          class=${m(e)}
           @click=${this.toggleMenu}
           aria-controls=${this._id}
           aria-expanded=${this.open}
           title=${this.assistiveText}
           aria-label=${this.assistiveText}
         >
-          <kd-icon .icon=${m}></kd-icon>
+          <kd-icon .icon=${d}></kd-icon>
         </button>
-        <div id=${this._id} class=${r(o)}>
+        <div id=${this._id} class=${m(o)}>
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
       </div>
-    `}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{detail:{open:this.open}});this.dispatchEvent(e)}toggleMenu(){this.open=!this.open,this._emitToggleEvent()}handleSlotChange(){this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}willUpdate(e){e.has("anchorRight")&&this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._emitToggleEvent())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),super.disconnectedCallback()}};c.styles=a,e([i({type:Boolean})],c.prototype,"open",void 0),e([i({type:Boolean})],c.prototype,"anchorRight",void 0),e([i({type:String})],c.prototype,"assistiveText",void 0),e([l({selector:"kyn-overflow-menu-item"})],c.prototype,"menuItems",void 0),e([n()],c.prototype,"_id",void 0),c=e([s("kyn-overflow-menu")],c);export{c as OverflowMenu};
+    `}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{detail:{open:this.open}});this.dispatchEvent(e)}toggleMenu(){if(this.open=!this.open,this._emitToggleEvent(),this.open)if(this.fixed){const e=this._btnEl.getBoundingClientRect().top+this._btnEl.getBoundingClientRect().height;e+48*this.menuItems.length>window.innerHeight?(this._menuEl.style.top="initial",this._menuEl.style.bottom="0px"):(this._menuEl.style.top=e+"px",this._menuEl.style.bottom="initial")}else this._menuEl.style.top="initial"}handleSlotChange(){this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}willUpdate(e){e.has("anchorRight")&&this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._emitToggleEvent())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),super.disconnectedCallback()}};h.styles=a,e([s({type:Boolean})],h.prototype,"open",void 0),e([s({type:Boolean})],h.prototype,"anchorRight",void 0),e([s({type:Boolean})],h.prototype,"fixed",void 0),e([s({type:String})],h.prototype,"assistiveText",void 0),e([r({selector:"kyn-overflow-menu-item"})],h.prototype,"menuItems",void 0),e([l(".btn")],h.prototype,"_btnEl",void 0),e([l(".menu")],h.prototype,"_menuEl",void 0),e([n()],h.prototype,"_id",void 0),h=e([i("kyn-overflow-menu")],h);export{h as OverflowMenu};
 //# sourceMappingURL=overflowMenu.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SCSS from './overflowMenu.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--horizontal/16';\n\n/*\n Overflow Menu.\n * @slot unnamed - Slot for overflow menu items.\n * @fires on-toggle - Capture the open/close event and emits the new state.\n /\n@customElement('kyn-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = SCSS;\n\n /* Menu open state. /\n @property({ type: Boolean })\n open = false;\n\n /* Anchors the menu to the right of the button. /\n @property({ type: Boolean })\n anchorRight = false;\n\n /* Button assistive text.. /\n @property({ type: String })\n assistiveText = 'Toggle Menu';\n\n /* Queries for slotted menu items.\n * @internal\n /\n @queryAssignedElements({ selector: 'kyn-overflow-menu-item' })\n menuItems!: any;\n\n /\n A generated unique id\n * @ignore\n */\n @state() private _id = crypto.randomUUID();\n\n override render() {\n const buttonClasses = {\n btn: true,\n open: this.open,\n };\n\n const menuClasses = {\n menu: true,\n open: this.open,\n right: this.anchorRight,\n };\n\n return html`\n <div class=\"overflow-menu\">\n <button\n class=${classMap(buttonClasses)}\n @click=${this.toggleMenu}\n aria-controls=${this._id}\n aria-expanded=${this.open}\n title=${this.assistiveText}\n aria-label=${this.assistiveText}\n >\n <kd-icon .icon=${overflowIcon}></kd-icon>\n </button>\n\n <div id=${this._id} class=${classMap(menuClasses)}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _emitToggleEvent() {\n const event = new CustomEvent('on-toggle', {\n detail: {\n open: this.open,\n },\n });\n this.dispatchEvent(event);\n }\n\n private toggleMenu() {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n\n private handleSlotChange() {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('anchorRight')) {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n this._emitToggleEvent();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-overflow-menu': OverflowMenu;\n }\n}\n"],"names":["OverflowMenu","LitElement","constructor","this","open","anchorRight","assistiveText","_id","crypto","randomUUID","render","buttonClasses","btn","menuClasses","menu","right","html","classMap","toggleMenu","overflowIcon","handleSlotChange","_emitToggleEvent","event","CustomEvent","detail","dispatchEvent","menuItems","forEach","item","willUpdate","changedProps","has","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","SCSS","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","selector","state","customElement"],"mappings":"~~07BAkBO~~,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAWE,aAAG,EAIdF,~~KAAaG~~,cAAG,~~cAYCH~~,~~KAAAI~~,IAAMC,OAAOC,~~YAgF~~/B,~~CA9EUC~~,SACP,MAAMC,EAAgB,CACpBC,KAAK,~~EACLR~~,KAAMD,KAAKC,~~MAGPS~~,EAAc,CAClBC,MAAM,~~EACNV~~,KAAMD,KAAKC,~~KACXW~~,~~MAAOZ~~,KAAKE,~~aAGd~~,OAAOW,CAAI;;;kBAGGC,EAASN;~~mBACRR~~,~~KAAKe~~;~~0BACEf~~,~~KAAKI~~;~~0BACLJ~~,KAAKC;kBACbD,~~KAAKG~~;~~uBACAH~~,~~KAAKG~~;;2BAEDa;;;~~kBAGThB~~,~~KAAKI~~,aAAaU,EAASJ;~~8BACfV~~,~~KAAKiB~~;;;KAIhC,CAEOC,mBACN,MAAMC,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,~~CACNpB~~,KAAMD,KAAKC,QAGfD,~~KAAKsB~~,cAAcH,EACpB,CAEOJ,~~aACNf~~,KAAKC,MAAQD,KAAKC,KAClBD,~~KAAKkB~~,~~kBACN~~,~~CAEOD~~,~~mBACNjB~~,~~KAAKuB~~,UAAUC,SAASC,IACtBA,~~EAAKvB~~,YAAcF,KAAKE,WAAW,GAEtC,~~CAEQwB~~,WAAWC,GACdA,EAAaC,IAAI,~~gBACnB5B~~,~~KAAKuB~~,~~UAAUC~~,SAASC,IACtBA,~~EAAKvB~~,YAAcF,KAAKE,WAAW,GAGxC,~~CAEO2B~~,eAAeC,GAChBA,EAAEC,eAAeC,~~SAAShC~~,QAC7BA,KAAKC,MAAO,EACZD,~~KAAKkB~~,mBAER,~~CAEQe~~,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUN,~~GAAM9B~~,~~KAAK6B~~,eAAeC,IAC/D,CAEQO,uBACPF,SAASG,oBAAoB,SAAUR,~~GAAM9B~~,~~KAAK6B~~,eAAeC,KAEjEI,MAAMG,sBACP,~~GAvGexC~~,~~EAAM0C~~,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~WACL/C~~,~~EAAAgD~~,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,~~WACE/C~~,~~EAAAgD~~,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,~~UACYjD~~,~~EAAAgD~~,UAAA,qBAAA,GAM9BJ,EAAA,CADCM,EAAsB,CAAEC,SAAU,~~4BACnBnD~~,~~EAAAgD~~,UAAA,iBAAA,~~GAMPJ~~,EAAA,~~CAARQ~~,~~KAA0CpD~~,~~EAAAgD~~,UAAA,WAAA,~~GAzBhChD~~,~~EAAY4C~~,EAAA,~~CADxBS~~,EAAc,~~sBACFrD~~"}
1	+ {"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n query,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SCSS from './overflowMenu.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--horizontal/16';\n\n/*\n Overflow Menu.\n * @slot unnamed - Slot for overflow menu items.\n * @fires on-toggle - Capture the open/close event and emits the new state.\n /\n@customElement('kyn-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = SCSS;\n\n /* Menu open state. /\n @property({ type: Boolean })\n open = false;\n\n /* Anchors the menu to the right of the button. /\n @property({ type: Boolean })\n anchorRight = false;\n\n /* Use fixed instead of absolute position. Useful when placed within elements with overflow scroll. /\n @property({ type: Boolean })\n fixed = false;\n\n /* Button assistive text.. /\n @property({ type: String })\n assistiveText = 'Toggle Menu';\n\n /* Queries for slotted menu items.\n * @internal\n /\n @queryAssignedElements({ selector: 'kyn-overflow-menu-item' })\n menuItems!: any;\n\n @query('.btn')\n _btnEl!: any;\n\n @query('.menu')\n _menuEl!: any;\n\n /\n A generated unique id\n * @ignore\n /\n @state() private _id = crypto.randomUUID();\n\n override render() {\n const buttonClasses = {\n btn: true,\n open: this.open,\n };\n\n const menuClasses = {\n menu: true,\n open: this.open,\n right: this.anchorRight,\n fixed: this.fixed,\n };\n\n return html`\n <div class=\"overflow-menu\">\n <button\n class=${classMap(buttonClasses)}\n @click=${this.toggleMenu}\n aria-controls=${this._id}\n aria-expanded=${this.open}\n title=${this.assistiveText}\n aria-label=${this.assistiveText}\n >\n <kd-icon .icon=${overflowIcon}></kd-icon>\n </button>\n\n <div id=${this._id} class=${classMap(menuClasses)}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _emitToggleEvent() {\n const event = new CustomEvent('on-toggle', {\n detail: {\n open: this.open,\n },\n });\n this.dispatchEvent(event);\n }\n\n private toggleMenu() {\n this.open = !this.open;\n this._emitToggleEvent();\n\n // set menu position on open\n if (this.open) {\n if (this.fixed) {\n const Top =\n this._btnEl.getBoundingClientRect().top +\n this._btnEl.getBoundingClientRect().height;\n const MenuHeight = this.menuItems.length 48;\n\n if (Top + MenuHeight > window.innerHeight) {\n this._menuEl.style.top = 'initial';\n this._menuEl.style.bottom = '0px';\n } else {\n this._menuEl.style.top = Top + 'px';\n this._menuEl.style.bottom = 'initial';\n }\n } else {\n this._menuEl.style.top = 'initial';\n }\n }\n }\n\n private handleSlotChange() {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('anchorRight')) {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n this._emitToggleEvent();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-overflow-menu': OverflowMenu;\n }\n}\n"],"names":["OverflowMenu","LitElement","constructor","this","open","anchorRight","fixed","assistiveText","_id","crypto","randomUUID","render","buttonClasses","btn","menuClasses","menu","right","html","classMap","toggleMenu","overflowIcon","handleSlotChange","_emitToggleEvent","event","CustomEvent","detail","dispatchEvent","Top","_btnEl","getBoundingClientRect","top","height","menuItems","length","window","innerHeight","_menuEl","style","bottom","forEach","item","willUpdate","changedProps","has","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","SCSS","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","selector","query","state","customElement"],"mappings":"khCAmBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAWE,aAAG,EAIdF,KAAKG,OAAG,EAIRH,KAAaI,cAAG,cAkBCJ,KAAAK,IAAMC,OAAOC,YAqG/B,CAnGUC,SACP,MAAMC,EAAgB,CACpBC,KAAK,EACLT,KAAMD,KAAKC,MAGPU,EAAc,CAClBC,MAAM,EACNX,KAAMD,KAAKC,KACXY,MAAOb,KAAKE,YACZC,MAAOH,KAAKG,OAGd,OAAOW,CAAI;;;kBAGGC,EAASN;mBACRT,KAAKgB;0BACEhB,KAAKK;0BACLL,KAAKC;kBACbD,KAAKI;uBACAJ,KAAKI;;2BAEDa;;;kBAGTjB,KAAKK,aAAaU,EAASJ;8BACfX,KAAKkB;;;KAIhC,CAEOC,mBACN,MAAMC,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNrB,KAAMD,KAAKC,QAGfD,KAAKuB,cAAcH,EACpB,CAEOJ,aAKN,GAJAhB,KAAKC,MAAQD,KAAKC,KAClBD,KAAKmB,mBAGDnB,KAAKC,KACP,GAAID,KAAKG,MAAO,CACd,MAAMqB,EACJxB,KAAKyB,OAAOC,wBAAwBC,IACpC3B,KAAKyB,OAAOC,wBAAwBE,OAGlCJ,EAFuC,GAAxBxB,KAAK6B,UAAUC,OAEXC,OAAOC,aAC5BhC,KAAKiC,QAAQC,MAAMP,IAAM,UACzB3B,KAAKiC,QAAQC,MAAMC,OAAS,QAE5BnC,KAAKiC,QAAQC,MAAMP,IAAMH,EAAM,KAC/BxB,KAAKiC,QAAQC,MAAMC,OAAS,UAE/B,MACCnC,KAAKiC,QAAQC,MAAMP,IAAM,SAG9B,CAEOT,mBACNlB,KAAK6B,UAAUO,SAASC,IACtBA,EAAKnC,YAAcF,KAAKE,WAAW,GAEtC,CAEQoC,WAAWC,GACdA,EAAaC,IAAI,gBACnBxC,KAAK6B,UAAUO,SAASC,IACtBA,EAAKnC,YAAcF,KAAKE,WAAW,GAGxC,CAEOuC,eAAeC,GAChBA,EAAEC,eAAeC,SAAS5C,QAC7BA,KAAKC,MAAO,EACZD,KAAKmB,mBAER,CAEQ0B,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUN,GAAM1C,KAAKyC,eAAeC,IAC/D,CAEQO,uBACPF,SAASG,oBAAoB,SAAUR,GAAM1C,KAAKyC,eAAeC,KAEjEI,MAAMG,sBACP,GAtIepD,EAAMsD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3D,EAAA4D,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3D,EAAA4D,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACJ3D,EAAA4D,UAAA,aAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACY7D,EAAA4D,UAAA,qBAAA,GAM9BJ,EAAA,CADCM,EAAsB,CAAEC,SAAU,4BACnB/D,EAAA4D,UAAA,iBAAA,GAGhBJ,EAAA,CADCQ,EAAM,SACMhE,EAAA4D,UAAA,cAAA,GAGbJ,EAAA,CADCQ,EAAM,UACOhE,EAAA4D,UAAA,eAAA,GAMLJ,EAAA,CAARS,KAA0CjE,EAAA4D,UAAA,WAAA,GAnChC5D,EAAYwD,EAAA,CADxBU,EAAc,sBACFlE"}

package/components/reusable/overflowMenu/overflowMenu.scss.js CHANGED Viewed

@@ -45,14 +45,23 @@ button:focus {
   transition: transform 150ms ease-out, opacity 150ms ease-out, visibility 150ms ease-out;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-20px);
+  transform: scale(0);
+  transform-origin: top left;
 }
 .menu.open {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
+  transform: scale(1);
+}
+.menu.fixed {
+  position: fixed;
 }
 .menu.right {
   right: 0;
+  transform-origin: top right;
+}
+.menu.right.fixed {
+  right: initial;
+  margin-left: -168px;
 }`;export{e as default};
 //# sourceMappingURL=overflowMenu.scss.js.map

package/components/reusable/overflowMenu/overflowMenu.scss.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

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