@infineon/infineon-design-system-stencil 37.5.1--canary.1723.34ea69810f554741126370a7b5230b9aef9d65e5.0 → 37.6.0--canary.1954.6c07dfe4ac965c782ba6feeb2957e37be53515a7.0

package/dist/components/p-15597da9.js

@@ -0,0 +1,470 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
+import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
+import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { d as defineCustomElement$1 } from './p-627ff0cb.js';
+
+const searchFieldCss = ":root {\n  --ifx-font-family: \"Source Sans 3\", \"Arial, sans-serif\";\n}\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: #FFFFFF;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative;\n}\n.search-field .search-field__wrapper {\n  box-sizing: border-box;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  border: 1px solid #8D8786;\n  border-radius: 1px;\n  padding: 8px 16px;\n  gap: 12px;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  position: relative;\n  width: 100%;\n  outline: none;\n  color: #8D8786;\n}\n.search-field .search-field__wrapper.focused {\n  border: 1px solid #0A8276;\n}\n.search-field .search-field__wrapper.focused ifx-icon {\n  color: #575352;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n  height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n  border: 1px solid #3C3A39;\n}\n.search-field .search-field__wrapper:focus {\n  outline: none;\n  border: 1px solid #0A8276;\n}\n.search-field .search-field__wrapper .delete-icon {\n  right: 12px;\n  cursor: pointer;\n}\n.search-field .search-field__wrapper input[type=text] {\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  color: #8D8786;\n  border: none;\n  width: 100%;\n  outline: none;\n  height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n  outline: none;\n  color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n  background-color: #EEEDED;\n}\n.search-field .search-field__wrapper:has(input[disabled]) {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: #FFFFFF;\n  margin-top: 4px;\n  border: 1px solid #EEEDED;\n  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n  z-index: 1000;\n  max-height: 300px;\n  overflow-y: auto;\n  container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n  font-family: Source Sans 3;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  color: #575352;\n  border-bottom: 1px solid #EEEDED;\n  padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n  border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n  color: #575352;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n  color: #8D8786;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 2px;\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n    width: 100%;\n    max-width: 100%;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n    margin-left: 0;\n    margin-top: 0;\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n  }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n  color: #8D8786;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n  color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n  opacity: 1;\n  visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n  border-radius: 1px 1px 0 0;\n  border-color: #0A8276;\n}";
+const IfxSearchFieldStyle0 = searchFieldCss;
+
+const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ifxInput = createEvent(this, "ifxInput", 7);
+        this.ifxSuggestionRequested = createEvent(this, "ifxSuggestionRequested", 7);
+        this.ifxSuggestionSelected = createEvent(this, "ifxSuggestionSelected", 7);
+        this.ifxFocus = createEvent(this, "ifxFocus", 7);
+        this.ifxBlur = createEvent(this, "ifxBlur", 7);
+        this.value = '';
+        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 = "off";
+        this.maxlength = null;
+        this.focusEmitted = false;
+        this.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);
+            }
+        };
+        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);
+        };
+    }
+    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();
+    }
+    focusInput() {
+        // 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
+        ];
+    }
+    async componentWillLoad() {
+        this.loadSearchHistory();
+        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: '637f2c7144beb35f9915a64fac8df66d65ec5118', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'b5c4d373d93a9225ca08db7340e2732f585c5e80', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: '6cc46a75102036d4706d8873e4d0481d0bce263f', icon: "search-16", class: "search-icon" }), h("input", { key: 'd770d8a5dc8cf75c8a0f3f3f9d557ccf88bf525d', 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: 'be15e8157313ad37d0b991ea74b46ba8a7c88880', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: 'd3a1e06a246436ffbc239c502bd76c9250317411', 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' : ""}`);
+    }
+    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'
+        });
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["valueWatcher"],
+        "suggestions": ["suggestionsWatcher"]
+    }; }
+    static get style() { return IfxSearchFieldStyle0; }
+}, [1, "ifx-search-field", {
+        "value": [1025],
+        "suggestions": [16],
+        "showSuggestions": [4, "show-suggestions"],
+        "maxSuggestions": [2, "max-suggestions"],
+        "maxHistoryItems": [2, "max-history-items"],
+        "enableHistory": [4, "enable-history"],
+        "historyKey": [1, "history-key"],
+        "historyHeaderText": [1, "history-header-text"],
+        "ariaLabel": [1, "aria-label"],
+        "ariaLabelledBy": [1, "aria-labelled-by"],
+        "ariaDescribedBy": [1, "aria-described-by"],
+        "deleteIconAriaLabel": [1, "delete-icon-aria-label"],
+        "historyDeleteAriaLabel": [1, "history-delete-aria-label"],
+        "dropdownAriaLabel": [1, "dropdown-aria-label"],
+        "suggestionAriaLabel": [1, "suggestion-aria-label"],
+        "historyItemAriaLabel": [1, "history-item-aria-label"],
+        "showDeleteIcon": [4, "show-delete-icon"],
+        "disabled": [4],
+        "size": [1],
+        "placeholder": [1],
+        "autocomplete": [1],
+        "maxlength": [2],
+        "showDropdown": [32],
+        "filteredSuggestions": [32],
+        "selectedSuggestionIndex": [32],
+        "searchHistory": [32],
+        "showDeleteIconInternalState": [32],
+        "isFocused": [32]
+    }, [[5, "mousedown", "handleOutsideClick"], [0, "keydown", "handleKeyDown"]], {
+        "value": ["valueWatcher"],
+        "suggestions": ["suggestionsWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-search-field", "ifx-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-search-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchField);
+            }
+            break;
+        case "ifx-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SearchField as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-15597da9.js.map

package/dist/components/p-15597da9.js.map

@@ -0,0 +1 @@
+{"file":"p-15597da9.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative; // Wichtig für absolute positioning des Dropdowns\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n\n  // Suggestions Dropdown Styles\n  .suggestions-dropdown {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: tokens.$ifxColorBaseWhite;\n    margin-top: tokens.$ifxSpace50;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n    z-index: 1000;\n    max-height: 300px;\n    overflow-y: auto;\n    container-type: inline-size; // Enable container queries\n\n    .suggestions-header {\n      // font: tokens.$ifxEyebrowEyebrow02; TODO\n      font-family: Source Sans 3;\n      font-size: 0.8125rem;\n      font-weight: 600;\n      line-height: 1.25rem;\n\n      letter-spacing: 0.25em;\n      text-transform: uppercase;\n      color: tokens.$ifxColorEngineering500;\n      border-bottom: 1px solid tokens.$ifxColorEngineering200;\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n    }\n\n    .suggestion-item {\n      padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n      cursor: pointer;\n      transition: background-color 0.2s ease;\n\n      &:last-child {\n        border-bottom: none;\n      }\n\n      &:hover,\n      &--selected {\n        background-color: tokens.$ifxColorEngineering200;\n      }\n\n      .suggestion-content {\n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace150;\n\n        .suggestion-icon {\n          color: tokens.$ifxColorEngineering500;\n          flex-shrink: 0;\n\n          &--history {\n            color: tokens.$ifxColorEngineering500;\n          }\n        }\n\n        .suggestion-text {\n          flex: 1;\n          display: flex;\n          align-items: center;\n          min-width: 0; // Important for flexbox truncation\n\n          .suggestion-main-text {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            flex-shrink: 1;\n            min-width: 0;\n          }\n\n          .suggestion-scope {\n            color: tokens.$ifxColorEngineering400;\n            flex-shrink: 0; // Never truncate the scope\n            white-space: nowrap;\n            margin-left: tokens.$ifxSpace25; // Add space before the scope\n            font-weight: tokens.$ifxFontWeightSemibold;\n            font-size: tokens.$ifxFontSizeXs;\n          }\n\n          // When container is narrow, stack scope below main text\n          @container (max-width: 320px) {\n            flex-direction: column;\n            align-items: flex-start;\n\n            .suggestion-main-text {\n              width: 100%;\n              max-width: 100%;\n            }\n\n            .suggestion-scope {\n              margin-left: 0;\n              margin-top: 0;\n              width: 100%;\n              max-width: 100%;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              flex-shrink: 1; // Allow truncation when narrow\n            }\n          }\n        }\n\n        .suggestion-count {\n          color: tokens.$ifxColorEngineering400;\n          margin-left: auto;\n          flex-shrink: 0;\n        }\n\n        .suggestion-delete-icon {\n          opacity: 0;\n          visibility: hidden;\n          transition: opacity 0.2s ease, visibility 0.2s ease;\n          cursor: pointer;\n          margin-left: auto;\n          flex-shrink: 0;\n          color: tokens.$ifxColorEngineering500;\n\n          &:hover {\n            color: tokens.$ifxColorEngineering600;\n          }\n        }\n      }\n\n      &:hover {\n        .suggestion-delete-icon {\n          opacity: 1;\n          visibility: visible;\n        }\n      }\n    }\n  }\n\n  // Wrapper modifications when dropdown is open\n  .search-field__wrapper.dropdown-open {\n    border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\n    border-color: tokens.$ifxColorOcean500;\n  }\n}\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\nexport interface SuggestionItem {\n  id: string;\n  text: string;\n  type?: 'suggestion' | 'history';\n  scope?: string;\n  resultCount?: number;\n  metadata?: any;\n}\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  private dropdownElement: HTMLDivElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() suggestions: SuggestionItem[] = [];\n  @Prop() showSuggestions: boolean = false;\n  @Prop() maxSuggestions: number = 10;\n  @Prop() maxHistoryItems: number = 5;\n  @Prop() enableHistory: boolean = true;\n  @Prop() historyKey: string = 'ifx-search-history';\n  @Prop() historyHeaderText: string = 'Recent Searches';\n\n  // ARIA Labels and Accessibility Props\n  @Prop() ariaLabel: string | null = \"Search Field\"\n  @Prop() ariaLabelledBy?: string | null;\n  @Prop() ariaDescribedBy?: string | null;\n  @Prop() deleteIconAriaLabel: string = 'Clear search';\n  @Prop() historyDeleteAriaLabel: string = 'Remove from history';\n  @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\n  @Prop() suggestionAriaLabel: string = 'Search suggestion';\n  @Prop() historyItemAriaLabel: string = 'Search history item';\n\n  @Event() ifxInput: EventEmitter<string>;\n  @Event() ifxSuggestionRequested: EventEmitter<string>;\n  @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\n  @Event() ifxFocus: EventEmitter<void>;\n  @Event() ifxBlur: EventEmitter<void>;\n\n  @State() showDropdown: boolean = false;\n  @State() filteredSuggestions: SuggestionItem[] = [];\n  @State() selectedSuggestionIndex: number = -1;\n  @State() searchHistory: string[] = [];\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"off\";\n  @Prop() maxlength?: number = null;\n\n  private focusEmitted: boolean = false;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {\n      this.hideDropdown();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.showDropdown) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigateSuggestions(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigateSuggestions(-1);\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this.selectedSuggestionIndex >= 0) {\n          this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\n        } else {\n          this.handleSearch();\n        }\n        break;\n      case 'Escape':\n        this.hideDropdown();\n        break;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (this.inputElement && newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n    this.updateSuggestions();\n  }\n\n  @Watch('suggestions')\n  suggestionsWatcher() {\n    this.updateSuggestions();\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query;\n    this.ifxInput.emit(this.value);\n\n    if (this.showSuggestions) {\n      this.showDropdown = true;\n      this.selectedSuggestionIndex = -1;\n      this.requestSuggestions(query);\n    }\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n    this.hideDropdown();\n  }\n\n  handleSearch = () => {\n    if (this.value.trim() && this.enableHistory) {\n      // Only add to history if there are actual results\n      if (this.filteredSuggestions.length > 0) {\n        this.addToHistory(this.value);\n      }\n    }\n    this.hideDropdown();\n  }\n\n  focusInput() {\n    // Don't call focus() if the input is already focused to prevent unnecessary operations\n    if (document.activeElement !== this.inputElement) {\n      this.inputElement.focus();\n    }\n\n    // Only emit focus event if it hasn't been emitted already\n    if (!this.focusEmitted) {\n      this.focusEmitted = true;\n      this.isFocused = true;\n      this.ifxFocus.emit();\n    }\n\n    if (this.showSuggestions) {\n      // On focus without input: Show only history\n      if (this.value.length === 0) {\n        this.showHistoryDropdown();\n        // Only show dropdown if history is actually present\n        this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\n      } else {\n        // With existing input: Normal suggestion logic\n        this.updateSuggestions();\n        this.showDropdown = this.filteredSuggestions.length > 0;\n      }\n    }\n  }\n\n  blurInput() {\n    setTimeout(() => {\n      this.isFocused = false;\n      this.focusEmitted = false; // Reset focus flag when blur occurs\n      this.ifxBlur.emit();\n    }, 150);\n  }\n\n  // Public method to update history from external sources\n  public loadSearchHistory() {\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\n      const stored = localStorage.getItem(this.historyKey);\n      this.searchHistory = stored ? JSON.parse(stored) : [];\n\n      // Update suggestions when history is loaded\n      this.updateSuggestions();\n\n      // If no input and no history left, close dropdown\n      if (this.value.length === 0 && this.searchHistory.length === 0) {\n        this.showDropdown = false;\n      }\n    }\n  }\n\n  // Public method to completely clear history\n  public clearSearchHistory() {\n    if (this.enableHistory && typeof localStorage !== 'undefined') {\n      // Clear from localStorage\n      localStorage.removeItem(this.historyKey);\n\n      // Clear internal history\n      this.searchHistory = [];\n\n      // Reset all dropdown-relevant states\n      this.filteredSuggestions = [];\n      this.selectedSuggestionIndex = -1;\n      this.showDropdown = false;\n\n      // Update suggestions after reset\n      this.updateSuggestions();\n    }\n  }\n\n  // Suggestion Management Methods\n  private addToHistory(term: string) {\n    if (!this.enableHistory || !term.trim()) return;\n\n    const history = [...this.searchHistory];\n    const existingIndex = history.indexOf(term);\n\n    if (existingIndex > -1) {\n      history.splice(existingIndex, 1);\n    }\n\n    history.unshift(term);\n    // Limit history to maxHistoryItems (default 5)\n    this.searchHistory = history.slice(0, this.maxHistoryItems);\n\n    if (typeof localStorage !== 'undefined') {\n      localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n    }\n  }\n\n  // Remove individual history entry\n  private removeFromHistory(term: string) {\n    if (!this.enableHistory) return;\n\n    const history = [...this.searchHistory];\n    const index = history.indexOf(term);\n\n    if (index > -1) {\n      history.splice(index, 1);\n      this.searchHistory = history;\n\n      // Update localStorage\n      if (typeof localStorage !== 'undefined') {\n        localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\n      }\n\n      // Update suggestions after removal\n      this.updateSuggestions();\n\n      // Close dropdown if no history remains\n      if (this.searchHistory.length === 0 && this.value.length === 0) {\n        this.showDropdown = false;\n      }\n    }\n  }\n\n  // Handle click on history delete button\n  private handleHistoryDelete = (event: Event, term: string) => {\n    event.stopPropagation(); // Prevent selection of the entry\n    this.removeFromHistory(term);\n  }\n\n  private requestSuggestions(query: string) {\n    this.ifxSuggestionRequested.emit(query);\n    this.updateSuggestions();\n  }\n\n  private updateSuggestions() {\n    const query = this.value.toLowerCase();\n    let suggestions: SuggestionItem[] = [];\n\n    if (query.length > 0) {\n      // For text input: Mix external suggestions and relevant history\n\n      // 1. Filter external suggestions\n      if (this.suggestions && this.suggestions.length > 0) {\n        const filteredExternal = this.suggestions.filter(s =>\n          s.text.toLowerCase().includes(query)\n        );\n        suggestions = [...suggestions, ...filteredExternal];\n      }\n\n      // 2. Filter relevant history entries\n      if (this.enableHistory && this.searchHistory.length > 0) {\n        const filteredHistory = this.searchHistory\n          .filter(term => term.toLowerCase().includes(query))\n          .map((term, index) => ({\n            id: `history-${index}`,\n            text: term,\n            type: 'history' as const\n          }));\n        suggestions = [...suggestions, ...filteredHistory];\n      }\n\n      // 3. Sort by relevance (exact matches first, then prefix matches)\n      suggestions.sort((a, b) => {\n        const aText = a.text.toLowerCase();\n        const bText = b.text.toLowerCase();\n\n        // Exact match has highest priority\n        if (aText === query && bText !== query) return -1;\n        if (bText === query && aText !== query) return 1;\n\n        // Prefix match has second highest priority\n        const aStartsWith = aText.startsWith(query);\n        const bStartsWith = bText.startsWith(query);\n\n        if (aStartsWith && !bStartsWith) return -1;\n        if (bStartsWith && !aStartsWith) return 1;\n\n        // With equal relevance: external suggestions before history\n        if (a.type === 'suggestion' && b.type === 'history') return -1;\n        if (a.type === 'history' && b.type === 'suggestion') return 1;\n\n        // Alphabetical sorting as last criterion\n        return aText.localeCompare(bText);\n      });\n\n    } else {\n      // For empty query: Show only history (no external suggestions)\n      if (this.enableHistory && this.searchHistory.length > 0) {\n        const historySuggestions = this.searchHistory.map((term, index) => ({\n          id: `history-${index}`,\n          text: term,\n          type: 'history' as const\n        }));\n\n        suggestions = historySuggestions;\n      }\n      // For empty query DO NOT show external suggestions\n    }\n\n    // Remove duplicates based on text and scope combination (history takes precedence over external)\n    const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\n      const existingIndex = unique.findIndex(item =>\n        item.text.toLowerCase() === current.text.toLowerCase() &&\n        item.scope === current.scope\n      );\n      if (existingIndex === -1) {\n        unique.push(current);\n      } else {\n        // If already exists, prefer history over external suggestions\n        if (current.type === 'history' && unique[existingIndex].type !== 'history') {\n          unique[existingIndex] = current;\n        }\n      }\n      return unique;\n    }, []);\n\n    this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\n    this.selectedSuggestionIndex = -1;\n  }\n\n  private navigateSuggestions(direction: number) {\n    const maxIndex = this.filteredSuggestions.length - 1;\n\n    if (direction > 0) {\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\n        ? this.selectedSuggestionIndex + 1\n        : 0;\n    } else {\n      this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\n        ? this.selectedSuggestionIndex - 1\n        : maxIndex;\n    }\n  }\n\n  private selectSuggestion(suggestion: SuggestionItem) {\n    this.value = suggestion.text;\n    this.inputElement.value = suggestion.text;\n    this.ifxSuggestionSelected.emit(suggestion);\n    this.ifxInput.emit(this.value);\n\n    if (this.enableHistory) {\n      // Always add selected suggestions to history since they are valid results\n      this.addToHistory(suggestion.text);\n    }\n\n    this.hideDropdown();\n  }\n\n  private hideDropdown() {\n    this.showDropdown = false;\n    this.selectedSuggestionIndex = -1;\n    this.isFocused = false;\n  }\n\n  // Show only history in dropdown (e.g. on focus without input)\n  private showHistoryDropdown() {\n    if (this.enableHistory && this.searchHistory.length > 0) {\n      // Show only history entries\n      const historySuggestions = this.searchHistory.map((term, index) => ({\n        id: `history-${index}`,\n        text: term,\n        type: 'history' as const\n      }));\n\n      this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\n      this.selectedSuggestionIndex = -1;\n    } else {\n      this.filteredSuggestions = [];\n    }\n  }\n\n  // Check if only history entries are displayed (without text input)\n  private isShowingOnlyHistory(): boolean {\n    return this.value.length === 0 &&\n           this.filteredSuggestions.length > 0 &&\n           this.filteredSuggestions.every(s => s.type === 'history');\n  }\n\n  // Render text with highlighted matches\n  private renderHighlightedText(text: string, query: string) {\n    if (!query || query.length === 0) {\n      return text;\n    }\n\n    const lowerText = text.toLowerCase();\n    const lowerQuery = query.toLowerCase();\n    const index = lowerText.indexOf(lowerQuery);\n\n    if (index === -1) {\n      return text;\n    }\n\n    const before = text.substring(0, index);\n    const match = text.substring(index, index + query.length);\n    const after = text.substring(index + query.length);\n\n    return [\n      before,\n      <strong>{match}</strong>,\n      after\n    ];\n  }\n\n  async componentWillLoad() {\n    this.loadSearchHistory();\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework()\n      trackComponent('ifx-search-field', await framework)\n    }\n  }\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div\n        aria-disabled={this.disabled}\n        aria-value={this.value}\n        class='search-field'\n      >\n        <div\n          class={this.getWrapperClassNames()}\n          tabindex={1}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            onFocus={() => this.focusInput()}\n            onBlur={() => this.blurInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value}\n            role=\"combobox\"\n            aria-expanded={this.showDropdown}\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledBy}\n            aria-describedby={this.ariaDescribedBy}\n            aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\n            aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon\n              icon=\"cRemove16\"\n              class=\"delete-icon\"\n              onClick={this.handleDelete}\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label={this.deleteIconAriaLabel}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  this.handleDelete();\n                }\n              }}>\n            </ifx-icon>\n          ) : null}\n        </div>\n\n        {/* Suggestions Dropdown */}\n        {this.showDropdown && this.filteredSuggestions.length > 0 && (\n          <div\n            ref={(el) => (this.dropdownElement = el)}\n            id=\"suggestions-dropdown\"\n            class=\"suggestions-dropdown\"\n            role=\"listbox\"\n            aria-label={this.dropdownAriaLabel}\n          >\n            {/* History Header - only show when exclusively showing history entries */}\n            {this.isShowingOnlyHistory() && (\n              <div class=\"suggestions-header\">\n                {this.historyHeaderText}\n              </div>\n            )}\n\n            {this.filteredSuggestions.map((suggestion, index) => (\n              <div\n                key={suggestion.id}\n                id={`suggestion-${index}`}\n                class={this.getSuggestionClassNames(index)}\n                role=\"option\"\n                aria-selected={index === this.selectedSuggestionIndex}\n                aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\n                onClick={() => this.selectSuggestion(suggestion)}\n                onMouseEnter={() => this.selectedSuggestionIndex = index}\n              >\n                <div class=\"suggestion-content\">\n                  {suggestion.type === 'history' && (\n                    <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\n                  )}\n                  {suggestion.type === 'suggestion' && (\n                    <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\n                  )}\n                  <span class=\"suggestion-text\">\n                    <span class=\"suggestion-main-text\">\n                      {this.renderHighlightedText(suggestion.text, this.value)}\n                    </span>\n                    {suggestion.scope && (\n                      <span class=\"suggestion-scope\">– {suggestion.scope}</span>\n                    )}\n                  </span>\n\n                  {suggestion.resultCount !== undefined && suggestion.scope && (\n                    <span class=\"suggestion-count\">{suggestion.resultCount}</span>\n                  )}\n\n                  {/* Delete Button only for history entries */}\n                  {suggestion.type === 'history' && (\n                    <ifx-icon\n                      icon=\"cross16\"\n                      class=\"suggestion-delete-icon\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      aria-label={`${this.historyDeleteAriaLabel}: ${suggestion.text}`}\n                      onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\n                      onKeyDown={(event) => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                          event.preventDefault();\n                          this.handleHistoryDelete(event, suggestion.text);\n                        }\n                      }}\n                    ></ifx-icon>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`,\n      `${this.showDropdown ? 'dropdown-open' : \"\"}`\n    );\n  }\n\n  getSuggestionClassNames(index: number) {\n    return classNames(\n      'suggestion-item',\n      {\n        'suggestion-item--selected': index === this.selectedSuggestionIndex,\n        'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\n      }\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-4f7fbf98.js → p-1bd23a52.js}

@@ -20,8 +20,8 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends H {
         }
     }
     render() {
-        return (h("div", { key: '491961e58b6b28f7031ef6adb38660f078e2c4d9', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'ee758e13b668f5cd9c36a9485d284b988fb24795', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '690d0fb55c5f090e09dd246cee925ea5cbe84f9b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '79dfa55b93899e5e3b4217d973fe97e68f6ba49a', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'dfd76b1a802ba42df1becfae9a0196b60603e1c6', id: "spinner/conductor" }, h("path", { key: '90bf53982e95d93273cea18d746ea83ae1f58066', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (h("div", { key: '7cec3ef86795185d14979ea67bb02b94ca428b07', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'd8dea5acb66bde0f42beb7fe9ee69d887d5ca178', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '51decc3e682ab5a2bee56c06d86663865acbf42b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'dd0f03cea52f1297d5f46939d2f7d205d846fe80', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'ceed7284918f1a9efc1e29f84b986088729cd89e', id: "spinner/conductor" }, h("path", { key: 'a0982b7a458375bcab0d8d6ebb635f6901bca7b1', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -54,4 +54,4 @@ function defineCustomElement() {
 
 export { Spinner as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-4f7fbf98.js.map
+//# sourceMappingURL=p-1bd23a52.js.map

package/dist/components/{p-4f7fbf98.js.map → p-1bd23a52.js.map}

@@ -1 +1 @@
-{"file":"p-4f7fbf98.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCUZ,OAAO;IALpB;;;;QASU,aAAQ,GAAY,KAAK,CAAC;KAqCnC;IAnCC,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;SAC/C;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n"],"version":3}
+{"file":"p-1bd23a52.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCUZ,OAAO;IALpB;;;;QASU,aAAQ,GAAY,KAAK,CAAC;KAqCnC;IAnCC,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;SAC/C;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,0DAAG,EAAE,EAAC,mBAAmB,IACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n"],"version":3}