kritzel-stencil 0.0.129 → 0.0.131

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js

@@ -1,110 +1,53 @@
-import { h, Host } from "@stencil/core";
-import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
+import { Host, h } from "@stencil/core";
 export class KritzelMenu {
-    constructor() {
-        this.items = [];
-        this.parentIndex = null;
-        this.parent = null;
-        this.activeItemIndex = null;
-        this.editingIndex = null;
-        this.openChildMenuIndex = null;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.childMenuAnchor = null;
-        this.childMenu = null;
-        this.cancelButton = null;
-        this.saveButton = null;
-    }
-    onEditingIndexChange(newValue) {
-        if (newValue === null) {
-            this.openChildMenuIndex = null;
-            this.editInput = undefined;
-            return;
-        }
-    }
-    handleWindowClick(event) {
-        requestAnimationFrame(() => {
-            if (this.childMenu === null) {
-                return;
-            }
-            const target = event.target;
-            if (!target.contains(this.childMenu)) {
-                this.openChildMenuIndex = null;
-            }
-        });
-    }
-    handleEscape(event) {
-        var _a;
-        if (event.key === 'Escape') {
-            if (this.openChildMenuIndex !== null) {
-                return;
-            }
-            if (this.editingIndex !== null) {
-                (_a = this.cancelButton) === null || _a === void 0 ? void 0 : _a.click();
-                return;
-            }
-            this.close.emit();
-        }
-    }
-    handleEnter(event) {
-        var _a;
-        if (event.key === 'Enter') {
-            if (this.editingIndex !== null) {
-                (_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.click();
-                return;
-            }
+    host;
+    items;
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    selectedIndex = null;
+    async setFocus() {
+        const firstItem = this.host.querySelector('kritzel-menu-item');
+        if (firstItem) {
+            firstItem.focus();
         }
     }
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.host.focus();
-        });
+    get openChildMenuItem() {
+        return this.items.find(item => item.isChildMenuOpen);
     }
-    isViewMode(index) {
-        return this.editingIndex !== index;
-    }
-    handleSelect(item) {
-        var _a;
-        if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {
-            return;
-        }
-        (_a = item.select) === null || _a === void 0 ? void 0 : _a.call(item, item);
+    get editingMenuItem() {
+        return this.items.find(item => item.isEditing);
     }
+    onOverlayClick = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(this.openChildMenuItem);
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit(event.detail);
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.itemSave.emit(event.detail);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.itemCancel.emit(event.detail);
+    };
+    handleToggleChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleCloseChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(event.detail);
+    };
     render() {
-        return (h(Host, { key: 'b5321fa13564d847a9432eb26e777d33f4b8412c', tabIndex: 0, class: { mobile: this.isTouchDevice } }, this.items.map((item, index) => (h("button", { tabIndex: 0, class: {
-                'menu-item': true,
-                'disabled': item.disabled,
-                'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,
-                'child-open': this.openChildMenuIndex === index,
-                'edit-mode': this.editingIndex === index,
-                'active': this.activeItemIndex === index,
-            }, style: {
-                pointerEvents: (this.editingIndex !== null && this.editingIndex !== index) || (this.openChildMenuIndex !== null && this.openChildMenuIndex !== index) ? 'none' : 'auto',
-            }, onClick: () => this.handleSelect(item) }, this.isViewMode(index) === true && (h("div", { class: "view-container" }, h("span", { class: "menu-item-label" }, item.label), h("div", null, item.children && item.children.length > 0 && (h("button", { class: "menu-item-button", tabIndex: 0, onClick: event => {
-                if (this.editingIndex !== null)
-                    return;
-                event.stopPropagation();
-                this.childMenuAnchor = this.openChildMenuIndex === index ? null : event.currentTarget;
-                this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;
-            } }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index && (h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => (this.openChildMenuIndex = null) }, h("kritzel-menu", { ref: el => {
-                this.childMenu = el;
-            }, style: { minWidth: '100px' }, items: item.children, parentIndex: index, parent: item, onClose: () => {
-                var _a;
-                this.openChildMenuIndex = null;
-                (_a = this.childMenuAnchor) === null || _a === void 0 ? void 0 : _a.focus();
-            } })))))), this.isViewMode(index) === false && (h("div", { class: "edit-container" }, h("input", { tabIndex: 0, ref: el => {
-                this.editInput = el;
-                requestAnimationFrame(() => {
-                    var _a, _b;
-                    (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
-                    (_b = this.editInput) === null || _b === void 0 ? void 0 : _b.select();
-                });
-            }, type: "text", name: 'menu-item-' + index, value: item.label, onInput: e => (item.label = e.target.value) }), h("div", { style: { display: 'flex', gap: '8px' } }, h("div", { class: "menu-item-button", ref: el => (this.cancelButton = el), tabIndex: 0, onClick: () => {
-                var _a;
-                (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item);
-            } }, h("kritzel-icon", { name: "x", size: 16 })), h("div", { class: "menu-item-button", ref: el => (this.saveButton = el), tabIndex: 0, onClick: () => {
-                var _a;
-                (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item);
-            } }, h("kritzel-icon", { name: "check", size: 16 }))))))))));
+        return (h(Host, { key: 'c82bde4dc70fdc79df7471bb10396394f6c3870a', onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '5fe0323aaa0da44abe736c6ef5e0516113c7820d', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map((item) => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
     static get is() { return "kritzel-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -125,13 +68,13 @@ export class KritzelMenu {
                 "attribute": "items",
                 "mutable": false,
                 "complexType": {
-                    "original": "KritzelMenuItem[]",
-                    "resolved": "KritzelMenuItem<any>[]",
+                    "original": "IKritzelMenuItem[]",
+                    "resolved": "IKritzelMenuItem<any>[]",
                     "references": {
-                        "KritzelMenuItem": {
+                        "IKritzelMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::KritzelMenuItem"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
                         }
                     }
                 },
@@ -142,17 +85,22 @@ export class KritzelMenu {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
+                "setter": false
             },
-            "parentIndex": {
-                "type": "number",
-                "attribute": "parent-index",
+            "parent": {
+                "type": "unknown",
+                "attribute": "parent",
                 "mutable": false,
                 "complexType": {
-                    "original": "number | null",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -162,84 +110,122 @@ export class KritzelMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
                 "defaultValue": "null"
-            },
-            "parent": {
-                "type": "unknown",
-                "attribute": "parent",
-                "mutable": false,
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
                 "complexType": {
-                    "original": "KritzelMenuItem",
-                    "resolved": "KritzelMenuItem<any>",
+                    "original": "IKritzelMenuItemSelectEvent",
+                    "resolved": "IKritzelMenuItemSelectEvent",
                     "references": {
-                        "KritzelMenuItem": {
+                        "IKritzelMenuItemSelectEvent": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::KritzelMenuItem"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemSelectEvent"
                         }
                     }
-                },
-                "required": false,
-                "optional": false,
+                }
+            }, {
+                "method": "itemSave",
+                "name": "itemSave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
-            },
-            "activeItemIndex": {
-                "type": "number",
-                "attribute": "active-item-index",
-                "mutable": false,
                 "complexType": {
-                    "original": "number | null",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCancel",
+                "name": "itemCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "null"
-            },
-            "editingIndex": {
-                "type": "number",
-                "attribute": "editing-index",
-                "mutable": false,
                 "complexType": {
-                    "original": "number | null",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemToggleChildMenu",
+                "name": "itemToggleChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
                 },
-                "required": false,
-                "optional": false,
+                "complexType": {
+                    "original": "IKritzelMenuItemToggleChildMenuEvent",
+                    "resolved": "IKritzelMenuItemToggleChildMenuEvent",
+                    "references": {
+                        "IKritzelMenuItemToggleChildMenuEvent": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemToggleChildMenuEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCloseChildMenu",
+                "name": "itemCloseChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "null"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "openChildMenuIndex": {},
-            "isTouchDevice": {}
-        };
-    }
-    static get events() {
-        return [{
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
                 "method": "close",
                 "name": "close",
                 "bubbles": true,
@@ -256,33 +242,27 @@ export class KritzelMenu {
                 }
             }];
     }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "editingIndex",
-                "methodName": "onEditingIndexChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "pointerup",
-                "method": "handleWindowClick",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keydown",
-                "method": "handleEscape",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleEnter",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=kritzel-menu.js.map

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-menu.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu/kritzel-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, State, Listen, Element, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-menu',\r\n  styleUrl: 'kritzel-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelMenu {\r\n  @Element()\r\n  host: HTMLElement;\r\n\r\n  @Prop()\r\n  items: KritzelMenuItem[] = [];\r\n\r\n  @Prop()\r\n  parentIndex: number | null = null;\r\n\r\n  @Prop()\r\n  parent: KritzelMenuItem = null;\r\n\r\n  @Prop()\r\n  activeItemIndex: number | null = null;\r\n\r\n  @Prop()\r\n  editingIndex: number | null = null;\r\n\r\n  @Event()\r\n  close: EventEmitter<void>;\r\n\r\n  @State()\r\n  openChildMenuIndex: number | null = null;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  private editInput?: HTMLInputElement;\r\n\r\n  private childMenuAnchor?: HTMLElement = null;\r\n\r\n  private childMenu?: HTMLKritzelMenuElement = null;\r\n\r\n  private cancelButton?: HTMLElement = null;\r\n\r\n  private saveButton?: HTMLElement = null;\r\n\r\n  @Watch('editingIndex')\r\n  onEditingIndexChange(newValue: number | null) {\r\n    if (newValue === null) {\r\n      this.openChildMenuIndex = null;\r\n      this.editInput = undefined;\r\n      return;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerup', { target: 'window' })\r\n  handleWindowClick(event: PointerEvent) {\r\n    requestAnimationFrame(() => {\r\n      if (this.childMenu === null) {\r\n        return;\r\n      }\r\n\r\n      const target = event.target as HTMLElement;\r\n\r\n      if (!target.contains(this.childMenu)) {\r\n        this.openChildMenuIndex = null;\r\n      }\r\n    });\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleEscape(event: KeyboardEvent) {\r\n    if (event.key === 'Escape') {\r\n      if (this.openChildMenuIndex !== null) {\r\n        return;\r\n      }\r\n\r\n      if (this.editingIndex !== null) {\r\n        this.cancelButton?.click();\r\n        return;\r\n      }\r\n\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleEnter(event: KeyboardEvent) {\r\n    if (event.key === 'Enter') {\r\n      if (this.editingIndex !== null) {\r\n        this.saveButton?.click();\r\n        return;\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.host.focus();\r\n    });\r\n  }\r\n\r\n  isViewMode(index: number): boolean {\r\n    return this.editingIndex !== index;\r\n  }\r\n\r\n  handleSelect(item: KritzelMenuItem) {\r\n    if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {\r\n      return;\r\n    }\r\n    item.select?.(item);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0} class={{ mobile: this.isTouchDevice }}>\r\n        {this.items.map((item, index) => (\r\n          <button\r\n            tabIndex={0}\r\n            class={{\r\n              'menu-item': true,\r\n              'disabled': item.disabled,\r\n              'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,\r\n              'child-open': this.openChildMenuIndex === index,\r\n              'edit-mode': this.editingIndex === index,\r\n              'active': this.activeItemIndex === index,\r\n            }}\r\n            style={{\r\n              pointerEvents:\r\n                (this.editingIndex !== null && this.editingIndex !== index) || (this.openChildMenuIndex !== null && this.openChildMenuIndex !== index) ? 'none' : 'auto',\r\n            }}\r\n            onClick={() => this.handleSelect(item)}\r\n          >\r\n            {this.isViewMode(index) === true && (\r\n              <div class=\"view-container\">\r\n                <span class=\"menu-item-label\">{item.label}</span>\r\n\r\n                <div>\r\n                  {item.children && item.children.length > 0 && (\r\n                    <button\r\n                      class=\"menu-item-button\"\r\n                      tabIndex={0}\r\n                      onClick={event => {\r\n                        if (this.editingIndex !== null) return;\r\n                        event.stopPropagation();\r\n                        this.childMenuAnchor = this.openChildMenuIndex === index ? null : (event.currentTarget as HTMLElement);\r\n                        this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;\r\n                      }}\r\n                    >\r\n                      <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n                    </button>\r\n                  )}\r\n\r\n                  {this.openChildMenuIndex === index && (\r\n                    <kritzel-portal anchor={this.childMenuAnchor} offsetY={4} onClose={() => (this.openChildMenuIndex = null)}>\r\n                      <kritzel-menu\r\n                        ref={el => {\r\n                          this.childMenu = el;\r\n                        }}\r\n                        style={{ minWidth: '100px' }}\r\n                        items={item.children}\r\n                        parentIndex={index}\r\n                        parent={item}\r\n                        onClose={() => {\r\n                          this.openChildMenuIndex = null;\r\n                          this.childMenuAnchor?.focus();\r\n                        }}\r\n                      ></kritzel-menu>\r\n                    </kritzel-portal>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            )}\r\n\r\n            {this.isViewMode(index) === false && (\r\n              <div class=\"edit-container\">\r\n                <input\r\n                  tabIndex={0}\r\n                  ref={el => {\r\n                    this.editInput = el as HTMLInputElement;\r\n                    requestAnimationFrame(() => {\r\n                      this.editInput?.focus();\r\n                      this.editInput?.select();\r\n                    });\r\n                  }}\r\n                  type=\"text\"\r\n                  name={'menu-item-' + index}\r\n                  value={item.label}\r\n                  onInput={e => (item.label = (e.target as HTMLInputElement).value)}\r\n                />\r\n\r\n                <div style={{ display: 'flex', gap: '8px' }}>\r\n                  <div\r\n                    class=\"menu-item-button\"\r\n                    ref={el => (this.cancelButton = el)}\r\n                    tabIndex={0}\r\n                    onClick={() => {\r\n                      item.cancel?.(item);\r\n                    }}\r\n                  >\r\n                    <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n                  </div>\r\n\r\n                  <div\r\n                    class=\"menu-item-button\"\r\n                    ref={el => (this.saveButton = el)}\r\n                    tabIndex={0}\r\n                    onClick={() => {\r\n                      item.save?.(item);\r\n                    }}\r\n                  >\r\n                    <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            )}\r\n          </button>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-menu.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu/kritzel-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, State, Event, EventEmitter, Element, Method } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-menu',\r\n  styleUrl: 'kritzel-menu.css',\r\n  shadow: true\r\n})\r\nexport class KritzelMenu {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: IKritzelMenuItem[];\r\n  @Prop() parent: IKritzelMenuItem = null;\r\n\r\n  @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n  @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n  @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() selectedIndex: number | null = null;\r\n\r\n  @Method()\r\n  async setFocus() {\r\n    const firstItem = this.host.querySelector('kritzel-menu-item');\r\n    if (firstItem) {\r\n      firstItem.focus();\r\n    }\r\n  }\r\n\r\n  get openChildMenuItem() {\r\n    return this.items.find(item => item.isChildMenuOpen);\r\n  }\r\n\r\n  get editingMenuItem() {\r\n    return this.items.find(item => item.isEditing);\r\n  }\r\n\r\n  private onOverlayClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemCloseChildMenu.emit(this.openChildMenuItem);\r\n  };\r\n\r\n  private handleItemSelect = (event: CustomEvent<{ item: IKritzelMenuItem; parent: IKritzelMenuItem }>) => {\r\n    event.stopPropagation();\r\n    this.itemSelect.emit(event.detail);\r\n  }\r\n\r\n  private handleSave = (event: CustomEvent<IKritzelMenuItem>) => {\r\n    event.stopPropagation();\r\n    this.itemSave.emit(event.detail);\r\n  }\r\n\r\n  private handleCancel = (event: CustomEvent<IKritzelMenuItem>) => {\r\n    event.stopPropagation();\r\n    this.itemCancel.emit(event.detail);\r\n  }\r\n\r\n  private handleToggleChildMenu = (event: CustomEvent<{ item: IKritzelMenuItem; childMenuAnchor: HTMLElement }>) => {\r\n    event.stopPropagation();\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  }\r\n\r\n  private handleCloseChildMenu = (event: CustomEvent<IKritzelMenuItem>) => {\r\n    event.stopPropagation();\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onClick={e => e.stopPropagation()}>\r\n        {this.openChildMenuItem && <div class=\"has-open-child-overlay\" onClick={this.onOverlayClick}></div>}\r\n        {this.items.map((item) => (\r\n          <kritzel-menu-item\r\n            key={item.id}\r\n            item={item}\r\n            parent={this.parent}\r\n            style={{ pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleSave}\r\n            onItemCancel={this.handleCancel}\r\n            onItemToggleChildMenu={this.handleToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleCloseChildMenu}\r\n          ></kritzel-menu-item>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css

@@ -0,0 +1,136 @@
+:host {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--kritzel-menu-item-padding, 8px);
+  box-sizing: border-box;
+  gap: 16px;
+  height: var(--kritzel-menu-item-height, 40px);
+  min-height: var(--kritzel-menu-item-min-height, 40px);
+  font-family: sans-serif;
+  font-size: var(--kritzel-menu-item-font-size, 14px);
+  border-radius: var(--kritzel-menu-item-border-radius, 12px);
+  outline: none;
+  cursor: default;
+}
+
+:host(:hover) .menu-item-overlay, :host(:focus-within) .menu-item-overlay {
+  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))
+}
+
+:host(.selected) {
+  background-color: var(--kritzel-menu-item-selected-bg, #007aff);
+  color: var(--kritzel-menu-item-selected-color, #ffffff);
+}
+
+:host(.selected) .action-button {
+  color: var(--kritzel-menu-item-selected-color, #ffffff);
+}
+
+:host(.selected.editing) {
+  background-color: var(--kritzel-menu-item-selected-bg, #007aff);
+}
+
+:host(.selected) .edit-input {
+  color: var(--kritzel-menu-item-selected-color, #ffffff);
+}
+
+:host(.selected) .edit-input::selection {
+  background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));
+}
+
+:host(.editing) {
+  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+:host(.disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.child-open) {
+  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+:host(.child-open.selected) {
+  background-color: var(--kritzel-menu-item-selected-bg, #007aff);
+}
+
+.menu-item-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: transparent;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: var(--kritzel-menu-item-border-radius, 12px);
+}
+
+.menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}
+
+.left {
+  justify-content: flex-start;
+  flex: 1;
+  min-width: 0;
+}
+
+.left > div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.edit-input {
+  flex: 1;
+  height: var(--kritzel-menu-item-input-height, 24px);
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid var(--kritzel-menu-item-input-border, #ccc);
+  font-size: var(--kritzel-context-menu-item-font-size, 14px);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.edit-input::selection {
+  background-color: var(--kritzel-menu-item-input-selection-color, #007bff);
+  color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);
+}
+
+.action-button {
+  padding: 4px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  background: transparent;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.action-button:hover, .action-button:focus {
+  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.action-button.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}