@infineon/infineon-design-system-stencil 36.1.1--canary.1935.4c802385604f5b96d3f68ddec57be22228530228.0 → 37.0.0--canary.1926.fb96c7ae3f791f0a522da4d207e38965cf9cb62b.0

package/dist/components/p-a9d3e6d2.js

@@ -0,0 +1,599 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
+import { d as defineCustomElement$3 } from './p-186dacc8.js';
+import { d as defineCustomElement$2 } from './p-bb4de57d.js';
+import { d as defineCustomElement$1 } from './p-38396fe7.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 = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ifxSelect = createEvent(this, "ifxSelect", 7);
+        this.ifxOpen = createEvent(this, "ifxOpen", 7);
+        this.internals = this.attachInternals();
+        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 (h("div", { class: "select-all-wrapper" }, 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 (h("div", { class: "ifx-multiselect-no-results" }, h("div", { class: "no-results-content" }, 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 (h("div", { class: `ifx-multiselect-container`, ref: el => this.dropdownElement = el }, this.label ?
+            h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label)) : null, 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) }, h("div", { class: `ifx-multiselect-input
+          ${hasSelections ? '' : 'placeholder'}
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, hasSelections ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu" }, (this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (h("div", { class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (h("div", { class: "ifx-multiselect-dropdown-search" }, 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) }))), h("div", { class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (h("div", { class: "expand-collapse-controls" }, 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), 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)))))), h("div", { class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, h("slot", null), this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()))), h("div", { class: 'ifx-multiselect-icon-container' }, this.persistentSelectedOptions.length > 0 && (h("div", { class: `ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`, onClick: this.disabled ? undefined : () => this.clearSelection() }, h("ifx-icon", { icon: "cRemove16" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevron-up-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+            h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.internalErrorMessage)) : null));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "error": ["updateInternalError"],
+        "errorMessage": ["updateInternalErrorMessage"],
+        "persistentSelectedOptions": ["onSelectionChange"]
+    }; }
+    static get style() { return IfxMultiselectStyle0; }
+}, [65, "ifx-multiselect", {
+        "name": [1],
+        "disabled": [4],
+        "error": [4],
+        "errorMessage": [1, "error-message"],
+        "label": [1],
+        "placeholder": [1],
+        "showSearch": [4, "show-search"],
+        "showSelectAll": [4, "show-select-all"],
+        "showClearButton": [4, "show-clear-button"],
+        "showExpandCollapse": [4, "show-expand-collapse"],
+        "noResultsMessage": [1, "no-results-message"],
+        "showNoResultsMessage": [4, "show-no-results-message"],
+        "searchPlaceholder": [1, "search-placeholder"],
+        "selectAllLabel": [1, "select-all-label"],
+        "expandLabel": [1, "expand-label"],
+        "collapseLabel": [1, "collapse-label"],
+        "ariaMultiSelectLabel": [1, "aria-multi-select-label"],
+        "ariaMultiSelectLabelledBy": [1, "aria-multi-select-labelled-by"],
+        "ariaMultiSelectDescribedBy": [1, "aria-multi-select-described-by"],
+        "ariaSearchLabel": [1, "aria-search-label"],
+        "ariaClearLabel": [1, "aria-clear-label"],
+        "ariaToggleLabel": [1, "aria-toggle-label"],
+        "ariaSelectAllLabel": [1, "aria-select-all-label"],
+        "ariaExpandAllLabel": [1, "aria-expand-all-label"],
+        "ariaCollapseAllLabel": [1, "aria-collapse-all-label"],
+        "internalError": [32],
+        "internalErrorMessage": [32],
+        "persistentSelectedOptions": [32],
+        "dropdownOpen": [32],
+        "dropdownFlipped": [32],
+        "searchTerm": [32],
+        "clearSelection": [64]
+    }, undefined, {
+        "error": ["updateInternalError"],
+        "errorMessage": ["updateInternalErrorMessage"],
+        "persistentSelectedOptions": ["onSelectionChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-multiselect", "ifx-checkbox", "ifx-icon", "ifx-search-field"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-multiselect":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Multiselect);
+            }
+            break;
+        case "ifx-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ifx-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ifx-search-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Multiselect as M, defineCustomElement as d };
+
+//# sourceMappingURL=p-a9d3e6d2.js.map