kritzel-stencil 0.0.143 → 0.0.145

package/dist/components/{p-ByAzDzS5.js → p-D13ydJjo.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-C9hrbrUN.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
 
 const kritzelCursorTrailCss = ":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9000}";
@@ -73,7 +73,7 @@ const KritzelCursorTrail = /*@__PURE__*/ proxyCustomElement(class KritzelCursorT
         }
     }
     render() {
-        return (h(Host, { key: '10ef620f19d72a8a5c3a12d0d98686bc69308a30' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'd03403051e53422aaa28d6360aaa9c0391e3ef6a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '87003b14680b3cbca302e7b31ff57e74cc774e25' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'aa6460089c9f3157d2dea9396405b14ab8cc1710', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -94,7 +94,7 @@ const KritzelCursorTrail = /*@__PURE__*/ proxyCustomElement(class KritzelCursorT
         })))));
     }
     static get style() { return kritzelCursorTrailCss; }
-}, [257, "kritzel-cursor-trail", {
+}, [769, "kritzel-cursor-trail", {
         "core": [16],
         "cursorTrailPoints": [32],
         "isLeftButtonDown": [32]
@@ -114,6 +114,6 @@ function defineCustomElement() {
 }
 
 export { KritzelCursorTrail as K, defineCustomElement as d };
-//# sourceMappingURL=p-ByAzDzS5.js.map
+//# sourceMappingURL=p-D13ydJjo.js.map
 
-//# sourceMappingURL=p-ByAzDzS5.js.map
+//# sourceMappingURL=p-D13ydJjo.js.map

package/dist/components/{p-ByAzDzS5.js.map → p-D13ydJjo.js.map}

@@ -1 +1 @@
-{"file":"p-ByAzDzS5.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, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelCore } from '../../../classes/core/core.class';\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  @Prop() core: KritzelCore;\r\n\r\n  @State() cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n  @State() isLeftButtonDown: boolean = false;\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\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('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 0) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\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  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}
+{"file":"p-D13ydJjo.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, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelCore } from '../../../classes/core/core.class';\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  @Prop() core: KritzelCore;\r\n\r\n  @State() cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n  @State() isLeftButtonDown: boolean = false;\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\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('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 0) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\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  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-BFNwskCY.js → p-Dbp5YJIa.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
-import { d as defineCustomElement$1 } from './p-D27d2rKT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
+import { d as defineCustomElement$1 } from './p-Bhtn9qay.js';
 
 const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:focus{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
 
@@ -30,7 +30,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '8e2eb13668d8787827b10cee7c9daf2abdecc2c6' }, h("button", { key: '0773e7ef81bc972ba589333f4ac7e85d98737770', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'fa69c1a2535d44bfb871a4d719079d0f900cc6c7', name: "undo" })), h("button", { key: 'edc28968f3ec92467d6b4aaa095a71770413d657', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'd4cf72e2bda411fe9942d473c5e1ceae62a76074', name: "redo" })), h("div", { key: '8927237c6099a147495564657cdef97e7d35d7c1', class: "utility-separator" }), h("button", { key: 'e089819f7dd870165130322c3c4a9d754d4ed023', class: "utility-button" }, h("kritzel-icon", { key: 'a143770d1b3f8fdbe5c5b36c5d7eaab511cd8a4b', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '8109ccff01374c046d057021dfbcabdc632d829f' }, h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get style() { return kritzelUtilityPanelCss; }
 }, [257, "kritzel-utility-panel"]);
@@ -54,6 +54,6 @@ function defineCustomElement() {
 }
 
 export { KritzelUtilityPanel as K, defineCustomElement as d };
-//# sourceMappingURL=p-BFNwskCY.js.map
+//# sourceMappingURL=p-Dbp5YJIa.js.map
 
-//# sourceMappingURL=p-BFNwskCY.js.map
+//# sourceMappingURL=p-Dbp5YJIa.js.map

package/dist/components/{p-BFNwskCY.js.map → p-Dbp5YJIa.js.map}

@@ -1 +1 @@
-{"file":"p-BFNwskCY.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mrBAAmrB;;MCOrsB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AACrB,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 12px;\r\n  border-top-right-radius: 12px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:focus {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event() undo: EventEmitter<void>;\r\n  @Event() redo: EventEmitter<void>;\r\n  @Event() delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-Dbp5YJIa.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mrBAAmrB;;MCOrsB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AACrB,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 12px;\r\n  border-top-right-radius: 12px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:focus {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event() undo: EventEmitter<void>;\r\n  @Event() redo: EventEmitter<void>;\r\n  @Event() delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BEKicPnH.js → p-Dcf7tVJW.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { K as KritzelHTMLHelper } from './p-C6qB08BS.js';
 
@@ -175,12 +175,12 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '9c5cdf7126ff1148dd2364cce9d2524862e27d13', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '209a77246fedcea0c24882605487452ff5cc62ce' })));
+        return (h(Host, { key: 'a906e21c1257dfc6ed21257cce150db17048f04e', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '972544f2258f8b6dc8c691f3762d5ba806a57c41' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
     }; }
-}, [257, "kritzel-portal", {
+}, [769, "kritzel-portal", {
         "anchor": [16],
         "offsetX": [2, "offset-x"],
         "offsetY": [2, "offset-y"],
@@ -203,6 +203,6 @@ function defineCustomElement() {
 }
 
 export { KritzelPortal as K, defineCustomElement as d };
-//# sourceMappingURL=p-BEKicPnH.js.map
+//# sourceMappingURL=p-Dcf7tVJW.js.map
 
-//# sourceMappingURL=p-BEKicPnH.js.map
+//# sourceMappingURL=p-Dcf7tVJW.js.map

package/dist/components/{p-BEKicPnH.js.map → p-Dcf7tVJW.js.map}

@@ -1 +1 @@
-{"file":"p-BEKicPnH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-portal/kritzel-portal.tsx"],"sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() anchor: HTMLElement;\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.openPortal();\r\n      this.calculatePosition();\r\n      if (this.autoFocus) {\r\n        this.focusFirstElement();\r\n      }\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Prop() offsetX: number;\r\n  @Prop() offsetY: number;\r\n  @Prop() autoFocus: boolean = true;\r\n\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    if (event.key === 'Escape') {\r\n      this.anchor.focus();\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n\r\n    if (event.key === 'Tab') {\r\n      this.trapFocus(event);\r\n    }\r\n\r\n    if (event.key === 'Enter') {\r\n      const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n      if (activeElement?.click) {\r\n        event.preventDefault();\r\n        activeElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  @Listen('scroll', { target: 'window', capture: true })\r\n  handleWindowScroll() {\r\n    const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n    if (!isInViewport) {\r\n      this.anchor?.blur();\r\n      this.closePortal();\r\n      return;\r\n    }\r\n\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private portal: HTMLElement;\r\n  private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n  private defaultOffset = 0;\r\n  private minLeft = 0;\r\n\r\n  private focusFirstElement() {\r\n    requestAnimationFrame(() => {\r\n      this.firstFocusableElement?.focus?.();\r\n    });\r\n  }\r\n\r\n  private getDeepActiveElement(): Element {\r\n    let activeEl = document.activeElement;\r\n    while (activeEl?.shadowRoot?.activeElement) {\r\n      activeEl = activeEl.shadowRoot.activeElement;\r\n    }\r\n    return activeEl;\r\n  }\r\n\r\n  private trapFocus(event: KeyboardEvent) {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length === 0) return;\r\n\r\n    const firstFocusable = focusableElements[0];\r\n    const lastFocusable = focusableElements[focusableElements.length - 1];\r\n    const activeElement = this.getDeepActiveElement();\r\n\r\n    if (event.shiftKey) {\r\n      /* shift + tab */\r\n      if (activeElement === firstFocusable) {\r\n        lastFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    } else {\r\n      /* tab */\r\n      if (activeElement === lastFocusable) {\r\n        firstFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    }\r\n  }\r\n\r\n  private get firstFocusableElement(): HTMLElement | null {\r\n    const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n    if (!firstAssigned) return null;\r\n\r\n    const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);\r\n    return focusable[0] ?? firstAssigned;\r\n  }\r\n\r\n  private get lastAddedPortal(): HTMLElement | null {\r\n    const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n    return portals.length ? portals[portals.length - 1] : null;\r\n  }\r\n\r\n  private calculateLeft() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n\r\n    const offset = this.offsetX ?? this.defaultOffset;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n    if (left < this.minLeft) left = this.minLeft;\r\n    if (left > maxLeft) left = maxLeft;\r\n\r\n    return Math.round(left + window.scrollX);\r\n  }\r\n\r\n  private calculateTop() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n    const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private openPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', this.id);\r\n    this.portal.style.zIndex = '1';\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    this.portal.appendChild(this.host);\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private closePortal() {\r\n    const portal = document.getElementById(this.id);\r\n    if (!portal) return;\r\n    document.body.removeChild(portal);\r\n    this.host.remove();\r\n  }\r\n\r\n  private calculatePosition() {\r\n    if (!this.anchor || !this.portal) return;\r\n    const top = this.calculateTop();\r\n    const left = this.calculateLeft();\r\n    this.portal.style.top = `${top}px`;\r\n    this.portal.style.left = `${left}px`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-Dcf7tVJW.js","mappings":";;;;MAQa,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAGhB,IAAA,MAAM;AAEd,IAAA,aAAa,CAAC,QAAqB,EAAA;QACjC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,iBAAiB,EAAE;AACxB,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,IAAI,CAAC,iBAAiB,EAAE;;;aAErB;YACL,IAAI,CAAC,WAAW,EAAE;;;AAId,IAAA,OAAO;AACP,IAAA,OAAO;IACP,SAAS,GAAY,IAAI;AAExB,IAAA,KAAK;AAGd,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAClC,KAAK,CAAC,eAAe,EAAE;QAEvB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,MAAM;AACzD,QAAA,IAAI,CAAC,YAAY;YAAE;AAEnB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;QAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AAC/B,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACjB,IAAI,CAAC,WAAW,EAAE;;;AAKtB,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE;QAEvB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,MAAM;AACzD,QAAA,IAAI,CAAC,YAAY;YAAE;AAEnB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC1B,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACnB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACjB,IAAI,CAAC,WAAW,EAAE;;AAGpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;AAGvB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACzB,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAiB;AAChE,YAAA,IAAI,aAAa,EAAE,KAAK,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;gBACtB,aAAa,CAAC,KAAK,EAAE;;;;IAM3B,YAAY,GAAA;QACV,IAAI,CAAC,iBAAiB,EAAE;;IAI1B,kBAAkB,GAAA;QAChB,MAAM,YAAY,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC;QAEvE,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE;YACnB,IAAI,CAAC,WAAW,EAAE;YAClB;;QAGF,IAAI,CAAC,iBAAiB,EAAE;;AAGlB,IAAA,MAAM;AACN,IAAA,EAAE,GAAW,CAAU,OAAA,EAAA,YAAY,CAAC,YAAY,EAAE,EAAE;IACpD,aAAa,GAAG,CAAC;IACjB,OAAO,GAAG,CAAC;IAEX,iBAAiB,GAAA;QACvB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,CAAC,qBAAqB,EAAE,KAAK,IAAI;AACvC,SAAC,CAAC;;IAGI,oBAAoB,GAAA;AAC1B,QAAA,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa;AACrC,QAAA,OAAO,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE;AAC1C,YAAA,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa;;AAE9C,QAAA,OAAO,QAAQ;;AAGT,IAAA,SAAS,CAAC,KAAoB,EAAA;QACpC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC3E,QAAA,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE;AAEpC,QAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;AACrE,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE;AAEjD,QAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;;AAElB,YAAA,IAAI,aAAa,KAAK,cAAc,EAAE;gBACpC,aAAa,CAAC,KAAK,EAAE;gBACrB,KAAK,CAAC,cAAc,EAAE;;;aAEnB;;AAEL,YAAA,IAAI,aAAa,KAAK,aAAa,EAAE;gBACnC,cAAc,CAAC,KAAK,EAAE;gBACtB,KAAK,CAAC,cAAc,EAAE;;;;AAK5B,IAAA,IAAY,qBAAqB,GAAA;AAC/B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAA2B;AACpF,QAAA,MAAM,aAAa,GAAG,MAAM,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAA4B;AAC/F,QAAA,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,IAAI;QAE/B,MAAM,SAAS,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,aAAa,CAAC;AACvE,QAAA,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,aAAa;;AAGtC,IAAA,IAAY,eAAe,GAAA;AACzB,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAc,iBAAiB,CAAC,CAAC;AACrF,QAAA,OAAO,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI;;IAGpD,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,CAAC;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE;QACnD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE;QAEtD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa;AACjD,QAAA,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM;AAEhC,QAAA,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO;AACnE,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO;AAAE,YAAA,IAAI,GAAG,IAAI,CAAC,OAAO;QAC5C,IAAI,IAAI,GAAG,OAAO;YAAE,IAAI,GAAG,OAAO;QAElC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;;IAGlC,YAAY,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,CAAC;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE;QACnD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE;QACtD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa;AAEjD,QAAA,IAAI,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM;QAEjC,IAAI,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;YAChD,GAAG,GAAG,OAAO,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,MAAM;;QAGhD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;;IAGjC,UAAU,GAAA;QAChB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;QACvC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;QAC9B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACvC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK;QAC7B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK;QAC9B,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QAClC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;IAG3B,WAAW,GAAA;QACjB,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;AAC/C,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;;IAGZ,iBAAiB,GAAA;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE;AAClC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE;AAC/B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE;QACjC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;;IAGtC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EACtD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-portal/kritzel-portal.tsx"],"sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() anchor: HTMLElement;\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.openPortal();\r\n      this.calculatePosition();\r\n      if (this.autoFocus) {\r\n        this.focusFirstElement();\r\n      }\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Prop() offsetX: number;\r\n  @Prop() offsetY: number;\r\n  @Prop() autoFocus: boolean = true;\r\n\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    if (event.key === 'Escape') {\r\n      this.anchor.focus();\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n\r\n    if (event.key === 'Tab') {\r\n      this.trapFocus(event);\r\n    }\r\n\r\n    if (event.key === 'Enter') {\r\n      const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n      if (activeElement?.click) {\r\n        event.preventDefault();\r\n        activeElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  @Listen('scroll', { target: 'window', capture: true })\r\n  handleWindowScroll() {\r\n    const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n    if (!isInViewport) {\r\n      this.anchor?.blur();\r\n      this.closePortal();\r\n      return;\r\n    }\r\n\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private portal: HTMLElement;\r\n  private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n  private defaultOffset = 0;\r\n  private minLeft = 0;\r\n\r\n  private focusFirstElement() {\r\n    requestAnimationFrame(() => {\r\n      this.firstFocusableElement?.focus?.();\r\n    });\r\n  }\r\n\r\n  private getDeepActiveElement(): Element {\r\n    let activeEl = document.activeElement;\r\n    while (activeEl?.shadowRoot?.activeElement) {\r\n      activeEl = activeEl.shadowRoot.activeElement;\r\n    }\r\n    return activeEl;\r\n  }\r\n\r\n  private trapFocus(event: KeyboardEvent) {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length === 0) return;\r\n\r\n    const firstFocusable = focusableElements[0];\r\n    const lastFocusable = focusableElements[focusableElements.length - 1];\r\n    const activeElement = this.getDeepActiveElement();\r\n\r\n    if (event.shiftKey) {\r\n      /* shift + tab */\r\n      if (activeElement === firstFocusable) {\r\n        lastFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    } else {\r\n      /* tab */\r\n      if (activeElement === lastFocusable) {\r\n        firstFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    }\r\n  }\r\n\r\n  private get firstFocusableElement(): HTMLElement | null {\r\n    const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n    if (!firstAssigned) return null;\r\n\r\n    const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);\r\n    return focusable[0] ?? firstAssigned;\r\n  }\r\n\r\n  private get lastAddedPortal(): HTMLElement | null {\r\n    const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n    return portals.length ? portals[portals.length - 1] : null;\r\n  }\r\n\r\n  private calculateLeft() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n\r\n    const offset = this.offsetX ?? this.defaultOffset;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n    if (left < this.minLeft) left = this.minLeft;\r\n    if (left > maxLeft) left = maxLeft;\r\n\r\n    return Math.round(left + window.scrollX);\r\n  }\r\n\r\n  private calculateTop() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n    const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private openPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', this.id);\r\n    this.portal.style.zIndex = '1';\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    this.portal.appendChild(this.host);\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private closePortal() {\r\n    const portal = document.getElementById(this.id);\r\n    if (!portal) return;\r\n    document.body.removeChild(portal);\r\n    this.host.remove();\r\n  }\r\n\r\n  private calculatePosition() {\r\n    if (!this.anchor || !this.portal) return;\r\n    const top = this.calculateTop();\r\n    const left = this.calculateLeft();\r\n    this.portal.style.top = `${top}px`;\r\n    this.portal.style.left = `${left}px`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-CieOx1XL.js → p-EBtkRix7.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelHTMLHelper } from './p-C6qB08BS.js';
 
 const kritzelTooltipCss = ":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";
@@ -74,23 +74,23 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
         }
     }
     render() {
-        return (h(Host, { key: '72a6356a43a15a7abc9a46b0d22c3c62217791e8', style: {
+        return (h(Host, { key: '8c3aeff60625f43f129afa70367cdb7a68a4b271', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: '75f5350f23ada0eee009279eddd7d25273ad3740', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'ad999154289e933cac1fdc13392de2aec78811a8' }), h("div", { key: '6be3f5c24d42898920c339be2cd2f3dd8a82fa80', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'b22b606c2a836c2c9bbe21c6b470754753ccb309', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '783403f4b5560012c9f6bd184a8c5eb26428e148' }), h("div", { key: 'bb98400edc5c6e05fd4ed2a476a5821f93964b8e', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '37397c6245dd6b0def23e2611d118e0c4f5860ef', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '850a058d635113a7870f25fa288a6447394c53ed', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: 'dbf009c371d46ef0a36e27771758c66e817d9b22', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: 'bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -99,7 +99,7 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
             } })))));
     }
     static get style() { return kritzelTooltipCss; }
