@baloise/ds-core 16.0.3 → 16.1.0

package/dist/collection/components/bal-option-list/bal-option-list.js

@@ -0,0 +1,939 @@
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import isNil from "lodash.isnil";
+import { inheritAttributes } from "../../utils/attributes";
+import { BEM } from "../../utils/bem";
+import { raf, waitAfterFramePaint } from "../../utils/helpers";
+import { Logger } from "../../utils/log";
+import { includes, startsWith } from "../bal-select/utils/utils";
+import { defaultBalAriaForm } from "../../utils/form";
+export class OptionList {
+    constructor() {
+        this.inputId = `bal-option-list-${balOptionListIds++}`;
+        this.inheritAttributes = {};
+        this.ariaForm = defaultBalAriaForm;
+        this.multiple = false;
+        this.disabled = false;
+        this.required = false;
+        this.focusIndex = -1;
+        this.labelledby = undefined;
+        this.filter = 'includes';
+        this.contentHeight = 262;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    contentHeightChanged(value) {
+        if (value === undefined) {
+            this.el.style.removeProperty('--bal-option-list-max-height');
+        }
+        else {
+            this.el.style.setProperty('--bal-option-list-max-height', `${value}px`);
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        this.contentHeightChanged(this.contentHeight);
+    }
+    componentWillRender() {
+        this.inheritAttributes = inheritAttributes(this.el, ['aria-multiselectable', 'aria-labelledby']);
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter(ev) {
+        const options = this.options;
+        const indexToFocus = this.getOptionIndex(options, ev.detail.value);
+        if (indexToFocus !== undefined) {
+            this.updateFocus(options, indexToFocus);
+        }
+    }
+    listenToOptionChange({ detail }) {
+        if (!this.multiple) {
+            this.options.filter(option => option.value !== detail.value).forEach(option => (option.selected = false));
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Focus the first visible option in the list
+     * @returns focusIndex
+     */
+    async focusFirst() {
+        const options = this.options;
+        const indexToFocus = this.getFirstOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollTopPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the last visible option in the list
+     * @returns focusIndex
+     */
+    async focusLast() {
+        const options = this.options;
+        const indexToFocus = this.getLastOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollBottomPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the next visible option in the list
+     * @returns focusIndex
+     */
+    async focusNext() {
+        const options = this.options;
+        const indexToFocus = this.getNextOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollBottomPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the previous visible option in the list
+     * @returns focusIndex
+     */
+    async focusPrevious() {
+        const options = this.options;
+        const indexToFocus = this.getPreviousOptionIndex(options);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollTopPosition(option);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Focus the option with the label that starts with the search property
+     * @returns focusIndex
+     */
+    async focusByLabel(search, config) {
+        const options = this.options;
+        const indexToFocus = this.getOptionIndexByLabel(options, search);
+        this.updateFocus(options, indexToFocus);
+        const option = options[indexToFocus];
+        this.updateScrollTopPosition(option);
+        await waitAfterFramePaint();
+        if (config.select) {
+            await option.select();
+        }
+        return indexToFocus;
+    }
+    /**
+     * Filter the options by the given filter property and hides options
+     * @returns focusIndex
+     */
+    async filterByContent(search) {
+        const options = this.allOptions;
+        this.filterOptions(options, search);
+        await waitAfterFramePaint();
+        return this.focusFirst();
+    }
+    /**
+     * Shows or hides all options
+     */
+    async resetHidden(hidden = false) {
+        this.options.forEach(option => (option.hidden = hidden));
+        await waitAfterFramePaint();
+        this.resetFocus();
+    }
+    /**
+     * Selects or deselects all options
+     */
+    async resetSelected(selected = false) {
+        this.options.forEach(option => (option.selected = selected));
+        await waitAfterFramePaint();
+    }
+    /**
+     * Updates options
+     */
+    async updateSelected(values) {
+        this.options.forEach(option => (option.selected = values.includes(option.value)));
+        await waitAfterFramePaint();
+    }
+    /**
+     * Resets the focus index to pristine and scrolls to the top of the list
+     */
+    async resetFocus() {
+        const options = this.options;
+        const indexToFocus = -1;
+        this.updateFocus(options, indexToFocus);
+        this.scrollTo(0);
+        await waitAfterFramePaint();
+        return indexToFocus;
+    }
+    /**
+     * Returns a list of option values
+     */
+    async getSelectedValues() {
+        const options = this.options;
+        return options.filter(option => option.selected).map(option => option.value);
+    }
+    /**
+     * Returns a list of option labels
+     */
+    async getSelectedOptions(values) {
+        const options = this.options;
+        if (values && values.length > 0) {
+            return options.filter(option => values.includes(option.value)).map(option => option);
+        }
+        return options.filter(option => option.selected).map(option => option);
+    }
+    /**
+     * Returns a list of options
+     */
+    async getValues() {
+        return this.options.map(option => option.value);
+    }
+    /**
+     * Returns a list of options
+     */
+    async getLabels() {
+        return this.options.map(option => option.label);
+    }
+    /**
+     * Returns a list of accessible options
+     */
+    async getOptions() {
+        return this.options.filter(o => !o.disabled || !o.hidden);
+    }
+    /**
+     * Selects the option with the current focus
+     */
+    async selectByFocus() {
+        const options = this.options;
+        const option = options[this.focusIndex];
+        if (option) {
+            if (this.multiple) {
+                option.select(!option.selected);
+            }
+            else {
+                option.select(true);
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get options() {
+        return Array.from(this.el.querySelectorAll('bal-option')).filter(o => !o.hidden);
+    }
+    get allOptions() {
+        return Array.from(this.el.querySelectorAll('bal-option'));
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    filterOptions(options, search) {
+        const filteredOptions = [];
+        const filter = this.filter === 'includes' ? includes : startsWith;
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            const content = option.textContent || '';
+            if (filter(content, search)) {
+                filteredOptions.push(option);
+                option.hidden = false;
+            }
+            else {
+                option.hidden = true;
+            }
+        }
+        return filteredOptions;
+    }
+    isOptionVisible(option) {
+        const visibleHeight = this.el.clientHeight;
+        const topPosition = this.el.scrollTop;
+        const bottomPosition = topPosition + visibleHeight;
+        const isVisible = topPosition <= option.offsetTop && option.offsetTop + option.clientHeight <= bottomPosition;
+        return isVisible;
+    }
+    updateScrollTopPosition(option) {
+        if (option) {
+            const isVisible = this.isOptionVisible(option);
+            if (!isVisible) {
+                this.scrollTo(this.getScrollTopForTopPosition(option));
+            }
+        }
+    }
+    updateScrollBottomPosition(option) {
+        if (option) {
+            const isVisible = this.isOptionVisible(option);
+            if (!isVisible) {
+                this.scrollTo(this.getScrollTopForBottomPosition(option));
+            }
+        }
+    }
+    getScrollTopForTopPosition(option) {
+        const topPosition = option.offsetTop;
+        const scrollTop = topPosition;
+        if (scrollTop < 0) {
+            return 0;
+        }
+        return scrollTop;
+    }
+    getScrollTopForBottomPosition(option) {
+        const visibleHeight = this.el.clientHeight;
+        const bottomPosition = option.offsetTop + option.clientHeight;
+        const scrollTop = bottomPosition - visibleHeight;
+        if (scrollTop < 0) {
+            return 0;
+        }
+        return scrollTop;
+    }
+    async scrollTo(scrollTop) {
+        if (scrollTop !== undefined && scrollTop !== null) {
+            if (this.focusRaf !== undefined) {
+                cancelAnimationFrame(this.focusRaf);
+            }
+            this.focusRaf = raf(async () => {
+                this.el.scrollTop = scrollTop;
+            });
+        }
+    }
+    updateFocus(options, indexToFocus) {
+        this.focusIndex = indexToFocus;
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            option.focused = index === indexToFocus;
+        }
+    }
+    getOptionIndex(options, value) {
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (option.value === value) {
+                return index;
+            }
+        }
+        return undefined;
+    }
+    getFirstOptionIndex(options) {
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (!option.disabled) {
+                return index;
+            }
+        }
+        return this.focusIndex;
+    }
+    getNextOptionIndex(options, index = this.focusIndex) {
+        if (index < 0) {
+            return this.getFirstOptionIndex(options);
+        }
+        const lastIndex = this.getLength(options);
+        let newIndex = index;
+        if (index < lastIndex) {
+            newIndex = index + 1;
+            if (options[newIndex].disabled) {
+                return this.getNextOptionIndex(options, newIndex);
+            }
+        }
+        return newIndex;
+    }
+    getPreviousOptionIndex(options, index = this.focusIndex) {
+        const firstIndex = this.getFirstOptionIndex(options);
+        if (index <= firstIndex) {
+            return firstIndex;
+        }
+        let newIndex = index;
+        newIndex = index - 1;
+        if (options[newIndex].disabled) {
+            return this.getPreviousOptionIndex(options, newIndex);
+        }
+        return newIndex;
+    }
+    getLastOptionIndex(options) {
+        for (let index = options.length - 1; index >= 0; index--) {
+            const option = options[index];
+            if (!option.disabled) {
+                return index;
+            }
+        }
+        return this.focusIndex;
+    }
+    getOptionIndexByLabel(options, label) {
+        if (label === undefined || label === '') {
+            return this.focusIndex;
+        }
+        const option = options.find(o => startsWith(o.label || '', label));
+        if (!isNil(option) && option.id) {
+            return options.indexOf(option);
+        }
+        return this.focusIndex;
+    }
+    getLength(options) {
+        const indexes = options.map((option, index) => (option.disabled ? 0 : index));
+        const length = Math.max(...indexes);
+        return length;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option-list');
+        const labelledby = this.labelledby || this.ariaForm.labelId;
+        return (h(Host, { class: Object.assign({}, block.class()), id: this.inputId, tabIndex: -1 }, h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", null))));
+    }
+    static get is() { return "bal-option-list"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-option-list.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-option-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the list supports multiple selections"
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "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"
+            },
+            "focusIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the focused option with his index value"
+                },
+                "attribute": "focus-index",
+                "reflect": false,
+                "defaultValue": "-1"
+            },
+            "labelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the label element to describe this option list"
+                },
+                "attribute": "labelledby",
+                "reflect": 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": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the max height of the list element"
+                },
+                "attribute": "content-height",
+                "reflect": false,
+                "defaultValue": "262"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaForm": {}
+        };
+    }
+    static get methods() {
+        return {
+            "focusFirst": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Focus the first visible option in the list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "focusIndex"
+                        }]
+                }
+            },
+            "focusLast": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Focus the last visible option in the list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "focusIndex"
+                        }]
+                }
+            },
+            "focusNext": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Focus the next visible option in the list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "focusIndex"
+                        }]
+                }
+            },
+            "focusPrevious": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Focus the previous visible option in the list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "focusIndex"
+                        }]
+                }
+            },
+            "focusByLabel": {
+                "complexType": {
+                    "signature": "(search: string, config: Partial<{ select: boolean; }>) => Promise<number>",
+                    "parameters": [{
+                            "name": "search",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "config",
+                            "type": "{ select?: boolean; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Focus the option with the label that starts with the search property",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "focusIndex"
+                        }]
+                }
+            },
+            "filterByContent": {
+                "complexType": {
+                    "signature": "(search: string) => Promise<number>",
+                    "parameters": [{
+                            "name": "search",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Filter the options by the given filter property and hides options",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "focusIndex"
+                        }]
+                }
+            },
+            "resetHidden": {
+                "complexType": {
+                    "signature": "(hidden?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "hidden",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows or hides all options",
+                    "tags": []
+                }
+            },
+            "resetSelected": {
+                "complexType": {
+                    "signature": "(selected?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "selected",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects or deselects all options",
+                    "tags": []
+                }
+            },
+            "updateSelected": {
+                "complexType": {
+                    "signature": "(values?: string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "values",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Updates options",
+                    "tags": []
+                }
+            },
+            "resetFocus": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Resets the focus index to pristine and scrolls to the top of the list",
+                    "tags": []
+                }
+            },
+            "getSelectedValues": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Returns a list of option values",
+                    "tags": []
+                }
+            },
+            "getSelectedOptions": {
+                "complexType": {
+                    "signature": "(values?: string[]) => Promise<BalOption[]>",
+                    "parameters": [{
+                            "name": "values",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalOption": {
+                            "location": "import",
+                            "path": "../../utils/dropdown",
+                            "id": "src/utils/dropdown/index.ts::BalOption"
+                        }
+                    },
+                    "return": "Promise<BalOption[]>"
+                },
+                "docs": {
+                    "text": "Returns a list of option labels",
+                    "tags": []
+                }
+            },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Returns a list of options",
+                    "tags": []
+                }
+            },
+            "getLabels": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Returns a list of options",
+                    "tags": []
+                }
+            },
+            "getOptions": {
+                "complexType": {
+                    "signature": "() => Promise<BalOption[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalOption": {
+                            "location": "import",
+                            "path": "../../utils/dropdown",
+                            "id": "src/utils/dropdown/index.ts::BalOption"
+                        }
+                    },
+                    "return": "Promise<BalOption[]>"
+                },
+                "docs": {
+                    "text": "Returns a list of accessible options",
+                    "tags": []
+                }
+            },
+            "selectByFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects the option with the current focus",
+                    "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": "contentHeight",
+                "methodName": "contentHeightChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "balOptionFocus",
+                "method": "listenToMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "balOptionChange",
+                "method": "listenToOptionChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('bal-option-list'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], OptionList.prototype, "createLogger", null);
+let balOptionListIds = 0;