@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,1318 @@
+import { Host, h, } from "@stencil/core";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+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.menuCloseFromMenuChangeEvent = false;
+    this.menuId = `${this.inputId}-menu`;
+    this.preLoad = true;
+    this.preventSubmit = false;
+    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.preventSubmit = true;
+      }
+    };
+    this.onInput = (ev) => {
+      this.value = ev.target.value;
+      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 =
+            rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;
+        }
+      }
+      if (!this.showClearButton) {
+        this.handleShowClearButton(true);
+      }
+      this.debounceAriaLiveUpdate();
+    };
+    this.onInputBlur = (ev) => {
+      const value = ev.target.value;
+      const nextFocus = ev.relatedTarget;
+      this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });
+    };
+    this.onInputFocus = (ev) => {
+      const value = ev.target.value;
+      this.icInputFocus.emit({ value: value });
+      this.handleShowClearButton(true);
+    };
+    this.handleClearBlur = (ev) => {
+      const nextFocus = ev.relatedTarget;
+      this.icClearBlur.emit({ relatedTarget: nextFocus });
+      this.clearButtonFocused = false;
+    };
+    this.handleSubmitSearchBlur = (ev) => {
+      const nextFocus = ev.relatedTarget;
+      this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });
+      this.searchSubmitFocused = false;
+    };
+    this.handleMouseDown = (ev) => {
+      ev.preventDefault();
+    };
+    this.handleSubmitSearchFocus = () => {
+      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();
+        return;
+      }
+      this.value = ev.detail.value;
+      this.icOptionSelect.emit({ value: this.value });
+    };
+    this.handleMenuOptionHighlight = (ev) => {
+      var _a;
+      const optionValue = (_a = ev.detail.optionId) === null || _a === void 0 ? void 0 : _a.replace(`${this.menuId}-`, "");
+      optionValue && (this.highlightedValue = optionValue);
+      if (ev.detail.optionId) {
+        this.ariaActiveDescendant = ev.detail.optionId;
+      }
+      else {
+        this.ariaActiveDescendant = undefined;
+      }
+    };
+    this.handleMenuChange = (ev) => {
+      this.setMenuChange(ev.detail.open);
+      if (!ev.detail.open) {
+        this.handleMenuCloseFromMenuChange(true);
+        if (ev.detail.focusInput === undefined || ev.detail.focusInput) {
+          this.el.setFocus();
+        }
+      }
+    };
+    this.setMenuChange = (open) => {
+      if (this.open !== open) {
+        this.open = open;
+        this.icMenuChange.emit({ open });
+      }
+    };
+    this.handleHostFocus = () => {
+      if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {
+        this.setMenuChange(true);
+      }
+      this.handleTruncateValue(false);
+      this.icSearchBarFocus.emit();
+    };
+    this.handleHostBlur = (ev) => {
+      const nextFocus = ev.relatedTarget;
+      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;
+    };
+    this.handleFocusClearButton = () => {
+      this.clearButtonFocused = true;
+    };
+    this.handleMenuCloseFromMenuChange = (fromEvent) => {
+      this.menuCloseFromMenuChangeEvent = fromEvent;
+    };
+    this.handleTruncateValue = (truncate) => {
+      this.truncateValue = truncate;
+    };
+    this.renderAssistiveHintEl = () => {
+      var _a, _b;
+      const input = (_b = (_a = this.el.shadowRoot
+        .querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#${this.inputId}`);
+      if (input &&
+        Object.keys(input).length > 0 &&
+        this.hasOptionsOrFilterDisabled()) {
+        this.assistiveHintEl = document.createElement("span");
+        this.assistiveHintEl.innerText = this.hintText;
+        this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;
+        this.assistiveHintEl.style.display = "none";
+        if (input.after !== undefined) {
+          input.after(this.assistiveHintEl);
+        }
+      }
+    };
+    this.updateSearchResultAriaLive = () => {
+      const searchResultsStatusEl = this.el.shadowRoot.querySelector(".search-results-status");
+      if (!this.open ||
+        this.value === "" ||
+        this.value.length < this.charactersUntilSuggestion) {
+        searchResultsStatusEl.innerText = "";
+      }
+      else if (this.hasOptionsOrFilterDisabled() &&
+        this.filteredOptions.length > 0 &&
+        this.open &&
+        searchResultsStatusEl &&
+        !this.filteredOptions[0].loading) {
+        if (this.hadNoOptions()) {
+          searchResultsStatusEl.innerText = this.emptyOptionListText;
+        }
+        else {
+          searchResultsStatusEl.innerText = `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
+        }
+      }
+    };
+    this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableFilter;
+    this.hadNoOptions = () => this.filteredOptions.length === 1 &&
+      this.filteredOptions[0].label === this.emptyOptionListText &&
+      this.searchMode === "navigation";
+    this.isSubmitDisabled = () => {
+      const valueNotSet = this.value === undefined || this.value === null || this.value === "";
+      const valueLengthLess = this.value.length < this.charactersUntilSuggestion;
+      return (valueNotSet ||
+        valueLengthLess ||
+        this.disabled ||
+        this.hadNoOptions() ||
+        this.hasTimedOut ||
+        this.loading);
+    };
+    this.highlightFirstOptionAfterNoResults = () => {
+      if (this.prevNoOption && this.menu && !this.hasTimedOut) {
+        this.menu.handleSetFirstOption();
+        this.prevNoOption = false;
+      }
+      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText ||
+        filteredOption.label === this.loadingErrorLabel ||
+        filteredOption.label === this.loadingLabel);
+      if (prevNoOptionsList) {
+        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.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.searchMode = "navigation";
+    this.small = false;
+    this.spellcheck = false;
+    this.timeout = undefined;
+    this.filteredOptions = [];
+    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 && !this.hasTimedOut) {
+      this.loading = false;
+      clearTimeout(this.timeoutTimer);
+      if (newOptions.length > 0) {
+        this.filteredOptions = newOptions;
+      }
+      else {
+        if (this.hadNoOptions()) {
+          return;
+        }
+        this.setMenuChange(true);
+        !this.preLoad &&
+          (this.filteredOptions = [
+            { label: this.emptyOptionListText, value: "" },
+          ]);
+        this.preLoad = true;
+      }
+    }
+    this.debounceAriaLiveUpdate();
+  }
+  watchValueHandler(newValue) {
+    if (this.inputEl &&
+      this.options &&
+      !!getLabelFromValue(newValue, this.options)) {
+      this.inputEl.value = getLabelFromValue(newValue, this.options);
+    }
+    else if (this.inputEl && this.inputEl.value !== newValue) {
+      this.inputEl.value = newValue;
+    }
+  }
+  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) {
+      this.menu.handleKeyboardOpen(keyEv);
+    }
+  }
+  handleKeyUp(ev) {
+    if (ev.key === "Enter") {
+      if (this.preventSubmit || this.isSubmitDisabled()) {
+        return;
+      }
+      this.handleSubmitSearch();
+      this.setMenuChange(false);
+    }
+    if (ev.key === "Escape") {
+      this.setMenuChange(false);
+    }
+    if (this.preventSubmit) {
+      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);
+  }
+  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;
+    const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
+    let describedById;
+    if (describedBy !== "" && this.hasOptionsOrFilterDisabled()) {
+      describedById = `${describedBy} ${this.inputId}-assistive-hint`;
+    }
+    else if (this.hasOptionsOrFilterDisabled()) {
+      describedById = `${this.inputId}-assistive-hint`;
+    }
+    else if (describedBy !== "") {
+      describedById = describedBy;
+    }
+    else {
+      describedById = undefined;
+    }
+    const disabledText = disabledMode && !readonly;
+    const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();
+    const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
+    const menuRendered = menuOpen && value.length >= this.charactersUntilSuggestion;
+    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) {
+        expanded = "true";
+      }
+      else {
+        expanded = "false";
+      }
+    }
+    else {
+      expanded = undefined;
+    }
+    renderHiddenInput(true, this.el, name, value, disabledMode);
+    return (h(Host, { class: {
+        ["search"]: true,
+        ["fullwidth"]: fullWidth,
+        ["disabled"]: disabled,
+        ["small"]: small,
+      }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, small: small, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options && !!getLabelFromValue(value, options)
+        ? getLabelFromValue(value, options)
+        : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": menuRendered ? 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, 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,
+        "search-submit-button-disabled": this.isSubmitDisabled(),
+      }, 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, 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" }, menuRendered && (h("ic-menu", { class: {
+        "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"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-search-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autocapitalize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "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."
+        },
+        "attribute": "autocomplete",
+        "reflect": false,
+        "defaultValue": "\"off\""
+      },
+      "autocorrect": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcAutocorrectStates",
+          "resolved": "\"off\" | \"on\"",
+          "references": {
+            "IcAutocorrectStates": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
+        },
+        "attribute": "autocorrect",
+        "reflect": false,
+        "defaultValue": "\"off\""
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the form control will have input focus when the page loads."
+        },
+        "attribute": "autofocus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "charactersUntilSuggestion": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number."
+        },
+        "attribute": "characters-until-suggestion",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the disabled state will be set."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\nIf `true`, all options provided will be displayed."
+        },
+        "attribute": "disable-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the search bar will be focused when component loaded."
+        },
+        "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"
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The helper text that will be displayed for additional field guidance."
+        },
+        "attribute": "helper-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "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."
+        },
+        "attribute": "hide-label",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hintText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The hint text for the hidden assistive description element."
+        },
+        "attribute": "hint-text",
+        "reflect": false,
+        "defaultValue": "\"When autocomplete results are available use the up and down arrows to choose and press enter to select\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label for the search bar."
+        },
+        "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": "false"
+      },
+      "loadingErrorLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Change the message displayed when external loading times out."
+        },
+        "attribute": "loading-error-label",
+        "reflect": false,
+        "defaultValue": "\"Loading Error\""
+      },
+      "loadingLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Change the message displayed whilst the options are being loaded externally."
+        },
+        "attribute": "loading-label",
+        "reflect": false,
+        "defaultValue": "\"Loading...\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the control, which is submitted with the form data."
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "this.inputId"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder value to display."
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"Search\""
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the readonly state will be set."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the search bar will require a value."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "searchMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSearchBarSearchModes",
+          "resolved": "\"navigation\" | \"query\"",
+          "references": {
+            "IcSearchBarSearchModes": {
+              "location": "import",
+              "path": "./ic-search-bar.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches."
+        },
+        "attribute": "search-mode",
+        "reflect": false,
+        "defaultValue": "\"navigation\""
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the small styling will be applied to the search bar."
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "spellcheck": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the value of the search will have its spelling and grammar checked."
+        },
+        "attribute": "spellcheck",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "timeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "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 value of the search input."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "ariaActiveDescendant": {},
+      "clearButtonFocused": {},
+      "highlightedValue": {},
+      "open": {},
+      "searchSubmitFocused": {},
+      "showClearButton": {},
+      "filteredOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "icChange",
+        "name": "icChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed."
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/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": "icInput",
+        "name": "icInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a keyboard input occurred."
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "icInputBlur",
+        "name": "icInputBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icSearchBarBlur instead."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IcSearchBarBlurEventDetail",
+          "resolved": "IcSearchBarBlurEventDetail",
+          "references": {
+            "IcSearchBarBlurEventDetail": {
+              "location": "import",
+              "path": "./ic-search-bar.types"
+            }
+          }
+        }
+      }, {
+        "method": "icInputFocus",
+        "name": "icInputFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icSearchBarFocus instead."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "icOptionSelect",
+        "name": "icOptionSelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when option is highlighted within the menu"
+        },
+        "complexType": {
+          "original": "IcOptionSelectEventDetail",
+          "resolved": "IcOptionSelectEventDetail",
+          "references": {
+            "IcOptionSelectEventDetail": {
+              "location": "import",
+              "path": "../ic-menu/ic-menu.types"
+            }
+          }
+        }
+      }, {
+        "method": "icMenuChange",
+        "name": "icMenuChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the state of the menu changes (i.e. open or close)"
+        },
+        "complexType": {
+          "original": "IcMenuChangeEventDetail",
+          "resolved": "IcMenuChangeEventDetail",
+          "references": {
+            "IcMenuChangeEventDetail": {
+              "location": "import",
+              "path": "../ic-menu/ic-menu.types"
+            }
+          }
+        }
+      }, {
+        "method": "icClearBlur",
+        "name": "icClearBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "- Emitted when blur is invoked from clear button"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IcBlurEventDetail",
+          "resolved": "IcBlurEventDetail",
+          "references": {
+            "IcBlurEventDetail": {
+              "location": "import",
+              "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"
+            }
+          }
+        }
+      }, {
+        "method": "icSubmitSearchBlur",
+        "name": "icSubmitSearchBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "- Emitted when blur is invoked from search submit button"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IcBlurEventDetail",
+          "resolved": "IcBlurEventDetail",
+          "references": {
+            "IcBlurEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "icSearchBarBlur",
+        "name": "icSearchBarBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when blur is invoked from ic-search-bar"
+        },
+        "complexType": {
+          "original": "IcSearchBarBlurEventDetail",
+          "resolved": "IcSearchBarBlurEventDetail",
+          "references": {
+            "IcSearchBarBlurEventDetail": {
+              "location": "import",
+              "path": "./ic-search-bar.types"
+            }
+          }
+        }
+      }, {
+        "method": "icSearchBarFocus",
+        "name": "icSearchBarFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when focus is invoked from ic-search-bar"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the native `input`.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "loading",
+        "methodName": "loadingHandler"
+      }, {
+        "propName": "filteredOptions",
+        "methodName": "filteredOptionsHandler"
+      }, {
+        "propName": "options",
+        "methodName": "watchOptionsHandler"
+      }, {
+        "propName": "value",
+        "methodName": "watchValueHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "icKeydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keyup",
+        "method": "handleKeyUp",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-search-bar.js.map