npm - @infineon/infineon-design-system-stencil - Versions diffs - 20.50.2 → 20.50.3 - Mend

@infineon/infineon-design-system-stencil 20.50.2 → 20.50.3

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

package/dist/cjs/ifx-multiselect.cjs.entry.js CHANGED Viewed

@@ -24,8 +24,8 @@ const Multiselect = class {
     this.ifxSelect = index.createEvent(this, "ifxSelect", 7);
     this.ifxMultiselectIsOpen = index.createEvent(this, "ifxMultiselectIsOpen", 7);
     this.currentIndex = 0; //needed for option selection using keyboard
-    this.handleSearch = debounce((event) => {
-      const searchTerm = event.target.value.toLowerCase();
+    this.handleSearch = debounce((targetElement) => {
+      const searchTerm = targetElement.value.toLowerCase();
       if (searchTerm === '') {
         this.filteredOptions = this.loadedOptions;
       }
@@ -360,7 +360,7 @@ const Multiselect = class {
         ${this.internalError ? 'error' : ""}
         ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: (event) => this.handleWrapperClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { class: `ifx-multiselect-input
           ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
-          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, index.h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && index.h("div", null, "Loading more options..."))), index.h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, index.h("ifx-icon", { icon: "cremove24" }))), index.h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), index.h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, index.h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event.target), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && index.h("div", null, "Loading more options..."))), index.h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, index.h("ifx-icon", { icon: "cremove24" }))), index.h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), index.h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
       index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage)) : null));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/ifx-multiselect.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-multiselect.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,qyIAAqyI;;ACG5zI;AACA,SAAS,QAAQ,CAAC,IAAI,EAAE,IAAI;EAC1B,IAAI,OAAO,CAAC;EACZ,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAI;IACtC,MAAM,KAAK,GAAG;MACZ,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;KACf,CAAC;IACF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;GACnC,CAAC;AACJ,CAAC;MAUY,WAAW;;;;;IAkBd,iBAAY,GAAW,CAAC,CAAC;IAuEjC,iBAAY,GAAG,QAAQ,CAAC,CAAC,KAAY;MACnC,MAAM,UAAU,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;MAC1E,IAAI,UAAU,KAAK,EAAE,EAAE;QACrB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC;OAC3C;WAAM;QACL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAA;OAC5G;KACF,EAAE,GAAG,CAAC,CAAC;IA0FR,wBAAmB,GAAG,CAAC,KAAY;MACjC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;MAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;QACxC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;;QAGhE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;OACnD;KACF,CAAA;;qBAhM2B,EAAE;gBACP,eAAe;oBACV,KAAK;iBACR,KAAK;yBACI,KAAK;wBACR,OAAO;iBACd,EAAE;qCACqB,EAAE;uBACnB,EAAE;yBACG,EAAE;wBACb,KAAK;;;kBAGH,CAAC;qBAGG,KAAK;yBACA,EAAE;2BACA,EAAE;;EAWvC,MAAM,kBAAkB;IACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;;IAEhC,IAAI,CAAC,aAAa,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAED,MAAM,gBAAgB;IACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACvF,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,WAAW,CAAC,CAAC;IAC7D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAGD,YAAY,CAAC,KAAc;IACzB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IAEnF,IAAI,OAAO,CAAC,SAAS,IAAI,YAAY,EAAE;MACrC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAKD,MAAM,YAAY,CAAC,UAAkB,EAAE,KAAa;IAClD,IAAI,UAAU,GAAa,EAAE,CAAC;;IAG9B,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MACpC,IAAI;QACF,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;OACvC;MAAC,OAAO,GAAG,EAAE;QACZ,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;OAChD;KACF;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACtC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;SAAM;MACL,OAAO,CAAC,KAAK,CAAC,+BAA+B,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAC9D;;IAGD,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;;IAGvE,IAAI,UAAU,KAAK,CAAC,EAAE;MACpB,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;MAC1E,IAAI,CAAC,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,yBAAyB,EAAE,GAAG,iBAAiB,CAAC,CAAC;KAC5F;IAED,OAAO,aAAa,CAAC;GACtB;EAYD,gBAAgB;IACd,UAAU,CAAC;MACT,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,EAAE,GAAG,CAAC,CAAC;;GAKT;EAGD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;GAChD;EAGD,mBAAmB;IACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAGD,oBAAoB;IAClB,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;GAChD;EAGD,iBAAiB,CAAC,MAAc;IAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAE3B,IAAI,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,EAAE;MACxC,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;MACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,YAAY,GAAG,4DAA4D,CAAC;MACjF,OAAO;KACR;IAED,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;GACrD;EAGD,uBAAuB,CAAC,MAAc;IACpC,IAAI,gBAAgB,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACpE,OAAO,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,yBAAyB,CAAC,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAAC,YAAY;MACtG,CAAC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAA;GAChG;EAED,eAAe,CAAC,MAAc;IAC5B,MAAM,WAAW,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;IAEjH,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;MACjD,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;KAClD;GACF;EAED,uBAAuB,CAAC,MAAc;IACpC,MAAM,mBAAmB,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IACrD,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAC5F,CAAC;IAEF,IAAI,mBAAmB,EAAE;MACvB,IAAI,CAAC,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CACxE,cAAc,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,cAAc,CAAC,KAAK,CAAC,CACvF,CAAC,CAAC;KACJ;SAAM;MACL,MAAM,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,IACxD,CAAC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC,CACnG,CAAC,CAAC;MACH,IAAI,CAAC,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,yBAAyB,EAAE,GAAG,WAAW,CAAC,CAAC;KACtF;GACF;EAED,sBAAsB,CAAC,MAAc,EAAE,WAAoB;IACzD,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACtI;SAAM;MACL,IAAI,CAAC,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;KAC9E;GACF;EAkBD,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,cAAc;QACd,eAAe,CAAC;GACrB;EAED,cAAc;IACZ,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACvC,UAAU,CAAC;MACT,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;OAC9D;;MAED,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACnD,EAAE,CAAC,CAAC,CAAC;IACN,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,YAAY,EAAE,CAAC;GAC1C;EAGD,cAAc,CAAC,iBAA2B,EAAE,QAAkB,EAAE,QAAQ,GAAG,EAAE;IAC3E,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,SAAS,OAAO;MACd,qBAAqB,CAAC;QACpB,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;QACrC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,QAAQ,EAAE;UAC3C,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;aAAM;UACL,KAAK,EAAE,CAAC;UACR,OAAO,EAAE,CAAC;SACX;OACF,CAAC,CAAC;KACJ;IACD,OAAO,EAAE,CAAC;GACX;EAGD,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAE1B,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAEjE,QAAQ,KAAK,CAAC,IAAI;MAChB,KAAK,OAAO,CAAW;QACrB,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,cAAc,EAAE,CAAC;;UAEtB,IAAI,CAAC,cAAc,CAAC;YAClB,OAAO,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;WACzD,EAAE,CAAC,OAAO;YACT,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;WACvC,CAAC,CAAC;SACJ;QACD,MAAM;MACR,KAAK,WAAW;QACd,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;SACvC;QACD,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;SACvC;QACD,MAAM;KACT;GACF;EAED,kBAAkB,CAAC,KAAiB;;IAElC,IAAI,CAAC,gBAAgB,EAAE,CAAC;;IAGxB,IAAI,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,MAAM,EAAE;MACxC,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;GACF;EAED,cAAc;IACZ,IAAI,CAAC,yBAAyB,GAAG,EAAE,CAAC;IACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;GACrD;EAED,gBAAgB;;IACd,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC,0CAAE,qBAAqB,EAAE,CAAC;IAC1G,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC;IAC3D,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC;;IAGnC,IAAI,CAAC,UAAU,GAAG,UAAU,IAAI,WAAW,CAAC,MAAM,GAAG,UAAU,MAAM,WAAW,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE;MAC7G,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;GACF;;EAKO,uBAAuB,CAAC,OAAiB;;IAE/C,OAAO,CAAC,OAAO,CAAC,CAAC,MAAe,KAAK,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC;;IAGhF,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,EAAE;MAC/D,OAAO,CAAC,IAAI,CAAC,YAAY,CAAa,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACzE;GACF;;EAGO,eAAe,CAAC,OAAiB;IACvC,IAAI,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;MAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KACvB;GACF;;EAGO,aAAa,CAAC,OAAiB;IACrC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;MACzB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;KACxC;GACF;EAEO,UAAU,CAAC,OAAiB;;IAElC,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAClF,IAAI,kBAAkB,EAAE;MACtB,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;KACjD;;IAGD,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAY,CAAC;IACnE,oBAAoB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAE/C,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3E,MAAM,oBAAoB,GAAG,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ;QACzD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9I,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,uBAAU,MAAM,EAAG,CAAC,CAAC;IAEhD,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;IACnF,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;GACvC;EAGD,YAAY,CAAC,MAAc,EAAEA,OAAa;;IACxC,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,GAAG,eAAe,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;IACrL,MAAM,eAAe,GAAG,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,yBAAyB,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC;IACvH,MAAM,QAAQ,GAAG,YAAY,MAAM,CAAC,KAAK,IAAIA,OAAK,EAAE,CAAC;IAErD,QACEC,qBACEA,iBAAK,KAAK,EAAE,UAAU,UAAU,GAAG,UAAU,GAAG,EAAE;UAChD,IAAI,CAAC,YAAY,EAAE,EAAE,gBACT,MAAM,CAAC,KAAK,EACxB,OAAO,EAAE,MAAM,CAAC,eAAe,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACjE,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAE,GAAG,CAAA,MAAA,MAAM,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,GAAG,UAAU,GAAG,QAAQ,EAAE,IAE9DA,0BAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,eAAe,GAAG,KAAK,GAAG,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,GAAiB,EAC5JA,mBAAO,OAAO,EAAE,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAS,CAC5C,EACL,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,GAAGD,OAAK,IAAI,UAAU,EAAE,CAAC,CAAC,CACjH,EACN;GACH;EAED,gBAAgB,CAAC,MAAc;IAC7B,IAAI,CAAC,MAAM,CAAC,QAAQ;MAAE,OAAO,KAAK,CAAC;IAEnC,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAChG,CAAC;GACH;EAGD,qBAAqB,CAAC,MAAc;IAClC,IAAI,CAAC,MAAM,CAAC,QAAQ;MAAE,OAAO,KAAK,CAAC;IAEnC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,IACnD,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAChG,CAAC,MAAM,CAAC;IAET,OAAO,gBAAgB,GAAG,CAAC,IAAI,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;GAC1E;EAGD,aAAa,CAAC,OAAiB,EAAE,UAAkB;IACjD,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;MAC5B,IAAI,MAAM,CAAC,KAAK,KAAK,UAAU,EAAE;QAC/B,OAAO,MAAM,CAAC;OACf;MACD,IAAI,MAAM,CAAC,QAAQ,EAAE;QACnB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACxE,IAAI,eAAe,EAAE;UACnB,OAAO,eAAe,CAAC;SACxB;OACF;KACF;IACD,OAAO,IAAI,CAAC;GACb;EAGD,eAAe,CAAC,MAAc,EAAEA,OAAa;;IAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;IAChH,MAAM,eAAe,GAAG,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,yBAAyB,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC;IACvH,MAAM,QAAQ,GAAG,YAAY,MAAM,CAAC,KAAK,IAAIA,OAAK,EAAE,CAAC;IAErD,QACEC,iBAAK,KAAK,EAAE,qBAAqB,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,gBACxE,MAAM,CAAC,KAAK,EACxB,IAAI,EAAE,GAAG,CAAA,MAAA,MAAM,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,GAAG,QAAQ,GAAG,UAAU,EAAE,EAC9D,OAAO,EAAE,MAAM,CAAC,eAAe,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACjE,QAAQ,EAAC,GAAG,IACZA,0BAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,GAAiB,EAClGA,mBAAO,OAAO,EAAE,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAS,CAC5C,EACN;GACH;EAED,MAAM;;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,yBAAyB;OACzD,MAAM,CAAC,MAAM;;MAEZ,MAAM,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,IAChF,YAAY,CAAC,QAAQ;QACrB,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;QACjE,YAAY,CAAC,QAAQ,CACtB,CAAC;MACF,OAAO,CAAC,yBAAyB,CAAC;KACnC,CAAC;OACD,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC;OAC3B,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,QACEA,iBAAK,KAAK,EAAE,2BAA2B,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAiB,IAExF,IAAI,CAAC,KAAK;MACRA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,sBAAO,IAAI,CAAC,KAAK,CAAQ,CACrB,GAAG,IAAI,EAEjBA,iBAAK,KAAK,EAAE;UACV,IAAI,CAAC,YAAY,EAAE;UACnB,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,EAAE;UACjC,IAAI,CAAC,eAAe,GAAG,YAAY,GAAG,EAAE;UACxC,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,EAAE;UACjC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EACjC,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAClD,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAC/CA,iBAAK,KAAK,EAAE;YACV,IAAI,CAAC,yBAAyB,CAAC,MAAM,KAAK,CAAC,GAAG,aAAa,GAAG,EAAE;WACjE,EACC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,IAE/D,IAAI,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,GAAG,qBAAqB,GAAG,IAAI,CAAC,WAAW,CACjF,EACL,IAAI,CAAC,YAAY,KAChBA,iBAAK,KAAK,EAAC,+BAA+B,EACxC,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,IACtDA,mBAAO,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,WAAW,EAAC,WAAW,GAAS,EACpI,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,EAC7E,IAAI,CAAC,SAAS,IAAIA,+CAAkC,CACjD,CACP,EACDA,iBAAK,KAAK,EAAC,gCAAgC,IAGxC,IAAI,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,KACxCA,iBAAK,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAChEA,sBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,EACDA,iBAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,IAC3FA,sBACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,cAAc,GAAY,CAC7B,EACNA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,IAC7FA,sBACE,GAAG,EAAC,WAAW,EACf,IAAI,EAAC,iBAAiB,GAAY,CAChC,CACF,CAEF,EAEJ,IAAI,CAAC,aAAa;MAChBA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,sBAAO,IAAI,CAAC,YAAY,CAAQ,CAC5B,GAAG,IAAI,CAEb,EACN;GACH;;;;;;;AAneM,wBAAY,GAAG,CAAC,CAAC;;;;;","names":["index","h"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n background-color: tokens.$ifxColorBaseWhite;\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design /\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n / or however much indentation you want /\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((event: Event) => {\n const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate \|\| this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/ Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"ifx-multiselect.entry.cjs.js","mappings":"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","names":["index","h"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n background-color: tokens.$ifxColorBaseWhite;\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design /\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n / or however much indentation you want /\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate \|\| this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/ Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}

package/dist/collection/components/select/multi-select/multiselect.js CHANGED Viewed

@@ -15,8 +15,8 @@ function debounce(func, wait) {
 export class Multiselect {
   constructor() {
     this.currentIndex = 0; //needed for option selection using keyboard
-    this.handleSearch = debounce((event) => {
-      const searchTerm = event.target.value.toLowerCase();
+    this.handleSearch = debounce((targetElement) => {
+      const searchTerm = targetElement.value.toLowerCase();
       if (searchTerm === '') {
         this.filteredOptions = this.loadedOptions;
       }
@@ -351,7 +351,7 @@ export class Multiselect {
         ${this.internalError ? 'error' : ""}
         ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: (event) => this.handleWrapperClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { class: `ifx-multiselect-input
           ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
-          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && h("div", null, "Loading more options..."))), h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, h("ifx-icon", { icon: "cremove24" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event.target), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && h("div", null, "Loading more options..."))), h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, h("ifx-icon", { icon: "cremove24" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
       h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage)) : null));
   }
   static get is() { return "ifx-multiselect"; }

package/dist/collection/components/select/multi-select/multiselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((event: Event) => {\n const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate \|\| this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/* Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/multiselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate \|\| this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/* Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"]}

package/dist/esm/ifx-multiselect.entry.js CHANGED Viewed

@@ -20,8 +20,8 @@ const Multiselect = class {
     this.ifxSelect = createEvent(this, "ifxSelect", 7);
     this.ifxMultiselectIsOpen = createEvent(this, "ifxMultiselectIsOpen", 7);
     this.currentIndex = 0; //needed for option selection using keyboard
-    this.handleSearch = debounce((event) => {
-      const searchTerm = event.target.value.toLowerCase();
+    this.handleSearch = debounce((targetElement) => {
+      const searchTerm = targetElement.value.toLowerCase();
       if (searchTerm === '') {
         this.filteredOptions = this.loadedOptions;
       }
@@ -356,7 +356,7 @@ const Multiselect = class {
         ${this.internalError ? 'error' : ""}
         ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: (event) => this.handleWrapperClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { class: `ifx-multiselect-input
           ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
-          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && h("div", null, "Loading more options..."))), h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, h("ifx-icon", { icon: "cremove24" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event.target), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && h("div", null, "Loading more options..."))), h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, h("ifx-icon", { icon: "cremove24" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
       h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage)) : null));
   }
   get el() { return getElement(this); }

package/dist/esm/ifx-multiselect.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-multiselect.entry.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n background-color: tokens.$ifxColorBaseWhite;\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design /\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n / or however much indentation you want /\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((event: Event) => {\n const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate \|\| this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/ Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"ifx-multiselect.entry.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n background-color: tokens.$ifxColorBaseWhite;\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design /\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n / or however much indentation you want /\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate \|\| this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/ Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}

package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as i,b as t}from"./p-5308bbce.js";export{s as setNonce}from"./p-5308bbce.js";const a=()=>{{n(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const n=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t(JSON.parse('[["p-1c0c5582",[[1,"ifx-faq"]]],["p-123d4a3a",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-5b4e3d51",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-efa61556",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-a5ff6fe7",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-00fe439d",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-9dc83b3a",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-38699f7a",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-07fb6c30",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-b7dd5c86",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-a54437a6",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-b0a8503b",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-a9f1c526",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-62df057b",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-75c534f9",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-94b1554c",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-fbb504f5",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-c59e5f0a",[[1,"ifx-tag",{"icon":[1]}]]],["p-5418d5ad",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-e8b3afc4",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-b37bc53f",[[1,"ifx-badge"]]],["p-18af6ba6",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-09d642ff",[[1,"ifx-breadcrumb"]]],["p-2948735e",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-feb92f33",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-38dfaa49",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-d241f837",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-0d6acb23",[[1,"ifx-card-links"]]],["p-2e193a2c",[[1,"ifx-card-overline"]]],["p-70eac687",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-4f84a524",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-9c71d552",[[1,"ifx-dropdown-header"]]],["p-d2b59a7b",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-9d7082e8",[[1,"ifx-dropdown-separator"]]],["p-4a4ef34b",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-7764940c",[[1,"ifx-footer-column"]]],["p-e632c8f1",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-d524e4be",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-e66d7199",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-8f666298",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-fa338e85",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a196e6e6",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-ea6fd405",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-6a4c4226",[[1,"ifx-sidebar-title"]]],["p-c0c027ef",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-9e559e5e",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-d4c756a5",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-4791428f",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-5dd00060",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-8cb5e5e4",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-5f0c8cc4",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-98cc12fa",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-ed126660",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-602ec7ef",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-ef939fac",[[1,"ifx-link",{"href":[1025],"target":[1025],"size":[1],"variant":[1025]}]]],["p-0b243c58",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-38471fd1",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-33a6033b",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-24813bed",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)));
+import{p as e,H as i,b as t}from"./p-5308bbce.js";export{s as setNonce}from"./p-5308bbce.js";const a=()=>{{n(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const n=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t(JSON.parse('[["p-1c0c5582",[[1,"ifx-faq"]]],["p-123d4a3a",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-5b4e3d51",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-efa61556",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-f9a20ea7",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-00fe439d",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-9dc83b3a",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-38699f7a",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-07fb6c30",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-b7dd5c86",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-a54437a6",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-b0a8503b",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-a9f1c526",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-62df057b",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-75c534f9",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-94b1554c",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-fbb504f5",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-c59e5f0a",[[1,"ifx-tag",{"icon":[1]}]]],["p-5418d5ad",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-e8b3afc4",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-b37bc53f",[[1,"ifx-badge"]]],["p-18af6ba6",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-09d642ff",[[1,"ifx-breadcrumb"]]],["p-2948735e",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-feb92f33",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-38dfaa49",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-d241f837",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-0d6acb23",[[1,"ifx-card-links"]]],["p-2e193a2c",[[1,"ifx-card-overline"]]],["p-70eac687",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-4f84a524",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-9c71d552",[[1,"ifx-dropdown-header"]]],["p-d2b59a7b",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-9d7082e8",[[1,"ifx-dropdown-separator"]]],["p-4a4ef34b",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-7764940c",[[1,"ifx-footer-column"]]],["p-e632c8f1",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-d524e4be",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-e66d7199",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-8f666298",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-fa338e85",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a196e6e6",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-ea6fd405",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-6a4c4226",[[1,"ifx-sidebar-title"]]],["p-c0c027ef",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-9e559e5e",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-d4c756a5",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-4791428f",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-5dd00060",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-8cb5e5e4",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-5f0c8cc4",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-98cc12fa",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-ed126660",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-602ec7ef",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-ef939fac",[[1,"ifx-link",{"href":[1025],"target":[1025],"size":[1],"variant":[1025]}]]],["p-0b243c58",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-38471fd1",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-33a6033b",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-24813bed",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)));
 //# sourceMappingURL=infineon-design-system-stencil.esm.js.map

package/dist/infineon-design-system-stencil/p-f9a20ea7.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as t,h as e,g as s}from"./p-5308bbce.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{background-color:#FFFFFF;position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:not-allowed;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{margin-right:8px;display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus{background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}';function o(i,t){let e;return function s(...n){const o=()=>{clearTimeout(e);i(...n)};clearTimeout(e);e=setTimeout(o,t)}}const l=class{constructor(e){i(this,e);this.ifxSelect=t(this,"ifxSelect",7);this.ifxMultiselectIsOpen=t(this,"ifxMultiselectIsOpen",7);this.currentIndex=0;this.handleSearch=o((i=>{const t=i.value.toLowerCase();if(t===""){this.filteredOptions=this.loadedOptions}else{this.filteredOptions=this.loadedOptions.filter((i=>i.label.toLowerCase().includes(t)))}}),300);this.handleDocumentClick=i=>{const t=i.composedPath();if(!t.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}};this.options=undefined;this.batchSize=50;this.size="medium (40px)";this.disabled=false;this.error=false;this.internalError=false;this.errorMessage="Error";this.label="";this.persistentSelectedOptions=[];this.placeholder="";this.listOfOptions=[];this.dropdownOpen=false;this.dropdownFlipped=undefined;this.maxItemCount=undefined;this.zIndex=1;this.isLoading=false;this.loadedOptions=[];this.filteredOptions=[]}async loadInitialOptions(){this.isLoading=true;this.internalError=this.error;this.loadedOptions=await this.fetchOptions(0,this.batchSize);this.isLoading=false}async fetchMoreOptions(){this.isLoading=true;const i=await this.fetchOptions(this.loadedOptions.length,this.batchSize);this.loadedOptions=[...this.loadedOptions,...i];this.isLoading=false}handleScroll(i){const t=i.target;const e=Math.floor((t.scrollHeight-t.clientHeight)/2);if(t.scrollTop>=e){this.fetchMoreOptions()}}async fetchOptions(i,t){let e=[];if(typeof this.options==="string"){try{e=JSON.parse(this.options)}catch(i){console.error("Failed to parse options:",i)}}else if(Array.isArray(this.options)){e=this.options}else{console.error("Unexpected value for options:",this.options)}const s=e.slice(i,i+t);if(i===0){const i=s.filter((i=>i.selected));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i]}return s}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500)}componentWillLoad(){this.loadInitialOptions();this.filteredOptions=[...this.loadedOptions]}updateInternalError(){this.internalError=this.error}loadedOptionsChanged(){this.filteredOptions=[...this.loadedOptions]}handleOptionClick(i){this.internalError=false;if(this.isSelectionLimitReached(i)){console.error("Max item count reached");this.internalError=true;this.errorMessage="Please consider the maximum number of items to choose from";return}this.updateSelection(i);this.ifxSelect.emit(this.persistentSelectedOptions)}isSelectionLimitReached(i){let t=i.children?i.children.length:1;return this.maxItemCount&&this.persistentSelectedOptions.length+t>this.maxItemCount&&!this.persistentSelectedOptions.some((t=>t.value===i.value))}updateSelection(i){const t=this.persistentSelectedOptions.some((t=>t.value===i.value));if(i.children&&i.children.length>0){this.handleParentOptionClick(i)}else{this.handleChildOptionClick(i,t)}}handleParentOptionClick(i){const t=i.children.every((i=>this.persistentSelectedOptions.some((t=>t.value===i.value))));if(t){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((t=>!i.children.some((i=>i.value===t.value))))]}else{const t=[...i.children.filter((i=>!this.persistentSelectedOptions.some((t=>t.value===i.value))))];this.persistentSelectedOptions=[...this.persistentSelectedOptions,...t]}}handleChildOptionClick(i,t){if(t){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((t=>t.value!==i.value))]}else{this.persistentSelectedOptions=[...this.persistentSelectedOptions,i]}}getSizeClass(){return`${this.size}`==="s"?"small-select":"medium-select"}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}),0);this.zIndex=l.globalZIndex++}waitForElement(i,t,e=50){let s=0;function n(){requestAnimationFrame((()=>{const o=i();if(o.length>0\|\|s>e){t(o)}else{s++;n()}}))}n()}handleKeyDown(i){if(this.disabled)return;const t=this.dropdownElement.querySelectorAll(".option");switch(i.code){case"Enter":if(this.dropdownOpen){this.selectItem(t)}else{this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(i=>{this.updateHighlightedOption(i)}))}break;case"ArrowDown":this.handleArrowDown(t);if(this.dropdownOpen){this.updateHighlightedOption(t)}break;case"ArrowUp":this.handleArrowUp(t);if(this.dropdownOpen){this.updateHighlightedOption(t)}break}}handleWrapperClick(i){this.positionDropdown();if(i.currentTarget===i.target){this.toggleDropdown()}}clearSelection(){this.persistentSelectedOptions=[];this.ifxSelect.emit(this.persistentSelectedOptions)}positionDropdown(){var i;const t=(i=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null\|\|i===void 0?void 0:i.getBoundingClientRect();const e=window.innerHeight-t.bottom;const s=t.top;if(s>e&&t.height>e\|\|t.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateHighlightedOption(i){i.forEach((i=>i.classList.remove("is-highlighted")));if(this.currentIndex>=0&&this.currentIndex<i.length){i[this.currentIndex].classList.add("is-highlighted")}}handleArrowDown(i){if(this.currentIndex<i.length-1){this.currentIndex++}else{this.currentIndex=0}}handleArrowUp(i){if(this.currentIndex>0){this.currentIndex--}else{this.currentIndex=i.length-1}}selectItem(i){const t=this.dropdownElement.querySelector(".option.selected");if(t){t.classList.remove("selected")}const e=i[this.currentIndex];e.classList.add("selected");const s=e.getAttribute("data-value");const n=typeof this.options==="string"?JSON.parse(this.options).map((i=>({value:i.value,label:i.label,children:i.children,selected:i.selected}))):this.options.map((i=>Object.assign({},i)));const o=this.findInOptions(n,s);this.handleOptionClick(o)}renderOption(i,t){var s;const n=this.isOptionIndeterminate(i);const o=i.children?n\|\|this.isOptionSelected(i):this.persistentSelectedOptions.some((t=>t.value===i.value));const l=!o&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const r=`checkbox-${i.value}-${t}`;return e("div",null,e("div",{class:`option ${o?"selected":""} \n ${this.getSizeClass()}`,"data-value":i.value,onClick:()=>!l&&this.handleOptionClick(i),tabindex:"0",role:`${((s=i.children)===null\|\|s===void 0?void 0:s.length)>0?"treeitem":"option"}`},e("ifx-checkbox",{id:r,size:"s",value:n?false:o,indeterminate:n,disabled:l}),e("label",{htmlFor:r},i.label)),i.children&&i.children.map(((i,e)=>this.renderSubOption(i,`${t}-${e}`))))}isOptionSelected(i){if(!i.children)return false;return i.children.every((i=>this.persistentSelectedOptions.some((t=>t.value===i.value))))}isOptionIndeterminate(i){if(!i.children)return false;const t=i.children.filter((i=>this.persistentSelectedOptions.some((t=>t.value===i.value)))).length;return t>0&&t<i.children.length}findInOptions(i,t){for(const e of i){if(e.value===t){return e}if(e.children){const i=this.findInOptions(e.children,t);if(i){return i}}}return null}renderSubOption(i,t){var s;const n=this.persistentSelectedOptions.some((t=>t.value===i.value));const o=!n&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const l=`checkbox-${i.value}-${t}`;return e("div",{class:`option sub-option ${n?"selected":""} ${this.getSizeClass()}`,"data-value":i.value,role:`${((s=i.children)===null\|\|s===void 0?void 0:s.length)>0?"option":"treeitem"}`,onClick:()=>!o&&this.handleOptionClick(i),tabindex:"0"},e("ifx-checkbox",{id:l,size:"s",value:n,disabled:o}),e("label",{htmlFor:l},i.label))}render(){const i=this.persistentSelectedOptions.filter((i=>{const t=this.persistentSelectedOptions.some((t=>t.children&&t.children.some((t=>t.value===i.value))&&t.selected));return!t})).map((i=>i.label)).join(", ");return e("div",{class:`ifx-multiselect-container`,ref:i=>this.dropdownElement=i},this.label?e("div",{class:"ifx-label-wrapper"},e("span",null,this.label)):null,e("div",{class:`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen?"active":""} \n ${this.dropdownFlipped?"is-flipped":""}\n ${this.internalError?"error":""}\n ${this.disabled?"disabled":""}`,tabindex:"0",onClick:i=>this.handleWrapperClick(i),onKeyDown:i=>this.handleKeyDown(i)},e("div",{class:`ifx-multiselect-input \n ${this.persistentSelectedOptions.length===0?"placeholder":""}\n `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},this.persistentSelectedOptions.length>0?i:this.placeholder),this.dropdownOpen&&e("div",{class:"ifx-multiselect-dropdown-menu",onScroll:i=>this.handleScroll(i),style:{"--dynamic-z-index":this.zIndex.toString()}},e("input",{type:"text",role:"textbox",class:"search-input",onInput:i=>this.handleSearch(i.target),placeholder:"Search..."}),this.filteredOptions.map(((i,t)=>this.renderOption(i,t))),this.isLoading&&e("div",null,"Loading more options...")),e("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&e("div",{class:"ifx-clear-button",onClick:()=>this.clearSelection()},e("ifx-icon",{icon:"cremove24"})),e("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},e("ifx-icon",{key:"icon-up",icon:"chevronup-16"})),e("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},e("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?e("div",{class:"ifx-error-message-wrapper"},e("span",null,this.errorMessage)):null)}get el(){return s(this)}static get watchers(){return{error:["updateInternalError"],loadedOptions:["loadedOptionsChanged"]}}};l.globalZIndex=1;l.style=n;export{l as ifx_multiselect};
2	+ //# sourceMappingURL=p-f9a20ea7.entry.js.map

package/dist/infineon-design-system-stencil/p-f9a20ea7.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["multiselectCss","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","this","currentIndex","handleSearch","targetElement","searchTerm","value","toLowerCase","filteredOptions","loadedOptions","filter","option","label","includes","handleDocumentClick","event","path","composedPath","dropdownElement","dropdownOpen","document","removeEventListener","ifxMultiselectIsOpen","emit","loadInitialOptions","isLoading","internalError","error","fetchOptions","batchSize","fetchMoreOptions","moreOptions","length","handleScroll","element","target","halfwayPoint","Math","floor","scrollHeight","clientHeight","scrollTop","startIndex","count","allOptions","options","JSON","parse","err","console","Array","isArray","slicedOptions","slice","initiallySelected","selected","persistentSelectedOptions","componentDidLoad","positionDropdown","componentWillLoad","updateInternalError","loadedOptionsChanged","handleOptionClick","isSelectionLimitReached","errorMessage","updateSelection","ifxSelect","newOptionsLength","children","maxItemCount","some","selectedOption","wasSelected","handleParentOptionClick","handleChildOptionClick","allChildrenSelected","every","child","newChildren","childOption","getSizeClass","size","toggleDropdown","addEventListener","zIndex","globalZIndex","waitForElement","querySelectorFunc","callback","maxTries","tries","request","requestAnimationFrame","elements","handleKeyDown","disabled","querySelectorAll","code","selectItem","updateHighlightedOption","handleArrowDown","handleArrowUp","handleWrapperClick","currentTarget","clearSelection","wrapperRect","_a","el","shadowRoot","querySelector","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","height","dropdownFlipped","forEach","classList","remove","add","previouslySelected","currentOptionElement","currentOptionValue","getAttribute","currentListOfOptions","map","Object","assign","currentOption","findInOptions","renderOption","index","isIndeterminate","isOptionIndeterminate","isSelected","isOptionSelected","disableCheckbox","uniqueId","h","class","onClick","tabindex","role","id","indeterminate","htmlFor","childIndex","renderSubOption","persistentOption","selectedChildren","foundInChildren","render","selectedOptionsLabels","isChildSelectedWithParent","parentOption","join","ref","onKeyDown","undefined","placeholder","onScroll","style","toString","type","onInput","icon","key"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n background-color: tokens.$ifxColorBaseWhite;\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design */\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n /* or however much indentation you want */\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] | string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 || tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' || 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option | null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/* Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "20.50.2",
+  "version": "20.50.3",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/infineon-design-system-stencil/p-a5ff6fe7.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as i,c as t,h as e,g as s}from"./p-5308bbce.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{background-color:#FFFFFF;position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:not-allowed;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{margin-right:8px;display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus{background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}';function o(i,t){let e;return function s(...n){const o=()=>{clearTimeout(e);i(...n)};clearTimeout(e);e=setTimeout(o,t)}}const l=class{constructor(e){i(this,e);this.ifxSelect=t(this,"ifxSelect",7);this.ifxMultiselectIsOpen=t(this,"ifxMultiselectIsOpen",7);this.currentIndex=0;this.handleSearch=o((i=>{const t=i.target.value.toLowerCase();if(t===""){this.filteredOptions=this.loadedOptions}else{this.filteredOptions=this.loadedOptions.filter((i=>i.label.toLowerCase().includes(t)))}}),300);this.handleDocumentClick=i=>{const t=i.composedPath();if(!t.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}};this.options=undefined;this.batchSize=50;this.size="medium (40px)";this.disabled=false;this.error=false;this.internalError=false;this.errorMessage="Error";this.label="";this.persistentSelectedOptions=[];this.placeholder="";this.listOfOptions=[];this.dropdownOpen=false;this.dropdownFlipped=undefined;this.maxItemCount=undefined;this.zIndex=1;this.isLoading=false;this.loadedOptions=[];this.filteredOptions=[]}async loadInitialOptions(){this.isLoading=true;this.internalError=this.error;this.loadedOptions=await this.fetchOptions(0,this.batchSize);this.isLoading=false}async fetchMoreOptions(){this.isLoading=true;const i=await this.fetchOptions(this.loadedOptions.length,this.batchSize);this.loadedOptions=[...this.loadedOptions,...i];this.isLoading=false}handleScroll(i){const t=i.target;const e=Math.floor((t.scrollHeight-t.clientHeight)/2);if(t.scrollTop>=e){this.fetchMoreOptions()}}async fetchOptions(i,t){let e=[];if(typeof this.options==="string"){try{e=JSON.parse(this.options)}catch(i){console.error("Failed to parse options:",i)}}else if(Array.isArray(this.options)){e=this.options}else{console.error("Unexpected value for options:",this.options)}const s=e.slice(i,i+t);if(i===0){const i=s.filter((i=>i.selected));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i]}return s}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500)}componentWillLoad(){this.loadInitialOptions();this.filteredOptions=[...this.loadedOptions]}updateInternalError(){this.internalError=this.error}loadedOptionsChanged(){this.filteredOptions=[...this.loadedOptions]}handleOptionClick(i){this.internalError=false;if(this.isSelectionLimitReached(i)){console.error("Max item count reached");this.internalError=true;this.errorMessage="Please consider the maximum number of items to choose from";return}this.updateSelection(i);this.ifxSelect.emit(this.persistentSelectedOptions)}isSelectionLimitReached(i){let t=i.children?i.children.length:1;return this.maxItemCount&&this.persistentSelectedOptions.length+t>this.maxItemCount&&!this.persistentSelectedOptions.some((t=>t.value===i.value))}updateSelection(i){const t=this.persistentSelectedOptions.some((t=>t.value===i.value));if(i.children&&i.children.length>0){this.handleParentOptionClick(i)}else{this.handleChildOptionClick(i,t)}}handleParentOptionClick(i){const t=i.children.every((i=>this.persistentSelectedOptions.some((t=>t.value===i.value))));if(t){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((t=>!i.children.some((i=>i.value===t.value))))]}else{const t=[...i.children.filter((i=>!this.persistentSelectedOptions.some((t=>t.value===i.value))))];this.persistentSelectedOptions=[...this.persistentSelectedOptions,...t]}}handleChildOptionClick(i,t){if(t){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((t=>t.value!==i.value))]}else{this.persistentSelectedOptions=[...this.persistentSelectedOptions,i]}}getSizeClass(){return`${this.size}`==="s"?"small-select":"medium-select"}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}),0);this.zIndex=l.globalZIndex++}waitForElement(i,t,e=50){let s=0;function n(){requestAnimationFrame((()=>{const o=i();if(o.length>0\|\|s>e){t(o)}else{s++;n()}}))}n()}handleKeyDown(i){if(this.disabled)return;const t=this.dropdownElement.querySelectorAll(".option");switch(i.code){case"Enter":if(this.dropdownOpen){this.selectItem(t)}else{this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(i=>{this.updateHighlightedOption(i)}))}break;case"ArrowDown":this.handleArrowDown(t);if(this.dropdownOpen){this.updateHighlightedOption(t)}break;case"ArrowUp":this.handleArrowUp(t);if(this.dropdownOpen){this.updateHighlightedOption(t)}break}}handleWrapperClick(i){this.positionDropdown();if(i.currentTarget===i.target){this.toggleDropdown()}}clearSelection(){this.persistentSelectedOptions=[];this.ifxSelect.emit(this.persistentSelectedOptions)}positionDropdown(){var i;const t=(i=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null\|\|i===void 0?void 0:i.getBoundingClientRect();const e=window.innerHeight-t.bottom;const s=t.top;if(s>e&&t.height>e\|\|t.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateHighlightedOption(i){i.forEach((i=>i.classList.remove("is-highlighted")));if(this.currentIndex>=0&&this.currentIndex<i.length){i[this.currentIndex].classList.add("is-highlighted")}}handleArrowDown(i){if(this.currentIndex<i.length-1){this.currentIndex++}else{this.currentIndex=0}}handleArrowUp(i){if(this.currentIndex>0){this.currentIndex--}else{this.currentIndex=i.length-1}}selectItem(i){const t=this.dropdownElement.querySelector(".option.selected");if(t){t.classList.remove("selected")}const e=i[this.currentIndex];e.classList.add("selected");const s=e.getAttribute("data-value");const n=typeof this.options==="string"?JSON.parse(this.options).map((i=>({value:i.value,label:i.label,children:i.children,selected:i.selected}))):this.options.map((i=>Object.assign({},i)));const o=this.findInOptions(n,s);this.handleOptionClick(o)}renderOption(i,t){var s;const n=this.isOptionIndeterminate(i);const o=i.children?n\|\|this.isOptionSelected(i):this.persistentSelectedOptions.some((t=>t.value===i.value));const l=!o&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const r=`checkbox-${i.value}-${t}`;return e("div",null,e("div",{class:`option ${o?"selected":""} \n ${this.getSizeClass()}`,"data-value":i.value,onClick:()=>!l&&this.handleOptionClick(i),tabindex:"0",role:`${((s=i.children)===null\|\|s===void 0?void 0:s.length)>0?"treeitem":"option"}`},e("ifx-checkbox",{id:r,size:"s",value:n?false:o,indeterminate:n,disabled:l}),e("label",{htmlFor:r},i.label)),i.children&&i.children.map(((i,e)=>this.renderSubOption(i,`${t}-${e}`))))}isOptionSelected(i){if(!i.children)return false;return i.children.every((i=>this.persistentSelectedOptions.some((t=>t.value===i.value))))}isOptionIndeterminate(i){if(!i.children)return false;const t=i.children.filter((i=>this.persistentSelectedOptions.some((t=>t.value===i.value)))).length;return t>0&&t<i.children.length}findInOptions(i,t){for(const e of i){if(e.value===t){return e}if(e.children){const i=this.findInOptions(e.children,t);if(i){return i}}}return null}renderSubOption(i,t){var s;const n=this.persistentSelectedOptions.some((t=>t.value===i.value));const o=!n&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const l=`checkbox-${i.value}-${t}`;return e("div",{class:`option sub-option ${n?"selected":""} ${this.getSizeClass()}`,"data-value":i.value,role:`${((s=i.children)===null\|\|s===void 0?void 0:s.length)>0?"option":"treeitem"}`,onClick:()=>!o&&this.handleOptionClick(i),tabindex:"0"},e("ifx-checkbox",{id:l,size:"s",value:n,disabled:o}),e("label",{htmlFor:l},i.label))}render(){const i=this.persistentSelectedOptions.filter((i=>{const t=this.persistentSelectedOptions.some((t=>t.children&&t.children.some((t=>t.value===i.value))&&t.selected));return!t})).map((i=>i.label)).join(", ");return e("div",{class:`ifx-multiselect-container`,ref:i=>this.dropdownElement=i},this.label?e("div",{class:"ifx-label-wrapper"},e("span",null,this.label)):null,e("div",{class:`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen?"active":""} \n ${this.dropdownFlipped?"is-flipped":""}\n ${this.internalError?"error":""}\n ${this.disabled?"disabled":""}`,tabindex:"0",onClick:i=>this.handleWrapperClick(i),onKeyDown:i=>this.handleKeyDown(i)},e("div",{class:`ifx-multiselect-input \n ${this.persistentSelectedOptions.length===0?"placeholder":""}\n `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},this.persistentSelectedOptions.length>0?i:this.placeholder),this.dropdownOpen&&e("div",{class:"ifx-multiselect-dropdown-menu",onScroll:i=>this.handleScroll(i),style:{"--dynamic-z-index":this.zIndex.toString()}},e("input",{type:"text",role:"textbox",class:"search-input",onInput:i=>this.handleSearch(i),placeholder:"Search..."}),this.filteredOptions.map(((i,t)=>this.renderOption(i,t))),this.isLoading&&e("div",null,"Loading more options...")),e("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&e("div",{class:"ifx-clear-button",onClick:()=>this.clearSelection()},e("ifx-icon",{icon:"cremove24"})),e("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},e("ifx-icon",{key:"icon-up",icon:"chevronup-16"})),e("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},e("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?e("div",{class:"ifx-error-message-wrapper"},e("span",null,this.errorMessage)):null)}get el(){return s(this)}static get watchers(){return{error:["updateInternalError"],loadedOptions:["loadedOptionsChanged"]}}};l.globalZIndex=1;l.style=n;export{l as ifx_multiselect};
2	- //# sourceMappingURL=p-a5ff6fe7.entry.js.map

package/dist/infineon-design-system-stencil/p-a5ff6fe7.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["multiselectCss","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","this","currentIndex","handleSearch","event","searchTerm","target","value","toLowerCase","filteredOptions","loadedOptions","filter","option","label","includes","handleDocumentClick","path","composedPath","dropdownElement","dropdownOpen","document","removeEventListener","ifxMultiselectIsOpen","emit","loadInitialOptions","isLoading","internalError","error","fetchOptions","batchSize","fetchMoreOptions","moreOptions","length","handleScroll","element","halfwayPoint","Math","floor","scrollHeight","clientHeight","scrollTop","startIndex","count","allOptions","options","JSON","parse","err","console","Array","isArray","slicedOptions","slice","initiallySelected","selected","persistentSelectedOptions","componentDidLoad","positionDropdown","componentWillLoad","updateInternalError","loadedOptionsChanged","handleOptionClick","isSelectionLimitReached","errorMessage","updateSelection","ifxSelect","newOptionsLength","children","maxItemCount","some","selectedOption","wasSelected","handleParentOptionClick","handleChildOptionClick","allChildrenSelected","every","child","newChildren","childOption","getSizeClass","size","toggleDropdown","addEventListener","zIndex","globalZIndex","waitForElement","querySelectorFunc","callback","maxTries","tries","request","requestAnimationFrame","elements","handleKeyDown","disabled","querySelectorAll","code","selectItem","updateHighlightedOption","handleArrowDown","handleArrowUp","handleWrapperClick","currentTarget","clearSelection","wrapperRect","_a","el","shadowRoot","querySelector","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","height","dropdownFlipped","forEach","classList","remove","add","previouslySelected","currentOptionElement","currentOptionValue","getAttribute","currentListOfOptions","map","Object","assign","currentOption","findInOptions","renderOption","index","isIndeterminate","isOptionIndeterminate","isSelected","isOptionSelected","disableCheckbox","uniqueId","h","class","onClick","tabindex","role","id","indeterminate","htmlFor","childIndex","renderSubOption","persistentOption","selectedChildren","foundInChildren","render","selectedOptionsLabels","isChildSelectedWithParent","parentOption","join","ref","onKeyDown","undefined","placeholder","onScroll","style","toString","type","onInput","icon","key"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n background-color: tokens.$ifxColorBaseWhite;\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design */\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n /* or however much indentation you want */\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() options: any[] | string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n\n handleSearch = debounce((event: Event) => {\n const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (this.isSelectionLimitReached(option)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n }\n }\n\n\n\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 || tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' || 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} size=\"s\" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option | null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} size=\"s\" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/* Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"mappings":"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"}