/*!
 * 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, delegateFocus } from "../../utils/element-interaction";
import { SingleSelectController } from "./controller";
export class KolSingleSelect {
    async getValue() {
        return this._value;
    }
    async focus(options) { }
    onBlur() {
        var _a, _b;
        const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
        if (matchingOption) {
            this.selectOption(matchingOption);
        }
        else if (this._value !== null && this._value !== undefined) {
            this._filteredOptions = [...((_b = this.state._options) !== null && _b !== void 0 ? _b : [])];
        }
    }
    createEventWithTarget(type, detail) {
        const event = new CustomEvent(type, {
            bubbles: true,
            detail,
        });
        if (this.ctaRef.el) {
            Object.defineProperty(event, 'target', {
                value: this.ctaRef.el,
            });
            Object.defineProperty(event, 'currentTarget', {
                value: this.ctaRef.el,
            });
        }
        return event;
    }
    clearSelection() {
        var _a;
        if (this.state._disabled) {
            return;
        }
        const emptyValue = null;
        this._focusedOptionIndex = -1;
        this._value = emptyValue;
        this._inputValue = '';
        this._filteredOptions = [...this.state._options];
        const inputEvent = this.createEventWithTarget('input', {
            name: this.state._name,
            value: emptyValue,
        });
        const changeEvent = this.createEventWithTarget('change', {
            name: this.state._name,
            value: emptyValue,
        });
        this.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });
        this.controller.onFacade.onChange(changeEvent, { value: emptyValue });
        (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
        this._isOpen = true;
    }
    selectOption(option) {
        var _a, _b;
        if (option.value === this._value) {
            this._inputValue = option.label;
            this._filteredOptions = [...this.state._options];
            return;
        }
        this._value = option.value;
        this._inputValue = option.label;
        const inputEvent = this.createEventWithTarget('input', {
            name: (_a = this.state._name) !== null && _a !== void 0 ? _a : '',
            value: option.value,
        });
        const changeEvent = this.createEventWithTarget('change', {
            name: (_b = this.state._name) !== null && _b !== void 0 ? _b : '',
            value: option.value,
        });
        this.controller.onFacade.onInput(inputEvent, false, option.value);
        this.controller.onFacade.onChange(changeEvent, option.value);
        this._filteredOptions = [...this.state._options];
        this.controller.setFormAssociatedValue(this._value);
    }
    onInput(event) {
        const target = event.target;
        this._inputValue = target.value;
        this._isOpen = true;
        this.setFilteredOptionsByQuery(target.value);
        this._focusedOptionIndex = -1;
    }
    handleKeyDownDropdown(event) {
        if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
            event.preventDefault();
            this._isOpen = true;
            this.focusSuggestionStartingWith(event.key);
        }
    }
    setFilteredOptionsByQuery(query) {
        if (query === undefined) {
            return;
        }
        if ((query === null || query === void 0 ? void 0 : query.trim()) === '') {
            this._filteredOptions = [...this.state._options];
        }
        else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {
            this._filteredOptions = this.state._options.filter((option) => {
                var _a, _b;
                return (_b = (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(query === null || query === void 0 ? void 0 : query.toLowerCase());
            });
        }
    }
    moveFocus(delta) {
        if (!this._filteredOptions) {
            return;
        }
        let newIndex = this._focusedOptionIndex + delta;
        let iterations = 0;
        let foundEnabledOption = false;
        const maxIterations = this._filteredOptions.length;
        while (iterations < maxIterations) {
            if (newIndex >= this._filteredOptions.length) {
                newIndex = 0;
            }
            if (newIndex < 0) {
                newIndex = this._filteredOptions.length - 1;
            }
            const option = this._filteredOptions[newIndex];
            if (!option.disabled) {
                foundEnabledOption = true;
                break;
            }
            newIndex += delta;
            iterations++;
        }
        if (foundEnabledOption) {
            this._focusedOptionIndex = newIndex;
            this.focusOption(this._focusedOptionIndex);
        }
    }
    focusOption(index) {
        if (this.refOptions) {
            const optionElement = this.refOptions[index];
            optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
        }
    }
    selectFocusedOption() {
        if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 && this._focusedOptionIndex >= 0) {
            this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
            return true;
        }
        return false;
    }
    focusSuggestionStartingWith(char) {
        const charLowerCase = char.toLowerCase();
        const index = Array.isArray(this._filteredOptions) &&
            this._filteredOptions.findIndex((option) => option.label.toLowerCase().startsWith(charLowerCase) && !option.disabled);
        if (typeof index === 'number' && index >= 0) {
            this._focusedOptionIndex = index;
            this.focusOption(index);
        }
    }
    getFormFieldProps() {
        return {
            state: this.state,
            class: 'kol-single-select',
            tooltipAlign: this._tooltipAlign,
            alert: this.showAsAlert(),
        };
    }
    getInputProps() {
        const { ariaDescribedBy } = getRenderStates(this.state);
        const isDisabled = this.state._disabled === true;
        return Object.assign(Object.assign({ '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, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', class: 'kol-single-select__input', disabled: isDisabled, name: this.state._name, placeholder: this.state._placeholder, ref: this.ctaRef, required: this.state._required, role: 'combobox', state: this.state, type: 'text', value: this._inputValue }, this.controller.onFacade), { onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onInput: this.onInput.bind(this), onBlur: () => {
                this.onBlur();
            } });
    }
    render() {
        var _a;
        const isDisabled = this.state._disabled === true;
        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'a562e230c017b24eb129118d516f032a6b42e8c9' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'df7a38b381bda50cf1fd969f3b39a76b52d7ea10', state: this.state }, h("div", { key: '4f9a18322d000f14386ebe2d7213ce767177afda', class: "kol-single-select__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '4f0719ba06ad2c923c4f187bbe8a29de3189419e' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (h(KolButtonWcTag, { key: 'c8453b29f259808fcb41173aed65780c569be8cf', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
                onClick: () => {
                    var _a;
                    this.clearSelection();
                    (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                },
                onFocus: () => {
                    this.clearButtonFocused = true;
                },
                onBlur: () => {
                    this.clearButtonFocused = false;
                },
            } })), h(IconFC, { key: '9dc7b5cb4973f0b04d55b2349b40543082909ec5', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
                'kol-custom-suggestions-toggle--disabled': isDisabled,
            }), onClick: this.toggleListbox.bind(this) })), h(CustomSuggestionsOptionsGroupFc, { key: '2ecd91b862dc14bafd09efdc99a6f91eded101dc', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (h(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                if (el)
                    this.refOptions[index] = el;
            }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
                var _a;
                if (option.disabled) {
                    return;
                }
                this.selectOption(option);
                (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                this.toggleListbox(event);
                this._isOpen = false;
            }, onMouseOver: () => {
                if (!this.blockSuggestionMouseOver) {
                    this._focusedOptionIndex = index;
                    this.focusOption(index);
                }
            }, onFocus: () => {
                if (!option.disabled) {
                    this._focusedOptionIndex = index;
                    this.focusOption(index);
                }
            }, onKeyDown: (e) => {
                var _a;
                if (option.disabled) {
                    return;
                }
                if (e.key === 'Enter' || e.key === 'NumpadEnter') {
                    this.selectOption(option);
                    (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                    this.toggleListbox(e);
                    e.preventDefault();
                }
            } })))) : (h("li", { class: "kol-single-select__no-results-message", role: "alert" }, this.translateNoResultsMessage, ' '))))));
    }
    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 = !this._isOpen;
                    (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                }
                break;
            case 'Esc':
            case 'Escape': {
                this._isOpen = false;
                handleEvent(false);
                break;
            }
            case ' ':
            case 'Enter':
            case 'NumpadEnter': {
                if (this.clearButtonFocused) {
                    this.clearSelection();
                    event.preventDefault();
                }
                else if (this._isOpen) {
                    if (this.selectFocusedOption()) {
                        (_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.focus();
                        handleEvent(false);
                    }
                }
                else {
                    this.toggleListbox(event);
                }
                break;
            }
            case 'Home': {
                this.blockSuggestionMouseOver = true;
                handleEvent(undefined, () => {
                    if (this._isOpen) {
                        this._focusedOptionIndex = 0;
                        this.focusOption(this._focusedOptionIndex);
                    }
                });
                break;
            }
            case 'End': {
                this.blockSuggestionMouseOver = true;
                handleEvent(undefined, () => {
                    if (this._isOpen) {
                        this._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;
                        this.focusOption(this._focusedOptionIndex);
                    }
                });
                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;
            }
        }
    }
    constructor() {
        this.ctaRef = createCtaRef();
        this.refOptions = [];
        this.translateDeleteSelection = translate('kol-delete-selection');
        this.translateNoResultsMessage = translate('kol-no-results-message');
        this.clearButtonFocused = false;
        this.toggleListbox = (event) => {
            var _a;
            event === null || event === void 0 ? void 0 : event.preventDefault();
            const isDisabled = this.state._disabled === true;
            if (isDisabled) {
                return;
            }
            else {
                (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
                if (this._isOpen) {
                    this._isOpen = false;
                }
                else {
                    this._isOpen = true;
                    const selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;
                    this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;
                    this.focusOption(this._focusedOptionIndex);
                }
            }
        };
        this._focusedOptionIndex = -1;
        this._isOpen = false;
        this._filteredOptions = [];
        this._inputValue = '';
        this.blockSuggestionMouseOver = false;
        this._disabled = false;
        this._hideMsg = false;
        this._hideLabel = false;
        this._hint = '';
        this._required = false;
        this._tooltipAlign = 'top';
        this._touched = false;
        this._value = null;
        this._hasClearButton = true;
        this.state = {
            _hideMsg: false,
            _id: createUniqueId('single-select'),
            _label: '',
            _options: [],
            _hasClearButton: true,
        };
        this.inputHasFocus = false;
        this.controller = new SingleSelectController(this, 'single-select', this.host);
    }
    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);
    }
    validateOptions(value) {
        var _a;
        this.controller.validateOptions(value);
        this._filteredOptions = [...((_a = this.state._options) !== null && _a !== void 0 ? _a : [])];
        if (this._isOpen) {
            this.setFilteredOptionsByQuery(this._inputValue);
        }
        else {
            this.updateInputValue(this._value);
        }
    }
    validateRequired(value) {
        this.controller.validateRequired(value);
    }
    validateShortKey(value) {
        this.controller.validateShortKey(value);
    }
    validateSyncValueBySelector(value) {
        this.controller.validateSyncValueBySelector(value);
    }
    validateTouched(value) {
        this.controller.validateTouched(value);
    }
    validateValue(value) {
        this.controller.validateValue(value);
        this.oldValue = value;
        this.updateInputValue(value);
    }
    validateHasClearButton(value) {
        this.controller.validateHasClearButton(value);
    }
    validateRows(value) {
        this.controller.validateRows(value);
    }
    validateVariant(value) {
        this.controller.validateVariant(value);
    }
    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) {
        this.onBlur();
        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;
                this._isOpen = false;
            }
        });
    }
    updateInputValue(value) {
        var _a;
        const matchedOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === value);
        this._inputValue = matchedOption ? String(matchedOption.label) : '';
    }
    componentWillLoad() {
        this.refOptions = [];
        this._touched = this._touched === true;
        this.controller.componentWillLoad();
        this.oldValue = this._value;
        this._filteredOptions = this.state._options;
        this.updateInputValue(this._value);
    }
    onChange(event) {
        var _a, _b;
        if (this.oldValue !== ((_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.value)) {
            this.oldValue = (_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.value;
        }
        if (!this._isOpen) {
            this.controller.onFacade.onChange(event, this._value);
        }
    }
    onClick(event) {
        var _a;
        this.toggleListbox(event);
        (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
        this.controller.onFacade.onClick(event);
    }
    static get is() { return "kol-single-select"; }
    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
            },
            "_options": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "OptionsPropType",
                    "resolved": "Option<StencilUnknown>[] | string",
                    "references": {
                        "OptionsPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::OptionsPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Options the user can choose from."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_options"
            },
            "_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": "any",
                "mutable": true,
                "complexType": {
                    "original": "StencilUnknown",
                    "resolved": "boolean | null | number | object | string | undefined",
                    "references": {
                        "StencilUnknown": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::StencilUnknown"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the value of the element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_value",
                "defaultValue": "null"
            },
            "_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"
            },
            "_rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "RowsPropType",
                    "resolved": "number | undefined",
                    "references": {
                        "RowsPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::RowsPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Maximum number of visible rows of the element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_rows"
            },
            "_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 {
            "_isOpen": {},
            "_filteredOptions": {},
            "_inputValue": {},
            "blockSuggestionMouseOver": {},
            "state": {},
            "inputHasFocus": {}
        };
    }
    static get methods() {
        return {
            "getValue": {
                "complexType": {
                    "signature": "() => Promise<StencilUnknown>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "StencilUnknown": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::StencilUnknown"
                        }
                    },
                    "return": "Promise<StencilUnknown>"
                },
                "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": []
                }
            }
        };
    }
    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": "_options",
                "methodName": "validateOptions"
            }, {
                "propName": "_required",
                "methodName": "validateRequired"
            }, {
                "propName": "_shortKey",
                "methodName": "validateShortKey"
            }, {
                "propName": "_syncValueBySelector",
                "methodName": "validateSyncValueBySelector"
            }, {
                "propName": "_touched",
                "methodName": "validateTouched"
            }, {
                "propName": "_value",
                "methodName": "validateValue"
            }, {
                "propName": "_hasClearButton",
                "methodName": "validateHasClearButton"
            }, {
                "propName": "_rows",
                "methodName": "validateRows"
            }, {
                "propName": "_variant",
                "methodName": "validateVariant"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "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')
], KolSingleSelect.prototype, "focus", null);
//# sourceMappingURL=shadow.js.map
