kritzel-stencil 0.0.130 → 0.0.132

package/dist/components/{p-D_Uh-xv_.js → p-BiCgeOiJ.js}

@@ -1,21 +1,20 @@
-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-C9-70hiF.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';
-import { d as defineCustomElement$a } from './p-Cb1IUD_g.js';
-import { d as defineCustomElement$9 } from './p-Crni2OI4.js';
-import { d as defineCustomElement$8 } from './p-BvlGgLAQ.js';
-import { d as defineCustomElement$7 } from './p-BZ-j_4CK.js';
-import { d as defineCustomElement$6 } from './p-_ntxNi8v.js';
-import { d as defineCustomElement$5 } from './p-BcQTDgzV.js';
-import { d as defineCustomElement$4 } from './p-BLmFBe2a.js';
-import { d as defineCustomElement$3 } from './p-BGccckxP.js';
-import { d as defineCustomElement$2 } from './p-26poIWa_.js';
-import { d as defineCustomElement$1 } from './p-fyfT6A5K.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { b as KritzelBrushTool, c as KritzelTextTool } from './p-B3VQubt_.js';
+import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
+import { d as defineCustomElement$c } from './p-B7kZ1_RH.js';
+import { d as defineCustomElement$b } from './p-CsyM5q2M.js';
+import { d as defineCustomElement$a } from './p-B7w19kIk.js';
+import { d as defineCustomElement$9 } from './p-DjU7p3od.js';
+import { d as defineCustomElement$8 } from './p-DFO-6kuA.js';
+import { d as defineCustomElement$7 } from './p-BM9IjvnD.js';
+import { d as defineCustomElement$6 } from './p-Ddlbt3Bj.js';
+import { d as defineCustomElement$5 } from './p-sreNwi0N.js';
+import { d as defineCustomElement$4 } from './p-sq9jgfX0.js';
+import { d as defineCustomElement$3 } from './p-0iJh9Z6m.js';
+import { d as defineCustomElement$2 } from './p-BPsQrpzN.js';
+import { d as defineCustomElement$1 } from './p-DCx3703u.js';
 
-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 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:focus,.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-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !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;border-radius:50%}.kritzel-config:focus{outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.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:56px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls extends H {
     constructor(registerHost) {
@@ -25,14 +24,15 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         }
         this.__attachShadow();
         this.isControlsReady = createEvent(this, "isControlsReady");
-        this.controls = [];
-        this.activeControl = null;
-        this.isUtilityPanelVisible = true;
-        this.firstConfig = null;
-        this.isTooltipVisible = false;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.kritzelEngine = null;
     }
+    get host() { return this; }
+    controls = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    isControlsReady;
+    firstConfig = null;
+    isTooltipVisible = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
@@ -41,28 +41,25 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         this.isTooltipVisible = false;
     }
     handleKeyDown(event) {
-        var _a;
         if (event.key === 'Escape') {
             event.preventDefault();
             this.closeTooltip();
-            (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+            this.kritzelEngine?.enable();
         }
     }
     async handleActiveToolChange(event) {
-        var _a;
         this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
     }
     async closeTooltip() {
         this.isTooltipVisible = false;
     }
+    kritzelEngine = null;
+    tooltipRef = null;
     get activeToolAsTextTool() {
-        var _a;
-        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
+        return this.activeControl?.tool;
     }
     get activeToolAsBrushTool() {
-        var _a;
-        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
+        return this.activeControl?.tool;
     }
     async componentWillLoad() {
         await this.initializeEngine();
@@ -102,48 +99,60 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         }
     }
     handleConfigClick(event) {
-        var _a;
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.disable();
+        if (this.isTooltipVisible) {
+            this.kritzelEngine?.disable();
+        }
+        else {
+            this.kritzelEngine?.enable();
+        }
+        setTimeout(() => {
+            this.tooltipRef?.focusContent();
+        }, 100);
     }
     async handleToolChange(event) {
-        this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
+        this.activeControl = { ...this.activeControl, tool: event.detail };
         await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
     }
