kritzel-stencil 0.0.128 → 0.0.129

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -4,6 +4,11 @@
   user-select: none;
 }
 
+:host(.mobile) {
+  --kritzel-controls-control-hover-background-color: transparent;
+  --kritzel-controls-control-active-background-color: transparent;
+}
+
 .kritzel-controls {
   display: flex;
   flex-direction: row;
@@ -39,18 +44,10 @@
   background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
 }
 
-:host(.mobile) .kritzel-control:hover {
-  background-color: unset;
-}
-
 .kritzel-control:active {
   background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
 }
 
-:host(.mobile) .kritzel-control:active {
-  background-color: unset;
-}
-
 .kritzel-control.selected,
 .kritzel-control.selected:hover,
 .kritzel-control.selected:active {

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js

@@ -24,13 +24,15 @@ export class KritzelWorkspaceManager {
             const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
             if (this.newWorkspace) {
                 await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.editingIndex = null;
+                this.newWorkspace = null;
                 this.selectWorkspace(updatedWorkspace);
             }
             else {
                 await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+                this.editingIndex = null;
+                this.newWorkspace = null;
             }
-            this.editingIndex = null;
-            this.newWorkspace = null;
         };
         this.handleRename = (index) => {
             this.editingIndex = index;
@@ -66,6 +68,7 @@ export class KritzelWorkspaceManager {
         this.selectWorkspace(workspace);
     }
     selectWorkspace(workspace) {
+        debugger;
         if (this.editingIndex !== null)
             return;
         this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
@@ -92,7 +95,7 @@ export class KritzelWorkspaceManager {
                 },
             ],
         }));