-}, [257, "kritzel-tooltip", {
+}, [769, "kritzel-tooltip", {
         "isVisible": [4, "is-visible"],
         "anchorElement": [16],
         "arrowSize": [2, "arrow-size"],
@@ -124,6 +124,6 @@ function defineCustomElement() {
 }
 
 export { KritzelTooltip as K, defineCustomElement as d };
-//# sourceMappingURL=p-CieOx1XL.js.map
+//# sourceMappingURL=p-EBtkRix7.js.map
 
-//# sourceMappingURL=p-CieOx1XL.js.map
+//# sourceMappingURL=p-EBtkRix7.js.map

package/dist/components/{p-CieOx1XL.js.map → p-EBtkRix7.js.map}

@@ -1 +1 @@
-{"file":"p-CieOx1XL.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,0cAA0c;;ACGpe,MAAM,iBAAiB,GAAG,GAAG;MAOhB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAGjB,SAAS,GAAY,KAAK;AAC1B,IAAA,aAAa;IACb,SAAS,GAAW,CAAC;IACrB,OAAO,GAAW,EAAE;AAEnB,IAAA,aAAa;IAEb,SAAS,GAAW,CAAC;IACrB,WAAW,GAAW,KAAK;AAC3B,IAAA,YAAY,GAAY,MAAM,CAAC,UAAU,GAAG,iBAAiB;AAGtE,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAG;AACtB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;QAC1C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AAC/B,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;;IAK7B,kBAAkB,GAAA;QAChB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB;QACzD,IAAI,CAAC,yBAAyB,EAAE;;AAIlC,IAAA,MAAM,YAAY,GAAA;QAChB,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC3E,QAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,YAAA,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;;;IAIhC,gBAAgB,GAAA;QACd,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB;QACzD,IAAI,CAAC,yBAAyB,EAAE;;IAGlC,mBAAmB,GAAA;QACjB,IAAI,CAAC,yBAAyB,EAAE;;IAG1B,mBAAmB,GAAA;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;QACxD,MAAM,gBAAgB,GAAG,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE;AACvD,QAAA,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC/B,YAAA,MAAM,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAgB;YACvD,YAAY,CAAC,KAAK,EAAE;;;IAIhB,yBAAyB,GAAA;QAC/B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE;YACxC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAC7D,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAgB;AAE7F,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,gBAAA,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC;gBACvD,IAAI,CAAC,WAAW,GAAG,CAAQ,KAAA,EAAA,EAAE,OAAO,IAAI,CAAC,SAAS,CAAA,GAAA,CAAK;;iBAClD;AACL,gBAAA,MAAM,WAAW,GAAG,cAAc,CAAC,qBAAqB,EAAE;AAC1D,gBAAA,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC;gBAC/E,IAAI,CAAC,WAAW,GAAG,CAAA,EAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAA,EAAA,CAAI;;;;IAK1G,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,UAAU,EAAE,sDAAsD;gBAClE,UAAU,EAAE,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,QAAQ;AACjD,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,CAAG,EAAA,IAAI,CAAC,SAAS,CAAA,EAAA,CAAI,GAAG,KAAK;gBACxD,YAAY,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAI,EAAA,CAAA;aACnD,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EACpE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,OAAO;gBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;AACtB,gBAAA,MAAM,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAI,EAAA,CAAA;AACnC,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;AACP,gBAAA,UAAU,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAsB,oBAAA,CAAA;AACnD,gBAAA,WAAW,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAsB,oBAAA,CAAA;AACpD,gBAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAoE,kEAAA,CAAA;AAChG,gBAAA,MAAM,EAAE,2CAA2C;AAClD,aAAA,EACI,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE;AACP,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAI,EAAA,CAAA;AAChC,gBAAA,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAI,EAAA,CAAA;AAC7B,gBAAA,eAAe,EAAE,2DAA2D;AAC5E,gBAAA,MAAM,EAAE,CAAG,EAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAI,EAAA,CAAA;AAChC,aAAA,EAAA,CACI,CACH,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() arrowSize: number = 8;\r\n  @Prop() offsetY: number = 24;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() arrowOffset: string = '0px';\r\n  @State() isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n\r\n      if (!this.isMobileView) {\r\n        this.positionX = anchorRect.left + anchorRect.width / 2;\r\n        this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \r\n      } else {\r\n        const tooltipRect = tooltipContent.getBoundingClientRect();\r\n        this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\r\n        this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: !this.isMobileView ? `${this.positionX}px` : '50%',\r\n          marginBottom: `${this.offsetY + this.arrowSize}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n          <div\r\n            class=\"tooltip-arrow-wrapper\"\r\n            style={{\r\n              position: 'fixed',\r\n              left: this.arrowOffset,\r\n              bottom: `-${this.arrowSize * 2}px`,\r\n            }}\r\n          >\r\n            <div\r\n              class=\"tooltip-arrow\"\r\n              style={{\r\n              borderLeft: `${this.arrowSize}px solid transparent`,\r\n              borderRight: `${this.arrowSize}px solid transparent`,\r\n              borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\r\n              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\r\n              }}\r\n            ></div>\r\n            <div\r\n              class=\"tooltip-arrow-rect\"\r\n              style={{\r\n              position: 'relative',\r\n              width: `${this.arrowSize * 2}px`,\r\n              height: `${this.arrowSize}px`,\r\n              backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\r\n              bottom: `${this.arrowSize * 2}px`,\r\n              }}\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-EBtkRix7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() arrowSize: number = 8;\r\n  @Prop() offsetY: number = 24;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() arrowOffset: string = '0px';\r\n  @State() isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n\r\n      if (!this.isMobileView) {\r\n        this.positionX = anchorRect.left + anchorRect.width / 2;\r\n        this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \r\n      } else {\r\n        const tooltipRect = tooltipContent.getBoundingClientRect();\r\n        this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\r\n        this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: !this.isMobileView ? `${this.positionX}px` : '50%',\r\n          marginBottom: `${this.offsetY + this.arrowSize}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n          <div\r\n            class=\"tooltip-arrow-wrapper\"\r\n            style={{\r\n              position: 'fixed',\r\n              left: this.arrowOffset,\r\n              bottom: `-${this.arrowSize * 2}px`,\r\n            }}\r\n          >\r\n            <div\r\n              class=\"tooltip-arrow\"\r\n              style={{\r\n              borderLeft: `${this.arrowSize}px solid transparent`,\r\n              borderRight: `${this.arrowSize}px solid transparent`,\r\n              borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\r\n              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\r\n              }}\r\n            ></div>\r\n            <div\r\n              class=\"tooltip-arrow-rect\"\r\n              style={{\r\n              position: 'relative',\r\n              width: `${this.arrowSize * 2}px`,\r\n              height: `${this.arrowSize}px`,\r\n              backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\r\n              bottom: `${this.arrowSize * 2}px`,\r\n              }}\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-gCHmJzc2.js → p-NXPGXBZ2.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
-import { d as defineCustomElement$1 } from './p-C_hSH2nN.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
+import { d as defineCustomElement$1 } from './p-8iFF5GHL.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:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
@@ -31,7 +31,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: 'd533725a8ab2019ae963959727283fbbf833c56a' }, h("div", { key: '7fb50c16d79e9b7330100b0f4e116f8f07b20827', class: {
+        return (h(Host, { key: '2ead7cd530ce181856e5f582f086a22a1fe69390' }, h("div", { key: 'fcc75b267f36e271d50615bfde42a29c28aa2536', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -42,7 +42,7 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
             }, onClick: () => this.handleColorClick(color) }, h("kritzel-color", { value: color })))))));
     }
     static get style() { return kritzelColorPaletteCss; }
-}, [257, "kritzel-color-palette", {
+}, [769, "kritzel-color-palette", {
         "colors": [16],
         "selectedColor": [1025, "selected-color"],
         "isExpanded": [4, "is-expanded"],
@@ -68,6 +68,6 @@ function defineCustomElement() {
 }
 
 export { KritzelColorPalette as K, defineCustomElement as d };
-//# sourceMappingURL=p-gCHmJzc2.js.map
+//# sourceMappingURL=p-NXPGXBZ2.js.map
 
-//# sourceMappingURL=p-gCHmJzc2.js.map
+//# sourceMappingURL=p-NXPGXBZ2.js.map

package/dist/components/{p-gCHmJzc2.js.map → p-NXPGXBZ2.js.map}

@@ -1 +1 @@
-{"file":"p-gCHmJzc2.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,m0BAAm0B;;MCOr1B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACtB,MAAM,GAAa,EAAE;IACJ,aAAa,GAAkB,IAAI;IACpD,UAAU,GAAY,KAAK;IAC3B,QAAQ,GAAY,KAAK;AAExB,IAAA,WAAW;AAEZ,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,cAAc;aACvB,EAAA,EAEA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,WACE,QAAQ,EAAE,CAAC,EACX,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:focus-visible {\r\n  outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.color-container:hover {\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n\r\n.color-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\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() colors: string[] = [];\r\n  @Prop({ mutable: true }) selectedColor: string | null = null;\r\n  @Prop() isExpanded: boolean = false;\r\n  @Prop() isOpaque: boolean = false;\r\n\r\n  @Event() 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              tabIndex={0}\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-NXPGXBZ2.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,m0BAAm0B;;MCOr1B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACtB,MAAM,GAAa,EAAE;IACJ,aAAa,GAAkB,IAAI;IACpD,UAAU,GAAY,KAAK;IAC3B,QAAQ,GAAY,KAAK;AAExB,IAAA,WAAW;AAEZ,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,cAAc;aACvB,EAAA,EAEA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,WACE,QAAQ,EAAE,CAAC,EACX,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:focus-visible {\r\n  outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.color-container:hover {\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n\r\n.color-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\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() colors: string[] = [];\r\n  @Prop({ mutable: true }) selectedColor: string | null = null;\r\n  @Prop() isExpanded: boolean = false;\r\n  @Prop() isOpaque: boolean = false;\r\n\r\n  @Event() 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              tabIndex={0}\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}

package/dist/components/{p-YqK8ch2R.js → p-n789Y3S-.js}

@@ -16,7 +16,6 @@ class KritzelWorkspace {
     static create(core, obj) {
         const workspace = new KritzelWorkspace(obj.id, obj.name, obj.viewport);
         workspace._core = core;
-        Object.assign(workspace, obj);
         return workspace;
     }
     addObject(obj) {
@@ -27,8 +26,8 @@ class KritzelWorkspace {
             __class__: this.__class__,
             id: this.id,
             name: this.name,
-            createdAt: this.createdAt,
-            updatedAt: this.updatedAt,
+            createdAt: this.createdAt.toISOString(),
+            updatedAt: this.updatedAt.toISOString(),
             viewport: this.viewport,
         };
     }
@@ -41,6 +40,6 @@ class KritzelWorkspace {
 }
 
 export { KritzelWorkspace as K };
-//# sourceMappingURL=p-YqK8ch2R.js.map
+//# sourceMappingURL=p-n789Y3S-.js.map
 
-//# sourceMappingURL=p-YqK8ch2R.js.map
+//# sourceMappingURL=p-n789Y3S-.js.map

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

@@ -0,0 +1 @@
+{"file":"p-n789Y3S-.js","mappings":"MAGa,gBAAgB,CAAA;IAC3B,SAAS,GAAG,kBAAkB;AAE9B,IAAA,EAAE;AACF,IAAA,IAAI;AACJ,IAAA,SAAS;AACT,IAAA,SAAS;AACT,IAAA,QAAQ;AAMR,IAAA,KAAK;AAEL,IAAA,WAAA,CAAY,EAAU,EAAE,IAAY,EAAG,QAAA,GAAsE,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAA;AACrJ,QAAA,IAAI,CAAC,EAAE,GAAG,EAAE;AACZ,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE;AAC3B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE;AAC3B,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;;AAG1B,IAAA,OAAO,MAAM,CAAC,IAAiB,EAAE,GAAG,EAAA;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC;AACtE,QAAA,SAAS,CAAC,KAAK,GAAG,IAAI;AACtB,QAAA,OAAO,SAAS;;AAGlB,IAAA,SAAS,CAAC,GAAQ,EAAA;QAChB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC;;IAGlC,SAAS,GAAA;QACP,OAAO;YACL,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;AACvC,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;YACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGH,IAAA,WAAW,CAAC,MAAW,EAAA;AACrB,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;AAC3C,QAAA,OAAO,IAAI;;AAEd;;;;","names":[],"sources":["src/classes/core/workspace.class.ts"],"sourcesContent":["import { KritzelCore } from \"../..\";\r\nimport { KritzelSerializable } from \"../../interfaces/serializable.interface\";\r\n\r\nexport class KritzelWorkspace implements KritzelSerializable{\r\n  __class__ = 'KritzelWorkspace';\r\n\r\n  id: string;\r\n  name: string;\r\n  createdAt: Date;\r\n  updatedAt: Date;\r\n  viewport: {\r\n    translateX: number;\r\n    translateY: number;\r\n    scale: number;\r\n  };\r\n\r\n  _core: KritzelCore;\r\n\r\n  constructor(id: string, name: string,  viewport: { translateX: number; translateY: number; scale: number } = { translateX: 0, translateY: 0, scale: 1 }) {\r\n    this.id = id;\r\n    this.name = name;\r\n    this.createdAt = new Date();\r\n    this.updatedAt = new Date();\r\n    this.viewport = viewport;\r\n  }\r\n\r\n  static create(core: KritzelCore, obj): KritzelWorkspace {\r\n    const workspace = new KritzelWorkspace(obj.id, obj.name, obj.viewport);\r\n    workspace._core = core;\r\n    return workspace;\r\n  }\r\n\r\n  addObject(obj: any): void {\r\n    this._core.engine.addObject(obj);\r\n  }\r\n\r\n  serialize(): any {\r\n    return {\r\n      __class__: this.__class__,\r\n      id: this.id,\r\n      name: this.name,\r\n      createdAt: this.createdAt.toISOString(),\r\n      updatedAt: this.updatedAt.toISOString(),\r\n      viewport: this.viewport,\r\n    };\r\n  }\r\n\r\n  deserialize(object: any): KritzelSerializable {\r\n    Object.assign(this, object);\r\n    this.createdAt = new Date(object.createdAt);\r\n    this.updatedAt = new Date(object.updatedAt);\r\n    return this;\r\n  }\r\n}\r\n"],"version":3}