@infineon/infineon-design-system-stencil 20.46.0 → 20.46.1

package/dist/cjs/ifx-checkbox.cjs.entry.js

@@ -17,12 +17,13 @@ const Checkbox = class {
     this.size = 'm';
     this.internalValue = undefined;
     this.indeterminate = false;
+    this.internalIndeterminate = undefined;
   }
   handleCheckbox() {
     if (!this.disabled) {
       if (this.inputElement.indeterminate) {
         this.internalValue = true;
-        this.indeterminate = false;
+        this.internalIndeterminate = false;
       }
       else {
         this.internalValue = !this.internalValue;
@@ -36,6 +37,12 @@ const Checkbox = class {
       this.inputElement.checked = this.internalValue; // update the checkbox's checked property
     }
   }
+  indeterminateChanged(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.internalIndeterminate = newValue;
+      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
+    }
+  }
   handleKeydown(event) {
     // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key
     if (event.keyCode === 32 || event.keyCode === 13) {
@@ -45,9 +52,10 @@ const Checkbox = class {
   }
   componentWillLoad() {
     this.internalValue = this.value;
+    this.internalIndeterminate = this.indeterminate;
   }
   componentDidRender() {
-    this.inputElement.indeterminate = this.indeterminate;
+    this.inputElement.indeterminate = this.internalIndeterminate;
   }
   getCheckedClassName() {
     if (this.error) {
@@ -81,7 +89,8 @@ const Checkbox = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["valueChanged"]
+    "value": ["valueChanged"],
+    "indeterminate": ["indeterminateChanged"]
   }; }
 };
 Checkbox.style = checkboxCss;

package/dist/cjs/ifx-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-checkbox.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() name: string = '';\n  @Prop() size: string = 'm';\n  @State() internalValue: boolean;\n  @Prop() indeterminate: boolean = false;\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalValue = true;\n        this.indeterminate = false;\n      } else {\n        this.internalValue = !this.internalValue;\n      }\n      this.ifxChange.emit(this.internalValue);\n    }\n  }\n\n\n  @Watch('value')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n      this.inputElement.checked = this.internalValue; // update the checkbox's checked property\n    }\n  }\n\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.indeterminate;\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalValue) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalValue) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          name={this.name}\n          checked={this.internalValue}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.internalValue}`}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"  // role attribute\n          aria-value={this.internalValue}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalValue && <ifx-icon icon=\"check-12\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-checkbox.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() name: string = '';\n  @Prop() size: string = 'm';\n  @State() internalValue: boolean;\n  @Prop() indeterminate: boolean = false;\n  @State() internalIndeterminate: boolean;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalValue = true;\n        this.internalIndeterminate = false;\n      } else {\n        this.internalValue = !this.internalValue;\n      }\n      this.ifxChange.emit(this.internalValue);\n    }\n  }\n\n\n  @Watch('value')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n      this.inputElement.checked = this.internalValue; // update the checkbox's checked property\n    }\n  }\n\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalValue) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalValue) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          name={this.name}\n          checked={this.internalValue}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.internalValue}`}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"  // role attribute\n          aria-value={this.internalValue}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalValue && <ifx-icon icon=\"check-12\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -6,12 +6,33 @@ const index = require('./index-ca0e0765.js');
 
 const multiselectCss = ":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;}";
 
+// Debounce function
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
 const Multiselect = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     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();
+      if (searchTerm === '') {
+        this.filteredOptions = this.loadedOptions;
+      }
+      else {
+        this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm));
+      }
+    }, 300);
     this.handleDocumentClick = (event) => {
       const path = event.composedPath();
       if (!path.includes(this.dropdownElement)) {
@@ -86,15 +107,6 @@ const Multiselect = class {
     }
     return slicedOptions;
   }
-  handleSearch(event) {
-    const searchTerm = event.target.value.toLowerCase();
-    if (searchTerm === '') {
-      this.filteredOptions = this.loadedOptions;
-    }
-    else {
-      this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm));
-    }
-  }
   componentDidLoad() {
     setTimeout(() => {
       this.positionDropdown();
@@ -112,94 +124,47 @@ const Multiselect = class {
     this.filteredOptions = [...this.loadedOptions];
   }
   handleOptionClick(option) {
-    this.internalError = false; //reset potential previous errors
-    // 1. Prevent action if disabled
-    //check if newly selected option has children => if not, count it as 1, otherwise count the # of children
-    let newOptionsLength = option.children ? option.children.length : 1;
-    if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {
+    this.internalError = false;
+    if (this.isSelectionLimitReached(option)) {
       console.error('Max item count reached');
       this.internalError = true;
       this.errorMessage = "Please consider the maximum number of items to choose from";
       return;
     }
-    // 2. Determine if the current option was previously selected
+    this.updateSelection(option);
+    this.ifxSelect.emit(this.persistentSelectedOptions);
+  }
+  isSelectionLimitReached(option) {
+    let newOptionsLength = option.children ? option.children.length : 1;
+    return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&
+      !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+  }
+  updateSelection(option) {
     const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
-    // 3. Handle parent-child relationships
     if (option.children && option.children.length > 0) {
-      if (wasSelected) {
-        this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value && !option.children.some(child => child.value === selectedOption.value));
-      }
-      else {
-        this.persistentSelectedOptions = [...this.persistentSelectedOptions, option, ...option.children];
-      }
+      this.handleParentOptionClick(option);
     }
     else {
-      if (wasSelected) {
-        this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value);
-      }
-      else {
-        this.persistentSelectedOptions.push(option);
-      }
-      const parentOption = this.listOfOptions.find(opt => opt.children && opt.children.some(child => child.value === option.value));
-      if (parentOption) {
-        const allChildrenSelected = parentOption.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));
-        const someChildrenSelected = parentOption.children.some(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));
-        if (allChildrenSelected) {
-          if (!this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parentOption.value)) {
-            this.persistentSelectedOptions.push(parentOption);
-          }
-        }
-        else if (someChildrenSelected) {
-          this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);
-        }
-        else {
-          this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);
-        }
-      }
+      this.handleChildOptionClick(option, wasSelected);
+    }
+  }
+  handleParentOptionClick(option) {
+    const allChildrenSelected = option.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));
+    if (allChildrenSelected) {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => !option.children.some(child => child.value === selectedOption.value))];
+    }
+    else {
+      const newChildren = [...option.children.filter(childOption => !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value))];
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];
+    }
+  }
+  handleChildOptionClick(option, wasSelected) {
+    if (wasSelected) {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];
+    }
+    else {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];
     }
