@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/search-field/search-field.js

@@ -0,0 +1,1156 @@
+import { h, } from "@stencil/core";
+import classNames from "classnames";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class SearchField {
+    inputElement;
+    dropdownElement;
+    wrapperElement;
+    focusEmitted = false;
+    el;
+    /**
+     * 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 is() { return "ifx-search-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["search-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["search-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current input value. Mutates as the user types and can be set programmatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "suggestions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuggestionItem[]",
+                    "resolved": "SuggestionItem[]",
+                    "references": {
+                        "SuggestionItem": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/search-field/search-field.tsx",
+                            "id": "src/components/search-field/search-field.tsx::SuggestionItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External suggestion items used to populate the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "showSuggestions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable the suggestion dropdown and request events while typing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-suggestions",
+                "defaultValue": "false"
+            },
+            "maxSuggestions": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of items shown in the dropdown (suggestions + history)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-suggestions",
+                "defaultValue": "10"
+            },
+            "maxHistoryItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of stored history entries."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-history-items",
+                "defaultValue": "5"
+            },
+            "enableHistory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable local search history behavior and persistence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-history",
+                "defaultValue": "true"
+            },
+            "historyKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "localStorage key used to persist search history.\nThis 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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "history-key",
+                "defaultValue": "\"ifx-search-history\""
+            },
+            "historyHeaderText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header text shown when only history entries are displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "history-header-text",
+                "defaultValue": "\"Recent Searches\""
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text",
+                "defaultValue": "\"Search Field\""
+            },
+            "ariaLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the element that labels the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelled-by"
+            },
+            "ariaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the element that describes the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-described-by"
+            },
+            "deleteIconAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the clear icon button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delete-icon-aria-label",
+                "defaultValue": "\"Clear search\""
+            },
+            "historyDeleteAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the history item delete button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "history-delete-aria-label",
+                "defaultValue": "\"Remove from history\""
+            },
+            "dropdownAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the suggestions listbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-aria-label",
+                "defaultValue": "\"Search suggestions and history\""
+            },
+            "suggestionAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label prefix for suggestion items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suggestion-aria-label",
+                "defaultValue": "\"Search suggestion\""
+            },
+            "historyItemAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label prefix for history items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "history-item-aria-label",
+                "defaultValue": "\"Search history item\""
+            },
+            "showDeleteIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the clear icon when there is a non-empty value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delete-icon",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the input and related interactions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'l'",
+                    "resolved": "\"l\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual size variant. \"s\" enables compact styling, otherwise defaults to \"l\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"l\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"Search\""
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native autocomplete attribute value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "\"off\""
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of characters allowed in the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength",
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showDeleteIconInternalState": {},
+            "isFocused": {},
+            "isFocusWithin": {},
+            "suggestionsDismissed": {},
+            "filteredSuggestions": {},
+            "selectedSuggestionIndex": {},
+            "searchHistory": {},
+            "suggestionAnnouncement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxInput",
+                "name": "ifxInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on input change with the current value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxSuggestionRequested",
+                "name": "ifxSuggestionRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to request external suggestions for the given query."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxSuggestionSelected",
+                "name": "ifxSuggestionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a suggestion or history item is selected."
+                },
+                "complexType": {
+                    "original": "SuggestionItem",
+                    "resolved": "SuggestionItem",
+                    "references": {
+                        "SuggestionItem": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/search-field/search-field.tsx",
+                            "id": "src/components/search-field/search-field.tsx::SuggestionItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFocus",
+                "name": "ifxFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxBlur",
+                "name": "ifxBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the search input.",
+                    "tags": []
+                }
+            },
+            "clearSearchHistory": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public method to clear search history.\nThis will clear the history from both localStorage and the internal state, and also reset any dropdown-related states.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueWatcher"
+            }, {
+                "propName": "suggestions",
+                "methodName": "suggestionsWatcher"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}