npm - @infineon/infineon-design-system-stencil - Versions diffs - 20.37.0 → 20.37.1 - Mend

@infineon/infineon-design-system-stencil 20.37.0 → 20.37.1

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

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

@@ -374,7 +374,7 @@ const Multiselect = class {
   render() {
     // Create a label for the selected options
     const selectedOptionsLabels = this.persistentSelectedOptions.map(option => option.label).join(', ');
-    return (index.h("div", { class: `ifx-multiselect-container ${this.getSizeClass()}`, ref: el => this.dropdownElement = el }, this.label ?
+    return (index.h("div", { class: `ifx-multiselect-container`, ref: el => this.dropdownElement = el }, this.label ?
       index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label)) : null, index.h("div", { class: `ifx-multiselect-wrapper
         ${this.getSizeClass()}
         ${this.dropdownOpen ? 'active' : ''}

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,8gIAA8gI;;MCUxhI,WAAW;;;;;IAkBd,iBAAY,GAAW,CAAC,CAAC;IAuMjC,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;;qBA/N2B,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;EAED,YAAY,CAAC,KAAY;IACvB,MAAM,UAAU,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IAC1E,IAAI,UAAU,KAAK,EAAE,EAAE;MACrB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC;KAC3C;SAAM;MACL,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;KAC5G;GACF;EAED,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;;;IAG3B,IAAI,gBAAgB,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACpE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,yBAAyB,CAAC,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE;MACtM,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;MACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,YAAY,GAAG,4DAA4D,CAAC;MACjF,OAAO;KACR;;IAGD,MAAM,WAAW,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;;IAGjH,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;MACjD,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;OACzM;WAAM;QACL,IAAI,CAAC,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,yBAAyB,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;OAClG;KACF;SAAM;MACL,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;OACjI;WAAM;QACL,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;OAC7C;MAED,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;MAE9H,IAAI,YAAY,EAAE;QAChB,MAAM,mBAAmB,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9J,MAAM,oBAAoB,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAE9J,IAAI,mBAAmB,EAAE;UACvB,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACvG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;WACnD;SACF;aAAM,IAAI,oBAAoB,EAAE;UAC/B,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,YAAY,CAAC,KAAK,CAAC,CAAC;SACvI;aAAM;UACL,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,YAAY,CAAC,KAAK,CAAC,CAAC;SACvI;OACF;KACF;;IAGD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG;MAC7C,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,EAAE;QAC9B,uCAAY,GAAG,KAAE,QAAQ,EAAE,CAAC,WAAW,IAAG;OAC3C;WAAM,IAAI,GAAG,CAAC,QAAQ,EAAE;QACvB,MAAM,gBAAgB,GAAG,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACtE,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK;UACnC,IAAI,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,gBAAgB,EAAE;YACpD,uCAAY,KAAK,KAAE,QAAQ,EAAE,IAAI,IAAG;WACrC;UACD,OAAO,KAAK,CAAC;SACd,CAAC,CAAC;QACH,uCAAY,GAAG,KAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,IAAG;OAC3C;MACD,OAAO,GAAG,CAAC;KACZ,CAAC,CAAC;;IAGH,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,IAAI;MACtE,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;MAC3L,IAAI,cAAc,EAAE;QAClB,uCAAY,IAAI,KAAE,QAAQ,EAAE,cAAc,CAAC,QAAQ,IAAG;OACvD;MACD,OAAO,IAAI,CAAC;KACb,CAAC,CAAC;;IAGH,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,IAAI;;MAE5D,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;MAC5H,IAAI,MAAM,IAAI,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE;;QAE1G,uCAAY,IAAI,KAAE,QAAQ,EAAE,IAAI,IAAG;OACpC;MACD,OAAO,IAAI,CAAC;KACb,CAAC,CAAC,MAAM,CAAC,IAAI;;MAEZ,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;MAC5H,IAAI,MAAM,IAAI,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE;QAC1G,OAAO,KAAK,CAAC;OACd;MACD,OAAO,IAAI,CAAC;KACb,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;GACrC;EAaD,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,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,qCAAU,MAAM,KAAE,QAAQ,EAAE,KAAK,IAAG,CAAC,CAAC;IACxF,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,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;IACrD,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAE3D,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,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,GAAiB,EACzHA,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;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,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,GAAiB,EACzFA,mBAAO,OAAO,EAAE,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAS,CAC5C,EACN;GACH;EAED,MAAM;;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpG,QACEA,iBAAK,KAAK,EAAE,6BAA6B,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAiB,IAE/G,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;;;;;;;AAhfM,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 position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: 16px;\n line-height: 24px;\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: 12px;\n line-height: 16px;\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 #8D8786;\n width: 100%;\n\n &.small-select {\n line-height: 20px;\n padding: 8px 12px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n padding: 8px 16px;\n font-size: 16px;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\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 }\n }\n\n &.disabled {\n background: #EEEDED;\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: #8D8786;\n }\n\n &.active {\n border: 2px solid #0A8276 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\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 }\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 border: 1px solid #ddd;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\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: 16px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 2px solid #ccc;\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 line-height: 20px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n font-size: 16px;\n }\n\n &:hover {\n background-color: #EEEDED;\n }\n\n &:focus {\n background-color: #BFBBBB;\n outline: none;\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n\n &.is-highlighted {\n background-color: #EEEDED;\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@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\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 handleSearch(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 }\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; //reset potential previous errors\n // 1. Prevent action if disabled\n //check if newly selected option has children => if not, count it as 1, otherwise count the # of children\n let newOptionsLength = option.children ? option.children.length : 1;\n if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {\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 // 2. Determine if the current option was previously selected\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n // 3. Handle parent-child relationships\n if (option.children && option.children.length > 0) {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value && !option.children.some(child => child.value === selectedOption.value));\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option, ...option.children];\n }\n } else {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value);\n } else {\n this.persistentSelectedOptions.push(option);\n }\n\n const parentOption = this.listOfOptions.find(opt => opt.children && opt.children.some(child => child.value === option.value));\n\n if (parentOption) {\n const allChildrenSelected = parentOption.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n const someChildrenSelected = parentOption.children.some(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n\n if (allChildrenSelected) {\n if (!this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parentOption.value)) {\n this.persistentSelectedOptions.push(parentOption);\n }\n } else if (someChildrenSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n } else {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n }\n }\n }\n\n // 4. Reflect changes in the listOfOptions state\n this.listOfOptions = this.listOfOptions.map(opt => {\n if (opt.value === option.value) {\n return { ...opt, selected: !wasSelected };\n } else if (opt.children) {\n const isParentSelected = this.persistentSelectedOptions.includes(opt);\n opt.children = opt.children.map(child => {\n if (child.value === option.value \|\| isParentSelected) {\n return { ...child, selected: true };\n }\n return child;\n });\n return { ...opt, children: opt.children };\n }\n return opt;\n });\n\n // 5. Update the selected status in persistentSelectedOptions\n this.persistentSelectedOptions = this.persistentSelectedOptions.map(pOpt => {\n const matchingOption = this.listOfOptions.find(loOpt => loOpt.value === pOpt.value) \|\| this.listOfOptions.flatMap(loOpt => loOpt.children \|\| []).find(child => child.value === pOpt.value);\n if (matchingOption) {\n return { ...pOpt, selected: matchingOption.selected };\n }\n return pOpt;\n });\n\n // 6. Emit persistentSelectedOptions without duplicated children\n const emittedOptions = this.persistentSelectedOptions.map(pOpt => {\n // If this option is a child, check if its parent is in persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n // If it's a child and its parent is also selected, ensure it's set to selected: true\n return { ...pOpt, selected: true };\n }\n return pOpt;\n }).filter(pOpt => {\n // After ensuring the children are selected, now filter out the children whose parents are also in the persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n return false; // Exclude this child since its parent is already selected\n }\n return true;\n });\n this.ifxSelect.emit(emittedOptions);\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.listOfOptions = this.listOfOptions.map(option => ({ ...option, selected: false }));\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 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}`; // Generate a unique ID using the index\n const isIndeterminate = this.isOptionIndeterminate(option);\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} value={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\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} 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.map(option => option.label).join(', ');\n\n return (\n <div class={`ifx-multiselect-container ${this.getSizeClass()}`} 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 position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: 16px;\n line-height: 24px;\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: 12px;\n line-height: 16px;\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 #8D8786;\n width: 100%;\n\n &.small-select {\n line-height: 20px;\n padding: 8px 12px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n padding: 8px 16px;\n font-size: 16px;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\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 }\n }\n\n &.disabled {\n background: #EEEDED;\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: #8D8786;\n }\n\n &.active {\n border: 2px solid #0A8276 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\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 }\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 border: 1px solid #ddd;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\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: 16px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 2px solid #ccc;\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 line-height: 20px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n font-size: 16px;\n }\n\n &:hover {\n background-color: #EEEDED;\n }\n\n &:focus {\n background-color: #BFBBBB;\n outline: none;\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n\n &.is-highlighted {\n background-color: #EEEDED;\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@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\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 handleSearch(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 }\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; //reset potential previous errors\n // 1. Prevent action if disabled\n //check if newly selected option has children => if not, count it as 1, otherwise count the # of children\n let newOptionsLength = option.children ? option.children.length : 1;\n if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {\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 // 2. Determine if the current option was previously selected\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n // 3. Handle parent-child relationships\n if (option.children && option.children.length > 0) {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value && !option.children.some(child => child.value === selectedOption.value));\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option, ...option.children];\n }\n } else {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value);\n } else {\n this.persistentSelectedOptions.push(option);\n }\n\n const parentOption = this.listOfOptions.find(opt => opt.children && opt.children.some(child => child.value === option.value));\n\n if (parentOption) {\n const allChildrenSelected = parentOption.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n const someChildrenSelected = parentOption.children.some(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n\n if (allChildrenSelected) {\n if (!this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parentOption.value)) {\n this.persistentSelectedOptions.push(parentOption);\n }\n } else if (someChildrenSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n } else {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n }\n }\n }\n\n // 4. Reflect changes in the listOfOptions state\n this.listOfOptions = this.listOfOptions.map(opt => {\n if (opt.value === option.value) {\n return { ...opt, selected: !wasSelected };\n } else if (opt.children) {\n const isParentSelected = this.persistentSelectedOptions.includes(opt);\n opt.children = opt.children.map(child => {\n if (child.value === option.value \|\| isParentSelected) {\n return { ...child, selected: true };\n }\n return child;\n });\n return { ...opt, children: opt.children };\n }\n return opt;\n });\n\n // 5. Update the selected status in persistentSelectedOptions\n this.persistentSelectedOptions = this.persistentSelectedOptions.map(pOpt => {\n const matchingOption = this.listOfOptions.find(loOpt => loOpt.value === pOpt.value) \|\| this.listOfOptions.flatMap(loOpt => loOpt.children \|\| []).find(child => child.value === pOpt.value);\n if (matchingOption) {\n return { ...pOpt, selected: matchingOption.selected };\n }\n return pOpt;\n });\n\n // 6. Emit persistentSelectedOptions without duplicated children\n const emittedOptions = this.persistentSelectedOptions.map(pOpt => {\n // If this option is a child, check if its parent is in persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n // If it's a child and its parent is also selected, ensure it's set to selected: true\n return { ...pOpt, selected: true };\n }\n return pOpt;\n }).filter(pOpt => {\n // After ensuring the children are selected, now filter out the children whose parents are also in the persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n return false; // Exclude this child since its parent is already selected\n }\n return true;\n });\n this.ifxSelect.emit(emittedOptions);\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.listOfOptions = this.listOfOptions.map(option => ({ ...option, selected: false }));\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 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}`; // Generate a unique ID using the index\n const isIndeterminate = this.isOptionIndeterminate(option);\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} value={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\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} 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.map(option => option.label).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}

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

@@ -7022,7 +7022,7 @@ const Choices = class {
     switch (this.type) {
       case 'single':
         this.element =
-          index.h("div", { class: `ifx-select-container ${this.getSizeClass()}` }, this.ifxLabel ?
+          index.h("div", { class: `ifx-select-container` }, this.ifxLabel ?
             index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.ifxLabel)) : null, index.h("div", { class: `${choicesWrapperClass}
             ${this.ifxDisabled ? 'disabled' : ""}
             ${this.ifxError ? 'error' : ""}`, onClick: this.ifxDisabled ? undefined : () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("select", Object.assign({}, attributesSingle, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.ifxOptions)), index.h("div", { class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), index.h("div", { class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' }))), this.ifxError ?