kritzel-stencil 0.0.128 → 0.0.130

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

@@ -0,0 +1,129 @@
+: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;
+}
+
+.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;
+}

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

@@ -0,0 +1,261 @@
+import { Host, h } from "@stencil/core";
+export class KritzelMenuItem {
+    constructor() {
+        this.parent = null;
+        this.isDirty = false;
+        this.handleItemSelect = (event) => {
+            event.stopPropagation();
+            this.itemSelect.emit({ item: this.item, parent: this.parent });
+        };
+        this.handleInputChange = (event) => {
+            event.stopPropagation();
+            const target = event.target;
+            this.item.label = target.value;
+            this.isDirty = true;
+        };
+        this.handleSave = (event) => {
+            event.stopPropagation();
+            this.host.focus();
+            this.itemSave.emit(this.item);
+        };
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.host.focus();
+            this.itemCancel.emit(this.item);
+        };
+        this.handleMenuToggle = (event) => {
+            event.stopPropagation();
+            this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+        };
+        this.handleMenuClose = () => {
+            this.itemCloseChildMenu.emit(this.item);
+        };
+    }
+    onItemChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.isDirty = false;
+        }
+    }
+    componentDidLoad() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
+        }
+    }
+    componentDidUpdate() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
+        }
+    }
+    renderViewMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("div", null, this.item.label)),
+            h("div", { class: "menu-item-content right" }, this.item.children &&
+                this.item.children.length > 0 && [
+                h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 })),
+                h("kritzel-portal", { anchor: this.item.childMenuAnchor, offsetY: 4, onClose: this.handleMenuClose }, h("kritzel-menu", { items: this.item.children, parent: this.item, onItemSelect: event => this.itemSelect.emit(event.detail), onItemSave: event => this.itemSave.emit(event.detail), onItemCancel: event => this.itemCancel.emit(event.detail), onClose: this.handleMenuClose })),
+            ]),
+        ];
+    }
+    renderEditMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
+            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 })), h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 }))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: '5440ed43726d00ab65e7f423f065c1a3fa74e39e', tabIndex: 0, class: {
+                'selected': this.item.isSelected,
+                'editing': this.item.isEditing,
+                'disabled': this.item.isDisabled,
+                'child-open': this.item.isChildMenuOpen,
+            }, onClick: this.handleItemSelect }, h("div", { key: '69542710179216a1df47bde5d474a72e4a07aa5b', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+    }
+    static get is() { return "kritzel-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "attribute": "item",
+                "mutable": false,
+                "complexType": {
+                    "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,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parent": {
+                "type": "unknown",
+                "attribute": "parent",
+                "mutable": false,
+                "complexType": {
+                    "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,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDirty": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemSelectEvent",
+                    "resolved": "IKritzelMenuItemSelectEvent",
+                    "references": {
+                        "IKritzelMenuItemSelectEvent": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemSave",
+                "name": "itemSave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "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": ""
+                },
+                "complexType": {
+                    "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": ""
+                },
+                "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": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "item",
+                "methodName": "onItemChange"
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-menu-item.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQrG,MAAM,OAAO,eAAe;IAL5B;QAeU,WAAM,GAAqB,IAAI,CAAC;QASxC,YAAO,GAAY,KAAK,CAAC;QAkBjB,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACjE,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,MAAqB,EAAE,CAAC,CAAC;QACnG,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC,CAAC;KA6DH;IA5HC,YAAY,CAAC,QAA0B,EAAE,QAA0B;QACjE,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAcD,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1D,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1D,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAmCO,cAAc;QACpB,OAAO;YACL,WAAK,KAAK,EAAC,wBAAwB;gBACjC,eAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAO,CACxB;YACN,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI;gBAC/B,cAAQ,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;oBACjH,oBAAc,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAE,EAAE,GAAiB,CACzD;gBACT,sBAAgB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;oBAC1F,oBACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACzB,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACzD,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACrD,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,eAAe,GACf,CACD;aAClB,CACC;SACP,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,WAAK,KAAK,EAAC,wBAAwB;gBACjC,aAAO,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAAI,CAC9H;YACN,WAAK,KAAK,EAAC,yBAAyB;gBAClC,WAAK,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU;oBAC1K,oBAAc,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAiB,CAChD;gBACN,WAAK,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY;oBAChE,oBAAc,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,EAAE,GAAiB,CAC5C,CACF;SACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;gBAChC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;gBAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;gBAChC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe;aACxC,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB;YAE9B,4DAAK,KAAK,EAAC,mBAAmB,GAAO;YACpC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAC/D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-menu-item',\r\n  styleUrl: 'kritzel-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() item: IKritzelMenuItem;\r\n  @Watch('item')\r\n  onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n    if (newValue !== oldValue) {\r\n      this.isDirty = false;\r\n    }\r\n  }\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\r\n  @State()\r\n  isDirty: boolean = false;\r\n\r\n  private inputRef: HTMLInputElement;\r\n\r\n  componentDidLoad() {\r\n    if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n      this.inputRef.focus();\r\n      this.inputRef.select();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n      this.inputRef.focus();\r\n      this.inputRef.select();\r\n    }\r\n  }\r\n\r\n  private handleItemSelect = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n  };\r\n\r\n  private handleInputChange = (event: Event) => {\r\n    event.stopPropagation();\r\n    const target = event.target as HTMLInputElement;\r\n    this.item.label = target.value;\r\n    this.isDirty = true;\r\n  };\r\n\r\n  private handleSave = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.host.focus();\r\n    this.itemSave.emit(this.item);\r\n  };\r\n\r\n  private handleCancel = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.host.focus();\r\n    this.itemCancel.emit(this.item);\r\n  };\r\n\r\n  private handleMenuToggle = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n  };\r\n\r\n  private handleMenuClose = () => {\r\n    this.itemCloseChildMenu.emit(this.item);\r\n  };\r\n\r\n  private renderViewMode() {\r\n    return [\r\n      <div class=\"menu-item-content left\">\r\n        <div>{this.item.label}</div>\r\n      </div>,\r\n      <div class=\"menu-item-content right\">\r\n        {this.item.children &&\r\n          this.item.children.length > 0 && [\r\n            <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n              <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n            </button>,\r\n            <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n              <kritzel-menu\r\n                items={this.item.children}\r\n                parent={this.item}\r\n                onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n                onItemSave={event => this.itemSave.emit(event.detail)}\r\n                onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n                onClose={this.handleMenuClose}\r\n              ></kritzel-menu>\r\n            </kritzel-portal>,\r\n          ]}\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  private renderEditMode() {\r\n    return [\r\n      <div class=\"menu-item-content left\">\r\n        <input ref={el => (this.inputRef = el)} type=\"text\" class=\"edit-input\" value={this.item.label} onInput={this.handleInputChange} />\r\n      </div>,\r\n      <div class=\"menu-item-content right\">\r\n        <div tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0} class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }} onClick={this.handleSave}>\r\n          <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n        </div>\r\n        <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n          <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n        </div>\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        tabIndex={0}\r\n        class={{\r\n          'selected': this.item.isSelected,\r\n          'editing': this.item.isEditing,\r\n          'disabled': this.item.isDisabled,\r\n          'child-open': this.item.isChildMenuOpen,\r\n        }}\r\n        onClick={this.handleItemSelect}\r\n      >\r\n        <div class=\"menu-item-overlay\"></div>\r\n        {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,41 +1,158 @@
 import { Host, h } from "@stencil/core";
-import { KritzelHTMLHelper } from "../../../helpers/html.helper";
-const DEFAULT_OFFSET = 0;
-const MIN_LEFT_POSITION = 0;
-const Z_INDEX = '9005';
-const ID_PORTAL = 'portal';
+import { ObjectHelper } from "../../../helpers/object.helper";
 export class KritzelPortal {
     constructor() {
         this.autoFocus = true;
-        this.moved = false;
-        this.handleScroll = () => {
-            const isAnchorInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
-            if (!isAnchorInViewport) {
-                this.close.emit();
-                return;
-            }
-            this.calculatePosition();
-        };
+        this.id = `portal-${ObjectHelper.generateUUID()}`;
+        this.defaultOffset = 0;
+        this.minLeft = 0;
     }
     anchorChanged(newValue) {
         if (newValue) {
+            this.openPortal();
             this.calculatePosition();
+            if (this.autoFocus) {
+                this.focusFirstElement();
+            }
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    handleOutsideClick(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleKeyDown(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        if (event.key === 'Escape') {
+            this.anchor.focus();
+            this.close.emit();
+            this.closePortal();
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+        if (event.key === 'Enter') {
+            const activeElement = this.getDeepActiveElement();
+            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
         }
     }
     handleResize() {
         this.calculatePosition();
     }
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    getDeepActiveElement() {
+        var _a;
+        let activeEl = document.activeElement;
+        while ((_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+            activeEl = activeEl.shadowRoot.activeElement;
+        }
+        return activeEl;
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements(this.host);
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        const activeElement = this.getDeepActiveElement();
+        if (event.shiftKey) {
+            /* shift + tab */
+            if (activeElement === firstFocusable) {
+                lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            /* tab */
+            if (activeElement === lastFocusable) {
+                firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            return el.offsetParent !== null;
+        };
+        // Check if the root element itself is focusable
+        if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {
+            focusableElements.push(root);
+        }
+        // Function to recursively find focusable elements
+        const findFocusable = (element) => {
+            // Search in shadow root
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.querySelectorAll(focusableSelector)).forEach(el => {
+                    if (isVisible(el)) {
+                        focusableElements.push(el);
+                    }
+                });
+                Array.from(element.shadowRoot.children).forEach(findFocusable);
+            }
+            // Search in light DOM
+            Array.from(element.querySelectorAll(focusableSelector)).forEach(el => {
+                if (!focusableElements.includes(el) && isVisible(el)) {
+                    focusableElements.push(el);
+                }
+            });
+            // Handle slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(el => findFocusable(el));
+            }
+            Array.from(element.children).forEach(findFocusable);
+        };
+        findFocusable(root);
+        // Return unique elements in document order
+        return [...new Set(focusableElements)];
+    }
+    get firstFocusableElement() {
+        var _a, _b;
+        const slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const firstAssigned = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = this.getFocusableElements(firstAssigned);
+        return (_b = focusable[0]) !== null && _b !== void 0 ? _b : firstAssigned;
+    }
+    get lastAddedPortal() {
+        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
+        return portals.length ? portals[portals.length - 1] : null;
+    }
     calculateLeft() {
         var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : this.defaultOffset;
         let left = refRect.left + offset;
-        const maxLeft = window.innerWidth - portalRect.width - MIN_LEFT_POSITION;
-        if (left < MIN_LEFT_POSITION)
-            left = MIN_LEFT_POSITION;
+        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
+        if (left < this.minLeft)
+            left = this.minLeft;
         if (left > maxLeft)
             left = maxLeft;
         return Math.round(left + window.scrollX);
@@ -46,25 +163,29 @@ export class KritzelPortal {
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : this.defaultOffset;
         let top = refRect.bottom + offset;
         if (top + portalRect.height > window.innerHeight) {
             top = refRect.top - portalRect.height - offset;
         }
         return Math.round(top + window.scrollY);
     }
-    createPortal() {
+    openPortal() {
         this.portal = document.createElement('div');
-        this.portal.setAttribute('id', ID_PORTAL);
-        this.portal.style.zIndex = Z_INDEX;
+        this.portal.setAttribute('id', this.id);
+        this.portal.style.zIndex = '1';
         this.portal.style.position = 'absolute';
         this.portal.style.top = '0px';
         this.portal.style.left = '0px';
+        this.portal.appendChild(this.host);
         document.body.append(this.portal);
     }
-    moveElementToPortal() {
-        this.portal.appendChild(this.element);
-        this.moved = true;
+    closePortal() {
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
     }
     calculatePosition() {
         if (!this.anchor || !this.portal)
@@ -74,25 +195,8 @@ export class KritzelPortal {
         this.portal.style.top = `${top}px`;
         this.portal.style.left = `${left}px`;
     }
-    componentWillLoad() {
-        this.createPortal();
-    }
-    componentDidLoad() {
-        var _a;
-        this.moveElementToPortal();
-        if (this.anchor) {
-            this.calculatePosition();
-            this.scrollableParent = KritzelHTMLHelper.getScrollableParent(this.anchor);
-            (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.handleScroll);
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        this.moved ? this.portal.remove() : (this.moved = true);
-        (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScroll);
-    }
     render() {
-        return (h(Host, { key: 'e39525c3e9ddbf738b63ac0c08d8c1e2264783b1', ref: el => (this.element = el) }, h("slot", { key: '95202c5bea32c77dc1dde0a12a58ac9bcebd8812' })));
+        return (h(Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +303,7 @@ export class KritzelPortal {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "anchor",
@@ -207,6 +312,18 @@ export class KritzelPortal {
     }
     static get listeners() {
         return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "resize",
                 "method": "handleResize",
                 "target": "window",