@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,1127 @@
+import { Host, h, } from "@stencil/core";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+import { debounceEvent, getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import clearIcon from "../../assets/clear-icon.svg";
+import searchIcon from "../../assets/search-icon.svg";
+let inputIds = 0;
+export class SearchBar {
+  constructor() {
+    this.inputId = `ic-search-bar-input-${inputIds++}`;
+    this.menuId = `${this.inputId}-menu`;
+    this.menuCloseFromMenuChangeEvent = false;
+    this.truncateValue = false;
+    this.assistiveHintEl = null;
+    this.preventSubmit = false;
+    this.handleSubmitSearch = () => {
+      this.icSubmitSearch.emit({ value: this.value });
+      const form = this.el.closest("FORM");
+      if (this.searchSubmitButton && !!form && !this.preventSubmit) {
+        handleHiddenFormButtonClick(form, this.searchSubmitButton);
+      }
+    };
+    this.onInput = (ev) => {
+      this.value = ev.target.value;
+      if (this.options.length > 0) {
+        this.setMenuChange(true);
+        if (this.disableFilter === false) {
+          const rawFilteredOptions = this.options.filter((option) => {
+            return option.label.toLowerCase().includes(this.value.toLowerCase());
+          });
+          const noOptions = [{ label: this.emptyOptionListText, value: "" }];
+          this.filteredOptions =
+            rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;
+        }
+      }
+      if (!this.showClearButton) {
+        this.handleShowClearButton(true);
+      }
+      this.debounceAriaLiveUpdate();
+      this.icInput.emit({ value: this.value });
+    };
+    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.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 });
+      this.clearButtonFocused = false;
+    };
+    this.handleSubmitSearchBlur = (ev) => {
+      const nextFocus = ev.relatedTarget;
+      this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });
+      this.searchSubmitFocused = false;
+    };
+    this.handleSubmitSearchFocus = () => {
+      this.handleMenuCloseFromMenuChange(true);
+      this.searchSubmitFocused = true;
+    };
+    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.handleMenuChange = (ev) => {
+      this.setMenuChange(ev.detail.open);
+    };
+    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.setMenuChange(false);
+      }
+      this.handleShowClearButton(false);
+      this.handleMenuCloseFromMenuChange(false);
+      this.handleTruncateValue(true);
+      this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
+    };
+    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 === "") {
+        searchResultsStatusEl.innerText = "";
+      }
+      else if (this.options.length > 0 &&
+        this.filteredOptions.length > 0 &&
+        this.open &&
+        searchResultsStatusEl) {
+        searchResultsStatusEl.innerText = `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
+      }
+    };
+    this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableFilter;
+    this.highlightFirstOptionAfterNoResults = () => {
+      if (this.prevNoOption && this.menu) {
+        this.menu.handleSetFirstOption();
+        this.prevNoOption = false;
+      }
+      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText);
+      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.dense = false;
+    this.value = "";
+    this.autocapitalize = "off";
+    this.autocomplete = "off";
+    this.autocorrect = "off";
+    this.autofocus = false;
+    this.debounce = 0;
+    this.name = this.inputId;
+    this.spellcheck = false;
+    this.options = [];
+    this.focusOnLoad = false;
+    this.dark = false;
+    this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
+    this.emptyOptionListText = "No results found";
+    this.charactersUntilSuggestion = 2;
+    this.open = false;
+    this.filteredOptions = [];
+    this.ariaActiveDescendant = undefined;
+    this.showClearButton = false;
+    this.clearButtonFocused = false;
+    this.searchSubmitFocused = false;
+    this.prevNoOption = false;
+  }
+  debounceChanged() {
+    this.icChange = debounceEvent(this.icChange, this.debounce);
+  }
+  watchOptionsHandler(newOptions) {
+    if (this.disableFilter) {
+      this.filteredOptions = newOptions;
+    }
+  }
+  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;
+    }
+    this.icChange.emit({ value: newValue });
+  }
+  /**
+   * Sets focus on the native `input`
+   */
+  async setFocus() {
+    if (this.inputEl) {
+      this.inputEl.setFocus();
+    }
+  }
+  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) {
+        return;
+      }
+      this.handleSubmitSearch();
+      this.setMenuChange(false);
+    }
+    if (ev.key === "Escape") {
+      this.setMenuChange(false);
+    }
+    if (this.preventSubmit) {
+      this.preventSubmit = false;
+    }
+  }
+  debounceAriaLiveUpdate() {
+    clearTimeout(this.debounce);
+    this.debounce = window.setTimeout(() => {
+      this.updateSearchResultAriaLive();
+    }, 500);
+  }
+  onMenuClose(ev) {
+    if (!ev.detail.open) {
+      this.handleMenuCloseFromMenuChange(true);
+      if (ev.detail.focusInput === undefined || ev.detail.focusInput) {
+        this.el.setFocus();
+      }
+    }
+  }
+  onMenuOptionHighlighted(ev) {
+    if (ev.detail.optionId) {
+      this.ariaActiveDescendant = ev.detail.optionId;
+    }
+    else {
+      this.ariaActiveDescendant = undefined;
+    }
+  }
+  connectedCallback() {
+    this.debounceChanged();
+  }
+  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");
+  }
+  disconnectedCallback() {
+    if (this.assistiveHintEl) {
+      this.assistiveHintEl.remove();
+    }
+  }
+  render() {
+    const { inputId, name, label, required, dense, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, dark, 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 && options.length > 0;
+    const valueNotSet = value === undefined || value === null || value === "";
+    const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
+    const hadNoOptions = filteredOptions.length > 0 &&
+      filteredOptions[0].label === this.emptyOptionListText;
+    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,
+        ["dark"]: dark,
+        ["disabled"]: disabled,
+        ["dense"]: dense,
+      }, 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, dense: dense, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, dark: dark, 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": 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" }, 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: dense ? "dense" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", buttonStyle: this.clearButtonFocused
+        ? IcThemeForegroundEnum.Light
+        : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" })), h("div", { class: {
+        "search-submit-button-container": true,
+        "search-submit-button-disabled": valueNotSet || disabled || hadNoOptions,
+      }, 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-dense"]: !!dense,
+      }, disabled: valueNotSet || disabled || hadNoOptions, innerHTML: searchIcon, size: dense ? "dense" : "default", onClick: this.handleSubmitSearch, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, type: "submit", variant: "icon", buttonStyle: this.searchSubmitFocused
+        ? IcThemeForegroundEnum.Light
+        : IcThemeForegroundEnum.Default })), h("div", { class: {
+        "menu-container": true,
+        fullwidth: fullWidth,
+      }, slot: "menu", ref: (el) => (this.anchorEl = el) }, menuOpen && value.length >= this.charactersUntilSuggestion && (h("ic-menu", { class: {
+        "no-results": hadNoOptions,
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), dense: dense, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onOptionSelect: this.handleOptionSelect, onMenuChange: this.handleMenuChange, 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 originalStyleUrls() {
+    return {
+      "$": ["ic-search-bar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-search-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Provide a label for the input."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify if the input requires a value."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether the input is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether the input is read only."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Provide a placeholder value to display."
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"Search\""
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether the component fills the full width of the container.\nIf true, this overrides the --input-width css prop."
+        },
+        "attribute": "full-width",
+        "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"
+      },
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Hides the label and applies the required label value as an aria-label."
+        },
+        "attribute": "hide-label",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Provide helper text to display additional field guidance."
+        },
+        "attribute": "helper-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "dense": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether dense styling is to be applied to the element."
+        },
+        "attribute": "dense",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of Search input."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "autocapitalize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether and how the text value should be automatically capitalized 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": "Indicates whether the value of the control can be automatically completed by the browser."
+        },
+        "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": "Whether auto correction should be enabled 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": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+        },
+        "attribute": "autofocus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "debounce": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "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"
+      },
+      "spellcheck": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the element will have its spelling and grammar checked."
+        },
+        "attribute": "spellcheck",
+        "reflect": false,
+        "defaultValue": "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": "Provide the suggested search options"
+        },
+        "defaultValue": "[]"
+      },
+      "focusOnLoad": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether the input should be focussed when component loaded."
+        },
+        "attribute": "focus-on-load",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dark": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the dark variant of the search bar should be displayed."
+        },
+        "attribute": "dark",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hintText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Provide hint text for 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\""
+      },
+      "emptyOptionListText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Provide text for empty results list"
+        },
+        "attribute": "empty-option-list-text",
+        "reflect": false,
+        "defaultValue": "\"No results found\""
+      },
+      "charactersUntilSuggestion": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of characters until suggestions appear"
+        },
+        "attribute": "characters-until-suggestion",
+        "reflect": false,
+        "defaultValue": "2"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "filteredOptions": {},
+      "ariaActiveDescendant": {},
+      "showClearButton": {},
+      "clearButtonFocused": {},
+      "searchSubmitFocused": {},
+      "prevNoOption": {}
+    };
+  }
+  static get events() {
+    return [{
+        "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": "../../interface"
+            }
+          }
+        }
+      }, {
+        "method": "icInputBlur",
+        "name": "icInputBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when input loses focus."
+        },
+        "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": [],
+          "text": "Emitted when input gains focus."
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        }
+      }, {
+        "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": "../../interface"
+            }
+          }
+        }
+      }, {
+        "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",
+        "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": "../../interface"
+            }
+          }
+        }
+      }, {
+        "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": "../../interface"
+            }
+          }
+        }
+      }, {
+        "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": "../../interface"
+            }
+          }
+        }
+      }, {
+        "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": "debounce",
+        "methodName": "debounceChanged"
+      }, {
+        "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
+      }, {
+        "name": "menuChange",
+        "method": "onMenuClose",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "menuOptionId",
+        "method": "onMenuOptionHighlighted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-search-bar.js.map