+    handleTooltipClosed() {
+        this.isTooltipVisible = false;
+        this.kritzelEngine?.enable();
+    }
     render() {
-        var _a, _b;
-        const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (h(Host, { key: '7ab1f3e176848cb9a34be7e7b90e13c2a861d78b', class: {
+        const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
+        return (h(Host, { key: 'a463310d88265b71097f838bf775abdcabc99225', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f168b27cb9cc3a1a7d0028055cd58c60cec9776f', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '267e9c26b41a52c655209dbaa8c85cbd72323577', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: '9e568217b23632d73b051350d7f795f0cd7ab9ed', class: "kritzel-controls" }, this.controls.map(control => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'c55773245c925e1b972f3e83cb4d8f1c93ebe995', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
-                        'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
-                    }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
+                        'selected': this.activeControl?.name === control?.name,
+                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
             }
             if (control.type === 'divider') {
                 return h("div", { class: "kritzel-divider", key: control.name });
             }
-            if (control.type === 'config' && control.name === ((_b = this.firstConfig) === null || _b === void 0 ? void 0 : _b.name) && this.activeControl) {
-                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.kritzel-config-container') }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })))), h("div", { class: "kritzel-config", onClick: event => { var _a; return (_a = this.handleConfigClick) === null || _a === void 0 ? void 0 : _a.call(this, event); }, style: {
+            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: 0, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            this.handleConfigClick?.(event);
+                        }
+                    }, style: {
                         cursor: this.activeControl.config ? 'pointer' : 'default',
                         pointerEvents: hasNoConfig ? 'none' : 'auto',
-                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: (_d = this.activeToolAsBrushTool) === null || _d === void 0 ? void 0 : _d.color, size: (_e = this.activeToolAsBrushTool) === null || _e === void 0 ? void 0 : _e.size, style: {
+                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
                         borderRadius: '50%',
                         border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: (_f = this.activeToolAsTextTool) === null || _f === void 0 ? void 0 : _f.fontFamily, size: (_g = this.activeToolAsTextTool) === null || _g === void 0 ? void 0 : _g.fontSize, color: (_h = this.activeToolAsTextTool) === null || _h === void 0 ? void 0 : _h.fontColor }))), hasNoConfig && h("div", { class: "no-config" }))));
+                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))), hasNoConfig && h("div", { class: "no-config" }))));
             }
         }))));
     }
     static get assetsDirs() { return ["../assets"]; }
