/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { KolButtonWcTag } from "../../core/component-names";
import { getRenderStates } from "../../functional-component-wrappers/_helpers/getRenderStates";
import KolFormFieldStateWrapperFc from "../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper";
import KolInputContainerFc from "../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper";
import KolInputStateWrapperFc from "../../functional-component-wrappers/InputStateWrapper/InputStateWrapper";
import CustomSuggestionsOptionFc from "../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption";
import CustomSuggestionsOptionsGroupFc from "../../functional-components/CustomSuggestionsOptionsGroup";
import { translate } from "../../i18n";
import { IconFC } from "../../internal/functional-components/icon/component";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
import { ComboboxController } from "./controller";
export class KolCombobox {
    async getValue() {
        return this.state._value;
    }
    async focus(options) { }
    async click() { }
    selectOption(option) {
        var _a;
        this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
        this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
        this.controller.setFormAssociatedValue(option);
        this._filteredSuggestions = [...this.state._suggestions];
        this.state._value = option;
        (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
    }
    clearSelection() {
        var _a;
        const isDisabled = this.state._disabled === true;
        if (isDisabled) {
            return;
        }
        const emptyValue = '';
        this._focusedOptionIndex = -1;
        this._value = emptyValue;
        this.state._value = emptyValue;
        this._filteredSuggestions = [...this.state._suggestions];
        this._isOpen = false;
        const detail = { name: this.state._name, value: emptyValue };
        this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail }), true, emptyValue);
        this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail }), emptyValue);
        this.controller.setFormAssociatedValue(emptyValue);
        (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
    }
    onInput(event) {
        const target = event.target;
        this.state._value = target.value;
        this._value = target.value;
        this.controller.onFacade.onInput(event);
        this.setFilteredSuggestionsByQuery(target.value);
        this._focusedOptionIndex = -1;
    }
    handleKeyDownDropdown(event) {
        if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
            this._isOpen = true;
            this.focusSuggestionStartingWith(event.key);
        }
    }
    setFilteredSuggestionsByQuery(query) {
        var _a;
        if (query === undefined) {
            return;
        }
        if (query.trim() === '') {
            this._filteredSuggestions = [...this.state._suggestions];
        }
        else {
            this._filteredSuggestions = Array.isArray(this.state._suggestions)
                ? this.state._suggestions.filter((option) => {
                    return option.toLowerCase().includes(query.trim().toLowerCase());
                })
                : this._filteredSuggestions;
            if (((_a = this._filteredSuggestions) === null || _a === void 0 ? void 0 : _a.length) === 1 && this._filteredSuggestions[0] === query) {
                this._isOpen = false;
            }
            else if (this._filteredSuggestions && this._filteredSuggestions.length > 0) {
                this._isOpen = true;
            }
            else {
                this._isOpen = false;
            }
        }
    }
    moveFocus(delta) {
        if (!this._filteredSuggestions) {
            return;
        }
        let newIndex = this._focusedOptionIndex + delta;
        if (newIndex >= this._filteredSuggestions.length) {
            newIndex = 0;
        }
        if (newIndex < 0) {
            newIndex = this._filteredSuggestions.length - 1;
        }
        this.focusOption(newIndex);
    }
    focusOption(index) {
        this._focusedOptionIndex = index;
        if (this.refSuggestions) {
            const optionElement = this.refSuggestions[index];
            optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
        }
    }
    selectFocusedOption() {
        if (this._filteredSuggestions && this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._filteredSuggestions.length) {
            this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]);
            return true;
        }
        return false;
    }
    focusSuggestionStartingWith(char) {
        const charLowerCase = char.toLowerCase();
        const index = Array.isArray(this._filteredSuggestions) &&
            this._filteredSuggestions.length > 0 &&
            this._filteredSuggestions.findIndex((option) => option.toLowerCase().startsWith(charLowerCase));
        if (typeof index === 'number') {
            this.focusOption(index);
        }
    }
    getFormFieldProps() {
        return {
            state: this.state,
            class: clsx('kol-combobox', {
                'has-value': this.state._hasValue,
            }),
            tooltipAlign: this._tooltipAlign,
            alert: this.showAsAlert(),
        };
    }
    getInputProps() {
        const { ariaDescribedBy } = getRenderStates(this.state);
        const isDisabled = this.state._disabled === true;
        return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state, class: 'kol-combobox__input', type: 'text', role: 'combobox', 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': this.state._id + '-listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-expanded': this._isOpen ? 'true' : 'false', 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-labelledby': this.state._id + '-label', 'aria-keyshortcuts': this.state._shortKey, value: this.state._value, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', disabled: isDisabled, customSuggestions: true, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade), { onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
    }
    render() {
        const isDisabled = this.state._disabled === true;
        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'e1c1d276012a120aecbc27dd85d6b7b94362b181' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'bea446c68e3fbfab3a3a0546dcd2d4d8f7c50506', state: this.state }, h("div", { key: '2c25083a888a6ddfc48ca92f55034baf5c94992e', class: "kol-combobox__group" }, h(KolInputStateWrapperFc, Object.assign({ key: 'e5746f2a32c8a3b7e009787e7b4b27d8ebfeddeb' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (h(KolButtonWcTag, { key: '172fafcd61333c6ea2cf827829aaa81fced2f31c', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
                onClick: () => {
                    this.clearSelection();
                },
                onFocus: () => {
                    this.clearButtonFocused = true;
                },
                onBlur: () => {
                    this.clearButtonFocused = false;
                },
            } })), h("button", { key: '7222700ca0fec7067df00c7e4f6e8169a5ac6515', type: "button", tabIndex: -1, class: "kol-combobox-toggle", onClick: this.toggleListbox.bind(this), disabled: this._disabled, hidden: isDisabled }, h(IconFC, { key: '4d2180b057ab9cf6a174f4ba4a2e45f01e16aebb', icons: "kolicon-chevron-down", label: "" }))), h(CustomSuggestionsOptionsGroupFc, { key: 'fff87981e43cda06221984f45f2198a305a4f828', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredSuggestions) &&
            this._filteredSuggestions.length > 0 &&
            this._filteredSuggestions.map((option, index) => (h(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                    if (el)
                        this.refSuggestions[index] = el;
                }, selected: this.state._value === option, onClick: () => {
                    this.selectOption(option);
                    this.toggleListbox();
                    this._isOpen = false;
                }, onMouseOver: () => {
                    if (!this.blockSuggestionMouseOver) {
                        this.focusOption(index);
                    }
                }, onFocus: () => {
                    this.focusOption(index);
                } })))))));
    }
    handleKeyDown(event) {
        var _a, _b;
        const handleEvent = (isOpen, callback) => {
            var _a;
            event.preventDefault();
            if (isOpen !== undefined) {
                this._isOpen = isOpen;
                if (!isOpen) {
                    (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                }
            }
            callback === null || callback === void 0 ? void 0 : callback();
        };
        switch (event.key) {
            case 'Down':
            case 'ArrowDown': {
                this.blockSuggestionMouseOver = true;
                handleEvent(true, () => this.moveFocus(1));
                break;
            }
            case 'Up':
            case 'ArrowUp': {
                this.blockSuggestionMouseOver = true;
                handleEvent(true, () => this.moveFocus(-1));
                break;
            }
            case 'Tab':
                if (this._isOpen) {
                    this._isOpen = false;
                    (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                }
                break;
            case 'Esc':
            case 'Escape': {
                this._isOpen = false;
                event.preventDefault();
                (_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.focus();
                break;
            }
            case 'Enter':
            case 'NumpadEnter': {
                if (this.clearButtonFocused) {
                    this.clearSelection();
                }
                else if (this._isOpen) {
                    if (this.selectFocusedOption()) {
                        this._isOpen = false;
                    }
                }
                else {
                    this.toggleListbox();
                }
                event.preventDefault();
                break;
            }
            case ' ': {
                if (this.clearButtonFocused) {
                    this.clearSelection();
                    event.preventDefault();
                }
                else if (this._isOpen) {
                    if (this.selectFocusedOption()) {
                        this._isOpen = false;
                        event.preventDefault();
                    }
                }
                break;
            }
            case 'Home': {
                this.blockSuggestionMouseOver = true;
                handleEvent(undefined, () => {
                    if (this._isOpen) {
                        this.focusOption(0);
                    }
                });
                break;
            }
            case 'End': {
                this.blockSuggestionMouseOver = true;
                handleEvent(undefined, () => {
                    if (this._isOpen) {
                        this.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);
                    }
                });
                break;
            }
            case 'PageUp': {
                this.blockSuggestionMouseOver = true;
                handleEvent(undefined, () => this._isOpen && this.moveFocus(-10));
                break;
            }
            case 'PageDown': {
                this.blockSuggestionMouseOver = true;
                handleEvent(undefined, () => this._isOpen && this.moveFocus(10));
                break;
            }
        }
    }
    handleWindowClick(event) {
        if (this.host !== undefined && !this.host.contains(event.target)) {
            this._isOpen = false;
        }
    }
    constructor() {
        this.ctaRef = createCtaRef();
        this.refSuggestions = [];
        this._focusedOptionIndex = -1;
        this.translateDeleteSelection = translate('kol-delete-selection');
        this.clearButtonFocused = false;
        this.toggleListbox = () => {
            var _a;
            const isDisabled = this.state._disabled === true;
            if (isDisabled) {
                this._isOpen = false;
            }
            else {
                (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                if (this._isOpen) {
                    this._isOpen = false;
                }
                else if (Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {
                    this._isOpen = true;
                    const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);
                    this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;
                    this.focusOption(this._focusedOptionIndex);
                }
            }
        };
        this.blockSuggestionMouseOver = false;
        this._isOpen = false;
        this._disabled = false;
        this._hideMsg = false;
        this._hideLabel = false;
        this._hint = '';
        this._hasClearButton = true;
        this._required = false;
        this._tooltipAlign = 'top';
        this._touched = false;
        this.state = {
            _hasValue: false,
            _hasClearButton: true,
            _hideMsg: false,
            _id: createUniqueId('combobox'),
            _label: '',
            _suggestions: [],
            _value: '',
        };
        this.inputHasFocus = false;
        this.controller = new ComboboxController(this, 'combobox', this.host);
        this.onInput = this.onInput.bind(this);
    }
    showAsAlert() {
        return Boolean(this.state._touched) && !this.inputHasFocus;
    }
    validatePlaceholder(value) {
        this.controller.validatePlaceholder(value);
    }
    validateAccessKey(value) {
        this.controller.validateAccessKey(value);
    }
    validateDisabled(value) {
        this.controller.validateDisabled(value);
    }
    validateHideMsg(value) {
        this.controller.validateHideMsg(value);
    }
    validateHideLabel(value) {
        this.controller.validateHideLabel(value);
    }
    validateHint(value) {
        this.controller.validateHint(value);
    }
    validateIcons(value) {
        this.controller.validateIcons(value);
    }
    validateLabel(value) {
        this.controller.validateLabel(value);
    }
    validateMsg(value) {
        this.controller.validateMsg(value);
    }
    validateName(value) {
        this.controller.validateName(value);
    }
    validateOn(value) {
        this.controller.validateOn(value);
    }
    validateShortKey(value) {
        this.controller.validateShortKey(value);
    }
    validateSuggestions(value) {
        this.controller.validateSuggestions(value);
        this._filteredSuggestions = value;
        this.setFilteredSuggestionsByQuery(this._value);
    }
    validateHasClearButton(value) {
        this.controller.validateHasClearButton(value);
    }
    validateRequired(value) {
        this.controller.validateRequired(value);
    }
    validateSyncValueBySelector(value) {
        this.controller.validateSyncValueBySelector(value);
    }
    validateTouched(value) {
        this.controller.validateTouched(value);
    }
    validateValue(value) {
        this.controller.validateValue(value);
        this.controller.setFormAssociatedValue(value);
    }
    validateVariant(value) {
        this.controller.validateVariant(value);
    }
    componentWillLoad() {
        this.refSuggestions = [];
        this._touched = this._touched === true;
        this.controller.componentWillLoad();
        this.state._hasValue = !!this.state._value;
        this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));
        this._filteredSuggestions = this.state._suggestions;
    }
    handleMouseEvent() {
        this.blockSuggestionMouseOver = false;
    }
    handleFocusIn(event) {
        setTimeout(() => {
            var _a;
            if (((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) && !this.inputHasFocus) {
                this.controller.onFacade.onFocus(event);
                this.inputHasFocus = true;
            }
        });
    }
    handleFocusOut(event) {
        setTimeout(() => {
            var _a;
            if (this.inputHasFocus && !((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
                this.controller.onFacade.onBlur(event);
                this.inputHasFocus = false;
                if (this._isOpen) {
                    this._isOpen = false;
                }
            }
        });
    }
    onChange(event) {
        this.controller.onFacade.onChange(event);
        this.controller.setFormAssociatedValue(this.state._value);
    }
    static get is() { return "kol-combobox"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_accessKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the key combination that can be used to trigger or focus the component's interactive element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_access-key"
            },
            "_placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the placeholder for input field. To be shown when there's no value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_placeholder"
            },
            "_disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Makes the element not focusable and ignore all events."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_disabled",
                "defaultValue": "false"
            },
            "_hideMsg": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `HideMsgPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_hide-msg",
                "defaultValue": "false"
            },
            "_hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `HideLabelPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_hide-label",
                "defaultValue": "false"
            },
            "_hint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the hint text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_hint",
                "defaultValue": "''"
            },
            "_icons": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconsHorizontalPropType",
                    "resolved": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }",
                    "references": {
                        "IconsHorizontalPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::IconsHorizontalPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_icons"
            },
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LabelWithExpertSlotPropType",
                    "resolved": "string",
                    "references": {
                        "LabelWithExpertSlotPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LabelWithExpertSlotPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_label"
            },
            "_msg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<MsgPropType>",
                    "resolved": "Omit<AlertProps, \"_on\" | \"_label\" | \"_level\" | \"_variant\" | \"_hasCloser\"> & { _description: string; } | string | undefined",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        },
                        "MsgPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::MsgPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the properties for a message rendered as Alert component."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_msg"
            },
            "_name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "NamePropType",
                    "resolved": "string | undefined",
                    "references": {
                        "NamePropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::NamePropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the technical name of an input field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_name"
            },
            "_on": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "InputTypeOnDefault",
                    "resolved": "InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined",
                    "references": {
                        "InputTypeOnDefault": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::InputTypeOnDefault"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Gibt die EventCallback-Funktionen f\u00FCr das Input-Event an."
                },
                "getter": false,
                "setter": false
            },
            "_hasClearButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Shows the clear button if enabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_has-clear-button",
                "defaultValue": "true"
            },
            "_suggestions": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SuggestionsPropType",
                    "resolved": "W3CInputValue[] | string",
                    "references": {
                        "SuggestionsPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::SuggestionsPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Suggestions to provide for the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_suggestions"
            },
            "_required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `RequiredPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Makes the input element required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_required",
                "defaultValue": "false"
            },
            "_shortKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ShortKeyPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "ShortKeyPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ShortKeyPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_short-key"
            },
            "_syncValueBySelector": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SyncValueBySelectorPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "SyncValueBySelectorPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::SyncValueBySelectorPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Selector for synchronizing the value with another input element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_sync-value-by-selector"
            },
            "_tooltipAlign": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TooltipAlignPropType",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
                    "references": {
                        "TooltipAlignPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::TooltipAlignPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines where to show the Tooltip preferably: top, right, bottom or left."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_tooltip-align",
                "defaultValue": "'top'"
            },
            "_touched": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `TouchedPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Shows if the input was touched by a user."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "_touched",
                "defaultValue": "false"
            },
            "_value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the value of the element."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "_value"
            },
            "_variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "VariantClassNamePropType",
                    "resolved": "string | undefined",
                    "references": {
                        "VariantClassNamePropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::VariantClassNamePropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines which variant should be used for presentation."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_variant"
            }
        };
    }
    static get states() {
        return {
            "blockSuggestionMouseOver": {},
            "_isOpen": {},
            "_filteredSuggestions": {},
            "state": {},
            "inputHasFocus": {}
        };
    }
    static get methods() {
        return {
            "getValue": {
                "complexType": {
                    "signature": "() => Promise<string>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<string>"
                },
                "docs": {
                    "text": "Returns the current value.",
                    "tags": []
                }
            },
            "focus": {
                "complexType": {
                    "signature": "(options?: KolFocusOptions) => Promise<void>",
                    "parameters": [{
                            "name": "options",
                            "type": "KolFocusOptions | undefined",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KolFocusOptions": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KolFocusOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the internal element.",
                    "tags": []
                }
            },
            "click": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Clicks the primary interactive element inside this component.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_placeholder",
                "methodName": "validatePlaceholder"
            }, {
                "propName": "_accessKey",
                "methodName": "validateAccessKey"
            }, {
                "propName": "_disabled",
                "methodName": "validateDisabled"
            }, {
                "propName": "_hideMsg",
                "methodName": "validateHideMsg"
            }, {
                "propName": "_hideLabel",
                "methodName": "validateHideLabel"
            }, {
                "propName": "_hint",
                "methodName": "validateHint"
            }, {
                "propName": "_icons",
                "methodName": "validateIcons"
            }, {
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_msg",
                "methodName": "validateMsg"
            }, {
                "propName": "_name",
                "methodName": "validateName"
            }, {
                "propName": "_on",
                "methodName": "validateOn"
            }, {
                "propName": "_shortKey",
                "methodName": "validateShortKey"
            }, {
                "propName": "_suggestions",
                "methodName": "validateSuggestions"
            }, {
                "propName": "_hasClearButton",
                "methodName": "validateHasClearButton"
            }, {
                "propName": "_required",
                "methodName": "validateRequired"
            }, {
                "propName": "_syncValueBySelector",
                "methodName": "validateSyncValueBySelector"
            }, {
                "propName": "_touched",
                "methodName": "validateTouched"
            }, {
                "propName": "_value",
                "methodName": "validateValue"
            }, {
                "propName": "_variant",
                "methodName": "validateVariant"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "click",
                "method": "handleWindowClick",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "mousemove",
                "method": "handleMouseEvent",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "focusin",
                "method": "handleFocusIn",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "focusout",
                "method": "handleFocusOut",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
__decorate([
    delegateFocus('ctaRef')
], KolCombobox.prototype, "focus", null);
__decorate([
    delegateClick('ctaRef')
], KolCombobox.prototype, "click", null);
//# sourceMappingURL=shadow.js.map
