import { Host, h, } from "@stencil/core";
import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, removeDisabledFalse, debounceEvent, } from "../../utils/helpers";
import clearIcon from "../../assets/clear-icon.svg";
import searchIcon from "../../assets/search-icon.svg";
let inputIds = 0;
/**
 * @slot helper-text - Content is set as the helper text for the search bar.
 */
export class SearchBar {
    constructor() {
        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.retryViaKeyPress = false;
        this.truncateValue = false;
        this.clearButtonFocused = false;
        this.open = false;
        this.searchSubmitFocused = false;
        this.showClearButton = false;
        /**
         * The automatic capitalisation of the text value as it is entered/edited by the user.
         * Available options: "off", "none", "on", "sentences", "words", "characters".
         */
        this.autocapitalize = "off";
        /**
         * The state of autocompletion the browser can apply on the text value.
         */
        this.autocomplete = "off";
        /**
         * The state of autocorrection the browser can apply when the user is entering/editing the text value.
         */
        this.autocorrect = "off";
        /**
         * If `true`, the form control will have input focus when the page loads.
         */
        this.autofocus = false;
        /**
         * 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.
         */
        this.charactersUntilSuggestion = 2;
        /**
         * If `true`, the disabled state will be set.
         */
        this.disabled = false;
        /**
         * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
         * If `true`, all options provided will be displayed.
         */
        this.disableAutoFiltering = false;
        /**
         * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
         */
        this.debounce = 0;
        /**
         * The text displayed when there are no options in the option list.
         */
        this.emptyOptionListText = "No results found";
        /**
         * If `true`, the search bar will be focused when component loaded.
         */
        this.focusOnLoad = false;
        /**
         * Specify whether the search bar fills the full width of the container.
         * If `true`, this overrides the --input-width CSS variable.
         */
        this.fullWidth = false;
        /**
         * The helper text that will be displayed for additional field guidance.
         */
        this.helperText = "";
        /**
         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
         */
        this.hideLabel = false;
        /**
         * The hint text for the hidden assistive description element.
         */
        this.assistiveHintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
        /**
         * The custom name for the label field to correspond with the IcMenuOption type.
         */
        this.labelField = "label";
        /**
         * Trigger loading state when fetching options asynchronously
         */
        this.loading = false;
        /**
         * Change the message displayed when external loading times out.
         */
        this.loadingErrorLabel = "Loading Error";
        /**
         * Change the message displayed whilst the options are being loaded externally.
         */
        this.loadingLabel = "Loading...";
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * The placeholder value to display.
         */
        this.placeholder = "Search";
        /**
         * If `true` the parent form will not submit when the icSubmitSearch event fires.
         */
        this.preventFormSubmitOnSearch = false;
        /**
         * If `true`, the readonly state will be set.
         */
        this.readonly = false;
        /**
         * If `true`, the search bar will require a value.
         */
        this.required = false;
        /**
         * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
         */
        this.searchMode = "navigation";
        /**
         * The size of the search bar component.
         */
        this.size = "medium";
        /**
         * If `true`, the value of the search will have its spelling and grammar checked.
         */
        this.spellcheck = false;
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The custom name for the value field to correspond with the IcMenuOption type.
         */
        this.valueField = "value";
        this.filteredOptions = [];
        /**
         * The suggested search options.
         */
        this.options = [];
        /**
         * The value of the search input.
         */
        this.value = "";
        this.handleClear = (ev) => {
            var _a;
            const keyboardEvent = ev;
            const mouseEvent = ev;
            if (mouseEvent.type === "click" ||
                keyboardEvent.code === "Enter" ||
                keyboardEvent.code === "Space") {
                this.value = "";
                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("value", "");
                this.loading = false;
                clearTimeout(this.timeoutTimer);
                this.filteredOptions = this.options;
                this.showMenuWithNoInput() && this.setMenuChange(true);
                this.el.setFocus();
                this.icClear.emit();
                ev.preventDefault();
                this.preventSubmit = true;
            }
        };
        this.onInput = ({ target }) => {
            this.value = target.value;
            this.icInput.emit({ value: this.value });
            if (this.options.length > 0) {
                this.setMenuChange(true);
                this.preLoad = false;
                if (this.disableAutoFiltering === false) {
                    const rawFilteredOptions = getFilteredMenuOptions(this.options, this.value, this.labelField);
                    this.filteredOptions =
                        rawFilteredOptions.length > 0
                            ? rawFilteredOptions
                            : [
                                {
                                    [this.labelField]: this.emptyOptionListText,
                                    [this.valueField]: "",
                                },
                            ];
                }
            }
            if (!this.showClearButton)
                this.showClearButton = true;
            this.debounceAriaLiveUpdate();
        };
        this.onInputBlur = ({ target, relatedTarget }) => {
            this.icSearchBarBlur.emit({
                value: target.value,
                relatedTarget,
            });
        };
        this.onInputFocus = ({ target }) => {
            this.icSearchBarFocus.emit({ value: target.value });
            this.showClearButton = true;
        };
        this.handleClearBlur = ({ relatedTarget }) => {
            this.icClearBlur.emit({ relatedTarget });
            this.clearButtonFocused = false;
        };
        this.handleSubmitSearchBlur = ({ relatedTarget }) => {
            this.icSubmitSearchBlur.emit({ relatedTarget });
            this.searchSubmitFocused = false;
        };
        this.setInputValue = (newValue) => {
            if (this.inputEl) {
                const label = getLabelFromValue(newValue, this.options, this.valueField, this.labelField);
                if (label)
                    this.inputEl.value = label;
                else if (this.inputEl.value !== newValue) {
                    this.inputEl.value = newValue;
                }
            }
        };
        this.handleMouseDown = (ev) => {
            ev.preventDefault();
        };
        this.handleSubmitSearchFocus = () => {
            this.searchSubmitFocused = true;
        };
        this.handleSubmitSearch = () => {
            if (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 = [
                {
                    [this.labelField]: this.loadingLabel,
                    [this.valueField]: "",
                    loading: true,
                },
            ];
            if (this.filteredOptions !== loadingOption)
                this.filteredOptions = loadingOption;
            if (this.timeout) {
                this.timeoutTimer = window.setTimeout(() => {
                    this.filteredOptions = [
                        {
                            [this.labelField]: this.loadingErrorLabel,
                            [this.valueField]: "",
                            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) => {
            const { optionId } = ev.detail;
            if (optionId)
                this.highlightedValue = optionId.replace(`${this.menuId}-`, "");
            this.ariaActiveDescendant = optionId || "";
        };
        this.handleMenuChange = (ev) => {
            this.setMenuChange(ev.detail.open);
            if (!ev.detail.open) {
                this.menuCloseFromMenuChangeEvent = true;
            }
        };
        this.setMenuChange = (open) => {
            if (this.open !== open) {
                this.open = open;
                this.icMenuChange.emit({ open });
            }
        };
        this.handleHostFocus = () => {
            if (this.options &&
                (this.value || this.showMenuWithNoInput()) &&
                !this.menuCloseFromMenuChangeEvent) {
                this.setMenuChange(true);
            }
            this.truncateValue = false;
            this.showMenuWithNoInput() && this.debounceAriaLiveUpdate();
            this.icSearchBarFocus.emit();
        };
        this.handleHostBlur = ({ relatedTarget }) => {
            var _a;
            if (this.open &&
                this.options &&
                relatedTarget !== this.menu &&
                !this.retryViaKeyPress &&
                !this.retryButtonClick) {
                this.setMenuChange(false);
            }
            if (this.retryButtonClick || this.retryViaKeyPress) {
                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
            }
            this.showClearButton = false;
            this.menuCloseFromMenuChangeEvent = false;
            this.truncateValue = true;
            this.icSearchBarBlur.emit({
                relatedTarget,
                value: this.value,
            });
            this.retryViaKeyPress = false;
            this.retryButtonClick = false;
            this.showMenuWithNoInput() && this.updateSearchResultAriaLive();
        };
        this.handleFocusClearButton = () => {
            this.clearButtonFocused = true;
        };
        this.renderAssistiveHintEl = () => {
            var _a, _b;
            const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.inputId}`);
            if (input &&
                Object.keys(input).length > 0 &&
                this.hasOptionsOrFilterDisabled()) {
                this.assistiveHintEl = document.createElement("span");
                this.assistiveHintEl.innerText = this.assistiveHintText;
                this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;
                this.assistiveHintEl.style.display = "none";
                (_b = input.after) === null || _b === void 0 ? void 0 : _b.call(input, this.assistiveHintEl);
            }
        };
        this.updateSearchResultAriaLive = () => {
            var _a;
            const searchResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".search-results-status");
            if (searchResultsStatusEl) {
                if (!this.open ||
                    (this.value === "" && !this.showMenuWithNoInput()) ||
                    this.value.length < this.charactersUntilSuggestion) {
                    searchResultsStatusEl.innerText = "";
                }
                else if (this.hasOptionsOrFilterDisabled() &&
                    this.filteredOptions.length > 0 &&
                    this.open &&
                    !this.filteredOptions[0].loading) {
                    searchResultsStatusEl.innerText = this.hadNoOptions()
                        ? this.emptyOptionListText
                        : `${this.filteredOptions.length} result${this.filteredOptions.length > 1 ? "s" : ""} available`;
                }
            }
        };
        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableAutoFiltering;
        this.hadNoOptions = () => this.filteredOptions.length === 1 &&
            this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&
            this.searchMode === "navigation";
        this.isSubmitDisabled = () => !this.value ||
            this.value.length < this.charactersUntilSuggestion ||
            this.disabled ||
            this.hadNoOptions() ||
            this.hasTimedOut ||
            this.loading;
        this.showMenuWithNoInput = () => this.charactersUntilSuggestion === 0;
        this.updateSearchButtonType = () => {
            this.searchButtonType =
                !!this.el.closest("FORM") &&
                    !this.preventFormSubmitOnSearch
                    ? "submit"
                    : "button";
        };
    }
    watchCharactersUntilSuggestionHandler() {
        if (this.showMenuWithNoInput()) {
            this.filteredOptions = this.options;
        }
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    debounceChanged() {
        this.icChange = debounceEvent(this.icChange, this.debounce);
    }
    loadingHandler(newValue) {
        if (newValue && !this.hasTimedOut) {
            this.preLoad = false;
            this.triggerLoading();
        }
    }
    preventFormSubmitOnSearchHandler() {
        this.updateSearchButtonType();
    }
    filteredOptionsHandler(newOptions) {
        this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
    }
    watchOptionsHandler(newOptions) {
        if (this.disableAutoFiltering) {
            if (!this.hasTimedOut) {
                this.loading = false;
                clearTimeout(this.timeoutTimer);
                if (newOptions.length > 0) {
                    this.filteredOptions = newOptions;
                }
                else {
                    if (this.hadNoOptions()) {
                        return;
                    }
                    this.setMenuChange(true);
                    if (!this.preLoad) {
                        this.filteredOptions = [
                            {
                                [this.labelField]: this.emptyOptionListText,
                                [this.valueField]: "",
                            },
                        ];
                    }
                    this.preLoad = true;
                }
            }
        }
        else if (this.showMenuWithNoInput()) {
            this.filteredOptions = newOptions;
        }
        this.debounceAriaLiveUpdate();
    }
    watchValueHandler(newValue) {
        this.setInputValue(newValue);
        this.icChange.emit({ value: newValue });
    }
    connectedCallback() {
        this.debounceChanged();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.assistiveHintEl) === null || _a === void 0 ? void 0 : _a.remove();
    }
    componentWillLoad() {
        this.setInputValue(this.value);
        removeDisabledFalse(this.disabled, this.el);
        this.updateSearchButtonType();
    }
    componentDidLoad() {
        if (this.focusOnLoad) {
            this.el.setFocus();
        }
        if (this.hasOptionsOrFilterDisabled()) {
            this.renderAssistiveHintEl();
            if (this.disableAutoFiltering || this.showMenuWithNoInput()) {
                this.filteredOptions = this.options;
            }
        }
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
    }
    componentWillRender() {
        if (this.prevNoOption && this.menu && !this.hasTimedOut) {
            this.menu.handleSetFirstOption();
            this.prevNoOption = false;
        }
        if (this.filteredOptions.find((filteredOption) => filteredOption[this.labelField] === this.emptyOptionListText ||
            filteredOption[this.labelField] === this.loadingErrorLabel ||
            filteredOption[this.labelField] === this.loadingLabel)) {
            this.prevNoOption = true;
        }
    }
    handleKeyDown(event) {
        this.icKeydown.emit({ event });
        if (this.menu && this.open) {
            this.menu.handleKeyboardOpen(event);
        }
    }
    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() {
        var _a;
        this.retryViaKeyPress = false;
        this.retryButtonClick = false;
        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
    }
    debounceAriaLiveUpdate() {
        clearTimeout(this.debounceAriaLive);
        this.debounceAriaLive = window.setTimeout(() => {
            this.updateSearchResultAriaLive();
        }, 500);
    }
    render() {
        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, theme, charactersUntilSuggestion, labelField, valueField, loadingLabel, loadingErrorLabel, searchMode, showClearButton, searchSubmitFocused, clearButtonFocused, searchButtonType, } = this;
        const disabledMode = readonly || disabled;
        const describedBy = getInputDescribedByText(this.el, inputId, helperText !== "", false).trim();
        let describedById = undefined;
        if (describedBy !== "" && this.hasOptionsOrFilterDisabled()) {
            describedById = `${describedBy} ${inputId}-assistive-hint`;
        }
        else if (this.hasOptionsOrFilterDisabled()) {
            describedById = `${inputId}-assistive-hint`;
        }
        else if (describedBy !== "") {
            describedById = describedBy;
        }
        const hasSuggestedSearch = (!!value || this.showMenuWithNoInput()) &&
            this.hasOptionsOrFilterDisabled();
        const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
        const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
        const labelValue = getLabelFromValue(value, options, valueField, labelField);
        renderHiddenInput(this.el, value, name, disabledMode);
        return (h(Host, { key: '04e5c15ac492b502e560a905f83f3a250412ca06', class: {
                "ic-search-bar-search": true,
                "ic-search-bar-full-width": fullWidth,
                "ic-search-bar-disabled": disabled,
                "ic-search-bar-small": size === "small",
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '8fef7c014864aef9293542ab21524aa45d9241ac', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '43f1de8b93e14b829f581e0d394a75cb03c9d946', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'f5f1c33908f9083f84e162e6967e8b40d903f264', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '9fa5ed5c57101c905259eacdf81a1d7f8189f086', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '853c5c33a1760d96d447332df4c3bff6e79f91f8', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
                "no-left-pad": readonly,
                readonly,
                "truncate-value": truncateValue,
            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '0d72210be324fa78ae66ce350c163e9633917978', class: {
                "clear-button-container": true,
                "clear-button-visible": !!value && !disabledMode && showClearButton,
            } }, h("ic-button", { key: 'be2a08dde69a638dc26f0c479c691e65d80ece9e', id: "clear-button", class: {
                "clear-button": true,
                "clear-button-unfocused": !clearButtonFocused,
            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '5043e6629e6c2c925bc8464a65339bad98e915dc', class: "divider" })), h("div", { key: 'a36f9243178a2dc0da8e45e7dfe649816cf2b978', class: {
                "search-submit-button-container": true,
                "search-submit-button-disabled": this.isSubmitDisabled(),
            } }, h("ic-button", { key: '9bdca735d409bd35d38d586b69172a72673fd275', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                "search-submit-button": true,
                "search-submit-button-small": size === "small",
                "search-submit-button-unfocused": !searchSubmitFocused,
                "search-submit-button-disabled": this.isSubmitDisabled(),
            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '642e60a52c92b6fda82276a827236c4651d0cbf7', class: {
                "menu-container": true,
                fullwidth: fullWidth,
            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '025843659ad91751380c71f373c8e8f9fa118eb1', class: {
                "no-results": this.hadNoOptions() ||
                    (filteredOptions.length === 1 &&
                        (filteredOptions[0][labelField] === loadingLabel ||
                            filteredOptions[0][labelField] === loadingErrorLabel)),
            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), 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, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '17f2a14197fa3051a70345fd10e30a5cb98a13de', "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\"."
                },
                "getter": false,
                "setter": false,
                "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",
                            "id": "src/utils/types.ts::IcAutocompleteTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The state of autocompletion the browser can apply on the text value."
                },
                "getter": false,
                "setter": false,
                "attribute": "autocomplete",
                "reflect": false,
                "defaultValue": "\"off\""
            },
            "autocorrect": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAutocorrectStates",
                    "resolved": "\"off\" | \"on\"",
                    "references": {
                        "IcAutocorrectStates": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAutocorrectStates"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
                },
                "getter": false,
                "setter": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "characters-until-suggestion",
                "reflect": false,
                "defaultValue": "2"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the disabled state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "disableAutoFiltering": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "disable-auto-filtering",
                "reflect": false,
                "defaultValue": "false"
            },
            "debounce": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
                },
                "getter": false,
                "setter": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "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": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the search bar will be focused when component loaded."
                },
                "getter": false,
                "setter": false,
                "attribute": "focus-on-load",
                "reflect": false,
                "defaultValue": "false"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The helper text that will be displayed for additional field guidance."
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                },
                "getter": false,
                "setter": false,
                "attribute": "hide-label",
                "reflect": false,
                "defaultValue": "false"
            },
            "assistiveHintText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The hint text for the hidden assistive description element."
                },
                "getter": false,
                "setter": false,
                "attribute": "assistive-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."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "labelField": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The custom name for the label field to correspond with the IcMenuOption type."
                },
                "getter": false,
                "setter": false,
                "attribute": "label-field",
                "reflect": false,
                "defaultValue": "\"label\""
            },
            "loading": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Trigger loading state when fetching options asynchronously"
                },
                "getter": false,
                "setter": false,
                "attribute": "loading",
                "reflect": false,
                "defaultValue": "false"
            },
            "loadingErrorLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Change the message displayed when external loading times out."
                },
                "getter": false,
                "setter": false,
                "attribute": "loading-error-label",
                "reflect": false,
                "defaultValue": "\"Loading Error\""
            },
            "loadingLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Change the message displayed whilst the options are being loaded externally."
                },
                "getter": false,
                "setter": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "this.inputId"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The placeholder value to display."
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "\"Search\""
            },
            "preventFormSubmitOnSearch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the parent form will not submit when the icSubmitSearch event fires."
                },
                "getter": false,
                "setter": false,
                "attribute": "prevent-form-submit-on-search",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the readonly state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the search bar will require a value."
                },
                "getter": false,
                "setter": false,
                "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",
                            "id": "src/components/ic-search-bar/ic-search-bar.types.ts::IcSearchBarSearchModes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "search-mode",
                "reflect": false,
                "defaultValue": "\"navigation\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizesNoLarge",
                    "resolved": "\"medium\" | \"small\"",
                    "references": {
                        "IcSizesNoLarge": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizesNoLarge"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the search bar component."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "spellcheck",
                "reflect": false,
                "defaultValue": "false"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "timeout": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If using external filtering, set a timeout for when loading takes too long."
                },
                "getter": false,
                "setter": false,
                "attribute": "timeout",
                "reflect": false
            },
            "valueField": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The custom name for the value field to correspond with the IcMenuOption type."
                },
                "getter": false,
                "setter": false,
                "attribute": "value-field",
                "reflect": false,
                "defaultValue": "\"value\""
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IcMenuOption[]",
                    "resolved": "IcMenuOption[]",
                    "references": {
                        "IcMenuOption": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcMenuOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The suggested search options."
                },
                "getter": false,
                "setter": false,
                "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": true,
                "defaultValue": "\"\""
            }
        };
    }
    static get states() {
        return {
            "ariaActiveDescendant": {},
            "clearButtonFocused": {},
            "highlightedValue": {},
            "open": {},
            "searchSubmitFocused": {},
            "showClearButton": {},
            "searchButtonType": {},
            "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",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/components/ic-menu/ic-menu.types.ts::IcOptionSelectEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/components/ic-menu/ic-menu.types.ts::IcMenuChangeEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/utils/types.ts::IcBlurEventDetail"
                        }
                    }
                }
            }, {
                "method": "icRetryLoad",
                "name": "icRetryLoad",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the 'retry loading' button is clicked"
                },
                "complexType": {
                    "original": "IcMultiValueEventDetail",
                    "resolved": "IcMultiValueEventDetail",
                    "references": {
                        "IcMultiValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcMultiValueEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/utils/types.ts::IcBlurEventDetail"
                        }
                    }
                }
            }, {
                "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",
                            "id": "src/components/ic-search-bar/ic-search-bar.types.ts::IcSearchBarBlurEventDetail"
                        }
                    }
                }
            }, {
                "method": "icSearchBarFocus",
                "name": "icSearchBarFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when focus is invoked from ic-search-bar"
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icKeydown",
                "name": "icKeydown",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a keydown event occurred."
                },
                "complexType": {
                    "original": "{ event: KeyboardEvent }",
                    "resolved": "{ event: KeyboardEvent; }",
                    "references": {
                        "KeyboardEvent": {
                            "location": "global",
                            "id": "global::KeyboardEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the native `input`.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "charactersUntilSuggestion",
                "methodName": "watchCharactersUntilSuggestionHandler"
            }, {
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "debounce",
                "methodName": "debounceChanged"
            }, {
                "propName": "loading",
                "methodName": "loadingHandler"
            }, {
                "propName": "preventFormSubmitOnSearch",
                "methodName": "preventFormSubmitOnSearchHandler"
            }, {
                "propName": "filteredOptions",
                "methodName": "filteredOptionsHandler"
            }, {
                "propName": "options",
                "methodName": "watchOptionsHandler"
            }, {
                "propName": "value",
                "methodName": "watchValueHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "keyup",
                "method": "handleKeyUp",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-search-bar.js.map
