npm - kritzel-stencil - Versions diffs - 0.0.134 → 0.0.135 - Mend

kritzel-stencil 0.0.134 → 0.0.135

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 (37) hide show

package/dist/components/kritzel-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kritzel-editor.js","mappings":"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","names":["KritzelEditor","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/configs/default-brush-tool.config.ts","src/configs/default-text-tool.config.ts","src/components/core/kritzel-editor/kritzel-editor.css?tag=kritzel-editor","src/components/core/kritzel-editor/kritzel-editor.tsx"],"sourcesContent":["import { KritzelBrushToolConfig } from '../interfaces/toolbar-control.interface';\r\n\r\nexport const DEFAULT_BRUSH_CONFIG: KritzelBrushToolConfig = {\r\n type: 'pen',\r\n color: '#000000',\r\n size: 16,\r\n palettes: {\r\n pen: [\r\n '#000000',\r\n '#ff5252',\r\n '#ffbc00',\r\n '#00c853',\r\n '#0000FF',\r\n '#d500f9',\r\n '#fafafa',\r\n '#a52714',\r\n '#ee8100',\r\n '#558b2f',\r\n '#01579b',\r\n '#8e24aa',\r\n '#90a4ae',\r\n '#ff4081',\r\n '#ff6e40',\r\n '#aeea00',\r\n '#304ffe',\r\n '#7c4dff',\r\n '#cfd8dc',\r\n '#f8bbd0',\r\n '#ffccbc',\r\n '#f0f4c3',\r\n '#9fa8da',\r\n '#d1c4e9',\r\n ],\r\n highlighter: [\r\n '#0000006e',\r\n '#ff52526e',\r\n '#ffbb006e',\r\n '#00c8536e',\r\n '#0000FF6e',\r\n '#d500f96e',\r\n '#fafafa6e',\r\n '#a527146e',\r\n '#ee81006e',\r\n '#558b2f6e',\r\n '#01579b6e',\r\n '#8e24aa6e',\r\n '#90a4ae6e',\r\n '#ff40816e',\r\n '#ff6e406e',\r\n '#aeea006e',\r\n '#304ffe6e',\r\n '#7c4dff6e',\r\n '#cfd8dc6e',\r\n '#f8bbd06e',\r\n '#ffccbc6e',\r\n '#f0f4c36e',\r\n '#9fa8da6e',\r\n '#d1c4e96e',\r\n ],\r\n },\r\n};\r\n\r\n\r\n","import { KritzelTextToolConfig } from \"../interfaces/toolbar-control.interface\";\r\n\r\nexport const DEFAULT_TEXT_CONFIG: KritzelTextToolConfig = {\r\n color: '#000000',\r\n size: 8,\r\n fontFamily: 'Arial',\r\n palette: [\r\n '#000000',\r\n '#ff5252',\r\n '#ffbc00',\r\n '#00c853',\r\n '#0000FF',\r\n '#d500f9',\r\n '#fafafa',\r\n '#a52714',\r\n '#ee8100',\r\n '#558b2f',\r\n '#01579b',\r\n '#8e24aa',\r\n '#90a4ae',\r\n '#ff4081',\r\n '#ff6e40',\r\n '#aeea00',\r\n '#304ffe',\r\n '#7c4dff',\r\n '#cfd8dc',\r\n '#f8bbd0',\r\n '#ffccbc',\r\n '#f0f4c3',\r\n '#9fa8da',\r\n '#d1c4e9',\r\n ],\r\n};","kritzel-editor{\r\n display: flex;\r\n margin: 0;\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n touch-action: manipulation;\r\n user-select: none;\r\n -webkit-touch-callout: none;\r\n -webkit-user-select: none;\r\n -khtml-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none; \r\n}\r\n\r\nkritzel-workspace-manager {\r\n position: absolute;\r\n top: var(--kritzel-editor-workspace-manager-top, 14px);\r\n left: var(--kritzel-editor-workspace-manager-left, 14px);\r\n}\r\n\r\nkritzel-controls {\r\n position: absolute;\r\n bottom: var(--kritzel-editor-controls-bottom, 14px);\r\n transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);\r\n}\r\n\r\nkritzel-controls.keyboard-open {\r\n transform: var(--kritzel-editor-controls-transform, translateY(300%));\r\n}","import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\nimport { KritzelSelectionTool } from '../../../classes/tools/selection-tool.class';\r\nimport { KritzelEraserTool } from '../../../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../../../classes/tools/image-tool.class';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { DEFAULT_BRUSH_CONFIG } from '../../../configs/default-brush-tool.config';\r\nimport { DEFAULT_TEXT_CONFIG } from '../../../configs/default-text-tool.config';\r\nimport { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';\r\nimport { KritzelEngineState } from '../../../interfaces/engine-state.interface';\r\nimport { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { KritzelKeyboardHelper } from '../../../helpers/keyboard.helper';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n@Component({\r\n tag: 'kritzel-editor',\r\n styleUrl: 'kritzel-editor.css',\r\n shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop() scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n @Prop() scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n @Prop() controls: KritzelToolbarControl[] = [\r\n {\r\n name: 'selection',\r\n type: 'tool',\r\n tool: KritzelSelectionTool,\r\n icon: 'cursor',\r\n },\r\n {\r\n name: 'brush',\r\n type: 'tool',\r\n tool: KritzelBrushTool,\r\n icon: 'pen',\r\n isDefault: true,\r\n config: DEFAULT_BRUSH_CONFIG,\r\n },\r\n {\r\n name: 'eraser',\r\n type: 'tool',\r\n tool: KritzelEraserTool,\r\n icon: 'eraser',\r\n },\r\n {\r\n name: 'text',\r\n type: 'tool',\r\n tool: KritzelTextTool,\r\n icon: 'type',\r\n config: DEFAULT_TEXT_CONFIG,\r\n },\r\n {\r\n name: 'image',\r\n type: 'tool',\r\n tool: KritzelImageTool,\r\n icon: 'image',\r\n },\r\n {\r\n name: 'divider',\r\n type: 'divider',\r\n },\r\n {\r\n name: 'config',\r\n type: 'config',\r\n },\r\n ];\r\n\r\n @Prop() globalContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: menu => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n ];\r\n\r\n @Prop() objectContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Edit',\r\n icon: 'pen',\r\n visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n action: (_, objects) => {\r\n if (objects.length === 1) {\r\n const object = objects[0];\r\n if (object.isEditable) {\r\n object.edit();\r\n }\r\n }\r\n },\r\n },\r\n { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\r\n { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n ];\r\n\r\n @Prop() customSvgIcons: Record<string, string> = {};\r\n @Prop() isControlsVisible: boolean = true;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n\r\n @Event() isReady: EventEmitter<HTMLElement>;\r\n\r\n @State() isEngineReady: boolean = false;\r\n @State() isControlsReady: boolean = false;\r\n @State() isWorkspaceManagerReady: boolean = false;\r\n @State() workspaces: KritzelWorkspace[] = [];\r\n @State() activeWorkspace: KritzelWorkspace;\r\n @State() isVirtualKeyboardOpen: boolean = false;\r\n\r\n @Watch('isEngineReady')\r\n onIsEngineReady(newValue: boolean) {\r\n if (newValue && this.isControlsReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Watch('isControlsReady')\r\n onIsControlsReady(newValue: boolean) {\r\n if (newValue && this.isEngineReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n handleTouchStart(event: MouseEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n @Method()\r\n async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T \| null> {\r\n return this.engineRef.getObjectById(id);\r\n }\r\n\r\n @Method()\r\n async addObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.addObject(object);\r\n }\r\n\r\n @Method()\r\n async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T \| null> {\r\n return this.engineRef.updateObject(object, updatedProperties);\r\n }\r\n\r\n @Method()\r\n async removeObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.removeObject(object);\r\n }\r\n\r\n @Method()\r\n async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n return this.engineRef.getSelectedObjects();\r\n }\r\n\r\n @Method()\r\n async selectObjects(objects: KritzelBaseObject[]) {\r\n return this.engineRef.selectObjects(objects);\r\n }\r\n\r\n @Method()\r\n async selectAllObjectsInViewport() {\r\n return this.engineRef.selectAllObjectsInViewport();\r\n }\r\n\r\n @Method()\r\n async clearSelection() {\r\n this.engineRef.clearSelection();\r\n }\r\n\r\n @Method()\r\n async centerObjectInViewport(object: KritzelBaseObject) {\r\n return this.engineRef.centerObjectInViewport(object);\r\n }\r\n\r\n @Method()\r\n async createWorkspace(name: string, viewport?: { translateX: number; translateY: number; scale: number }): Promise<KritzelWorkspace \| null> {\r\n const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);\r\n return this.engineRef.createWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async updateWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.updateWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async deleteWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.deleteWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async getWorkspaces(): Promise<KritzelWorkspace[]> {\r\n return this.engineRef.getWorkspaces();\r\n }\r\n\r\n @Method()\r\n async getActiveWorkspace(): Promise<KritzelWorkspace> {\r\n return this.engineRef.getActiveWorkspace();\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n controlsRef!: HTMLKritzelControlsElement;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n this.listenForMobileKeyboard();\r\n this.setOsSpecificCssVariables();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-workspace-manager');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady \|\| !this.isControlsReady \|\| !this.isWorkspaceManagerReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n onEngineReady(event: CustomEvent<KritzelEngineState>) {\r\n this.isEngineReady = true;\r\n this.activeWorkspace = event.detail.activeWorkspace;\r\n this.workspaces = event.detail.workspaces;\r\n }\r\n\r\n private registerCustomSvgIcons() {\r\n for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n KritzelIconRegistry.register(name, svg);\r\n }\r\n }\r\n\r\n private listenForMobileKeyboard() {\r\n KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {\r\n this.isVirtualKeyboardOpen = isOpen;\r\n });\r\n }\r\n\r\n private setOsSpecificCssVariables() {\r\n const os = KritzelDevicesHelper.detectOS();\r\n\r\n switch (os) {\r\n case 'iOS':\r\n // iOS specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');\r\n break;\r\n\r\n case 'Android':\r\n // Android specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');\r\n break;\r\n\r\n default:\r\n // Default for Windows/Linux\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n break;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-workspace-manager\r\n workspaces={this.workspaces}\r\n activeWorkspace={this.activeWorkspace}\r\n onWorkspaceChange={event => (this.activeWorkspace = event.detail)}\r\n onIsWorkspaceManagerReady={() => (this.isWorkspaceManagerReady = true)}\r\n ></kritzel-workspace-manager>\r\n\r\n <kritzel-engine\r\n ref={el => (this.engineRef = el)}\r\n workspace={this.activeWorkspace}\r\n scaleMax={this.scaleMax}\r\n scaleMin={this.scaleMin}\r\n globalContextMenuItems={this.globalContextMenuItems}\r\n objectContextMenuItems={this.objectContextMenuItems}\r\n onIsEngineReady={event => this.onEngineReady(event)}\r\n onWorkspacesChange={event => (this.workspaces = event.detail)}\r\n ></kritzel-engine>\r\n\r\n <kritzel-controls\r\n class={{ 'keyboard-open': this.isVirtualKeyboardOpen }}\r\n style={{ display: this.isControlsVisible ? 'flex' : 'none' }}\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n onIsControlsReady={() => (this.isControlsReady = true)}\r\n ></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"kritzel-editor.js","mappings":"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","names":["KritzelEditor","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/configs/default-brush-tool.config.ts","src/configs/default-text-tool.config.ts","src/components/core/kritzel-editor/kritzel-editor.css?tag=kritzel-editor","src/components/core/kritzel-editor/kritzel-editor.tsx"],"sourcesContent":["import { KritzelBrushToolConfig } from '../interfaces/toolbar-control.interface';\r\n\r\nexport const DEFAULT_BRUSH_CONFIG: KritzelBrushToolConfig = {\r\n type: 'pen',\r\n color: '#000000',\r\n size: 16,\r\n palettes: {\r\n pen: [\r\n '#000000',\r\n '#ff5252',\r\n '#ffbc00',\r\n '#00c853',\r\n '#0000FF',\r\n '#d500f9',\r\n '#fafafa',\r\n '#a52714',\r\n '#ee8100',\r\n '#558b2f',\r\n '#01579b',\r\n '#8e24aa',\r\n '#90a4ae',\r\n '#ff4081',\r\n '#ff6e40',\r\n '#aeea00',\r\n '#304ffe',\r\n '#7c4dff',\r\n '#cfd8dc',\r\n '#f8bbd0',\r\n '#ffccbc',\r\n '#f0f4c3',\r\n '#9fa8da',\r\n '#d1c4e9',\r\n ],\r\n highlighter: [\r\n '#0000006e',\r\n '#ff52526e',\r\n '#ffbb006e',\r\n '#00c8536e',\r\n '#0000FF6e',\r\n '#d500f96e',\r\n '#fafafa6e',\r\n '#a527146e',\r\n '#ee81006e',\r\n '#558b2f6e',\r\n '#01579b6e',\r\n '#8e24aa6e',\r\n '#90a4ae6e',\r\n '#ff40816e',\r\n '#ff6e406e',\r\n '#aeea006e',\r\n '#304ffe6e',\r\n '#7c4dff6e',\r\n '#cfd8dc6e',\r\n '#f8bbd06e',\r\n '#ffccbc6e',\r\n '#f0f4c36e',\r\n '#9fa8da6e',\r\n '#d1c4e96e',\r\n ],\r\n },\r\n};\r\n\r\n\r\n","import { KritzelTextToolConfig } from \"../interfaces/toolbar-control.interface\";\r\n\r\nexport const DEFAULT_TEXT_CONFIG: KritzelTextToolConfig = {\r\n color: '#000000',\r\n size: 8,\r\n fontFamily: 'Arial',\r\n palette: [\r\n '#000000',\r\n '#ff5252',\r\n '#ffbc00',\r\n '#00c853',\r\n '#0000FF',\r\n '#d500f9',\r\n '#fafafa',\r\n '#a52714',\r\n '#ee8100',\r\n '#558b2f',\r\n '#01579b',\r\n '#8e24aa',\r\n '#90a4ae',\r\n '#ff4081',\r\n '#ff6e40',\r\n '#aeea00',\r\n '#304ffe',\r\n '#7c4dff',\r\n '#cfd8dc',\r\n '#f8bbd0',\r\n '#ffccbc',\r\n '#f0f4c3',\r\n '#9fa8da',\r\n '#d1c4e9',\r\n ],\r\n};","kritzel-editor{\r\n display: flex;\r\n margin: 0;\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n touch-action: manipulation;\r\n user-select: none;\r\n -webkit-touch-callout: none;\r\n -webkit-user-select: none;\r\n -khtml-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none; \r\n}\r\n\r\nkritzel-workspace-manager {\r\n position: absolute;\r\n top: var(--kritzel-editor-workspace-manager-top, 14px);\r\n left: var(--kritzel-editor-workspace-manager-left, 14px);\r\n}\r\n\r\nkritzel-controls {\r\n position: absolute;\r\n bottom: var(--kritzel-editor-controls-bottom, 14px);\r\n transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);\r\n}\r\n\r\nkritzel-controls.keyboard-open {\r\n transform: var(--kritzel-editor-controls-transform, translateY(300%));\r\n}","import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\nimport { KritzelSelectionTool } from '../../../classes/tools/selection-tool.class';\r\nimport { KritzelEraserTool } from '../../../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../../../classes/tools/image-tool.class';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { DEFAULT_BRUSH_CONFIG } from '../../../configs/default-brush-tool.config';\r\nimport { DEFAULT_TEXT_CONFIG } from '../../../configs/default-text-tool.config';\r\nimport { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';\r\nimport { KritzelEngineState } from '../../../interfaces/engine-state.interface';\r\nimport { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { KritzelKeyboardHelper } from '../../../helpers/keyboard.helper';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n@Component({\r\n tag: 'kritzel-editor',\r\n styleUrl: 'kritzel-editor.css',\r\n shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop() scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n @Prop() scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n @Prop() controls: KritzelToolbarControl[] = [\r\n {\r\n name: 'selection',\r\n type: 'tool',\r\n isDefault: true,\r\n tool: KritzelSelectionTool,\r\n icon: 'cursor',\r\n },\r\n {\r\n name: 'brush',\r\n type: 'tool',\r\n tool: KritzelBrushTool,\r\n icon: 'pen',\r\n config: DEFAULT_BRUSH_CONFIG,\r\n },\r\n {\r\n name: 'eraser',\r\n type: 'tool',\r\n tool: KritzelEraserTool,\r\n icon: 'eraser',\r\n },\r\n {\r\n name: 'text',\r\n type: 'tool',\r\n tool: KritzelTextTool,\r\n icon: 'type',\r\n config: DEFAULT_TEXT_CONFIG,\r\n },\r\n {\r\n name: 'image',\r\n type: 'tool',\r\n tool: KritzelImageTool,\r\n icon: 'image',\r\n },\r\n {\r\n name: 'divider',\r\n type: 'divider',\r\n },\r\n {\r\n name: 'config',\r\n type: 'config',\r\n },\r\n ];\r\n\r\n @Prop() globalContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: menu => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n ];\r\n\r\n @Prop() objectContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Edit',\r\n icon: 'pen',\r\n visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n action: (_, objects) => {\r\n if (objects.length === 1) {\r\n const object = objects[0];\r\n if (object.isEditable) {\r\n object.edit();\r\n }\r\n }\r\n },\r\n },\r\n { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },\r\n { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n ];\r\n\r\n @Prop() customSvgIcons: Record<string, string> = {};\r\n @Prop() isControlsVisible: boolean = true;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n\r\n @Event() isReady: EventEmitter<HTMLElement>;\r\n\r\n @State() isEngineReady: boolean = false;\r\n @State() isControlsReady: boolean = false;\r\n @State() isWorkspaceManagerReady: boolean = false;\r\n @State() workspaces: KritzelWorkspace[] = [];\r\n @State() activeWorkspace: KritzelWorkspace;\r\n @State() isVirtualKeyboardOpen: boolean = false;\r\n\r\n @Watch('isEngineReady')\r\n onIsEngineReady(newValue: boolean) {\r\n if (newValue && this.isControlsReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Watch('isControlsReady')\r\n onIsControlsReady(newValue: boolean) {\r\n if (newValue && this.isEngineReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n handleTouchStart(event: MouseEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n @Method()\r\n async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T \| null> {\r\n return this.engineRef.getObjectById(id);\r\n }\r\n\r\n @Method()\r\n async addObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.addObject(object);\r\n }\r\n\r\n @Method()\r\n async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T \| null> {\r\n return this.engineRef.updateObject(object, updatedProperties);\r\n }\r\n\r\n @Method()\r\n async removeObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.removeObject(object);\r\n }\r\n\r\n @Method()\r\n async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n return this.engineRef.getSelectedObjects();\r\n }\r\n\r\n @Method()\r\n async selectObjects(objects: KritzelBaseObject[]) {\r\n return this.engineRef.selectObjects(objects);\r\n }\r\n\r\n @Method()\r\n async selectAllObjectsInViewport() {\r\n return this.engineRef.selectAllObjectsInViewport();\r\n }\r\n\r\n @Method()\r\n async clearSelection() {\r\n this.engineRef.clearSelection();\r\n }\r\n\r\n @Method()\r\n async centerObjectInViewport(object: KritzelBaseObject) {\r\n return this.engineRef.centerObjectInViewport(object);\r\n }\r\n\r\n @Method()\r\n async createWorkspace(name: string, viewport?: { translateX: number; translateY: number; scale: number }): Promise<KritzelWorkspace \| null> {\r\n const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);\r\n return this.engineRef.createWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async updateWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.updateWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async deleteWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.deleteWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async getWorkspaces(): Promise<KritzelWorkspace[]> {\r\n return this.engineRef.getWorkspaces();\r\n }\r\n\r\n @Method()\r\n async getActiveWorkspace(): Promise<KritzelWorkspace> {\r\n return this.engineRef.getActiveWorkspace();\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n controlsRef!: HTMLKritzelControlsElement;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n this.listenForMobileKeyboard();\r\n this.setOsSpecificCssVariables();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-workspace-manager');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady \|\| !this.isControlsReady \|\| !this.isWorkspaceManagerReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n onEngineReady(event: CustomEvent<KritzelEngineState>) {\r\n this.isEngineReady = true;\r\n this.activeWorkspace = event.detail.activeWorkspace;\r\n this.workspaces = event.detail.workspaces;\r\n }\r\n\r\n private registerCustomSvgIcons() {\r\n for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n KritzelIconRegistry.register(name, svg);\r\n }\r\n }\r\n\r\n private listenForMobileKeyboard() {\r\n KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {\r\n this.isVirtualKeyboardOpen = isOpen;\r\n });\r\n }\r\n\r\n private setOsSpecificCssVariables() {\r\n const os = KritzelDevicesHelper.detectOS();\r\n\r\n switch (os) {\r\n case 'iOS':\r\n // iOS specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');\r\n break;\r\n\r\n case 'Android':\r\n // Android specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');\r\n break;\r\n\r\n default:\r\n // Default for Windows/Linux\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n break;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-workspace-manager\r\n workspaces={this.workspaces}\r\n activeWorkspace={this.activeWorkspace}\r\n onWorkspaceChange={event => (this.activeWorkspace = event.detail)}\r\n onIsWorkspaceManagerReady={() => (this.isWorkspaceManagerReady = true)}\r\n ></kritzel-workspace-manager>\r\n\r\n <kritzel-engine\r\n ref={el => (this.engineRef = el)}\r\n workspace={this.activeWorkspace}\r\n scaleMax={this.scaleMax}\r\n scaleMin={this.scaleMin}\r\n globalContextMenuItems={this.globalContextMenuItems}\r\n objectContextMenuItems={this.objectContextMenuItems}\r\n onIsEngineReady={event => this.onEngineReady(event)}\r\n onWorkspacesChange={event => (this.workspaces = event.detail)}\r\n ></kritzel-engine>\r\n\r\n <kritzel-controls\r\n class={{ 'keyboard-open': this.isVirtualKeyboardOpen }}\r\n style={{ display: this.isControlsVisible ? 'flex' : 'none' }}\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n onIsControlsReady={() => (this.isControlsReady = true)}\r\n ></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/kritzel-menu-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as KritzelMenuItem$1, b as defineCustomElement$1 } from './p-Dw4n-4zp.js';
+import { a as KritzelMenuItem$1, b as defineCustomElement$1 } from './p-C8wKLuRD.js';
 const KritzelMenuItem = KritzelMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-menu.js CHANGED Viewed

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

