@ukic/web-components 3.2.0 → 3.4.0

package/dist/components/ic-search-bar.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { Q as getFilteredMenuOptions, R as handleHiddenFormButtonClick, r as removeDisabledFalse, S as debounceEvent, T as getLabelFromValue, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, t as renderHiddenInput } from './helpers.js';
+import { Q as getFilteredMenuOptions, R as getLabelFromValue, S as handleHiddenFormButtonClick, r as removeDisabledFalse, T as debounceEvent, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, t as renderHiddenInput } from './helpers.js';
 import { d as defineCustomElement$9 } from './ic-button2.js';
 import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$7 } from './ic-input-container2.js';
@@ -39,7 +39,6 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.icSearchBarBlur = createEvent(this, "icSearchBarBlur", 7);
         this.icSearchBarFocus = createEvent(this, "icSearchBarFocus", 7);
         this.icKeydown = createEvent(this, "icKeydown", 7);
-        this.assistiveHintEl = null;
         this.hasTimedOut = false;
         this.inputId = `ic-search-bar-input-${inputIds++}`;
         this.menuCloseFromMenuChangeEvent = false;
@@ -48,6 +47,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.preventSubmit = false;
         this.prevNoOption = false;
         this.retryButtonClick = false;
+        this.retryViaKeyPress = false;
         this.truncateValue = false;
         this.clearButtonFocused = false;
         this.open = false;
@@ -185,52 +185,64 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 this.loading = false;
                 clearTimeout(this.timeoutTimer);
                 this.filteredOptions = this.options;
+                this.showMenuWithNoInput() && this.setMenuChange(true);
                 this.el.setFocus();
                 this.icClear.emit();
                 ev.preventDefault();
                 this.preventSubmit = true;
             }
         };
