@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,574 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const selectCss = () => `.ifx-select-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-select-container.disabled .ifx-label-wrapper{color:#bfbbbb}.ifx-select-container.disabled .ifx-select-wrapper{background:#bfbbbb;color:#ffffff;border-color:#bfbbbb;cursor:default;user-select:none}.ifx-select-container.readOnly{cursor:text}.ifx-select-container.readOnly .ifx-select-wrapper{border:none;border-bottom:1px solid #bfbbbb;pointer-events:none;padding-left:0}.ifx-select-container.readOnly .ifx-select-wrapper .ifx-clear-button{display:none}.ifx-select-container.readOnly .ifx-select-wrapper .icon-wrapper-down,.ifx-select-container.readOnly .ifx-select-wrapper .icon-wrapper-up{color:#bfbbbb}.ifx-select-container:not(.readOnly):not(.disabled):hover{cursor:pointer}.ifx-select-container.small-select .ifx-select-wrapper{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-select-container.medium-select .ifx-select-wrapper{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-select-container.small-select .ifx-select-options{--ifx-select-option-height:32px}.ifx-select-container.medium-select .ifx-select-options{--ifx-select-option-height:40px}.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-label-wrapper .required{margin-left:4px}.ifx-label-wrapper .required.error{color:#cd002f}.single__select-caption{font-weight:400;font-size:0.75rem;line-height:1rem;color:#1d1d1d}.single__select-caption.error{color:#cd002f}.single__select-caption.disabled{color:#bfbbbb}.ifx-select-wrapper{position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;background-color:#ffffff;border:1px solid #8d8786;border-radius:1px;font-weight:400}.ifx-select-wrapper:focus-visible{outline:none}.ifx-select-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-select-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-select-wrapper.error{border-color:#cd002f}.ifx-select-wrapper.active{border-color:#0a8276 !important}.ifx-select-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-wrapper.active .icon-wrapper-down{display:none}.ifx-select-wrapper:not(.disabled):not(.readOnly):hover:not(.active,:focus){border-color:#575352}.ifx-select-wrapper .icon-wrapper-up{display:none}.ifx-select-wrapper .icon-wrapper-up:hover{cursor:pointer}.ifx-select-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-wrapper .icon-wrapper-down:hover{cursor:pointer}.ifx-select-wrapper.is-flipped .ifx-select-dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.ifx-select-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-select-input.placeholder{color:#8d8786}.ifx-select-container.disabled .ifx-select-input.placeholder{color:#ffffff}.ifx-select-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-clear-button{display:flex;align-items:center;cursor:pointer}.ifx-select-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;padding-bottom:8px;border:1px solid #eeeded;background-color:#ffffff;box-shadow:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-select-dropdown-search{padding:12px 16px;border-bottom:1px solid #eeeded;flex-shrink:0}.ifx-select-options{flex:1;overflow-y:auto;padding-top:8px}.ifx-select-options.show-no-results .ifx-select-no-results{display:block}.ifx-select-no-results{padding:8px 16px;color:#8d8786;font-size:0.875rem;display:none}`;
+
+function debounce(func, wait) {
+    let timeout;
+    return (arg) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(arg), wait);
+    };
+}
+const Select = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxSelect = index.createEvent(this, "ifxSelect", 7);
+        this.ifxClear = index.createEvent(this, "ifxClear", 7);
+        this.ifxInput = index.createEvent(this, "ifxInput", 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;
+        }
+    }
+    get el() { return index.getElement(this); }
+    /** Label shown above the select. */
+    label = "";
+    /** Helper text shown below the select. */
+    caption = "";
+    /** Size of the select field: `'s'` (36px) or `'m'` (40px). */
+    size = "m";
+    /** If true, the select is disabled and not interactive. */
+    disabled = false;
+    /** If true, shows the select in an error state. */
+    error = false;
+    /** If true, the select is read-only. */
+    readOnly = false;
+    /** Whether a selection is required (marks the label with `*`). */
+    required = false;
+    /** If false, hides the placeholder text when nothing is selected. */
+    placeholder = true;
+    /** Placeholder text shown when nothing is selected. */
+    placeholderValue = "Placeholder";
+    /** If true, shows a search box inside the dropdown. */
+    showSearch = false;
+    /** Placeholder text for the search input. */
+    searchPlaceholderValue = "Search...";
+    /** If true, shows a button to clear the current selection. */
+    showClearButton = true;
+    /** Name of the select field (used in forms). */
+    name;
+    /** The selected option value (source of truth). */
+    value;
+    /** Message shown when a search yields no results. */
+    noResultsMessage = "No results found.";
+    /** ARIA label for the combobox. */
+    ariaSelectLabel = "Select";
+    /** ARIA label for the search input. */
+    ariaSearchLabel = "Search options";
+    /** ARIA label for the clear button. */
+    ariaClearLabel = "Clear selection";
+    /**
+     * ID of an external element that labels the select (`aria-labelledby`). Takes
+     * precedence over the visible label and `ariaSelectLabel`.
+     */
+    ariaSelectLabelledBy = "";
+    /**
+     * ID of an external element that describes the select (`aria-describedby`). Takes
+     * precedence over the caption.
+     */
+    ariaSelectDescribedBy = "";
+    /**
+     * @deprecated Removed. Provide options as slotted `<ifx-select-option>` children
+     * (optionally grouped with `<ifx-select-group>`) instead of an options array.
+     */
+    options;
+    selectedLabel = "";
+    dropdownOpen = false;
+    dropdownFlipped = false;
+    searchTerm = "";
+    internalError = false;
+    /** Fired when the selection changes. Emits `{ value, label }`, or `null` on clear. */
+    ifxSelect;
+    /**
+     * Fired before the clear control removes the current selection.
+     * Call `event.preventDefault()` to cancel clearing.
+     */
+    ifxClear;
+    /** Fired when the search input value changes. */
+    ifxInput;
+    /** Fired when the dropdown opens (`true`) or closes (`false`). */
+    ifxOpen;
+    internals;
+    dropdownElement;
+    focusedIndex = -1;
+    labelId;
+    captionId;
+    listboxId;
+    componentWillLoad() {
+        this.internalError = this.error;
+        const base = `ifx-select-${Math.random().toString(36).substring(2, 9)}`;
+        this.labelId = `${base}-label`;
+        this.captionId = `${base}-caption`;
+        this.listboxId = `${base}-listbox`;
+        if (this.options !== undefined) {
+            this.warnOptionsDeprecated();
+        }
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-select", await framework);
+        }
+        this.el.addEventListener("ifx-option-changed", this.handleOptionChanged);
+        // Child options upgrade before the parent's componentDidLoad, so reading their
+        // initial `selected` state here is reliable (and catches static markup).
+        this.syncInitialSelection();
+        setTimeout(() => this.positionDropdown(), 500);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifx-option-changed", this.handleOptionChanged);
+        document.removeEventListener("click", this.handleDocumentClick);
+    }
+    updateInternalError() {
+        this.internalError = this.error;
+    }
+    valueChanged() {
+        this.applyValueToOptions();
+    }
+    optionsChanged() {
+        if (this.options !== undefined) {
+            this.warnOptionsDeprecated();
+        }
+    }
+    warnOptionsDeprecated() {
+        console.warn("[ifx-select] The `options` prop was removed. Provide options as slotted <ifx-select-option> children (optionally grouped with <ifx-select-group>). See the migration guide.");
+    }
+    /** Public API — clears the selection. */
+    async clearSelection() {
+        this.value = undefined;
+        this.applyValueToOptions();
+        this.ifxSelect.emit(null);
+    }
+    handleClearButtonClick = (event) => {
+        event.stopPropagation();
+        const clearEvent = this.ifxClear.emit();
+        if (!clearEvent.defaultPrevented) {
+            this.clearSelection();
+        }
+    };
+    /** Public API — returns the currently selected value. */
+    async getValue() {
+        return this.value;
+    }
+    /** Public API — programmatically sets the selected value. */
+    async setValue(value) {
+        this.value = value;
+        this.applyValueToOptions();
+    }
+    /** Public API — opens the dropdown. */
+    async showDropdown() {
+        this.openDropdown();
+    }
+    /** Public API — closes the dropdown. */
+    async hideDropdown() {
+        this.closeDropdown();
+    }
+    getOptionElements() {
+        return Array.from(this.el.querySelectorAll("ifx-select-option"));
+    }
+    handleOptionChanged = (event) => {
+        const { value, reason } = event.detail;
+        if (reason === "selected") {
+            this.commitSelection(value);
+        }
+        else if (reason === "registered") {
+            const optionEl = event.target;
+            if (!this.hasValue() && optionEl.selected) {
+                this.value = value;
+            }
+            this.applyValueToOptions();
+        }
+        else if (reason === "removed" && value === this.value) {
+            this.value = undefined;
+            this.applyValueToOptions();
+        }
+    };
+    syncInitialSelection() {
+        if (!this.hasValue()) {
+            const preselected = this.getOptionElements().find((o) => o.selected);
+            if (preselected) {
+                this.value = preselected.value;
+            }
+        }
+        this.applyValueToOptions();
+    }
+    commitSelection(value) {
+        this.value = value;
+        this.applyValueToOptions();
+        this.closeDropdown();
+        this.ifxSelect.emit({ value: this.value, label: this.selectedLabel });
+        this.focusWrapper();
+    }
+    /** Reflects `value` onto the option elements and derives the display label. */
+    applyValueToOptions() {
+        const hasValue = this.hasValue();
+        let label = "";
+        this.getOptionElements().forEach((opt) => {
+            const isMatch = hasValue && opt.value === this.value;
+            if (opt.selected !== isMatch) {
+                opt.selected = isMatch;
+            }
+            if (isMatch) {
+                label = (opt.textContent || "").trim() || opt.value;
+            }
+        });
+        this.selectedLabel = label;
+        this.internals?.setFormValue?.(hasValue ? this.value : null);
+    }
+    hasValue() {
+        return this.value !== undefined && this.value !== null && this.value !== "";
+    }
+    // --- dropdown open/close ---------------------------------------------------
+    openDropdown() {
+        if ((this.disabled && !this.internalError) || this.readOnly)
+            return;
+        if (this.dropdownOpen)
+            return;
+        this.positionDropdown();
+        this.dropdownOpen = true;
+        this.focusedIndex = -1;
+        setTimeout(() => {
+            document.addEventListener("click", this.handleDocumentClick);
+            this.ifxOpen.emit(true);
+        }, 0);
+    }
+    closeDropdown() {
+        if (!this.dropdownOpen)
+            return;
+        this.dropdownOpen = false;
+        this.focusedIndex = -1;
+        document.removeEventListener("click", this.handleDocumentClick);
+        this.resetSearch();
+        this.ifxOpen.emit(false);
+    }
+    toggleDropdown() {
+        this.dropdownOpen ? this.closeDropdown() : this.openDropdown();
+    }
+    handleDocumentClick = (event) => {
+        if (!event.composedPath().includes(this.dropdownElement)) {
+            this.closeDropdown();
+        }
+    };
+    positionDropdown() {
+        const wrapperRect = this.el.shadowRoot
+            ?.querySelector(".ifx-select-wrapper")
+            ?.getBoundingClientRect();
+        if (!wrapperRect)
+            return;
+        const spaceBelow = window.innerHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        this.dropdownFlipped =
+            (spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) ||
+                wrapperRect.bottom > window.innerHeight;
+    }
+    focusWrapper() {
+        this.el.shadowRoot?.querySelector(".ifx-select-wrapper")?.focus();
+    }
+    // --- search ----------------------------------------------------------------
+    handleSearch = debounce((target) => {
+        const term = (target.value || "").toLowerCase();
+        const active = term !== "";
+        this.searchTerm = term;
+        this.ifxInput.emit(target.value);
+        requestAnimationFrame(() => {
+            this.getOptionElements().forEach((option) => {
+                option.dispatchEvent(new CustomEvent("ifx-search-filter", {
+                    detail: { searchTerm: term, isActive: active },
+                }));
+            });
+            setTimeout(() => this.updateSearchVisibility(active), 200);
+        });
+    }, 150);
+    updateSearchVisibility(active) {
+        // Hide group headers whose options are all filtered out.
+        this.el.querySelectorAll("ifx-select-group").forEach((group) => {
+            const anyVisible = Array.from(group.querySelectorAll("ifx-select-option")).some((o) => this.isOptionVisible(o));
+            group.classList.toggle("group--empty", active && !anyVisible);
+        });
+        const anyVisible = this.getOptionElements().some((o) => this.isOptionVisible(o));
+        const container = this.el.shadowRoot?.querySelector(".ifx-select-options");
+        container?.classList.toggle("show-no-results", active && !anyVisible);
+    }
+    isOptionVisible(option) {
+        const style = window.getComputedStyle(option);
+        return style.display !== "none" && option.getBoundingClientRect().height > 0;
+    }
+    resetSearch() {
+        this.searchTerm = "";
+        const searchField = this.el.shadowRoot?.querySelector("ifx-search-field");
+        if (searchField) {
+            searchField.value = "";
+        }
+        this.el.shadowRoot
+            ?.querySelector(".ifx-select-options")
+            ?.classList.remove("show-no-results");
+        this.el.querySelectorAll("ifx-select-group").forEach((g) => {
+            g.classList.remove("group--empty");
+        });
+        this.getOptionElements().forEach((option) => {
+            option.dispatchEvent(new CustomEvent("ifx-search-filter", {
+                detail: { searchTerm: "", isActive: false },
+            }));
+        });
+    }
+    // --- keyboard navigation (roving focus over options) -----------------------
+    isOptionHidden(option) {
+        return (option.shadowRoot
+            ?.querySelector(".option")
+            ?.classList.contains("search-hidden") ?? false);
+    }
+    getNavigableOptions() {
+        return this.getOptionElements().filter((o) => !o.disabled && !this.isOptionHidden(o));
+    }
+    focusOptionAt(index) {
+        const options = this.getNavigableOptions();
+        if (!options.length)
+            return;
+        this.focusedIndex = Math.max(0, Math.min(index, options.length - 1));
+        options[this.focusedIndex].focus();
+    }
+    handleKeyDown(event) {
+        if (this.readOnly || (this.disabled && !this.internalError))
+            return;
+        if (!this.dropdownOpen) {
+            if (["Enter", " ", "ArrowDown"].includes(event.key)) {
+                event.preventDefault();
+                this.openDropdown();
+                requestAnimationFrame(() => this.focusOptionAt(0));
+            }
+            return;
+        }
+        switch (event.key) {
+            case "Escape":
+                event.preventDefault();
+                this.closeDropdown();
+                this.focusWrapper();
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                this.focusOptionAt(this.focusedIndex + 1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                this.focusOptionAt(this.focusedIndex - 1);
+                break;
+            case "Home":
+                event.preventDefault();
+                this.focusOptionAt(0);
+                break;
+            case "End":
+                event.preventDefault();
+                this.focusOptionAt(this.getNavigableOptions().length - 1);
+                break;
+            case "Tab":
+                this.closeDropdown();
+                break;
+        }
+    }
+    handleWrapperClick(event) {
+        this.positionDropdown();
+        if (event.target === event.currentTarget) {
+            this.toggleDropdown();
+        }
+    }
+    interactionsDisabled() {
+        return (this.disabled && !this.internalError) || this.readOnly;
+    }
+    render() {
+        const disabledClick = this.interactionsDisabled();
+        const stateClass = this.readOnly
+            ? "readOnly"
+            : this.internalError
+                ? "error"
+                : this.disabled
+                    ? "disabled"
+                    : "";
+        const labelledBy = this.ariaSelectLabelledBy || (this.label ? this.labelId : undefined);
+        const describedBy = this.ariaSelectDescribedBy || (this.caption ? this.captionId : undefined);
+        return (index.h("div", { key: 'db51b683eea1118e8968613fe061572be104e6d2', class: `ifx-select-container ${this.size === "s" ? "small-select" : "medium-select"} ${stateClass}`, ref: (el) => (this.dropdownElement = el) }, index.h("div", { key: 'e8b75c67183ad5ff2aee3b1465be2027784ddfb2', class: "ifx-label-wrapper" }, this.label && (index.h("span", { key: '24bb875c44cbddebba1653ec7f249510ac1d50ad', class: "wrapper-label" }, index.h("span", { key: '0b16934ace14211562903d4a39973dabbdc01c8b', id: this.labelId }, this.label), this.required && (index.h("span", { key: '2086c43750cc7e0cd42db20bad5b40adc9da6357', class: `required ${!this.readOnly && this.internalError ? "error" : ""}` }, "*"))))), index.h("div", { key: 'df0bcb801837ca2698eed9efd25e495a1bdc72ad', class: `ifx-select-wrapper ${this.dropdownOpen ? "active" : ""} ${this.dropdownFlipped ? "is-flipped" : ""} ${stateClass}`, role: "combobox", "aria-labelledby": labelledBy, "aria-label": labelledBy ? undefined : this.ariaSelectLabel, "aria-describedby": describedBy, "aria-controls": this.dropdownOpen ? this.listboxId : undefined, "aria-expanded": this.dropdownOpen ? "true" : "false", "aria-haspopup": "listbox", "aria-disabled": !this.readOnly && !this.internalError && this.disabled
+                ? "true"
+                : undefined, tabIndex: disabledClick ? undefined : 0, onClick: disabledClick ? undefined : (e) => this.handleWrapperClick(e) }, index.h("div", { key: '8782c96d5470e11c9851e0a7998818bc77330b44', class: `ifx-select-input ${this.hasValue() ? "" : "placeholder"}`, onClick: disabledClick ? undefined : () => this.toggleDropdown() }, this.hasValue()
+            ? this.selectedLabel || this.value
+            : this.placeholder
+                ? this.placeholderValue
+                : ""), this.dropdownOpen && (index.h("div", { key: 'db6ce50bcc5c81f055f676eba10c69423b0687f1', class: "ifx-select-dropdown-menu" }, this.showSearch && (index.h("div", { key: 'd7da46b919a9a8c342b2749daa3d5682ced62f31', class: "ifx-select-dropdown-search", onClick: (e) => e.stopPropagation() }, index.h("ifx-search-field", { key: 'ddc58ce4048494a3d2906fbe8cf62e1d6be1ccd3', class: "search-input", placeholder: this.searchPlaceholderValue, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => {
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    this.focusOptionAt(0);
+                }
+                else if (e.key !== "Escape" && e.key !== "Tab") {
+                    e.stopPropagation();
+                }
+            }, onIfxInput: (event) => this.handleSearch(event.target) }))), index.h("div", { key: 'ec662302449d4cb58f56f41db6c200698a2d7f95', class: "ifx-select-options", role: "listbox", id: this.listboxId, "aria-label": labelledBy ? undefined : this.ariaSelectLabel }, index.h("slot", { key: 'a67e01e8d0ecca8e5752d2dcb129e218f2e92c17' }), this.searchTerm && (index.h("div", { key: '339a39d0f1f61011bbf53e30cb19d40654b494e3', class: "ifx-select-no-results" }, index.h("span", { key: '85944d97aa68a5e9f1be3d9458467634618d0ca5', class: "no-results-text" }, this.noResultsMessage)))))), index.h("div", { key: 'ca7761bd7fb58e07252724d90d5bc3c0fa034a91', class: "ifx-select-icon-container" }, this.hasValue() && this.showClearButton && (index.h("div", { key: '60482276f31cd007ab7486ac908cf8980c749d7f', class: "ifx-clear-button", role: "button", "aria-label": this.ariaClearLabel, onClick: disabledClick
+                ? undefined
+                : this.handleClearButtonClick }, index.h("ifx-icon", { key: '5a8f35ff6c8802bdc2e1c3f916de10131b131a44', icon: "cRemove16" }))), index.h("div", { key: 'fd5ee4b166b4275b9a0f94b690bd60a457a6aeed', class: "icon-wrapper-up", "aria-hidden": "true", onClick: disabledClick ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: 'd5cf5f20c02d0e365cad3822a09e31ae6ba3a447', class: "icon-wrapper-down", "aria-hidden": "true", onClick: disabledClick ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && (index.h("div", { key: 'efccc6e9c70d4d9900ba389fd9ac524bed95063a', id: this.captionId, class: `single__select-caption ${stateClass}` }, this.caption))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "error": [{
+                "updateInternalError": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+Select.style = selectCss();
+
+const selectOptionCss = () => `:host{display:block;width:100%}:host(:focus-visible){outline:none}.option{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;cursor:pointer;list-style:none;height:var(--ifx-select-option-height, 40px);padding:0 16px;background-color:#ffffff;font-family:var(--ifx-font-family);font-size:0.875rem;color:#1d1d1d;transition:background-color 0.2s ease-in-out}.option:hover{background-color:#f7f7f7}.option--selected{color:#0a8276;font-weight:600}.option--disabled{cursor:default;color:#bfbbbb}.option--disabled:hover{background-color:transparent}.option.search-hidden{display:none !important}.option.search-match .search-highlight{font-weight:600}:host(:focus-visible) .option{outline:2px solid #0a8276;outline-offset:-2px}.option-label{flex-grow:1;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.option-check{flex-shrink:0;color:#0a8276}`;
+
+const SelectOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Value associated with this option (used for selection and events). */
+    value;
+    /** Whether this option is currently selected. */
+    selected = false;
+    /** Whether this option is disabled and not interactive. */
+    disabled = false;
+    searchTerm = "";
+    isSearchActive = false;
+    componentDidLoad() {
+        this.notifySelect("registered");
+        this.el.addEventListener("ifx-search-filter", this.handleSearchFilter);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifx-search-filter", this.handleSearchFilter);
+        this.notifySelect("removed");
+    }
+    handleClick(event) {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        this.select();
+    }
+    handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.select();
+        }
+    }
+    selectedChanged(newVal) {
+        if (newVal) {
+            this.notifySelect("selected");
+        }
+    }
+    select() {
+        // Single-select: selecting is not a toggle. The parent deselects the others.
+        this.selected = true;
+        this.notifySelect("selected");
+    }
+    /** Bubbles a lifecycle/selection notification to the parent `ifx-select`. */
+    notifySelect(reason) {
+        this.el.dispatchEvent(new CustomEvent("ifx-option-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value, selected: this.selected, reason },
+        }));
+    }
+    /** Plain-text label from the slotted content (used for value display + search). */
+    getTextContent() {
+        return (this.el.textContent || "").trim() || this.value || "";
+    }
+    handleSearchFilter = (event) => {
+        this.searchTerm = (event.detail.searchTerm || "").toLowerCase();
+        this.isSearchActive = event.detail.isActive;
+        // Flat leaf option — no child states to await, so update synchronously
+        // (exact substring match, so numeric queries like "2026" don't match "2020").
+        this.updateSearchClasses();
+    };
+    updateSearchClasses() {
+        const optionDiv = this.el.shadowRoot?.querySelector(".option");
+        if (!optionDiv)
+            return;
+        optionDiv.classList.remove("search-hidden", "search-match");
+        if (!this.isSearchActive) {
+            this.removeHighlighting();
+            return;
+        }
+        const matches = this.getTextContent()
+            .toLowerCase()
+            .includes(this.searchTerm);
+        if (matches) {
+            optionDiv.classList.add("search-match");
+            this.highlightSearchTerm();
+        }
+        else {
+            optionDiv.classList.add("search-hidden");
+            this.removeHighlighting();
+        }
+    }
+    highlightSearchTerm() {
+        if (!this.searchTerm)
+            return;
+        const labelElement = this.el.shadowRoot?.querySelector(".option-label");
+        const slotElement = labelElement?.querySelector("slot");
+        if (!labelElement || !slotElement)
+            return;
+        this.removeHighlighting();
+        const original = this.getTextContent();
+        const index = original.toLowerCase().indexOf(this.searchTerm);
+        if (index === -1)
+            return;
+        const before = original.substring(0, index);
+        const match = original.substring(index, index + this.searchTerm.length);
+        const after = original.substring(index + this.searchTerm.length);
+        const wrapper = document.createElement("span");
+        wrapper.className = "highlighted-text";
+        if (before)
+            wrapper.appendChild(document.createTextNode(before));
+        const strong = document.createElement("strong");
+        strong.className = "search-highlight";
+        strong.textContent = match;
+        wrapper.appendChild(strong);
+        if (after)
+            wrapper.appendChild(document.createTextNode(after));
+        labelElement.setAttribute("data-original-content", "true");
+        slotElement.style.display = "none";
+        labelElement.appendChild(wrapper);
+    }
+    removeHighlighting() {
+        const labelElement = this.el.shadowRoot?.querySelector(".option-label");
+        if (!labelElement)
+            return;
+        const slotElement = labelElement.querySelector("slot");
+        const highlighted = labelElement.querySelector(".highlighted-text");
+        if (highlighted)
+            labelElement.removeChild(highlighted);
+        if (slotElement)
+            slotElement.style.display = "";
+        labelElement.removeAttribute("data-original-content");
+    }
+    render() {
+        return (index.h(index.Host, { key: '7b30e6f04c44edb04f3b2fbb99571a1198d0cacc', tabIndex: -1 }, index.h("div", { key: '0236a2e4cc64351bc65bfd39857faa1470caa792', class: {
+                option: true,
+                "option--disabled": this.disabled,
+                "option--selected": this.selected,
+            }, role: "option", "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", "data-value": this.value, tabIndex: -1 }, index.h("div", { key: '6172be05b92348fd9291df75ac0cf34fa1246699', class: "option-label" }, index.h("slot", { key: 'efe2f33c4f2e6d123ed9808867e640996d3f87e8' })), this.selected && index.h("ifx-icon", { key: '251b90e0ed35b1c685266bf69990a7899e31f958', class: "option-check", icon: "check16" }))));
+    }
+    static get watchers() { return {
+        "selected": [{
+                "selectedChanged": 0
+            }]
+    }; }
+};
+SelectOption.style = selectOptionCss();
+
+exports.ifx_select = Select;
+exports.ifx_select_option = SelectOption;

package/dist/cjs/ifx-set-filter.cjs.entry.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const setFilterCss = () => ``;
+
+const SetFilter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxFilterSelect = index.createEvent(this, "ifxFilterSelect", 7);
+    }
+    /** Technical name/identifier for this filter */
+    filterName;
+    /** User-visible label for the filter control */
+    filterLabel;
+    /** Placeholder text shown when no value is entered/selected */
+    placeholder;
+    /** Filter control type */
+    type = "text";
+    /** Options for select types, either array or string */
+    options;
+    filterValues = [];
+    /** Emitted when the filter's value or selection changes */
+    ifxFilterSelect;
+    handleTextInputChange(event) {
+        const target = event.target;
+        const value = target.value;
+        this.ifxFilterSelect.emit({
+            filterName: this.filterName,
+            filterValues: [value],
+            type: this.type,
+        }); // Emit an array for consistency with the multi select component
+    }
+    handleSingleSelectChange(event) {
+        // `detail` is null when the selection is cleared.
+        const value = event.detail?.value ?? null;
+        this.ifxFilterSelect.emit({
+            filterName: this.filterName,
+            filterValues: value ? [value] : [],
+            type: this.type,
+        }); // Emit an array for consistency with the multi select component
+    }
+    handleMultiselectOptionChange(event) {
+        this.filterValues = event.detail.map((option) => ({
+            label: option.value,
+            value: option.value,
+        }));
+        this.ifxFilterSelect.emit({
+            filterName: this.filterName,
+            filterValues: this.filterValues,
+            type: this.type,
+        });
+    }
+    render() {
+        let optionsArray = [];
+        // Parse options if it's a string
+        if (typeof this.options === "string") {
+            try {
+                optionsArray = JSON.parse(this.options);
+            }
+            catch (e) {
+                console.error("Failed to parse options:", e);
+                optionsArray = [];
+            }
+        }
+        else if (Array.isArray(this.options)) {
+            optionsArray = this.options;
+        }
+        switch (this.type) {
+            case "text":
+                return (index.h("ifx-text-field", { error: false, disabled: false, placeholder: this.placeholder, onIfxInput: (event) => this.handleTextInputChange(event) }, this.filterLabel));
+            case "single-select":
+                return (index.h("ifx-select", { label: this.filterLabel, "placeholder-value": this.placeholder, "show-search": true, "search-placeholder-value": "Search...", onIfxSelect: (event) => this.handleSingleSelectChange(event) }, optionsArray.map((option) => (index.h("ifx-select-option", { value: option.value || option }, option.label || option)))));
+            case "multi-select":
+                return (index.h("ifx-multiselect", { label: this.filterLabel, placeholder: this.placeholder, onIfxSelect: (event) => this.handleMultiselectOptionChange(event) }, optionsArray.map((option) => (index.h("ifx-multiselect-option", { value: option.value || option }, option.label || option)))));
+            default:
+                return null;
+        }
+    }
+};
+SetFilter.style = setFilterCss();
+
+exports.ifx_set_filter = SetFilter;