@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -1,55 +1,37 @@
 import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
-import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, } from "../../utils/helpers";
+import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, removeDisabledFalse, } from "../../utils/helpers";
 import clearIcon from "../../assets/clear-icon.svg";
 import searchIcon from "../../assets/search-icon.svg";
 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.menuId = `${this.inputId}-menu`;
     this.menuCloseFromMenuChangeEvent = false;
-    this.truncateValue = false;
-    this.assistiveHintEl = null;
+    this.menuId = `${this.inputId}-menu`;
+    this.preLoad = true;
     this.preventSubmit = false;
     this.prevNoOption = false;
-    this.hasTimedOut = false;
-    this.preLoad = true;
     this.retryButtonClick = false;
-    this.handleSubmitSearch = () => {
-      this.highlightedValue && (this.value = this.highlightedValue);
-      this.highlightedValue = undefined;
-      this.icSubmitSearch.emit({ value: this.value });
-      const form = this.el.closest("FORM");
-      if (this.searchSubmitButton && !!form && !this.preventSubmit) {
-        handleHiddenFormButtonClick(form, this.searchSubmitButton);
-      }
-    };
-    this.handleSubmitSearchKeyDown = (ev) => {
-      if (ev.key === " ") {
+    this.truncateValue = false;
+    this.handleClear = (ev) => {
+      const keyboardEvent = ev;
+      const mouseEvent = ev;
+      if (mouseEvent.type === "click" ||
+        keyboardEvent.code === "Enter" ||
+        keyboardEvent.code === "Space") {
+        this.value = "";
+        this.inputEl.value = "";
+        this.loading = false;
+        clearTimeout(this.timeoutTimer);
+        this.filteredOptions = this.options;
+        this.el.setFocus();
+        this.icClear.emit();
         ev.preventDefault();
-        this.handleSubmitSearch();
-      }
-    };
-    this.handleRetry = (ev) => {
-      this.retryViaKeyPress = ev.detail.keyPressed === "Enter";
-      this.icRetryLoad.emit({ value: ev.detail.value });
-      this.triggerLoading();
-      this.retryButtonClick = true;
-    };
-    this.triggerLoading = () => {
-      const loadingOption = [
-        { label: this.loadingLabel, value: "", loading: true },
-      ];
-      if (this.filteredOptions !== loadingOption)
-        this.filteredOptions = loadingOption;
-      if (this.timeout) {
-        this.timeoutTimer = window.setTimeout(() => {
-          this.filteredOptions = [
-            { label: this.loadingErrorLabel, value: "", timedOut: true },
-          ];
-        }, this.timeout);
+        this.preventSubmit = true;
       }
     };
     this.onInput = (ev) => {
@@ -78,23 +60,6 @@ export class SearchBar {
       this.icInputFocus.emit({ value: value });
       this.handleShowClearButton(true);
     };
-    this.handleClear = (ev) => {
-      const keyboardEvent = ev;
-      const mouseEvent = ev;
-      if (mouseEvent.type === "click" ||
-        keyboardEvent.code === "Enter" ||
-        keyboardEvent.code === "Space") {
-        this.value = "";
-        this.inputEl.value = "";
-        this.el.setFocus();
-        this.icClear.emit();
-        ev.preventDefault();
-        this.preventSubmit = true;
-      }
-    };
-    this.handleMouseDown = (ev) => {
-      ev.preventDefault();
-    };
     this.handleClearBlur = (ev) => {
       const nextFocus = ev.relatedTarget;
       this.icClearBlur.emit({ relatedTarget: nextFocus });
@@ -105,10 +70,47 @@ export class SearchBar {
       this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });
       this.searchSubmitFocused = false;
     };
+    this.handleMouseDown = (ev) => {
+      ev.preventDefault();
+    };
     this.handleSubmitSearchFocus = () => {
-      this.handleMenuCloseFromMenuChange(true);
       this.searchSubmitFocused = true;
     };
+    this.handleSubmitSearch = () => {
+      this.highlightedValue && (this.value = this.highlightedValue);
+      this.highlightedValue = undefined;
+      this.icSubmitSearch.emit({ value: this.value });
+      const form = this.el.closest("FORM");
+      if (this.searchSubmitButton && !!form && !this.preventSubmit) {
+        handleHiddenFormButtonClick(form, this.searchSubmitButton);
+      }
+    };
+    this.handleSubmitSearchKeyDown = (ev) => {
+      if (ev.key === " ") {
+        ev.preventDefault();
+        this.handleSubmitSearch();
+      }
+    };
+    this.handleRetry = (ev) => {
+      this.retryViaKeyPress = ev.detail.keyPressed === "Enter";
+      this.icRetryLoad.emit({ value: ev.detail.value });
+      this.triggerLoading();
+      this.retryButtonClick = true;
+    };
+    this.triggerLoading = () => {
+      const loadingOption = [
+        { label: this.loadingLabel, value: "", loading: true },
+      ];
+      if (this.filteredOptions !== loadingOption)
+        this.filteredOptions = loadingOption;
+      if (this.timeout) {
+        this.timeoutTimer = window.setTimeout(() => {
+          this.filteredOptions = [
+            { label: this.loadingErrorLabel, value: "", timedOut: true },
+          ];
+        }, this.timeout);
+      }
+    };
     this.handleOptionSelect = (ev) => {
       if (ev.detail.label === this.emptyOptionListText) {
         this.el.setFocus();
@@ -242,40 +244,40 @@ export class SearchBar {
         this.prevNoOption = true;
       }
     };
-    this.label = undefined;
-    this.required = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.placeholder = "Search";
-    this.fullWidth = false;
-    this.disableFilter = false;
-    this.hideLabel = false;
-    this.helperText = "";
-    this.small = false;
-    this.value = "";
+    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.disableFilter = false;
     this.debounce = 0;
+    this.emptyOptionListText = "No results found";
+    this.focusOnLoad = false;
+    this.fullWidth = false;
+    this.helperText = "";
+    this.hideLabel = false;
+    this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
+    this.label = undefined;
+    this.loading = false;
+    this.loadingErrorLabel = "Loading Error";
+    this.loadingLabel = "Loading...";
     this.name = this.inputId;
+    this.placeholder = "Search";
+    this.readonly = false;
+    this.required = false;
+    this.small = false;
     this.spellcheck = false;
-    this.options = [];
     this.timeout = undefined;
-    this.loadingLabel = "Loading...";
-    this.loadingErrorLabel = "Loading Error";
-    this.loading = false;
-    this.focusOnLoad = false;
-    this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
-    this.emptyOptionListText = "No results found";
-    this.charactersUntilSuggestion = 2;
-    this.open = false;
     this.filteredOptions = [];
-    this.ariaActiveDescendant = undefined;
-    this.showClearButton = false;
-    this.clearButtonFocused = false;
-    this.searchSubmitFocused = false;
-    this.highlightedValue = undefined;
+    this.options = [];
+    this.value = "";
   }
   loadingHandler(newValue) {
     if (newValue && !this.hasTimedOut) {
@@ -317,16 +319,33 @@ export class SearchBar {
       this.inputEl.value = newValue;
     }
   }
-  /**
-   * Sets focus on the native `input`.
-   */
-  async setFocus() {
-    this.retryViaKeyPress = false;
-    this.retryButtonClick = false;
-    if (this.inputEl) {
-      this.inputEl.setFocus();
+  disconnectedCallback() {
+    if (this.assistiveHintEl) {
+      this.assistiveHintEl.remove();
+    }
+  }
+  componentWillLoad() {
+    this.watchValueHandler(this.value);
+    removeDisabledFalse(this.disabled, this.el);
+  }
+  componentDidLoad() {
+    if (this.focusOnLoad) {
+      this.el.setFocus();
+    }
+    if (this.hasOptionsOrFilterDisabled()) {
+      this.renderAssistiveHintEl();
+      if (this.disableFilter) {
+        this.filteredOptions = this.options;
+      }
+    }
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
+    if (this.inputEl !== undefined) {
+      this.anchorEl = this.inputEl.shadowRoot.querySelector("ic-input-component-container");
     }
   }
+  componentWillRender() {
+    this.highlightFirstOptionAfterNoResults();
+  }
   handleKeyDown(ev) {
     const keyEv = ev.detail.event;
     if (this.menu && this.open) {
@@ -348,38 +367,22 @@ export class SearchBar {
       this.preventSubmit = false;
     }
   }
+  /**
+   * Sets focus on the native `input`.
+   */
+  async setFocus() {
+    this.retryViaKeyPress = false;
+    this.retryButtonClick = false;
+    if (this.inputEl) {
+      this.inputEl.setFocus();
+    }
+  }
   debounceAriaLiveUpdate() {
     clearTimeout(this.debounceAriaLive);
     this.debounceAriaLive = window.setTimeout(() => {
       this.updateSearchResultAriaLive();
     }, 500);
   }
-  componentWillRender() {
-    this.highlightFirstOptionAfterNoResults();
-  }
-  componentWillLoad() {
-    this.watchValueHandler(this.value);
-  }
-  componentDidLoad() {
-    if (this.focusOnLoad) {
-      this.el.setFocus();
-    }
-    if (this.hasOptionsOrFilterDisabled()) {
-      this.renderAssistiveHintEl();
-      if (this.disableFilter) {
-        this.filteredOptions = this.options;
-      }
-    }
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
-    if (this.inputEl !== undefined) {
-      this.anchorEl = this.inputEl.shadowRoot.querySelector("ic-input-component-container");
-    }
-  }
-  disconnectedCallback() {
-    if (this.assistiveHintEl) {
-      this.assistiveHintEl.remove();
-    }
-  }
   render() {
     const { inputId, name, label, required, small, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
     const disabledMode = readonly || disabled ? true : false;
@@ -458,7 +461,7 @@ export class SearchBar {
   }
   static get properties() {
     return {
-      "label": {
+      "autocapitalize": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -466,52 +469,63 @@ export class SearchBar {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label for the search bar."
+          "text": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "autocapitalize",
+        "reflect": false,
+        "defaultValue": "\"off\""
       },
-      "required": {
-        "type": "boolean",
+      "autocomplete": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "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\"",
+          "references": {
+            "IcAutocompleteTypes": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the search bar will require a value."
+          "text": "The state of autocompletion the browser can apply on the text value."
         },
-        "attribute": "required",
+        "attribute": "autocomplete",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"off\""
       },
-      "disabled": {
-        "type": "boolean",
+      "autocorrect": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcAutocorrectStates",
+          "resolved": "\"off\" | \"on\"",
+          "references": {
+            "IcAutocorrectStates": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
         },
-        "attribute": "disabled",
+        "attribute": "autocorrect",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"off\""
       },
-      "readonly": {
+      "autofocus": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -520,34 +534,34 @@ export class SearchBar {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the readonly state will be set."
+          "text": "If `true`, the form control will have input focus when the page loads."
         },
-        "attribute": "readonly",
+        "attribute": "autofocus",
         "reflect": false,
         "defaultValue": "false"
       },
-      "placeholder": {
-        "type": "string",
+      "charactersUntilSuggestion": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The placeholder value to display."
+          "text": "The number of characters until suggestions appear."
         },
-        "attribute": "placeholder",
+        "attribute": "characters-until-suggestion",
         "reflect": false,
-        "defaultValue": "\"Search\""
+        "defaultValue": "2"
       },
-      "fullWidth": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -559,9 +573,9 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
+          "text": "If `true`, the disabled state will be set."
         },
-        "attribute": "full-width",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -583,25 +597,25 @@ export class SearchBar {
         "reflect": false,
         "defaultValue": "false"
       },
-      "hideLabel": {
-        "type": "boolean",
+      "debounce": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
         },
-        "attribute": "hide-label",
+        "attribute": "debounce",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "0"
       },
-      "helperText": {
+      "emptyOptionListText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -610,16 +624,16 @@ export class SearchBar {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The helper text that will be displayed for additional field guidance."
+          "text": "The text displayed when there are no options in the option list."
         },
-        "attribute": "helper-text",
+        "attribute": "empty-option-list-text",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "\"No results found\""
       },
-      "small": {
+      "focusOnLoad": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -631,95 +645,49 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the search bar."
+          "text": "If `true`, the search bar will be focused when component loaded."
         },
-        "attribute": "small",
+        "attribute": "focus-on-load",
         "reflect": false,
         "defaultValue": "false"
       },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the search input."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "autocapitalize": {
-        "type": "string",
+      "fullWidth": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": false,
-        "docs": {
-          "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\"."
-        },
-        "attribute": "autocapitalize",
-        "reflect": false,
-        "defaultValue": "\"off\""
-      },
-      "autocomplete": {
-        "type": "string",
-        "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\"",
-          "references": {
-            "IcAutocompleteTypes": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        },
-        "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The state of autocompletion the browser can apply on the text value."
+          "text": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
         },
-        "attribute": "autocomplete",
+        "attribute": "full-width",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "false"
       },
-      "autocorrect": {
+      "helperText": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAutocorrectStates",
-          "resolved": "\"off\" | \"on\"",
-          "references": {
-            "IcAutocorrectStates": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
-        "attribute": "autocorrect",
+        "attribute": "helper-text",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "\"\""
       },
-      "autofocus": {
+      "hideLabel": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -728,34 +696,34 @@ export class SearchBar {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the form control will have input focus when the page loads."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "autofocus",
+        "attribute": "hide-label",
         "reflect": false,
         "defaultValue": "false"
       },
-      "debounce": {
-        "type": "number",
+      "hintText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+          "text": "The hint text for the hidden assistive description element."
         },
-        "attribute": "debounce",
+        "attribute": "hint-text",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "\"When autocomplete results are available use the up and down arrows to choose and press enter to select\""
       },
-      "name": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -763,73 +731,70 @@ export class SearchBar {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The name of the control, which is submitted with the form data."
+          "text": "The label for the search bar."
         },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.inputId"
+        "attribute": "label",
+        "reflect": false
       },
-      "spellcheck": {
+      "loading": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the value of the search will have its spelling and grammar checked."
+          "text": "Trigger loading state when fetching options asyncronously"
         },
-        "attribute": "spellcheck",
+        "attribute": "loading",
         "reflect": false,
         "defaultValue": "false"
       },
-      "options": {
-        "type": "unknown",
+      "loadingErrorLabel": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcMenuOption[]",
-          "resolved": "IcMenuOption[]",
-          "references": {
-            "IcMenuOption": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The suggested search options."
+          "text": "Change the message displayed when external loading times out."
         },
-        "defaultValue": "[]"
+        "attribute": "loading-error-label",
+        "reflect": false,
+        "defaultValue": "\"Loading Error\""
       },
-      "timeout": {
-        "type": "number",
+      "loadingLabel": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If using external filtering, set a timeout for when loading takes too long."
+          "text": "Change the message displayed whilst the options are being loaded externally."
         },
-        "attribute": "timeout",
-        "reflect": false
+        "attribute": "loading-label",
+        "reflect": false,
+        "defaultValue": "\"Loading...\""
       },
-      "loadingLabel": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -838,16 +803,16 @@ export class SearchBar {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Change the message displayed whilst the options are being loaded externally."
+          "text": "The name of the control, which is submitted with the form data."
         },
-        "attribute": "loading-label",
+        "attribute": "name",
         "reflect": false,
-        "defaultValue": "\"Loading...\""
+        "defaultValue": "this.inputId"
       },
-      "loadingErrorLabel": {
+      "placeholder": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -859,15 +824,15 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Change the message displayed when external loading times out."
+          "text": "The placeholder value to display."
         },
-        "attribute": "loading-error-label",
+        "attribute": "placeholder",
         "reflect": false,
-        "defaultValue": "\"Loading Error\""
+        "defaultValue": "\"Search\""
       },