-        this.onInput = (ev) => {
-            this.value = ev.target.value;
+        this.onInput = ({ target }) => {
+            this.value = target.value;
             this.icInput.emit({ value: this.value });
-            const noOptions = [
-                { [this.labelField]: this.emptyOptionListText, [this.valueField]: "" },
-            ];
             if (this.options.length > 0) {
                 this.setMenuChange(true);
                 this.preLoad = false;
                 if (this.disableAutoFiltering === false) {
                     const rawFilteredOptions = getFilteredMenuOptions(this.options, false, this.value, "anywhere", this.labelField);
                     this.filteredOptions =
-                        rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;
+                        rawFilteredOptions.length > 0
+                            ? rawFilteredOptions
+                            : [
+                                {
+                                    [this.labelField]: this.emptyOptionListText,
+                                    [this.valueField]: "",
+                                },
+                            ];
                 }
             }
-            if (!this.showClearButton) {
-                this.handleShowClearButton(true);
-            }
+            if (!this.showClearButton)
+                this.showClearButton = true;
             this.debounceAriaLiveUpdate();
         };
-        this.onInputBlur = (ev) => {
-            const value = ev.target.value;
-            const nextFocus = ev.relatedTarget;
-            this.icSearchBarBlur.emit({ value: value, relatedTarget: nextFocus });
+        this.onInputBlur = ({ target, relatedTarget }) => {
+            this.icSearchBarBlur.emit({
+                value: target.value,
+                relatedTarget,
+            });
         };
-        this.onInputFocus = (ev) => {
-            const value = ev.target.value;
-            this.icSearchBarFocus.emit({ value: value });
-            this.handleShowClearButton(true);
+        this.onInputFocus = ({ target }) => {
+            this.icSearchBarFocus.emit({ value: target.value });
+            this.showClearButton = true;
         };
-        this.handleClearBlur = (ev) => {
-            const nextFocus = ev.relatedTarget;
-            this.icClearBlur.emit({ relatedTarget: nextFocus });
+        this.handleClearBlur = ({ relatedTarget }) => {
+            this.icClearBlur.emit({ relatedTarget });
             this.clearButtonFocused = false;
         };
-        this.handleSubmitSearchBlur = (ev) => {
-            const nextFocus = ev.relatedTarget;
-            this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });
+        this.handleSubmitSearchBlur = ({ relatedTarget }) => {
+            this.icSubmitSearchBlur.emit({ relatedTarget });
             this.searchSubmitFocused = false;
         };
+        this.setInputValue = (newValue) => {
+            if (this.inputEl) {
+                const label = getLabelFromValue(newValue, this.options, this.valueField, this.labelField);
+                if (label)
+                    this.inputEl.value = label;
+                else if (this.inputEl.value !== newValue) {
+                    this.inputEl.value = newValue;
+                }
+            }
+        };
         this.handleMouseDown = (ev) => {
             ev.preventDefault();
         };
@@ -238,7 +250,8 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.searchSubmitFocused = true;
         };
         this.handleSubmitSearch = () => {
-            this.highlightedValue && (this.value = this.highlightedValue);
+            if (this.highlightedValue)
+                this.value = this.highlightedValue;
             this.highlightedValue = undefined;
             this.icSubmitSearch.emit({ value: this.value });
             const form = this.el.closest("FORM");
@@ -289,15 +302,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.icOptionSelect.emit({ value: this.value });
         };
         this.handleMenuOptionHighlight = (ev) => {
-            var _a;
-            const optionValue = (_a = ev.detail.optionId) === null || _a === void 0 ? void 0 : _a.replace(`${this.menuId}-`, "");
-            optionValue && (this.highlightedValue = optionValue);
-            if (ev.detail.optionId) {
-                this.ariaActiveDescendant = ev.detail.optionId;
-            }
-            else {
-                this.ariaActiveDescendant = "";
-            }
+            const { optionId } = ev.detail;
+            if (optionId)
+                this.highlightedValue = optionId.replace(`${this.menuId}-`, "");
+            this.ariaActiveDescendant = optionId || "";
         };
         this.handleMenuChange = (ev) => {
             this.setMenuChange(ev.detail.open);
@@ -312,18 +320,20 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             }
         };
         this.handleHostFocus = () => {
-            if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {
+            if (this.options &&
+                (this.value || this.showMenuWithNoInput()) &&
+                !this.menuCloseFromMenuChangeEvent) {
                 this.setMenuChange(true);
             }
-            this.handleTruncateValue(false);
+            this.truncateValue = false;
+            this.showMenuWithNoInput() && this.debounceAriaLiveUpdate();
             this.icSearchBarFocus.emit();
         };
-        this.handleHostBlur = (ev) => {
+        this.handleHostBlur = ({ relatedTarget }) => {
             var _a;
-            const nextFocus = ev.relatedTarget;
             if (this.open &&
                 this.options &&
-                nextFocus !== this.menu &&
+                relatedTarget !== this.menu &&
                 !this.retryViaKeyPress &&
                 !this.retryButtonClick) {
                 this.setMenuChange(false);
@@ -331,35 +341,31 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             if (this.retryButtonClick || this.retryViaKeyPress) {
                 (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            this.handleShowClearButton(false);
+            this.showClearButton = false;
             this.menuCloseFromMenuChangeEvent = false;
-            this.handleTruncateValue(true);
-            this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
+            this.truncateValue = true;
+            this.icSearchBarBlur.emit({
+                relatedTarget,
+                value: this.value,
+            });
             this.retryViaKeyPress = false;
             this.retryButtonClick = false;
-        };
-        this.handleShowClearButton = (visible) => {
-            this.showClearButton = visible;
+            this.showMenuWithNoInput() && this.updateSearchResultAriaLive();
         };
         this.handleFocusClearButton = () => {
             this.clearButtonFocused = true;
         };
-        this.handleTruncateValue = (truncate) => {
-            this.truncateValue = truncate;
-        };
         this.renderAssistiveHintEl = () => {
-            var _a;
+            var _a, _b;
             const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.inputId}`);
             if (input &&
                 Object.keys(input).length > 0 &&
                 this.hasOptionsOrFilterDisabled()) {
                 this.assistiveHintEl = document.createElement("span");
-                this.assistiveHintEl.innerText = this.assistiveHintText || "";
+                this.assistiveHintEl.innerText = this.assistiveHintText;
                 this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;
                 this.assistiveHintEl.style.display = "none";
-                if (input.after !== undefined) {
-                    input.after(this.assistiveHintEl);
-                }
+                (_b = input.after) === null || _b === void 0 ? void 0 : _b.call(input, this.assistiveHintEl);
             }
         };
         this.updateSearchResultAriaLive = () => {
@@ -367,7 +373,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             const searchResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".search-results-status");
             if (searchResultsStatusEl) {
                 if (!this.open ||
-                    this.value === "" ||
+                    (this.value === "" && !this.showMenuWithNoInput()) ||
                     this.value.length < this.charactersUntilSuggestion) {
                     searchResultsStatusEl.innerText = "";
                 }
@@ -375,41 +381,28 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                     this.filteredOptions.length > 0 &&
                     this.open &&
                     !this.filteredOptions[0].loading) {
-                    if (this.hadNoOptions()) {
-                        searchResultsStatusEl.innerText = this.emptyOptionListText;
-                    }
-                    else {
-                        searchResultsStatusEl.innerText = `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
-                    }
+                    searchResultsStatusEl.innerText = this.hadNoOptions()
+                        ? this.emptyOptionListText
+                        : `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
                 }
             }
         };
-        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || !!this.disableAutoFiltering;
+        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableAutoFiltering;
         this.hadNoOptions = () => this.filteredOptions.length === 1 &&
             this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&
             this.searchMode === "navigation";
-        this.isSubmitDisabled = () => {
-            const valueNotSet = this.value === undefined || this.value === null || this.value === "";
-            const valueLengthLess = this.value.length < this.charactersUntilSuggestion;
-            return (valueNotSet ||
-                valueLengthLess ||
-                this.disabled ||
-                this.hadNoOptions() ||
-                this.hasTimedOut ||
-                !!this.loading);
-        };
-        this.highlightFirstOptionAfterNoResults = () => {
-            if (this.prevNoOption && this.menu && !this.hasTimedOut) {
-                this.menu.handleSetFirstOption();
-                this.prevNoOption = false;
-            }
-            const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption[this.labelField] === this.emptyOptionListText ||
-                filteredOption[this.labelField] === this.loadingErrorLabel ||
-                filteredOption[this.labelField] === this.loadingLabel);
-            if (prevNoOptionsList) {
-                this.prevNoOption = true;
-            }
-        };
+        this.isSubmitDisabled = () => !this.value ||
+            this.value.length < this.charactersUntilSuggestion ||
+            this.disabled ||
+            this.hadNoOptions() ||
+            this.hasTimedOut ||
+            this.loading;
+        this.showMenuWithNoInput = () => this.charactersUntilSuggestion === 0;
+    }
+    watchCharactersUntilSuggestionHandler() {
+        if (this.showMenuWithNoInput()) {
+            this.filteredOptions = this.options;
+        }
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -427,51 +420,48 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
     }
     watchOptionsHandler(newOptions) {
-        if (this.disableAutoFiltering && !this.hasTimedOut) {
-            this.loading = false;
-            clearTimeout(this.timeoutTimer);
-            if (newOptions.length > 0) {
-                this.filteredOptions = newOptions;
-            }
-            else {
-                if (this.hadNoOptions()) {
-                    return;
+        if (this.disableAutoFiltering) {
+            if (!this.hasTimedOut) {
+                this.loading = false;
+                clearTimeout(this.timeoutTimer);
+                if (newOptions.length > 0) {
+                    this.filteredOptions = newOptions;
+                }
+                else {
+                    if (this.hadNoOptions()) {
+                        return;
+                    }
+                    this.setMenuChange(true);
+                    if (!this.preLoad) {
+                        this.filteredOptions = [
+                            {
+                                [this.labelField]: this.emptyOptionListText,
+                                [this.valueField]: "",
+                            },
+                        ];
+                    }
+                    this.preLoad = true;
                 }
-                this.setMenuChange(true);
-                !this.preLoad &&
-                    (this.filteredOptions = [
-                        {
-                            [this.labelField]: this.emptyOptionListText,
-                            [this.valueField]: "",
-                        },
-                    ]);
-                this.preLoad = true;
             }
         }
+        else if (this.showMenuWithNoInput()) {
+            this.filteredOptions = newOptions;
+        }
         this.debounceAriaLiveUpdate();
     }
     watchValueHandler(newValue) {
-        if (this.inputEl &&
-            this.options &&
-            !!getLabelFromValue(newValue, this.options, this.valueField, this.labelField)) {
-            this.inputEl.value =
-                getLabelFromValue(newValue, this.options, this.valueField, this.labelField) || "";
-        }
-        else if (this.inputEl && this.inputEl.value !== newValue) {
-            this.inputEl.value = newValue;
-        }
+        this.setInputValue(newValue);
         this.icChange.emit({ value: newValue });
     }
     connectedCallback() {
         this.debounceChanged();
     }
     disconnectedCallback() {
-        if (this.assistiveHintEl) {
-            this.assistiveHintEl.remove();
-        }
+        var _a;
+        (_a = this.assistiveHintEl) === null || _a === void 0 ? void 0 : _a.remove();
     }
     componentWillLoad() {
-        this.watchValueHandler(this.value);
+        this.setInputValue(this.value);
         removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
@@ -480,14 +470,22 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }
         if (this.hasOptionsOrFilterDisabled()) {
             this.renderAssistiveHintEl();
-            if (this.disableAutoFiltering) {
+            if (this.disableAutoFiltering || this.showMenuWithNoInput()) {
                 this.filteredOptions = this.options;
             }
         }
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
     }
     componentWillRender() {
-        this.highlightFirstOptionAfterNoResults();
+        if (this.prevNoOption && this.menu && !this.hasTimedOut) {
+            this.menu.handleSetFirstOption();
+            this.prevNoOption = false;
+        }
+        if (this.filteredOptions.find((filteredOption) => filteredOption[this.labelField] === this.emptyOptionListText ||
+            filteredOption[this.labelField] === this.loadingErrorLabel ||
+            filteredOption[this.labelField] === this.loadingLabel)) {
+            this.prevNoOption = true;
+        }
     }
     handleKeyDown(event) {
         this.icKeydown.emit({ event });
@@ -526,66 +524,63 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }, 500);
     }
     render() {
-        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, theme, } = this;
+        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, theme, charactersUntilSuggestion, labelField, valueField, loadingLabel, loadingErrorLabel, searchMode, showClearButton, searchSubmitFocused, clearButtonFocused, } = this;
         const disabledMode = readonly || disabled;
         const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
-        let describedById;
+        let describedById = undefined;
         if (describedBy !== "" && this.hasOptionsOrFilterDisabled()) {
-            describedById = `${describedBy} ${this.inputId}-assistive-hint`;
+            describedById = `${describedBy} ${inputId}-assistive-hint`;
         }
         else if (this.hasOptionsOrFilterDisabled()) {
-            describedById = `${this.inputId}-assistive-hint`;
+            describedById = `${inputId}-assistive-hint`;
         }
         else if (describedBy !== "") {
             describedById = describedBy;
         }
-        else {
-            describedById = undefined;
-        }
-        const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();
+        const hasSuggestedSearch = (!!value || this.showMenuWithNoInput()) &&
+            this.hasOptionsOrFilterDisabled();
         const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
-        const menuRendered = menuOpen && value.length >= this.charactersUntilSuggestion;
-        const labelValue = getLabelFromValue(value, options, this.valueField, this.labelField);
-        renderHiddenInput(true, this.el, name, value, disabledMode);
-        return (h(Host, { key: '00d7c200dadef58f3be6eeae1299f255da97e79a', class: {
-                ["ic-search-bar-search"]: true,
-                ["ic-search-bar-full-width"]: !!fullWidth,
-                ["ic-search-bar-disabled"]: !!disabled,
-                ["ic-search-bar-small"]: size === "small",
+        const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
+        const labelValue = getLabelFromValue(value, options, valueField, labelField);
+        renderHiddenInput(this.el, value, name, disabledMode);
+        return (h(Host, { key: 'bfb362b72aa0441cf00cb042f0dd623b6f41d5d7', class: {
+                "ic-search-bar-search": true,
+                "ic-search-bar-full-width": fullWidth,
+                "ic-search-bar-disabled": disabled,
+                "ic-search-bar-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: 'e9620617be40182b556185417647b0ba298116d3', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '02fcdd33f0bb62ac24ca12aa09c6c5e188f20c06', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '0649a65ad29290c2a60bd33c90552e8bbc875e66', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '80b924a66fe7f7aa5193ae0e64b6e4d143ee713a', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
-                "no-left-pad": !!readonly,
-                readonly: !!readonly,
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '4abc6ab7691d77e1659016957de4a7573c7b0ba8', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '7dfd27f5e3837063f115bac7ea1af05783ad52c2', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: 'bb9bd8d704ab9e9924d10b025bbd8b74310762e2', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '29c57007bfc75825bd91cdd4e24f9d9fd44e83d8', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+                "no-left-pad": readonly,
+                readonly,
                 "truncate-value": truncateValue,
-            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": label, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '0feabdeed8caa3ac63634fdf52221c9cd8a0ea15', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": label, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '2d5c5e1bc89f7dba8ef771e018534f7613c19295', class: {
                 "clear-button-container": true,
-                "clear-button-visible": !!value && !disabledMode && this.showClearButton,
-            } }, h("ic-button", { key: '3e7e1f8e39c50eb45595d8eddc6cbc1dfd624e5c', id: "clear-button", class: {
+                "clear-button-visible": !!value && !disabledMode && showClearButton,
+            } }, h("ic-button", { key: '873de229be0ef641b2c94ccd283f5c17965fb5b9', id: "clear-button", class: {
                 "clear-button": true,
-                "clear-button-unfocused": !this.clearButtonFocused,
-            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { key: '793bf0fd78a2bfce32b78885f0478e2eb214d337', class: "divider" })), h("div", { key: '828edde2b4c950fc0e2c1faff736ee021ab6d49c', class: {
+                "clear-button-unfocused": !clearButtonFocused,
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '5f459ff9941a45c937632a1aad6f4e51de1bf56a', class: "divider" })), h("div", { key: '00bca9379e35fc62d6148258fb0d46a1a4f6a5bd', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: 'c84ee2e7957b7a9d326598af93bb50e78a41ccd2', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
-                ["search-submit-button"]: true,
-                ["search-submit-button-small"]: size === "small",
-                ["search-submit-button-unfocused"]: !this.searchSubmitFocused,
-                ["search-submit-button-disabled"]: this.isSubmitDisabled(),
-            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", theme: this.searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '2d00bc902d0b81b245348735d7e258939f98e369', class: {
+            } }, h("ic-button", { key: '0733206601764cf6563aebfe739cd8ff10d0e779', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+                "search-submit-button": true,
+                "search-submit-button-small": size === "small",
+                "search-submit-button-unfocused": !searchSubmitFocused,
+                "search-submit-button-disabled": this.isSubmitDisabled(),
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '30177d3af3b241db3e843cb83b5fbf3aab4bc003', class: {
                 "menu-container": true,
-                fullwidth: !!fullWidth,
-            } }, menuRendered && (h("ic-menu", { key: '16049726b55a6a7775343b5a74c6c8c86939ad20', class: {
+                fullwidth: fullWidth,
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '98b2ada7a19760d30ba958c31926ae93cce74988', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
-                        (filteredOptions[0][this.labelField] ===
-                            this.loadingLabel ||
-                            filteredOptions[0][this.labelField] ===
-                                this.loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { key: '9844297f2d4ed1dd4e168685da928b44eeeb4698', "aria-live": "polite", role: "status", class: "search-results-status" })));
+                        (filteredOptions[0][labelField] === loadingLabel ||
+                            filteredOptions[0][labelField] === loadingErrorLabel)),
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField })))), h("div", { key: '68d0f5afc16ce02c5b621b74754be51ffc55f2a6', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get watchers() { return {
+        "charactersUntilSuggestion": ["watchCharactersUntilSuggestionHandler"],
         "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
@@ -635,6 +630,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "filteredOptions": [32],
         "setFocus": [64]
     }, [[0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+        "charactersUntilSuggestion": ["watchCharactersUntilSuggestionHandler"],
         "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],