@ukic/web-components 3.1.0 → 3.3.0

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

@@ -6,7 +6,6 @@ let inputIds = 0;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class SearchBar {
     constructor() {
-        this.assistiveHintEl = null;
         this.hasTimedOut = false;
         this.inputId = `ic-search-bar-input-${inputIds++}`;
         this.menuCloseFromMenuChangeEvent = false;
@@ -15,6 +14,7 @@ export class SearchBar {
         this.preventSubmit = false;
         this.prevNoOption = false;
         this.retryButtonClick = false;
+        this.retryViaKeyPress = false;
         this.truncateValue = false;
         this.clearButtonFocused = false;
         this.open = false;
@@ -158,46 +158,57 @@ export class SearchBar {
                 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();
         };
@@ -205,7 +216,8 @@ export class SearchBar {
             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");
@@ -256,15 +268,10 @@ export class SearchBar {
             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);
@@ -282,15 +289,14 @@ export class SearchBar {
             if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {
                 this.setMenuChange(true);
             }
-            this.handleTruncateValue(false);
+            this.truncateValue = false;
             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);
@@ -298,35 +304,30 @@ export class SearchBar {
             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.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 = () => {
@@ -342,41 +343,22 @@ export class SearchBar {
                     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;
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -405,40 +387,32 @@ export class SearchBar {
                     return;
                 }
                 this.setMenuChange(true);
-                !this.preLoad &&
-                    (this.filteredOptions = [
+                if (!this.preLoad) {
+                    this.filteredOptions = [
                         {
                             [this.labelField]: this.emptyOptionListText,
                             [this.valueField]: "",
                         },
-                    ]);
+                    ];
+                }
                 this.preLoad = true;
             }
         }
         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() {
@@ -454,7 +428,15 @@ export class SearchBar {
         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 });
@@ -493,62 +475,57 @@ export class SearchBar {
         }, 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 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: 'a1e560e97f324268abb887ac3b8188acc1c6d42f', 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: '5120b79da9d0840d87421287913f49cda06da4f3', 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: '327a761189705de2cd7b4f4163f494701a34276c', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '80f4bb67acb9232b36014d34f320471bedcc1ad3', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '0fb2a97aad0bd1f185ed3fc456c589dbcb7ce99d', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '3af78e40aa89ce0bad6693f6371015486c1cd103', 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: '246484c51e7169a8f9944b66499126ea3d86921a', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '043651daee6abf565a44ad6c1c090e8d6dd85f8a', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '880ab5440ec935340d56dd69e64e467879f3bbc5', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '37ece1e8c9f5ab12f2f3a303544c882192a07107', 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: '23d4349d4b0f905bbf90bf1826a3a90559c62b9d', 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: '4498fbe2293958c1ae6f6ddfeab15b2ff29ca2a8', class: {
                 "clear-button-container": true,
-                "clear-button-visible": !!value && !disabledMode && this.showClearButton,
-            } }, h("ic-button", { key: '90cd4ab4601fabfca86d92d9c6cb7d5751d43758', id: "clear-button", class: {
+                "clear-button-visible": !!value && !disabledMode && showClearButton,
+            } }, h("ic-button", { key: '561c5cbe830f34bc80967e0899f2dc8526c1c4f7', 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: '79c1bb38267e6ebef413f7f9a6ba0ac8a28b5f12', class: "divider" })), h("div", { key: '91b16ca2d959cf2d36cbbe75eb210fd254cff723', 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: '9c783d276ad0a931e538a79ce303ad060db1fa1b', class: "divider" })), h("div", { key: '5babcd978eb8263ca710b32ead6926c95f558838', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '3b2aac9b7ae9ba4e78979d5ecc64a8aa2035e23a', 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: '548b4ee1e050efd6a8d50d7640e3cad32ac3002c', class: {
+            } }, h("ic-button", { key: '785dbe4deb7549662d263f74b75c759b932399fb', 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: '78297ce56515a4f1f50a8108949a20837c87828f', class: {
                 "menu-container": true,
-                fullwidth: !!fullWidth,
-            } }, menuRendered && (h("ic-menu", { key: '3d495b2ee381d30984316f0143c148731b179304', class: {
+                fullwidth: fullWidth,
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: 'd527adddfc250b1f0fe605cbaec5f08ea1e25c04', 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: 'd3a4abf5d1d7ca686b696c283e86a6c84ff39f92', "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: '716cd74ed9726cd134772aba2b98e374face0753', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get is() { return "ic-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -569,8 +546,8 @@ export class SearchBar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -590,7 +567,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocompleteTypes",
-                    "resolved": "IcAutocompleteTypes | undefined",
+                    "resolved": "\"on\" | \"off\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
                     "references": {
                         "IcAutocompleteTypes": {
                             "location": "import",
@@ -600,7 +577,7 @@ export class SearchBar {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The state of autocompletion the browser can apply on the text value."
@@ -616,7 +593,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocorrectStates",
-                    "resolved": "\"off\" | \"on\" | undefined",
+                    "resolved": "\"off\" | \"on\"",
                     "references": {
                         "IcAutocorrectStates": {
                             "location": "import",
@@ -626,7 +603,7 @@ export class SearchBar {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
@@ -641,8 +618,8 @@ export class SearchBar {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean | undefined",
-                    "resolved": "boolean | undefined",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -662,11 +639,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number | undefined",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number."
@@ -682,11 +659,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
@@ -702,11 +679,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\nIf `true`, all options provided will be displayed."
@@ -722,11 +699,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number | undefined",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
@@ -742,11 +719,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The text displayed when there are no options in the option list."
@@ -762,11 +739,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the search bar will be focused when component loaded."
@@ -782,11 +759,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
@@ -802,11 +779,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The helper text that will be displayed for additional field guidance."
@@ -822,11 +799,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
@@ -842,11 +819,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The hint text for the hidden assistive description element."
@@ -881,11 +858,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The custom name for the label field to correspond with the IcMenuOption type."
@@ -901,11 +878,11 @@ export class SearchBar {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Trigger loading state when fetching options asynchronously"
@@ -921,11 +898,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Change the message displayed when external loading times out."
@@ -941,11 +918,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Change the message displayed whilst the options are being loaded externally."
@@ -961,11 +938,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
@@ -981,11 +958,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The placeholder value to display."
@@ -1001,11 +978,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the readonly state will be set."
@@ -1021,11 +998,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the search bar will require a value."
@@ -1041,7 +1018,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSearchBarSearchModes",
-                    "resolved": "\"navigation\" | \"query\" | undefined",
+                    "resolved": "\"navigation\" | \"query\"",
                     "references": {
                         "IcSearchBarSearchModes": {
                             "location": "import",
@@ -1051,7 +1028,7 @@ export class SearchBar {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches."
@@ -1067,7 +1044,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\" | undefined",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -1077,7 +1054,7 @@ export class SearchBar {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The size of the search bar component."
@@ -1092,8 +1069,8 @@ export class SearchBar {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean | undefined",
-                    "resolved": "boolean | undefined",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -1113,7 +1090,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -1123,7 +1100,7 @@ export class SearchBar {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
@@ -1158,11 +1135,11 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The custom name for the value field to correspond with the IcMenuOption type."
@@ -1178,7 +1155,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcMenuOption[]",
-                    "resolved": "IcMenuOption[] | undefined",
+                    "resolved": "IcMenuOption[]",
                     "references": {
                         "IcMenuOption": {
                             "location": "import",
@@ -1188,7 +1165,7 @@ export class SearchBar {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The suggested search options."
@@ -1202,11 +1179,11 @@ export class SearchBar {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The value of the search input."