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

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

@@ -0,0 +1,604 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { I as IcThemeForegroundEnum } from './types.js';
+import { G as getFilteredMenuOptions, L as handleHiddenFormButtonClick, F as getLabelFromValue, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, k as getInputDescribedByText, h as renderHiddenInput } from './helpers.js';
+import { d as defineCustomElement$b } from './ic-button2.js';
+import { d as defineCustomElement$a } from './ic-input-component-container2.js';
+import { d as defineCustomElement$9 } from './ic-input-container2.js';
+import { d as defineCustomElement$8 } from './ic-input-label2.js';
+import { d as defineCustomElement$7 } from './ic-input-validation2.js';
+import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$5 } from './ic-menu2.js';
+import { d as defineCustomElement$4 } from './ic-text-field2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const clearIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
+</svg>
+`;
+
+const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>
+</svg>`;
+
+const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.search){--divider-height:1.5rem}:host(.search.small){--divider-height:1rem}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-space-1px);background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}";
+
+let inputIds = 0;
+const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icChange = createEvent(this, "icChange", 7);
+    this.icClear = createEvent(this, "icClear", 7);
+    this.icInput = createEvent(this, "icInput", 7);
+    this.icInputBlur = createEvent(this, "icInputBlur", 7);
+    this.icInputFocus = createEvent(this, "icInputFocus", 7);
+    this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
+    this.icMenuChange = createEvent(this, "icMenuChange", 7);
+    this.icClearBlur = createEvent(this, "icClearBlur", 7);
+    this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
+    this.icSubmitSearch = createEvent(this, "icSubmitSearch", 7);
+    this.icSubmitSearchBlur = createEvent(this, "icSubmitSearchBlur", 7);
+    this.icSearchBarBlur = createEvent(this, "icSearchBarBlur", 7);
+    this.icSearchBarFocus = createEvent(this, "icSearchBarFocus", 7);
+    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 delegatesFocus() { return true; }
+  get el() { return this; }
+  static get watchers() { return {
+    "loading": ["loadingHandler"],
+    "filteredOptions": ["filteredOptionsHandler"],
+    "options": ["watchOptionsHandler"],
+    "value": ["watchValueHandler"]
+  }; }
+  static get style() { return icSearchBarCss; }
+}, [17, "ic-search-bar", {
+    "autocapitalize": [1],
+    "autocomplete": [1],
+    "autocorrect": [1],
+    "autofocus": [4],
+    "charactersUntilSuggestion": [2, "characters-until-suggestion"],
+    "disabled": [4],
+    "disableFilter": [4, "disable-filter"],
+    "debounce": [2],
+    "emptyOptionListText": [1, "empty-option-list-text"],
+    "focusOnLoad": [4, "focus-on-load"],
+    "fullWidth": [4, "full-width"],
+    "helperText": [1, "helper-text"],
+    "hideLabel": [4, "hide-label"],
+    "hintText": [1, "hint-text"],
+    "label": [1],
+    "loading": [1028],
+    "loadingErrorLabel": [1, "loading-error-label"],
+    "loadingLabel": [1, "loading-label"],
+    "name": [1],
+    "placeholder": [1],
+    "readonly": [4],
+    "required": [4],
+    "searchMode": [1, "search-mode"],
+    "small": [4],
+    "spellcheck": [4],
+    "timeout": [2],
+    "options": [16],
+    "value": [1537],
+    "ariaActiveDescendant": [32],
+    "clearButtonFocused": [32],
+    "highlightedValue": [32],
+    "open": [32],
+    "searchSubmitFocused": [32],
+    "showClearButton": [32],
+    "filteredOptions": [32],
+    "setFocus": [64]
+  }, [[0, "icKeydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-search-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-text-field", "ic-tooltip", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-search-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SearchBar);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ic-input-component-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ic-input-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ic-input-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ic-input-validation":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ic-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-text-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcSearchBar = SearchBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcSearchBar, defineCustomElement };
+
+//# sourceMappingURL=ic-search-bar.js.map