-    get host() { return this; }
     static get style() { return kritzelControlsCss; }
 }, [257, "kritzel-controls", {
         "controls": [16],
@@ -158,18 +167,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["kritzel-controls", "kritzel-brush-style", "kritzel-color", "kritzel-color-palette", "kritzel-control-brush-config", "kritzel-control-text-config", "kritzel-dropdown", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-stroke-size", "kritzel-tooltip", "kritzel-utility-panel"];
+    const components = ["kritzel-controls", "kritzel-color", "kritzel-color-palette", "kritzel-control-brush-config", "kritzel-control-text-config", "kritzel-dropdown", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-stroke-size", "kritzel-tooltip", "kritzel-utility-panel"];
     components.forEach(tagName => { switch (tagName) {
         case "kritzel-controls":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, KritzelControls);
             }
             break;
-        case "kritzel-brush-style":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
         case "kritzel-color":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
@@ -234,6 +238,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-D_Uh-xv_.js.map
+//# sourceMappingURL=p-BiCgeOiJ.js.map
 
-//# sourceMappingURL=p-D_Uh-xv_.js.map
+//# sourceMappingURL=p-BiCgeOiJ.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BiCgeOiJ.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:focus,\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-control.selected:focus {\r\n    background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;\r\n\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  border-radius: 50%;\r\n}\r\n\r\n.kritzel-config:focus {\r\n  outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\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: 56px;\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  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\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  }\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  tooltipRef: HTMLKritzelTooltipElement | 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    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\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  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\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\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\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                    tabIndex={0}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\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}

package/dist/components/{p-BcQWRzsB.js → p-C1-nvBx9.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
-import { K as KritzelWorkspace } from './p-BeVv4o5c.js';
-import { O as ObjectHelper } from './p-Bb6od8He.js';
-import { d as defineCustomElement$5 } from './p-BLmFBe2a.js';
-import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-C-DqsDXz.js';
-import { d as defineCustomElement$2 } from './p-jpGLgpoq.js';
-import { d as defineCustomElement$1 } from './p-CaPdvVd4.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
+import { O as ObjectHelper } from './p-EXPChOF6.js';
+import { d as defineCustomElement$5 } from './p-sq9jgfX0.js';
+import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-D_907-Wd.js';
+import { d as defineCustomElement$2 } from './p-CTvJDYFQ.js';
+import { d as defineCustomElement$1 } from './p-CvmWmUK9.js';
 
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
 
@@ -17,13 +17,18 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         this.__attachShadow();
         this.isWorkspaceManagerReady = createEvent(this, "isWorkspaceManagerReady");
         this.workspaceChange = createEvent(this, "workspaceChange");
-        this.workspaces = [];
-        this.childMenuAnchor = null;
-        this.openChildMenuItem = null;
-        this.newWorkspace = null;
-        this.editingItemId = null;
-        this.kritzelEngineRef = null;
     }
+    get host() { return this; }
+    activeWorkspace;
+    workspaces = [];
+    isWorkspaceManagerReady;
+    workspaceChange;
+    childMenuAnchor = null;
+    openChildMenuItem = null;
+    newWorkspace = null;
+    editingItemId = null;
+    kritzelEngineRef = null;
+    splitButtonRef;
     get sortedWorkspaces() {
         return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
     }
@@ -49,9 +54,9 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         this.workspaceChange.emit(item.value);
     }
     async add() {
+        await this.splitButtonRef.open();
         this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
         this.editingItemId = this.newWorkspace.id;
-        await this.splitButtonRef.open();
     }
     edit(item) {
         this.openChildMenuItem = null;
@@ -62,11 +67,14 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
     }
     async save(item) {
         if (this.newWorkspace) {
-            await this.kritzelEngineRef.createWorkspace(Object.assign(Object.assign({}, item.value), { name: item.label }));
+            this.newWorkspace.name = item.label;
+            await this.kritzelEngineRef.createWorkspace(this.newWorkspace);
             this.workspaceChange.emit(this.newWorkspace);
         }
         else {
-            await this.kritzelEngineRef.updateWorkspace(Object.assign(Object.assign({}, item.value), { name: item.label }));
+            const workspace = item.value;
+            workspace.name = item.label;
+            await this.kritzelEngineRef.updateWorkspace(workspace);
         }
         this.editingItemId = null;
         this.newWorkspace = null;
@@ -79,6 +87,11 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         this.openChildMenuItem = null;
         this.childMenuAnchor = null;
         await this.kritzelEngineRef.deleteWorkspace(item.value);
+        if (item.value.id === this.activeWorkspace?.id) {
+            this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;
+            this.workspaceChange.emit(this.activeWorkspace);
+        }
+        await this.splitButtonRef.focusMenu();
     }
     toggleChildMenu(item, anchor) {
         this.openChildMenuItem = item;
@@ -88,26 +101,28 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         this.openChildMenuItem = null;
         this.childMenuAnchor = null;
     }
-    closeMenu() {
+    handleMenuOpen() {
+        this.kritzelEngineRef.disable();
+    }
+    handleMenuClose() {
         this.cancel();
         this.closeChildMenu();
+        this.kritzelEngineRef.enable();
     }
     render() {
-        console.log('render workspace manager');
         const menuItems = this.sortedWorkspaces
             .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
             .filter(ws => ws !== null)
             .map(ws => {
-            var _a, _b, _c, _d;
             return {
                 id: ws.id,
                 label: ws.name,
                 value: ws,
                 isEditing: this.editingItemId === ws.id,
-                isSelected: ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === ws.id,
-                isNewItem: ((_b = this.newWorkspace) === null || _b === void 0 ? void 0 : _b.id) === ws.id,
-                isChildMenuOpen: ((_c = this.openChildMenuItem) === null || _c === void 0 ? void 0 : _c.id) === ws.id,
-                childMenuAnchor: ((_d = this.openChildMenuItem) === null || _d === void 0 ? void 0 : _d.id) === ws.id ? this.childMenuAnchor : null,
+                isSelected: this.activeWorkspace?.id === ws.id,
+                isNewItem: this.newWorkspace?.id === ws.id,
+                isChildMenuOpen: this.openChildMenuItem?.id === ws.id,
+                childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,
                 children: [
                     {
                         id: `${ws.id}-rename`,
@@ -119,16 +134,14 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
                         id: `${ws.id}-delete`,
                         label: 'Delete',
                         value: 'delete',
+                        isDisabled: this.sortedWorkspaces.length <= 1,
                         action: (_item, parent) => this.delete(parent),
                     },
                 ],
             };
         });
-        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onClose: () => {
-                this.closeMenu();
-            } })));
+        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onMainButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onMenuOpen: () => this.handleMenuOpen(), onMenuClose: () => this.handleMenuClose() })));
     }