-        return (h(Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+        return (h(Host, { key: '4d060aee853a47ea451f707c6de345b6efcbd678' }, h("kritzel-split-button", { key: 'cb52b41b25c7ddc8584e96a2151efc6406166e99', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
     }
     static get is() { return "kritzel-workspace-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-workspace-manager.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n    }\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\r\n        },\r\n      ],\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-workspace-manager.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n    }\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    debugger;\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\r\n        },\r\n      ],\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/components/kritzel-controls.js

@@ -1,4 +1,4 @@
-import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-BB22cVkU.js';
+import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-yZFrTtMQ.js';
 
 const KritzelControls = KritzelControls$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-editor.js

@@ -8,19 +8,19 @@ import { d as defineCustomElement$k } from './p-BAPUTr3K.js';
 import { d as defineCustomElement$j } from './p-BU2q3PRS.js';
 import { d as defineCustomElement$i } from './p-a7KmQzo4.js';
 import { d as defineCustomElement$h } from './p-BaKb8ZLg.js';
-import { d as defineCustomElement$g } from './p-BB22cVkU.js';
+import { d as defineCustomElement$g } from './p-yZFrTtMQ.js';
 import { d as defineCustomElement$f } from './p-DtmZW6eP.js';
 import { d as defineCustomElement$e } from './p-BvlGgLAQ.js';
 import { d as defineCustomElement$c } from './p-BZ-j_4CK.js';
 import { d as defineCustomElement$b } from './p-_ntxNi8v.js';
 import { d as defineCustomElement$a } from './p-BcQTDgzV.js';
-import { d as defineCustomElement$8 } from './p-hSuNJiIq.js';
+import { d as defineCustomElement$8 } from './p-C6OxvITm.js';
 import { d as defineCustomElement$7 } from './p-BmJbJwkH.js';
-import { d as defineCustomElement$6 } from './p-DV4ERZv5.js';
+import { d as defineCustomElement$6 } from './p-Dozs0Zfn.js';
 import { d as defineCustomElement$5 } from './p-rQeWFfPG.js';
 import { d as defineCustomElement$4 } from './p-jG1e48OE.js';
 import { d as defineCustomElement$3 } from './p-BzSz74Ci.js';
-import { d as defineCustomElement$2 } from './p-sQmW5NRu.js';
+import { d as defineCustomElement$2 } from './p-aaxf-h5S.js';
 
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',

package/dist/components/kritzel-menu.js

@@ -1,4 +1,4 @@
-import { K as KritzelMenu$1, d as defineCustomElement$1 } from './p-hSuNJiIq.js';
+import { K as KritzelMenu$1, d as defineCustomElement$1 } from './p-C6OxvITm.js';
 
 const KritzelMenu = KritzelMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-split-button.js

@@ -1,4 +1,4 @@
-import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-DV4ERZv5.js';
+import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-Dozs0Zfn.js';
 
 const KritzelSplitButton = KritzelSplitButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-workspace-manager.js

@@ -1,4 +1,4 @@
-import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-sQmW5NRu.js';
+import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-aaxf-h5S.js';
 
 const KritzelWorkspaceManager = KritzelWorkspaceManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-hSuNJiIq.js → p-C6OxvITm.js}

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
+import { K as KritzelDevicesHelper } from './p-CJKA5zIE.js';
 import { d as defineCustomElement$2 } from './p-BLmFBe2a.js';
 import { d as defineCustomElement$1 } from './p-BmJbJwkH.js';
 
-const kritzelMenuCss = ":host{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);z-index:2;gap:var(--kritzel-menu-item-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}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)}";
+const kritzelMenuCss = ":host{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);z-index:2;gap:var(--kritzel-menu-item-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}:host(.mobile){--kritzel-menu-item-button-hover-background-color:transparent;--kritzel-menu-item-button-focus-background-color:transparent}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(.active):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):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.edit-mode{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item.edit-mode.active{background-color:var(--kritzel-context-menu-item-hover-background-color, #007aff)}.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-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-button:focus{background-color:var(--kritzel-menu-item-button-focus-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)}";
 
 const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H {
     constructor(registerHost) {
@@ -18,7 +19,9 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
         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;
     }
@@ -30,13 +33,15 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
         }
     }
     handleWindowClick(event) {
-        if (this.openChildMenuIndex === null) {
-            return;
-        }
-        const target = event.target;
-        if (!this.host.contains(target)) {
-            this.openChildMenuIndex = null;
-        }
+        requestAnimationFrame(() => {
+            if (this.childMenu === null) {
+                return;
+            }
+            const target = event.target;
+            if (!target.contains(this.childMenu)) {
+                this.openChildMenuIndex = null;
+            }
+        });
     }
     handleEscape(event) {
         var _a;
@@ -76,20 +81,24 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
         (_a = item.select) === null || _a === void 0 ? void 0 : _a.call(item, item);
     }
     render() {
-        return (h(Host, { key: '6d98c1d40c1af36b7b36c45ddc96fb89ab6ebdca', tabIndex: 0 }, this.items.map((item, index) => (h("button", { tabIndex: 0, class: {
+        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", { style: { minWidth: '100px' }, items: item.children, parentIndex: index, parent: item, onClose: () => {
+            } }, 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();
@@ -100,7 +109,13 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
                     (_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 }))))))))));
+            }, 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 }))))))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -113,8 +128,9 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
         "parent": [16],
         "activeItemIndex": [2, "active-item-index"],
         "editingIndex": [2, "editing-index"],
