kritzel-stencil 0.0.105 → 0.0.106

package/dist/components/{p-C8KDwUb7.js → p-D9nf_Yw4.js}

@@ -12,7 +12,7 @@ const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H
         this.color = '#000000';
     }
     render() {
-        return (h(Host, { key: '6f25832892d8042464751360cc9e2307193f5407' }, h("div", { key: '3d2ec48a6a3b3e347c8cc1ab6f129bfacd984776', class: "font-preview", style: {
+        return (h(Host, { key: 'b4ebef665dacaca67e0a7574a15eae851e40ba3d' }, h("div", { key: '3af8906e1092fe333daf52da9e0da7a764fc47e3', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -39,6 +39,6 @@ function defineCustomElement() {
 }
 
 export { KritzelFont as K, defineCustomElement as d };
-//# sourceMappingURL=p-C8KDwUb7.js.map
+//# sourceMappingURL=p-D9nf_Yw4.js.map
 
-//# sourceMappingURL=p-C8KDwUb7.js.map
+//# sourceMappingURL=p-D9nf_Yw4.js.map

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

@@ -0,0 +1 @@
+{"file":"p-D9nf_Yw4.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wIAAwI;;MCOlJ,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAOE,QAAA,IAAU,CAAA,UAAA,GAAW,mBAAmB;AAGxC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAGjB,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAkB1B;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,gBAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;gBAC1B,KAAK,EAAE,IAAI,CAAC;AACb,aAAA,EAGG,EAAA,GAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font/kritzel-font.css?tag=kritzel-font&encapsulation=shadow","src/components/shared/kritzel-font/kritzel-font.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n.font-preview {\r\n  color: var(--kritzel-font-size-text-color, #333333);\r\n  line-height: 1;\r\n  text-align: center;\r\n  font-weight: bold;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font',\r\n  styleUrl: 'kritzel-font.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFont {\r\n  @Prop()\r\n  fontFamily: string = 'Arial, sans-serif';\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  @Prop()\r\n  color: string = '#000000';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"font-preview\"\r\n          style={{\r\n            fontFamily: this.fontFamily,\r\n            fontSize: `${this.size}px`,\r\n            color: this.color\r\n          }}\r\n        >\r\n          A\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-D31-QJwi.js → p-DIxwvThL.js}

@@ -1,18 +1,18 @@
 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-DT8_Rz-o.js';
-import { d as defineCustomElement$d } from './p-DaeIjoQm.js';
-import { d as defineCustomElement$c } from './p-_wFpvzNp.js';
-import { d as defineCustomElement$b } from './p-BJ5xxphF.js';
-import { d as defineCustomElement$a } from './p-BqUM5gV3.js';
-import { d as defineCustomElement$9 } from './p-BjqfG-5H.js';
-import { d as defineCustomElement$8 } from './p-DQHNxDS7.js';
-import { d as defineCustomElement$7 } from './p-C8KDwUb7.js';
-import { d as defineCustomElement$6 } from './p-D06w3u84.js';
-import { d as defineCustomElement$5 } from './p-BgUIonZF.js';
+import { K as KritzelBrushTool, a as KritzelTextTool } from './p-BcQCX1Z6.js';
+import { d as defineCustomElement$d } from './p-Ck2d5Wd1.js';
+import { d as defineCustomElement$c } from './p-Bhfk_puI.js';
+import { d as defineCustomElement$b } from './p-wUZba7Vi.js';
+import { d as defineCustomElement$a } from './p-JvUh5Cky.js';
+import { d as defineCustomElement$9 } from './p-BFlJumTk.js';
+import { d as defineCustomElement$8 } from './p-c6tIpE_t.js';
+import { d as defineCustomElement$7 } from './p-D9nf_Yw4.js';
+import { d as defineCustomElement$6 } from './p-B7P9QBiE.js';
+import { d as defineCustomElement$5 } from './p-I1jXruHK.js';
 import { d as defineCustomElement$4 } from './p-CZkSABuJ.js';
-import { d as defineCustomElement$3 } from './p-BYH2jNAX.js';
-import { d as defineCustomElement$2 } from './p-X3xYsp4r.js';
-import { d as defineCustomElement$1 } from './p-Ddfewfv9.js';
+import { d as defineCustomElement$3 } from './p-CF5pcRGS.js';
+import { d as defineCustomElement$2 } from './p-9IX8ss5J.js';
+import { d as defineCustomElement$1 } from './p-B1tJ3Woq.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}";
 
@@ -106,11 +106,11 @@ 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: 'ed654553a1d3f5d2b5e85e3b3bce4a5705cc51e3' }, h("kritzel-utility-panel", { key: '9db82dacbe7360acba1b58b15536c7fed0c1f0dd', 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: '193a4efd69c51425dc0c8b142c8fba7c6f133077', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
@@ -221,6 +221,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-D31-QJwi.js.map
+//# sourceMappingURL=p-DIxwvThL.js.map
 
-//# sourceMappingURL=p-D31-QJwi.js.map
+//# sourceMappingURL=p-DIxwvThL.js.map

package/dist/components/{p-D31-QJwi.js.map → p-DIxwvThL.js.map}

@@ -1 +1 @@
-{"file":"p-D31-QJwi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n.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.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #0E1111);\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff);\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\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  @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        <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}
+{"file":"p-DIxwvThL.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,kiFAAkiF;;MCchjF,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAN5B,IAAA,WAAA,GAAA;;;;;AAQE,QAAA,IAAQ,CAAA,QAAA,GAA4B,EAAE;AAGtC,QAAA,IAAa,CAAA,aAAA,GAAiC,IAAI;AAMlD,QAAA,IAAW,CAAA,WAAA,GAAsB,IAAI;AAGrC,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAK/B,QAAA,IAAa,CAAA,aAAA,GAAoC,IAAI;AA0LtD;AAxLC,IAAA,IAAI,oBAAoB,GAAA;;QACtB,OAAO,MAAA,IAAI,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAuB;;AAGpD,IAAA,IAAI,qBAAqB,GAAA;;QACvB,OAAO,MAAA,IAAI,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAwB;;AAGrD,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,MAAM,IAAI,CAAC,gBAAgB,EAAE;AAC7B,QAAA,MAAM,IAAI,CAAC,eAAe,EAAE;;IAG9B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;AAGnB,IAAA,MAAM,gBAAgB,GAAA;AAC5B,QAAA,MAAM,cAAc,CAAC,WAAW,CAAC,gBAAgB,CAAC;AAClD,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAE5E,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC;;;AAI1D,IAAA,MAAM,eAAe,GAAA;AAC3B,QAAA,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC7B,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,EAAE;gBAC/B,CAAC,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;;AAG1E,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,EAAE;gBAC9C,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAuB,CAAC;AACpE,gBAAA,IAAI,CAAC,aAAa,GAAG,CAAC;;AAGxB,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;AACvB,gBAAA,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;AAC7B,oBAAA,IAAI,CAAC,WAAW,GAAG,CAAC;;qBACf;AACL,oBAAA,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC;;;;;IAOvF,MAAM,sBAAsB,CAAC,KAAkB,EAAA;;QAC7C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI;AACzF,QAAA,OAAM,MAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAA;;AAItC,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAqB;AAE3C,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE;YAC9D;;AAGF,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;;AAG7B,IAAA,cAAc,CAAC,KAAY,EAAA;AACzB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;;;IAI3B,MAAM,kBAAkB,CAAC,OAA8B,EAAA;AACrD,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO;QAE5B,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,EAAE;AACtC,YAAA,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAuB,CAAC;;;AAIzF,IAAA,iBAAiB,CAAC,KAAiB,EAAA;QACjC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc;AAC1C,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;;IAG9B,MAAM,gBAAgB,CAAC,KAAkB,EAAA;QACvC,IAAI,CAAC,aAAa,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,aAAa,CAAE,EAAA,EAAA,IAAI,EAAE,KAAK,CAAC,MAAM,GAAE;AAClE,QAAA,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAE,IAAI,CAAC,aAAqB,CAAC,IAAI,CAAC;;IAG7E,MAAM,GAAA;;AACJ,QAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,MAAK,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,MAAK,IAAI;QAEnG,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,IAAI,EAAE,MAAM;AACb,aAAA,EACD,MAAM,EAAE,gBAAM,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,EAAE,CAAA,EAAA,EACxC,MAAM,EAAE,MAAK,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,EAAE,CAAA,EAAA,EACxC,QAAQ,EAAE,MAAK,UAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,EAAE,CAAA,EAAA,EACrB,CAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,IAAG;;AAC3B,YAAA,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE;AAC3B,gBAAA,QACE,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE;AACL,wBAAA,iBAAiB,EAAE,IAAI;wBACvB,UAAU,EAAE,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,OAAK,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,IAAI,CAAA;AACvD,qBAAA,EACD,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,OAAO,EAAE,MAAM,IAAG,EAAC,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,IAAI,CAAC,kBAAkB,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAA,OAAO,CAAC,CAAA,EAAA,EAAA,EAErD,CAAc,CAAA,cAAA,EAAA,EAAA,IAAI,EAAE,OAAO,CAAC,IAAI,EAAiB,CAAA,CAC1C;;AAIb,YAAA,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE;AAC9B,gBAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAA,CAAQ;;AAG/D,YAAA,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AAC9F,gBAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAA,EACrD,CAAA,CAAA,iBAAA,EAAA,EAAiB,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,2BAA2B,CAAgB,EAAA,EAC7I,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,EAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,OAAO,KAClC,CAAA,CAAA,8BAAA,EAAA,EAA8B,IAAI,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,KAAK,IAAI,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,IAAI,CAAC,gBAAgB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC,CAAA,EAAA,GAAiC,CACvJ,EAEA,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,KACjC,CAAA,CAAA,6BAAA,EAAA,EAA6B,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,KAAK,IAAG,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAA,KAAK,CAAC,CAAA,EAAA,EAAgC,CAAA,CACpJ,CACG,CACU,EAElB,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,KAAK,IAAG,EAAC,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,IAAI,CAAC,iBAAiB,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAA,KAAK,CAAC,CAAA,EAAA,EACjD,KAAK,EAAE;AACL,wBAAA,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS;wBACzD,aAAa,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM;AAC7C,qBAAA,EAAA,EAEA,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,gBAAgB,KAClD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,eAAA,EAAA,EACE,KAAK,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,qBAAqB,0CAAE,KAAK,EACxC,IAAI,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,qBAAqB,0CAAE,IAAI,EACtC,KAAK,EAAE;AACL,wBAAA,YAAY,EAAE,KAAK;AACnB,wBAAA,MAAM,EAAE,MAAM;AACf,qBAAA,EAAA,CACc,CACb,CACP,EAEA,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,eAAe,KACjD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,cAAA,EAAA,EACE,UAAU,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,oBAAoB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EACjD,IAAI,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,oBAAoB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EACzC,KAAK,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,oBAAoB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,EAC7B,CAAA,CACZ,CACP,EAEA,WAAW,IAAI,WAAK,KAAK,EAAC,WAAW,EAAO,CAAA,CACzC,CACF;;AAGZ,SAAC,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n.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.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #0E1111);\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff);\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\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  @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        <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}

package/dist/components/{p-CDhTT8u8.js → p-Ds3FhuuO.js}

@@ -78,7 +78,7 @@ const KritzelCursorTrail = /*@__PURE__*/ proxyCustomElement(class KritzelCursorT
         }
     }
     render() {
-        return (h(Host, { key: '604f5c39a01f3aea870861de0a93cd162302d7b2' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '6f69f0b5a871010581b73bff51b2ef7341389f5a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: 'c0a9b9ebe1634ba020024efed6446791d6a65a2f' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '50c73784eaffe743823bc6a75524fa4dc98566a8', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -118,6 +118,6 @@ function defineCustomElement() {
 }
 
 export { KritzelCursorTrail as K, defineCustomElement as d };
-//# sourceMappingURL=p-CDhTT8u8.js.map
+//# sourceMappingURL=p-Ds3FhuuO.js.map
 
-//# sourceMappingURL=p-CDhTT8u8.js.map
+//# sourceMappingURL=p-Ds3FhuuO.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Ds3FhuuO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css?tag=kritzel-cursor-trail&encapsulation=shadow","src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  pointer-events: none;\r\n  z-index: 9000;\r\n}\r\n","import { Component, Host, Listen, State, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-cursor-trail',\r\n  styleUrl: 'kritzel-cursor-trail.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelCursorTrail {\r\n  @State()\r\n  cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n\r\n  @State()\r\n  isLeftButtonDown: boolean = false;\r\n\r\n  private trailCleanupIntervalId: number;\r\n\r\n  private readonly TRAIL_DURATION_MS = 100;\r\n\r\n  private readonly MAX_TRAIL_POINTS = 50;\r\n\r\n  componentDidLoad() {\r\n    this.trailCleanupIntervalId = window.setInterval(() => {\r\n      const now = Date.now();\r\n      const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);\r\n      if (newTrailPoints.length !== this.cursorTrailPoints.length) {\r\n        this.cursorTrailPoints = newTrailPoints;\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.trailCleanupIntervalId) {\r\n      window.clearInterval(this.trailCleanupIntervalId);\r\n    }\r\n  }\r\n\r\n  @Listen('mousedown', { target: 'window' })\r\n  handleMouseDown(ev: MouseEvent) {\r\n    if (ev.button === 0) {\r\n      this.isLeftButtonDown = true;\r\n      this.cursorTrailPoints = [];\r\n    }\r\n  }\r\n\r\n  @Listen('mousemove', { target: 'window', passive: true })\r\n  handleMouseMove(ev: MouseEvent) {\r\n\r\n    if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n    const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    } else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('mouseup', { target: 'window' })\r\n  handleMouseUp(ev: MouseEvent) {\r\n    if (ev.button === 0) {\r\n      this.isLeftButtonDown = false;\r\n      this.cursorTrailPoints = [];\r\n    }\r\n  }\r\n\r\n  @Listen('touchstart', { target: 'window' })\r\n  handleTouchStart(ev: TouchEvent) {\r\n    if (ev.touches.length === 1) {\r\n      this.isLeftButtonDown = true;\r\n      this.cursorTrailPoints = [];\r\n    }\r\n  }\r\n\r\n  @Listen('touchmove', { target: 'window', passive: true })\r\n  handleTouchMove(ev: TouchEvent) {\r\n    if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n\r\n    const touch = ev.touches[0];\r\n    const newPoint = { x: touch.clientX, y: touch.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    }\r\n    else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('touchend', { target: 'window' })\r\n  handleTouchEnd(ev: TouchEvent) {\r\n    if (ev.touches.length === 0) {\r\n      this.isLeftButtonDown = false;\r\n      this.cursorTrailPoints = [];\r\n    }\r\n  }\r\n  \r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.cursorTrailPoints.length > 1 && (\r\n          <svg\r\n            class=\"cursor-trail-svg\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={{\r\n              position: 'absolute',\r\n              left: '0',\r\n              top: '0',\r\n              width: '100%',\r\n              height: '100%',\r\n              pointerEvents: 'none',\r\n              opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',\r\n              zIndex: '9000',\r\n            }}\r\n          >\r\n            {this.cursorTrailPoints.slice(1).map((point, index) => {\r\n              const prevPoint = this.cursorTrailPoints[index];\r\n              const now = Date.now();\r\n              const age = now - point.timestamp;\r\n              const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));\r\n\r\n              if (progress >= 1) return null;\r\n\r\n              const baseStrokeWidth = Math.max(2, 15 * (1 - progress));\r\n\r\n              return (\r\n                <line\r\n                  key={`trail-segment-${point.timestamp}`}\r\n                  x1={prevPoint.x.toString()}\r\n                  y1={prevPoint.y.toString()}\r\n                  x2={point.x.toString()}\r\n                  y2={point.y.toString()}\r\n                  stroke=\"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))\"\r\n                  stroke-width={baseStrokeWidth.toString()}\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              );\r\n            })}\r\n          </svg>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BgUIonZF.js → p-I1jXruHK.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
-import { d as defineCustomElement$1 } from './p-C8KDwUb7.js';
+import { d as defineCustomElement$1 } from './p-D9nf_Yw4.js';
 
 const kritzelFontSizeCss = ":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:pointer;border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #f0f0f0)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #0E1111);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
 
@@ -18,7 +18,7 @@ const KritzelFontSize = /*@__PURE__*/ proxyCustomElement(class KritzelFontSize e
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: 'daf7a1f16f96dfcbaaaa2ba43b77c99565c9893d' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -49,6 +49,6 @@ function defineCustomElement() {
 }
 
 export { KritzelFontSize as K, defineCustomElement as d };
-//# sourceMappingURL=p-BgUIonZF.js.map
+//# sourceMappingURL=p-I1jXruHK.js.map
 
-//# sourceMappingURL=p-BgUIonZF.js.map
+//# sourceMappingURL=p-I1jXruHK.js.map

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

@@ -0,0 +1 @@
+{"file":"p-I1jXruHK.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,4hBAA4hB;;MCO1iB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAOE,QAAA,IAAA,CAAA,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAGzC,QAAA,IAAY,CAAA,YAAA,GAAkB,IAAI;AAGlC,QAAA,IAAU,CAAA,UAAA,GAAW,OAAO;AA2B7B;AAtBS,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,cAAA,EAAA,EAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-size/kritzel-font-size.css?tag=kritzel-font-size&encapsulation=shadow","src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-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: 4px;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  border-radius: 50%;\r\n}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-font-size-hover-background-color, #f0f0f0);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #0E1111);\r\n  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font-size',\r\n  styleUrl: 'kritzel-font-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n  @Prop()\r\n  sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n\r\n  @Prop({ mutable: true })\r\n  selectedSize: number | null = null;\r\n\r\n  @Prop()\r\n  fontFamily: string = 'Arial';\r\n\r\n  @Event()\r\n  sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BqUM5gV3.js → p-JvUh5Cky.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
-import { d as defineCustomElement$6 } from './p-DaeIjoQm.js';
-import { d as defineCustomElement$5 } from './p-_wFpvzNp.js';
-import { d as defineCustomElement$4 } from './p-BJ5xxphF.js';
-import { d as defineCustomElement$3 } from './p-DQHNxDS7.js';
+import { d as defineCustomElement$6 } from './p-Ck2d5Wd1.js';
+import { d as defineCustomElement$5 } from './p-Bhfk_puI.js';
+import { d as defineCustomElement$4 } from './p-wUZba7Vi.js';
+import { d as defineCustomElement$3 } from './p-c6tIpE_t.js';
 import { d as defineCustomElement$2 } from './p-CZkSABuJ.js';
-import { d as defineCustomElement$1 } from './p-BYH2jNAX.js';
+import { d as defineCustomElement$1 } from './p-CF5pcRGS.js';
 
 const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;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)}";
 
@@ -41,14 +41,14 @@ const KritzelControlBrushConfig = /*@__PURE__*/ proxyCustomElement(class Kritzel
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
+        return (h(Host, { key: '29f0492264283879fd86195fc0db8e5a8f352a0f' }, h("div", { key: 'c5bde66ab565eb717bf302f3f97d08ed0b261289', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: 'e78ec70c5d0eb24933543e12389f1a3db4c3b8f2', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '9fbde247a8ed3cf43ef0bd0b269f8562dfac56a0', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '3cf37dd520fabd632cfd7d764254467d563670e1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'daa59edce48e683a52a39ae4062fe811908dc685', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: 'b71bfb1176c35c24c15827ebc89dcac56bb42f0e', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -106,6 +106,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControlBrushConfig as K, defineCustomElement as d };
-//# sourceMappingURL=p-BqUM5gV3.js.map
+//# sourceMappingURL=p-JvUh5Cky.js.map
 
-//# sourceMappingURL=p-BqUM5gV3.js.map
+//# sourceMappingURL=p-JvUh5Cky.js.map

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

@@ -0,0 +1 @@
+{"file":"p-JvUh5Cky.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css?tag=kritzel-control-brush-config&encapsulation=shadow","src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}","import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelBrushTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State()\r\n  palette: string[] = [];\r\n\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-brush-style type={this.tool.type} onTypeChange={event => this.handleTypeChange(event)}></kritzel-brush-style>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'} style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}>\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-color-palette\r\n          colors={this.palette}\r\n          selectedColor={this.tool.color}\r\n          isExpanded={this.isExpanded}\r\n          isOpaque={true}\r\n          onColorChange={color => this.handleColorChange(color)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-DQHNxDS7.js → p-c6tIpE_t.js}

@@ -83,7 +83,7 @@ const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown e
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
         };
-        return (h(Host, { key: '1e4df5425e205d3709d93d71f2e7a47844a5b0f2' }, h("div", { key: '6e0d6fa7b35d1d9d61cf2174828d0d0f0d242683', class: "dropdown-wrapper" }, h("slot", { key: '07565dc0982498a9b026bc36f285eb728b5c771b', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), h("select", { key: 'ba618a1166681f36aae554242192e375286ba7e8', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: '2731003fa214cb3aa968b48db36ab1816d563425', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
+        return (h(Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
     }
     static get watchers() { return {
         "value": ["externalValueChanged"],
@@ -117,6 +117,6 @@ function defineCustomElement() {
 }
 
 export { KritzelDropdown as K, defineCustomElement as d };
-//# sourceMappingURL=p-DQHNxDS7.js.map
+//# sourceMappingURL=p-c6tIpE_t.js.map
 
-//# sourceMappingURL=p-DQHNxDS7.js.map
+//# sourceMappingURL=p-c6tIpE_t.js.map

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

@@ -0,0 +1 @@
+{"file":"p-c6tIpE_t.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-dropdown/kritzel-dropdown.css?tag=kritzel-dropdown&encapsulation=shadow","src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex; /* Ensures the host shrinks/grows with the wrapper */\r\n  vertical-align: middle; /* Aligns with other inline-block or inline-flex elements */\r\n  width: 100%; /* Ensures the host takes full width of the parent */\r\n}\r\n\r\n.dropdown-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #333333;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 8px);\r\n  overflow: hidden;\r\n  height: 32px;\r\n  width: 100%;\r\n}\r\n\r\n.custom-select {\r\n  padding: 0 8px;\r\n  padding-right: 30px; \r\n  height: 100%;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  border-radius: 0; \r\n  border: none; \r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  outline: none;\r\n  font-size: inherit;\r\n  color: var(--kritzel-controls-text-color, #333333); /* Use CSS var with fallback */\r\n  -webkit-tap-highlight-color: transparent;\r\n\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n\r\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>');\r\n  background-size: 16px 16px;\r\n  background-repeat: no-repeat;\r\n  background-position: right 8px center; \r\n}\r\n\r\n.custom-select.has-suffix-border {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.custom-select.has-prefix-border {\r\n  border-left: 1px solid #333333; \r\n}\r\n\r\n::slotted(*) {\r\n  height: 100%; \r\n  box-sizing: border-box;\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\nexport interface DropdownOption {\r\n  value: string;\r\n  label: string;\r\n  style?: any; // For individual option styling, e.g., font family\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-dropdown',\r\n  styleUrl: 'kritzel-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelDropdown {\r\n  @Prop() \r\n  options: DropdownOption[] = [];\r\n  \r\n  @Prop() \r\n  value: string;\r\n  \r\n  @Prop() \r\n  width?: string;\r\n  \r\n  @Prop() \r\n  selectStyles?: any = {}; \r\n\r\n  @State() \r\n  internalValue: string;\r\n\r\n  @State() \r\n  hasSuffixContent: boolean = false;\r\n\r\n  @State()\r\n  hasPrefixContent: boolean = false;\r\n\r\n  @Event() \r\n  valueChanged: EventEmitter<string>;\r\n\r\n  private suffixSlotElement?: HTMLSlotElement;\r\n  private prefixSlotElement?: HTMLSlotElement;\r\n\r\n  componentWillLoad() {\r\n    this.updateInternalValue(this.value, false);\r\n    this.evaluateSuffixContent();\r\n    this.evaluatePrefixContent();\r\n  }\r\n\r\n  @Watch('value')\r\n  externalValueChanged(newValue: string) {\r\n    if (newValue !== this.internalValue) {\r\n      this.updateInternalValue(newValue, false);\r\n    }\r\n  }\r\n  \r\n  @Watch('options')\r\n  optionsChanged() {\r\n    this.updateInternalValue(this.internalValue, true);\r\n  }\r\n\r\n  private updateInternalValue(proposedValue: string, emitChange: boolean) {\r\n    let finalValue = proposedValue;\r\n    if (this.options && this.options.length > 0) {\r\n      const isValidValue = this.options.some(opt => opt.value === finalValue);\r\n      if (!finalValue || !isValidValue) {\r\n        finalValue = this.options[0].value;\r\n      }\r\n    } else {\r\n      finalValue = undefined;\r\n    }\r\n\r\n    if (this.internalValue !== finalValue) {\r\n      this.internalValue = finalValue;\r\n      if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {\r\n        this.valueChanged.emit(this.internalValue);\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleSelectChange = (event: Event) => {\r\n    const newValue = (event.target as HTMLSelectElement).value;\r\n    if (this.internalValue !== newValue) {\r\n      this.internalValue = newValue;\r\n      this.valueChanged.emit(this.internalValue);\r\n    }\r\n  };\r\n\r\n  private evaluateSuffixContent = () => {\r\n    if (this.suffixSlotElement) {\r\n      const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasSuffixContent !== newHasContent) {\r\n        this.hasSuffixContent = newHasContent;\r\n      }\r\n    } else {\r\n      if (this.hasSuffixContent !== false) {\r\n        this.hasSuffixContent = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  private evaluatePrefixContent = () => {\r\n    if (this.prefixSlotElement) {\r\n      const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasPrefixContent !== newHasContent) {\r\n        this.hasPrefixContent = newHasContent;\r\n      }\r\n    } else {\r\n      if (this.hasPrefixContent !== false) {\r\n        this.hasPrefixContent = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const selectClasses = {\r\n      'custom-select': true,\r\n      'has-suffix-border': this.hasSuffixContent,\r\n      'has-prefix-border': this.hasPrefixContent,\r\n    };\r\n\r\n    return (\r\n      <Host>\r\n        <div class=\"dropdown-wrapper\">\r\n          <slot\r\n            name=\"prefix\"\r\n            ref={el => this.prefixSlotElement = el as HTMLSlotElement}\r\n            onSlotchange={this.evaluatePrefixContent}\r\n          ></slot>\r\n          <select\r\n            class={selectClasses}\r\n            style={{ ...this.selectStyles, width: this.width }}\r\n            onInput={this.handleSelectChange}\r\n          >\r\n            {this.options.map(option => (\r\n              <option\r\n                value={option.value}\r\n                style={option.style}\r\n                selected={option.value === this.internalValue}\r\n              >\r\n                {option.label}\r\n              </option>\r\n            ))}\r\n          </select>\r\n          <slot \r\n            name=\"suffix\"\r\n            ref={el => this.suffixSlotElement = el as HTMLSlotElement}\r\n            onSlotchange={this.evaluateSuffixContent}\r\n          ></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BJ5xxphF.js → p-wUZba7Vi.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
-import { d as defineCustomElement$1 } from './p-_wFpvzNp.js';
+import { d as defineCustomElement$1 } from './p-Bhfk_puI.js';
 
 const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.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}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #0E1111);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
@@ -28,7 +28,7 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', class: {
+        return (h(Host, { key: '9590fbda0cb20e767880c49323350b12c7d287e4' }, h("div", { key: '9fd8699050018a90919c0045630b766183abb42e', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -65,6 +65,6 @@ function defineCustomElement() {
 }
 
 export { KritzelColorPalette as K, defineCustomElement as d };
-//# sourceMappingURL=p-BJ5xxphF.js.map
+//# sourceMappingURL=p-wUZba7Vi.js.map
 
-//# sourceMappingURL=p-BJ5xxphF.js.map
+//# sourceMappingURL=p-wUZba7Vi.js.map

package/dist/components/{p-BJ5xxphF.js.map → p-wUZba7Vi.js.map}

@@ -1 +1 @@
-{"file":"p-BJ5xxphF.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,+tBAA+tB;;MCOjvB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAOE,QAAA,IAAM,CAAA,MAAA,GAAa,EAAE;AAGrB,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AAGnC,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAG3B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAgD1B;AA3CS,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGtB,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,CAAC;QACtB,MAAM,SAAS,GAAG,EAAE;QACpB,MAAM,GAAG,GAAG,CAAC;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAC7D,QAAA,OAAO,CAAG,EAAA,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI;;IAG3D,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE;AACT,aAAA,EAEA,EAAA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,EAE3C,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EAAkB,CAAA,CACzC,CACP,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color-palette/kritzel-color-palette.css?tag=kritzel-color-palette&encapsulation=shadow","src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.color-grid {\r\n  width: 100%;\r\n  display: grid;\r\n  grid-template-columns: repeat(6, 32px);\r\n  gap: 8px;\r\n  justify-items: center;\r\n  overflow: hidden;\r\n  height: 40px;\r\n  transition: height 0.1s ease-in-out;\r\n}\r\n\r\n.color-grid.expanded {\r\n  height: 500px;\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}\r\n\r\n.color-container:hover {\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);\r\n}\r\n\r\n.color-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #0E1111);\r\n  background-color: var(--kritzel-color-palette-selected-background-color);\r\n}\r\n\r\n\r\n","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color-palette',\r\n  styleUrl: 'kritzel-color-palette.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n  @Prop()\r\n  colors: string[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  selectedColor: string | null = null;\r\n\r\n  @Prop()\r\n  isExpanded: boolean = false;\r\n\r\n  @Prop()\r\n  isOpaque: boolean = false;\r\n\r\n  @Event()\r\n  colorChange: EventEmitter<string>;\r\n\r\n  private handleColorClick(color: string) {\r\n    this.selectedColor = color;\r\n    this.colorChange.emit(color);\r\n  }\r\n\r\n  private calculateHeight(): string {\r\n    const colorsPerRow = 6;\r\n    const rowHeight = 32;\r\n    const gap = 8;\r\n    const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n    return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n  }\r\n\r\n  render() {\r\n    const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n    const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={{\r\n            'color-grid': true,\r\n            'expanded': this.isExpanded,\r\n          }}\r\n          style={{\r\n            height: expandedHeight\r\n          }}\r\n        >\r\n          {displayedColors.map(color => (\r\n            <div\r\n              class={{\r\n                'color-container': true,\r\n                'selected': this.selectedColor === color,\r\n              }}\r\n              onClick={() => this.handleColorClick(color)}\r\n            >\r\n              <kritzel-color value={color}></kritzel-color>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-wUZba7Vi.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,+tBAA+tB;;MCOjvB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAOE,QAAA,IAAM,CAAA,MAAA,GAAa,EAAE;AAGrB,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AAGnC,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAG3B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAgD1B;AA3CS,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGtB,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,CAAC;QACtB,MAAM,SAAS,GAAG,EAAE;QACpB,MAAM,GAAG,GAAG,CAAC;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAC7D,QAAA,OAAO,CAAG,EAAA,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI;;IAG3D,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE;AACT,aAAA,EAEA,EAAA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,EAE3C,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EAAkB,CAAA,CACzC,CACP,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color-palette/kritzel-color-palette.css?tag=kritzel-color-palette&encapsulation=shadow","src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.color-grid {\r\n  width: 100%;\r\n  display: grid;\r\n  grid-template-columns: repeat(6, 32px);\r\n  gap: 8px;\r\n  justify-items: center;\r\n  overflow: hidden;\r\n  height: 40px;\r\n  transition: height 0.1s ease-in-out;\r\n}\r\n\r\n.color-grid.expanded {\r\n  height: 500px;\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}\r\n\r\n.color-container:hover {\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);\r\n}\r\n\r\n.color-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #0E1111);\r\n  background-color: var(--kritzel-color-palette-selected-background-color);\r\n}\r\n\r\n\r\n","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color-palette',\r\n  styleUrl: 'kritzel-color-palette.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n  @Prop()\r\n  colors: string[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  selectedColor: string | null = null;\r\n\r\n  @Prop()\r\n  isExpanded: boolean = false;\r\n\r\n  @Prop()\r\n  isOpaque: boolean = false;\r\n\r\n  @Event()\r\n  colorChange: EventEmitter<string>;\r\n\r\n  private handleColorClick(color: string) {\r\n    this.selectedColor = color;\r\n    this.colorChange.emit(color);\r\n  }\r\n\r\n  private calculateHeight(): string {\r\n    const colorsPerRow = 6;\r\n    const rowHeight = 32;\r\n    const gap = 8;\r\n    const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n    return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n  }\r\n\r\n  render() {\r\n    const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n    const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={{\r\n            'color-grid': true,\r\n            'expanded': this.isExpanded,\r\n          }}\r\n          style={{\r\n            height: expandedHeight\r\n          }}\r\n        >\r\n          {displayedColors.map(color => (\r\n            <div\r\n              class={{\r\n                'color-container': true,\r\n                'selected': this.selectedColor === color,\r\n              }}\r\n              onClick={() => this.handleColorClick(color)}\r\n            >\r\n              <kritzel-color value={color}></kritzel-color>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}