@infineon/infineon-design-system-stencil 36.0.0--canary.1926.3384b08beedd4bd0bf0894c709a0e3eb8096602d.0 → 36.0.0

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

@@ -1,929 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7f4df11a.js');
-
-const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{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.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;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;border:1px solid #EEEDED;background-color:#fff;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-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:0.875rem;line-height:1.25rem}.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:12px;padding-bottom:12px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}";
-const IfxMultiselectStyle0 = multiselectCss;
-
-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;
-        }
-        this.disabled = false;
-        this.error = false;
-        this.errorMessage = "Error";
-        this.label = "";
-        this.placeholder = "";
-        this.showSearch = true;
-        this.showSelectAll = true;
-        this.showClearButton = true;
-        this.showExpandCollapse = true;
-        this.noResultsMessage = "No results found.";
-        this.showNoResultsMessage = true;
-        this.searchPlaceholder = "Search";
-        this.selectAllLabel = "Select all";
-        this.expandLabel = "Expand";
-        this.collapseLabel = "Collapse";
-        this.ariaMultiSelectLabel = "Multi-select dropdown";
-        this.ariaMultiSelectLabelledBy = "";
-        this.ariaMultiSelectDescribedBy = "";
-        this.ariaSearchLabel = "Search options";
-        this.ariaClearLabel = "Clear all selections";
-        this.ariaToggleLabel = "Toggle dropdown";
-        this.ariaSelectAllLabel = "Select all options";
-        this.ariaExpandAllLabel = "Expand all categories";
-        this.ariaCollapseAllLabel = "Collapse all categories";
-        this.internalError = false;
-        this.persistentSelectedOptions = [];
-        this.dropdownOpen = false;
-        this.searchTerm = '';
-        this.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);
-        this.pendingSelectionUpdate = false;
-        this.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);
-            }
-        };
-    }
-    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;
-        this.internalErrorMessage = this.errorMessage;
-        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;
-    }
-    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() {
-        var _a;
-        const wrapperRect = (_a = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')) === null || _a === void 0 ? void 0 : _a.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;
-        }
-    }
-    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
-                });
-            }
-        });
-        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;
-        }
-    }
-    componentDidLoad() {
-        setTimeout(() => {
-            this.positionDropdown();
-        }, 500);
-        this.el.addEventListener('ifx-option-changed', () => {
-            if (!this.pendingSelectionUpdate) {
-                this.pendingSelectionUpdate = true;
-                requestAnimationFrame(() => {
-                    this.updateSlotBasedSelections(true);
-                    setTimeout(() => {
-                        this.pendingSelectionUpdate = false;
-                    }, 0);
-                });
-            }
-        });
-        setTimeout(() => {
-            this.updateSlotBasedSelections(false);
-            this.updateInitialParentStates();
-        }, 100);
-    }
-    componentWillLoad() {
-        this.loadInitialOptions();
-    }
-    updateInternalError() {
-        this.internalError = this.error;
-    }
-    updateInternalErrorMessage() {
-        this.internalErrorMessage = this.errorMessage;
-    }
-    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);
-    }
-    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);
-    }
-    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() {
-        var _a;
-        const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');
-        if (firstOption) {
-            const labelElement = (_a = firstOption.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.option-label');
-            labelElement === null || labelElement === void 0 ? void 0 : 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) => {
-            var _a;
-            const optionElement = this.el.querySelector(`ifx-multiselect-option[value="${option.value}"]`);
-            return ((_a = optionElement === null || optionElement === void 0 ? void 0 : optionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || 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", { class: `ifx-multiselect-container`, ref: el => this.dropdownElement = el }, this.label ?
-            index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label)) : null, index.h("div", { class: `ifx-multiselect-wrapper
-        ${this.dropdownOpen ? 'active' : ''}
-        ${this.dropdownFlipped ? 'is-flipped' : ''}
-        ${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.disabled, tabindex: "0", onClick: this.disabled ? undefined : (event) => this.handleWrapperClick(event), onKeyDown: this.disabled ? undefined : (event) => this.handleKeyDown(event) }, index.h("div", { class: `ifx-multiselect-input
-          ${hasSelections ? '' : 'placeholder'}
-          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { class: "ifx-multiselect-dropdown-menu" }, (this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (index.h("div", { class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (index.h("div", { class: "ifx-multiselect-dropdown-search" }, index.h("ifx-search-field", { 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", { class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (index.h("div", { class: "expand-collapse-controls" }, index.h("span", { 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", { 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", { class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, index.h("slot", null), this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()))), index.h("div", { class: 'ifx-multiselect-icon-container' }, this.persistentSelectedOptions.length > 0 && (index.h("div", { class: `ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`, onClick: this.disabled ? undefined : () => this.clearSelection() }, index.h("ifx-icon", { icon: "cRemove16" }))), index.h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevron-up-16' })), index.h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
-            index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.internalErrorMessage)) : null));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "error": ["updateInternalError"],
-        "errorMessage": ["updateInternalErrorMessage"],
-        "persistentSelectedOptions": ["onSelectionChange"]
-    }; }
-};
-Multiselect.style = IfxMultiselectStyle0;
-
-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 IfxMultiselectOptionStyle0 = multiselectOptionCss;
-
-const MultiselectOption = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.selected = false;
-        this.disabled = false;
-        this.indeterminate = false;
-        this.isExpanded = false;
-        this.hasChildren = false;
-        this.depth = 0;
-        this.searchTerm = '';
-        this.isSearchActive = false;
-        this.isSearchDisabled = false;
-        this.handleSearchFilter = (event) => {
-            const { searchTerm, isActive } = event.detail;
-            this.searchTerm = searchTerm.toLowerCase();
-            this.isSearchActive = isActive;
-            requestAnimationFrame(() => {
-                this.updateSearchClasses();
-            });
-        };
-        this.handleCheckboxClick = (event) => {
-            if (this.disabled || (this.isSearchActive && this.isSearchDisabled))
-                return;
-            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();
-        };
-        this.handleHeaderClick = (event) => {
-            event.stopPropagation();
-            if (!this.disabled && !(this.isSearchActive && this.isSearchDisabled)) {
-                this.handleClick(event);
-            }
-        };
-    }
-    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);
-    }
-    updateSearchClasses() {
-        var _a;
-        const optionDiv = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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() {
-        var _a;
-        if (!this.searchTerm)
-            return;
-        const labelElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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() {
-        var _a;
-        const labelElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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 => {
-            var _a;
-            if (node.nodeType === Node.TEXT_NODE) {
-                text += ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.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) => {
-            var _a;
-            const childInstance = child['__stencil_instance'];
-            if (childInstance) {
-                childInstance.selected = selected;
-                childInstance.indeterminate = false;
-                if (childInstance.hasChildren) {
-                    childInstance.isExpanded = selected;
-                    childInstance.selectAllChildren(selected);
-                }
-                (_a = childInstance.notifyMultiselect) === null || _a === void 0 ? void 0 : _a.call(childInstance);
-            }
-        });
-    }
-    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() {
-        var _a;
-        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;
-            }
-            (_a = parentInstance.notifyMultiselect) === null || _a === void 0 ? void 0 : _a.call(parentInstance);
-            parent = parent.parentElement;
-        }
-    }
-    toggleExpansion() {
-        this.isExpanded = !this.isExpanded;
-    }
-    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;
-        let totalPadding = basePadding + additionalPadding;
-        const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };
-        return (index.h(index.Host, { key: 'f836f58884e2e57c4c5fb4953f10d5ff4a34c8da' }, index.h("div", { key: '9eca6e87bb3c21512a051596b1e92931b707e88f', 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: '41d24ef38470f5f7f8aa36daa33b339b7d8079f3', class: "option-item", style: optionItemStyle }, index.h("div", { key: '27d33336e7d15ccce1703429b70494fe86808214', 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: '68e975b49b4aa9edf564b80644c5a55809185629', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), index.h("div", { key: 'f651aefe4cc30db6056331ffaafd8e6ea17039fc', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: 'e8cb2c7a75921a81e0321ff22718d9373cb6f437', 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: '4f626380753927d4bedca0f78643e6647eff6356', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: '8207d9f952bff231fda0bf0be43e1c567aa6a6da' }))), this.isExpanded && index.h("div", { key: '930d611f27451ff393d1403386bb6cd6b4a54980', class: "option-children" }, index.h("slot", { key: '269eb6381257f82b74b888188646559e6881a9d9', name: "children" })))));
-    }
-    get el() { return index.getElement(this); }
-};
-MultiselectOption.style = IfxMultiselectOptionStyle0;
-
-exports.ifx_multiselect = Multiselect;
-exports.ifx_multiselect_option = MultiselectOption;
-
-//# sourceMappingURL=ifx-multiselect_2.cjs.entry.js.map