'use strict';

var index = require('./index-pX0sBY0-.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: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: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.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.placeholder:not(.disabled){color:#8D8786}.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:0px 6px 9px 0px rgba(29, 29, 29, 0.1);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}.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);
        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;
    /** 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 = "";
    /** Fired when an option is selected in the multi-select. */
    ifxSelect;
    /** Fired when the multi-select dropdown is opened. */
    ifxOpen;
    get el() { return index.getElement(this); }
    dropdownElement;
    internals;
    parseChildOptions() {
        const options = [];
        const childElements = Array.from(this.el.children);
        childElements.forEach((child, index) => {
            if (child.tagName === "IFX-MULTISELECT-OPTION") {
                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.el.querySelectorAll("ifx-multiselect-option");
            allOptions.forEach((option) => {
                const searchEvent = new CustomEvent("ifx-search-filter", {
                    detail: { searchTerm, isActive: isSearchActive },
                });
                option.dispatchEvent(searchEvent);
            });
            if (isSearchActive) {
                setTimeout(() => {
                    const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
                    let visibleCount = 0;
                    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 {
                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 allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        const selectedLeafOptions = [];
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance && instance.selected && !instance.hasChildren) {
                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 allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        const optionsByDepth = Array.from(allOptionElements)
            .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);
    }
    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() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance && instance.hasChildren) {
                instance.isExpanded = false;
            }
        });
    }
    expandAll() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance && instance.hasChildren) {
                instance.isExpanded = true;
            }
        });
    }
    selectAll() {
        this.resetSearch();
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.forEach((optionEl) => {
            const instance = optionEl["__stencil_instance"];
            if (instance) {
                if (instance.hasChildren) {
                    instance.isExpanded = true;
                }
                else {
                    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() {
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        allOptionElements.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.el.querySelectorAll("ifx-multiselect-option");
        allOptions.forEach((option) => {
            const searchEvent = new CustomEvent("ifx-search-filter", {
                detail: { searchTerm: "", isActive: false },
            });
            option.dispatchEvent(searchEvent);
        });
    }
    handleWrapperClick(event) {
        this.positionDropdown();
        if (event.currentTarget === event.target) {
            this.toggleDropdown();
        }
    }
    handleKeyDown(event) {
        if (this.disabled)
            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 allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        const leafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren);
        const selectedLeafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren && el.selected);
        const allSelected = leafOptions.length > 0 &&
            selectedLeafOptions.length === leafOptions.length;
        const toggleSelectAll = (event) => {
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }
            if (allSelected) {
                this.clearSelection();
            }
            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))));
    }
    render() {
        const selectedOptionsLabels = this.persistentSelectedOptions
            .map((option) => option.label || option.value)
            .join(", ");
        const hasSelections = this.persistentSelectedOptions.length > 0;
        let isFlatMultiselect = false;
        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
        if (allOptionElements.length > 0) {
            isFlatMultiselect = Array.from(allOptionElements).every((option) => option.children.length === 0);
        }
        return (index.h("div", { key: '258172a344ea0f479359a4e80e022b7b81950a28', class: `ifx-multiselect-container ${this.disabled && !this.error ? "disabled" : ""}`, ref: (el) => (this.dropdownElement = el) }, index.h("div", { key: '065b087c09f6424a063895639adc82cf72ae00c7', class: "ifx-label-wrapper" }, this.label && (index.h("span", { key: '6db8e6ff79607bbce9cad49ba50ff61e60173317', class: "wrapper-label" }, index.h("span", { key: '6486a0337b0837a36b8499797a95201f19937aff' }, this.label), this.required && (index.h("span", { key: 'fb41ec49e8d68edaf5be051d7267682a2d6a1d72', class: `required ${this.error ? "error" : ""}` }, "*"))))), index.h("div", { key: '5b8b27c51ea2796e5084e857bc4a88ca8bee4cb6', class: `ifx-multiselect-wrapper
        ${this.dropdownOpen ? "active" : ""}
        ${this.dropdownFlipped ? "is-flipped" : ""}
        ${this.internalError ? "error" : ""}
        ${this.disabled && !this.error ? "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.disabled && !this.error, tabindex: "0", onClick: this.disabled && !this.error
                ? undefined
                : (event) => this.handleWrapperClick(event), onKeyDown: this.disabled && !this.error
                ? undefined
                : (event) => this.handleKeyDown(event) }, index.h("div", { key: 'b5b25b24a5387e41c6d2a356a244ed59d17a831b', class: `ifx-multiselect-input
          ${hasSelections ? "" : "placeholder"}
          `, onClick: this.disabled && !this.error
                ? undefined
                : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { key: '28e3221cab012596cca71bf8a96d56f6a6847646', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch ||
            this.showSelectAll ||
            (this.showExpandCollapse && !isFlatMultiselect)) && (index.h("div", { key: '605a29e48e377cdf822739a3e8216d18eff3aa25', class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (index.h("div", { key: 'd46691fc65127d8a8d8907e5eabec749dc4f9223', class: "ifx-multiselect-dropdown-search" }, index.h("ifx-search-field", { key: '575aabf48bef795dc904e80df3863a88b1a1a5ee', 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: '0fe64dabead2ca09367ec1ec4649cafc8fe962b1', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (index.h("div", { key: '4dda66112d1143d41369ce5b5254e6b55e5a0da1', class: "expand-collapse-controls" }, index.h("span", { key: 'd056ba7de28cd23647e22a09d186d140e62a7068', 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: 'e428c124e2af4bd345df91baf214975bf1a00020', 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: '1cbb77f9e0db92b454c9f348c879286e180c5985', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, index.h("slot", { key: '01790a65dab978803dca0212ae5fa936dd7cb403' }), this.searchTerm &&
            this.showNoResultsMessage &&
            this.renderNoResultsMessage()))), index.h("div", { key: '4fa9a945adb9d5a2cb9e575ced107ac4d8ece901', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { key: '3081c9f3d7443f1b8f9edafbba75eaffad01d8f2', class: `ifx-clear-button ${!this.showClearButton ? "hide" : ""}`, onClick: this.disabled && !this.error
                ? undefined
                : () => this.clearSelection() }, index.h("ifx-icon", { key: '81c968b7bf53074ca75ef01b7adfdb19d6a9c2f6', icon: "cRemove16" }))), index.h("div", { key: '9884607133d21512838d9201f56378c553874dc8', 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: '0aa8cf362ad2b6f538e9c518492ef180e6d982d4', 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: '44db8cc1faf7d99fec44deae0c83e737730abbf8', class: `multi__select-caption ${this.error ? "error" : ""} ${this.disabled && !this.error ? "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-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;
    componentWillLoad() {
        this.hasChildren = this.el.children.length > 0;
        this.depth = this.calculateDepth();
        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);
    }
    disconnectedCallback() {
        this.el.removeEventListener("ifx-search-filter", this.handleSearchFilter);
    }
    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.disabled || (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.disabled || (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() {
        this.isExpanded = !this.isExpanded;
    }
    handleCheckboxClick = (event) => {
        if (this.disabled || (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.disabled && !(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() {
        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: '3148c13ed7a20b676cd06e1d0e88bb7e01ede6e8' }, index.h("div", { key: '61dcabe3ec618db053a4564a8f20a6e5ede115b2', class: {
                option: true,
                "option--has-children": this.hasChildren,
                "option--expanded": this.isExpanded,
                "option--disabled": this.disabled,
                "option--selected": this.selected,
            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? "true" : "false") : undefined, "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", "data-level": this.depth, "data-value": this.value }, index.h("div", { key: '1a165db1dfcfbaad04c01304deb1d75b9edafd4c', class: "option-item", style: optionItemStyle }, index.h("div", { key: 'ea9c7618675fb8a80e89908b044b226f2b850df6', 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: 'a50d4091c8f5ff700dfc1b6110f8bc3ce160e6c4', class: `chevron ${this.isExpanded ? "chevron--expanded" : "chevron--collapsed"}`, icon: "chevron-right-16" }))), index.h("div", { key: 'c32acd1d8a79d1a7fd43228d753164bcc7701be0', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: 'e848393ff61ce88e414a35ad1628ee0b5f84dd45', 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: this.disabled ||
                (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    e.stopPropagation();
                    this.handleCheckboxClick(e);
                }
            } })), index.h("div", { key: '8447d7bdbbe6f2fc912228ce5b82006776548191', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: '174ec0c6ef42436b883f78f32df11ca7f5bfa61d' }))), this.isExpanded && (index.h("div", { key: 'd92160f37ee38f239d203c89e92e652a571ab9cb', class: "option-children" }, index.h("slot", { key: '90373c7acfa749d0022ce441db81ad41affe22a6', name: "children" }))))));
    }
};
MultiselectOption.style = multiselectOptionCss();

exports.ifx_multiselect = Multiselect;
exports.ifx_multiselect_option = MultiselectOption;
