@infineon/infineon-design-system-stencil 37.2.0 → 38.0.0--canary.1954.2a8a94657fa3dfa88101a47e26e0cd0e74185867.0

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

@@ -5,40 +5,355 @@ import classNames from "classnames";
 export class SearchField {
     constructor() {
         this.value = '';
-        this.insideDropdown = false;
+        this.suggestions = [];
+        this.showSuggestions = false;
+        this.maxSuggestions = 10;
+        this.maxHistoryItems = 5;
+        this.enableHistory = true;
+        this.historyKey = 'ifx-search-history';
+        this.historyHeaderText = 'Recent Searches';
+        // ARIA Labels and Accessibility Props
+        this.ariaLabel = 'Search field';
+        this.deleteIconAriaLabel = 'Clear search';
+        this.historyDeleteAriaLabel = 'Remove from history';
+        this.dropdownAriaLabel = 'Search suggestions and history';
+        this.suggestionAriaLabel = 'Search suggestion';
+        this.historyItemAriaLabel = 'Search history item';
+        this.showDropdown = false;
+        this.filteredSuggestions = [];
+        this.selectedSuggestionIndex = -1;
+        this.searchHistory = [];
         this.showDeleteIcon = false;
         this.showDeleteIconInternalState = false;
         this.disabled = false;
         this.size = 'l';
         this.isFocused = false;
         this.placeholder = "Search...";
-        this.autocomplete = "on";
+        this.autocomplete = "off";
         this.maxlength = null;
+        this.focusEmitted = false;
         this.handleInput = () => {
             const query = this.inputElement.value;
-            this.value = query; // update the value property when input changes
+            this.value = query;
             this.ifxInput.emit(this.value);
+            if (this.showSuggestions) {
+                this.showDropdown = true;
+                this.selectedSuggestionIndex = -1;
+                this.requestSuggestions(query);
+            }
         };
         this.handleDelete = () => {
             this.inputElement.value = '';
             this.value = "";
             this.ifxInput.emit(this.value);
+            this.hideDropdown();
+        };
+        this.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();
+        };
+        // Handle click on history delete button
+        this.handleHistoryDelete = (event, term) => {
+            event.stopPropagation(); // Prevent selection of the entry
+            this.removeFromHistory(term);
         };
     }
+    componentDidLoad() {
+        this.loadSearchHistory();
+    }
     handleOutsideClick(event) {
         const path = event.composedPath();
-        if (!path.includes(this.inputElement)) {
-            this.isFocused = false;
+        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 (newValue !== this.inputElement.value) {
+        if (this.inputElement && newValue !== this.inputElement.value) {
             this.inputElement.value = newValue;
         }
+        this.updateSuggestions();
+    }
+    suggestionsWatcher() {
+        this.updateSuggestions();
     }
     focusInput() {
-        this.inputElement.focus();
-        this.isFocused = true;
+        // Don't call focus() if the input is already focused to prevent unnecessary operations
+        if (document.activeElement !== this.inputElement) {
+            this.inputElement.focus();
+        }
+        // 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 completely clear history
+    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;
+            }
+        }
+    }
+    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() {
         if (!isNestedInIfxComponent(this.el)) {
@@ -53,7 +368,17 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '751f042d0ec4d4a532d77de87b022c9eb1c47e7c', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '48e4b6518cdd4fd66fc6d4f24459fd729bd6d3a7', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '71353ae1d54505b0e50d248695f20059c0d0a44d', icon: "search-16", class: "search-icon" }), h("input", { key: 'c8d3c24435218e4219be7cb2bc7ee14ab314a728', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: 'b7cf249b85fdd3b8de6e145e026031b55d689758', "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '0e19cb8ecf2bb3c82e0cc835aa66d2c144aac207', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: '2c8f71752ac2c7aa1e520b5de67a31025e66ae5d', icon: "search-16", class: "search-icon" }), h("input", { key: 'f9773fac1622f99251c7ed6c4662170bf7f94460', 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-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: '5c83b7c9655ae7bed7e56c366d77fa400d02a080', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: 'a053469803379f16fff04c053035095bffb7cbdc', 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"
@@ -61,7 +386,14 @@ export class SearchField {
             : "";
     }
     getWrapperClassNames() {
-        return classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
+        return classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`, `${this.showDropdown ? 'dropdown-open' : ""}`);
+    }
+    getSuggestionClassNames(index) {
+        var _a;
+        return classNames('suggestion-item', {
+            'suggestion-item--selected': index === this.selectedSuggestionIndex,
+            'suggestion-item--history': ((_a = this.filteredSuggestions[index]) === null || _a === void 0 ? void 0 : _a.type) === 'history'
+        });
     }
     static get is() { return "ifx-search-field"; }
     static get encapsulation() { return "shadow"; }
@@ -97,6 +429,308 @@ export class SearchField {
                 "reflect": false,
                 "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "showSuggestions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-suggestions",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "maxSuggestions": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-suggestions",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "maxHistoryItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-history-items",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "enableHistory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-history",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "historyKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "history-key",
+                "reflect": false,
+                "defaultValue": "'ifx-search-history'"
+            },
+            "historyHeaderText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "history-header-text",
+                "reflect": false,
+                "defaultValue": "'Recent Searches'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "'Search field'"
+            },
+            "ariaLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-labelled-by",
+                "reflect": false
+            },
+            "ariaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-described-by",
+                "reflect": false
+            },
+            "deleteIconAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "delete-icon-aria-label",
+                "reflect": false,
+                "defaultValue": "'Clear search'"
+            },
+            "historyDeleteAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "history-delete-aria-label",
+                "reflect": false,
+                "defaultValue": "'Remove from history'"
+            },
+            "dropdownAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-aria-label",
+                "reflect": false,
+                "defaultValue": "'Search suggestions and history'"
+            },
+            "suggestionAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suggestion-aria-label",
+                "reflect": false,
+                "defaultValue": "'Search suggestion'"
+            },
+            "historyItemAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "history-item-aria-label",
+                "reflect": false,
+                "defaultValue": "'Search history item'"
+            },
             "showDeleteIcon": {
                 "type": "boolean",
                 "mutable": false,
@@ -195,7 +829,7 @@ export class SearchField {
                 "setter": false,
                 "attribute": "autocomplete",
                 "reflect": false,
-                "defaultValue": "\"on\""
+                "defaultValue": "\"off\""
             },
             "maxlength": {
                 "type": "number",
@@ -221,7 +855,10 @@ export class SearchField {
     }
     static get states() {
         return {
-            "insideDropdown": {},
+            "showDropdown": {},
+            "filteredSuggestions": {},
+            "selectedSuggestionIndex": {},
+            "searchHistory": {},
             "showDeleteIconInternalState": {},
             "isFocused": {}
         };
@@ -238,15 +875,76 @@ export class SearchField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "String",
-                    "resolved": "String",
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxSuggestionRequested",
+                "name": "ifxSuggestionRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxSuggestionSelected",
+                "name": "ifxSuggestionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SuggestionItem",
+                    "resolved": "SuggestionItem",
                     "references": {
-                        "String": {
-                            "location": "global",
-                            "id": "global::String"
+                        "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": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxBlur",
+                "name": "ifxBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -254,6 +952,9 @@ export class SearchField {
         return [{
                 "propName": "value",
                 "methodName": "valueWatcher"
+            }, {
+                "propName": "suggestions",
+                "methodName": "suggestionsWatcher"
             }];
     }
     static get listeners() {
@@ -263,6 +964,12 @@ export class SearchField {
                 "target": "document",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }