@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -0,0 +1,705 @@
+import { h, Host } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
+export class Select {
+    constructor() {
+        this.scrollableParents = [];
+        this.returnFocus = false;
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
+        this.displayedOptions = [];
+        this.debouncedReposition = debounce(() => {
+            this.dropdownPosition();
+        }, 100);
+        this.disabled = false;
+        this.maxHeight = "200px";
+        this.label = undefined;
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.errorMessage = undefined;
+        this.multiple = false;
+        this.search = false;
+        this.selectAll = false;
+        this.placeholder = selectMessages.multiPlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
+        this.info = undefined;
+        this.isExpanded = false;
+        this.isHidden = false;
+        this.openUp = false;
+        this.announcement = "";
+    }
+    get childOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option"));
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get displayText() {
+        return this.displayedOptions.map((x) => x.textContent).join(", ");
+    }
+    get selectedOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
+    }
+    get allSelected() {
+        return this.childOptions.every((option) => option.selected);
+    }
+    //////////////////////////////////////
+    handleOptionSelection() {
+        if (!this.multiple) {
+            this.returnFocus = true;
+            this.dropdownEl.hidePopover();
+        }
+    }
+    handleChildEnter() {
+        // only occurs for multiselects. handle the click, then close
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
+    }
+    closeDropdownOnEscape() {
+        this.returnFocus = true;
+        this.dropdownEl.hidePopover();
+    }
+    handleToggle(ev) {
+        ev.newState === "open" ? this.onOpen() : this.onClose();
+    }
+    dropdownPosition() {
+        // polyfill for opening up or down + positioning according to screen
+        // (must recalculate on scroll, resize)
+        // Using transform for better performance - only affects composite layer, no layout recalculation
+        const buttonElRect = this.buttonEl.getBoundingClientRect();
+        const spaceAbove = buttonElRect.top;
+        const spaceBelow = document.documentElement.clientHeight - buttonElRect.bottom;
+        const dropdownHeight = this.dropdownEl.clientHeight;
+        // Clear any previously set positioning properties
+        this.el.style.removeProperty("--dropdown-translate-y");
+        this.el.style.removeProperty("--dropdown-max-height");
+        this.el.style.removeProperty("--dropdown-left");
+        // Set horizontal position and width to match button
+        this.el.style.setProperty("--dropdown-left", buttonElRect.left + "px");
+        this.el.style.setProperty("--button-width", buttonElRect.width + "px");
+        if (dropdownHeight <= spaceBelow) {
+            // Case 1: Enough space below - position dropdown below the button
+            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
+        }
+        else if (dropdownHeight <= spaceAbove) {
+            // Case 2: Not enough space below, but enough above - position dropdown above the button
+            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.top - dropdownHeight + "px");
+        }
+        else {
+            // Case 3: Not enough space in either direction - use the larger available space and constrain height
+            if (spaceBelow >= spaceAbove) {
+                // Use space below and constrain dropdown height
+                this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
+                this.el.style.setProperty("--dropdown-max-height", spaceBelow + "px");
+            }
+            else {
+                // Use space above and constrain dropdown height
+                this.el.style.setProperty("--dropdown-translate-y", "0px");
+                this.el.style.setProperty("--dropdown-max-height", spaceAbove + "px");
+            }
+        }
+        this.isHidden = false;
+    }
+    onOpen() {
+        if (!this.isExpanded && !this.isDisabled) {
+            // polyfill for browsers without anchor() support (FF)
+            if (!this.hasAnchor) {
+                this.dropdownPosition();
+            }
+            requestAnimationFrame(() => {
+                const anchorRect = this.buttonEl.getBoundingClientRect();
+                const hasSpaceBelow = this.dropdownEl.offsetHeight <= document.documentElement.clientHeight - anchorRect.bottom;
+                const hasSpaceAbove = this.dropdownEl.offsetHeight <= anchorRect.top;
+                this.openUp = !hasSpaceBelow && hasSpaceAbove;
+                if (!hasSpaceBelow && !hasSpaceAbove) {
+                    // dropdown will open downwards but doesn't have enough space
+                    // it needs to be absolutely positioned + html has to have overflow-y auto
+                    // (the default, but could have been overriden)
+                    // in order to ensure the options can be scrolled to
+                    // (would already be possible if the page has content below. this is in case select was at bottom of page)
+                    this.initialHtmlOverflowY = document.documentElement.style.overflowY;
+                    document.documentElement.style.overflowY = "auto";
+                    this.dropdownEl.style.position = "absolute";
+                }
+                this.isExpanded = true;
+            });
+            setTimeout(() => {
+                // focusing doesn't work when within requestAnimationFrame
+                this.optionListEl.handleInitialFocus(this.elToFocus);
+                this.elToFocus = undefined;
+            }, 50);
+        }
+    }
+    onClose() {
+        if (this.isExpanded) {
+            this.optionListEl.unfocusAll();
+            // see onOpen
+            document.documentElement.style.overflowY = this.initialHtmlOverflowY || "";
+            this.dropdownEl.style.position = "fixed";
+            window.setTimeout(() => {
+                if (!this.hasAnchor) {
+                    this.isHidden = true;
+                }
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
+                }
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    this.optionListEl.clearSearch();
+                }
+                this.isExpanded = false;
+            }, 150);
+            if (this.returnFocus) {
+                requestAnimationFrame(() => {
+                    this.buttonEl.focus();
+                    this.returnFocus = false;
+                });
+            }
+        }
+    }
+    handleKey(ev) {
+        switch (ev.key) {
+            case "Tab":
+                // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
+                if (this.isExpanded && ev.shiftKey) {
+                    this.returnFocus = true;
+                }
+                this.dropdownEl.hidePopover();
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.elToFocus = "next";
+                    this.dropdownEl.showPopover();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.elToFocus = "previous";
+                    this.dropdownEl.showPopover();
+                }
+                break;
+        }
+    }
+    handleResize() {
+        if (!this.hasAnchor && this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedReposition();
+        }
+    }
+    handleScroll() {
+        if (this.isExpanded) {
+            this.isHidden = true;
+            this.debouncedReposition();
+        }
+    }
+    componentWillLoad() {
+        if (!this.hasAnchor) {
+            // Start hidden to prevent flash on first load
+            this.isHidden = true;
+        }
+        if (!this.label) {
+            console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
+        }
+        if (!this.multiple && this.selectedOptions.length === 0) {
+            console.error("wm-select should have one initial option selected");
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((_mutationRecord) => this.handleChildChange()));
+        mutationObserver.observe(this.el, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["selected"],
+        });
+    }
+    handleChildChange() {
+        forceUpdate(this.el);
+        if (this.multiple) {
+            // update state of clone options
+            this.optionListEl.handleChildChange();
+        }
+    }
+    componentDidLoad() {
+        this.wmSelectDidLoad.emit();
+        if (!this.hasAnchor) {
+            this.scrollableParents = findAllScrollableParents(this.el);
+            // Add scroll listeners to all scrollable parents
+            this.scrollableParents.forEach((parent) => {
+                if (parent === document.documentElement) {
+                    // For document element, listen to window scroll event
+                    window.addEventListener("scroll", () => this.handleScroll());
+                }
+                else {
+                    // For regular elements, listen to their scroll event
+                    parent.addEventListener("scroll", () => this.handleScroll());
+                }
+            });
+        }
+    }
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage), 100);
+        }
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    handleComponentBlur(ev) {
+        // Do not close or emit custom blur event when blurring to an element inside (wm-option)
+        if (!this.el.contains(ev.relatedTarget)) {
+            this.wmSelectBlurred.emit();
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
+    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;
+    }
+    handleOverflow() {
+        if (!this.buttonEl) {
+            forceUpdate(this.el);
+        }
+        else {
+            // handle overflow + counter for multiselect
+            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+            const overflowCounterWidth = 38;
+            const computedStyle = window.getComputedStyle(this.buttonEl);
+            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+            const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
+            const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
+            const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
+            this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayText;
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayText;
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
+        }
+    }
+    setButtonText() {
+        if (!this.multiple) {
+            const selEl = this.childOptions.filter((x) => x.selected)[0];
+            return selEl ? selEl.textContent : "";
+        }
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
+        const noDisplayedOptions = this.displayedOptions.length < 1;
+        if (noDisplayedOptions) {
+            this.overflowCount = 0;
+            return this.placeholder;
+        }
+        this.handleOverflow();
+        if (this.allSelected) {
+            // Consolidated label when every option is selected; do not show the +N overflow badge.
+            // On first render, handleOverflow may not have measured yet; we still show this message.
+            this.overflowCount = 0;
+            this.buttonText = this.allSelectedMessage;
+        }
+        else {
+            // otherwise, if handleOverflow was able to calculate, it set the count and the display text
+            // if it wasn't able to calculate, the text of all the selected options will be displayed and may truncate (acceptable as fallback)
+            this.buttonText = this.displayText;
+        }
+        return this.buttonText; // multiselect value
+    }
+    renderOverflowCount() {
+        if (this.overflowCount > 0) {
+            return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+        }
+    }
+    render() {
+        const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
+        return (h(Host, { key: '0c15e3c853e8061fd3482900a5c9e79099e18072', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '86953fd45cb2e305629b0e688e97ed16038406e8', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5758544de948ec407faea3909f45b9065e2ef857', class: "label-wrapper" }, h("label", { key: '4f32e8a8996f2926519151fe0d8256f8af620ba1', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        // we can't use aria-required because the listbox is in a sub-component and it is not announced
+        this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'a72a5517f26e297549dcd0ac057ce7b19e1acfbd', class: "required" }, h("span", { key: '60bd893e2a2ed1031167bfe835cfb310133cd56e', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'bff8c8faee5517d83844c2dd22528dbc59ea3b42', "aria-hidden": "true" }, "*")))), h("div", { key: 'a9f9d86a709a21d312ecf0f008af1f29bfacf23c', class: "button-wrapper" }, h("button", { key: '6bae8ba99a52af84870a5861132e625de8f341f1', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '65ed5b61f0d0f1e7df3efcb7eb05e69a788d985f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '6eb71f7cb727bb9ef93a4780a61fcae3a4c5dc87', class: "button-text" }, this.setButtonText()), showSubinfo && h("span", { key: '7d71e73f4a5609c32c7b0bbd32a7c618f67204c6', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '946a6a2445eca2ecddaf0703672074f0f7aab906', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '359b34e29578c693cd11377208ad4c14f8da3699', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '8570e7a0eda0afc398d312de70fd7ab5edabfa0b',
+            // is-open is for the CSS transition in modern browsers
+            // hidden is to wait for position calculations in Firefox
+            class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
+            // @ts-ignore -- don't tell typescript but we're in the future
+            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '365d65d779b224a382c8910990d8fc5a8b9782fc', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
+                this.dropdownEl.hidePopover();
+            }, onOptionListAllSelected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllSelected.emit();
+            }, onOptionListAllDeselected: () => {
+                this.returnFocus = true;
+                this.wmSelectAllDeselected.emit();
+            } }, h("slot", { key: '14e69ec589802c881b15056f26a316604231b953' }))), this.info && (h("div", { key: '874ecb2e44f633f9270d2ec2a75c8fcbd8c502c6', class: "info" }, this.info)), h("div", { key: 'c0092eabe951be48b32cfc552acff972ba2e1a85', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '4f0d41664246dbbb7dec502058814198d0b8195f', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+    }
+    static get is() { return "wm-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-height",
+                "reflect": false,
+                "defaultValue": "\"200px\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required-field",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "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"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "selectMessages.multiPlaceholder"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-placeholder",
+                "reflect": false,
+                "defaultValue": "selectMessages.searchPlaceholder"
+            },
+            "allSelectedMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "all-selected-message",
+                "reflect": false,
+                "defaultValue": "selectMessages.allSelected"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "info",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "isHidden": {},
+            "openUp": {},
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmSelectDidLoad",
+                "name": "wmSelectDidLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSelectBlurred",
+                "name": "wmSelectBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSelectAllSelected",
+                "name": "wmSelectAllSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmSelectAllDeselected",
+                "name": "wmSelectAllDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmOptionSelected",
+                "method": "handleOptionSelection",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEnterKeyPressed",
+                "method": "handleChildEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEscKeyPressed",
+                "method": "closeDropdownOnEscape",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}