@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -1,30 +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.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.prevNoOption = false;
+    this.retryButtonClick = false;
+    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.preventSubmit = true;
       }
     };
     this.onInput = (ev) => {
@@ -32,6 +39,7 @@ export class SearchBar {
       const noOptions = [{ label: this.emptyOptionListText, value: "" }];
       if (this.options.length > 0) {
         this.setMenuChange(true);
+        this.preLoad = false;
         if (this.disableFilter === false) {
           const rawFilteredOptions = getFilteredMenuOptions(this.options, false, this.value, "anywhere");
           this.filteredOptions =
@@ -53,20 +61,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.handleClearBlur = (ev) => {
       const nextFocus = ev.relatedTarget;
       this.icClearBlur.emit({ relatedTarget: nextFocus });
@@ -77,10 +71,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();
@@ -124,13 +155,22 @@ export class SearchBar {
     };
     this.handleHostBlur = (ev) => {
       const nextFocus = ev.relatedTarget;
-      if (this.open && this.options && nextFocus !== this.menu) {
+      if (this.open &&
+        this.options &&
+        nextFocus !== this.menu &&
+        !this.retryViaKeyPress &&
+        !this.retryButtonClick) {
         this.setMenuChange(false);
       }
+      if (this.retryButtonClick || this.retryViaKeyPress) {
+        this.inputEl.setFocus();
+      }
       this.handleShowClearButton(false);
       this.handleMenuCloseFromMenuChange(false);
       this.handleTruncateValue(true);
       this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
+      this.retryViaKeyPress = false;
+      this.retryButtonClick = false;
     };
     this.handleShowClearButton = (visible) => {
       this.showClearButton = visible;
@@ -170,7 +210,8 @@ export class SearchBar {
       else if (this.hasOptionsOrFilterDisabled() &&
         this.filteredOptions.length > 0 &&
         this.open &&
-        searchResultsStatusEl) {
+        searchResultsStatusEl &&
+        !this.filteredOptions[0].loading) {
         if (this.hadNoOptions()) {
           searchResultsStatusEl.innerText = this.emptyOptionListText;
         }
@@ -181,55 +222,79 @@ export class SearchBar {
     };
     this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableFilter;
     this.hadNoOptions = () => this.filteredOptions.length === 1 &&
-      this.filteredOptions[0].label === this.emptyOptionListText;
+      this.filteredOptions[0].label === this.emptyOptionListText &&
+      this.searchMode === "navigation";
     this.isSubmitDisabled = () => {
       const valueNotSet = this.value === undefined || this.value === null || this.value === "";
-      return valueNotSet || this.disabled || this.hadNoOptions();
+      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) {
+      if (this.prevNoOption && this.menu && !this.hasTimedOut) {
         this.menu.handleSetFirstOption();
         this.prevNoOption = false;
       }
-      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText);
+      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText ||
+        filteredOption.label === this.loadingErrorLabel ||
+        filteredOption.label === this.loadingLabel);
       if (prevNoOptionsList) {
         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.name = this.inputId;
-    this.spellcheck = false;
-    this.options = [];
+    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.emptyOptionListText = "No results found";
-    this.charactersUntilSuggestion = 2;
-    this.open = false;
+    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.searchMode = "navigation";
+    this.small = false;
+    this.spellcheck = false;
+    this.timeout = undefined;
     this.filteredOptions = [];
-    this.ariaActiveDescendant = undefined;
-    this.showClearButton = false;
-    this.clearButtonFocused = false;
-    this.searchSubmitFocused = false;
-    this.prevNoOption = false;
-    this.highlightedValue = undefined;
+    this.options = [];
+    this.value = "";
+  }
+  loadingHandler(newValue) {
+    if (newValue && !this.hasTimedOut) {
+      this.preLoad = false;
+      this.triggerLoading();
+    }
+  }
+  filteredOptionsHandler(newOptions) {
+    this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
   }
   watchOptionsHandler(newOptions) {
-    if (this.disableFilter) {
+    if (this.disableFilter && !this.hasTimedOut) {
+      this.loading = false;
+      clearTimeout(this.timeoutTimer);
       if (newOptions.length > 0) {
         this.filteredOptions = newOptions;
       }
@@ -238,7 +303,11 @@ export class SearchBar {
           return;
         }
         this.setMenuChange(true);
-        this.filteredOptions = [{ label: this.emptyOptionListText, value: "" }];
+        !this.preLoad &&
+          (this.filteredOptions = [
+            { label: this.emptyOptionListText, value: "" },
+          ]);
+        this.preLoad = true;
       }
     }
     this.debounceAriaLiveUpdate();
@@ -253,13 +322,32 @@ export class SearchBar {
       this.inputEl.value = newValue;
     }
   }
-  /**
-   * Sets focus on the native `input`.
-   */
-  async setFocus() {
-    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;
@@ -282,36 +370,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");
-    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;
@@ -332,6 +406,9 @@ export class SearchBar {
     const disabledText = disabledMode && !readonly;
     const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();
     const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
+    const isOrHasLoaded = this.filteredOptions.length === 1 &&
+      (this.filteredOptions[0].label === this.loadingLabel ||
+        filteredOptions[0].label === this.loadingErrorLabel);
     let expanded;
     if (options.length > 0) {
       if (menuOpen) {
@@ -355,7 +432,7 @@ export class SearchBar {
         : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": hasSuggestedSearch ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: expanded, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: hasSuggestedSearch ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search", debounce: this.debounce }, h("div", { class: {
         "clear-button-container": true,
         "clear-button-visible": value && !disabledMode && this.showClearButton,
-      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, size: small ? "small" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
+      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: small ? "small" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" })), h("div", { class: {
         "search-submit-button-container": true,
@@ -363,17 +440,18 @@ export class SearchBar {
       }, slot: "search-submit-button" }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
         ["search-submit-button"]: true,
         ["search-submit-button-small"]: !!small,
-      }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: small ? "small" : "default", onClick: this.handleSubmitSearch, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
+      }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: small ? "small" : "default", onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Default })), h("div", { class: {
         "menu-container": true,
         fullwidth: fullWidth,
       }, slot: "menu" }, menuOpen && value.length >= this.charactersUntilSuggestion && (h("ic-menu", { class: {
-        "no-results": this.hadNoOptions(),
-      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+        "no-results": this.hadNoOptions() || isOrHasLoaded,
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, 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 })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
   }
   static get is() { return "ic-search-bar"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-search-bar.css"]
@@ -386,7 +464,7 @@ export class SearchBar {
   }
   static get properties() {
     return {
-      "label": {
+      "autocapitalize": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -394,52 +472,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": {
@@ -448,34 +537,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. The submit button will be disabled until the inputted value is equal to or greater than this number."
         },
-        "attribute": "placeholder",
+        "attribute": "characters-until-suggestion",
         "reflect": false,
-        "defaultValue": "\"Search\""
+        "defaultValue": "2"
       },
-      "fullWidth": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -487,9 +576,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"
       },
@@ -511,8 +600,44 @@ export class SearchBar {
         "reflect": false,
         "defaultValue": "false"
       },
-      "hideLabel": {
-        "type": "boolean",
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "emptyOptionListText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text displayed when there are no options in the option list."
+        },
+        "attribute": "empty-option-list-text",
+        "reflect": false,
+        "defaultValue": "\"No results found\""
+      },
+      "focusOnLoad": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
           "original": "boolean",
@@ -523,9 +648,27 @@ export class SearchBar {
         "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": "If `true`, the search bar will be focused when component loaded."
         },
-        "attribute": "hide-label",
+        "attribute": "focus-on-load",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "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."
+        },
+        "attribute": "full-width",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -547,7 +690,7 @@ export class SearchBar {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "small": {
+      "hideLabel": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -559,31 +702,31 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the search bar."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "small",
+        "attribute": "hide-label",
         "reflect": false,
         "defaultValue": "false"
       },
-      "value": {
+      "hintText": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the search input."
+          "text": "The hint text for the hidden assistive description element."
         },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "\"\""
+        "attribute": "hint-text",
+        "reflect": false,
+        "defaultValue": "\"When autocomplete results are available use the up and down arrows to choose and press enter to select\""
       },
-      "autocapitalize": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -591,117 +734,124 @@ export class SearchBar {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "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\"."
+          "text": "The label for the search bar."
         },
-        "attribute": "autocapitalize",
+        "attribute": "label",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Trigger loading state when fetching options asyncronously"
+        },
+        "attribute": "loading",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "false"
       },
-      "autocomplete": {
+      "loadingErrorLabel": {
         "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"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The state of autocompletion the browser can apply on the text value."
+          "text": "Change the message displayed when external loading times out."
         },
-        "attribute": "autocomplete",
+        "attribute": "loading-error-label",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "\"Loading Error\""
       },
-      "autocorrect": {
+      "loadingLabel": {
         "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": "Change the message displayed whilst the options are being loaded externally."
         },
-        "attribute": "autocorrect",
+        "attribute": "loading-label",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "\"Loading...\""
       },
-      "autofocus": {
-        "type": "boolean",
+      "name": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the form control will have input focus when the page loads."
+          "text": "The name of the control, which is submitted with the form data."
         },
-        "attribute": "autofocus",
+        "attribute": "name",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "this.inputId"
       },
-      "debounce": {
-        "type": "number",
+      "placeholder": {
+        "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 placeholder value to display."
         },
-        "attribute": "debounce",
+        "attribute": "placeholder",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "\"Search\""
       },
-      "name": {
-        "type": "string",
+      "readonly": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The name of the control, which is submitted with the form data."
+          "text": "If `true`, the readonly state will be set."
         },
-        "attribute": "name",
+        "attribute": "readonly",
         "reflect": false,
-        "defaultValue": "this.inputId"
+        "defaultValue": "false"
       },
-      "spellcheck": {
+      "required": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -710,25 +860,25 @@ export class SearchBar {
           "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": "If `true`, the search bar will require a value."
         },
-        "attribute": "spellcheck",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       },
-      "options": {
-        "type": "unknown",
+      "searchMode": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcMenuOption[]",
-          "resolved": "IcMenuOption[]",
+          "original": "IcSearchBarSearchModes",
+          "resolved": "\"navigation\" | \"query\"",
           "references": {
-            "IcMenuOption": {
+            "IcSearchBarSearchModes": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "./ic-search-bar.types"
             }
           }
         },
@@ -736,11 +886,13 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The suggested search options."
+          "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."
         },
-        "defaultValue": "[]"
+        "attribute": "search-mode",
+        "reflect": false,
+        "defaultValue": "\"navigation\""
       },
-      "focusOnLoad": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -752,90 +904,109 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the search bar will be focused when component loaded."
+          "text": "If `true`, the small styling will be applied to the search bar."
         },
-        "attribute": "focus-on-load",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },
-      "hintText": {
-        "type": "string",
+      "spellcheck": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The hint text for the hidden assistive description element."
+          "text": "If `true`, the value of the search will have its spelling and grammar checked."
         },
-        "attribute": "hint-text",
+        "attribute": "spellcheck",
         "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",
+      "timeout": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The text displayed when there are no options in the option list."
+          "text": "If using external filtering, set a timeout for when loading takes too long."
         },
-        "attribute": "empty-option-list-text",
-        "reflect": false,
-        "defaultValue": "\"No results found\""
+        "attribute": "timeout",
+        "reflect": false
       },
-      "charactersUntilSuggestion": {
-        "type": "number",
+      "options": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "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": {},
-      "prevNoOption": {},
-      "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",
@@ -843,45 +1014,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",
@@ -889,54 +1049,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",
@@ -944,7 +1095,7 @@ export class SearchBar {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1007,7 +1158,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"
             }
           }
         }
@@ -1030,7 +1221,7 @@ export class SearchBar {
           "references": {
             "IcBlurEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1094,6 +1285,12 @@ export class SearchBar {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "loading",
+        "methodName": "loadingHandler"
+      }, {
+        "propName": "filteredOptions",
+        "methodName": "filteredOptionsHandler"
+      }, {
         "propName": "options",
         "methodName": "watchOptionsHandler"
       }, {