-    get host() { return this; }
     static get style() { return kritzelWorkspaceManagerCss; }
 }, [257, "kritzel-workspace-manager", {
         "activeWorkspace": [16, "active-workspace"],
@@ -178,6 +191,6 @@ function defineCustomElement() {
 }
 
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-BcQWRzsB.js.map
+//# sourceMappingURL=p-C1-nvBx9.js.map
 
-//# sourceMappingURL=p-BcQWRzsB.js.map
+//# sourceMappingURL=p-C1-nvBx9.js.map

package/dist/components/p-C1-nvBx9.js.map

@@ -0,0 +1 @@
+{"file":"p-C1-nvBx9.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 { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element } from '@stencil/core';\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  @Element() host!: HTMLElement;\r\n\r\n  @Prop() activeWorkspace: KritzelWorkspace;\r\n  @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n  @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @State() childMenuAnchor: HTMLElement = null;\r\n  @State() openChildMenuItem: IKritzelMenuItem = null;\r\n  @State() newWorkspace: KritzelWorkspace | null = null;\r\n  @State() editingItemId: string | null = null;\r\n\r\n  kritzelEngineRef: HTMLKritzelEngineElement | null = null;\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\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.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngineRef) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n    if (this.editingItemId) {\r\n      return;\r\n    }\r\n\r\n    if (item.action) {\r\n      item.action(item, parent);\r\n      return;\r\n    }\r\n\r\n    this.workspaceChange.emit(item.value);\r\n  }\r\n\r\n  private async add() {\r\n    await this.splitButtonRef.open();\r\n    this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n    this.editingItemId = this.newWorkspace.id;\r\n  }\r\n\r\n  private edit(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n    requestAnimationFrame(() => {\r\n      this.editingItemId = item.id;\r\n    });\r\n  }\r\n\r\n  private async save(item: IKritzelMenuItem) {\r\n    if (this.newWorkspace) {\r\n      this.newWorkspace.name = item.label;\r\n      await this.kritzelEngineRef.createWorkspace(this.newWorkspace);\r\n      this.workspaceChange.emit(this.newWorkspace);\r\n    } else {\r\n      const workspace = item.value;\r\n      workspace.name = item.label;\r\n      await this.kritzelEngineRef.updateWorkspace(workspace);\r\n    }\r\n\r\n    this.editingItemId = null;\r\n    this.newWorkspace = null;\r\n  }\r\n\r\n  private cancel() {\r\n    this.newWorkspace = null;\r\n    this.editingItemId = null;\r\n  }\r\n\r\n  private async delete(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n\r\n    await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n\r\n    if (item.value.id === this.activeWorkspace?.id) {\r\n      this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;\r\n      this.workspaceChange.emit(this.activeWorkspace);\r\n    }\r\n\r\n    await this.splitButtonRef.focusMenu();\r\n  }\r\n\r\n  private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n    this.openChildMenuItem = item;\r\n    this.childMenuAnchor = anchor;\r\n  }\r\n\r\n  private closeChildMenu() {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n  }\r\n\r\n  private handleMenuOpen() {\r\n    this.kritzelEngineRef.disable();\r\n  }\r\n\r\n  private handleMenuClose() {\r\n    this.cancel();\r\n    this.closeChildMenu();\r\n    this.kritzelEngineRef.enable();\r\n  }\r\n\r\n  render() {\r\n    const menuItems = this.sortedWorkspaces\r\n      .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n      .filter(ws => ws !== null)\r\n      .map(ws => {\r\n        return {\r\n          id: ws.id,\r\n          label: ws.name,\r\n          value: ws,\r\n          isEditing: this.editingItemId === ws.id,\r\n          isSelected: this.activeWorkspace?.id === ws.id,\r\n          isNewItem: this.newWorkspace?.id === ws.id,\r\n          isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n          childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n          children: [\r\n            {\r\n              id: `${ws.id}-rename`,\r\n              label: 'Rename',\r\n              value: 'rename',\r\n              action: (_item, parent) => this.edit(parent),\r\n            },\r\n            {\r\n              id: `${ws.id}-delete`,\r\n              label: 'Delete',\r\n              value: 'delete',\r\n              isDisabled: this.sortedWorkspaces.length <= 1,\r\n              action: (_item, parent) => this.delete(parent),\r\n            },\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          items={menuItems}\r\n          mainButtonDisabled={this.editingItemId != null}\r\n          onMainButtonClick={() => this.add()}\r\n          onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n          onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n          onItemSave={event => this.save(event.detail)}\r\n          onItemCancel={() => this.cancel()}\r\n          onItemCloseChildMenu={() => this.closeChildMenu()}\r\n          onMenuOpen={() => this.handleMenuOpen()}\r\n          onMenuClose={() => this.handleMenuClose()}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-C6qB08BS.js

@@ -0,0 +1,68 @@
+class KritzelHTMLHelper {
+    static getNumericValueFromStyle(element, property) {
+        const value = window.getComputedStyle(element).getPropertyValue(property);
+        return parseFloat(value) || 0;
+    }
+    static getScrollableParent(element) {
+        if (!element) {
+            return window;
+        }
+        const parent = element.parentNode?.host ?? element.parentElement;
+        if (!parent || parent.tagName === 'BODY') {
+            return window;
+        }
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+            return parent;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
+    static 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;
+        };
+        const find = (element) => {
+            // Check if the element itself is focusable
+            if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {
+                focusableElements.push(element);
+            }
+            // Traverse shadow DOM
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.children).forEach(find);
+            }
+            // Traverse slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(find);
+            }
+            // Traverse light DOM children if there is no shadow root
+            if (!element.shadowRoot) {
+                Array.from(element.children).forEach(find);
+            }
+        };
+        find(root);
+        return focusableElements;
+    }
+}
+
+export { KritzelHTMLHelper as K };
+//# sourceMappingURL=p-C6qB08BS.js.map
+
+//# sourceMappingURL=p-C6qB08BS.js.map

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

