@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,1151 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const multiselectCss = () => `.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.disabled .ifx-label-wrapper{color:#bfbbbb}.ifx-multiselect-container.disabled .ifx-multiselect-wrapper{background:#bfbbbb;color:#ffffff;border-color:#bfbbbb;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container.readOnly{cursor:text}.ifx-multiselect-container.readOnly .ifx-multiselect-wrapper{border:none;border-bottom:1px solid #bfbbbb;border-radius:1px;pointer-events:none;padding-left:0}.ifx-multiselect-container.readOnly .ifx-multiselect-wrapper .ifx-clear-button{display:none}.ifx-multiselect-container.readOnly .ifx-multiselect-wrapper .icon-wrapper-down,.ifx-multiselect-container.readOnly .ifx-multiselect-wrapper .icon-wrapper-up{color:#bfbbbb}.ifx-multiselect-container:not(.readOnly):not(.disabled):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-label-wrapper .required{margin-left:4px}.ifx-multiselect-container .ifx-label-wrapper .required.error{color:#cd002f}.ifx-multiselect-container .multi__select-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1d1d1d;flex:none;order:1;align-self:stretch;flex-grow:0}.ifx-multiselect-container .multi__select-caption.error{color:#cd002f}.ifx-multiselect-container .multi__select-caption.disabled{color:#bfbbbb}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#ffffff;box-sizing:border-box;display:flex;align-items:center;border:1px solid #8d8786;border-radius:1px;width:100%;font-weight:400;font-style:normal;height:40px;line-height:24px;padding:4px 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.error{border-color:#cd002f}.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.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;position:relative;white-space:normal;overflow:hidden;text-overflow:clip}.ifx-multiselect-container .ifx-multiselect-input.placeholder:not(.disabled){color:#8d8786}.ifx-multiselect-container .ifx-multiselect-measurement{position:absolute;top:0;left:0;display:flex;flex-wrap:nowrap;width:max-content;height:0;visibility:hidden;pointer-events:none;white-space:nowrap}.ifx-multiselect-container .ifx-multiselect-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;max-width:100%;padding:4px 8px;border:3px solid #0a8276;border-radius:9999px;background-color:#ffffff;color:#0a8276;font:400 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family);font-size:var(--ifx-font-size-xs);font-style:normal;font-weight:var(--ifx-font-weight-regular);line-height:var(--ifx-line-height-xs);letter-spacing:var(--ifx-letter-spacing-default);height:28px}.ifx-multiselect-container .ifx-multiselect-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ifx-multiselect-container .ifx-multiselect-chip-remove{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.ifx-multiselect-container .ifx-multiselect-chip-remove svg{width:12px;height:12px}.ifx-multiselect-container .ifx-multiselect-chip-remove:hover{color:#08665c}.ifx-multiselect-container .ifx-multiselect-chip-remove:focus-visible{outline:2px solid #0a8276;outline-offset:1px;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-indicator{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;width:23px;height:22px;padding:0;border-radius:50%;background-color:#0a8276;color:#ffffff;text-align:center;font-feature-settings:"liga" off, "clig" off;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:16px;}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container{display:flex}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper{display:flex;align-items:center;transition:transform 0.2s ease-in-out}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open{transform:rotate(180deg)}.ifx-multiselect-container .ifx-clear-button{display:flex;align-items:center}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;padding-bottom:8px;border:1px solid #eeeded;background-color:#ffffff;box-shadow:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-multiselect-container:not(.disabled) .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-dropdown-functions{padding:12px 16px;border-bottom:1px solid #eeeded;flex-shrink:0}.ifx-multiselect-dropdown-search{margin-bottom:12px}.ifx-multiselect-dropdown-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.ifx-multiselect-dropdown-controls .select-all-wrapper{display:flex;flex:1 1 auto;min-width:0}.ifx-multiselect-dropdown-controls .select-all-wrapper ifx-checkbox{width:100%}.ifx-multiselect-dropdown-controls .expand-collapse-controls{display:flex;gap:12px}.ifx-multiselect-dropdown-controls .control-item{font-size:16px;line-height:24px}.ifx-multiselect-dropdown-controls .control-item:hover{color:#0a8276}.ifx-multiselect-dropdown-controls .control-item:active{color:#08665c}.ifx-multiselect-dropdown-controls .control-item:focus{outline:none}.ifx-multiselect-dropdown-controls .control-item:focus-visible{outline:2px solid #0a8276;outline-offset:2px;border-radius:1px}.ifx-multiselect-options{flex:1;overflow-y:auto;padding-top:8px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}`;
+
+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.ifxOpen = index.createEvent(this, "ifxOpen", 7);
+        this.ifxClear = index.createEvent(this, "ifxClear", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    /** Name of the multi-select field (used in forms). */
+    name;
+    /** If true, the multi-select is disabled and not interactive. */
+    disabled = false;
+    /** If true, the multi-select is read-only. */
+    readOnly = false;
+    /** Whether at least one option must be selected. */
+    required = false;
+    /** If true, shows the multi-select in an error state. */
+    error = false;
+    /** Helper text shown below the multi-select. */
+    caption = "";
+    /** Label shown above the multi-select. */
+    label = "";
+    /** Placeholder text shown when nothing is selected. */
+    placeholder = "";
+    /** If true, shows a search box inside the dropdown. */
+    showSearch = true;
+    /** If true, shows a “Select all” option. */
+    showSelectAll = true;
+    /** If true, shows a button to clear all selections. */
+    showClearButton = true;
+    /** If true, shows expand/collapse controls for nested options. */
+    showExpandCollapse = true;
+    /** Message shown when no search results are found. */
+    noResultsMessage = "No results found.";
+    /** If true, displays the “no results” message when nothing matches. */
+    showNoResultsMessage = true;
+    /** Placeholder text for the search input. */
+    searchPlaceholder = "Search";
+    /** Label text for the “Select all” option. */
+    selectAllLabel = "Select all";
+    /** Label text for the “Expand all” action. */
+    expandLabel = "Expand";
+    /** Label text for the “Collapse all” action. */
+    collapseLabel = "Collapse";
+    /** ARIA label for the multi-select dropdown. */
+    ariaMultiSelectLabel = "Multi-select dropdown";
+    /** ID of element that labels the multi-select (aria-labelledby). */
+    ariaMultiSelectLabelledBy = "";
+    /** ID of element that describes the multi-select (aria-describedby). */
+    ariaMultiSelectDescribedBy = "";
+    /** ARIA label for the search input inside the dropdown. */
+    ariaSearchLabel = "Search options";
+    /** ARIA label for the “Clear all” button. */
+    ariaClearLabel = "Clear all selections";
+    /** ARIA label for the dropdown toggle button. */
+    ariaToggleLabel = "Toggle dropdown";
+    /** ARIA label for the “Select all options” control. */
+    ariaSelectAllLabel = "Select all options";
+    /** ARIA label for the “Expand all categories” control. */
+    ariaExpandAllLabel = "Expand all categories";
+    /** ARIA label for the “Collapse all categories” control. */
+    ariaCollapseAllLabel = "Collapse all categories";
+    internalError = false;
+    persistentSelectedOptions = [];
+    dropdownOpen = false;
+    dropdownFlipped;
+    searchTerm = "";
+    visibleSelectedCount = 0;
+    /** Fired when an option is selected in the multi-select. */
+    ifxSelect;
+    /** Fired when the multi-select dropdown is opened. */
+    ifxOpen;
+    /**
+     * Fired before selections are cleared.
+     * Call `event.preventDefault()` to cancel clearing.
+     */
+    ifxClear;
+    get el() { return index.getElement(this); }
+    dropdownElement;
+    resizeObserver;
+    measurementScheduled = false;
+    internals;
+    getAllOptionElements() {
+        return Array.from(this.el.querySelectorAll("ifx-multiselect-option"));
+    }
+    getGroupElements() {
+        return Array.from(this.el.querySelectorAll("ifx-multiselect-group"));
+    }
+    isOptionVisible(option) {
+        return !option.shadowRoot?.querySelector(".option")?.classList.contains("search-hidden");
+    }
+    updateGroupVisibility(searchActive) {
+        this.getGroupElements().forEach((group) => {
+            const hasVisibleOption = Array.from(group.querySelectorAll("ifx-multiselect-option")).some((option) => this.isOptionVisible(option));
+            if (searchActive && !hasVisibleOption) {
+                group.classList.add("empty-group");
+            }
+            else {
+                group.classList.remove("empty-group");
+            }
+        });
+    }
+    getRootOptionElements() {
+        return Array.from(this.el.children).flatMap((child) => {
+            if (child.tagName === "IFX-MULTISELECT-OPTION") {
+                return [child];
+            }
+            if (child.tagName === "IFX-MULTISELECT-GROUP") {
+                return Array.from(child.children).filter((groupChild) => groupChild.tagName === "IFX-MULTISELECT-OPTION");
+            }
+            return [];
+        });
+    }
+    getLeafOptionElements() {
+        return this.getAllOptionElements().filter((option) => option.children.length === 0);
+    }
+    getEnabledLeafOptionElements() {
+        return this.getLeafOptionElements().filter((option) => !option.disabled && !option.closest("ifx-multiselect-group")?.disabled);
+    }
+    parseChildOptions() {
+        const options = [];
+        const childElements = this.getRootOptionElements();
+        childElements.forEach((child, index) => {
+            const option = this.parseOptionElement(child, index);
+            if (option) {
+                options.push(option);
+            }
+        });
+        return options;
+    }
+    parseOptionElement(element, index) {
+        const value = element.getAttribute("value") || `option-${index}`;
+        const selected = element.hasAttribute("selected");
+        const disabled = element.hasAttribute("disabled");
+        const indeterminate = element.hasAttribute("indeterminate");
+        const option = {
+            value,
+            selected,
+            disabled,
+            indeterminate,
+        };
+        const nestedOptions = Array.from(element.children)
+            .filter((child) => child.tagName === "IFX-MULTISELECT-OPTION")
+            .map((child, childIndex) => this.parseOptionElement(child, childIndex))
+            .filter((opt) => opt !== null);
+        if (nestedOptions.length > 0) {
+            option.children = nestedOptions;
+        }
+        return option;
+    }
+    loadInitialOptions() {
+        this.internalError = this.error;
+        const allOptions = this.parseChildOptions();
+        const initiallySelected = this.collectSelectedOptions(allOptions);
+        const initiallySelectedNotInState = initiallySelected.filter((init) => !this.persistentSelectedOptions.some((opt) => opt.value == init.value));
+        this.persistentSelectedOptions = [
+            ...this.persistentSelectedOptions,
+            ...initiallySelectedNotInState,
+        ];
+    }
+    collectSelectedOptions(options) {
+        let selectedOptions = [];
+        for (const option of options) {
+            if (option.selected) {
+                if (option.children && option.children.length > 0) {
+                    selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));
+                }
+                else {
+                    if (!selectedOptions.some((existingOption) => existingOption.value === option.value)) {
+                        selectedOptions.push(option);
+                    }
+                }
+            }
+            else {
+                if (option.children && option.children.length > 0) {
+                    selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));
+                }
+            }
+        }
+        return selectedOptions;
+    }
+    collectLeafOptions(children) {
+        let leafOptions = [];
+        for (const child of children) {
+            if (child.children && child.children.length > 0) {
+                leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));
+            }
+            else {
+                leafOptions.push(child);
+            }
+        }
+        return leafOptions;
+    }
+    handleSearch = debounce((targetElement) => {
+        const searchTerm = targetElement.value.toLowerCase();
+        const isSearchActive = searchTerm !== "";
+        this.searchTerm = searchTerm;
+        const wrapper = this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");
+        if (wrapper) {
+            if (isSearchActive) {
+                wrapper.classList.remove("active");
+            }
+            else {
+                const searchField = this.el.shadowRoot.querySelector("ifx-search-field");
+                const searchFieldHasFocus = searchField && searchField.matches(":focus-within");
+                if (!searchFieldHasFocus) {
+                    wrapper.classList.add("active");
+                }
+            }
+        }
+        const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
+        if (optionsContainer) {
+            if (isSearchActive) {
+                optionsContainer.classList.add("has-search-filter");
+            }
+            else {
+                optionsContainer.classList.remove("has-search-filter");
+            }
+        }
+        requestAnimationFrame(() => {
+            const allOptions = this.getAllOptionElements();
+            allOptions.forEach((option) => {
+                const searchEvent = new CustomEvent("ifx-search-filter", {
+                    detail: { searchTerm, isActive: isSearchActive },
+                });
+                option.dispatchEvent(searchEvent);
+            });
+            if (isSearchActive) {
+                setTimeout(() => {
+                    const allOptions = this.getAllOptionElements();
+                    let visibleCount = 0;
+                    this.updateGroupVisibility(true);
+                    allOptions.forEach((option) => {
+                        const style = window.getComputedStyle(option);
+                        const rect = option.getBoundingClientRect();
+                        if (style.display !== "none" &&
+                            style.visibility !== "hidden" &&
+                            style.opacity !== "0" &&
+                            rect.height > 0) {
+                            visibleCount++;
+                        }
+                    });
+                    const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
+                    if (optionsContainer) {
+                        if (visibleCount === 0) {
+                            optionsContainer.classList.add("show-no-results");
+                        }
+                        else {
+                            optionsContainer.classList.remove("show-no-results");
+                        }
+                    }
+                }, 200);
+            }
+            else {
+                this.updateGroupVisibility(false);
+                const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
+                if (optionsContainer) {
+                    optionsContainer.classList.remove("show-no-results");
+                }
+            }
+        });
+    }, 150);
+    handleSearchFocus(hasFocus) {
+        const wrapper = this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");
+        if (wrapper) {
+            if (hasFocus || this.searchTerm !== "") {
+                wrapper.classList.remove("active");
+            }
+            else {
+                wrapper.classList.add("active");
+            }
+        }
+    }
+    positionDropdown() {
+        const wrapperRect = this.el.shadowRoot
+            .querySelector(".ifx-multiselect-wrapper")
+            ?.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) ||
+            wrapperRect.bottom > window.innerHeight) {
+            this.dropdownFlipped = true;
+        }
+        else {
+            this.dropdownFlipped = false;
+        }
+    }
+    //private pendingSelectionUpdate = false;
+    updateSlotBasedSelections(emitEvent = false) {
+        const selectedLeafOptions = [];
+        this.getLeafOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance?.selected) {
+                selectedLeafOptions.push({
+                    value: instance.value,
+                    selected: true,
+                    disabled: instance.disabled,
+                    label: instance.getTextContent() || instance.value,
+                });
+            }
+        });
+        this.persistentSelectedOptions = selectedLeafOptions;
+        if (emitEvent) {
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }
+    }
+    updateInitialParentStates() {
+        const optionsByDepth = this.getAllOptionElements()
+            .map((el) => ({
+            element: el,
+            instance: el["__stencil_instance"],
+            depth: parseInt(el.getAttribute("data-level") || "0"),
+        }))
+            .filter((item) => item.instance)
+            .sort((a, b) => b.depth - a.depth);
+        optionsByDepth.forEach(({ instance }) => {
+            if (instance.hasChildren) {
+                this.updateParentState(instance);
+            }
+        });
+    }
+    updateParentState(parentInstance) {
+        const directChildren = Array.from(parentInstance.el.children)
+            .filter((child) => child.tagName === "IFX-MULTISELECT-OPTION")
+            .map((child) => child["__stencil_instance"])
+            .filter((instance) => instance !== null);
+        const selectedCount = directChildren.filter((child) => child.selected).length;
+        const indeterminateCount = directChildren.filter((child) => child.indeterminate).length;
+        const totalCount = directChildren.length;
+        if (selectedCount === totalCount && indeterminateCount === 0) {
+            parentInstance.selected = true;
+            parentInstance.indeterminate = false;
+        }
+        else if (selectedCount === 0 && indeterminateCount === 0) {
+            parentInstance.selected = false;
+            parentInstance.indeterminate = false;
+        }
+        else {
+            parentInstance.selected = false;
+            parentInstance.indeterminate = true;
+        }
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-multiselect", await framework);
+        }
+        setTimeout(() => {
+            this.positionDropdown();
+        }, 500);
+        this.el.addEventListener("ifx-option-changed", (event) => {
+            const optionInstance = event.target?.__stencil_instance;
+            if (optionInstance && !optionInstance.hasChildren) {
+                this.updateSlotBasedSelections(true);
+            }
+        });
+        setTimeout(() => {
+            this.updateSlotBasedSelections(false);
+            this.updateInitialParentStates();
+        }, 100);
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleSelectedOptionsMeasurement());
+            const input = this.el.shadowRoot?.querySelector(".ifx-multiselect-input");
+            if (input) {
+                this.resizeObserver.observe(input);
+            }
+        }
+    }
+    componentDidRender() {
+        this.scheduleSelectedOptionsMeasurement();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    componentWillLoad() {
+        this.loadInitialOptions();
+    }
+    updateInternalError() {
+        this.internalError = this.error;
+    }
+    onSelectionChange(newValue, _) {
+        const formData = new FormData();
+        newValue.forEach((option) => formData.append(this.name, option.value));
+        //this.internals.setFormValue(formData);
+    }
+    collapseAll() {
+        this.getAllOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance && instance.hasChildren) {
+                instance.isExpanded = false;
+            }
+        });
+    }
+    expandAll() {
+        this.getAllOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance && instance.hasChildren) {
+                instance.isExpanded = true;
+            }
+        });
+    }
+    selectAll() {
+        this.resetSearch();
+        this.expandAll();
+        this.getEnabledLeafOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance) {
+                instance.selected = true;
+            }
+        });
+        setTimeout(() => {
+            this.updateInitialParentStates();
+            this.updateSlotBasedSelections(false);
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }, 0);
+    }
+    /** Clears all selected options in the multi-select and resets their state. */
+    async clearSelection() {
+        this.getAllOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance) {
+                instance.selected = false;
+                instance.indeterminate = false;
+                if (instance.hasChildren) {
+                    instance.isExpanded = false;
+                }
+            }
+        });
+        this.persistentSelectedOptions = [];
+        setTimeout(() => {
+            this.updateSlotBasedSelections(false);
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }, 0);
+    }
+    handleDocumentClick = (event) => {
+        const path = event.composedPath();
+        if (!path.includes(this.dropdownElement)) {
+            this.dropdownOpen = false;
+            document.removeEventListener("click", this.handleDocumentClick);
+            this.resetSearch();
+            this.ifxOpen.emit(this.dropdownOpen);
+        }
+    };
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+        setTimeout(() => {
+            if (this.dropdownOpen) {
+                document.addEventListener("click", this.handleDocumentClick);
+            }
+            else {
+                this.resetSearch();
+            }
+            this.ifxOpen.emit(this.dropdownOpen);
+        }, 0);
+    }
+    resetSearch() {
+        this.searchTerm = "";
+        const searchField = this.el.shadowRoot.querySelector("ifx-search-field");
+        if (searchField) {
+            searchField.value = "";
+        }
+        const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
+        if (optionsContainer) {
+            optionsContainer.classList.remove("has-search-filter");
+        }
+        const allOptions = this.getAllOptionElements();
+        allOptions.forEach((option) => {
+            const searchEvent = new CustomEvent("ifx-search-filter", {
+                detail: { searchTerm: "", isActive: false },
+            });
+            option.dispatchEvent(searchEvent);
+        });
+        this.updateGroupVisibility(false);
+    }
+    clearEnabledSelection() {
+        this.getEnabledLeafOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance) {
+                instance.selected = false;
+                instance.indeterminate = false;
+            }
+        });
+        setTimeout(() => {
+            this.updateInitialParentStates();
+            this.updateSlotBasedSelections(false);
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }, 0);
+    }
+    handleWrapperClick(event) {
+        this.positionDropdown();
+        if (event.currentTarget === event.target) {
+            this.toggleDropdown();
+        }
+    }
+    handleClearButtonClick = (event) => {
+        event.stopPropagation();
+        const clearEvent = this.ifxClear.emit();
+        if (!clearEvent.defaultPrevented) {
+            this.clearSelection();
+        }
+    };
+    handleKeyDown(event) {
+        if (this.readOnly || (this.disabled && !this.error))
+            return;
+        // If dropdown is closed, only allow opening
+        if (!this.dropdownOpen) {
+            switch (event.code) {
+                case "Enter":
+                case "Space":
+                case "ArrowDown":
+                    event.preventDefault();
+                    this.toggleDropdown();
+                    break;
+            }
+            return;
+        }
+        // Dropdown is open - handle navigation and controls
+        switch (event.code) {
+            case "Escape":
+                event.preventDefault();
+                this.toggleDropdown();
+                break;
+            case "Enter":
+            case "Space": {
+                // Don't close dropdown when pressing space/enter in controls area
+                const target = event.target;
+                if (!target.closest(".ifx-multiselect-dropdown-functions")) {
+                    event.preventDefault();
+                    this.toggleDropdown();
+                }
+                break;
+            }
+            case "ArrowDown":
+            case "ArrowUp":
+                // Focus first/last option for navigation
+                event.preventDefault();
+                this.focusFirstOption();
+                break;
+        }
+    }
+    focusFirstOption() {
+        const firstOption = this.el.querySelector("ifx-multiselect-option:not(.search-hidden)");
+        if (firstOption) {
+            const labelElement = firstOption.shadowRoot?.querySelector(".option-label");
+            labelElement?.focus();
+        }
+    }
+    renderSelectAll() {
+        const enabledLeafOptions = this.getEnabledLeafOptionElements();
+        const allSelected = enabledLeafOptions.length > 0 &&
+            enabledLeafOptions.every((option) => option.selected);
+        const toggleSelectAll = (event) => {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            if (allSelected) {
+                this.clearEnabledSelection();
+            }
+            else {
+                this.selectAll();
+            }
+        };
+        return (index.h("div", { class: "select-all-wrapper" }, index.h("ifx-checkbox", { id: "selectAll", checked: allSelected, size: "s", "aria-label": this.ariaSelectAllLabel, onClick: toggleSelectAll, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleSelectAll(e);
+                }
+            } }, this.selectAllLabel)));
+    }
+    renderNoResultsMessage() {
+        return (index.h("div", { class: "ifx-multiselect-no-results" }, index.h("div", { class: "no-results-content" }, index.h("span", { class: "no-results-text" }, this.noResultsMessage))));
+    }
+    removeSelection(optionToRemove, event) {
+        event.stopPropagation();
+        const optionElement = Array.from(this.el.querySelectorAll("ifx-multiselect-option")).find((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            return instance && instance.value === optionToRemove.value;
+        });
+        if (optionElement?.["__stencil_instance"]) {
+            optionElement["__stencil_instance"].selected = false;
+        }
+        this.persistentSelectedOptions = this.persistentSelectedOptions.filter((option) => option.value !== optionToRemove.value);
+        this.updateInitialParentStates();
+        this.ifxSelect.emit(this.persistentSelectedOptions);
+    }
+    measureSelectedOptions() {
+        const input = this.el.shadowRoot?.querySelector(".ifx-multiselect-input");
+        const measurement = this.el.shadowRoot?.querySelector(".ifx-multiselect-measurement");
+        if (!input || !measurement || this.persistentSelectedOptions.length === 0) {
+            if (this.visibleSelectedCount !== 0) {
+                this.visibleSelectedCount = 0;
+            }
+            return;
+        }
+        const measuredChips = Array.from(measurement.querySelectorAll(".ifx-multiselect-chip"));
+        const measuredIndicators = Array.from(measurement.querySelectorAll(".ifx-multiselect-indicator"));
+        const gap = Number.parseFloat(getComputedStyle(input).columnGap) || 0;
+        const availableWidth = input.clientWidth;
+        let visibleCount = 0;
+        for (let count = measuredChips.length; count >= 0; count -= 1) {
+            const chipsWidth = measuredChips
+                .slice(0, count)
+                .reduce((total, chip) => total + chip.offsetWidth, 0);
+            const hiddenCount = measuredChips.length - count;
+            const indicator = hiddenCount > 0 ? measuredIndicators[hiddenCount - 1] : null;
+            const indicatorWidth = indicator?.offsetWidth || 0;
+            const itemCount = count + (indicator ? 1 : 0);
+            const contentWidth = chipsWidth + indicatorWidth + Math.max(0, itemCount - 1) * gap;
+            if (contentWidth <= availableWidth) {
+                visibleCount = count;
+                break;
+            }
+        }
+        if (this.visibleSelectedCount !== visibleCount) {
+            this.visibleSelectedCount = visibleCount;
+        }
+    }
+    scheduleSelectedOptionsMeasurement = () => {
+        if (this.measurementScheduled)
+            return;
+        this.measurementScheduled = true;
+        requestAnimationFrame(() => {
+            this.measurementScheduled = false;
+            this.measureSelectedOptions();
+        });
+    };
+    renderSelectedOptions() {
+        const visibleOptions = this.persistentSelectedOptions.slice(0, this.visibleSelectedCount);
+        const hiddenOptionsCount = this.persistentSelectedOptions.length - visibleOptions.length;
+        return [
+            ...visibleOptions.map((option) => {
+                const label = option.label || option.value;
+                return (index.h("span", { class: "ifx-multiselect-chip", key: option.value }, index.h("span", { class: "ifx-multiselect-chip-label" }, label), index.h("button", { type: "button", class: "ifx-multiselect-chip-remove", "aria-label": `Remove ${label}`, onClick: (event) => this.removeSelection(option, event) }, index.h("ifx-icon", { icon: "cross16" }))));
+            }),
+            hiddenOptionsCount > 0 && (index.h("span", { class: "ifx-multiselect-indicator", "aria-label": `+${hiddenOptionsCount} more selections` }, "+", hiddenOptionsCount)),
+        ];
+    }
+    renderSelectedOptionsMeasurement() {
+        return (index.h("div", { class: "ifx-multiselect-measurement", "aria-hidden": "true" }, this.persistentSelectedOptions.map((option) => {
+            const label = option.label || option.value;
+            return (index.h("span", { class: "ifx-multiselect-chip", key: option.value }, index.h("span", { class: "ifx-multiselect-chip-label" }, label), index.h("span", { class: "ifx-multiselect-chip-remove" }, index.h("ifx-icon", { icon: "cross16" }))));
+        }), this.persistentSelectedOptions.map((_, index$1) => {
+            const hiddenCount = index$1 + 1;
+            return (index.h("span", { class: "ifx-multiselect-indicator", key: `indicator-${hiddenCount}` }, "+", hiddenCount));
+        })));
+    }
+    render() {
+        const hasSelections = this.persistentSelectedOptions.length > 0;
+        let isFlatMultiselect = false;
+        const allOptionElements = this.getAllOptionElements();
+        if (allOptionElements.length > 0) {
+            isFlatMultiselect = allOptionElements.every((option) => option.children.length === 0);
+        }
+        return (index.h("div", { key: 'f00d2b7e9ecd303b8157454814a4955e0c1b8804', class: `ifx-multiselect-container ${this.readOnly ? 'readOnly' : this.internalError ? '' : this.disabled ? 'disabled' : ''}`, ref: (el) => (this.dropdownElement = el) }, index.h("div", { key: '68fb0fff7b906e3a14e4fef4def1f0aab8f3f26c', class: "ifx-label-wrapper" }, this.label && (index.h("span", { key: '1c3308f3259da195e08d7cea3728779fdcf72b5b', class: "wrapper-label" }, index.h("span", { key: 'faec02d87d7ea4e9c6c8d00c9a76897b897ff943' }, this.label), this.required && (index.h("span", { key: 'c7c0e4d7a90caf2dbf0594867798fc418ffa10be', class: `required ${!this.readOnly && this.internalError ? "error" : ""}` }, "*"))))), index.h("div", { key: '5e2c61ef32fb0be706c34f6103f0a939924e0582', class: `ifx-multiselect-wrapper
+        ${this.dropdownOpen ? "active" : ""}
+        ${this.dropdownFlipped ? "is-flipped" : ""}
+        ${this.readOnly ? "" : this.internalError ? "error" : this.disabled ? "disabled" : ""}`, role: "combobox", "aria-label": this.ariaMultiSelectLabel, "aria-labelledby": this.ariaMultiSelectLabelledBy || undefined, "aria-describedby": this.ariaMultiSelectDescribedBy || undefined, "aria-expanded": this.dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": !this.readOnly && !this.internalError && this.disabled, tabindex: "0", onClick: (this.disabled && !this.internalError) || this.readOnly
+                ? undefined
+                : (event) => this.handleWrapperClick(event), onKeyDown: (this.disabled && !this.internalError) || this.readOnly
+                ? undefined
+                : (event) => this.handleKeyDown(event) }, index.h("div", { key: 'f3ab373237d09c9ba8ba91c03aeee930241520e4', class: `ifx-multiselect-input
+		  chips
+          ${hasSelections ? "" : "placeholder"}
+          `, onClick: (this.disabled && !this.internalError) || this.readOnly
+                ? undefined
+                : () => this.toggleDropdown() }, hasSelections ? this.renderSelectedOptions() : this.placeholder, hasSelections && this.renderSelectedOptionsMeasurement()), this.dropdownOpen && (index.h("div", { key: '3e064ef34d322d364c1e031460f8fa8425bc9f2c', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch ||
+            this.showSelectAll ||
+            (this.showExpandCollapse && !isFlatMultiselect)) && (index.h("div", { key: '84b394b195e48cc39590fdb52b3b50c0b1cec8c7', class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (index.h("div", { key: '5ecdcb7dc23620caf47f50b2828775db6935c3d7', class: "ifx-multiselect-dropdown-search" }, index.h("ifx-search-field", { key: 'dc332a3f15602212f5efc500f0ae076b0cf0c166', class: "search-input", placeholder: this.searchPlaceholder, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => {
+                e.stopPropagation();
+            }, onIfxInput: (event) => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), index.h("div", { key: 'd5dccbcfbe1be89373d2c7839573d905103c6d88', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (index.h("div", { key: 'b89d3f9a8a089e58d15b8149cbf9e8640e6307f8', class: "expand-collapse-controls" }, index.h("span", { key: '5d918ce00151723c3d7cc45250205f621f596be0', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaExpandAllLabel, onClick: (e) => {
+                e.stopPropagation();
+                this.expandAll();
+            }, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.expandAll();
+                }
+            } }, this.expandLabel), index.h("span", { key: 'a0c9a7b8bf4dabf29a79b3c3d3ba653861bb06d0', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaCollapseAllLabel, onClick: (e) => {
+                e.stopPropagation();
+                this.collapseAll();
+            }, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.collapseAll();
+                }
+            } }, this.collapseLabel)))))), index.h("div", { key: 'b9e28964bbee62c48a38dbfc9c72ecf879f9863f', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, index.h("slot", { key: 'e347376045f5800c04073db370a2575b50807e12' }), this.searchTerm &&
+            this.showNoResultsMessage &&
+            this.renderNoResultsMessage()))), index.h("div", { key: '6e2412a22366f4739c1d39693ca6492b5992a8bd', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { key: '26a3cef975753ceeb09b5a4abf1479e71c21a776', class: `ifx-clear-button ${!this.showClearButton ? "hide" : ""}`, onClick: this.disabled && !this.error
+                ? undefined
+                : this.handleClearButtonClick }, index.h("ifx-icon", { key: 'b50d22e9a70915140ac1321202ce284c80ffd909', icon: "cRemove16" }))), index.h("div", { key: '251c57c1daa52ef57570232f35de5a2e70feaa42', class: "icon-wrapper-up", onClick: this.disabled && !this.error
+                ? undefined
+                : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: '21523ec6ccc4cc84e6d9b15881f8e7dbf45df1ea', class: "icon-wrapper-down", onClick: this.disabled && !this.error
+                ? undefined
+                : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && (index.h("div", { key: '067c7c9fab1188e7475caf946f9030f977862f35', class: `multi__select-caption ${this.readOnly ? "" : this.internalError ? "error" : this.disabled ? "disabled" : ""}` }, this.caption))));
+    }
+    static get watchers() { return {
+        "error": [{
+                "updateInternalError": 0
+            }],
+        "persistentSelectedOptions": [{
+                "onSelectionChange": 0
+            }]
+    }; }
+};
+Multiselect.style = multiselectCss();
+
+const multiselectOptionCss = () => `:host{display:block;width:100%}.option{display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none}.option.option--expanded{position:relative}.option.option--has-children{position:relative}.option.option--has-children .option-item>.chevron-wrapper{display:flex}.option--disabled{cursor:not-allowed;pointer-events:none;color:#bfbbbb}.option.search-hidden{display:none !important}.option.search-match .option-item .option-label .search-highlight{font-weight:bold}.option-item{display:flex;flex-direction:row;align-items:center;white-space:nowrap;min-height:20px;padding:4px 16px;background-color:#ffffff;transition:background-color 0.2s ease-in-out}.option-item:hover{background-color:#f7f7f7}.option--disabled .option-item:hover{background-color:transparent}.option-children{display:block}.chevron-wrapper{display:none;align-items:center;justify-content:center;margin-right:8px;width:20px;height:20px;flex-shrink:0}.chevron-wrapper:focus{outline:none}.chevron-wrapper:focus-visible{outline:2px solid #0a8276;outline-offset:2px;border-radius:1px}.option--has-children .chevron-wrapper{display:flex}.chevron-wrapper .chevron{transition:transform 0.2s ease-in-out;color:#3c3a39}.chevron-wrapper .chevron.chevron--expanded{transform:rotate(90deg)}.chevron-wrapper .chevron.chevron--collapsed{transform:rotate(0deg)}.checkbox-wrapper{display:flex;align-items:center;margin-right:8px;flex-shrink:0}.option-label{flex-grow:1;display:flex;align-items:center;cursor:pointer;padding:2px 0;font-family:var(--ifx-font-family);font-size:0.875rem}.option-label:focus{outline:none}.option-label:focus-visible{outline:2px solid #0a8276;outline-offset:2px;border-radius:1px}.option--disabled .option-label{cursor:not-allowed;color:#bfbbbb}`;
+
+const MultiselectOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Value associated with this tree item (used for selection and events). */
+    value;
+    /** Whether this tree item is currently selected. */
+    selected = false;
+    /** Whether this tree item is disabled and not interactive. */
+    disabled = false;
+    /** Whether this tree item is in an indeterminate (partially selected) state. */
+    indeterminate = false;
+    isExpanded = false;
+    hasChildren = false;
+    depth = 0;
+    searchTerm = "";
+    isSearchActive = false;
+    isSearchDisabled = false;
+    disabledByGroup = false;
+    componentWillLoad() {
+        this.hasChildren = this.el.children.length > 0;
+        this.depth = this.calculateDepth();
+        this.disabledByGroup = this.el.closest("ifx-multiselect-group")?.disabled ?? false;
+        this.el.setAttribute("data-level", this.depth.toString());
+        if (this.hasChildren) {
+            const hasSelectedChildren = this.hasAnySelectedChildren();
+            if (hasSelectedChildren) {
+                this.isExpanded = true;
+            }
+        }
+    }
+    componentDidLoad() {
+        this.el['__stencil_instance'] = this;
+        this.notifyMultiselect();
+        this.el.addEventListener('ifx-search-filter', this.handleSearchFilter);
+        this.el.addEventListener('ifx-group-disabled-change', this.handleGroupDisabledChange);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifx-search-filter", this.handleSearchFilter);
+        this.el.removeEventListener("ifx-group-disabled-change", this.handleGroupDisabledChange);
+    }
+    handleGroupDisabledChange = (event) => {
+        this.disabledByGroup = event.detail.disabled;
+    };
+    isEffectivelyDisabled() {
+        return this.disabled || this.disabledByGroup;
+    }
+    handleSearchFilter = (event) => {
+        const { searchTerm, isActive } = event.detail;
+        this.searchTerm = searchTerm.toLowerCase();
+        this.isSearchActive = isActive;
+        requestAnimationFrame(() => {
+            this.updateSearchClasses();
+        });
+    };
+    updateSearchClasses() {
+        const optionDiv = this.el.shadowRoot?.querySelector(".option");
+        if (!optionDiv)
+            return;
+        if (!this.isSearchActive) {
+            optionDiv.classList.remove("search-hidden", "search-parent", "search-match");
+            this.removeHighlighting();
+            this.isSearchDisabled = false;
+            return;
+        }
+        const textContent = this.getTextContent().toLowerCase();
+        const matchesSearch = textContent.includes(this.searchTerm);
+        const hasMatchingParent = this.hasMatchingParent();
+        requestAnimationFrame(() => {
+            const hasMatchingChildren = this.hasMatchingChildren();
+            optionDiv.classList.remove("search-hidden", "search-parent", "search-match");
+            this.isSearchDisabled = false;
+            if (matchesSearch && !this.hasChildren) {
+                optionDiv.classList.add("search-match");
+                this.highlightSearchTerm();
+            }
+            else if (matchesSearch && this.hasChildren) {
+                optionDiv.classList.add("search-match");
+                this.highlightSearchTerm();
+                this.isExpanded = true;
+            }
+            else if (!matchesSearch && this.hasChildren && hasMatchingChildren) {
+                optionDiv.classList.add("search-parent");
+                this.removeHighlighting();
+                this.isExpanded = true;
+                this.isSearchDisabled = true;
+            }
+            else if (hasMatchingParent) {
+                optionDiv.classList.add("search-match");
+                this.removeHighlighting();
+            }
+            else {
+                optionDiv.classList.add("search-hidden");
+                this.removeHighlighting();
+            }
+        });
+    }
+    highlightSearchTerm() {
+        if (!this.searchTerm)
+            return;
+        const labelElement = this.el.shadowRoot?.querySelector(".option-label");
+        if (!labelElement)
+            return;
+        const slotElement = labelElement.querySelector("slot");
+        if (!slotElement)
+            return;
+        this.removeHighlighting();
+        const originalText = this.getTextContent();
+        const searchTermLower = this.searchTerm.toLowerCase();
+        const originalTextLower = originalText.toLowerCase();
+        if (!originalTextLower.includes(searchTermLower))
+            return;
+        const searchIndex = originalTextLower.indexOf(searchTermLower);
+        if (searchIndex === -1)
+            return;
+        const beforeMatch = originalText.substring(0, searchIndex);
+        const matchText = originalText.substring(searchIndex, searchIndex + searchTermLower.length);
+        const afterMatch = originalText.substring(searchIndex + searchTermLower.length);
+        const highlightedContent = document.createElement("span");
+        highlightedContent.className = "highlighted-text";
+        if (beforeMatch) {
+            highlightedContent.appendChild(document.createTextNode(beforeMatch));
+        }
+        const boldElement = document.createElement("strong");
+        boldElement.className = "search-highlight";
+        boldElement.textContent = matchText;
+        highlightedContent.appendChild(boldElement);
+        if (afterMatch) {
+            highlightedContent.appendChild(document.createTextNode(afterMatch));
+        }
+        labelElement.setAttribute("data-original-content", "true");
+        slotElement.style.display = "none";
+        labelElement.appendChild(highlightedContent);
+    }
+    removeHighlighting() {
+        const labelElement = this.el.shadowRoot?.querySelector(".option-label");
+        if (!labelElement)
+            return;
+        const slotElement = labelElement.querySelector("slot");
+        const highlightedElement = labelElement.querySelector(".highlighted-text");
+        if (highlightedElement) {
+            labelElement.removeChild(highlightedElement);
+        }
+        if (slotElement) {
+            slotElement.style.display = "";
+        }
+        labelElement.removeAttribute("data-original-content");
+    }
+    getTextContent() {
+        let text = "";
+        Array.from(this.el.childNodes).forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                text += node.textContent?.trim() || "";
+            }
+        });
+        return text || this.value || "";
+    }
+    hasMatchingChildren() {
+        if (!this.hasChildren)
+            return false;
+        const childOptions = Array.from(this.el.children).filter((child) => child.tagName === "IFX-MULTISELECT-OPTION");
+        return childOptions.some((child) => {
+            const childInstance = child["__stencil_instance"];
+            if (!childInstance)
+                return false;
+            const childText = childInstance.getTextContent().toLowerCase();
+            const childMatches = childText.includes(this.searchTerm);
+            const grandChildrenMatch = childInstance.hasMatchingChildren();
+            return childMatches || grandChildrenMatch;
+        });
+    }
+    hasMatchingParent() {
+        let parent = this.el.parentElement;
+        while (parent && parent.tagName === "IFX-MULTISELECT-OPTION") {
+            const parentInstance = parent["__stencil_instance"];
+            if (parentInstance) {
+                const parentText = parentInstance.getTextContent().toLowerCase();
+                if (parentText.includes(this.searchTerm)) {
+                    return true;
+                }
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    calculateDepth() {
+        let depth = 0;
+        let parent = this.el.parentElement;
+        while (parent && parent.tagName !== "IFX-MULTISELECT") {
+            if (parent.tagName === "IFX-MULTISELECT-OPTION") {
+                depth++;
+            }
+            parent = parent.parentElement;
+        }
+        return depth;
+    }
+    handleClick(event) {
+        if (this.isEffectivelyDisabled() || (this.isSearchActive && this.isSearchDisabled))
+            return;
+        event.stopPropagation();
+        if (event.type === "click" &&
+            event.target.closest(".chevron-wrapper")) {
+            this.toggleExpansion();
+            return;
+        }
+        let newSelectedState;
+        if (this.indeterminate) {
+            newSelectedState = true;
+        }
+        else {
+            newSelectedState = !this.selected;
+        }
+        this.selected = newSelectedState;
+        this.indeterminate = false;
+        if (this.hasChildren) {
+            this.isExpanded = newSelectedState;
+            requestAnimationFrame(() => {
+                this.selectAllChildren(newSelectedState);
+                this.expandAllChildren(newSelectedState);
+            });
+        }
+        this.updateParentStates();
+        this.notifyMultiselect();
+    }
+    handleKeyDown(event) {
+        if (this.isEffectivelyDisabled() || (this.isSearchActive && this.isSearchDisabled))
+            return;
+        const target = event.target;
+        if (target.closest(".chevron-wrapper") ||
+            target.closest(".checkbox-wrapper")) {
+            return;
+        }
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+            event.stopPropagation();
+        }
+        if (event.key === "ArrowRight" && this.hasChildren) {
+            this.isExpanded = true;
+        }
+        if (event.key === "ArrowLeft" && this.hasChildren) {
+            this.isExpanded = false;
+        }
+    }
+    notifyMultiselect() {
+        const updateEvent = new CustomEvent("ifx-option-changed", {
+            bubbles: true,
+            detail: {
+                value: this.value,
+                selected: this.selected,
+                indeterminate: this.indeterminate,
+            },
+        });
+        this.el.dispatchEvent(updateEvent);
+    }
+    selectAllChildren(selected) {
+        const directChildren = Array.from(this.el.children).filter((child) => child.tagName === "IFX-MULTISELECT-OPTION");
+        directChildren.forEach((child) => {
+            const childInstance = child["__stencil_instance"];
+            if (childInstance) {
+                childInstance.selected = selected;
+                childInstance.indeterminate = false;
+                if (childInstance.hasChildren) {
+                    childInstance.isExpanded = selected;
+                    childInstance.selectAllChildren(selected);
+                }
+                childInstance.notifyMultiselect?.();
+            }
+        });
+    }
+    expandAllChildren(expanded) {
+        const directChildren = Array.from(this.el.children).filter((child) => child.tagName === "IFX-MULTISELECT-OPTION");
+        directChildren.forEach((child) => {
+            const childInstance = child["__stencil_instance"];
+            if (childInstance && childInstance.hasChildren) {
+                childInstance.isExpanded = expanded;
+                childInstance.expandAllChildren(expanded);
+            }
+        });
+    }
+    updateParentStates() {
+        let parent = this.el.parentElement;
+        while (parent && parent.tagName === "IFX-MULTISELECT-OPTION") {
+            const parentInstance = parent["__stencil_instance"];
+            if (!parentInstance) {
+                parent = parent.parentElement;
+                continue;
+            }
+            const siblings = Array.from(parent.children)
+                .filter((child) => child.tagName === "IFX-MULTISELECT-OPTION")
+                .map((child) => child["__stencil_instance"])
+                .filter((instance) => instance !== null);
+            const selectedCount = siblings.filter((sibling) => sibling.selected).length;
+            const indeterminateCount = siblings.filter((sibling) => sibling.indeterminate).length;
+            const totalCount = siblings.length;
+            if (selectedCount === totalCount && indeterminateCount === 0) {
+                parentInstance.selected = true;
+                parentInstance.indeterminate = false;
+            }
+            else if (selectedCount === 0 && indeterminateCount === 0) {
+                parentInstance.selected = false;
+                parentInstance.indeterminate = false;
+            }
+            else {
+                parentInstance.selected = false;
+                parentInstance.indeterminate = true;
+            }
+            parentInstance.notifyMultiselect?.();
+            parent = parent.parentElement;
+        }
+    }
+    toggleExpansion() {
+        if (this.isEffectivelyDisabled())
+            return;
+        this.isExpanded = !this.isExpanded;
+    }
+    handleCheckboxClick = (event) => {
+        if (this.isEffectivelyDisabled() || (this.isSearchActive && this.isSearchDisabled))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        let newSelectedState;
+        if (this.indeterminate) {
+            newSelectedState = true;
+        }
+        else {
+            newSelectedState = !this.selected;
+        }
+        this.selected = newSelectedState;
+        this.indeterminate = false;
+        if (this.hasChildren) {
+            this.isExpanded = newSelectedState;
+            requestAnimationFrame(() => {
+                this.selectAllChildren(newSelectedState);
+                this.expandAllChildren(newSelectedState);
+            });
+        }
+        this.updateParentStates();
+        this.notifyMultiselect();
+    };
+    handleHeaderClick = (event) => {
+        event.stopPropagation();
+        if (!this.isEffectivelyDisabled() && !(this.isSearchActive && this.isSearchDisabled)) {
+            this.handleClick(event);
+        }
+    };
+    hasAnySelectedChildren() {
+        const childOptions = Array.from(this.el.children).filter((child) => child.tagName === "IFX-MULTISELECT-OPTION");
+        return childOptions.some((child) => {
+            const hasSelected = child.hasAttribute("selected");
+            const hasSelectedDescendants = this.checkForSelectedDescendants(child);
+            return hasSelected || hasSelectedDescendants;
+        });
+    }
+    checkForSelectedDescendants(element) {
+        const nestedOptions = Array.from(element.children).filter((child) => child.tagName === "IFX-MULTISELECT-OPTION");
+        return nestedOptions.some((nestedChild) => {
+            const isSelected = nestedChild.hasAttribute("selected");
+            const hasSelectedNested = this.checkForSelectedDescendants(nestedChild);
+            return isSelected || hasSelectedNested;
+        });
+    }
+    render() {
+        const effectivelyDisabled = this.isEffectivelyDisabled();
+        let isFlatMultiselect = false;
+        const parentMultiselect = this.el.closest("ifx-multiselect");
+        if (parentMultiselect) {
+            const allOptions = Array.from(parentMultiselect.querySelectorAll("ifx-multiselect-option"));
+            isFlatMultiselect = allOptions.every((option) => option.children.length === 0);
+        }
+        const basePadding = this.depth * 28 + 16;
+        const additionalPadding = this.hasChildren ? 0 : 28;
+        const totalPadding = basePadding + additionalPadding;
+        const optionItemStyle = isFlatMultiselect
+            ? undefined
+            : { paddingLeft: `${totalPadding}px` };
+        return (index.h(index.Host, { key: 'd97998a025be93ca514e4c01ad94e8ec33b9e6cf' }, index.h("div", { key: '83841ccf6375f1475f4d8f298a4e3736eeadb01a', class: {
+                option: true,
+                "option--has-children": this.hasChildren,
+                "option--expanded": this.isExpanded,
+                "option--disabled": effectivelyDisabled,
+                "option--selected": this.selected,
+            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? "true" : "false") : undefined, "aria-selected": this.selected ? "true" : "false", "aria-disabled": effectivelyDisabled ? "true" : "false", "data-level": this.depth, "data-value": this.value }, index.h("div", { key: 'c3e446129deb0410a7eb24b8098e72378dfcb171', class: "option-item", style: optionItemStyle }, index.h("div", { key: 'ff701e6e5443217ce118a2b744a8ef3e9f02e1d4', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren
+                ? this.isExpanded
+                    ? "Collapse"
+                    : "Expand"
+                : undefined, onClick: (e) => {
+                e.stopPropagation();
+                this.toggleExpansion();
+            }, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.toggleExpansion();
+                }
+            } }, this.hasChildren && (index.h("ifx-icon", { key: '847f43c183b216a5cce7657db1b73d643702f416', class: `chevron ${this.isExpanded ? "chevron--expanded" : "chevron--collapsed"}`, icon: "chevron-right-16" }))), index.h("div", { key: '29f009853223a01858c89af8dde1aa995eb0bd1e', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: 'e9bf9743d8ea7d0e7be879ab9697a5243d1afd8c', size: "s", checked: this.isSearchActive && this.isSearchDisabled
+                ? false
+                : this.indeterminate
+                    ? false
+                    : this.selected, indeterminate: this.isSearchActive && this.isSearchDisabled
+                ? false
+                : this.indeterminate, onClick: this.handleCheckboxClick, disabled: effectivelyDisabled ||
+                (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.handleCheckboxClick(e);
+                }
+            } })), index.h("div", { key: '387bd2749a759b549fe6ad7b2e88787b3d0ab3f6', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: 'ca673834ac84bd0d360a5743fe6278dbb4a00190' }))), this.isExpanded && (index.h("div", { key: '0c9a5e688a83b0f0b2fac2621ec154729c9e74de', class: "option-children" }, index.h("slot", { key: '4bfc5e2b25d1ef7ad27d8462c5aea0380d138396', name: "children" }))))));
+    }
+};
+MultiselectOption.style = multiselectOptionCss();
+
+exports.ifx_multiselect = Multiselect;
+exports.ifx_multiselect_option = MultiselectOption;