@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

@@ -16,14 +16,139 @@ export class SearchBar {
         this.prevNoOption = false;
         this.retryButtonClick = false;
         this.truncateValue = false;
+        this.clearButtonFocused = false;
+        this.open = false;
+        this.searchSubmitFocused = false;
+        this.showClearButton = false;
+        /**
+         * The automatic capitalisation of the text value as it is entered/edited by the user.
+         * Available options: "off", "none", "on", "sentences", "words", "characters".
+         */
+        this.autocapitalize = "off";
+        /**
+         * The state of autocompletion the browser can apply on the text value.
+         */
+        this.autocomplete = "off";
+        /**
+         * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+         */
+        this.autocorrect = "off";
+        /**
+         * If `true`, the form control will have input focus when the page loads.
+         */
+        this.autofocus = false;
+        /**
+         * 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.
+         */
+        this.charactersUntilSuggestion = 2;
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
+         * If `true`, all options provided will be displayed.
+         */
+        this.disableAutoFiltering = false;
+        /**
+         * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * The text displayed when there are no options in the option list.
+         */
+        this.emptyOptionListText = "No results found";
+        /**
+         * If `true`, the search bar will be focused when component loaded.
+         */
+        this.focusOnLoad = false;
+        /**
+         * Specify whether the search bar fills the full width of the container.
+         * If `true`, this overrides the --input-width CSS variable.
+         */
+        this.fullWidth = false;
+        /**
+         * The helper text that will be displayed for additional field guidance.
+         */
+        this.helperText = "";
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
+        /**
+         * The hint text for the hidden assistive description element.
+         */
+        this.assistiveHintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
+        /**
+         * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        this.labelField = "label";
+        /**
+         * Trigger loading state when fetching options asynchronously
+         */
+        this.loading = false;
+        /**
+         * Change the message displayed when external loading times out.
+         */
+        this.loadingErrorLabel = "Loading Error";
+        /**
+         * Change the message displayed whilst the options are being loaded externally.
+         */
+        this.loadingLabel = "Loading...";
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The placeholder value to display.
+         */
+        this.placeholder = "Search";
+        /**
+         * If `true`, the readonly state will be set.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the search bar will require a value.
+         */
+        this.required = false;
+        /**
+         * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+         */
+        this.searchMode = "navigation";
+        /**
+         * The size of the search bar component.
+         */
+        this.size = "medium";
+        /**
+         * If `true`, the value of the search will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        this.valueField = "value";
+        this.filteredOptions = [];
+        /**
+         * The suggested search options.
+         */
+        this.options = [];
+        /**
+         * The value of the search input.
+         */
+        this.value = "";
         this.handleClear = (ev) => {
+            var _a;
             const keyboardEvent = ev;
             const mouseEvent = ev;
             if (mouseEvent.type === "click" ||
                 keyboardEvent.code === "Enter" ||
                 keyboardEvent.code === "Space") {
                 this.value = "";
-                this.inputEl.value = "";
+                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("value", "");
                 this.loading = false;
                 clearTimeout(this.timeoutTimer);
                 this.filteredOptions = this.options;
@@ -138,7 +263,7 @@ export class SearchBar {
                 this.ariaActiveDescendant = ev.detail.optionId;
             }
             else {
-                this.ariaActiveDescendant = undefined;
+                this.ariaActiveDescendant = "";
             }
         };
         this.handleMenuChange = (ev) => {
@@ -196,7 +321,7 @@ export class SearchBar {
                 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) {
@@ -205,7 +330,8 @@ export class SearchBar {
             }
         };
         this.updateSearchResultAriaLive = () => {
-            const searchResultsStatusEl = this.el.shadowRoot.querySelector(".search-results-status");
+            var _a;
+            const searchResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".search-results-status");
             if (searchResultsStatusEl) {
                 if (!this.open ||
                     this.value === "" ||
@@ -225,7 +351,7 @@ export class SearchBar {
                 }
             }
         };
-        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";
@@ -237,7 +363,7 @@ export class SearchBar {
                 this.disabled ||
                 this.hadNoOptions() ||
                 this.hasTimedOut ||
-                this.loading);
+                !!this.loading);
         };
         this.highlightFirstOptionAfterNoResults = () => {
             if (this.prevNoOption && this.menu && !this.hasTimedOut) {
@@ -251,44 +377,6 @@ export class SearchBar {
                 this.prevNoOption = true;
             }
         };
-        this.ariaActiveDescendant = undefined;
-        this.clearButtonFocused = false;
-        this.highlightedValue = undefined;
-        this.open = false;
-        this.searchSubmitFocused = false;
-        this.showClearButton = false;
-        this.autocapitalize = "off";
-        this.autocomplete = "off";
-        this.autocorrect = "off";
-        this.autofocus = false;
-        this.charactersUntilSuggestion = 2;
-        this.disabled = false;
-        this.disableAutoFiltering = false;
-        this.debounce = 0;
-        this.emptyOptionListText = "No results found";
-        this.focusOnLoad = false;
-        this.fullWidth = false;
-        this.helperText = "";
-        this.hideLabel = false;
-        this.assistiveHintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
-        this.label = undefined;
-        this.labelField = "label";
-        this.loading = false;
-        this.loadingErrorLabel = "Loading Error";
-        this.loadingLabel = "Loading...";
-        this.name = this.inputId;
-        this.placeholder = "Search";
-        this.readonly = false;
-        this.required = false;
-        this.searchMode = "navigation";
-        this.size = "medium";
-        this.spellcheck = false;
-        this.theme = "inherit";
-        this.timeout = undefined;
-        this.valueField = "value";
-        this.filteredOptions = [];
-        this.options = [];
-        this.value = "";
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -333,7 +421,8 @@ export class SearchBar {
         if (this.inputEl &&
             this.options &&
             !!getLabelFromValue(newValue, this.options, this.valueField, this.labelField)) {
-            this.inputEl.value = 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;
@@ -425,41 +514,41 @@ export class SearchBar {
         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, { class: {
+        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-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", { readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
-                "no-left-pad": readonly,
-                readonly,
+            }, 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,
                 "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", { 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: '23d4349d4b0f905bbf90bf1826a3a90559c62b9d', class: {
                 "clear-button-container": true,
-                "clear-button-visible": value && !disabledMode && this.showClearButton,
-            } }, h("ic-button", { id: "clear-button", class: {
+                "clear-button-visible": !!value && !disabledMode && this.showClearButton,
+            } }, h("ic-button", { key: '90cd4ab4601fabfca86d92d9c6cb7d5751d43758', 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", { class: "divider" })), h("div", { class: {
+            }, "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: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, 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", { class: {
+            }, 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: {
                 "menu-container": true,
-                fullwidth: fullWidth,
-            } }, menuRendered && (h("ic-menu", { class: {
+                fullwidth: !!fullWidth,
+            } }, menuRendered && (h("ic-menu", { key: '3d495b2ee381d30984316f0143c148731b179304', 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", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, 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" })));
     }
     static get is() { return "ic-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -480,8 +569,8 @@ export class SearchBar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -490,6 +579,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocapitalize",
                 "reflect": false,
                 "defaultValue": "\"off\""
@@ -499,7 +590,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocompleteTypes",
-                    "resolved": "\"name\" | \"on\" | \"off\" | \"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\"",
+                    "resolved": "IcAutocompleteTypes | undefined",
                     "references": {
                         "IcAutocompleteTypes": {
                             "location": "import",
@@ -514,6 +605,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The state of autocompletion the browser can apply on the text value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "\"off\""
@@ -523,7 +616,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocorrectStates",
-                    "resolved": "\"off\" | \"on\"",
+                    "resolved": "\"off\" | \"on\" | undefined",
                     "references": {
                         "IcAutocorrectStates": {
                             "location": "import",
@@ -538,6 +631,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocorrect",
                 "reflect": false,
                 "defaultValue": "\"off\""
@@ -546,8 +641,8 @@ export class SearchBar {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -556,6 +651,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the form control will have input focus when the page loads."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
@@ -565,15 +662,17 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "characters-until-suggestion",
                 "reflect": false,
                 "defaultValue": "2"
@@ -583,7 +682,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -592,6 +691,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -601,7 +702,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -610,6 +711,8 @@ export class SearchBar {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-auto-filtering",
                 "reflect": false,
                 "defaultValue": "false"
@@ -619,7 +722,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -628,6 +731,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -637,15 +742,17 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The text displayed when there are no options in the option list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "empty-option-list-text",
                 "reflect": false,
                 "defaultValue": "\"No results found\""
@@ -655,7 +762,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -664,6 +771,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the search bar will be focused when component loaded."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "focus-on-load",
                 "reflect": false,
                 "defaultValue": "false"
@@ -673,7 +782,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -682,6 +791,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -691,7 +802,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -700,6 +811,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The helper text that will be displayed for additional field guidance."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "helper-text",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -709,7 +822,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -718,6 +831,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
@@ -727,7 +842,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -736,6 +851,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The hint text for the hidden assistive description element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "assistive-hint-text",
                 "reflect": false,
                 "defaultValue": "\"When autocomplete results are available use the up and down arrows to choose and press enter to select\""
@@ -754,6 +871,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The label for the search bar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -762,7 +881,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -771,6 +890,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The custom name for the label field to correspond with the IcMenuOption type."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-field",
                 "reflect": false,
                 "defaultValue": "\"label\""
@@ -780,7 +901,7 @@ export class SearchBar {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -789,6 +910,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "Trigger loading state when fetching options asynchronously"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -798,7 +921,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -807,6 +930,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "Change the message displayed when external loading times out."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading-error-label",
                 "reflect": false,
                 "defaultValue": "\"Loading Error\""
@@ -816,7 +941,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -825,6 +950,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "Change the message displayed whilst the options are being loaded externally."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading-label",
                 "reflect": false,
                 "defaultValue": "\"Loading...\""
@@ -834,15 +961,17 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -852,7 +981,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -861,6 +990,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The placeholder value to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"Search\""
@@ -870,7 +1001,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -879,6 +1010,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the readonly state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -888,7 +1021,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -897,6 +1030,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the search bar will require a value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -906,7 +1041,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSearchBarSearchModes",
-                    "resolved": "\"navigation\" | \"query\"",
+                    "resolved": "\"navigation\" | \"query\" | undefined",
                     "references": {
                         "IcSearchBarSearchModes": {
                             "location": "import",
@@ -921,6 +1056,8 @@ export class SearchBar {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "search-mode",
                 "reflect": false,
                 "defaultValue": "\"navigation\""
@@ -930,7 +1067,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -945,6 +1082,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The size of the search bar component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -953,8 +1092,8 @@ export class SearchBar {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -963,6 +1102,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If `true`, the value of the search will have its spelling and grammar checked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
@@ -972,7 +1113,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -987,6 +1128,8 @@ export class SearchBar {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -996,7 +1139,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1005,6 +1148,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "If using external filtering, set a timeout for when loading takes too long."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "timeout",
                 "reflect": false
             },
@@ -1013,7 +1158,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1022,6 +1167,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The custom name for the value field to correspond with the IcMenuOption type."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value-field",
                 "reflect": false,
                 "defaultValue": "\"value\""
@@ -1031,7 +1178,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcMenuOption[]",
-                    "resolved": "IcMenuOption[]",
+                    "resolved": "IcMenuOption[] | undefined",
                     "references": {
                         "IcMenuOption": {
                             "location": "import",
@@ -1046,6 +1193,8 @@ export class SearchBar {
                     "tags": [],
                     "text": "The suggested search options."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "value": {
@@ -1053,15 +1202,17 @@ export class SearchBar {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value of the search input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
@@ -1214,13 +1365,13 @@ export class SearchBar {
                     "text": "Emitted when the 'retry loading' button is clicked"
                 },
                 "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
+                    "original": "IcMultiValueEventDetail",
+                    "resolved": "IcMultiValueEventDetail",
                     "references": {
-                        "IcValueEventDetail": {
+                        "IcMultiValueEventDetail": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
+                            "id": "src/utils/types.ts::IcMultiValueEventDetail"
                         }
                     }
                 }