@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -0,0 +1,932 @@
+import { h, Host } from "@stencil/core";
+import { debounce, getTextDir, hideTooltip, showTooltip, findAllScrollableParents } from "../../global/functions";
+/**
+ * Dropdown interface that displays a list of action items. When closed it shows a text
+ * button, icon button, or selector box depending on action-menu-type. Selecting an item
+ * executes an action and closes the menu. Composed of a parent wm-action-menu element and
+ * one or more wm-menuitem children.
+ *
+ * @category Basic Controls
+ *
+ * @slot - One or more wm-menuitem elements.
+ *
+ * @keyboardInteraction
+ * - **Trigger button (closed)**: Down Arrow / Space / Enter opens the menu and focuses the first item; Up Arrow opens and focuses the last item.
+ * - **Open menu**: Up/Down Arrow navigates items (wraps around); Home/End jumps to first/last; Enter activates the focused item and closes the menu; Escape closes the menu and returns focus to the trigger; Tab closes the menu; typing a character focuses the next item starting with that letter.
+ *
+ * @accessibility
+ * - For `icon` menus, `tooltip` is required and serves as the accessible name announced by screen readers.
+ * - When multiple action menus share identical tooltips or button text, use `label-for-identical-buttons` to give each a unique `aria-label`.
+ * - Focus returns automatically to the trigger button after an item is activated, unless the action removes the trigger from the DOM — in that case, manage focus explicitly in your action handler.
+ *
+ * @usageNotes
+ * - The default type is `icon` (three-dot "more options" button). Use `text` for a labelled trigger, `selector` or `selector-primary` for a select-box appearance.
+ * - `button-text` is required when `action-menu-type` is `text`, `selector`, or `selector-primary`.
+ * - `tooltip` is required when `action-menu-type` is `icon`.
+ * - `icon` is optional for `text`, `selector`, and `selector-primary` types, rendered alongside `button-text`. For `icon` type, `icon` overrides the default "more options" icon.
+ *
+ * @example {html} Icon action menu (default)
+ * <wm-action-menu tooltip="More options">
+ *   <wm-menuitem onclick="editRecord()">Edit</wm-menuitem>
+ *   <wm-menuitem onclick="deleteRecord()">Delete</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Icon action menu
+ * <WmActionMenu tooltip="More options">
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Icon action menu with a custom icon
+ * <wm-action-menu icon="#filter" tooltip="Filter options">
+ *   <wm-menuitem>All</wm-menuitem>
+ *   <wm-menuitem>Unread</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Icon action menu with a custom icon
+ * <WmActionMenu icon="#filter" tooltip="Filter options">
+ *   <WmMenuitem>All</WmMenuitem>
+ *   <WmMenuitem>Unread</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Icon action menu with a rotated icon — reuse directional icons with icon-rotate.
+ * <wm-action-menu icon="#back" icon-rotate="180" tooltip="Forward options">
+ *   <wm-menuitem>Skip</wm-menuitem>
+ *   <wm-menuitem>Skip all</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Icon action menu with a rotated icon
+ * <WmActionMenu icon="#back" iconRotate={180} tooltip="Forward options">
+ *   <WmMenuitem>Skip</WmMenuitem>
+ *   <WmMenuitem>Skip all</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Text action menu
+ * <wm-action-menu action-menu-type="text" button-text="Actions">
+ *   <wm-menuitem onclick="editRecord()">Edit</wm-menuitem>
+ *   <wm-menuitem onclick="deleteRecord()">Delete</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Text action menu
+ * <WmActionMenu actionMenuType="text" buttonText="Actions">
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Text action menu with an icon
+ * <wm-action-menu action-menu-type="text" button-text="Actions" icon="#edit">
+ *   <wm-menuitem>Edit</wm-menuitem>
+ *   <wm-menuitem>Delete</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Text action menu with an icon
+ * <WmActionMenu actionMenuType="text" buttonText="Actions" icon="#edit">
+ *   <WmMenuitem>Edit</WmMenuitem>
+ *   <WmMenuitem>Delete</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Selector action menu
+ * <wm-action-menu action-menu-type="selector" button-text="Sort by">
+ *   <wm-menuitem onclick="sortBy('name')">Name</wm-menuitem>
+ *   <wm-menuitem onclick="sortBy('date')">Date</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Selector action menu
+ * <WmActionMenu actionMenuType="selector" buttonText="Sort by">
+ *   <WmMenuitem onClick={() => sortBy("name")}>Name</WmMenuitem>
+ *   <WmMenuitem onClick={() => sortBy("date")}>Date</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Menu items with icons
+ * <wm-action-menu tooltip="File actions">
+ *   <wm-menuitem icon="#edit" onclick="editFile()">Edit</wm-menuitem>
+ *   <wm-menuitem icon="#delete" onclick="deleteFile()">Delete</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Menu items with icons
+ * <WmActionMenu tooltip="File actions">
+ *   <WmMenuitem icon="#edit" onClick={editFile}>Edit</WmMenuitem>
+ *   <WmMenuitem icon="#delete" onClick={deleteFile}>Delete</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Identical menus — disambiguate for screen readers with label-for-identical-buttons
+ * <wm-action-menu tooltip="Actions" label-for-identical-buttons="Actions for Introduction to Biology">
+ *   <wm-menuitem onclick="editCourse('bio-101')">Edit</wm-menuitem>
+ * </wm-action-menu>
+ * <wm-action-menu tooltip="Actions" label-for-identical-buttons="Actions for Advanced Chemistry">
+ *   <wm-menuitem onclick="editCourse('chem-301')">Edit</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Identical menus
+ * <WmActionMenu tooltip="Actions" labelForIdenticalButtons="Actions for Introduction to Biology">
+ *   <WmMenuitem onClick={() => editCourse("bio-101")}>Edit</WmMenuitem>
+ * </WmActionMenu>
+ * <WmActionMenu tooltip="Actions" labelForIdenticalButtons="Actions for Advanced Chemistry">
+ *   <WmMenuitem onClick={() => editCourse("chem-301")}>Edit</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @requiredSetup
+ * - Wire each item's action: attach an `onclick` handler to each wm-menuitem.
+ * - Slot one wm-menuitem per action as a child.
+ *
+ */
+export class ActionMenu {
+    constructor() {
+        this.openUp = false;
+        this.scrollableParents = [];
+        this.hasAnchor = CSS.supports("top", "anchor(bottom)");
+        this.keysSoFar = "";
+        this.searchIndex = 0;
+        this.debouncedClearKeysSoFar = debounce(() => {
+            this.keysSoFar = "";
+        }, 500);
+        this.isExpanded = false;
+        this.isTabbing = false;
+        this.isHidden = false;
+        this.tooltipPosition = undefined;
+        this.actionMenuType = "icon";
+        this.buttonText = undefined;
+        this.icon = undefined;
+        this.iconSize = undefined;
+        this.iconRotate = undefined;
+        this.iconFlip = undefined;
+        this.disabled = false;
+        this.tooltip = undefined;
+        this.labelForIdenticalButtons = undefined;
+        this.darkMode = undefined;
+        this.maxWidth = "25.875rem";
+    }
+    get horizontalPosition() {
+        var _a, _b, _c;
+        const rect = (_a = this.menubtnEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const spaceLeft = rect === null || rect === void 0 ? void 0 : rect.left;
+        const spaceRight = document.documentElement.clientWidth - (rect === null || rect === void 0 ? void 0 : rect.right);
+        const pos = ((_b = this.dropdownEl) === null || _b === void 0 ? void 0 : _b.clientWidth) > spaceLeft && ((_c = this.dropdownEl) === null || _c === void 0 ? void 0 : _c.clientWidth) <= spaceRight ? "right" : "left";
+        return pos || "left";
+    }
+    get childItems() {
+        return Array.from(this.el.querySelectorAll("wm-menuitem"));
+    }
+    get internalButtonType() {
+        return this.actionMenuType === "icon" || this.actionMenuType === "text"
+            ? this.actionMenuType + "only"
+            : this.actionMenuType;
+    }
+    get resolvedIcon() {
+        return this.icon || (this.actionMenuType === "icon" ? "#more-options" : undefined);
+    }
+    handleTabbingOn() {
+        this.isTabbing = true;
+    }
+    handleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleWindowScroll() {
+        hideTooltip();
+    }
+    handleClickedItem() {
+        this.close();
+    }
+    handleKeyUp(ev) {
+        this.moveUp(ev.target);
+    }
+    handleKeyDown(ev) {
+        this.moveDown(ev.detail);
+    }
+    handleHomeKey() {
+        this.focusFirstItem();
+    }
+    handleEndKey() {
+        this.focusLastItem();
+    }
+    handleTabKey() {
+        if (this.isExpanded) {
+            this.close();
+        }
+    }
+    handleEscKey() {
+        this.close();
+        this.menubtnEl.focus();
+    }
+    handleKey(ev) {
+        switch (ev.key) {
+            case "ArrowDown":
+                if (!this.isExpanded) {
+                    ev.preventDefault();
+                    this.elToFocus = "next";
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (!this.isExpanded) {
+                    ev.preventDefault();
+                    this.elToFocus = "previous";
+                    this.open();
+                }
+                break;
+        }
+    }
+    handleMenuitemBlur(ev) {
+        const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
+        // if the Menuitem is blurred to something other than the component, emit a blur event with the appropriate relatedTarget
+        // keeps our component's blur events accurate, and closes when focusing browser address bar
+        if (!toElOrChild) {
+            const event = new CustomEvent("blur");
+            // @ts-ignore
+            event.relatedTarget = ev.detail.relatedTarget;
+            this.el.dispatchEvent(event);
+        }
+    }
+    handleButtonBlur(ev) {
+        const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
+        if (toElOrChild) {
+            // do not emit a blur event when opening the dropdown and focusing the Menuitems
+            ev.stopPropagation();
+        }
+    }
+    handleScroll() {
+        if (!this.hasAnchor && this.isExpanded) {
+            this.close();
+        }
+    }
+    componentWillLoad() {
+        if (!this.hasAnchor) {
+            this.isHidden = true;
+        }
+    }
+    componentDidLoad() {
+        if (this.actionMenuType !== "icon" && !this.buttonText) {
+            console.error("wm-action-menu should have a valid button-text property when action-menu-type is set to 'text' or 'selector'");
+        }
+        if (this.actionMenuType === "icon" && !this.tooltip) {
+            console.error("wm-action-menu should have a valid tooltip when action-menu-type is set to 'icon'");
+        }
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.isTabbing = true;
+        }
+        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());
+                }
+            });
+        }
+        this.wmActionMenuLoaded.emit();
+        this.menuLoaded.emit(); // deprecated
+    }
+    disconnectedCallback() {
+        if (!this.hasAnchor) {
+            this.scrollableParents.forEach((parent) => {
+                if (parent === document.documentElement) {
+                    window.removeEventListener("scroll", () => this.handleScroll());
+                }
+                else {
+                    parent.removeEventListener("scroll", () => this.handleScroll());
+                }
+            });
+        }
+    }
+    moveUp(el) {
+        const index = this.childItems.indexOf(el);
+        if (index === 0) {
+            this.focusLastItem();
+        }
+        else {
+            this.childItems[index - 1].focus();
+        }
+    }
+    moveDown(el) {
+        const index = this.childItems.indexOf(el);
+        if (index === this.childItems.length - 1) {
+            this.focusFirstItem();
+        }
+        else {
+            this.childItems[index + 1].focus();
+        }
+    }
+    open() {
+        if (!this.disabled) {
+            this.dropdownEl.showPopover();
+        }
+    }
+    close(returnFocus = true) {
+        this.dropdownEl.hidePopover();
+        // see onOpen
+        document.documentElement.style.overflowY = this.initialHtmlOverflowY || "";
+        this.dropdownEl.style.position = "fixed";
+        window.setTimeout(() => {
+            // if dev omits to assign focus after an action is triggered,
+            // the component brings the focus back on the button
+            // Focus will only be lost (and go to the body) once the menuitem
+            // is not visible anymore, so we need to wait for the transition to
+            // finish and the hidden class to be applied.
+            // also checking if focus stayed on the menuitem
+            if (returnFocus &&
+                (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM")) {
+                this.menubtnEl.focus();
+            }
+        }, 250);
+    }
+    positionDropdown() {
+        // only for browsers not supporting anchor
+        const rect = this.menubtnEl.getBoundingClientRect();
+        const spaceAbove = rect.top;
+        const spaceBelow = document.documentElement.clientHeight - rect.bottom;
+        const spaceLeft = rect === null || rect === void 0 ? void 0 : rect.left;
+        const spaceRight = document.documentElement.clientWidth - (rect === null || rect === void 0 ? void 0 : rect.right);
+        const dropdownHeight = this.dropdownEl.clientHeight;
+        const dropdownWidth = this.dropdownEl.clientWidth;
+        // Clear any previously set positioning properties
+        this.el.style.removeProperty("--dropdown-fallback-translate-y");
+        this.el.style.removeProperty("--dropdown-fallback-max-height");
+        this.el.style.removeProperty("--dropdown-fallback-max-width");
+        this.el.style.removeProperty("--dropdown-fallback-left");
+        // HORIZONTAL POSITION
+        // action menu usually is on the right side of the screen,
+        // so dropdown opens to the left by default (is anchored on the right corner)
+        const left = this.horizontalPosition === "right"
+            ? // not enough room left and enough room right: opens to the right
+                rect.left
+            : // default:
+                rect.right - this.dropdownEl.clientWidth;
+        this.el.style.setProperty("--dropdown-fallback-left", left + "px");
+        // exception: if there's not enough space to display the dropdown, show where there's the most space and constrain it.
+        if (dropdownWidth > spaceLeft && dropdownWidth > spaceRight) {
+            if (spaceLeft >= spaceRight) {
+                this.el.style.setProperty("--dropdown-fallback-left", 0 + "px");
+                this.el.style.setProperty("--dropdown-fallback-max-width", spaceLeft + dropdownWidth + "px");
+            }
+            else {
+                this.el.style.setProperty("--dropdown-fallback-left", spaceLeft + "px");
+                this.el.style.setProperty("--dropdown-fallback-max-width", spaceRight + "px");
+            }
+        }
+        // VERTICAL POSITION
+        if (dropdownHeight <= spaceBelow) {
+            // Case 1: Enough space below - position dropdown below the button
+            this.el.style.setProperty("--dropdown-fallback-translate-y", rect.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-fallback-translate-y", rect.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-fallback-translate-y", rect.bottom + "px");
+                this.el.style.setProperty("--dropdown-fallback-max-height", spaceBelow + "px");
+            }
+            else {
+                // Use space above and constrain dropdown height
+                this.el.style.setProperty("--dropdown-fallback-translate-y", "0px");
+                this.el.style.setProperty("--dropdown-fallback-max-height", spaceAbove + "px");
+            }
+        }
+        this.isHidden = false;
+    }
+    handleToggle(ev) {
+        if (ev.newState === "open") {
+            if (!this.hasAnchor) {
+                this.positionDropdown();
+            }
+            requestAnimationFrame(() => {
+                if (this.hasAnchor) {
+                    const anchorRect = this.menubtnEl.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.elToFocus === "previous" ? this.focusLastItem() : this.focusFirstItem();
+                this.elToFocus = undefined;
+            }, 50);
+        }
+        else {
+            this.isExpanded = false;
+            if (!this.hasAnchor) {
+                this.isHidden = true;
+            }
+        }
+    }
+    focusFirstItem() {
+        this.childItems[0].focus();
+    }
+    focusLastItem() {
+        this.childItems[this.childItems.length - 1].focus();
+    }
+    findAndFocusItem(ev) {
+        if (!this.keysSoFar && ev.detail == " ") {
+            // if the first key entered is space, treat as a click. Otherwise include in
+            ev.target.click();
+        }
+        else {
+            const character = ev.detail.toLowerCase();
+            this.focusFirstItem();
+            if (!this.keysSoFar) {
+                this.childItems.forEach((item, idx) => {
+                    if (item === document.activeElement) {
+                        this.searchIndex = idx;
+                    }
+                });
+            }
+            this.keysSoFar += character;
+            let nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
+            if (!nextMatch) {
+                nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
+            }
+            if (nextMatch) {
+                nextMatch.focus();
+            }
+            this.debouncedClearKeysSoFar();
+        }
+    }
+    findMatchInRange(list, startIndex, endIndex) {
+        // Find the first item starting with the keysSoFar substring, searching in
+        // the specified range of items
+        for (var n = startIndex; n < endIndex; n++) {
+            var label = list[n].textContent;
+            if (label && label.toLowerCase().indexOf(this.keysSoFar) === 0) {
+                return list[n];
+            }
+        }
+        return null;
+    }
+    renderIcon() {
+        const icon = this.resolvedIcon;
+        let defaultIconSize = "";
+        switch (this.actionMenuType) {
+            case "icon":
+                defaultIconSize = "24px";
+                break;
+            case "selector":
+            case "selector-primary":
+            case "text":
+                defaultIconSize = "18px";
+                break;
+        }
+        const iconSize = this.iconSize || defaultIconSize;
+        let transform = "";
+        transform += this.iconRotate ? `rotate(${this.iconRotate}deg)` : "";
+        transform += this.iconFlip === "horizontal" ? "scaleX(-1)" : "";
+        transform += this.iconFlip === "vertical" ? "scaleY(-1)" : "";
+        const iconStyle = Object.assign(Object.assign({}, (iconSize && { "--icon-size": iconSize })), (transform && { transform }));
+        if (icon.match(/^\/\S*[#]\S*/)) {
+            // starts with /, any number of non-whitespace characters, followed by #, followed by any non-whitespace characters
+            // Relative Path & Symbol
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", style: Object.assign(Object.assign({}, iconStyle), { "--icon-fill": "currentColor" }), fill: "currentColor" }, h("use", { href: icon })));
+        }
+        else {
+            // Icon ID (strip the leading '#')
+            return h("span", { class: `icn svg-icon svg-${icon.replace(/^#/, "")}`, style: iconStyle });
+        }
+    }
+    render() {
+        return (h(Host, { key: 'eb20a161bd962f795c01aee20cbb6cfb38aa1298', onBlur: () => this.close(false) }, h("div", { key: '64e1cae1f801c02a3a1511daf48ed8742dd07549', class: getTextDir() }, h("button", { key: 'c13f164b91f79b04bad6ed6d600411f9403beba3', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
+                ? this.labelForIdenticalButtons || this.tooltip
+                : this.labelForIdenticalButtons || undefined, "aria-expanded": this.isExpanded ? "true" : "false", "aria-haspopup": "menu", popoverTarget: "menu", popoverTargetAction: "toggle", onMouseEnter: () => this.actionMenuType === "icon" &&
+                showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing &&
+                this.actionMenuType === "icon" &&
+                showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
+                hideTooltip();
+                this.handleButtonBlur(ev);
+            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: 'd8a78e82fe0b79a8451a291072dcbf0decfc116e', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: '61b47819884f55840189e002278303b64e17ec51', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '546fdc27f7e0243d7ceb958aed363dc390f66a2f', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", style: { "--dropdown-max-width": this.maxWidth }, ref: (el) => (this.dropdownEl = el),
+            // @ts-ignore -- don't tell typescript but we're in the future
+            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: 'c6c8ca6e6f3d81083dc3514f9362e4f0288da22e' })))));
+    }
+    static get is() { return "wm-action-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-action-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-action-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"top-right\"\n    | \"top-left\"",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Position of the tooltip relative to the trigger button. Repositions automatically when there is insufficient space at the specified position."
+                        }, {
+                            "name": "default",
+                            "text": "\"left\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "tooltip-position",
+                "reflect": false
+            },
+            "actionMenuType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"icon\" | \"text\" | \"selector\" | \"selector-primary\"",
+                    "resolved": "\"icon\" | \"selector\" | \"selector-primary\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Visual style of the trigger button. `'icon'` shows an icon-only button (requires `tooltip`). `'text'` shows a labelled button (requires `button-text`). `'selector'` shows a selector box that visually mimics a select control (requires `button-text`). `'selector-primary'` is a primary-styled variant of selector."
+                        }, {
+                            "name": "default",
+                            "text": "\"icon\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "action-menu-type",
+                "reflect": false,
+                "defaultValue": "\"icon\""
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label displayed on the trigger button."
+                        }, {
+                            "name": "conditionallyRequired",
+                            "text": "when action-menu-type is 'text', 'selector', or 'selector-primary'"
+                        }],
+                    "text": ""
+                },
+                "attribute": "button-text",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Icon to display alongside `button-text` for `text`, `selector`, and `selector-primary`\ntypes, or in place of the default \"more options\" icon for the `icon` type. Formats: `'#icon-name'`\nfor a Ripple icon (e.g. `'#edit'`), or `'/path/to/file.svg#symbol-id'` for a local SVG sprite symbol."
+                        }, {
+                            "name": "default",
+                            "text": "\"#more-options\" when action-menu-type is 'icon'; unset otherwise"
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Change size of the icon to fine tune the visual rendering if it appears too large or small. Not\nintended for general sizing. Accepts any valid CSS size value, e.g. '22px' or '1.3rem'."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-size",
+                "reflect": false
+            },
+            "iconRotate": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Rotates the icon by the given number of degrees. For use with the icon property."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-rotate",
+                "reflect": false
+            },
+            "iconFlip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Flips the icon along the specified axis. For use with the icon property."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-flip",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the entire menu, preventing the trigger from being activated."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Tooltip text shown on hover. For `icon` menus, also serves as the accessible name announced by screen readers."
+                        }, {
+                            "name": "conditionallyRequired",
+                            "text": "when action-menu-type is 'icon'"
+                        }],
+                    "text": ""
+                },
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "labelForIdenticalButtons": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Use only when multiple action menus on the same page share identical tooltips or button text. Set this to a more descriptive label for screen readers; the visible label stays unchanged. Sets aria-label to this value."
+                        }],
+                    "text": ""
+                },
+                "attribute": "label-for-identical-buttons",
+                "reflect": false
+            },
+            "darkMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Applies dark styling to `selector` and `selector-primary` variants. Has no effect on `icon` or `text` types."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "dark-mode",
+                "reflect": false
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Maximum width of the dropdown. Accepts any valid CSS width value (e.g. \"300px\", \"20rem\", \"50%\"). The dropdown may still render narrower to fit its content or the space available."
+                        }, {
+                            "name": "default",
+                            "text": "\"25.875rem\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "\"25.875rem\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "isTabbing": {},
+            "isHidden": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmActionMenuLoaded",
+                "name": "wmActionMenuLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the component finishes loading and child wm-menuitem elements are ready."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "menuLoaded",
+                "name": "menuLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the component finishes loading."
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use wmActionMenuLoaded instead."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "handleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "handleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scroll",
+                "method": "handleWindowScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "wmMenuitemClicked",
+                "method": "handleClickedItem",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmKeyUpPressed",
+                "method": "handleKeyUp",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmKeyDownPressed",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmHomeKeyPressed",
+                "method": "handleHomeKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEndKeyPressed",
+                "method": "handleEndKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmTabKeyPressed",
+                "method": "handleTabKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmEscKeyPressed",
+                "method": "handleEscKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmMenuitemBlurred",
+                "method": "handleMenuitemBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmLetterPressed",
+                "method": "findAndFocusItem",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}