-    // 4. Reflect changes in the listOfOptions state
-    this.listOfOptions = this.listOfOptions.map(opt => {
-      if (opt.value === option.value) {
-        return Object.assign(Object.assign({}, opt), { selected: !wasSelected });
-      }
-      else if (opt.children) {
-        const isParentSelected = this.persistentSelectedOptions.includes(opt);
-        opt.children = opt.children.map(child => {
-          if (child.value === option.value || isParentSelected) {
-            return Object.assign(Object.assign({}, child), { selected: true });
-          }
-          return child;
-        });
-        return Object.assign(Object.assign({}, opt), { children: opt.children });
-      }
-      return opt;
-    });
-    // 5. Update the selected status in persistentSelectedOptions
-    this.persistentSelectedOptions = this.persistentSelectedOptions.map(pOpt => {
-      const matchingOption = this.listOfOptions.find(loOpt => loOpt.value === pOpt.value) || this.listOfOptions.flatMap(loOpt => loOpt.children || []).find(child => child.value === pOpt.value);
-      if (matchingOption) {
-        return Object.assign(Object.assign({}, pOpt), { selected: matchingOption.selected });
-      }
-      return pOpt;
-    });
-    // 6. Emit persistentSelectedOptions without duplicated children
-    const emittedOptions = this.persistentSelectedOptions.map(pOpt => {
-      // If this option is a child, check if its parent is in persistentSelectedOptions
-      const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));
-      if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {
-        // If it's a child and its parent is also selected, ensure it's set to selected: true
-        return Object.assign(Object.assign({}, pOpt), { selected: true });
-      }
-      return pOpt;
-    }).filter(pOpt => {
-      // After ensuring the children are selected, now filter out the children whose parents are also in the persistentSelectedOptions
-      const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));
-      if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {
-        return false; // Exclude this child since its parent is already selected
-      }
-      return true;
-    });
-    this.ifxSelect.emit(emittedOptions);
   }
   getSizeClass() {
     return `${this.size}` === "s"
@@ -276,7 +241,6 @@ const Multiselect = class {
   }
   clearSelection() {
     this.persistentSelectedOptions = [];
-    this.listOfOptions = this.listOfOptions.map(option => (Object.assign(Object.assign({}, option), { selected: false })));
     this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing
   }
   positionDropdown() {
@@ -337,12 +301,17 @@ const Multiselect = class {
   }
   renderOption(option, index$1) {
     var _a;
-    const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    const isIndeterminate = this.isOptionIndeterminate(option);
+    const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
     const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
     const uniqueId = `checkbox-${option.value}-${index$1}`; // Generate a unique ID using the index
-    const isIndeterminate = this.isOptionIndeterminate(option);
     return (index.h("div", null, index.h("div", { class: `option ${isSelected ? 'selected' : ''} 
-        ${this.getSizeClass()}`, "data-value": option.value, onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0", role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "treeitem" : "option"}` }, index.h("ifx-checkbox", { id: uniqueId, size: "s", value: isSelected, indeterminate: isIndeterminate, disabled: disableCheckbox }), index.h("label", { htmlFor: uniqueId }, option.label)), option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index$1}-${childIndex}`))));
+        ${this.getSizeClass()}`, "data-value": option.value, onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0", role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "treeitem" : "option"}` }, index.h("ifx-checkbox", { id: uniqueId, size: "s", value: isIndeterminate ? false : isSelected, indeterminate: isIndeterminate, disabled: disableCheckbox }), index.h("label", { htmlFor: uniqueId }, option.label)), option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index$1}-${childIndex}`))));
+  }
+  isOptionSelected(option) {
+    if (!option.children)
+      return false;
+    return option.children.every(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value));
   }
   isOptionIndeterminate(option) {
     if (!option.children)
@@ -373,7 +342,16 @@ const Multiselect = class {
   }
   render() {
     // Create a label for the selected options
-    const selectedOptionsLabels = this.persistentSelectedOptions.map(option => option.label).join(', ');
+    const selectedOptionsLabels = this.persistentSelectedOptions
+      .filter(option => {
+      // check if option is a child and its parent is selected
+      const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption => parentOption.children &&
+        parentOption.children.some(child => child.value === option.value) &&
+        parentOption.selected);
+      return !isChildSelectedWithParent;
+    })
+      .map(option => option.label)
+      .join(', ');
     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()} 

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

@@ -1 +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@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} size=\"s\" 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} 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.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}
+{"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((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}