-      "loading": {
+      "readonly": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -877,13 +842,13 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Trigger loading state when fetching options asyncronously"
+          "text": "If `true`, the readonly state will be set."
         },
-        "attribute": "loading",
+        "attribute": "readonly",
         "reflect": false,
         "defaultValue": "false"
       },
-      "focusOnLoad": {
+      "required": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -895,49 +860,49 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the search bar will be focused when component loaded."
+          "text": "If `true`, the search bar will require a value."
         },
-        "attribute": "focus-on-load",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       },
-      "hintText": {
-        "type": "string",
+      "small": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The hint text for the hidden assistive description element."
+          "text": "If `true`, the small styling will be applied to the search bar."
         },
-        "attribute": "hint-text",
+        "attribute": "small",
         "reflect": false,
-        "defaultValue": "\"When autocomplete results are available use the up and down arrows to choose and press enter to select\""
+        "defaultValue": "false"
       },
-      "emptyOptionListText": {
-        "type": "string",
+      "spellcheck": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The text displayed when there are no options in the option list."
+          "text": "If `true`, the value of the search will have its spelling and grammar checked."
         },
-        "attribute": "empty-option-list-text",
+        "attribute": "spellcheck",
         "reflect": false,
-        "defaultValue": "\"No results found\""
+        "defaultValue": "false"
       },