-        "openChildMenuIndex": [32]
-    }, [[8, "click", "handleWindowClick"], [8, "keydown", "handleEscape"], [8, "keydown", "handleEnter"]], {
+        "openChildMenuIndex": [32],
+        "isTouchDevice": [32]
+    }, [[9, "pointerup", "handleWindowClick"], [8, "keydown", "handleEscape"], [8, "keydown", "handleEnter"]], {
         "editingIndex": ["onEditingIndexChange"]
     }]);
 function defineCustomElement() {
@@ -147,6 +163,6 @@ function defineCustomElement() {
 }
 
 export { KritzelMenu as K, defineCustomElement as d };
-//# sourceMappingURL=p-hSuNJiIq.js.map
+//# sourceMappingURL=p-C6OxvITm.js.map
 
-//# sourceMappingURL=p-hSuNJiIq.js.map
+//# sourceMappingURL=p-C6OxvITm.js.map

package/dist/components/p-C6OxvITm.js.map

@@ -0,0 +1 @@
+{"file":"p-C6OxvITm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-menu/kritzel-menu.css?tag=kritzel-menu&encapsulation=shadow","src/components/shared/kritzel-menu/kritzel-menu.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-width: 180px;\r\n  padding: var(--kritzel-controls-padding, 8px);\r\n  background-color: var(--kritzel-controls-background-color, #ffffff);\r\n  border-radius: var(--kritzel-controls-border-radius, 12px);\r\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n  z-index: 2;\r\n  gap: var(--kritzel-menu-item-gap, 4px);\r\n  overflow-y: auto;\r\n  scrollbar-color: #ebebeb transparent;\r\n  scrollbar-width: thin;\r\n}\r\n\r\n:host(.mobile){\r\n  --kritzel-menu-item-button-hover-background-color: transparent;\r\n  --kritzel-menu-item-button-focus-background-color: transparent;\r\n}\r\n\r\nbutton {\r\n  all: unset;\r\n  background: transparent;\r\n  border: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  line-height: inherit;\r\n  text-align: inherit;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  border-radius: 0;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\nbutton:focus {\r\n  outline: none;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n.menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: var(--kritzel-context-menu-item-padding, 8px);\r\n  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);\r\n  cursor: pointer;\r\n  font-family: sans-serif;\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  color: var(--kritzel-context-menu-item-color, #333333);\r\n  gap: var(--kritzel-context-menu-item-gap, 12px);\r\n}\r\n\r\n.menu-item:focus,\r\n.menu-item:focus-within {\r\n  outline: none;\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item-label {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.menu-item:not(.disabled):not(.active):hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item:not(.disabled):not(.active):active {\r\n  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.menu-item.active {\r\n  color: var(--kritzel-controls-background-color, #ffffff);\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);\r\n}\r\n\r\n.menu-item.active kritzel-icon {\r\n  filter: brightness(0) invert(1);\r\n}\r\n\r\n.menu-item.active:hover {\r\n  background-color: var(--kritzel-controls-control-selected-hover-background-color, #0075f1);\r\n}\r\n\r\n.menu-item.disabled {\r\n  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);\r\n  background-color: transparent;\r\n  cursor: default;\r\n}\r\n\r\n.menu-item.child-open {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important;\r\n}\r\n\r\n.menu-item.active.menu-item.child-open {\r\n  background-color: var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important;\r\n}\r\n\r\n.menu-item kritzel-icon {\r\n  opacity: 0.8;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.menu-item.disabled kritzel-icon {\r\n  opacity: 0.4;\r\n}\r\n\r\n.menu-item.edit-mode input {\r\n  background: transparent;\r\n  border: none;\r\n  outline: none;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: inherit;\r\n  padding: 0;\r\n  width: 100%;\r\n  padding: 2px 0px;\r\n  border-bottom: 1px solid var(--kritzel-context-menu-item-color, #333333);\r\n}\r\n\r\n.menu-item.active.edit-mode input {\r\n  border-bottom: 1px solid var(--kritzel-controls-background-color, #ffffff);\r\n}\r\n\r\n.menu-item.edit-mode input::selection {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);\r\n  border-radius: 4px;\r\n  color: var(--kritzel-controls-background-color, #ffffff);\r\n}\r\n\r\n.menu-item.active.edit-mode input::selection {\r\n  background-color: var(--kritzel-menu-item-selected-input-background-color, #ffffff34);\r\n}\r\n\r\n.menu-item.edit-mode {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item.edit-mode.active {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, #007aff);\r\n}\r\n\r\n.menu-item-button {\r\n  background: transparent;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  border-radius: 8px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.menu-item-button:hover {\r\n  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item-button:focus {\r\n  background-color: var(--kritzel-menu-item-button-focus-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.edit-container,\r\n.view-container {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--kritzel-context-menu-item-gap, 4px);\r\n}\r\n","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}

package/dist/components/p-CJKA5zIE.js

@@ -0,0 +1,10 @@
+class KritzelDevicesHelper {
+    static isTouchDevice() {
+        return window.matchMedia('(any-pointer: coarse)').matches;
+    }
+}
+
+export { KritzelDevicesHelper as K };
+//# sourceMappingURL=p-CJKA5zIE.js.map
+
+//# sourceMappingURL=p-CJKA5zIE.js.map

package/dist/components/p-CJKA5zIE.js.map

@@ -0,0 +1 @@
+{"file":"p-CJKA5zIE.js","mappings":"MAAa,oBAAoB,CAAA;AAC7B,IAAA,OAAO,aAAa,GAAA;QAChB,OAAO,MAAM,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC,OAAO;;AAEhE;;;;","names":[],"sources":["src/helpers/devices.helper.ts"],"sourcesContent":["export class KritzelDevicesHelper {\r\n    static isTouchDevice(): boolean {\r\n        return window.matchMedia('(any-pointer: coarse)').matches;\r\n    }\r\n}"],"version":3}

package/dist/components/{p-DV4ERZv5.js → p-Dozs0Zfn.js}

@@ -1,9 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
+import { K as KritzelDevicesHelper } from './p-CJKA5zIE.js';
 import { d as defineCustomElement$3 } from './p-BLmFBe2a.js';
-import { d as defineCustomElement$2 } from './p-hSuNJiIq.js';
+import { d as defineCustomElement$2 } from './p-C6OxvITm.js';
 import { d as defineCustomElement$1 } from './p-BmJbJwkH.js';
 
-const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-controls-padding, 4px);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);gap:var(--kritzel-context-menu-item-gap, 4px)}:host(:focus){outline:none}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);font-size:var(--kritzel-context-menu-item-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-context-menu-item-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-controls-divider-width, 1px);height:24px;background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}";
+const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-controls-padding, 4px);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);gap:var(--kritzel-context-menu-item-gap, 4px)}:host(:focus){outline:none}:host(.mobile){--kritzel-context-menu-item-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);font-size:var(--kritzel-context-menu-item-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-context-menu-item-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-controls-divider-width, 1px);height:24px;background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}";
 
 const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitButton extends H {
     constructor(registerHost) {
@@ -22,6 +23,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         this.activeItemIndex = null;
         this.editingIndex = null;
         this.isMenuOpen = false;
+        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.handleDocumentClick = (event) => {
             const path = (event.composedPath && event.composedPath()) || [];
             const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
@@ -61,7 +63,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         this.host.focus();
     }
     render() {
-        return (h(Host, { key: 'cf133b2867dffe6b9d70259c7d44b86342411d38', tabIndex: 0 }, h("button", { key: '3044cd9cbe02dde919a276b9f1d8f1f24b8514e9', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && h("kritzel-icon", { key: '4ed314f7288df567bb35a909c4919cf353788dd2', name: this.buttonIcon }), this.buttonText && (h("span", { key: '68b2148200e4698468aae137d16a4b5f17764f9f' }, this.buttonText, " (", this.options.length, ")"))), h("div", { key: '5047a2aea1d31e80fba8f6350e4b64572198c87d', class: "split-divider" }), h("button", { key: 'd7b33d9c717553d7cff3c3d2fafe90ce9dce1e67', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, h("kritzel-icon", { key: 'a3d485aee5e9843c2d07d367a0d5743bfc8f3d5c', name: this.dropdownIcon })), h("kritzel-portal", { key: '2bb8f5c58884e6c73d3d7025a8e6efce770ab039', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (h("kritzel-menu", { key: '3f2bb51a43ec78ff8664d5f625afa21cf9ecfb8c', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
+        return (h(Host, { key: '1c0010ff46e3e6ac4753f332e683752f82bfb699', tabIndex: 0, class: { mobile: this.isTouchDevice } }, h("button", { key: 'b9e60cea56197641c15a58a3899d09a604a0ca20', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && h("kritzel-icon", { key: '3bd9a97e9511eb734665bd45e646f68d9cdcafc5', name: this.buttonIcon }), this.buttonText && (h("span", { key: 'f4a7bbd42bfdf8b748167b439a25ec7cc9f72ecf' }, this.buttonText, " (", this.options.length, ")"))), h("div", { key: 'bd6ce66c2debee87fa78904730a7fa09bcfe6514', class: "split-divider" }), h("button", { key: '5a7b918856ebfc77dd8aa290acb62f4fceaff2b3', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, h("kritzel-icon", { key: '28ab4da8d1c4703f0df6551dd85791528b6af793', name: this.dropdownIcon })), h("kritzel-portal", { key: '72746c9acfcbdc56f2a053662d3f1e8596d71eb9', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (h("kritzel-menu", { key: '98af211f4dbc21c4a5fd7223c9441a54451b38a2', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
     }
     get host() { return this; }
     static get style() { return kritzelSplitButtonCss; }
@@ -74,6 +76,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         "activeItemIndex": [2, "active-item-index"],
         "editingIndex": [2, "editing-index"],
         "isMenuOpen": [32],
+        "isTouchDevice": [32],
         "openMenu": [64],
         "closeMenu": [64]
     }]);
@@ -107,6 +110,6 @@ function defineCustomElement() {
 }
 
 export { KritzelSplitButton as K, defineCustomElement as d };
-//# sourceMappingURL=p-DV4ERZv5.js.map
+//# sourceMappingURL=p-Dozs0Zfn.js.map
 
-//# sourceMappingURL=p-DV4ERZv5.js.map
+//# sourceMappingURL=p-Dozs0Zfn.js.map

package/dist/components/p-Dozs0Zfn.js.map

@@ -0,0 +1 @@
+{"file":"p-Dozs0Zfn.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: sans-serif;\n  z-index: 1;\n  padding: var(--kritzel-controls-padding, 4px);\n  background-color: var(--kritzel-controls-background-color, #ffffff);\n  border-radius: var(--kritzel-controls-border-radius, 12px);\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\n  gap: var(--kritzel-context-menu-item-gap, 4px);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host(.mobile){\n  --kritzel-context-menu-item-hover-background-color: transparent;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: all;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.split-main-button,\n.split-menu-button {\n  height: auto;\n  display: flex;\n  align-items: center;\n  padding: var(--kritzel-controls-padding, 8px);\n  background-color: var(--kritzel-controls-background-color, #ffffff);\n  border-radius: var(--kritzel-controls-border-radius, 12px);\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\n}\n\n.split-main-button:hover,\n.split-menu-button:hover {\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\n}\n\n.split-main-button:focus,\n.split-menu-button:focus {\n  outline: none;\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\n}\n\n.split-main-button {\n  gap: var(--kritzel-context-menu-item-gap, 4px);\n}\n\n.split-menu-button {\n  border-left: none;\n  justify-content: center;\n}\n\n.split-divider {\n  width: var(--kritzel-controls-divider-width, 1px);\n  height: 24px;\n  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } 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-split-button',\r\n  styleUrl: 'kritzel-split-button.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n  @Prop()\r\n  buttonText: string;\r\n\r\n  @Prop()\r\n  buttonIcon: string;\r\n\r\n  @Prop()\r\n  dropdownIcon = 'chevron-down';\r\n\r\n  @Prop()\r\n  options: KritzelMenuItem[] = [];\r\n\r\n  @Prop()\r\n  disabled = false;\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  buttonClick: EventEmitter<void>;\r\n\r\n  @Event()\r\n  optionSelect: EventEmitter<KritzelMenuItem>;\r\n\r\n  @Event()\r\n  menuOpened: EventEmitter<void>;\r\n\r\n  @Event()\r\n  menuClosed: EventEmitter<void>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @State()\r\n  isMenuOpen = false;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  splitMenuButton: HTMLButtonElement;\r\n\r\n  @Method()\r\n  async openMenu() {\r\n    if (this.disabled || this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = true;\r\n    this.menuOpened.emit();\r\n    document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n  }\r\n\r\n  @Method()\r\n  async closeMenu() {\r\n    if (this.disabled || !this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = false;\r\n    this.menuClosed.emit();\r\n\r\n    this.host.focus();\r\n  }\r\n\r\n  private handleDocumentClick = (event: MouseEvent) => {\r\n    const path = (event.composedPath && event.composedPath()) || [];\r\n    const clickedInside = path.some(node => (node as HTMLElement)?.tagName === 'KRITZEL-SPLIT-BUTTON' || (node as HTMLElement)?.tagName === 'KRITZEL-MENU');\r\n\r\n    if (!clickedInside) {\r\n      this.closeMenu();\r\n    } else if (this.isMenuOpen) {\r\n      document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n    }\r\n  };\r\n\r\n  private toggleMenu = () => {\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu();\r\n    }\r\n  };\r\n\r\n  private handleButtonClick = () => {\r\n    if (!this.disabled) {\r\n      this.buttonClick.emit();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0} class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.disabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n          {this.buttonText && (\r\n            <span>\r\n              {this.buttonText} ({this.options.length})\r\n            </span>\r\n          )}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButton = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.disabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.host} offsetY={4}>\r\n          {this.isMenuOpen && (\r\n            <kritzel-menu\r\n              style={{ maxHeight: '300px', width: '180px' }}\r\n              items={this.options}\r\n              activeItemIndex={this.activeItemIndex}\r\n              editingIndex={this.editingIndex}\r\n              onClose={() => this.closeMenu()}\r\n            ></kritzel-menu>\r\n          )}\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-sQmW5NRu.js → p-aaxf-h5S.js}

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { K as KritzelWorkspace } from './p-BeVv4o5c.js';
 import { O as ObjectHelper } from './p-Bb6od8He.js';
 import { d as defineCustomElement$4 } from './p-BLmFBe2a.js';
-import { d as defineCustomElement$3 } from './p-hSuNJiIq.js';
+import { d as defineCustomElement$3 } from './p-C6OxvITm.js';
 import { d as defineCustomElement$2 } from './p-BmJbJwkH.js';
-import { d as defineCustomElement$1 } from './p-DV4ERZv5.js';
+import { d as defineCustomElement$1 } from './p-Dozs0Zfn.js';
 
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
 
@@ -38,13 +38,15 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
             const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
             if (this.newWorkspace) {
                 await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.editingIndex = null;
+                this.newWorkspace = null;
                 this.selectWorkspace(updatedWorkspace);
             }
             else {
                 await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+                this.editingIndex = null;
+                this.newWorkspace = null;
             }
-            this.editingIndex = null;
-            this.newWorkspace = null;
         };
         this.handleRename = (index) => {
             this.editingIndex = index;
@@ -80,6 +82,7 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         this.selectWorkspace(workspace);
     }
     selectWorkspace(workspace) {
+        debugger;
         if (this.editingIndex !== null)
             return;
         this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
@@ -106,7 +109,7 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
                 },
             ],
         }));
-        return (h(Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+        return (h(Host, { key: '4d060aee853a47ea451f707c6de345b6efcbd678' }, h("kritzel-split-button", { key: 'cb52b41b25c7ddc8584e96a2151efc6406166e99', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
     }
     get host() { return this; }
     static get style() { return kritzelWorkspaceManagerCss; }
@@ -151,6 +154,6 @@ function defineCustomElement() {
 }
 
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-sQmW5NRu.js.map
+//# sourceMappingURL=p-aaxf-h5S.js.map
 
-//# sourceMappingURL=p-sQmW5NRu.js.map
+//# sourceMappingURL=p-aaxf-h5S.js.map

package/dist/components/p-aaxf-h5S.js.map

@@ -0,0 +1 @@
+{"file":"p-aaxf-h5S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css?tag=kritzel-workspace-manager&encapsulation=shadow","src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n    }\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    debugger;\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\r\n        },\r\n      ],\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BB22cVkU.js → p-yZFrTtMQ.js}

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
 import { b as KritzelBrushTool, c as KritzelTextTool } from './p-B7VrEdgP.js';
+import { K as KritzelDevicesHelper } from './p-CJKA5zIE.js';
 import { d as defineCustomElement$d } from './p-V4ui5aWj.js';
 import { d as defineCustomElement$c } from './p-5CJxFNEE.js';
 import { d as defineCustomElement$b } from './p-BAPUTr3K.js';
@@ -14,13 +15,7 @@ import { d as defineCustomElement$3 } from './p-rQeWFfPG.js';
 import { d as defineCustomElement$2 } from './p-jG1e48OE.js';
 import { d as defineCustomElement$1 } from './p-BzSz74Ci.js';
 
-class KritzelDevicesHelper {
-    static isTouchDevice() {
-        return window.matchMedia('(any-pointer: coarse)').matches;
-    }
-}
-
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls extends H {
     constructor(registerHost) {
@@ -239,6 +234,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-BB22cVkU.js.map
+//# sourceMappingURL=p-yZFrTtMQ.js.map
 
-//# sourceMappingURL=p-BB22cVkU.js.map
+//# sourceMappingURL=p-yZFrTtMQ.js.map

package/dist/components/p-yZFrTtMQ.js.map

@@ -0,0 +1 @@
+{"file":"p-yZFrTtMQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n  --kritzel-controls-control-hover-background-color: transparent;\r\n  --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--kritzel-controls-gap, 8px);\r\n  height: 100%;\r\n  padding: var(--kritzel-controls-padding, 8px);\r\n  background-color: var(--kritzel-controls-background-color, #ffffff);\r\n  border-radius: var(--kritzel-controls-border-radius, 16px);\r\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n  z-index: 10000;\r\n  position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  padding: var(--kritzel-controls-control-padding, 8px);\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  -webkit-tap-highlight-color: transparent;\r\n  font-weight: bold;\r\n}\r\n\r\n.kritzel-control:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-divider {\r\n  width: var(--kritzel-controls-divider-width, 1px);\r\n  height: var(--kritzel-controls-divider-height, 24px);\r\n  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-config-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 40px;\r\n  height: 40px;\r\n  box-sizing: border-box;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-config {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.color-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n    height: 24px;\r\n    width: 24px;\r\n    border-radius: 50%;\r\n    border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n  position: fixed;\r\n  bottom: 66px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 10001;\r\n}\r\n","import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeControl: KritzelToolbarControl | null = null;\r\n\r\n  @Prop()\r\n  isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event()\r\n  isControlsReady: EventEmitter<void>;\r\n\r\n  @State()\r\n  firstConfig: ToolConfig | null = null;\r\n\r\n  @State()\r\n  isTooltipVisible: boolean = false;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n    await this.kritzelEngine?.setFocus();\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    this.kritzelEngine?.disable();\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  render() {\r\n    const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'divider') {\r\n              return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div class=\"kritzel-config-container\" key={control.name}>\r\n                  <kritzel-tooltip isVisible={this.isTooltipVisible} anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}>\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    style={{\r\n                      cursor: this.activeControl.config ? 'pointer' : 'default',\r\n                      pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n\r\n                    {hasNoConfig && <div class=\"no-config\"></div>}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}