import { __decorate, __metadata } from "tslib";
import { Host, h, } from "@stencil/core";
import { inheritAttributes } from "../../utils/attributes";
import { BEM } from "../../utils/bem";
import { balBrowser } from "../../utils/browser";
import { ListenToConfig, defaultConfig, } from "../../utils/config";
import { DropdownAutoFillUtil, DropdownEventsUtil, DropdownFocusUtil, DropdownFormSubmitUtil, DropdownIcon, DropdownInput, DropdownNativeSelect, DropdownOptionUtil, DropdownPopupUtil, DropdownValue, DropdownValueUtil, } from "../../utils/dropdown";
import { defaultBalAriaForm } from "../../utils/form";
import { stopEventBubbling } from "../../utils/form-input";
import { addEventListener, removeEventListener, waitAfterIdleCallback } from "../../utils/helpers";
import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from "../../utils/keyboard";
import { Logger } from "../../utils/log";
export class Dropdown {
    constructor() {
        this.inputId = `bal-dropdown-${balDropdownIds++}`;
        this.inheritedAttributes = {};
        this.initialValue = [];
        this.nativeOptions = [];
        this.rawOptions = [];
        this.choices = [];
        this.rawValue = [];
        this.hasFocus = false;
        this.isExpanded = false;
        this.isAutoFilled = false;
        this.isKeyboardMode = false;
        this.inputLabel = '';
        this.ariaForm = defaultBalAriaForm;
        this.language = defaultConfig.language;
        this.region = defaultConfig.region;
        this.httpFormSubmit = defaultConfig.httpFormSubmit;
        this.labelToFocus = '';
        this.valueUtil = new DropdownValueUtil();
        this.eventsUtil = new DropdownEventsUtil();
        this.popupUtil = new DropdownPopupUtil();
        this.optionUtil = new DropdownOptionUtil();
        this.formSubmitUtil = new DropdownFormSubmitUtil();
        this.focusUtil = new DropdownFocusUtil();
        this.autoFillUtil = new DropdownAutoFillUtil();
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Indicates whether the value of the control can be automatically completed by the browser.
         */
        this.autocomplete = 'off';
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * Defines the placeholder of the component. Only shown when the value is empty
         */
        this.placeholder = '';
        /**
         * Defines a inline label to be shown before the value
         */
        this.inlineLabel = '';
        /**
         * If `true` there will be on trigger icon visible
         */
        this.icon = 'caret-down';
        /**
         * Defines the size of the control.
         */
        this.size = '';
        /**
         * Defines the color style of the control
         */
        this.theme = '';
        /**
         * If `true`, the user cannot interact with the option.
         */
        this.disabled = false;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = false;
        /**
         * If `true`, the user can select multiple options.
         */
        this.multiple = false;
        /**
         * If `true`, the selected options are shown as chips
         */
        this.chips = false;
        /**
         * If `true`, a cross at the end is visible to clear the selection
         */
        this.clearable = false;
        /**
         * If `true`, the component will be shown as invalid
         */
        this.invalid = false;
        /**
         * If `true`, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * Defines if the select is in a loading state.
         */
        this.loading = false;
        /**
         * Defines the filter logic of the list
         */
        this.filter = 'includes';
        /**
         * Defines the max height of the list element
         */
        this.contentHeight = 262;
        /**
         * @internal
         * Set this to `true` when the component is placed on a dark background.
         */
        this.inverted = false;
        /**
         * Steps can be passed as a property or through HTML markup.
         */
        this.options = [];
        /**
         * The value of the selected options.
         */
        this.value = [];
        /**
         * LIFECYCLE
         * ------------------------------------------------------
         */
        this.hasConnected = false;
        this.listenToOptionChange = (ev) => {
            this.optionUtil.listenToOptionChange(ev);
        };
        this.listenOnClickOutside = (ev) => {
            this.eventsUtil.handleOutsideClick(ev);
        };
        this.resetHandler = (ev) => {
            this.formSubmitUtil.handle(ev);
        };
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.handleAutoFill = async (ev) => {
            this.log('(handleAutoFill)', ev, this.nativeEl.value);
            this.autoFillUtil.handleAutoFill(ev);
        };
        this.handleKeyDown = (ev) => {
            var _a, _b, _c, _d, _e;
            if (ev && ev.key) {
                if (this.isExpanded) {
                    /**
                     * ⬇️ Arrow up key
                     */
                    if (isArrowDownKey(ev)) {
                        stopEventBubbling(ev);
                        (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.focusNext();
                        /**
                         * ⬆️ Arrow up key
                         */
                    }
                    else if (isArrowUpKey(ev)) {
                        stopEventBubbling(ev);
                        (_b = this.listEl) === null || _b === void 0 ? void 0 : _b.focusPrevious();
                        /**
                         * Go to top of the list
                         */
                    }
                    else if (ev.key === 'Home' || ev.key === 'PageUp') {
                        stopEventBubbling(ev);
                        (_c = this.listEl) === null || _c === void 0 ? void 0 : _c.focusFirst();
                        /**
                         * Go to bottom of the list
                         */
                    }
                    else if (ev.key === 'End' || ev.key === 'PageDown') {
                        stopEventBubbling(ev);
                        (_d = this.listEl) === null || _d === void 0 ? void 0 : _d.focusLast();
                        /**
                         * Select focused option
                         */
                    }
                    else if (isEnterKey(ev)) {
                        stopEventBubbling(ev);
                        (_e = this.listEl) === null || _e === void 0 ? void 0 : _e.selectByFocus();
                        /**
                         * Close list
                         */
                    }
                    else if (ev.key === 'Tab' || isEscapeKey(ev)) {
                        this.popupUtil.collapseList();
                        /**
                         * Focus on label
                         */
                    }
                    else if (ev.key.length === 1) {
                        this.focusUtil.focusOptionByLabel(ev.key);
                    }
                }
                else {
                    /**
                     * Open list
                     */
                    if (isEnterKey(ev) || isSpaceKey(ev)) {
                        stopEventBubbling(ev);
                        this.popupUtil.expandList();
                        /**
                         * Focus on label
                         */
                    }
                    else if (ev.key.length === 1) {
                        this.focusUtil.focusOptionByLabel(ev.key, { select: true });
                    }
                }
            }
            else {
                // Close the popup on autofill
                if (this.isExpanded) {
                    this.popupUtil.collapseList();
                }
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    async optionChanged() {
        this.optionUtil.optionChanged();
    }
    valueChanged(newValue, oldValue) {
        this.valueUtil.valueChanged(newValue, oldValue);
    }
    connectedCallback() {
        if (!this.hasConnected) {
            this.eventsUtil.connectedCallback(this);
            this.valueUtil.connectedCallback(this);
            this.popupUtil.connectedCallback(this);
            this.optionUtil.connectedCallback(this);
            this.formSubmitUtil.connectedCallback(this);
            this.focusUtil.connectedCallback(this);
            this.autoFillUtil.connectedCallback(this);
        }
        addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
        if (balBrowser.hasDocument) {
            addEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
            addEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
            addEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
            addEventListener(document, 'click', this.listenOnClickOutside);
            addEventListener(document, 'reset', this.resetHandler, {
                capture: true,
            });
        }
        this.hasConnected = true;
    }
    disconnectedCallback() {
        removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
        if (balBrowser.hasDocument) {
            removeEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
            removeEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
            removeEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
            removeEventListener(document, 'click', this.listenOnClickOutside);
            removeEventListener(document, 'reset', this.resetHandler, {
                capture: true,
            });
        }
    }
    async componentWillRender() {
        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex', 'data-hj-allow']);
        await this.optionUtil.componentWillRender();
    }
    componentDidRender() {
        this.formSubmitUtil.componentDidRender();
    }
    componentDidLoad() {
        this.valueUtil.componentDidLoad();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
        this.region = state.region;
        this.httpFormSubmit = state.httpFormSubmit;
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * Sets the focus on the input element
     */
    async setFocus() {
        if (this.nativeEl && !this.valueUtil.isDisabled()) {
            await waitAfterIdleCallback();
            this.nativeEl.focus();
        }
    }
    /**
     * Returns the value of the component
     */
    async getValue() {
        return this.rawValue;
    }
    /**
     * Sets the value to `[]`, the input value to ´''´ and the focus index to ´0´.
     */
    async clear() {
        this.valueUtil.updateRawValueBySelection([]);
    }
    /**
     * Opens the popup with option list
     */
    async open() {
        if (!this.valueUtil.isDisabled() && this.panelEl) {
            await this.popupUtil.expandList();
        }
    }
    /**
     * Closes the popup with option list
     */
    async close() {
        if (!this.valueUtil.isDisabled() && this.panelEl) {
            await this.popupUtil.collapseList();
        }
    }
    /**
     * Select option by passed value
     */
    async select(newValue) {
        const parsedNewValue = this.valueUtil.parseValueString(newValue);
        this.valueUtil.updateRawValueBySelection(parsedNewValue);
    }
    /**
     * @internal
     */
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('dropdown');
        const isFilled = this.valueUtil.isFilled();
        const hasSize = this.size !== '';
        const size = `size-${this.size}`;
        const hasTheme = this.theme !== '';
        const theme = `theme-${this.theme}`;
        const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
        return (h(Host, { key: '3fe05ba6190dabe5fb8c297f4809659f7c24aa74', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'e0b038aa5b7ead381d271c5b7b04fd5bbaa3ea3b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
                .element('root')
                .modifier(theme + '-filled')
                .class(isFilled && hasTheme)), block
                .element('root')
                .modifier(theme + '-expanded')
                .class(this.isExpanded && hasTheme)), "data-testid": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'a3499a9e2abcaa3b363385c475c3dcd91ed1a371', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '8ffc980c91386038c4ee9b9e6673a25a3609d674', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, renderChip: option => {
                return (h("bal-tag", { key: option.value, "data-testid": "bal-dropdown-chip", size: "small", invalid: this.invalid, disabled: this.disabled || this.readonly, closable: !(this.disabled || this.readonly), onBalCloseClick: () => this.valueUtil.removeOption(option) }, option.label));
            } })), h(DropdownInput, { key: '9a97fc39a821d5dcca32eba522ae29e4aa6eedc0', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: '2a33a8ac7f336889197137fc741ed8a4a107fceb', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'd0f6958fb47ad7f6d73d4f98482cb2102c344f20', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h("div", { key: '29e98d1f54ffb6ee913bd682d6531d45997fc1d0', id: `${this.inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(this.isExpanded)), ref: el => (this.panelEl = el) }, h("bal-option-list", { key: '4e6fa69f9d9859208f83dd7bc86c17fc75d5eb60', multiple: this.multiple, disabled: this.valueUtil.isDisabled(), filter: this.filter, required: this.required, contentHeight: this.contentHeight, ref: el => (this.listEl = el) }, h("slot", { key: '1c169dc692632671f62410b2dadcbbc10b0fe36a' }), this.optionUtil.hasPropOptions()
            ? this.rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
            : ''))));
    }
    static get is() { return "bal-dropdown"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-dropdown.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-dropdown.css"]
        };
    }
    static get properties() {
        return {
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalInputAutocomplete",
                    "resolved": "\"on\" | \"off\" | \"tel\" | \"url\" | \"email\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"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-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether the value of the control can be automatically completed by the browser."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete",
                "defaultValue": "'off'"
            },
            "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,
                "reflect": false,
                "attribute": "name",
                "defaultValue": "this.inputId"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the placeholder of the component. Only shown when the value is empty"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "''"
            },
            "inlineLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines a inline label to be shown before the value"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "inline-label",
                "defaultValue": "''"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` there will be on trigger icon visible"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "'caret-down'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalDropdownSize",
                    "resolved": "\"\" | \"small\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the size of the control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "''"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalDropdownTheme",
                    "resolved": "\"\" | \"purple\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the color style of the control"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme",
                "defaultValue": "''"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot interact with the option."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user can select multiple options."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple",
                "defaultValue": "false"
            },
            "chips": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the selected options are shown as chips"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "chips",
                "defaultValue": "false"
            },
            "clearable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, a cross at the end is visible to clear the selection"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "clearable",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the component will be shown as invalid"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user must fill in a value before submitting a form."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines if the select is in a loading state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "filter": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalOptionListFilter",
                    "resolved": "\"includes\" | \"starts-with\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the filter logic of the list"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "filter",
                "defaultValue": "'includes'"
            },
            "contentHeight": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the max height of the list element"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "content-height",
                "defaultValue": "262"
            },
            "inverted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Set this to `true` when the component is placed on a dark background."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "inverted",
                "defaultValue": "false"
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "BalOption[]",
                    "resolved": "BalOption[]",
                    "references": {
                        "BalOption": {
                            "location": "import",
                            "path": "../../utils/dropdown",
                            "id": "src/utils/dropdown/index.ts::BalOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Steps can be passed as a property or through HTML markup."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | string[]",
                    "resolved": "string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value of the selected options."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "rawOptions": {},
            "choices": {},
            "rawValue": {},
            "hasFocus": {},
            "isExpanded": {},
            "isAutoFilled": {},
            "isKeyboardMode": {},
            "inputLabel": {},
            "ariaForm": {},
            "language": {},
            "region": {},
            "httpFormSubmit": {},
            "labelToFocus": {}
        };
    }
    static get events() {
        return [{
                "method": "balChange",
                "name": "balChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a option got selected."
                },
                "complexType": {
                    "original": "BalEvents.BalDropdownChangeDetail",
                    "resolved": "string | string[]",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balFocus",
                "name": "balFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input has focus."
                },
                "complexType": {
                    "original": "BalEvents.BalDropdownFocusDetail",
                    "resolved": "FocusEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balBlur",
                "name": "balBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input loses focus."
                },
                "complexType": {
                    "original": "BalEvents.BalDropdownBlurDetail",
                    "resolved": "FocusEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "configChanged": {
                "complexType": {
                    "signature": "(state: BalConfigState) => Promise<void>",
                    "parameters": [{
                            "name": "state",
                            "type": "BalConfigState",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalConfigState": {
                            "location": "import",
                            "path": "../../utils/config",
                            "id": "src/utils/config/index.ts::BalConfigState"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "define config for the component"
                        }]
                }
            },
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets the focus on the input element",
                    "tags": []
                }
            },
            "getValue": {
                "complexType": {
                    "signature": "() => Promise<string[]>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<string[]>"
                },
                "docs": {
                    "text": "Returns the value of the component",
                    "tags": []
                }
            },
            "clear": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets the value to `[]`, the input value to \u00B4''\u00B4 and the focus index to \u00B40\u00B4.",
                    "tags": []
                }
            },
            "open": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Opens the popup with option list",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes the popup with option list",
                    "tags": []
                }
            },
            "select": {
                "complexType": {
                    "signature": "(newValue: string | string[]) => Promise<void>",
                    "parameters": [{
                            "name": "newValue",
                            "type": "string | string[]",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Select option by passed value",
                    "tags": []
                }
            },
            "setAriaForm": {
                "complexType": {
                    "signature": "(ariaForm: BalAriaForm) => Promise<void>",
                    "parameters": [{
                            "name": "ariaForm",
                            "type": "BalAriaForm",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalAriaForm": {
                            "location": "import",
                            "path": "../../utils/form",
                            "id": "src/utils/form.ts::BalAriaForm"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "options",
                "methodName": "optionChanged"
            }, {
                "propName": "value",
                "methodName": "valueChanged"
            }];
    }
}
__decorate([
    Logger('bal-dropdown'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Dropdown.prototype, "createLogger", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Dropdown.prototype, "configChanged", null);
let balDropdownIds = 0;