-      "charactersUntilSuggestion": {
+      "timeout": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -946,38 +911,76 @@ export class SearchBar {
           "references": {}
         },
         "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If using external filtering, set a timeout for when loading takes too long."
+        },
+        "attribute": "timeout",
+        "reflect": false
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IcMenuOption[]",
+          "resolved": "IcMenuOption[]",
+          "references": {
+            "IcMenuOption": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The suggested search options."
+        },
+        "defaultValue": "[]"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The number of characters until suggestions appear."
+          "text": "The value of the search input."
         },
-        "attribute": "characters-until-suggestion",
-        "reflect": false,
-        "defaultValue": "2"
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
       }
     };
   }
   static get states() {
     return {
-      "open": {},
-      "filteredOptions": {},
       "ariaActiveDescendant": {},
-      "showClearButton": {},
       "clearButtonFocused": {},
+      "highlightedValue": {},
+      "open": {},
       "searchSubmitFocused": {},
-      "highlightedValue": {}
+      "showClearButton": {},
+      "filteredOptions": {}
     };
   }
   static get events() {
     return [{
-        "method": "icInput",
-        "name": "icInput",
+        "method": "icChange",
+        "name": "icChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when a keyboard input occurred."
+          "text": "Emitted when the value has changed."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -985,45 +988,34 @@ export class SearchBar {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
       }, {
-        "method": "icInputBlur",
-        "name": "icInputBlur",
+        "method": "icClear",
+        "name": "icClear",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "This event should not be used anymore. Use icSearchBarBlur instead."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Emitted when value is cleared with clear button"
         },
         "complexType": {
-          "original": "IcSearchBarBlurEventDetail",
-          "resolved": "IcSearchBarBlurEventDetail",
-          "references": {
-            "IcSearchBarBlurEventDetail": {
-              "location": "import",
-              "path": "./ic-search-bar.types"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
-        "method": "icInputFocus",
-        "name": "icInputFocus",
+        "method": "icInput",
+        "name": "icInput",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "This event should not be used anymore. Use icSearchBarFocus instead."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Emitted when a keyboard input occurred."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -1031,54 +1023,45 @@ export class SearchBar {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
       }, {
-        "method": "icChange",
-        "name": "icChange",
+        "method": "icInputBlur",
+        "name": "icInputBlur",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when the value has changed."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icSearchBarBlur instead."
+            }],
+          "text": ""
         },
         "complexType": {
-          "original": "IcValueEventDetail",
-          "resolved": "IcValueEventDetail",
+          "original": "IcSearchBarBlurEventDetail",
+          "resolved": "IcSearchBarBlurEventDetail",
           "references": {
-            "IcValueEventDetail": {
+            "IcSearchBarBlurEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "./ic-search-bar.types"
             }
           }
         }
       }, {
-        "method": "icClear",
-        "name": "icClear",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when value is cleared with clear button"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "icSubmitSearch",
-        "name": "icSubmitSearch",
+        "method": "icInputFocus",
+        "name": "icInputFocus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when the search value has been submitted"
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icSearchBarFocus instead."
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -1086,7 +1069,7 @@ export class SearchBar {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1149,7 +1132,47 @@ export class SearchBar {
           "references": {
             "IcBlurEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "icRetryLoad",
+        "name": "icRetryLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the 'retry loading' button is clicked"
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "icSubmitSearch",
+        "name": "icSubmitSearch",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the search value has been submitted"
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
             }
           }
         }
@@ -1172,7 +1195,7 @@ export class SearchBar {
           "references": {
             "IcBlurEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1211,26 +1234,6 @@ export class SearchBar {
           "resolved": "void",
           "references": {}
         }
-      }, {
-        "method": "icRetryLoad",
-        "name": "icRetryLoad",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the 'retry loading' button is clicked"
-        },
-        "complexType": {
-          "original": "IcValueEventDetail",
-          "resolved": "IcValueEventDetail",
-          "references": {
-            "IcValueEventDetail": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
-        }
       }];
   }
   static get methods() {