@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,805 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool, showTooltip, hideTooltip, } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
+/**
+ * Dropdown list of grouped options that allows single or multi-select. Like wm-select but
+ * options are organized into labeled categories via a two-level hierarchy. Composed of a
+ * parent wm-nested-select, one or more wm-optgroup children, and wm-option elements inside
+ * each group.
+ *
+ * @category Basic Controls
+ *
+ * @keyboardInteraction
+ * - **Closed button**: Space / Enter / Arrow Down opens the dropdown and focuses the first
+ *   group; Arrow Up opens and focuses the last group.
+ * - **Group level**: Arrow Up / Down navigate group buttons; Arrow Right / Enter enters the
+ *   group; Escape closes the dropdown.
+ * - **Option level (inside a group)**: Arrow Up / Down navigate options; Arrow Left returns
+ *   to the group list; Home / End jump to first / last option; typing a letter jumps to the
+ *   first matching option.
+ * - **Tab** (anywhere in dropdown): Closes the dropdown.
+ *
+ * @accessibility
+ * - `label` is required even when `label-position` is `"none"` — it is used as the dropdown's
+ *   ARIA accessible name.
+ * - Group buttons render with `role="menuitem"` inside a `role="menu"`. The option level
+ *   renders as a `role="listbox"` with `role="option"` items.
+ * - Validation errors are announced via an `aria-live` region when `error-message` changes.
+ *
+ * @usageNotes
+ * - Selection state is maintained via the `selected` prop on each wm-option child.
+ * - To respond to selection changes, listen for `wmOptionSelected` (declared on wm-option but
+ *   bubbles to wm-nested-select). `event.detail` is the `HTMLWmOptionElement`; read `.value`
+ *   or `.textContent` to get the selected value.
+ * - `select-all` adds a "Select All / Deselect All" toggle at the top of each group; it
+ *   requires `multiple` to be set.
+ * - `search` filters options within the currently open group only.
+ *
+ * @example {html} Single-select nested select
+ * <wm-nested-select label="Department">
+ *   <wm-optgroup label="Sciences">
+ *     <wm-option selected>Select a department</wm-option>
+ *     <wm-option>Biology</wm-option>
+ *   </wm-optgroup>
+ *   <wm-optgroup label="Humanities">
+ *     <wm-option>English</wm-option>
+ *   </wm-optgroup>
+ * </wm-nested-select>
+ *
+ * @example {react} Single-select nested select
+ * const [department, setDepartment] = useState('');
+ *
+ * // event.detail is the selected HTMLWmOptionElement
+ * const handleSelect = (event) => {
+ *   setDepartment(event.detail.value ?? event.detail.textContent);
+ * };
+ *
+ * <WmNestedSelect label="Department" onWmOptionSelected={handleSelect}>
+ *   <WmOptgroup label="Sciences">
+ *     <WmOption selected>Select a department</WmOption>
+ *     <WmOption value="bio">Biology</WmOption>
+ *   </WmOptgroup>
+ *   <WmOptgroup label="Humanities">
+ *     <WmOption value="eng">English</WmOption>
+ *   </WmOptgroup>
+ * </WmNestedSelect>
+ *
+ * @example {html} Multi-select with Select All
+ * <wm-nested-select label="Programs" multiple select-all>
+ *   <wm-optgroup label="Sciences">
+ *     <wm-option value="bio">Biology</wm-option>
+ *     <wm-option value="chem">Chemistry</wm-option>
+ *   </wm-optgroup>
+ * </wm-nested-select>
+ *
+ * @example {react} Multi-select with Select All
+ * const [selected, setSelected] = useState([]);
+ *
+ * // event.detail is the HTMLWmOptionElement that was selected or deselected
+ * const handleSelect = (event) => {
+ *   const value = event.detail.value ?? event.detail.textContent;
+ *   setSelected((prev) => [...prev, value]);
+ * };
+ *
+ * const handleDeselect = (event) => {
+ *   const value = event.detail.value ?? event.detail.textContent;
+ *   setSelected((prev) => prev.filter((v) => v !== value));
+ * };
+ *
+ * <WmNestedSelect
+ *   label="Programs"
+ *   multiple={true}
+ *   selectAll={true}
+ *   onWmOptionSelected={handleSelect}
+ *   onWmOptionDeselected={handleDeselect}
+ * >
+ *   <WmOptgroup label="Sciences">
+ *     <WmOption value="bio">Biology</WmOption>
+ *     <WmOption value="chem">Chemistry</WmOption>
+ *   </WmOptgroup>
+ * </WmNestedSelect>
+ *
+ */
+export class NestedSelect {
+    constructor() {
+        this.openUp = false;
+        this.overflowCount = 0;
+        this.displayedOptions = [];
+        this.clearSelectionMessage = this.multiple
+            ? selectMessages.multiClearSelection
+            : selectMessages.singleClearSelection;
+        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 = this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
+        this.isExpanded = false;
+        this.isGroupExpanded = false;
+        this.showClearSelectionButton = false;
+        this.announcement = "";
+        this.constrainedMaxHeight = this.maxHeight;
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get childOptions() {
+        return Array.from(this.el.querySelectorAll("wm-option"));
+    }
+    get optgroupEls() {
+        return Array.from(this.el.querySelectorAll("wm-optgroup"));
+    }
+    get menuitemEls() {
+        return Array.from(this.el.shadowRoot.querySelectorAll(".menuitem"));
+    }
+    get allSelected() {
+        return this.childOptions.every((option) => option.selected);
+    }
+    componentWillLoad() {
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((_mutationRecord) => this.handleChildChange()));
+        mutationObserver.observe(this.el, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["selected"],
+        });
+    }
+    handleChildChange() {
+        // on update of children or children selected state, reset button text and rerender
+        this.setButtonText();
+        forceUpdate(this.el);
+        if (this.multiple) {
+            // update state of clone options
+            this.optgroupEls.forEach((optgroupEl) => optgroupEl.handleChildChange());
+        }
+    }
+    setButtonText() {
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
+        // handle overflow + counter for multiselect
+        if (this.multiple) {
+            // 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.displayedOptions.map((x) => x.textContent).join(", ");
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
+        }
+    }
+    countOptgroupSelected(optgroupEl) {
+        let selectedOptions = Array.from(optgroupEl.querySelectorAll("wm-option")).filter((option) => option.selected);
+        return selectedOptions.length;
+    }
+    handleOptionSelection() {
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    handleChildEnter() {
+        // only occurs for multiselects. handle the click, then close
+        this.close();
+    }
+    closePopupOnEscape() {
+        this.close();
+    }
+    handleKeyDown(ev) {
+        switch (ev.key) {
+            case "Tab":
+                // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
+                this.close(ev.shiftKey ? true : false);
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open(true);
+                }
+                break;
+        }
+    }
+    close(returnFocus = true) {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.dropdownEl.classList.remove("open");
+            window.setTimeout(() => {
+                this.optgroupEls.forEach((optgroupEl) => (optgroupEl.isExpanded = false));
+                if (returnFocus) {
+                    this.buttonEl.focus();
+                }
+            }, 150);
+        }
+    }
+    open(focusLast = false) {
+        if (!this.isDisabled) {
+            this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+            this.dropdownEl.scrollTop = 0;
+            this.isExpanded = true;
+            this.dropdownEl.classList.add("open");
+            const elHeight = this.el.clientHeight;
+            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, elHeight, 0);
+            this.constrainedMaxHeight = this.maxHeight;
+            const spaceAbove = getContextMeasurements(this.el).spaceAbove;
+            if (this.openUp) {
+                if (parseInt(getComputedStyle(this.menuEl).getPropertyValue("--max-height").replace("px", "")) > spaceAbove) {
+                    this.constrainedMaxHeight = spaceAbove.toString() + "px";
+                }
+            }
+            // if opening upwards, set an upwards height limit for the optgroup level
+            this.optgroupEls.forEach((o) => {
+                o.shadowRoot.querySelector("priv-option-list").upwardsHeightLimit = this.openUp
+                    ? spaceAbove
+                    : null;
+            });
+            // 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(() => {
+                if (this.menuitemEls.length > 0) {
+                    const menuitemToFocus = this.menuitemEls[focusLast ? this.menuitemEls.length - 1 : 0];
+                    menuitemToFocus.scrollIntoView({ block: "nearest" });
+                    menuitemToFocus.focus();
+                }
+            }, 60);
+        }
+    }
+    moveDown(menuitemEl) {
+        const currentIndex = this.menuitemEls.indexOf(menuitemEl);
+        const menuitemToFocus = this.menuitemEls[currentIndex == this.menuitemEls.length - 1 ? 0 : currentIndex + 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
+    }
+    moveUp(menuitemEl) {
+        const currentIndex = this.menuitemEls.indexOf(menuitemEl);
+        const menuitemToFocus = this.menuitemEls[currentIndex == 0 ? this.menuitemEls.length - 1 : currentIndex - 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
+    }
+    handleButtonBlur(ev) {
+        if (isElOrChild(this.el, ev.relatedTarget)) {
+            // do not emit a blur event when opening the dropdown and focusing the Options
+            ev.stopPropagation();
+        }
+    }
+    handleClick(ev) {
+        if (!isElOrChild(this.el, ev.target)) {
+            this.close();
+        }
+    }
+    handleMenuitemKeydown(ev) {
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                // focus next
+                this.moveDown(ev.target);
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                this.moveUp(ev.target);
+                // focus previous
+                break;
+            case "ArrowRight":
+                if (ev.target.classList.contains("group-btn")) {
+                    ev.preventDefault();
+                    ev.target.click();
+                }
+                break;
+            case "Escape":
+                ev.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    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.close(false);
+            this.wmNestedSelectBlurred.emit();
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
+    handleOptgroupExpanded() {
+        this.isGroupExpanded = true;
+    }
+    handleOptgroupHidden(ev) {
+        this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+        this.isGroupExpanded = false;
+        // focus back to nested select's optgroup menuitem
+        if (this.isExpanded) {
+            const elToFocus = this.el.shadowRoot.querySelector(`button[data-label=${ev.detail}]`);
+            elToFocus.focus();
+        }
+    }
+    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;
+    }
+    renderButtonText() {
+        if (this.displayedOptions.length < 1) {
+            return h("span", null, this.placeholder);
+        }
+        else if (this.multiple && this.allSelected && this.overflowCount > 0) {
+            return this.allSelectedMessage;
+        }
+        else {
+            return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+        }
+    }
+    renderOverflowCount() {
+        if (this.overflowCount > 0 && !this.allSelected) {
+            return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
+        }
+    }
+    handleClearSelection() {
+        this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
+        this.announce(selectMessages.selectionCleared);
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    renderClearSelectionButton() {
+        if (this.showClearSelectionButton && !this.isGroupExpanded) {
+            return (h("button", { class: "menuitem clear-selection", onClick: () => this.handleClearSelection(), tabindex: -1, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "svg-icon svg-close" }), this.clearSelectionMessage));
+        }
+    }
+    renderSelectionCount(optgroupEl) {
+        const selectionCount = this.countOptgroupSelected(optgroupEl);
+        if (selectionCount) {
+            return (h("div", { class: "selection-count" }, h("span", null, this.multiple
+                ? selectMessages.getOptgroupMultipleSelectionCount(selectionCount)
+                : selectMessages.optgroupSingleSelectionCount())));
+        }
+    }
+    render() {
+        const showRequired = this.labelPosition !== "none" && this.requiredField;
+        const buttonProps = {
+            id: "selectbtn",
+            ["disabled"]: this.isDisabled,
+            ["aria-controls"]: "menu",
+            ["aria-labelledby"]: showRequired ? "label required selectbtn" : "label selectbtn",
+            ["aria-describedby"]: "error",
+            ["aria-expanded"]: this.isExpanded ? "true" : "false",
+            onClick: () => {
+                this.isExpanded ? this.close() : this.open();
+            },
+        };
+        return (h(Host, { key: 'a68883c4b91d5657bf4205e5e4eea583f7b27da7', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '208fe8e9504e1f5ac3c02b889b55690c16fd5579', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ae05c832f67ae6fb126cc0a1d0e8c8b4e3e50fda', class: "label-wrapper" }, h("label", { key: '7251caee0c1dd0575b64746e3ca9bc8702796be2', 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;
+        // instead the sr-only text is included in the button's aria-labelledby above
+        showRequired && (h("span", { key: 'e2a5d5a08880f83d0280df8527b46c60fc8f9db6', class: "required" }, h("span", { key: 'eccbd981c72ac77b46b0810f9652b5156eb6340c', class: "sr-only", id: "required" }, globalMessages.requiredField), h("span", { key: '5ed448d3ef22f085bcff6cd70d2e9091ef2ffdb5', "aria-hidden": "true" }, "*")))), h("div", { key: '68c8510b8f441c3b2d3fb607332230d2ae8d6b81', class: "button-wrapper" }, h("button", Object.assign({ key: '996ee1b67e4e6b08ffffc97b47e0fafae2442298' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3efb4b2135bdf475cc1c802264e2d1ce58c54700', class: "overflowcontrol" }, h("span", { key: 'ae40108a455f58eccc927c5e6dd7c81fca2ca588', class: "button-text" }, this.renderButtonText())), h("div", { key: 'e9db75cdde3506248394b20b49e70355e44318fa', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '2467344271355d03712b5a1d182cc78590e9e9b3', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '4d90abd5757a5c76de2d7d0e3cecf16977806ba7', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), h("div", { key: '549d7d18a18d175e23e50d4978f0f53a1eb16d27', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
+            return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
+                    if (!optgroupEl.disabled) {
+                        optgroupEl.isExpanded = !optgroupEl.isExpanded;
+                        forceUpdate(this.el);
+                    }
+                }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("div", { class: "option-text" }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")), h("div", { class: "svg-icon svg-next" })));
+        })), h("div", { key: '016cecd76a346cada56d6c78e67f69e9a9e3c3f4', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, h("slot", { key: 'dacc4ad67dee6da1495c927bf6640017b53be05f' }))), h("div", { key: '4fe7d19ef2b4ff86b6a8efbb7314af8ed3d7ddca', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '8eef1af6ecb84d46a52ead6573ccf119e00314b5', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+    }
+    static get is() { return "wm-nested-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-nested-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-nested-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the entire nested select component, preventing any interaction."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Overrides the maximum height of the options dropdown. Accepts any valid CSS\nlength value (e.g. `\"300px\"`)."
+                        }, {
+                            "name": "default",
+                            "text": "\"200px\""
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Accessible label describing the dropdown's purpose. Required even when\n`label-position` is `\"none\"` \u2014 it is used as the ARIA accessible name for the button."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Controls where the label is rendered relative to the dropdown button.\n`\"none\"` hides the label visually but keeps it accessible."
+                        }, {
+                            "name": "default",
+                            "text": "\"top\""
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Renders a required-field asterisk (*) next to the label."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Displays the component in an error state with the provided message shown\nbeneath the button."
+                        }],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Enables multiselect mode, allowing more than one option to be selected at\na time."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "search": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Adds a search input that filters visible options within the currently open\ngroup."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Adds a \"Select All / Deselect All\" toggle at the top of each group. Requires\n`multiple` to be set."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Text displayed in the trigger button when no options are selected."
+                        }, {
+                            "name": "default",
+                            "text": "Locale-specific placeholder string"
+                        }],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Placeholder text displayed inside the search input when `search` is enabled."
+                        }, {
+                            "name": "default",
+                            "text": "Locale-specific search placeholder string"
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Text displayed in the trigger button when all options across all groups are\nselected (multiselect mode)."
+                        }, {
+                            "name": "default",
+                            "text": "Locale-specific \"all selected\" string"
+                        }],
+                    "text": ""
+                },
+                "attribute": "all-selected-message",
+                "reflect": false,
+                "defaultValue": "selectMessages.allSelected"
+            },
+            "constrainedMaxHeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Constrains the dropdown height when it opens upward and available space above\nis less than maxHeight. Set programmatically \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "attribute": "constrained-max-height",
+                "reflect": false,
+                "defaultValue": "this.maxHeight"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "isGroupExpanded": {},
+            "showClearSelectionButton": {},
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmNestedSelectBlurred",
+                "name": "wmNestedSelectBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when focus leaves the component entirely (not when moving between\ninternal elements such as options or group buttons)."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    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": "closePopupOnEscape",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "optgroupExpanded",
+                "method": "handleOptgroupExpanded",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "optgroupHidden",
+                "method": "handleOptgroupHidden",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}