@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/esm/ifx-search-field.entry.js

@@ -0,0 +1,560 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const searchFieldCss = () => `:host{display:flex}.search-field{box-sizing:border-box;background-color:#ffffff;width:100%;font-family:var(--ifx-font-family);position:relative}.search-field .suggestion-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8d8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none}.search-field .search-field__wrapper .search-field__label{display:flex;align-items:center;flex:1;min-width:0;gap:12px;margin:-8px -16px;padding:8px 16px}.search-field .search-field__wrapper:focus-visible:not(.disabled){outline:none;border:1px solid #0a8276}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus,.dropdown-open){border:1px solid #575352}.search-field .search-field__wrapper.focused:not(.disabled){border:1px solid #0a8276}.search-field .search-field__wrapper .delete-icon{outline:1px solid transparent;right:12px;cursor:pointer;position:relative;z-index:1}.search-field .search-field__wrapper .delete-icon:focus-visible{border:2px solid #0a8276;outline-offset:1px}.search-field .search-field__wrapper input[type=search]{font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:16px;color:#1d1d1d;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=search]::-webkit-search-decoration,.search-field .search-field__wrapper input[type=search]::-webkit-search-cancel-button,.search-field .search-field__wrapper input[type=search]::-webkit-search-results-button,.search-field .search-field__wrapper input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.search-field .search-field__wrapper input[type=search]::-ms-clear{display:none}.search-field .search-field__wrapper input[type=search]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=search]:disabled{background:#eeeded;color:#ffffff}.search-field .search-field__wrapper input[type=search]:disabled::placeholder{color:#575352}.search-field .search-field__wrapper.disabled{background:#eeeded;border:1px solid #575352;color:#1d1d1d}.search-field .search-field__wrapper.disabled:hover{border:1px solid #575352;outline:none}.search-field .search-field__wrapper.disabled .delete-icon{cursor:default}.search-field .search-field__wrapper.disabled .delete-icon:focus-visible{outline:1px solid transparent}.search-field .suggestions-dropdown{position:absolute;top:100%;left:0;right:0;background:#ffffff;margin-top:4px;border:1px solid #eeeded;box-shadow:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);z-index:1000;max-height:300px;overflow-y:auto;container-type:inline-size}.search-field .suggestions-dropdown .suggestions-header{font-family:var(--ifx-font-family);font-size:0.8125rem;font-weight:600;line-height:1.25rem;letter-spacing:0.25em;text-transform:uppercase;color:#575352;border-bottom:1px solid #eeeded;padding:12px 16px}.search-field .suggestions-dropdown .suggestion-item{padding:12px 16px;cursor:pointer;transition:background-color 0.2s ease}.search-field .suggestions-dropdown .suggestion-item:last-child{border-bottom:none}.search-field .suggestions-dropdown .suggestion-item:hover,.search-field .suggestions-dropdown .suggestion-item--selected{background-color:#eeeded}.search-field .suggestions-dropdown .suggestion-item:focus-visible{outline:1px auto #0a8276}.search-field .suggestions-dropdown .suggestion-item .suggestion-content{display:flex;align-items:center;gap:12px}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon{color:#575352;flex-shrink:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history{color:#575352}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text{flex:1;display:flex;align-items:center;min-width:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope{color:#8d8786;flex-shrink:0;white-space:nowrap;margin-left:2px;font-weight:600;font-size:0.875rem}@container (max-width: 320px){.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text{flex-direction:column;align-items:flex-start}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text{width:100%;max-width:100%}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope{margin-left:0;margin-top:0;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count{color:#8d8786;margin-left:auto;flex-shrink:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon{opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0.2s ease;cursor:pointer;margin-left:auto;flex-shrink:0;color:#575352}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover{color:#3c3a39}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:focus-visible{outline:none;border:1px solid #0a8276}.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon{opacity:1;visibility:visible}.search-field .search-field__wrapper.dropdown-open{border-radius:1px 1px 0 0;border-color:#0a8276}`;
+
+const SearchField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxInput = createEvent(this, "ifxInput", 7);
+        this.ifxSuggestionRequested = createEvent(this, "ifxSuggestionRequested", 7);
+        this.ifxSuggestionSelected = createEvent(this, "ifxSuggestionSelected", 7);
+        this.ifxFocus = createEvent(this, "ifxFocus", 7);
+        this.ifxBlur = createEvent(this, "ifxBlur", 7);
+    }
+    inputElement;
+    dropdownElement;
+    wrapperElement;
+    focusEmitted = false;
+    get el() { return getElement(this); }
+    /**
+     * Current input value. Mutates as the user types and can be set programmatically.
+     */
+    value = "";
+    /**
+     * External suggestion items used to populate the dropdown.
+     */
+    suggestions = [];
+    /**
+     * Enable the suggestion dropdown and request events while typing.
+     */
+    showSuggestions = false;
+    /**
+     * Maximum number of items shown in the dropdown (suggestions + history).
+     */
+    maxSuggestions = 10;
+    /**
+     * Maximum number of stored history entries.
+     */
+    maxHistoryItems = 5;
+    /**
+     * Enable local search history behavior and persistence.
+     */
+    enableHistory = true;
+    /**
+     * localStorage key used to persist search history.
+     * This is needed to allow multiple instances of the search field to maintain separate histories if desired, but can be left as default for a shared history across the application.
+     */
+    historyKey = "ifx-search-history";
+    /**
+     * Header text shown when only history entries are displayed.
+     */
+    historyHeaderText = "Recent Searches";
+    /**
+     * Accessible label for the input.
+     */
+    ariaLabelText = "Search Field";
+    /**
+     * ID of the element that labels the input.
+     */
+    ariaLabelledBy;
+    /**
+     * ID of the element that describes the input.
+     */
+    ariaDescribedBy;
+    /**
+     * Accessible label for the clear icon button.
+     */
+    deleteIconAriaLabel = "Clear search";
+    /**
+     * Accessible label for the history item delete button.
+     */
+    historyDeleteAriaLabel = "Remove from history";
+    /**
+     * Accessible label for the suggestions listbox.
+     */
+    dropdownAriaLabel = "Search suggestions and history";
+    /**
+     * Accessible label prefix for suggestion items.
+     */
+    suggestionAriaLabel = "Search suggestion";
+    /**
+     * Accessible label prefix for history items.
+     */
+    historyItemAriaLabel = "Search history item";
+    /**
+     * Show the clear icon when there is a non-empty value.
+     */
+    showDeleteIcon = false;
+    /**
+     * Disable the input and related interactions.
+     */
+    disabled = false;
+    /**
+     * Visual size variant. "s" enables compact styling, otherwise defaults to "l".
+     */
+    size = "l";
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder = "Search";
+    /**
+     * Native autocomplete attribute value.
+     */
+    autocomplete = "off";
+    /**
+     * Maximum number of characters allowed in the input.
+     */
+    maxlength = undefined;
+    /**
+     * Emitted on input change with the current value.
+     */
+    ifxInput;
+    /**
+     * Emitted to request external suggestions for the given query.
+     */
+    ifxSuggestionRequested;
+    /**
+     * Emitted when a suggestion or history item is selected.
+     */
+    ifxSuggestionSelected;
+    /**
+     * Emitted when the input gains focus.
+     */
+    ifxFocus;
+    /**
+     * Emitted when the input loses focus.
+     */
+    ifxBlur;
+    showDeleteIconInternalState = false;
+    isFocused = false;
+    isFocusWithin = false;
+    suggestionsDismissed = false;
+    filteredSuggestions = [];
+    selectedSuggestionIndex = -1;
+    searchHistory = [];
+    suggestionAnnouncement = "";
+    announcementToken = 0;
+    get showDropdown() {
+        return (this.isFocusWithin &&
+            !this.suggestionsDismissed &&
+            (this.showSuggestions || this.enableHistory) &&
+            this.filteredSuggestions.length > 0);
+    }
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        const clickedInput = this.inputElement
+            ? path.includes(this.inputElement)
+            : false;
+        const clickedDropdown = this.dropdownElement
+            ? path.includes(this.dropdownElement)
+            : false;
+        const clickedWrapper = this.wrapperElement
+            ? path.includes(this.wrapperElement)
+            : false;
+        if (!clickedInput &&
+            !clickedDropdown &&
+            !clickedWrapper) {
+            this.dismissSuggestions();
+        }
+    }
+    handleKeyDown(event) {
+        switch (event.key) {
+            case "ArrowDown":
+                if (!this.showDropdown)
+                    return;
+                event.preventDefault();
+                this.navigateSuggestions(1);
+                break;
+            case "ArrowUp":
+                if (!this.showDropdown)
+                    return;
+                event.preventDefault();
+                this.navigateSuggestions(-1);
+                break;
+            case "Enter":
+                event.preventDefault();
+                if (this.showDropdown && this.selectedSuggestionIndex >= 0) {
+                    this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);
+                }
+                else {
+                    this.handleSearch();
+                }
+                break;
+            case "Escape":
+                // Browser default for type="search" clears the value.
+                // We use two escape steps:
+                // 1. Escape: dismisses open suggestions without clearing
+                // 2. Escape: clear explicitly for consistent cross-agent behavior.
+                event.preventDefault();
+                if (this.showDropdown) {
+                    this.dismissSuggestions();
+                }
+                else {
+                    this.handleDelete();
+                }
+                break;
+        }
+    }
+    valueWatcher(newValue) {
+        if (this.inputElement && newValue !== this.inputElement.value) {
+            this.inputElement.value = newValue;
+        }
+        this.updateSuggestions();
+    }
+    suggestionsWatcher() {
+        this.updateSuggestions();
+    }
+    handleInput = () => {
+        this.suggestionsDismissed = false;
+        if (!this.inputElement)
+            return;
+        const query = this.inputElement.value;
+        this.value = query;
+        this.cancelSuggestionAnnouncement();
+        this.ifxInput.emit(this.value);
+        if (!this.showSuggestions && !this.enableHistory)
+            return;
+        this.selectedSuggestionIndex = -1;
+        if (this.showSuggestions) {
+            this.requestSuggestions(query);
+        }
+        else {
+            this.updateSuggestions();
+        }
+    };
+    handleDelete = () => {
+        if (!this.disabled && this.inputElement) {
+            this.inputElement.value = "";
+            this.value = "";
+            this.ifxInput.emit(this.value);
+            this.dismissSuggestions();
+        }
+    };
+    handleSearch = () => {
+        if (this.value.trim() && this.enableHistory) {
+            this.addToHistory(this.value);
+        }
+        this.dismissSuggestions();
+    };
+    focusInput() {
+        this.isFocused = true;
+        this.isFocusWithin = true;
+        this.suggestionsDismissed = false;
+        // Only emit focus event if it hasn't been emitted already
+        if (!this.focusEmitted) {
+            this.focusEmitted = true;
+            this.ifxFocus.emit();
+        }
+        if (this.showSuggestions || this.enableHistory) {
+            // On focus without input: Show only history
+            if (this.value.length === 0) {
+                this.showHistoryDropdown();
+                if (this.showDropdown) {
+                    this.announceSuggestionCount();
+                }
+            }
+            else {
+                // With existing input: Normal suggestion logic
+                this.updateSuggestions();
+            }
+        }
+    }
+    blurInput() {
+        setTimeout(() => {
+            const activeElement = this.el.shadowRoot?.activeElement;
+            if (activeElement === this.inputElement) {
+                return;
+            }
+            this.isFocused = false;
+            if (!activeElement) {
+                this.isFocusWithin = false;
+            }
+            this.focusEmitted = false; // Reset focus flag when blur occurs
+            this.ifxBlur.emit();
+        }, 150);
+    }
+    handleFocusIn = () => {
+        this.isFocusWithin = true;
+    };
+    handleFocusOut = () => {
+        setTimeout(() => {
+            this.isFocusWithin = this.el.shadowRoot?.activeElement != null;
+        });
+    };
+    // Public method to update history from external sources
+    loadSearchHistory() {
+        if (this.enableHistory && typeof localStorage !== "undefined") {
+            const stored = localStorage.getItem(this.historyKey);
+            this.searchHistory = stored ? JSON.parse(stored) : [];
+            // Update suggestions when history is loaded
+            this.updateSuggestions();
+            // If no input and no history left, close the suggestion interaction
+            if (this.value.length === 0 && this.searchHistory.length === 0) {
+                this.dismissSuggestions();
+            }
+        }
+    }
+    /**
+     * Focuses the search input.
+     */
+    async setFocus() {
+        this.inputElement?.focus();
+    }
+    /**
+     * Public method to clear search history.
+     * This will clear the history from both localStorage and the internal state, and also reset any dropdown-related states.
+     */
+    async clearSearchHistory() {
+        if (this.enableHistory && typeof localStorage !== "undefined") {
+            // Clear from localStorage
+            localStorage.removeItem(this.historyKey);
+            // Clear internal history
+            this.searchHistory = [];
+            // Reset all dropdown-relevant states
+            this.filteredSuggestions = [];
+            this.dismissSuggestions();
+            // Update suggestions after reset
+            this.updateSuggestions();
+        }
+    }
+    // Suggestion Management Methods
+    addToHistory(term) {
+        if (!this.enableHistory || !term.trim())
+            return;
+        const history = [...this.searchHistory];
+        const existingIndex = history.indexOf(term);
+        if (existingIndex > -1) {
+            history.splice(existingIndex, 1);
+        }
+        history.unshift(term);
+        // Limit history to maxHistoryItems (default 5)
+        this.searchHistory = history.slice(0, this.maxHistoryItems);
+        if (typeof localStorage !== "undefined") {
+            localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));
+        }
+    }
+    // Remove individual history entry
+    removeFromHistory(term) {
+        if (!this.enableHistory)
+            return;
+        const history = [...this.searchHistory];
+        const index = history.indexOf(term);
+        if (index > -1) {
+            history.splice(index, 1);
+            this.searchHistory = history;
+            // Update localStorage
+            if (typeof localStorage !== "undefined") {
+                localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));
+            }
+            // Update suggestions after removal
+            this.updateSuggestions();
+            // End the suggestion interaction if no history remains
+            if (this.searchHistory.length === 0 && this.value.length === 0) {
+                this.dismissSuggestions();
+            }
+        }
+    }
+    // Handle click on history delete button
+    handleHistoryDelete = (event, term) => {
+        event.stopPropagation(); // Prevent selection of the entry
+        this.removeFromHistory(term);
+    };
+    requestSuggestions(query) {
+        this.ifxSuggestionRequested.emit(query);
+        this.updateSuggestions();
+    }
+    updateSuggestions() {
+        const query = this.value.toLowerCase();
+        const externalSuggestions = Array.isArray(this.suggestions)
+            ? this.suggestions
+            : [];
+        const historySuggestions = this.enableHistory && this.searchHistory.length > 0
+            ? this.searchHistory
+                .filter((term) => query.length === 0 || term.toLowerCase().includes(query))
+                .map((term, index) => ({
+                id: `history-${index}`,
+                text: term,
+                type: "history",
+            }))
+            : [];
+        const combinedSuggestions = [...externalSuggestions, ...historySuggestions];
+        // Remove duplicates based on text and scope combination (history takes precedence over external)
+        const uniqueSuggestions = combinedSuggestions.reduce((unique, current) => {
+            const existingIndex = unique.findIndex((item) => item.text.toLowerCase() === current.text.toLowerCase() &&
+                item.scope === current.scope);
+            if (existingIndex === -1) {
+                unique.push(current);
+            }
+            else {
+                // If already exists, prefer history over external suggestions
+                if (current.type === "history" &&
+                    unique[existingIndex].type !== "history") {
+                    unique[existingIndex] = current;
+                }
+            }
+            return unique;
+        }, []);
+        this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);
+        this.selectedSuggestionIndex = -1;
+        this.announceSuggestionCount();
+    }
+    navigateSuggestions(direction) {
+        const maxIndex = this.filteredSuggestions.length - 1;
+        if (direction > 0) {
+            this.selectedSuggestionIndex =
+                this.selectedSuggestionIndex < maxIndex
+                    ? this.selectedSuggestionIndex + 1
+                    : 0;
+        }
+        else {
+            this.selectedSuggestionIndex =
+                this.selectedSuggestionIndex > 0
+                    ? this.selectedSuggestionIndex - 1
+                    : maxIndex;
+        }
+    }
+    // Scroll the currently selected suggestion into view within the dropdown
+    scrollSelectedSuggestionIntoView() {
+        if (!this.dropdownElement || this.selectedSuggestionIndex < 0)
+            return;
+        const selectedSuggestion = this.dropdownElement.querySelector(`#suggestion-${this.selectedSuggestionIndex}`);
+        selectedSuggestion?.scrollIntoView({ block: "nearest" });
+    }
+    selectSuggestion(suggestion) {
+        this.value = suggestion.text;
+        if (this.inputElement) {
+            this.inputElement.value = suggestion.text;
+        }
+        this.ifxSuggestionSelected.emit(suggestion);
+        this.ifxInput.emit(this.value);
+        if (this.enableHistory) {
+            // Always add selected suggestions to history since they are valid results
+            this.addToHistory(suggestion.text);
+        }
+        this.dismissSuggestions();
+    }
+    dismissSuggestions() {
+        this.suggestionsDismissed = true;
+        this.selectedSuggestionIndex = -1;
+        this.cancelSuggestionAnnouncement();
+    }
+    cancelSuggestionAnnouncement() {
+        this.announcementToken++;
+        this.suggestionAnnouncement = "";
+    }
+    announceSuggestionCount() {
+        this.suggestionAnnouncement = "";
+        const token = ++this.announcementToken;
+        requestAnimationFrame(() => {
+            if (token !== this.announcementToken)
+                return;
+            if (!this.showDropdown || this.filteredSuggestions.length === 0)
+                return;
+            const resultCount = this.filteredSuggestions.length;
+            this.suggestionAnnouncement = `${resultCount} ${resultCount === 1 ? "result" : "results"} available`;
+        });
+    }
+    // Show only history in dropdown (e.g. on focus without input)
+    showHistoryDropdown() {
+        if (this.enableHistory && this.searchHistory.length > 0) {
+            // Show only history entries
+            const historySuggestions = this.searchHistory.map((term, index) => ({
+                id: `history-${index}`,
+                text: term,
+                type: "history",
+            }));
+            this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);
+            this.selectedSuggestionIndex = -1;
+        }
+        else {
+            this.filteredSuggestions = [];
+        }
+    }
+    // Check if only history entries are displayed (without text input)
+    isShowingOnlyHistory() {
+        return (this.value.length === 0 &&
+            this.filteredSuggestions.length > 0 &&
+            this.filteredSuggestions.every((s) => s.type === "history"));
+    }
+    // Render text with highlighted matches
+    renderHighlightedText(text, query) {
+        if (!query || query.length === 0) {
+            return text;
+        }
+        const lowerText = text.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        const index = lowerText.indexOf(lowerQuery);
+        if (index === -1) {
+            return text;
+        }
+        const before = text.substring(0, index);
+        const match = text.substring(index, index + query.length);
+        const after = text.substring(index + query.length);
+        return [before, h("strong", null, match), after];
+    }
+    componentWillLoad() {
+        this.loadSearchHistory();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-search-field", await framework);
+        }
+    }
+    componentDidRender() {
+        this.scrollSelectedSuggestionIntoView();
+    }
+    componentWillUpdate() {
+        if (this.value !== "") {
+            this.showDeleteIconInternalState = true;
+        }
+        else
+            this.showDeleteIconInternalState = false;
+    }
+    render() {
+        return (h("div", { key: '0fad0541006084547df01bc173db505e2e0ea7c9', "aria-disabled": this.disabled, class: "search-field", onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("output", { key: 'f035e49f366c82c31bc32956baa39e6ece8d7ad0', "aria-atomic": "true", "aria-live": "polite", class: "suggestion-status" }, this.suggestionAnnouncement), h("div", { key: '083b4f2939554d547554d0d3e42bf76373dd97b5', ref: (el) => (this.wrapperElement = el), class: this.getWrapperClassNames() }, h("label", { key: 'af24292a57fcb2de04baa008c4d447dfe25b6eed', class: "search-field__label" }, h("ifx-icon", { key: '1a4d3a47ec00f08cbb969ea653b563af955b7942', icon: "search-16", class: "search-icon" }), h("input", { key: 'a99f958e6ff77bb70adb9f800b95d991b383811a', ref: (el) => (this.inputElement = el), type: "search", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, "aria-controls": this.showDropdown ? "suggestions-dropdown" : undefined, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabelText, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-activedescendant": this.selectedSuggestionIndex >= 0
+                ? `suggestion-${this.selectedSuggestionIndex}`
+                : undefined })), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    this.handleDelete();
+                }
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '534bdc8e0dc45953de57903578903a04a45f4f14', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: 'f796dba6b3971eab3ac35f629db041be589fc950', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", tabIndex: 0, "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === "history" ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ""}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ""}`, onClick: () => this.selectSuggestion(suggestion), onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    this.selectSuggestion(suggestion);
+                }
+            }, onMouseEnter: () => (this.selectedSuggestionIndex = index) }, h("div", { class: "suggestion-content" }, suggestion.type === "history" && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === "suggestion" && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === "history" && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    this.handleHistoryDelete(event, suggestion.text);
+                }
+            } }))))))))));
+    }
+    getSizeClass() {
+        return `${this.size}` === "s" ? "search-field__wrapper-s" : "";
+    }
+    getWrapperClassNames() {
+        return classNames(`search-field__wrapper`, `${this.getSizeClass()}`, `${this.isFocused ? "focused" : ""}`, `${this.showDropdown ? "dropdown-open" : ""}`, `${this.disabled ? "disabled" : ""}`);
+    }
+    getSuggestionClassNames(index) {
+        return classNames("suggestion-item", {
+            "suggestion-item--selected": index === this.selectedSuggestionIndex,
+            "suggestion-item--history": this.filteredSuggestions[index]?.type === "history",
+        });
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueWatcher": 0
+            }],
+        "suggestions": [{
+                "suggestionsWatcher": 0
+            }]
+    }; }
+};
+SearchField.style = searchFieldCss();
+
+export { SearchField as ifx_search_field };

package/dist/esm/ifx-segment.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, c as createEvent, h } from './index-CY4s4b6R.js';
+
+const segmentCss = () => `.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #bfbbbb;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#ffffff;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family)}.segment:focus-visible{color:#ffffff;background-color:#0a8276}.segment:hover{color:#ffffff;background-color:#08665c;cursor:pointer}.segment:active{background-color:#06534b}.segment.segment--selected{color:#ffffff;background-color:#0a8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #bfbbbb;border-radius:1px;content:""}`;
+
+const Segment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.segmentSelect = createEvent(this, "segmentSelect", 5);
+    }
+    /** Fired when this segment is selected (emits the segment index). */
+    segmentSelect;
+    /** Icon to display inside the segment. */
+    icon;
+    /** Index of this segment within the segmented control. */
+    segmentIndex;
+    /** Whether this segment is currently selected. */
+    selected = false;
+    /** Value associated with this segment. */
+    value;
+    handleSegmentClick() {
+        if (this.selected)
+            return;
+        this.selected = true;
+        this.segmentSelect.emit(this.segmentIndex);
+    }
+    handleSegmentKeyDown(event) {
+        if (event.code === "Enter" || event.code === "Space") {
+            if (this.selected)
+                return;
+            this.selected = true;
+            this.segmentSelect.emit(this.segmentIndex);
+        }
+    }
+    render() {
+        return (h("div", { key: 'c32a30a780a9d1c1d3951ff4e20d2184ac078085', class: `segment ${this.selected ? "segment--selected" : ""}`, tabIndex: 0, onClick: () => {
+                this.handleSegmentClick();
+            }, onKeyDown: (e) => {
+                this.handleSegmentKeyDown(e);
+            } }, h("ifx-icon", { key: '8d07025fbbe6cf22c27ffd9feeb95a6b76f15c0e', icon: this.icon }), " ", h("slot", { key: '0c7eea89cc30faf1b6948507f6fb843dd0a227e1' })));
+    }
+};
+Segment.style = segmentCss();
+
+export { Segment as ifx_segment };