npm - kritzel-stencil - Versions diffs - 0.0.162 → 0.0.163 - Mend

kritzel-stencil 0.0.162 → 0.0.163

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/dist/components/{p-CkD1PQQX.js → p-I3iPEDpx.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
-import { d as defineCustomElement$5 } from './p-BixlbUD7.js';
-import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-DZ7kxJUx.js';
+import { d as defineCustomElement$5 } from './p-Cv4BGNPb.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-DguzZn_x.js';
 import { d as defineCustomElement$2 } from './p-OFrACpZf.js';
-import { d as defineCustomElement$1 } from './p-7_lwv0zQ.js';
+import { d as defineCustomElement$1 } from './p-BuS7MM1j.js';
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
@@ -196,6 +196,6 @@ function defineCustomElement() {
 }
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-CkD1PQQX.js.map
+//# sourceMappingURL=p-I3iPEDpx.js.map
-//# sourceMappingURL=p-CkD1PQQX.js.map
+//# sourceMappingURL=p-I3iPEDpx.js.map

package/dist/components/{p-CkD1PQQX.js.map → p-I3iPEDpx.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CkD1PQQX.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, Listen } 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({ mutable: true }) 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 @Listen('wheel', { target: 'window', passive: false })\r\n handleWheel(event: WheelEvent) {\r\n if(event.ctrlKey){\r\n event.preventDefault();\r\n }\r\n }\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}
1	+ {"file":"p-I3iPEDpx.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, Listen } 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({ mutable: true }) 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 @Listen('wheel', { target: 'window', passive: false })\r\n handleWheel(event: WheelEvent) {\r\n if(event.ctrlKey){\r\n event.preventDefault();\r\n }\r\n }\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-DKwJJuFb.js → p-tp96UZ0l.js} RENAMED Viewed

@@ -1,20 +1,20 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { b as KritzelBrushTool, c as KritzelTextTool } from './p-sokRZ7Vn.js';
+import { b as KritzelBrushTool, c as KritzelTextTool } from './p-Dz2XHHqa.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$c } from './p-LAsVgL2e.js';
 import { d as defineCustomElement$b } from './p-Brd9SxWS.js';
-import { d as defineCustomElement$a } from './p-CDteBYm9.js';
-import { d as defineCustomElement$9 } from './p-Cqr0Bah5.js';
+import { d as defineCustomElement$a } from './p-D8L0t-Ro.js';
+import { d as defineCustomElement$9 } from './p-5OECjGHq.js';
 import { d as defineCustomElement$8 } from './p-BdwB-S9G.js';
 import { d as defineCustomElement$7 } from './p-Ck4lGnmt.js';
 import { d as defineCustomElement$6 } from './p-CFH6XRL5.js';
 import { d as defineCustomElement$5 } from './p-B6r22FSC.js';
-import { d as defineCustomElement$4 } from './p-BixlbUD7.js';
+import { d as defineCustomElement$4 } from './p-Cv4BGNPb.js';
 import { d as defineCustomElement$3 } from './p-CRGwaUcp.js';
 import { d as defineCustomElement$2 } from './p-9Fzdviju.js';
-import { d as defineCustomElement$1 } from './p-CvLFRlQU.js';
+import { d as defineCustomElement$1 } from './p-BSBMBjhq.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;background:none;cursor:var(--kritzel-pointer-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:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-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:var(--kritzel-pointer-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 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;background:none;cursor:var(--kritzel-pointer-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-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;background:var(--kritzel-controls-background-color, #ffffff);border-radius:12px;padding:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #ebebeb;z-index:10001;min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-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:var(--kritzel-pointer-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) {
@@ -34,17 +34,24 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
     firstConfig = null;
     isTooltipVisible = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    selectedSubOptions = new Map();
+    openSubMenuControl = null;
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
             return;
         }
         this.isTooltipVisible = false;
+        // Close submenu when clicking outside
+        if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {
+            this.openSubMenuControl = null;
+        }
     }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
             this.closeTooltip();
+            this.openSubMenuControl = null;
             this.kritzelEngine?.enable();
         }
     }
@@ -120,36 +127,91 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         this.isTooltipVisible = false;
         this.kritzelEngine?.enable();
     }
