@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/wm-menuitem/wm-menuitem.js

@@ -0,0 +1,515 @@
+import { h, Host } from "@stencil/core";
+import { getIconCodeFromName } from "../../global/interfaces";
+/**
+ * A single item within a wm-action-menu dropdown. Always used as a direct child of
+ * wm-action-menu — never rendered in isolation.
+ *
+ * @slot - The visible label text for the menu item.
+ *
+ * @accessibility
+ * - Rendered with `role="menuitem"` and `aria-disabled` when disabled.
+ *
+ * @usageNotes
+ * - `description` is limited to 100 characters and is incompatible with `icon`.
+ * - When disabled, the host element's `onclick` handler is temporarily removed and restored
+ *   when re-enabled, so that click handlers set before the prop change are not lost.
+ *
+ * @example {html} Basic menu items
+ * <wm-action-menu tooltip="Actions">
+ *   <wm-menuitem onclick="editRecord()">Edit</wm-menuitem>
+ *   <wm-menuitem onclick="deleteRecord()">Delete</wm-menuitem>
+ * </wm-action-menu>
+ *
+ * @example {react} Basic menu items
+ * <WmActionMenu tooltip="Actions">
+ *   <WmMenuitem onClick={editRecord}>Edit</WmMenuitem>
+ *   <WmMenuitem onClick={deleteRecord}>Delete</WmMenuitem>
+ * </WmActionMenu>
+ *
+ * @example {html} Menu item with icon
+ * <wm-menuitem icon="#edit" onclick="editRecord()">Edit</wm-menuitem>
+ *
+ * @example {react} Menu item with icon
+ * <WmMenuitem icon="#edit" onClick={editRecord}>Edit</WmMenuitem>
+ *
+ * @example {html} Menu item with description
+ * <wm-menuitem description="Permanently removes the record" onclick="deleteRecord()">Delete</wm-menuitem>
+ *
+ * @example {react} Menu item with description
+ * <WmMenuitem description="Permanently removes the record" onClick={deleteRecord}>Delete</WmMenuitem>
+ *
+ * @example {html} Disabled menu item -- the handler is retained and restored when re-enabled
+ * <wm-menuitem disabled onclick="exportRecord()">Export</wm-menuitem>
+ *
+ * @example {react} Disabled menu item
+ * <WmMenuitem disabled={true} onClick={exportRecord}>Export</WmMenuitem>
+ *
+ * @requiredSetup
+ * - Render it as a direct child of wm-action-menu.
+ * - Wire the action: attach an `onclick` handler to the item. The parent closes the dropdown when
+ *   an item is activated, so a menu that closes has not necessarily run anything.
+ *
+ */
+export class Menuitem {
+    constructor() {
+        this.onClickFunc = null;
+        this.descriptionCharLimit = 100;
+        this.disabled = false;
+        this.icon = undefined;
+        this.description = undefined;
+    }
+    handleKeydown(ev) {
+        const modifierKeyUsed = ev.altKey || ev.ctrlKey || ev.metaKey;
+        const isSingleCharacter = /^.$/.test(ev.key);
+        const isCharacterEntry = isSingleCharacter && !modifierKeyUsed;
+        switch (ev.key) {
+            case "ArrowUp":
+                ev.preventDefault();
+                this.wmKeyUpPressed.emit(this.el);
+                break;
+            case "ArrowDown":
+                ev.preventDefault();
+                this.wmKeyDownPressed.emit(this.el);
+                break;
+            case "Enter":
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.el.click();
+                }
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation(); // prevents closing of parent modal
+                this.wmEscKeyPressed.emit();
+                break;
+            case "Home":
+                ev.preventDefault();
+                this.wmHomeKeyPressed.emit();
+                break;
+            case "End":
+                ev.preventDefault();
+                this.wmEndKeyPressed.emit();
+                break;
+            case "Tab":
+                this.wmTabKeyPressed.emit();
+                break;
+            default:
+                if (isCharacterEntry) {
+                    ev.preventDefault();
+                    this.wmLetterPressed.emit(ev.key);
+                }
+        }
+    }
+    handleClick() {
+        if (!this.disabled) {
+            this.wmMenuitemClicked.emit();
+        }
+    }
+    handleBlur(ev) {
+        this.wmMenuitemBlurred.emit({ relatedTarget: ev.relatedTarget });
+    }
+    setOnClick() {
+        if (this.disabled && this.el.onclick) {
+            this.onClickFunc = this.el.onclick;
+            this.el.onclick = null;
+        }
+        else if (!this.disabled && this.onClickFunc) {
+            this.el.onclick = this.onClickFunc;
+        }
+    }
+    componentWillLoad() {
+        if (this.icon) {
+            // in case a name was passed instead of a code, convert it to code (for backwards compatibility)
+            this.icon = getIconCodeFromName(this.icon);
+        }
+        if (this.description) {
+            if (this.description.length > this.descriptionCharLimit) {
+                console.error(`wm-menuitem description is above the character limit of ${this.descriptionCharLimit}`);
+            }
+        }
+        this.setOnClick();
+    }
+    renderIcon() {
+        const defaultIconSize = "1.125rem";
+        if (this.icon.match(/^#/)) {
+            // Icon ID
+            return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: { "--icon-size": defaultIconSize } });
+        }
+        else if (this.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: { "--icon-fill": "currentColor", "--icon-size": defaultIconSize }, fill: "currentColor" }, h("use", { href: this.icon })));
+        }
+        else {
+            // MDI
+            return (h("span", { class: "mdi", "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
+        }
+    }
+    render() {
+        return (h(Host, { key: '17634e9132f3ed4e37b52ea200d46ba15b734d91', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a5a21c6a0feb8bf58a8a4de9a0cefe620522abe3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'd4302f14e6211ef9cad2486834523d43012ec428', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+    }
+    static get is() { return "wm-menuitem"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-menuitem.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-menuitem.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 menu item, preventing activation. The item remains visible and focusable."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Icon to display before the label. Accepts the same formats as wm-button:\n`'#icon-name'` for a Ripple icon, `'/path/to/file.svg#symbol-id'` for a local SVG sprite,\nor an MDI character code (deprecated). Incompatible with `description`."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Secondary descriptive text displayed below the label. Maximum 100 characters.\nIncompatible with `icon`."
+                        }],
+                    "text": ""
+                },
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmMenuitemClicked",
+                "name": "wmMenuitemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals the parent wm-action-menu to close the dropdown when the item is clicked\nor activated by keyboard. Not for application use \u2014 attach an `onclick` handler to run the\nitem's action."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmKeyUpPressed",
+                "name": "wmKeyUpPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmKeyDownPressed",
+                "name": "wmKeyDownPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmEscKeyPressed",
+                "name": "wmEscKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmHomeKeyPressed",
+                "name": "wmHomeKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmEndKeyPressed",
+                "name": "wmEndKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmPageDownItems",
+                "name": "wmPageDownItems",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmPageUpItems",
+                "name": "wmPageUpItems",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmTabKeyPressed",
+                "name": "wmTabKeyPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLWmMenuitemElement",
+                    "resolved": "HTMLWmMenuitemElement",
+                    "references": {
+                        "HTMLWmMenuitemElement": {
+                            "location": "global",
+                            "id": "global::HTMLWmMenuitemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmLetterPressed",
+                "name": "wmLetterPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmMenuitemBlurred",
+                "name": "wmMenuitemBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ relatedTarget: EventTarget | null }",
+                    "resolved": "{ relatedTarget: EventTarget | null; }",
+                    "references": {
+                        "EventTarget": {
+                            "location": "global",
+                            "id": "global::EventTarget"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "setOnClick"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}