@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -0,0 +1,784 @@
+import { h, forceUpdate } from "@stencil/core";
+import { debounce, isElOrChild } from "../../../global/functions";
+import { selectMessages } from "../../../global/intl";
+/**
+ * @internal
+ * @description Internal listbox, search field, and Select All button used by wm-select,
+ * wm-nested-select, and wm-optgroup. Manages keyboard navigation, option filtering, and
+ * clone options for multiselect. Not for direct application use.
+ */
+export class PrivOptionList {
+    constructor() {
+        this.searchIndex = 0;
+        this.keysSoFar = "";
+        this.debouncedSearch = debounce(() => {
+            this.searchTerm = this.searchFieldEl.value;
+            this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
+            if (this.filteredOptions.length) {
+                this.announce(selectMessages.getSearchResultsFound(this.filteredOptions.length));
+            }
+            else {
+                this.announce(selectMessages.noSearchResults);
+            }
+        }, 150);
+        this.debouncedClearKeysSoFar = debounce(() => {
+            this.keysSoFar = "";
+        }, 500);
+        this.multiple = false;
+        this.search = false;
+        this.selectAll = false;
+        this.searchPlaceholder = undefined;
+        this.optgroupLabel = undefined;
+        this.maxHeight = undefined;
+        this.upwardsHeightLimit = null;
+        this.announcement = "";
+        this.searchTerm = "";
+    }
+    get childOptions() {
+        return Array.from(this.el.getRootNode().host.querySelectorAll("wm-option"));
+    }
+    get cloneOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option"));
+    }
+    get allOptionEls() {
+        // this includes both slotted wm-options and internally created wm-options
+        return this.cloneOptions.concat(this.childOptions);
+    }
+    get isInNestedSelect() {
+        return !!this.optgroupLabel;
+    }
+    get visibleOptionEls() {
+        return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
+    }
+    //////////////////////////////////////
+    // for search variants
+    get filteredOptions() {
+        return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
+    }
+    //////////////////////////////////////
+    //////////////////////////////////////
+    // for multiselect button text
+    get selectedOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
+    }
+    get visibleSelectAllButton() {
+        return this.selectAll && this.multiple && this.searchTerm === "";
+    }
+    get allSelected() {
+        return this.childOptions.every((option) => option.selected);
+    }
+    //////////////////////////////////////
+    get effectiveMaxHeight() {
+        let result = this.maxHeight;
+        if (this.upwardsHeightLimit && this.el.parentElement.clientHeight > this.upwardsHeightLimit) {
+            result = `${this.upwardsHeightLimit -
+                (this.isInNestedSelect ? this.returnBtnEl.clientHeight : 0) -
+                (this.selectAll ? this.selectAllEl.clientHeight : 0) -
+                (this.search ? this.searchFieldWrapperEl.clientHeight : 0)}px`;
+        }
+        return result;
+    }
+    findAndFocusOption(ev) {
+        const letterPressed = ev.detail.letter.toLowerCase();
+        const optionPressed = ev.detail.optionEl;
+        if (!this.keysSoFar && letterPressed == " ") {
+            // if the first key entered is space, treat as a click. Otherwise include in
+            optionPressed.click();
+        }
+        else {
+            if (!this.keysSoFar) {
+                // if first character entered, set currently focused option as the starting index for the search
+                this.visibleOptionEls.forEach((option, idx) => {
+                    if (option.focused) {
+                        this.searchIndex = idx;
+                    }
+                });
+            }
+            this.keysSoFar += letterPressed;
+            let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);
+            if (!nextMatch) {
+                // if match can't be found from starting option downwards, search from top
+                nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);
+            }
+            if (nextMatch) {
+                // findMatchInRange still might have returned null, only focus if match found
+                this.focusOption(nextMatch);
+            }
+            this.debouncedClearKeysSoFar();
+        }
+    }
+    handleOptionSelection(ev) {
+        this.focusOption(ev.detail);
+    }
+    handleChildUp(ev) {
+        this.moveUp(ev.detail);
+    }
+    handleChildDown(ev) {
+        this.moveDown(ev.detail);
+    }
+    moveToFirstOption() {
+        this.focusOption(this.visibleOptionEls[0]);
+    }
+    moveToLastOption() {
+        this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
+    }
+    handleOptionCloneSelection(ev) {
+        const correspondingOption = this.findCorrespondingOption(ev.detail);
+        correspondingOption.click();
+    }
+    componentDidLoad() {
+        if (this.multiple) {
+            this.updateOptionVisibility();
+        }
+    }
+    async handleChildChange() {
+        // on update of wm-options selected state, rerender to update clones state
+        forceUpdate(this.el);
+    }
+    async clearSearch() {
+        if (this.search) {
+            this.searchFieldEl.value = "";
+            this.searchTerm = "";
+            this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
+        }
+    }
+    async focusOption(option) {
+        this.allOptionEls.forEach((i) => (i.focused = i === option));
+        // option must be scrolledIntoView before focused
+        // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView didload do nothing as the option will already be in view
+        option.scrollIntoView({ block: "nearest" });
+        // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
+        // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
+        // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
+        window.setTimeout(() => option.scrollIntoView({ block: "nearest" }), 60);
+        option.focus();
+    }
+    async handleInitialFocus(optionToSelect) {
+        switch (optionToSelect) {
+            case "next":
+                // search variant focuses search field
+                // all others focus option "after" last selected option  (this can be the first option)
+                if (this.search) {
+                    this.searchFieldEl.focus();
+                    this.listboxEl.scrollTop = 0;
+                }
+                else {
+                    this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
+                }
+                break;
+            case "previous":
+                // search variant focuses last option
+                // all others focus option "above" first selected option (this can be the last option)
+                if (this.search) {
+                    this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
+                }
+                else {
+                    this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
+                }
+                break;
+            default:
+                // search variant focuses search field
+                // all others focus the selected option
+                // if no option is selected (empty multiselect), focuses first option
+                if (this.search) {
+                    this.searchFieldEl.focus();
+                    this.listboxEl.scrollTop = 0;
+                }
+                else if (this.selectedOptions.length > 0) {
+                    this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
+                }
+                else {
+                    this.focusOption(this.visibleOptionEls[0]);
+                }
+                break;
+        }
+    }
+    async unfocusAll() {
+        this.allOptionEls.map((i) => (i.focused = false));
+    }
+    findMatchInRange(list, startIndex, endIndex) {
+        let match = null;
+        let optionsInRange = list.slice(startIndex, endIndex);
+        // Find the first option starting with the keysSoFar substring, searching in
+        // the specified range of options
+        optionsInRange.forEach((option) => {
+            const label = option.textContent;
+            if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {
+                match = option;
+            }
+        });
+        return match;
+    }
+    findCorrespondingOption(el) {
+        // if clone, returns the child wm-option
+        // if child wm-option, returns clone
+        const isClone = el.classList.contains("clone");
+        return isClone
+            ? this.childOptions[this.cloneOptions.indexOf(el)]
+            : this.cloneOptions[this.childOptions.indexOf(el)];
+    }
+    handleSearchFieldBlur(ev) {
+        this.searchFieldWrapperEl.classList.remove("focus");
+        if (isElOrChild(this.el, ev.relatedTarget)) {
+            // do not emit a blur event when moving from searchfield to options
+            ev.stopPropagation();
+        }
+    }
+    // on search field or select all. keydown on options is handled via events.
+    handleKeyDown(ev) {
+        const el = ev.target;
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                this.moveDown(ev.target);
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                this.moveUp(ev.target);
+                break;
+            case "ArrowLeft":
+                if (this.isInNestedSelect && el != this.searchFieldEl) {
+                    ev.preventDefault();
+                    this.wmKeyLeftPressed.emit();
+                }
+                break;
+            case "Escape":
+                ev.preventDefault();
+                this.wmEscKeyPressed.emit();
+                break;
+            case "Enter":
+                if (el === this.selectAllEl) {
+                    ev.preventDefault();
+                    this.handleSelectAllClick();
+                    this.close();
+                }
+                break;
+            case " ":
+                if (el === this.selectAllEl) {
+                    ev.preventDefault();
+                    this.handleSelectAllClick();
+                }
+                break;
+        }
+    }
+    close() {
+        this.listboxEl.scrollTop = 0;
+        if (this.multiple) {
+            this.updateOptionVisibility();
+        }
+        this.optionListCloseRequested.emit(); // what actually happens when a close is requested is determined by the parent
+    }
+    handleSelectAllClick() {
+        this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
+    }
+    selectAllOptions() {
+        this.announce(selectMessages.allOptionsSelectedMessage);
+        this.optionListAllSelected.emit();
+    }
+    deselectAllOptions() {
+        this.announce(selectMessages.allOptionsDeselectedMessage);
+        this.optionListAllDeselected.emit();
+    }
+    moveUp(el) {
+        const focusableEls = this.visibleOptionEls;
+        if (this.selectAllEl) {
+            focusableEls.unshift(this.selectAllEl);
+        }
+        if (this.searchFieldEl) {
+            focusableEls.unshift(this.searchFieldEl);
+        }
+        if (this.isInNestedSelect) {
+            focusableEls.unshift(this.returnBtnEl);
+        }
+        const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
+        if (prevEl) {
+            this.focusOption(prevEl);
+        }
+    }
+    moveDown(el) {
+        const focusableEls = this.visibleOptionEls;
+        if (this.selectAllEl) {
+            focusableEls.unshift(this.selectAllEl);
+        }
+        if (this.searchFieldEl) {
+            focusableEls.unshift(this.searchFieldEl);
+        }
+        if (this.isInNestedSelect) {
+            focusableEls.unshift(this.returnBtnEl);
+        }
+        const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
+        if (nextEl) {
+            this.focusOption(nextEl);
+        }
+    }
+    async updateOptionVisibility() {
+        // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
+        // slotted wm-options are hidden if selected, and clone wm-options are made visible if selected
+        this.childOptions.forEach((option, idx) => {
+            const cloneOption = this.cloneOptions[idx];
+            if (option.selected) {
+                option.classList.add("hidden");
+                cloneOption.classList.remove("hidden");
+            }
+            else {
+                option.classList.remove("hidden");
+                cloneOption.classList.add("hidden");
+            }
+        });
+        // find last visible clone option and apply .last class
+        const visibleCloneOptions = this.visibleOptionEls.filter((option) => option.classList.contains("clone"));
+        // if all options are clones, nothing to separate from
+        const allClones = visibleCloneOptions.length === this.visibleOptionEls.length;
+        visibleCloneOptions.forEach((option, idx) => {
+            if (!allClones && idx === visibleCloneOptions.length - 1) {
+                option.classList.add("last");
+            }
+            else {
+                option.classList.remove("last");
+            }
+        });
+    }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    renderReturnBtn() {
+        const selectionCount = this.childOptions.filter((o) => o.selected).length;
+        return (h("button", { ref: (el) => (this.returnBtnEl = el), id: "return-btn", class: "return-btn", onKeyDown: (ev) => this.handleKeyDown(ev), onClick: () => {
+                //@ts-ignore -- Check out this one weird trick TypeScript doesn't want you to know about
+                this.el.getRootNode().host.isExpanded = false;
+            } }, h("div", { class: "svg-icon svg-previous" }), h("div", { class: "return-btn-label" }, this.optgroupLabel, selectionCount > 0 && (h("span", { class: "selection-count" }, this.multiple
+            ? selectMessages.getOptgroupMultipleSelectionCount(selectionCount)
+            : selectMessages.optgroupSingleSelectionCount())), h("span", { class: "sr-only" }, "Back to top level"))));
+    }
+    renderSearchField() {
+        return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", "aria-controls": "list", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+    }
+    renderSearchFailedMessage() {
+        return h("div", { class: "search-results-message" }, selectMessages.noSearchResults);
+    }
+    renderSelectAllButton() {
+        return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? selectMessages.deselectAllMessage : selectMessages.selectAllMessage));
+    }
+    renderCloneOptions() {
+        return Array.from(this.childOptions).map((o) => {
+            const option = o;
+            return (h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
+        });
+    }
+    renderNonOptions() {
+        return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
+    }
+    render() {
+        return (h("div", { key: 'bb355908bd82d64736fcc3793f33f3cfc1bb9fdc', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '94006991cf9a01edc1395cff5af6bb0983044ce0', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-label": this.optgroupLabel, ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '5f3550b704d27cb7275c2a607e3a3d3f258af8e7' })), h("div", { key: 'e872ce1b3d01d6a5d03a538825d9e200d2998dbd', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+    }
+    static get is() { return "priv-option-list"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["priv-option-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-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": ""
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "search": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "select-all",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-placeholder",
+                "reflect": false
+            },
+            "optgroupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "optgroup-label",
+                "reflect": false
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-height",
+                "reflect": false
+            },
+            "upwardsHeightLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "upwards-height-limit",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "announcement": {},
+            "searchTerm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionListSearchChanged",
+                "name": "optionListSearchChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }, {
+                "method": "optionListCloseRequested",
+                "name": "optionListCloseRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "optionListAllSelected",
+                "name": "optionListAllSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "optionListAllDeselected",
+                "name": "optionListAllDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmEscKeyPressed",
+                "name": "wmEscKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmKeyLeftPressed",
+                "name": "wmKeyLeftPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "handleChildChange": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearSearch": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "focusOption": {
+                "complexType": {
+                    "signature": "(option: HTMLElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "option",
+                            "type": "HTMLElement",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "handleInitialFocus": {
+                "complexType": {
+                    "signature": "(optionToSelect?: \"next\" | \"previous\") => Promise<void>",
+                    "parameters": [{
+                            "name": "optionToSelect",
+                            "type": "\"next\" | \"previous\" | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "unfocusAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateOptionVisibility": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "wmLetterPressed",
+                "method": "findAndFocusOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmOptionSelected",
+                "method": "handleOptionSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmKeyUpPressed",
+                "method": "handleChildUp",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmKeyDownPressed",
+                "method": "handleChildDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmHomeKeyPressed",
+                "method": "moveToFirstOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEndKeyPressed",
+                "method": "moveToLastOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "intCloneClicked",
+                "method": "handleOptionCloneSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}