kritzel-stencil 0.0.128 → 0.0.130

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

@@ -1,166 +1,26 @@
 :host {
+  position: relative;
   display: flex;
   flex-direction: column;
-  min-width: 180px;
-  padding: var(--kritzel-controls-padding, 8px);
-  background-color: var(--kritzel-controls-background-color, #ffffff);
-  border-radius: var(--kritzel-controls-border-radius, 12px);
-  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-controls-border, 1px solid #ebebeb);
+  background-color: var(--kritzel-menu-background-color, #ffffff);
+  width: var(--kritzel-menu-width, 180px);
+  padding: var(--kritzel-menu-padding, 8px);
+  border-radius: var(--kritzel-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-menu-border, 1px solid #ebebeb);
   z-index: 2;
   gap: var(--kritzel-menu-item-gap, 4px);
   overflow-y: auto;
   scrollbar-color: #ebebeb transparent;
   scrollbar-width: thin;
+  max-height: 300px;
 }
 
-button {
-  all: unset;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  line-height: inherit;
-  text-align: inherit;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border-radius: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-button:focus {
-  outline: none;
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--kritzel-context-menu-item-padding, 8px);
-  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);
-  cursor: pointer;
-  font-family: sans-serif;
-  font-size: var(--kritzel-context-menu-item-font-size, 14px);
-  color: var(--kritzel-context-menu-item-color, #333333);
-  gap: var(--kritzel-context-menu-item-gap, 12px);
-}
-
-.menu-item:focus,
-.menu-item:focus-within {
-  outline: none;
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.menu-item:not(.disabled):not(.inactive):not(.active):hover {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item:not(.disabled):not(.inactive):not(.active):active {
-  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.menu-item.active {
-  color: var(--kritzel-controls-background-color, #ffffff);
-  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);
-}
-
-.menu-item.active kritzel-icon {
-  filter: brightness(0) invert(1);
-}
-
-.menu-item.active:hover {
-  background-color: var(--kritzel-controls-control-selected-hover-background-color, #0075f1);
-}
-
-.menu-item.disabled {
-  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);
-  background-color: transparent;
-  cursor: default;
-}
-
-.menu-item.child-open {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important;
-}
-
-.menu-item.active.menu-item.child-open {
-  background-color: var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important;
-}
-
-.menu-item kritzel-icon {
-  opacity: 0.8;
-  flex-shrink: 0;
-}
-
-.menu-item.disabled kritzel-icon {
-  opacity: 0.4;
-}
-
-.menu-item.edit-mode input {
-  background: transparent;
-  border: none;
-  outline: none;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-  padding: 0;
-  width: 100%;
-  padding: 2px 0px;
-  border-bottom: 1px solid var(--kritzel-context-menu-item-color, #333333);
-}
-
-.menu-item.active.edit-mode input {
-  border-bottom: 1px solid var(--kritzel-controls-background-color, #ffffff);
-}
-
-.menu-item.edit-mode input::selection {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);
-  border-radius: 4px;
-  color: var(--kritzel-controls-background-color, #ffffff);
-}
-
-.menu-item.active.edit-mode input::selection {
-  background-color: var(--kritzel-menu-item-selected-input-background-color, #ffffff34);
-}
-
-.menu-item-button {
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.menu-item-button:hover {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item-button:focus {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.edit-container,
-.view-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--kritzel-context-menu-item-gap, 4px);
+.has-open-child-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
 }

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

@@ -1,95 +1,47 @@
-import { h, Host } from "@stencil/core";
+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.childMenuAnchor = null;
-        this.cancelButton = null;
-        this.saveButton = null;
-    }
-    onEditingIndexChange(newValue) {
-        if (newValue === null) {
-            this.openChildMenuIndex = null;
-            this.editInput = undefined;
-            return;
-        }
-    }
-    handleWindowClick(event) {
-        if (this.openChildMenuIndex === null) {
-            return;
-        }
-        const target = event.target;
-        if (!this.host.contains(target)) {
-            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();
-        }
+        this.selectedIndex = null;
+        this.onOverlayClick = (event) => {
+            event.stopPropagation();
+            this.itemCloseChildMenu.emit(this.openChildMenuItem);
+        };
+        this.handleItemSelect = (event) => {
+            event.stopPropagation();
+            this.itemSelect.emit(event.detail);
+        };
+        this.handleSave = (event) => {
+            event.stopPropagation();
+            this.itemSave.emit(event.detail);
+        };
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.itemCancel.emit(event.detail);
+        };
+        this.handleToggleChildMenu = (event) => {
+            event.stopPropagation();
+            this.itemToggleChildMenu.emit(event.detail);
+        };
+        this.handleCloseChildMenu = (event) => {
+            event.stopPropagation();
+            this.itemCloseChildMenu.emit(event.detail);
+        };
     }
-    handleEnter(event) {
-        var _a;
-        if (event.key === 'Enter') {
-            if (this.editingIndex !== null) {
-                (_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.click();
-                return;
-            }
+    async setFocus() {
+        const firstItem = this.host.querySelector('kritzel-menu-item');
+        if (firstItem) {
+            firstItem.focus();
         }
     }
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.host.focus();
-        });
-    }
-    isViewMode(index) {
-        return this.editingIndex !== index;
+    get openChildMenuItem() {
+        return this.items.find(item => item.isChildMenuOpen);
     }
-    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);
     }
     render() {
-        return (h(Host, { key: '6d98c1d40c1af36b7b36c45ddc96fb89ab6ebdca', tabIndex: 0 }, 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,
-            }, 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", { 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("button", { ref: el => (this.cancelButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, h("kritzel-icon", { name: "x", size: 16 })), h("button", { ref: el => (this.saveButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_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"; }
@@ -110,13 +62,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"
                         }
                     }
                 },
@@ -127,17 +79,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,
@@ -147,83 +104,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": {}
-        };
-    }
-    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,
@@ -240,33 +236,27 @@ export class KritzelMenu {
                 }
             }];
     }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "editingIndex",
-                "methodName": "onEditingIndexChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleWindowClick",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "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\n\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  private editInput?: HTMLInputElement;\r\n\r\n  private childMenuAnchor?: HTMLElement = 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('click', { target: 'window' })\r\n  handleWindowClick(event: MouseEvent) {\r\n    if (this.openChildMenuIndex === null) {\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.openChildMenuIndex = null;\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}>\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            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\r\n                      anchor={this.childMenuAnchor}\r\n                      offsetY={4}\r\n                      onClose={() => this.openChildMenuIndex = null}\r\n                    >\r\n                      <kritzel-menu\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                  <button ref={el => (this.cancelButton = el)} class=\"menu-item-button\" tabIndex={0} onClick={() => item.cancel?.(item)}>\r\n                    <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n                  </button>\r\n\r\n                  <button ref={el => (this.saveButton = el)} class=\"menu-item-button\" tabIndex={0} onClick={() => item.save?.(item)}>\r\n                    <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n                  </button>\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"]}