+    /**
+     * Get the currently selected sub-option for a control.
+     * Returns the first sub-option as default if none is selected.
+     */
+    getSelectedSubOption(control) {
+        if (!control.subOptions?.length)
+            return undefined;
+        return this.selectedSubOptions.get(control.name) || control.subOptions[0];
+    }
+    /**
+     * Toggle the submenu for a split-button control
+     */
+    toggleSubMenu(event, control) {
+        event.stopPropagation();
+        if (this.openSubMenuControl?.name === control.name) {
+            this.openSubMenuControl = null;
+        }
+        else {
+            this.openSubMenuControl = control;
+        }
+    }
+    /**
+     * Select a sub-option and update the tool property
+     */
+    async selectSubOption(control, option) {
+        // Update the selected sub-options map (create new Map for reactivity)
+        const newMap = new Map(this.selectedSubOptions);
+        newMap.set(control.name, option);
+        this.selectedSubOptions = newMap;
+        // Update the tool property if the tool is instantiated
+        if (control.tool && typeof control.tool !== 'function') {
+            control.tool[option.toolProperty] = option.value;
+        }
+        // Close the submenu
+        this.openSubMenuControl = null;
+        // Activate this control
+        await this.handleControlClick(control);
+    }
     render() {
-        const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (h(Host, { key: 'c01351cbf438f2e36249b2ef3ef8725edcabd57b', class: {
+        const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
+            this.activeControl?.tool instanceof KritzelTextTool;
+        return (h(Host, { key: '34a8a81224f1714a30a0d6e03fb81ed031fe36a0', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '3c14cf25dd51f123dc8d33be92992e2f2c18ac40', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8ddfe7b4872d59b08b0561dbd61c67b9c245dcc9', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '05719acfe12d1770bf49fb7d9989619f2e27ee0f', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '370229830b9a6c0ae5704d9fb0ce35d130fcf049', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
+                // Check if this control has sub-options (split-button)
+                if (control.subOptions?.length) {
+                    const selectedSubOption = this.getSelectedSubOption(control);
+                    const isActive = this.activeControl?.name === control.name;
+                    const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
+                    return (h("div", { class: {
+                            'kritzel-control-split': true,
+                            'selected': isActive,
+                        }, key: control.name }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                            'kritzel-control-dropdown': true,
+                            'visible': isActive,
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), isSubMenuOpen && (h("div", { class: "kritzel-submenu" }, control.subOptions.map(option => (h("button", { class: {
+                            'kritzel-submenu-item': true,
+                            'active': option.id === selectedSubOption?.id,
+                        }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
+                }
+                // Regular tool control (no sub-options)
                 return (h("button", { class: {
                         'kritzel-control': true,
                         '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 === 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 => {
+                return (h("div", { class: {
+                        'kritzel-config-container': true,
+                        'visible': hasConfigUI,
+                    }, 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: hasConfigUI ? 0 : -1, 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',
+                        cursor: 'pointer',
                     } }, 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: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.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 }))))));
             }
         }))));
     }
@@ -163,6 +225,8 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         "firstConfig": [32],
         "isTooltipVisible": [32],
         "isTouchDevice": [32],
+        "selectedSubOptions": [32],
+        "openSubMenuControl": [32],
         "closeTooltip": [64]
     }, [[4, "click", "handleDocumentClick"], [8, "keydown", "handleKeyDown"], [4, "activeToolChange", "handleActiveToolChange"]]]);
 function defineCustomElement() {
@@ -240,6 +304,6 @@ function defineCustomElement() {
 }
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-DKwJJuFb.js.map
+//# sourceMappingURL=p-tp96UZ0l.js.map
-//# sourceMappingURL=p-DKwJJuFb.js.map
+//# sourceMappingURL=p-tp96UZ0l.js.map

package/dist/components/p-tp96UZ0l.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-tp96UZ0l.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 background: none;\r\n cursor: var(--kritzel-pointer-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\r\n/* Split-button control styles */\r\n.kritzel-control-split {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n color: var(--kritzel-controls-control-color, #000000);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--kritzel-controls-control-padding, 8px);\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n color: inherit;\r\n}\r\n\r\n/* When selected, main button only has left-rounded corners (dropdown appears on right) */\r\n.kritzel-control-split.selected .kritzel-control-main {\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n align-self: stretch;\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n border-radius: 0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;\r\n color: inherit;\r\n \r\n /* Hidden state - collapsed with no visibility */\r\n width: 0;\r\n padding: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n \r\n /* Smooth transition */\r\n transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown.visible {\r\n width: auto;\r\n padding: 0 6px;\r\n opacity: 1;\r\n pointer-events: auto;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:focus,\r\n.kritzel-control-split .kritzel-control-main:hover,\r\n.kritzel-control-split .kritzel-control-dropdown:focus,\r\n.kritzel-control-split .kritzel-control-dropdown: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-split .kritzel-control-main:active,\r\n.kritzel-control-split .kritzel-control-dropdown: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-split.selected {\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-split.selected .kritzel-control-main:hover,\r\n.kritzel-control-split.selected .kritzel-control-dropdown:hover {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n/* Submenu styles */\r\n.kritzel-submenu {\r\n position: absolute;\r\n bottom: calc(100% + 8px);\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--kritzel-controls-background-color, #ffffff);\r\n border-radius: 12px;\r\n padding: 6px;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n border: 1px solid #ebebeb;\r\n z-index: 10001;\r\n min-width: 140px;\r\n}\r\n\r\n.kritzel-submenu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 12px;\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border-radius: 8px;\r\n color: var(--kritzel-controls-control-color, #000000);\r\n font-size: 14px;\r\n text-align: left;\r\n white-space: nowrap;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-submenu-item: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-submenu-item.active {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n color: var(--kritzel-controls-control-selected-color, #ffffff);\r\n}\r\n\r\n.kritzel-submenu-item.active:hover {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n}\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 height: 40px;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n \r\n /* Hidden state - collapsed */\r\n width: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n margin-left: calc(-1 * var(--kritzel-controls-gap, 8px));\r\n \r\n /* Smooth transition */\r\n transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;\r\n}\r\n\r\n.kritzel-config-container.visible {\r\n width: 40px;\r\n opacity: 1;\r\n pointer-events: auto;\r\n margin-left: 0;\r\n}\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: var(--kritzel-pointer-cursor, pointer);\r\n border-radius: 50%;\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: var(--kritzel-pointer-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: var(--kritzel-pointer-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, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\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 @Prop() undoState: KritzelUndoState = null;\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 @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n @State() openSubMenuControl: KritzelToolbarControl | null = null;\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 // Close submenu when clicking outside\r\n if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {\r\n this.openSubMenuControl = null;\r\n }\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.openSubMenuControl = null;\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 /**\r\n * Get the currently selected sub-option for a control.\r\n * Returns the first sub-option as default if none is selected.\r\n */\r\n private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption | undefined {\r\n if (!control.subOptions?.length) return undefined;\r\n return this.selectedSubOptions.get(control.name) || control.subOptions[0];\r\n }\r\n\r\n /**\r\n * Toggle the submenu for a split-button control\r\n */\r\n private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n event.stopPropagation();\r\n if (this.openSubMenuControl?.name === control.name) {\r\n this.openSubMenuControl = null;\r\n } else {\r\n this.openSubMenuControl = control;\r\n }\r\n }\r\n\r\n /**\r\n * Select a sub-option and update the tool property\r\n */\r\n private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n // Update the selected sub-options map (create new Map for reactivity)\r\n const newMap = new Map(this.selectedSubOptions);\r\n newMap.set(control.name, option);\r\n this.selectedSubOptions = newMap;\r\n\r\n // Update the tool property if the tool is instantiated\r\n if (control.tool && typeof control.tool !== 'function') {\r\n (control.tool as any)[option.toolProperty] = option.value;\r\n }\r\n\r\n // Close the submenu\r\n this.openSubMenuControl = null;\r\n\r\n // Activate this control\r\n await this.handleControlClick(control);\r\n }\r\n\r\n render() {\r\n const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool || \r\n this.activeControl?.tool instanceof KritzelTextTool;\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 undoState={this.undoState}\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 // Check if this control has sub-options (split-button)\r\n if (control.subOptions?.length) {\r\n const selectedSubOption = this.getSelectedSubOption(control);\r\n const isActive = this.activeControl?.name === control.name;\r\n const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n return (\r\n <div\r\n class={{\r\n 'kritzel-control-split': true,\r\n 'selected': isActive,\r\n }}\r\n key={control.name}\r\n >\r\n <button\r\n class=\"kritzel-control-main\"\r\n onClick={() => this.handleControlClick(control)}\r\n title={selectedSubOption?.label}\r\n >\r\n <kritzel-icon name={selectedSubOption?.icon || control.icon}></kritzel-icon>\r\n </button>\r\n <button\r\n class={{\r\n 'kritzel-control-dropdown': true,\r\n 'visible': isActive,\r\n }}\r\n onClick={(e) => this.toggleSubMenu(e, control)}\r\n aria-label=\"Select shape type\"\r\n aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n tabIndex={isActive ? 0 : -1}\r\n >\r\n <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n </button>\r\n\r\n {isSubMenuOpen && (\r\n <div class=\"kritzel-submenu\">\r\n {control.subOptions.map(option => (\r\n <button\r\n class={{\r\n 'kritzel-submenu-item': true,\r\n 'active': option.id === selectedSubOption?.id,\r\n }}\r\n key={option.id}\r\n onClick={() => this.selectSubOption(control, option)}\r\n >\r\n <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n <span>{option.label}</span>\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Regular tool control (no sub-options)\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 === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div \r\n class={{\r\n 'kritzel-config-container': true,\r\n 'visible': hasConfigUI,\r\n }}\r\n key={control.name}\r\n >\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={hasConfigUI ? 0 : -1}\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: 'pointer',\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 </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}