package/dist/components/kritzel-portal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-NP1Htol7.js';
+import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-DSSAcjs7.js';
 const KritzelPortal = KritzelPortal$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

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

package/dist/components/{p-CM8KdFZI.js → p-Bv28MOWN.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$4 } from './p-sq9jgfX0.js';
-import { b as defineCustomElement$2, d as defineCustomElement$3 } from './p-Dw4n-4zp.js';
-import { d as defineCustomElement$1 } from './p-NP1Htol7.js';
+import { b as defineCustomElement$2, d as defineCustomElement$3 } from './p-C8wKLuRD.js';
+import { d as defineCustomElement$1 } from './p-DSSAcjs7.js';
 const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
@@ -144,6 +144,6 @@ function defineCustomElement() {
 }
 export { KritzelSplitButton as K, defineCustomElement as d };
-//# sourceMappingURL=p-CM8KdFZI.js.map
+//# sourceMappingURL=p-Bv28MOWN.js.map
-//# sourceMappingURL=p-CM8KdFZI.js.map
+//# sourceMappingURL=p-Bv28MOWN.js.map

package/dist/components/{p-CM8KdFZI.js.map → p-Bv28MOWN.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CM8KdFZI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n font-family: sans-serif;\r\n z-index: 1;\r\n padding: var(--kritzel-split-button-padding, 4px);\r\n background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-split-button-border, 1px solid #ebebeb);\r\n gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n:host(.mobile){\r\n --kritzel-split-button-hover-background-color: transparent;\r\n}\r\n\r\nbutton {\r\n border: none;\r\n background-color: transparent;\r\n padding: 0;\r\n margin: 0;\r\n font-family: inherit;\r\n font-size: inherit;\r\n color: inherit;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n cursor: pointer;\r\n text-align: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: all;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.split-main-button,\r\n.split-menu-button {\r\n height: auto;\r\n display: flex;\r\n align-items: center;\r\n padding: var(--kritzel-split-button-padding, 8px);\r\n background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n font-size: var(--kritzel-split-button-font-size, 14px);\r\n}\r\n\r\n.split-main-button:hover,\r\n.split-menu-button:hover {\r\n background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button:focus,\r\n.split-menu-button:focus {\r\n outline: none;\r\n background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button {\r\n gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n.split-menu-button {\r\n border-left: none;\r\n justify-content: center;\r\n}\r\n\r\n.split-divider {\r\n width: var(--kritzel-split-button-divider-width, 1px);\r\n height: 24px;\r\n background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:disabled {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-split-button',\r\n styleUrl: 'kritzel-split-button.css',\r\n shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop() buttonIcon: string = 'plus';\r\n @Prop() dropdownIcon: string = 'chevron-down';\r\n @Prop() items: IKritzelMenuItem[] = [];\r\n @Prop() mainButtonDisabled = false;\r\n @Prop() menuButtonDisabled = false;\r\n\r\n @Event() mainButtonClick: EventEmitter<void>;\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n @Event() menuOpen: EventEmitter<void>;\r\n @Event() menuClose: EventEmitter<void>;\r\n\r\n @State() isMenuOpen = false;\r\n @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n @State() anchorElement: HTMLElement;\r\n\r\n splitMenuButtonRef: HTMLButtonElement;\r\n menuRef: HTMLKritzelMenuElement;\r\n\r\n @Method()\r\n async open() {\r\n if (this.isMenuOpen) return;\r\n this.isMenuOpen = true;\r\n this.anchorElement = this.host;\r\n this.menuOpen.emit();\r\n }\r\n\r\n @Method()\r\n async focusMenu() {\r\n if (this.menuRef) {\r\n await this.menuRef.setFocus();\r\n }\r\n }\r\n\r\n private handleButtonClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.mainButtonClick.emit();\r\n };\r\n\r\n private toggleMenu = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n if (this.isMenuOpen) {\r\n this.closeMenu();\r\n } else {\r\n this.openMenu(event);\r\n }\r\n };\r\n\r\n private openMenu = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.isMenuOpen = true;\r\n this.anchorElement = this.host;\r\n this.menuOpen.emit();\r\n };\r\n\r\n private closeMenu = () => {\r\n this.isMenuOpen = false;\r\n this.anchorElement = null;\r\n this.splitMenuButtonRef?.blur();\r\n this.menuClose.emit();\r\n };\r\n\r\n private handleItemSelect = event => {\r\n this.itemSelect.emit(event.detail);\r\n };\r\n\r\n private handleItemSave = event => {\r\n this.itemSave.emit(event.detail);\r\n };\r\n\r\n private handleItemCancel = event => {\r\n this.itemCancel.emit(event.detail);\r\n };\r\n\r\n private handleItemToggleChildMenu = event => {\r\n this.itemToggleChildMenu.emit(event.detail);\r\n };\r\n\r\n private handleItemCloseChildMenu = event => {\r\n this.itemCloseChildMenu.emit(event.detail);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ mobile: this.isTouchDevice }}>\r\n <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n </button>\r\n\r\n <div class=\"split-divider\"></div>\r\n\r\n <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n </button>\r\n\r\n <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n <kritzel-menu\r\n ref={el => (this.menuRef = el)}\r\n items={this.items}\r\n onItemSelect={this.handleItemSelect}\r\n onItemSave={this.handleItemSave}\r\n onItemCancel={this.handleItemCancel}\r\n onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n onClose={this.closeMenu}\r\n ></kritzel-menu>\r\n </kritzel-portal>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-Bv28MOWN.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n font-family: sans-serif;\r\n z-index: 1;\r\n padding: var(--kritzel-split-button-padding, 4px);\r\n background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-split-button-border, 1px solid #ebebeb);\r\n gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n:host(.mobile){\r\n --kritzel-split-button-hover-background-color: transparent;\r\n}\r\n\r\nbutton {\r\n border: none;\r\n background-color: transparent;\r\n padding: 0;\r\n margin: 0;\r\n font-family: inherit;\r\n font-size: inherit;\r\n color: inherit;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n cursor: pointer;\r\n text-align: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: all;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.split-main-button,\r\n.split-menu-button {\r\n height: auto;\r\n display: flex;\r\n align-items: center;\r\n padding: var(--kritzel-split-button-padding, 8px);\r\n background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n font-size: var(--kritzel-split-button-font-size, 14px);\r\n}\r\n\r\n.split-main-button:hover,\r\n.split-menu-button:hover {\r\n background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button:focus,\r\n.split-menu-button:focus {\r\n outline: none;\r\n background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button {\r\n gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n.split-menu-button {\r\n border-left: none;\r\n justify-content: center;\r\n}\r\n\r\n.split-divider {\r\n width: var(--kritzel-split-button-divider-width, 1px);\r\n height: 24px;\r\n background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:disabled {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-split-button',\r\n styleUrl: 'kritzel-split-button.css',\r\n shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop() buttonIcon: string = 'plus';\r\n @Prop() dropdownIcon: string = 'chevron-down';\r\n @Prop() items: IKritzelMenuItem[] = [];\r\n @Prop() mainButtonDisabled = false;\r\n @Prop() menuButtonDisabled = false;\r\n\r\n @Event() mainButtonClick: EventEmitter<void>;\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n @Event() menuOpen: EventEmitter<void>;\r\n @Event() menuClose: EventEmitter<void>;\r\n\r\n @State() isMenuOpen = false;\r\n @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n @State() anchorElement: HTMLElement;\r\n\r\n splitMenuButtonRef: HTMLButtonElement;\r\n menuRef: HTMLKritzelMenuElement;\r\n\r\n @Method()\r\n async open() {\r\n if (this.isMenuOpen) return;\r\n this.isMenuOpen = true;\r\n this.anchorElement = this.host;\r\n this.menuOpen.emit();\r\n }\r\n\r\n @Method()\r\n async focusMenu() {\r\n if (this.menuRef) {\r\n await this.menuRef.setFocus();\r\n }\r\n }\r\n\r\n private handleButtonClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.mainButtonClick.emit();\r\n };\r\n\r\n private toggleMenu = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n if (this.isMenuOpen) {\r\n this.closeMenu();\r\n } else {\r\n this.openMenu(event);\r\n }\r\n };\r\n\r\n private openMenu = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.isMenuOpen = true;\r\n this.anchorElement = this.host;\r\n this.menuOpen.emit();\r\n };\r\n\r\n private closeMenu = () => {\r\n this.isMenuOpen = false;\r\n this.anchorElement = null;\r\n this.splitMenuButtonRef?.blur();\r\n this.menuClose.emit();\r\n };\r\n\r\n private handleItemSelect = event => {\r\n this.itemSelect.emit(event.detail);\r\n };\r\n\r\n private handleItemSave = event => {\r\n this.itemSave.emit(event.detail);\r\n };\r\n\r\n private handleItemCancel = event => {\r\n this.itemCancel.emit(event.detail);\r\n };\r\n\r\n private handleItemToggleChildMenu = event => {\r\n this.itemToggleChildMenu.emit(event.detail);\r\n };\r\n\r\n private handleItemCloseChildMenu = event => {\r\n this.itemCloseChildMenu.emit(event.detail);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ mobile: this.isTouchDevice }}>\r\n <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n </button>\r\n\r\n <div class=\"split-divider\"></div>\r\n\r\n <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n </button>\r\n\r\n <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n <kritzel-menu\r\n ref={el => (this.menuRef = el)}\r\n items={this.items}\r\n onItemSelect={this.handleItemSelect}\r\n onItemSave={this.handleItemSave}\r\n onItemCancel={this.handleItemCancel}\r\n onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n onClose={this.closeMenu}\r\n ></kritzel-menu>\r\n </kritzel-portal>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-Dw4n-4zp.js → p-C8wKLuRD.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
 import { d as defineCustomElement$3 } from './p-sq9jgfX0.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$2 } from './p-NP1Htol7.js';
+import { d as defineCustomElement$2 } from './p-DSSAcjs7.js';
 const kritzelMenuItemCss = ":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);outline:none;cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";
@@ -262,6 +262,6 @@ function defineCustomElement() {
 }
 export { KritzelMenu as K, KritzelMenuItem as a, defineCustomElement$1 as b, defineCustomElement as d };
-//# sourceMappingURL=p-Dw4n-4zp.js.map
+//# sourceMappingURL=p-C8wKLuRD.js.map
-//# sourceMappingURL=p-Dw4n-4zp.js.map
+//# sourceMappingURL=p-C8wKLuRD.js.map

package/dist/components/{p-Dw4n-4zp.js.map → p-C8wKLuRD.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-Dw4n-4zp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-menu-item/kritzel-menu-item.css?tag=kritzel-menu-item&encapsulation=shadow","src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx","src/components/shared/kritzel-menu/kritzel-menu.css?tag=kritzel-menu&encapsulation=shadow","src/components/shared/kritzel-menu/kritzel-menu.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: var(--kritzel-menu-item-padding, 8px);\r\n box-sizing: border-box;\r\n gap: 16px;\r\n height: var(--kritzel-menu-item-height, 40px);\r\n min-height: var(--kritzel-menu-item-min-height, 40px);\r\n font-family: sans-serif;\r\n font-size: var(--kritzel-menu-item-font-size, 14px);\r\n color: var(--kritzel-menu-item-color, #333333);\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n outline: none;\r\n cursor: default;\r\n}\r\n\r\n:host(:hover) .menu-item-overlay,\r\n:host(:focus-within) .menu-item-overlay {\r\n background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected.editing) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n:host(.selected) .edit-input {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button kritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\nkritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);\r\n}\r\n\r\n:host(.selected) .edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));\r\n}\r\n\r\n:host(.editing) {\r\n background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.disabled) {\r\n opacity: 0.5;\r\n pointer-events: none !important;\r\n}\r\n\r\n:host(.child-open) {\r\n background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.child-open.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n.menu-item-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-color: transparent;\r\n z-index: 0;\r\n pointer-events: none;\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n}\r\n\r\n.menu-item-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n position: relative;\r\n z-index: 1;\r\n height: 100%;\r\n}\r\n\r\n.left {\r\n justify-content: flex-start;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.left > div {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.right {\r\n justify-content: flex-end;\r\n}\r\n\r\n.edit-input {\r\n flex: 1;\r\n height: var(--kritzel-menu-item-input-height, 24px);\r\n padding: 0;\r\n background-color: transparent;\r\n border-radius: 0;\r\n border: none;\r\n border-bottom: 1px solid var(--kritzel-menu-item-input-border, #ccc);\r\n font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n width: 100%;\r\n min-width: 0;\r\n box-sizing: border-box;\r\n outline: none;\r\n}\r\n\r\n.edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, #007bff);\r\n color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);\r\n}\r\n\r\n.action-button {\r\n padding: 4px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: transparent;\r\n background: transparent;\r\n outline: none;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.action-button:hover,\r\n.action-button:focus {\r\n background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.action-button.disabled {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-menu-item',\r\n styleUrl: 'kritzel-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() item: IKritzelMenuItem;\r\n @Watch('item')\r\n onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n if (newValue !== oldValue) {\r\n this.isDirty = false;\r\n }\r\n }\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n\r\n @State()\r\n isDirty: boolean = false;\r\n\r\n private inputRef: HTMLInputElement;\r\n\r\n private focusInput() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n\r\n if (KritzelDevicesHelper.isIOS()) {\r\n const length = this.inputRef.value.length;\r\n this.inputRef.setSelectionRange(length, length);\r\n } else {\r\n this.inputRef.select();\r\n }\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.setDeviceSpecificStyles();\r\n this.focusInput();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.focusInput();\r\n }\r\n\r\n private setDeviceSpecificStyles = () => {\r\n const isTouchDevice = KritzelDevicesHelper.isTouchDevice();\r\n if (isTouchDevice) {\r\n this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');\r\n this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');\r\n }\r\n };\r\n\r\n private handleItemSelect = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n };\r\n\r\n private handleInputChange = (event: Event) => {\r\n event.stopPropagation();\r\n const target = event.target as HTMLInputElement;\r\n this.item.label = target.value;\r\n this.isDirty = true;\r\n };\r\n\r\n private handleSave = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemSave.emit(this.item);\r\n };\r\n\r\n private handleCancel = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemCancel.emit(this.item);\r\n };\r\n\r\n private handleMenuToggle = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n };\r\n\r\n private handleMenuClose = () => {\r\n this.itemCloseChildMenu.emit(this.item);\r\n };\r\n\r\n private renderViewMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <div>{this.item.label}</div>\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n {this.item.children &&\r\n this.item.children.length > 0 && [\r\n <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n </button>,\r\n <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n <kritzel-menu\r\n items={this.item.children}\r\n parent={this.item}\r\n onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n onItemSave={event => this.itemSave.emit(event.detail)}\r\n onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n onClose={this.handleMenuClose}\r\n ></kritzel-menu>\r\n </kritzel-portal>,\r\n ]}\r\n </div>,\r\n ];\r\n }\r\n\r\n private renderEditMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <input\r\n ref={el => (this.inputRef = el)}\r\n type=\"text\"\r\n class=\"edit-input\"\r\n value={this.item.label}\r\n onInput={this.handleInputChange}\r\n />\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n </div>\r\n <div\r\n tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0}\r\n class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }}\r\n onClick={this.handleSave}\r\n >\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\r\n </div>,\r\n ];\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n tabIndex={this.item.isDisabled ? -1 : 0}\r\n class={{\r\n 'selected': this.item.isSelected,\r\n 'editing': this.item.isEditing,\r\n 'disabled': this.item.isDisabled,\r\n 'child-open': this.item.isChildMenuOpen,\r\n }}\r\n onClick={this.handleItemSelect}\r\n >\r\n <div class=\"menu-item-overlay\"></div>\r\n {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--kritzel-menu-background-color, #ffffff);\r\n width: var(--kritzel-menu-width, 200px);\r\n padding: var(--kritzel-menu-padding, 8px);\r\n border-radius: var(--kritzel-menu-border-radius, 12px);\r\n box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-menu-border, 1px solid #ebebeb);\r\n z-index: 2;\r\n gap: var(--kritzel-menu-gap, 4px);\r\n overflow-y: auto;\r\n scrollbar-color: #ebebeb transparent;\r\n scrollbar-width: thin;\r\n max-height: 300px;\r\n}\r\n\r\n:host(:focus-visible) {\r\n outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.has-open-child-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 3;\r\n}\r\n","import { Component, Host, Prop, h, State, Event, EventEmitter, Element, Method } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-menu',\r\n styleUrl: 'kritzel-menu.css',\r\n shadow: true\r\n})\r\nexport class KritzelMenu {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() items: IKritzelMenuItem[];\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n @Event() close: EventEmitter<void>;\r\n\r\n @State() selectedIndex: number \| null = null;\r\n\r\n @Method()\r\n async setFocus() {\r\n const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');\r\n if (firstItem) {\r\n firstItem.focus();\r\n }\r\n }\r\n\r\n get openChildMenuItem() {\r\n return this.items.find(item => item.isChildMenuOpen);\r\n }\r\n\r\n get editingMenuItem() {\r\n return this.items.find(item => item.isEditing);\r\n }\r\n\r\n private onOverlayClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(this.openChildMenuItem);\r\n };\r\n\r\n private handleItemSelect = (event: CustomEvent<{ item: IKritzelMenuItem; parent: IKritzelMenuItem }>) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit(event.detail);\r\n }\r\n\r\n private handleSave = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemSave.emit(event.detail);\r\n }\r\n\r\n private handleCancel = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCancel.emit(event.detail);\r\n }\r\n\r\n private handleToggleChildMenu = (event: CustomEvent<{ item: IKritzelMenuItem; childMenuAnchor: HTMLElement }>) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit(event.detail);\r\n }\r\n\r\n private handleCloseChildMenu = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(event.detail);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0} onClick={e => e.stopPropagation()}>\r\n {this.openChildMenuItem && <div class=\"has-open-child-overlay\" onClick={this.onOverlayClick}></div>}\r\n {this.items.map((item) => (\r\n <kritzel-menu-item\r\n key={item.id}\r\n item={item}\r\n parent={this.parent}\r\n style={{ pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }}\r\n onItemSelect={this.handleItemSelect}\r\n onItemSave={this.handleSave}\r\n onItemCancel={this.handleCancel}\r\n onItemToggleChildMenu={this.handleToggleChildMenu}\r\n onItemCloseChildMenu={this.handleCloseChildMenu}\r\n ></kritzel-menu-item>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-C8wKLuRD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-menu-item/kritzel-menu-item.css?tag=kritzel-menu-item&encapsulation=shadow","src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx","src/components/shared/kritzel-menu/kritzel-menu.css?tag=kritzel-menu&encapsulation=shadow","src/components/shared/kritzel-menu/kritzel-menu.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: var(--kritzel-menu-item-padding, 8px);\r\n box-sizing: border-box;\r\n gap: 16px;\r\n height: var(--kritzel-menu-item-height, 40px);\r\n min-height: var(--kritzel-menu-item-min-height, 40px);\r\n font-family: sans-serif;\r\n font-size: var(--kritzel-menu-item-font-size, 14px);\r\n color: var(--kritzel-menu-item-color, #333333);\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n outline: none;\r\n cursor: default;\r\n}\r\n\r\n:host(:hover) .menu-item-overlay,\r\n:host(:focus-within) .menu-item-overlay {\r\n background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected.editing) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n:host(.selected) .edit-input {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button kritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\nkritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);\r\n}\r\n\r\n:host(.selected) .edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));\r\n}\r\n\r\n:host(.editing) {\r\n background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.disabled) {\r\n opacity: 0.5;\r\n pointer-events: none !important;\r\n}\r\n\r\n:host(.child-open) {\r\n background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.child-open.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n.menu-item-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-color: transparent;\r\n z-index: 0;\r\n pointer-events: none;\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n}\r\n\r\n.menu-item-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n position: relative;\r\n z-index: 1;\r\n height: 100%;\r\n}\r\n\r\n.left {\r\n justify-content: flex-start;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.left > div {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.right {\r\n justify-content: flex-end;\r\n}\r\n\r\n.edit-input {\r\n flex: 1;\r\n height: var(--kritzel-menu-item-input-height, 24px);\r\n padding: 0;\r\n background-color: transparent;\r\n border-radius: 0;\r\n border: none;\r\n border-bottom: 1px solid var(--kritzel-menu-item-input-border, #ccc);\r\n font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n width: 100%;\r\n min-width: 0;\r\n box-sizing: border-box;\r\n outline: none;\r\n}\r\n\r\n.edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, #007bff);\r\n color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);\r\n}\r\n\r\n.action-button {\r\n padding: 4px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: transparent;\r\n background: transparent;\r\n outline: none;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.action-button:hover,\r\n.action-button:focus {\r\n background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.action-button.disabled {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-menu-item',\r\n styleUrl: 'kritzel-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() item: IKritzelMenuItem;\r\n @Watch('item')\r\n onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n if (newValue !== oldValue) {\r\n this.isDirty = false;\r\n }\r\n }\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n\r\n @State()\r\n isDirty: boolean = false;\r\n\r\n private inputRef: HTMLInputElement;\r\n\r\n private focusInput() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n\r\n if (KritzelDevicesHelper.isIOS()) {\r\n const length = this.inputRef.value.length;\r\n this.inputRef.setSelectionRange(length, length);\r\n } else {\r\n this.inputRef.select();\r\n }\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.setDeviceSpecificStyles();\r\n this.focusInput();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.focusInput();\r\n }\r\n\r\n private setDeviceSpecificStyles = () => {\r\n const isTouchDevice = KritzelDevicesHelper.isTouchDevice();\r\n if (isTouchDevice) {\r\n this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');\r\n this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');\r\n }\r\n };\r\n\r\n private handleItemSelect = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n };\r\n\r\n private handleInputChange = (event: Event) => {\r\n event.stopPropagation();\r\n const target = event.target as HTMLInputElement;\r\n this.item.label = target.value;\r\n this.isDirty = true;\r\n };\r\n\r\n private handleSave = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemSave.emit(this.item);\r\n };\r\n\r\n private handleCancel = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemCancel.emit(this.item);\r\n };\r\n\r\n private handleMenuToggle = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n };\r\n\r\n private handleMenuClose = () => {\r\n this.itemCloseChildMenu.emit(this.item);\r\n };\r\n\r\n private renderViewMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <div>{this.item.label}</div>\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n {this.item.children &&\r\n this.item.children.length > 0 && [\r\n <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n </button>,\r\n <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n <kritzel-menu\r\n items={this.item.children}\r\n parent={this.item}\r\n onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n onItemSave={event => this.itemSave.emit(event.detail)}\r\n onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n onClose={this.handleMenuClose}\r\n ></kritzel-menu>\r\n </kritzel-portal>,\r\n ]}\r\n </div>,\r\n ];\r\n }\r\n\r\n private renderEditMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <input\r\n ref={el => (this.inputRef = el)}\r\n type=\"text\"\r\n class=\"edit-input\"\r\n value={this.item.label}\r\n onInput={this.handleInputChange}\r\n />\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n </div>\r\n <div\r\n tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0}\r\n class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }}\r\n onClick={this.handleSave}\r\n >\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\r\n </div>,\r\n ];\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n tabIndex={this.item.isDisabled ? -1 : 0}\r\n class={{\r\n 'selected': this.item.isSelected,\r\n 'editing': this.item.isEditing,\r\n 'disabled': this.item.isDisabled,\r\n 'child-open': this.item.isChildMenuOpen,\r\n }}\r\n onClick={this.handleItemSelect}\r\n >\r\n <div class=\"menu-item-overlay\"></div>\r\n {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--kritzel-menu-background-color, #ffffff);\r\n width: var(--kritzel-menu-width, 200px);\r\n padding: var(--kritzel-menu-padding, 8px);\r\n border-radius: var(--kritzel-menu-border-radius, 12px);\r\n box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-menu-border, 1px solid #ebebeb);\r\n z-index: 2;\r\n gap: var(--kritzel-menu-gap, 4px);\r\n overflow-y: auto;\r\n scrollbar-color: #ebebeb transparent;\r\n scrollbar-width: thin;\r\n max-height: 300px;\r\n}\r\n\r\n:host(:focus-visible) {\r\n outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.has-open-child-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 3;\r\n}\r\n","import { Component, Host, Prop, h, State, Event, EventEmitter, Element, Method } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-menu',\r\n styleUrl: 'kritzel-menu.css',\r\n shadow: true\r\n})\r\nexport class KritzelMenu {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() items: IKritzelMenuItem[];\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n @Event() close: EventEmitter<void>;\r\n\r\n @State() selectedIndex: number \| null = null;\r\n\r\n @Method()\r\n async setFocus() {\r\n const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');\r\n if (firstItem) {\r\n firstItem.focus();\r\n }\r\n }\r\n\r\n get openChildMenuItem() {\r\n return this.items.find(item => item.isChildMenuOpen);\r\n }\r\n\r\n get editingMenuItem() {\r\n return this.items.find(item => item.isEditing);\r\n }\r\n\r\n private onOverlayClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(this.openChildMenuItem);\r\n };\r\n\r\n private handleItemSelect = (event: CustomEvent<{ item: IKritzelMenuItem; parent: IKritzelMenuItem }>) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit(event.detail);\r\n }\r\n\r\n private handleSave = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemSave.emit(event.detail);\r\n }\r\n\r\n private handleCancel = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCancel.emit(event.detail);\r\n }\r\n\r\n private handleToggleChildMenu = (event: CustomEvent<{ item: IKritzelMenuItem; childMenuAnchor: HTMLElement }>) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit(event.detail);\r\n }\r\n\r\n private handleCloseChildMenu = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(event.detail);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0} onClick={e => e.stopPropagation()}>\r\n {this.openChildMenuItem && <div class=\"has-open-child-overlay\" onClick={this.onOverlayClick}></div>}\r\n {this.items.map((item) => (\r\n <kritzel-menu-item\r\n key={item.id}\r\n item={item}\r\n parent={this.parent}\r\n style={{ pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }}\r\n onItemSelect={this.handleItemSelect}\r\n onItemSave={this.handleSave}\r\n onItemCancel={this.handleCancel}\r\n onItemToggleChildMenu={this.handleToggleChildMenu}\r\n onItemCloseChildMenu={this.handleCloseChildMenu}\r\n ></kritzel-menu-item>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-BKvOO7NT.js → p-DEjYSb6x.js} RENAMED Viewed

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { d as defineCustomElement$5 } from './p-sq9jgfX0.js';
-import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-Dw4n-4zp.js';
-import { d as defineCustomElement$2 } from './p-NP1Htol7.js';
-import { d as defineCustomElement$1 } from './p-CM8KdFZI.js';
+import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-C8wKLuRD.js';
+import { d as defineCustomElement$2 } from './p-DSSAcjs7.js';
+import { d as defineCustomElement$1 } from './p-Bv28MOWN.js';
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
@@ -27,6 +27,11 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
     openChildMenuItem = null;
     newWorkspace = null;
     editingItemId = null;
+    handleWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }
     kritzelEngineRef = null;
     splitButtonRef;
     get sortedWorkspaces() {
@@ -150,7 +155,7 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         "openChildMenuItem": [32],
         "newWorkspace": [32],
         "editingItemId": [32]
-    }]);
+    }, [[8, "wheel", "handleWheel"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -191,6 +196,6 @@ function defineCustomElement() {
 }
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-BKvOO7NT.js.map
+//# sourceMappingURL=p-DEjYSb6x.js.map
-//# sourceMappingURL=p-BKvOO7NT.js.map
+//# sourceMappingURL=p-DEjYSb6x.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-DEjYSb6x.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() 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-NP1Htol7.js → p-DSSAcjs7.js} RENAMED Viewed

@@ -64,6 +64,15 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
     handleResize() {
         this.calculatePosition();
     }
+    handleWindowScroll() {
+        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        if (!isInViewport) {
+            this.anchor.blur();
+            this.closePortal();
+            return;
+        }
+        this.calculatePosition();
+    }
     portal;
     id = `portal-${ObjectHelper.generateUUID()}`;
     defaultOffset = 0;
@@ -166,7 +175,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: 'a994d8ab8c758bc92836693f35f8d9415913cfff', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'a9b9a71d82e9b57de24e5ecfa90197a27ed691c4' })));
+        return (h(Host, { key: 'cb26dba15d036fe47c64d35b0a6e0be870de5228', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'de69a0ee1f7e6584037a3e9057ad9f0c39fb9e89' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
@@ -176,7 +185,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         "offsetX": [2, "offset-x"],
         "offsetY": [2, "offset-y"],
         "autoFocus": [4, "auto-focus"]
-    }, [[8, "click", "handleOutsideClick"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"]], {
+    }, [[8, "click", "handleOutsideClick"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"], [11, "scroll", "handleWindowScroll"]], {
         "anchor": ["anchorChanged"]
     }]);
 function defineCustomElement() {
@@ -194,6 +203,6 @@ function defineCustomElement() {
 }
 export { KritzelPortal as K, defineCustomElement as d };
-//# sourceMappingURL=p-NP1Htol7.js.map
+//# sourceMappingURL=p-DSSAcjs7.js.map
-//# sourceMappingURL=p-NP1Htol7.js.map
+//# sourceMappingURL=p-DSSAcjs7.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-DSSAcjs7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-portal/kritzel-portal.tsx"],"sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-portal',\r\n shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() anchor: HTMLElement;\r\n @Watch('anchor')\r\n anchorChanged(newValue: HTMLElement) {\r\n if (newValue) {\r\n this.openPortal();\r\n this.calculatePosition();\r\n if (this.autoFocus) {\r\n this.focusFirstElement();\r\n }\r\n } else {\r\n this.closePortal();\r\n }\r\n }\r\n\r\n @Prop() offsetX: number;\r\n @Prop() offsetY: number;\r\n @Prop() autoFocus: boolean = true;\r\n\r\n @Event() close: EventEmitter<void>;\r\n\r\n @Listen('click', { target: 'window' })\r\n handleOutsideClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n\r\n const isLastPortal = this.lastAddedPortal === this.portal;\r\n if (!isLastPortal) return;\r\n\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.close.emit();\r\n this.closePortal();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event: KeyboardEvent) {\r\n event.stopPropagation();\r\n\r\n const isLastPortal = this.lastAddedPortal === this.portal;\r\n if (!isLastPortal) return;\r\n\r\n if (event.key === 'Escape') {\r\n this.anchor.focus();\r\n this.close.emit();\r\n this.closePortal();\r\n }\r\n\r\n if (event.key === 'Tab') {\r\n this.trapFocus(event);\r\n }\r\n\r\n if (event.key === 'Enter') {\r\n const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n if (activeElement?.click) {\r\n event.preventDefault();\r\n activeElement.click();\r\n }\r\n }\r\n }\r\n\r\n @Listen('resize', { target: 'window', capture: true })\r\n handleResize() {\r\n this.calculatePosition();\r\n }\r\n\r\n @Listen('scroll', { target: 'window', capture: true })\r\n handleWindowScroll() {\r\n const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n if (!isInViewport) {\r\n this.anchor.blur();\r\n this.closePortal();\r\n return;\r\n }\r\n\r\n this.calculatePosition();\r\n }\r\n\r\n private portal: HTMLElement;\r\n private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n private defaultOffset = 0;\r\n private minLeft = 0;\r\n\r\n private focusFirstElement() {\r\n requestAnimationFrame(() => {\r\n this.firstFocusableElement?.focus?.();\r\n });\r\n }\r\n\r\n private getDeepActiveElement(): Element {\r\n let activeEl = document.activeElement;\r\n while (activeEl?.shadowRoot?.activeElement) {\r\n activeEl = activeEl.shadowRoot.activeElement;\r\n }\r\n return activeEl;\r\n }\r\n\r\n private trapFocus(event: KeyboardEvent) {\r\n const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n if (focusableElements.length === 0) return;\r\n\r\n const firstFocusable = focusableElements[0];\r\n const lastFocusable = focusableElements[focusableElements.length - 1];\r\n const activeElement = this.getDeepActiveElement();\r\n\r\n if (event.shiftKey) {\r\n /* shift + tab */\r\n if (activeElement === firstFocusable) {\r\n lastFocusable.focus();\r\n event.preventDefault();\r\n }\r\n } else {\r\n /* tab */\r\n if (activeElement === lastFocusable) {\r\n firstFocusable.focus();\r\n event.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n private get firstFocusableElement(): HTMLElement | null {\r\n const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n if (!firstAssigned) return null;\r\n\r\n const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);\r\n return focusable[0] ?? firstAssigned;\r\n }\r\n\r\n private get lastAddedPortal(): HTMLElement | null {\r\n const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n return portals.length ? portals[portals.length - 1] : null;\r\n }\r\n\r\n private calculateLeft() {\r\n if (!this.anchor || !this.portal) return 0;\r\n const refRect = this.anchor.getBoundingClientRect();\r\n const portalRect = this.portal.getBoundingClientRect();\r\n\r\n const offset = this.offsetX ?? this.defaultOffset;\r\n let left = refRect.left + offset;\r\n\r\n const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n if (left < this.minLeft) left = this.minLeft;\r\n if (left > maxLeft) left = maxLeft;\r\n\r\n return Math.round(left + window.scrollX);\r\n }\r\n\r\n private calculateTop() {\r\n if (!this.anchor || !this.portal) return 0;\r\n const refRect = this.anchor.getBoundingClientRect();\r\n const portalRect = this.portal.getBoundingClientRect();\r\n const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n let top = refRect.bottom + offset;\r\n\r\n if (top + portalRect.height > window.innerHeight) {\r\n top = refRect.top - portalRect.height - offset;\r\n }\r\n\r\n return Math.round(top + window.scrollY);\r\n }\r\n\r\n private openPortal() {\r\n this.portal = document.createElement('div');\r\n this.portal.setAttribute('id', this.id);\r\n this.portal.style.zIndex = '1';\r\n this.portal.style.position = 'absolute';\r\n this.portal.style.top = '0px';\r\n this.portal.style.left = '0px';\r\n this.portal.appendChild(this.host);\r\n document.body.append(this.portal);\r\n }\r\n\r\n private closePortal() {\r\n const portal = document.getElementById(this.id);\r\n if (!portal) return;\r\n document.body.removeChild(portal);\r\n this.host.remove();\r\n }\r\n\r\n private calculatePosition() {\r\n if (!this.anchor || !this.portal) return;\r\n const top = this.calculateTop();\r\n const left = this.calculateLeft();\r\n this.portal.style.top = `${top}px`;\r\n this.portal.style.left = `${left}px`;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/esm/kritzel-color_22.entry.js CHANGED Viewed

@@ -660,6 +660,7 @@ const KritzelEditor = class {
         {
             name: 'selection',
             type: 'tool',
+            isDefault: true,
             tool: KritzelSelectionTool,
             icon: 'cursor',
         },
@@ -668,7 +669,6 @@ const KritzelEditor = class {
             type: 'tool',
             tool: KritzelBrushTool,
             icon: 'pen',
-            isDefault: true,
             config: DEFAULT_BRUSH_CONFIG,
         },
         {
@@ -2888,6 +2888,15 @@ const KritzelPortal = class {
     handleResize() {
         this.calculatePosition();
     }
+    handleWindowScroll() {
+        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        if (!isInViewport) {
+            this.anchor.blur();
+            this.closePortal();
+            return;
+        }
+        this.calculatePosition();
+    }
     portal;
     id = `portal-${ObjectHelper.generateUUID()}`;
     defaultOffset = 0;
@@ -2990,7 +2999,7 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: 'a994d8ab8c758bc92836693f35f8d9415913cfff', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'a9b9a71d82e9b57de24e5ecfa90197a27ed691c4' })));
+        return (h(Host, { key: 'cb26dba15d036fe47c64d35b0a6e0be870de5228', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'de69a0ee1f7e6584037a3e9057ad9f0c39fb9e89' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
@@ -3254,6 +3263,11 @@ const KritzelWorkspaceManager = class {
     openChildMenuItem = null;
     newWorkspace = null;
     editingItemId = null;
+    handleWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }
     kritzelEngineRef = null;
     splitButtonRef;
     get sortedWorkspaces() {