@@ -0,0 +1 @@
+{"file":"p-C6qB08BS.js","mappings":"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","names":[],"sources":["src/helpers/html.helper.ts"],"sourcesContent":["export class KritzelHTMLHelper {\r\n static getNumericValueFromStyle(element: HTMLElement, property: string): number {\r\n   const value = window.getComputedStyle(element).getPropertyValue(property);\r\n   return parseFloat(value) || 0;\r\n }\r\n\r\n static getScrollableParent(element: HTMLElement): HTMLElement | Window {\r\n    if (!element) {\r\n      return window;\r\n    }\r\n\r\n    const parent = ((element.parentNode as ShadowRoot)?.host as HTMLElement) ?? element.parentElement;\r\n\r\n    if (!parent || parent.tagName === 'BODY') {\r\n      return window;\r\n    }\r\n\r\n    const style = window.getComputedStyle(parent);\r\n    if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {\r\n      return parent;\r\n    }\r\n\r\n    return this.getScrollableParent(parent);\r\n  }\r\n\r\n  static isElementInViewport(element: HTMLElement): boolean {\r\n    if (!element) {\r\n      return false;\r\n    }\r\n\r\n    const scrollableParent = this.getScrollableParent(element);\r\n    const rect = element.getBoundingClientRect();\r\n\r\n    if (scrollableParent === window) {\r\n      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\r\n      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;\r\n\r\n      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;\r\n    }\r\n\r\n    const parentRect = (scrollableParent as HTMLElement).getBoundingClientRect();\r\n\r\n    return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;\r\n  }\r\n\r\n  static getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n      if (!root) return [];\r\n  \r\n      const focusableElements: HTMLElement[] = [];\r\n      const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n  \r\n      const isVisible = (el: HTMLElement) => {\r\n        return el.offsetParent !== null;\r\n      };\r\n  \r\n      const find = (element: Element) => {\r\n        // Check if the element itself is focusable\r\n        if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {\r\n          focusableElements.push(element);\r\n        }\r\n  \r\n        // Traverse shadow DOM\r\n        if (element.shadowRoot) {\r\n          Array.from(element.shadowRoot.children).forEach(find);\r\n        }\r\n  \r\n        // Traverse slotted content\r\n        if (element.tagName === 'SLOT') {\r\n          (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(find);\r\n        }\r\n  \r\n        // Traverse light DOM children if there is no shadow root\r\n        if (!element.shadowRoot) {\r\n          Array.from(element.children).forEach(find);\r\n        }\r\n      };\r\n  \r\n      find(root);\r\n  \r\n      return focusableElements;\r\n    }\r\n}"],"version":3}