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;
    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.
     */
    ariaLabel = "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 = null;
    /**
     * 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;
    showDropdown = false;
    filteredSuggestions = [];
    selectedSuggestionIndex = -1;
    searchHistory = [];
    handleOutsideClick(event) {
        const path = event.composedPath();
        if (!path.includes(this.inputElement) &&
            !path.includes(this.dropdownElement)) {
            this.hideDropdown();
        }
    }
    handleKeyDown(event) {
        if (!this.showDropdown)
            return;
        switch (event.key) {
            case "ArrowDown":
                event.preventDefault();
                this.navigateSuggestions(1);
                break;
            case "ArrowUp":
                event.preventDefault();
                this.navigateSuggestions(-1);
                break;
            case "Enter":
                event.preventDefault();
                if (this.selectedSuggestionIndex >= 0) {
                    this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);
                }
                else {
                    this.handleSearch();
                }
                break;
            case "Escape":
                this.hideDropdown();
                break;
        }
    }
    valueWatcher(newValue) {
        if (this.inputElement && newValue !== this.inputElement.value) {
            this.inputElement.value = newValue;
        }
        this.updateSuggestions();
    }
    suggestionsWatcher() {
        this.updateSuggestions();
    }
    handleInput = () => {
        const query = this.inputElement.value;
        this.value = query;
        this.ifxInput.emit(this.value);
        if (this.showSuggestions) {
            this.showDropdown = true;
            this.selectedSuggestionIndex = -1;
            this.requestSuggestions(query);
        }
    };
    handleDelete = () => {
        if (!this.disabled) {
            this.inputElement.value = "";
            this.value = "";
            this.ifxInput.emit(this.value);
            this.hideDropdown();
        }
    };
    handleSearch = () => {
        if (this.value.trim() && this.enableHistory) {
            // Only add to history if there are actual results
            if (this.filteredSuggestions.length > 0) {
                this.addToHistory(this.value);
            }
        }
        this.hideDropdown();
    };
    focusInput() {
        // Only emit focus event if it hasn't been emitted already
        if (!this.focusEmitted) {
            this.focusEmitted = true;
            this.isFocused = true;
            this.ifxFocus.emit();
        }
        if (this.showSuggestions) {
            // On focus without input: Show only history
            if (this.value.length === 0) {
                this.showHistoryDropdown();
                // Only show dropdown if history is actually present
                this.showDropdown = this.enableHistory && this.searchHistory.length > 0;
            }
            else {
                // With existing input: Normal suggestion logic
                this.updateSuggestions();
                this.showDropdown = this.filteredSuggestions.length > 0;
            }
        }
    }
    blurInput() {
        setTimeout(() => {
            this.isFocused = false;
            this.focusEmitted = false; // Reset focus flag when blur occurs
            this.ifxBlur.emit();
        }, 150);
    }
    // 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 dropdown
            if (this.value.length === 0 && this.searchHistory.length === 0) {
                this.showDropdown = false;
            }
        }
    }
    /**
     * 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.selectedSuggestionIndex = -1;
            this.showDropdown = false;
            // 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();
            // Close dropdown if no history remains
            if (this.searchHistory.length === 0 && this.value.length === 0) {
                this.showDropdown = false;
            }
        }
    }
    // 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();
        let suggestions = [];
        if (query.length > 0) {
            // For text input: Mix external suggestions and relevant history
            // 1. Filter external suggestions
            if (this.suggestions && this.suggestions.length > 0) {
                const filteredExternal = this.suggestions.filter((s) => s.text.toLowerCase().includes(query));
                suggestions = [...suggestions, ...filteredExternal];
            }
            // 2. Filter relevant history entries
            if (this.enableHistory && this.searchHistory.length > 0) {
                const filteredHistory = this.searchHistory
                    .filter((term) => term.toLowerCase().includes(query))
                    .map((term, index) => ({
                    id: `history-${index}`,
                    text: term,
                    type: "history",
                }));
                suggestions = [...suggestions, ...filteredHistory];
            }
            // 3. Sort by relevance (exact matches first, then prefix matches)
            suggestions.sort((a, b) => {
                const aText = a.text.toLowerCase();
                const bText = b.text.toLowerCase();
                // Exact match has highest priority
                if (aText === query && bText !== query)
                    return -1;
                if (bText === query && aText !== query)
                    return 1;
                // Prefix match has second highest priority
                const aStartsWith = aText.startsWith(query);
                const bStartsWith = bText.startsWith(query);
                if (aStartsWith && !bStartsWith)
                    return -1;
                if (bStartsWith && !aStartsWith)
                    return 1;
                // With equal relevance: external suggestions before history
                if (a.type === "suggestion" && b.type === "history")
                    return -1;
                if (a.type === "history" && b.type === "suggestion")
                    return 1;
                // Alphabetical sorting as last criterion
                return aText.localeCompare(bText);
            });
        }
        else {
            // For empty query: Show only history (no external suggestions)
            if (this.enableHistory && this.searchHistory.length > 0) {
                const historySuggestions = this.searchHistory.map((term, index) => ({
                    id: `history-${index}`,
                    text: term,
                    type: "history",
                }));
                suggestions = historySuggestions;
            }
            // For empty query DO NOT show external suggestions
        }
        // Remove duplicates based on text and scope combination (history takes precedence over external)
        const uniqueSuggestions = suggestions.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;
    }
    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;
        }
    }
    selectSuggestion(suggestion) {
        this.value = suggestion.text;
        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.hideDropdown();
    }
    hideDropdown() {
        this.showDropdown = false;
        this.selectedSuggestionIndex = -1;
        this.isFocused = false;
    }
    // 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);
        }
    }
    componentWillUpdate() {
        if (this.value !== "") {
            this.showDeleteIconInternalState = true;
        }
        else
            this.showDeleteIconInternalState = false;
    }
    render() {
        return (h("div", { key: '249676e9510720458a7841b4a979609dee67754c', "aria-disabled": this.disabled, class: "search-field" }, h("div", { key: '109bf2ae37af86a16074c0ad680d9da01ee6b861', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'ceb927ee2bf1ebef12fe0535c55155fda9e80931', icon: "search-16", class: "search-icon" }), h("input", { key: '2559f84f2a5b8a5b55a798ac1172a29bbe3b0a5a', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-controls": this.showDropdown ? "suggestions-dropdown" : undefined, "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? "suggestions-dropdown" : undefined, "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: '35a8760963df3cc8014d9436f539e570d9fe7c5d', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '26aaea5b3b98ec8ba02568acddd602bd1e4e5668', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "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), 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`, `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/runner/work/infineon-design-system-stencil/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\""
            },
            "ariaLabel": {
                "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",
                "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": "null"
            }
        };
    }
    static get states() {
        return {
            "showDeleteIconInternalState": {},
            "isFocused": {},
            "showDropdown": {},
            "filteredSuggestions": {},
            "selectedSuggestionIndex": {},
            "searchHistory": {}
        };
    }
    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/runner/work/infineon-design-system-stencil/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 {
            "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
            }];
    }
}
//# sourceMappingURL=search-field.js.map
