kritzel-stencil 0.0.107 → 0.0.109

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

@@ -1 +1 @@
-{"file":"p-CZkSABuJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/classes/icon-registry.class.ts","src/components/shared/kritzel-icon/kritzel-icon.css?tag=kritzel-icon&encapsulation=shadow","src/components/shared/kritzel-icon/kritzel-icon.tsx"],"sourcesContent":["export class KritzelIconRegistry {\r\n  private static registry = new Map<string, string>();\r\n\r\n  public static register(name: string, svgContent: string): void {\r\n    if (this.registry.has(name)) {\r\n      console.warn(`[IconRegistry] Icon \"${name}\" is already registered. It will be overwritten.`);\r\n    }\r\n    this.registry.set(name, svgContent);\r\n  }\r\n\r\n  public static get(name: string): string | undefined {\r\n    return this.registry.get(name);\r\n  }\r\n\r\n  public static registerIcons(icons: { [key: string]: string }): void {\r\n    for (const name in icons) {\r\n      if (Object.prototype.hasOwnProperty.call(icons, name)) {\r\n        this.register(name, icons[name]);\r\n      }\r\n    }\r\n  }\r\n\r\n  public static has(name: string): boolean {\r\n    return this.registry.has(name);\r\n  }\r\n}\r\n\r\nKritzelIconRegistry.registerIcons({\r\n  'cursor': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z\"/></svg>',\r\n  'pen': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/></svg>',\r\n  'highlighter': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-highlighter-icon lucide-highlighter\"><path d=\"m9 11-6 6v3h9l3-3\"/><path d=\"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4\"/></svg>',\r\n  'eraser': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\"/><path d=\"M22 21H7\"/><path d=\"m5 11 9 9\"/></svg>',\r\n  'type': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/></svg>',\r\n  'image': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>',\r\n  'chevron-down': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>',\r\n  'chevron-up': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>',\r\n  'copy': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-copy-icon lucide-copy\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg>',\r\n  'paste': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-clipboard-paste-icon lucide-clipboard-paste\"><path d=\"M11 14h10\"/><path d=\"M16 4h2a2 2 0 0 1 2 2v1.344\"/><path d=\"m17 18 4-4-4-4\"/><path d=\"M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113\"/><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\"/></svg>',\r\n  'cut': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-scissors-icon lucide-scissors\"><circle cx=\"6\" cy=\"6\" r=\"3\"/><path d=\"M8.12 8.12 12 12\"/><path d=\"M20 4 8.12 15.88\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M14.8 14.8 20 20\"/></svg>',\r\n  'delete': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash2-icon lucide-trash-2\"><path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/></svg>',\r\n  'bring-to-front': '<svg  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line\"><path d=\"M5 3h14\"/><path d=\"m18 13-6-6-6 6\"/><path d=\"M12 7v14\"/></svg>',\r\n  'send-to-back': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line\"><path d=\"M12 17V3\"/><path d=\"m6 11 6 6 6-6\"/><path d=\"M19 21H5\"/></svg>',\r\n  'select-all': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer\"><path d=\"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z\"/><path d=\"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6\"/></svg>',\r\n  'download': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-download-icon lucide-download\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/></svg>',\r\n  'undo': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-undo-icon lucide-undo\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\r\n  'redo': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-redo-icon lucide-redo\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7\"/></svg>'\r\n});",":host {\r\n  display: inline-flex; /* Changed from block to inline-flex for better alignment */\r\n  justify-content: center; /* Center content horizontally */\r\n  align-items: center; /* Center content vertically */\r\n}\r\n\r\nspan {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%; /* Make span fill host width */\r\n  height: 100%; /* Make span fill host height */\r\n}\r\n\r\nspan > svg { /* Ensure SVG scales within the span */\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n","import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/icon-registry.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-icon',\r\n  styleUrl: 'kritzel-icon.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n  @Prop()\r\n  name: string;\r\n\r\n  @Prop()\r\n  label?: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  render() {\r\n    const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n    if (!svgContent) {\r\n      console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n      return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n    }\r\n\r\n    const styles = {\r\n      width: `${this.size}px`,\r\n      height: `${this.size}px`,\r\n    };\r\n\r\n    return (\r\n      <Host style={styles}>\r\n        <span\r\n          aria-hidden={!this.label}\r\n          role={this.label ? 'img' : undefined}\r\n          aria-label={this.label}\r\n          innerHTML={svgContent}\r\n        ></span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-CZkSABuJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/classes/registries/icon-registry.class.ts","src/components/shared/kritzel-icon/kritzel-icon.css?tag=kritzel-icon&encapsulation=shadow","src/components/shared/kritzel-icon/kritzel-icon.tsx"],"sourcesContent":["export class KritzelIconRegistry {\r\n  private static registry = new Map<string, string>();\r\n\r\n  public static register(name: string, svgContent: string): void {\r\n    if (this.registry.has(name)) {\r\n      console.warn(`[IconRegistry] Icon \"${name}\" is already registered. It will be overwritten.`);\r\n    }\r\n    this.registry.set(name, svgContent);\r\n  }\r\n\r\n  public static get(name: string): string | undefined {\r\n    return this.registry.get(name);\r\n  }\r\n\r\n  public static registerIcons(icons: { [key: string]: string }): void {\r\n    for (const name in icons) {\r\n      if (Object.prototype.hasOwnProperty.call(icons, name)) {\r\n        this.register(name, icons[name]);\r\n      }\r\n    }\r\n  }\r\n\r\n  public static has(name: string): boolean {\r\n    return this.registry.has(name);\r\n  }\r\n}\r\n\r\nKritzelIconRegistry.registerIcons({\r\n  'cursor': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z\"/></svg>',\r\n  'pen': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/></svg>',\r\n  'highlighter': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-highlighter-icon lucide-highlighter\"><path d=\"m9 11-6 6v3h9l3-3\"/><path d=\"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4\"/></svg>',\r\n  'eraser': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\"/><path d=\"M22 21H7\"/><path d=\"m5 11 9 9\"/></svg>',\r\n  'type': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/></svg>',\r\n  'image': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>',\r\n  'chevron-down': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>',\r\n  'chevron-up': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>',\r\n  'copy': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-copy-icon lucide-copy\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg>',\r\n  'paste': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-clipboard-paste-icon lucide-clipboard-paste\"><path d=\"M11 14h10\"/><path d=\"M16 4h2a2 2 0 0 1 2 2v1.344\"/><path d=\"m17 18 4-4-4-4\"/><path d=\"M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113\"/><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\"/></svg>',\r\n  'cut': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-scissors-icon lucide-scissors\"><circle cx=\"6\" cy=\"6\" r=\"3\"/><path d=\"M8.12 8.12 12 12\"/><path d=\"M20 4 8.12 15.88\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M14.8 14.8 20 20\"/></svg>',\r\n  'delete': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash2-icon lucide-trash-2\"><path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/></svg>',\r\n  'bring-to-front': '<svg  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line\"><path d=\"M5 3h14\"/><path d=\"m18 13-6-6-6 6\"/><path d=\"M12 7v14\"/></svg>',\r\n  'send-to-back': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line\"><path d=\"M12 17V3\"/><path d=\"m6 11 6 6 6-6\"/><path d=\"M19 21H5\"/></svg>',\r\n  'select-all': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer\"><path d=\"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z\"/><path d=\"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6\"/></svg>',\r\n  'download': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-download-icon lucide-download\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/></svg>',\r\n  'undo': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-undo-icon lucide-undo\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\r\n  'redo': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-redo-icon lucide-redo\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7\"/></svg>'\r\n});",":host {\r\n  display: inline-flex; /* Changed from block to inline-flex for better alignment */\r\n  justify-content: center; /* Center content horizontally */\r\n  align-items: center; /* Center content vertically */\r\n}\r\n\r\nspan {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%; /* Make span fill host width */\r\n  height: 100%; /* Make span fill host height */\r\n}\r\n\r\nspan > svg { /* Ensure SVG scales within the span */\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n","import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-icon',\r\n  styleUrl: 'kritzel-icon.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n  @Prop()\r\n  name: string;\r\n\r\n  @Prop()\r\n  label?: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  render() {\r\n    const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n    if (!svgContent) {\r\n      console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n      return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n    }\r\n\r\n    const styles = {\r\n      width: `${this.size}px`,\r\n      height: `${this.size}px`,\r\n    };\r\n\r\n    return (\r\n      <Host style={styles}>\r\n        <span\r\n          aria-hidden={!this.label}\r\n          role={this.label ? 'img' : undefined}\r\n          aria-label={this.label}\r\n          innerHTML={svgContent}\r\n        ></span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-DTcfnx4-.js → p-Ch6TgHX3.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
-import { K as KritzelBrushTool, a as KritzelTextTool } from './p-CesjDLvT.js';
+import { K as KritzelBrushTool, a as KritzelTextTool } from './p-7Ns73-wN.js';
 import { d as defineCustomElement$d } from './p-Ck2d5Wd1.js';
 import { d as defineCustomElement$c } from './p-DFhbw-Fr.js';
 import { d as defineCustomElement$b } from './p-DHT5gK0E.js';
@@ -14,7 +14,13 @@ import { d as defineCustomElement$3 } from './p-CPjl7Inl.js';
 import { d as defineCustomElement$2 } from './p-DInF8Iby.js';
 import { d as defineCustomElement$1 } from './p-Ddfewfv9.js';
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 8px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid hsl(0, 0%, 0%, 4.3%));border-radius:var(--kritzel-controls-border-radius, 8px);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, 8px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #0E1111);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
+class KritzelDevicesHelper {
+    static isTouchDevice() {
+        return window.matchMedia('(any-pointer: coarse)').matches;
+    }
+}
+
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 8px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid hsl(0, 0%, 0%, 4.3%));border-radius:var(--kritzel-controls-border-radius, 8px);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, 8px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #0E1111) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls extends H {
     constructor() {
@@ -26,6 +32,7 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         this.activeControl = null;
         this.firstConfig = null;
         this.tooltipVisible = false;
+        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.kritzelEngine = null;
     }
     get activeToolAsTextTool() {
@@ -106,16 +113,18 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (h(Host, { key: '2b13783ef0f1638ad76bfcef22c17c3eeb849d67' }, h("kritzel-utility-panel", { key: '1babeb88133cebc9057c85723b812b99152316c6', style: {
+        return (h(Host, { key: 'e5bfc1952235cb3524849733015d14e629f36f9d', class: {
+                mobile: this.isTouchDevice,
+            } }, h("kritzel-utility-panel", { key: '8b89423a1d1d4d93945f774f0867b2fd8bd4b0bf', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), h("div", { key: '8fafebdf6726dd2bffe85cb2b3ada5f4885a2bf8', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), h("div", { key: '8b58a76ff194663f312cfe55fd3e29e78b8067d1', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
-                        'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
+                        selected: ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
                     }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
             }
             if (control.type === 'divider') {
@@ -139,7 +148,8 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         "controls": [16],
         "activeControl": [1040, "active-control"],
         "firstConfig": [32],
-        "tooltipVisible": [32]
+        "tooltipVisible": [32],
+        "isTouchDevice": [32]
     }, [[4, "activeToolChange", "handleActiveToolChange"], [4, "click", "handleClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -221,6 +231,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-DTcfnx4-.js.map
+//# sourceMappingURL=p-Ch6TgHX3.js.map
 
-//# sourceMappingURL=p-DTcfnx4-.js.map
+//# sourceMappingURL=p-Ch6TgHX3.js.map

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

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