@baloise/ds-core 16.0.3 → 16.1.0

package/dist/collection/components/bal-dropdown/bal-dropdown.js

@@ -0,0 +1,882 @@
+import { __decorate, __metadata } from "tslib";
+import { h, Host, } from "@stencil/core";
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey, } from "@baloise/web-app-utils";
+import { BEM } from "../../utils/bem";
+import { Logger } from "../../utils/log";
+import { stopEventBubbling } from "../../utils/form-input";
+import { inheritAttributes } from "../../utils/attributes";
+import { DropdownEventsUtil, DropdownFormSubmitUtil, DropdownOptionUtil, DropdownPopupUtil, DropdownValueUtil, DropdownOptionList, DropdownFocusUtil, DropdownIcon, DropdownNativeSelect, DropdownInput, DropdownValue, DropdownAutoFillUtil, } from "../../utils/dropdown";
+import { ListenToConfig, defaultConfig, } from "../../utils/config";
+import { defaultBalAriaForm } from "../../utils/form";
+import { waitAfterIdleCallback } from "../../utils/helpers";
+export class Dropdown {
+    constructor() {
+        this.inputId = `bal-dropdown-${balDropdownIds++}`;
+        this.inheritedAttributes = {};
+        this.initialValue = [];
+        this.nativeOptions = [];
+        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();
+        /**
+         * 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();
+                }
+            }
+        };
+        this.rawOptions = [];
+        this.choices = [];
+        this.rawValue = [];
+        this.hasFocus = false;
+        this.isExpanded = false;
+        this.isAutoFilled = false;
+        this.inputLabel = '';
+        this.ariaForm = defaultBalAriaForm;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.httpFormSubmit = defaultConfig.httpFormSubmit;
+        this.labelToFocus = '';
+        this.autocomplete = 'off';
+        this.name = this.inputId;
+        this.placeholder = '';
+        this.icon = 'caret-down';
+        this.disabled = false;
+        this.readonly = false;
+        this.multiple = false;
+        this.chips = false;
+        this.clearable = false;
+        this.invalid = false;
+        this.required = false;
+        this.loading = false;
+        this.filter = 'includes';
+        this.contentHeight = 262;
+        this.inverted = false;
+        this.options = [];
+        this.value = [];
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    async optionChanged() {
+        this.optionUtil.optionChanged();
+    }
+    valueChanged(newValue, oldValue) {
+        this.valueUtil.valueChanged(newValue, oldValue);
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        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);
+    }
+    async componentWillRender() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
+        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;
+    }
+    async listenToOptionChange(ev) {
+        this.optionUtil.listenToOptionChange(ev);
+    }
+    listenOnClickOutside(ev) {
+        this.eventsUtil.handleOutsideClick(ev);
+    }
+    resetHandler(ev) {
+        this.formSubmitUtil.handle(ev);
+    }
+    /**
+     * 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');
+        return (h(Host, { class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), 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)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { class: 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())) }, h(DropdownValue, { filled: this.valueUtil.isFilled(), chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { name: this.name, 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, { 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, { icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", null))));
+    }
+    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."
+                },
+                "attribute": "autocomplete",
+                "reflect": false,
+                "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."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.inputId"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the placeholder of the component. Only shown when the value is empty"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "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"
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "'caret-down'"
+            },
+            "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."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "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."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "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"
+                },
+                "attribute": "chips",
+                "reflect": false,
+                "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"
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "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"
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "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."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "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"
+                },
+                "attribute": "filter",
+                "reflect": false,
+                "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"
+                },
+                "attribute": "content-height",
+                "reflect": false,
+                "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": ""
+                },
+                "attribute": "inverted",
+                "reflect": false,
+                "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."
+                },
+                "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."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rawOptions": {},
+            "choices": {},
+            "rawValue": {},
+            "hasFocus": {},
+            "isExpanded": {},
+            "isAutoFilled": {},
+            "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"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "balOptionChange",
+                "method": "listenToOptionChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "listenOnClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "resetHandler",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+__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;