kritzel-stencil 0.1.0 → 0.1.2

package/dist/types/stencil-public-runtime.d.ts

@@ -673,6 +673,35 @@ export declare function h(sel: any, text: string): VNode;
 export declare function h(sel: any, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsx(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsxs(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @param isStaticChildren indicates if the children are static
+ * @param source source information
+ * @param self reference to the component instance
+ * @returns a jsx vnode
+ */
+export declare function jsxDEV(type: any, props: any, key?: string | number, isStaticChildren?: boolean, source?: any, self?: any): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 /**
  * A virtual DOM node

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -42,7 +42,8 @@
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec",
-    "test.watch": "stencil test --spec --watchAll",
+    "e2e": "stencil test --e2e --screenshot",
+    "e2e:update-screenshots": "stencil test --e2e --screenshot --update-screenshot",
     "generate": "stencil generate",
     "clean": "rimraf dist .stencil loader node_modules",
     "bump": "npm version patch",
@@ -67,7 +68,7 @@
   },
   "devDependencies": {
     "@stencil/angular-output-target": "^1.1.1",
-    "@stencil/core": "^4.36.3",
+    "@stencil/core": "^4.41.0",
     "@stencil/react-output-target": "^1.2.0",
     "@stencil/vue-output-target": "0.11.8",
     "@types/jest": "^29.5.14",
@@ -75,6 +76,7 @@
     "fake-indexeddb": "^6.2.2",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
+    "jest-jasmine2": "^30.2.0",
     "puppeteer": "^24.6.1",
     "ts-jest": "^29.4.4"
   }

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css

@@ -1,19 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.expand-toggle {
-  background: none;
-  border: none;
-  cursor: var(--kritzel-pointer-cursor, pointer);
-  font-size: 14px;
-  line-height: 1;
-  padding: 8px;
-  color: var(--kritzel-color-palette-expand-toggle-color, #666666);
-}
-
-.expand-toggle:hover {
-  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);
-}

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js

@@ -1,134 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class KritzelControlBrushConfig {
-    tool;
-    handleToolChange(newTool) {
-        this.palette = newTool.palettes[newTool.type];
-    }
-    isExpanded = false;
-    toolChange;
-    palette = [];
-    componentWillLoad() {
-        this.palette = this.tool.palettes[this.tool.type];
-    }
-    handleToggleExpand() {
-        this.isExpanded = !this.isExpanded;
-    }
-    handleTypeChange(event) {
-        this.palette = this.tool.palettes[event.detail];
-        this.tool.type = event.detail;
-        this.tool.color = this.palette[0];
-        this.toolChange.emit(this.tool);
-    }
-    handleColorChange(event) {
-        this.tool.color = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    handleSizeChange(event) {
-        this.tool.size = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    render() {
-        return (h(Host, { key: 'ce2ac77db22f52239a45b62f690d54009f2c6954' }, h("div", { key: '5f6c50853e876c3612bb5c270bccc468c2c9a726', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: this.isExpanded ? 'flex-start' : 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'bfa24bb8683027c37f200ad65e4e6787d7224c56', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '8e2c55c6d16ca3911c5f068c354bdce5a4f7e844', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '33610ada109fe5d1d9cb2da4c70a60d672e3d6cb', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '9b095dd9436e46dd88a3485ceb2dafa5d06d1bc4', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
-    }
-    static get is() { return "kritzel-control-brush-config"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["kritzel-control-brush-config.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["kritzel-control-brush-config.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "tool": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "KritzelBrushTool",
-                    "resolved": "KritzelBrushTool",
-                    "references": {
-                        "KritzelBrushTool": {
-                            "location": "import",
-                            "path": "../../../classes/tools/brush-tool.class",
-                            "id": "src/classes/tools/brush-tool.class.ts::KritzelBrushTool"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "isExpanded": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-expanded",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "palette": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "toolChange",
-                "name": "toolChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "KritzelBrushTool",
-                    "resolved": "KritzelBrushTool",
-                    "references": {
-                        "KritzelBrushTool": {
-                            "location": "import",
-                            "path": "../../../classes/tools/brush-tool.class",
-                            "id": "src/classes/tools/brush-tool.class.ts::KritzelBrushTool"
-                        }
-                    }
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "tool",
-                "methodName": "handleToolChange"
-            }];
-    }
-}

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.css

@@ -1,19 +0,0 @@
-:host {
-  display: block;
-  flex-direction: column;
-  width: 100%;
-}
-
-.expand-toggle {
-  background: none;
-  border: none;
-  cursor: var(--kritzel-pointer-cursor, pointer);
-  font-size: 14px;
-  line-height: 1;
-  padding: 8px;
-  color: var(--kritzel-color-palette-expand-toggle-color, #666666);
-}
-
-.expand-toggle:hover {
-  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);
-}

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js

@@ -1,114 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class KritzelControlTextConfig {
-    tool;
-    isExpanded = false;
-    toolChange;
-    handleToggleExpand() {
-        this.isExpanded = !this.isExpanded;
-    }
-    handleFamilyChange(event) {
-        this.tool.fontFamily = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    handleColorChange(event) {
-        this.tool.fontColor = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    handleSizeChange(event) {
-        this.tool.fontSize = event.detail;
-        this.toolChange.emit(this.tool);
-    }
-    render() {
-        return (h(Host, { key: '4a0027969b183fef77c374eb114d9d30104e5ad7' }, h("div", { key: '9f49eb3a95080447b938fdfeb256fafbe5ff9ddc', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-font-family", { key: '4e75cda048f8b8c04e6cb5568e7cdcde91e28112', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '05c6ce98bd700e9e9d2e676cbcf191b943a2980e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', tabindex: "0" }, h("kritzel-icon", { key: 'ce30d48dd5ce5eefeee7702dff81ca8f96e0872d', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'a3d313bf01dafc15c8cf39a129d8c0c35741a3ca', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '954db891b80fb244083de24dc87255b1239ff913', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
-    }
-    static get is() { return "kritzel-control-text-config"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["kritzel-control-text-config.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["kritzel-control-text-config.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "tool": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "KritzelTextTool",
-                    "resolved": "KritzelTextTool",
-                    "references": {
-                        "KritzelTextTool": {
-                            "location": "import",
-                            "path": "../../../classes/tools/text-tool.class",
-                            "id": "src/classes/tools/text-tool.class.ts::KritzelTextTool"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "isExpanded": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-expanded",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "toolChange",
-                "name": "toolChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "KritzelTextTool",
-                    "resolved": "KritzelTextTool",
-                    "references": {
-                        "KritzelTextTool": {
-                            "location": "import",
-                            "path": "../../../classes/tools/text-tool.class",
-                            "id": "src/classes/tools/text-tool.class.ts::KritzelTextTool"
-                        }
-                    }
-                }
-            }];
-    }
-}

package/dist/components/kritzel-control-brush-config.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface KritzelControlBrushConfig extends Components.KritzelControlBrushConfig, HTMLElement {}
-export const KritzelControlBrushConfig: {
-    prototype: KritzelControlBrushConfig;
-    new (): KritzelControlBrushConfig;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/kritzel-control-brush-config.js

@@ -1 +0,0 @@
-import{K as o,d as s}from"./p-CeKT_dTd.js";const d=o,p=s;export{d as KritzelControlBrushConfig,p as defineCustomElement}

package/dist/components/kritzel-control-text-config.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface KritzelControlTextConfig extends Components.KritzelControlTextConfig, HTMLElement {}
-export const KritzelControlTextConfig: {
-    prototype: KritzelControlTextConfig;
-    new (): KritzelControlTextConfig;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/kritzel-control-text-config.js

@@ -1 +0,0 @@
-import{K as o,d as r}from"./p-C3UriJh7.js";const s=o,p=r;export{s as KritzelControlTextConfig,p as defineCustomElement}

package/dist/components/p-B7Fdo5QJ.js

@@ -1 +0,0 @@
-import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Bj_Og27M.js";import{b as n,c as s}from"./p-Cp15toXH.js";import{K as c}from"./p-l10It7Nm.js";import{d as a}from"./p-CXzfYQ_u.js";import{d}from"./p-Du1vxHy8.js";import{d as p}from"./p-CeKT_dTd.js";import{d as k}from"./p-C3UriJh7.js";import{d as u}from"./p-g0N9j_uT.js";import{d as h}from"./p-C4krHoUl.js";import{d as z}from"./p-C-d2IH4v.js";import{d as b}from"./p-BXaWhpO2.js";import{d as f}from"./p-DTezr6w9.js";import{d as g}from"./p-CF5L2Gdl.js";import{d as m}from"./p-BtuXeItZ.js";import{d as v}from"./p-DB5s1NY4.js";const x=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;isControlsReady;firstConfig=null;isTooltipVisible=!1;isTouchDevice=c.isTouchDevice();selectedSubOptions=new Map;openSubMenuControl=null;handleDocumentClick(t){this.kritzelEngine&&!t.target.closest(".kritzel-tooltip")&&(this.isTooltipVisible=!1)}handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.openSubMenuControl=null,this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null}async closeTooltip(){this.isTooltipVisible=!1}kritzelEngine=null;tooltipRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleConfigClick(t){t.stopPropagation(),this.isTooltipVisible=!this.isTooltipVisible,this.isTooltipVisible?this.kritzelEngine?.disable():this.kritzelEngine?.enable(),setTimeout((()=>{this.tooltipRef?.focusContent()}),100)}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleTooltipClosed(){this.isTooltipVisible=!1,this.kritzelEngine?.enable()}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}toggleSubMenu(t,o){t.stopPropagation(),this.openSubMenuControl=this.openSubMenuControl?.name===o.name?null:o}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.openSubMenuControl=null,await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof n||this.activeControl?.tool instanceof s;return r(i,{key:"ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"7218fff9c89f525baf655eea46aec1698a28babd",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"1dc0fa7b02a953474aae9c7822c651d5006e89e5",class:"kritzel-controls"},this.controls.map((o=>{if("tool"===o.type){if(o.subOptions?.length){const t=this.getSelectedSubOption(o),e=this.activeControl?.name===o.name,i=this.openSubMenuControl?.name===o.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:o.name,ref:t=>{t&&(o._anchorRef=t)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(o),title:t?.label},r("kritzel-icon",{name:t?.icon||o.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},onClick:t=>this.toggleSubMenu(t,o),"aria-label":"Select shape type","aria-expanded":i?"true":"false",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{isVisible:i,anchorElement:o._anchorRef,onTooltipClosed:()=>{this.openSubMenuControl=null}},r("div",{class:"kritzel-submenu-content"},o.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===t?.id},key:e.id,onClick:()=>this.selectSubOption(o,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===o?.name},key:o.name,onClick:()=>this.handleControlClick?.(o)},r("kritzel-icon",{name:o.icon}))}if("config"===o.type&&o.name===this.firstConfig?.name&&this.activeControl)return r("div",{class:{"kritzel-config-container":!0,visible:t},key:o.name},r("kritzel-tooltip",{ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},r("div",{style:{width:"294px",height:"100%"}},"brush"===this.activeControl.name&&r("kritzel-control-brush-config",{tool:this.activeToolAsBrushTool,onToolChange:t=>this.handleToolChange?.(t)}),"text"===this.activeControl.name&&r("kritzel-control-text-config",{tool:this.activeToolAsTextTool,onToolChange:t=>this.handleToolChange?.(t)}))),r("div",{tabIndex:t?0:-1,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{"Enter"===t.key&&this.handleConfigClick?.(t)},style:{cursor:"pointer"}},this.activeControl.tool instanceof n&&r("div",{class:"color-container"},r("kritzel-color",{value:this.activeToolAsBrushTool?.color,size:this.activeToolAsBrushTool?.size,style:{borderRadius:"50%",border:"none"}})),this.activeControl.tool instanceof s&&r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.activeToolAsTextTool?.fontFamily,size:this.activeToolAsTextTool?.fontSize,color:this.activeToolAsTextTool?.fontColor}))))}))))}static get assetsDirs(){return["../assets"]}static get style(){return":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]]);function y(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-control-brush-config","kritzel-control-text-config","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-stroke-size","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),x);break;case"kritzel-color":customElements.get(l(t))||a();break;case"kritzel-color-palette":customElements.get(l(t))||d();break;case"kritzel-control-brush-config":customElements.get(l(t))||p();break;case"kritzel-control-text-config":customElements.get(l(t))||k();break;case"kritzel-dropdown":customElements.get(l(t))||u();break;case"kritzel-font":customElements.get(l(t))||h();break;case"kritzel-font-family":customElements.get(l(t))||z();break;case"kritzel-font-size":customElements.get(l(t))||b();break;case"kritzel-icon":customElements.get(l(t))||f();break;case"kritzel-stroke-size":customElements.get(l(t))||g();break;case"kritzel-tooltip":customElements.get(l(t))||m();break;case"kritzel-utility-panel":customElements.get(l(t))||v()}}))}export{x as K,y as d}

package/dist/components/p-BXaWhpO2.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as s,h as i,d as r,t as o}from"./p-Bj_Og27M.js";import{d as n}from"./p-C4krHoUl.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=s(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleSizeClick(t))}render(){return i(r,{key:"b0ee1ab0eb5e1871f7726d4393aea59f63264ec5"},this.sizes.map((e=>i("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},i("kritzel-font",{fontFamily:this.fontFamily,size:e})))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}"}},[513,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-size","kritzel-font"].forEach((e=>{switch(e){case"kritzel-font-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-font":customElements.get(o(e))||n()}}))}export{l as K,a as d}

package/dist/components/p-BtuXeItZ.js

@@ -1 +0,0 @@
-import{p as t,H as o,c as i,h as s,d as e,t as n}from"./p-Bj_Og27M.js";import{K as l}from"./p-C6qB08BS.js";const r=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=i(this,"tooltipClosed")}get host(){return this}isVisible=!1;anchorElement;offsetY=24;tooltipClosed;positionX=0;positionY=0;handleOutsideClick(t){this.isVisible&&(this.host.contains(t.target)||this.tooltipClosed.emit())}handleWindowResize(){this.calculateAdjustedPosition()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}componentDidLoad(){this.focusSlottedContent()}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}focusSlottedContent(){const t=this.host.shadowRoot?.querySelector("slot"),o=t?.assignedElements()||[];o.length>0&&o[0].focus()}calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),o=this.host.shadowRoot?.querySelector(".tooltip-content"),i=o?.getBoundingClientRect(),s=i?.width||0,e=12,n=window.innerWidth-s-e;this.positionX=Math.max(e,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(e,{key:"c257f254b8ba6b95f251eac3136f5be282d23e30",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:`${this.positionX}px`,bottom:`${this.positionY}px`}},s("div",{key:"14f31dc995236a2309e2371ecef278a0e6374139",class:"tooltip-content",onClick:t=>t.stopPropagation()},s("slot",{key:"6dace4d6ed82878333f8771cf4670d53cea36873"})))}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]]);function a(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),r))}))}export{r as K,a as d}

package/dist/components/p-C-d2IH4v.js

@@ -1 +0,0 @@
-import{p as t,H as e,c as o,h as l,d as a,t as n}from"./p-Bj_Og27M.js";import{d as r}from"./p-g0N9j_uT.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.fontFamilyChange=o(this,"fontFamilyChange")}fontOptions=[{value:"arial",label:"Arial"},{value:"verdana",label:"Verdana"},{value:"helvetica",label:"Helvetica"},{value:"tahoma",label:"Tahoma"},{value:"trebuchet ms",label:"Trebuchet MS"},{value:"times new roman",label:"Times New Roman"},{value:"georgia",label:"Georgia"},{value:"garamond",label:"Garamond"},{value:"courier new",label:"Courier New"},{value:"brush script mt",label:"Brush Script MT"}];selectedFontFamily;fontFamilyChange;componentWillLoad(){if(this.fontOptions&&this.fontOptions.length>0){const t=this.fontOptions.some((t=>t.value===this.selectedFontFamily));this.selectedFontFamily&&t||(this.selectedFontFamily=this.fontOptions[0].value)}}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};render(){const t=this.fontOptions.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.value}})));return l(a,{key:"74f27d2d9f73ee8589448a24bed64e885ef6d2d8"},l("kritzel-dropdown",{key:"58abc26a54b124f253841faaa4ca4227a23baac2",options:t,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:this.selectedFontFamily}}))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}"}},[513,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}]);function i(){"undefined"!=typeof customElements&&["kritzel-font-family","kritzel-dropdown"].forEach((t=>{switch(t){case"kritzel-font-family":customElements.get(n(t))||customElements.define(n(t),s);break;case"kritzel-dropdown":customElements.get(n(t))||r()}}))}export{s as K,i as d}

package/dist/components/p-C3UriJh7.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as o,h as s,d as i,t as l}from"./p-Bj_Og27M.js";import{d as r}from"./p-CXzfYQ_u.js";import{d as a}from"./p-Du1vxHy8.js";import{d as n}from"./p-g0N9j_uT.js";import{d as c}from"./p-C4krHoUl.js";import{d}from"./p-C-d2IH4v.js";import{d as f}from"./p-BXaWhpO2.js";import{d as h}from"./p-DTezr6w9.js";const p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=o(this,"toolChange")}tool;isExpanded=!1;toolChange;handleToggleExpand(){this.isExpanded=!this.isExpanded}handleFamilyChange(e){this.tool.fontFamily=e.detail,this.toolChange.emit(this.tool)}handleColorChange(e){this.tool.fontColor=e.detail,this.toolChange.emit(this.tool)}handleSizeChange(e){this.tool.fontSize=e.detail,this.toolChange.emit(this.tool)}render(){return s(i,{key:"4a0027969b183fef77c374eb114d9d30104e5ad7"},s("div",{key:"9f49eb3a95080447b938fdfeb256fafbe5ff9ddc",style:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-start",width:"100%",gap:"8px"}},s("kritzel-font-family",{key:"4e75cda048f8b8c04e6cb5568e7cdcde91e28112",selectedFontFamily:this.tool.fontFamily,onFontFamilyChange:e=>this.handleFamilyChange(e)}),s("button",{key:"05c6ce98bd700e9e9d2e676cbcf191b943a2980e",class:"expand-toggle",onClick:()=>this.handleToggleExpand(),title:this.isExpanded?"Collapse":"Expand",tabindex:"0"},s("kritzel-icon",{key:"ce30d48dd5ce5eefeee7702dff81ca8f96e0872d",name:this.isExpanded?"chevron-up":"chevron-down"}))),s("kritzel-color-palette",{key:"a3d313bf01dafc15c8cf39a129d8c0c35741a3ca",colors:this.tool.palette,selectedColor:this.tool.fontColor,isExpanded:this.isExpanded,onColorChange:e=>this.handleColorChange(e)}),s("kritzel-font-size",{key:"954db891b80fb244083de24dc87255b1239ff913",selectedSize:this.tool.fontSize,fontFamily:this.tool.fontFamily,onSizeChange:e=>this.handleSizeChange(e)}))}static get style(){return":host{display:block;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}"}},[513,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}]);function m(){"undefined"!=typeof customElements&&["kritzel-control-text-config","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-control-text-config":customElements.get(l(e))||customElements.define(l(e),p);break;case"kritzel-color":customElements.get(l(e))||r();break;case"kritzel-color-palette":customElements.get(l(e))||a();break;case"kritzel-dropdown":customElements.get(l(e))||n();break;case"kritzel-font":customElements.get(l(e))||c();break;case"kritzel-font-family":customElements.get(l(e))||d();break;case"kritzel-font-size":customElements.get(l(e))||f();break;case"kritzel-icon":customElements.get(l(e))||h()}}))}export{p as K,m as d}

package/dist/components/p-CF5L2Gdl.js

@@ -1 +0,0 @@
-import{p as e,H as s,c as r,h as t,d as i,t as o}from"./p-Bj_Og27M.js";import{d as c}from"./p-CXzfYQ_u.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=r(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return t(i,{key:"d204d14384367ca8847ad30cab9801788c8d8fac"},this.sizes.map((e=>t("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},t("kritzel-color",{value:"#000000",size:e})))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function n(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-color":customElements.get(o(e))||c()}}))}export{l as K,n as d}

package/dist/components/p-CeKT_dTd.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as o,h as s,d as i,t as l}from"./p-Bj_Og27M.js";import{d as r}from"./p-CXzfYQ_u.js";import{d as a}from"./p-Du1vxHy8.js";import{d as n}from"./p-DTezr6w9.js";import{d as c}from"./p-CF5L2Gdl.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=o(this,"toolChange")}tool;handleToolChange(e){this.palette=e.palettes[e.type]}isExpanded=!1;toolChange;palette=[];componentWillLoad(){this.palette=this.tool.palettes[this.tool.type]}handleToggleExpand(){this.isExpanded=!this.isExpanded}handleTypeChange(e){this.palette=this.tool.palettes[e.detail],this.tool.type=e.detail,this.tool.color=this.palette[0],this.toolChange.emit(this.tool)}handleColorChange(e){this.tool.color=e.detail,this.toolChange.emit(this.tool)}handleSizeChange(e){this.tool.size=e.detail,this.toolChange.emit(this.tool)}render(){return s(i,{key:"ce2ac77db22f52239a45b62f690d54009f2c6954"},s("div",{key:"5f6c50853e876c3612bb5c270bccc468c2c9a726",style:{display:"flex",flexDirection:"row",alignItems:this.isExpanded?"flex-start":"center",justifyContent:"flex-start",width:"100%",gap:"8px"}},s("kritzel-color-palette",{key:"bfa24bb8683027c37f200ad65e4e6787d7224c56",colors:this.palette,selectedColor:this.tool.color,isExpanded:this.isExpanded,isOpaque:!0,onColorChange:e=>this.handleColorChange(e)}),s("button",{key:"8e2c55c6d16ca3911c5f068c354bdce5a4f7e844",class:"expand-toggle",onClick:()=>this.handleToggleExpand(),title:this.isExpanded?"Collapse":"Expand",style:this.palette.length>6?{visibillity:"visible"}:{visibility:"hidden"}},s("kritzel-icon",{key:"33610ada109fe5d1d9cb2da4c70a60d672e3d6cb",name:this.isExpanded?"chevron-up":"chevron-down"}))),s("kritzel-stroke-size",{key:"9b095dd9436e46dd88a3485ceb2dafa5d06d1bc4",selectedSize:this.tool.size,onSizeChange:e=>this.handleSizeChange(e)}))}static get watchers(){return{tool:[{handleToolChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:var(--kritzel-pointer-cursor, pointer);font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}"}},[513,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},void 0,{tool:[{handleToolChange:0}]}]);function h(){"undefined"!=typeof customElements&&["kritzel-control-brush-config","kritzel-color","kritzel-color-palette","kritzel-icon","kritzel-stroke-size"].forEach((e=>{switch(e){case"kritzel-control-brush-config":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-color":customElements.get(l(e))||r();break;case"kritzel-color-palette":customElements.get(l(e))||a();break;case"kritzel-icon":customElements.get(l(e))||n();break;case"kritzel-stroke-size":customElements.get(l(e))||c()}}))}export{d as K,h as d}