kritzel-stencil 0.0.125 → 0.0.126

package/dist/stencil/index.esm.js

@@ -1,2 +1,17 @@
-export{D as DEFAULT_BRUSH_CONFIG,e as DEFAULT_TEXT_CONFIG,K as KritzelBrushTool,d as KritzelEraserTool,s as KritzelImage,f as KritzelImageTool,r as KritzelPath,c as KritzelSelectionTool,q as KritzelText,a as KritzelTextTool}from"./p-B_0CRlFw.js";
+export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './brush-tool.class-D1U3x9_Y.js';
+export { a as KritzelEraserTool, K as KritzelImage, b as KritzelImageTool, c as KritzelSelectionTool } from './image-tool.class-uKAmXFSl.js';
+export { D as DEFAULT_BRUSH_CONFIG, a as DEFAULT_TEXT_CONFIG } from './default-text-tool.config-DvOZmpuR.js';
+import './event-button.enum-D8W6LE-c.js';
+
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+//# sourceMappingURL=index.esm.js.map
+
 //# sourceMappingURL=index.esm.js.map

package/dist/stencil/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.esm.js","sources":["src/index.ts"],"sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport type * from './components';\r\n\r\nexport * from './classes/objects/text.class';\r\nexport * from './classes/objects/path.class';\r\nexport * from './classes/objects/image.class';\r\n\r\nexport * from './classes/tools/brush-tool.class';\r\nexport * from './classes/tools/eraser-tool.class';\r\nexport * from './classes/tools/image-tool.class';\r\nexport * from './classes/tools/text-tool.class';\r\nexport * from './classes/tools/selection-tool.class';\r\n\r\nexport * from './interfaces/toolbar-control.interface';\r\n\r\nexport * from './configs/default-brush-tool.config';\r\nexport * from './configs/default-text-tool.config';\r\n\r\n\r\n\r\n"],"names":[],"mappings":";;;;;AAAA;;;;;;;;AAQG"}

package/dist/stencil/kritzel-brush-style.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-brush-style.entry.esm.js","sources":["src/components/shared/kritzel-brush-style/kritzel-brush-style.css?tag=kritzel-brush-style&encapsulation=shadow","src/components/shared/kritzel-brush-style/kritzel-brush-style.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  width: 100%;\r\n}\r\n\r\n.brush-style-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 32px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: default;\r\n  border-radius: 0; \r\n  color: var(--control-text-color);\r\n  font-weight: bold;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.font-style-button:not(:last-child) {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.font-style-button:hover {\r\n  background-color: var(--control-hover-bg);\r\n}\r\n\r\n.font-style-button:active {\r\n  background-color: var(--control-active-bg);\r\n}\r\n\r\n.font-style-button.selected,\r\n.font-style-button.selected:hover,\r\n.font-style-button.selected:active {\r\n  background-color: var(--control-selected-bg);\r\n  color: var(--control-selected-color);\r\n}","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\nimport { DropdownOption } from '../kritzel-dropdown/kritzel-dropdown'; // Import DropdownOption\r\n\r\nexport interface BrushStyleOption extends DropdownOption {}\r\n\r\n@Component({\r\n  tag: 'kritzel-brush-style',\r\n  styleUrl: 'kritzel-brush-style.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelBrushStyle {\r\n  @Prop()\r\n  type: 'pen' | 'highlighter' = 'pen';\r\n\r\n  @Prop() brushOptions: BrushStyleOption[] = [\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ];\r\n\r\n  @Event()\r\n  typeChange: EventEmitter<'pen' | 'highlighter'>;\r\n\r\n  handleDropdownValueChange(event: CustomEvent<string>) {\r\n    this.typeChange.emit(event.detail as 'pen' | 'highlighter');\r\n  }\r\n\r\n  render() {\r\n    const dropdownOptions: DropdownOption[] = this.brushOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown options={dropdownOptions} value={this.type} onValueChanged={event => this.handleDropdownValueChange(event)}>\r\n          <button class=\"brush-style-button\" slot=\"prefix\">\r\n            <kritzel-icon name={this.type} size={16}></kritzel-icon>\r\n          </button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,wuBAAwuB;;MCUxvB,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOE,QAAA,IAAI,CAAA,IAAA,GAA0B,KAAK;QAE3B,IAAA,CAAA,YAAY,GAAuB;AACzC,YAAA,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;AAC9B,YAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;SAC/C;AAyBF;AApBC,IAAA,yBAAyB,CAAC,KAA0B,EAAA;QAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAA+B,CAAC;;IAG7D,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,KAAK;YACzE,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACpB,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAA,EAC1H,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9C,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAiB,CAAA,CACjD,CACQ,CACd;;;;;;;"}

package/dist/stencil/kritzel-brush-style.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-Df69oUcb.js';
+
+const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
+
+const KritzelBrushStyle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.typeChange = createEvent(this, "typeChange", 7);
+        this.type = 'pen';
+        this.brushOptions = [
+            { value: 'pen', label: 'Pen' },
+            { value: 'highlighter', label: 'Highlighter' },
+        ];
+    }
+    handleDropdownValueChange(event) {
+        this.typeChange.emit(event.detail);
+    }
+    render() {
+        const dropdownOptions = this.brushOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+        }));
+        return (h(Host, { key: 'cb1a35a850341570c3278dd612c0038e69e26539' }, h("kritzel-dropdown", { key: '3553d0f5e2cdd413df57d379e81a17ba3bc7b432', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: '2c7c590440bcfbcd62b096e524c59fce9b3ace24', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: '20de59241a1806392b6083871d27b98e500d2b83', name: this.type, size: 16 })))));
+    }
+};
+KritzelBrushStyle.style = kritzelBrushStyleCss;
+
+export { KritzelBrushStyle as kritzel_brush_style };
+//# sourceMappingURL=kritzel-brush-style.entry.esm.js.map
+
+//# sourceMappingURL=kritzel-brush-style.entry.js.map

package/dist/stencil/kritzel-brush-style.entry.js.map

@@ -0,0 +1 @@
+{"file":"kritzel-brush-style.entry.esm.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,wuBAAwuB;;MCUxvB,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOE,QAAA,IAAI,CAAA,IAAA,GAA0B,KAAK;QAE3B,IAAA,CAAA,YAAY,GAAuB;AACzC,YAAA,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;AAC9B,YAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;SAC/C;AAyBF;AApBC,IAAA,yBAAyB,CAAC,KAA0B,EAAA;QAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAA+B,CAAC;;IAG7D,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,KAAK;YACzE,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACpB,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAA,EAC1H,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9C,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAiB,CAAA,CACjD,CACQ,CACd;;;;;;;","names":[],"sources":["src/components/shared/kritzel-brush-style/kritzel-brush-style.css?tag=kritzel-brush-style&encapsulation=shadow","src/components/shared/kritzel-brush-style/kritzel-brush-style.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  width: 100%;\r\n}\r\n\r\n.brush-style-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 32px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: default;\r\n  border-radius: 0; \r\n  color: var(--control-text-color);\r\n  font-weight: bold;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.font-style-button:not(:last-child) {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.font-style-button:hover {\r\n  background-color: var(--control-hover-bg);\r\n}\r\n\r\n.font-style-button:active {\r\n  background-color: var(--control-active-bg);\r\n}\r\n\r\n.font-style-button.selected,\r\n.font-style-button.selected:hover,\r\n.font-style-button.selected:active {\r\n  background-color: var(--control-selected-bg);\r\n  color: var(--control-selected-color);\r\n}","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\nimport { DropdownOption } from '../kritzel-dropdown/kritzel-dropdown'; // Import DropdownOption\r\n\r\nexport interface BrushStyleOption extends DropdownOption {}\r\n\r\n@Component({\r\n  tag: 'kritzel-brush-style',\r\n  styleUrl: 'kritzel-brush-style.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelBrushStyle {\r\n  @Prop()\r\n  type: 'pen' | 'highlighter' = 'pen';\r\n\r\n  @Prop() brushOptions: BrushStyleOption[] = [\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ];\r\n\r\n  @Event()\r\n  typeChange: EventEmitter<'pen' | 'highlighter'>;\r\n\r\n  handleDropdownValueChange(event: CustomEvent<string>) {\r\n    this.typeChange.emit(event.detail as 'pen' | 'highlighter');\r\n  }\r\n\r\n  render() {\r\n    const dropdownOptions: DropdownOption[] = this.brushOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown options={dropdownOptions} value={this.type} onValueChanged={event => this.handleDropdownValueChange(event)}>\r\n          <button class=\"brush-style-button\" slot=\"prefix\">\r\n            <kritzel-icon name={this.type} size={16}></kritzel-icon>\r\n          </button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/stencil/kritzel-color-palette.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-color-palette.entry.esm.js","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, #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()\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"],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,GAAG,+tBAA+tB;;MCOjvB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;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;;;;;;;"}

package/dist/{components/p-Bn5P7YQn.js → stencil/kritzel-color-palette.entry.js}

@@ -1,14 +1,11 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DJN0U8pI.js';
-import { d as defineCustomElement$1 } from './p-D0sLslUq.js';
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-Df69oUcb.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, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
-const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorPalette extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.colorChange = createEvent(this, "colorChange");
+const KritzelColorPalette = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colorChange = createEvent(this, "colorChange", 7);
         this.colors = [];
         this.selectedColor = null;
         this.isExpanded = false;
@@ -28,7 +25,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: '08db849694a7194e355bde0abb174aa995423535' }, h("div", { key: '272399b8d9dfdb9db61ed1a694344167e7a612ea', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -38,33 +35,10 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
                 'selected': this.selectedColor === color,
             }, onClick: () => this.handleColorClick(color) }, h("kritzel-color", { value: color })))))));
     }
-    static get style() { return kritzelColorPaletteCss; }
-}, [257, "kritzel-color-palette", {
-        "colors": [16],
-        "selectedColor": [1025, "selected-color"],
-        "isExpanded": [4, "is-expanded"],
-        "isOpaque": [4, "is-opaque"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-color-palette", "kritzel-color"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-color-palette":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelColorPalette);
-            }
-            break;
-        case "kritzel-color":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
+};
+KritzelColorPalette.style = kritzelColorPaletteCss;
 
-export { KritzelColorPalette as K, defineCustomElement as d };
-//# sourceMappingURL=p-Bn5P7YQn.js.map
+export { KritzelColorPalette as kritzel_color_palette };
+//# sourceMappingURL=kritzel-color-palette.entry.esm.js.map
 
-//# sourceMappingURL=p-Bn5P7YQn.js.map
+//# sourceMappingURL=kritzel-color-palette.entry.js.map

package/dist/stencil/kritzel-color-palette.entry.js.map

@@ -0,0 +1 @@
+{"file":"kritzel-color-palette.entry.esm.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,+tBAA+tB;;MCOjvB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;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":[],"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, #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()\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}

package/dist/stencil/kritzel-color.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-color.entry.esm.js","sources":["src/components/shared/kritzel-color/kritzel-color.css?tag=kritzel-color&encapsulation=shadow","src/components/shared/kritzel-color/kritzel-color.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n}\r\n\r\n.checkerboard-bg {\r\n  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.color-circle {\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 50%;\r\n  box-sizing: border-box;\r\n  display: block;\r\n}\r\n\r\n.color-circle.white {\r\n  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);\r\n}","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color',\r\n  styleUrl: 'kritzel-color.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColor {\r\n  @Prop()\r\n  value: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  private isLightColor(hexColor: string): boolean {\r\n    if (!hexColor) return false;\r\n\r\n    let r = 0,\r\n      g = 0,\r\n      b = 0;\r\n\r\n    let sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;\r\n\r\n    if (sanitizedHex.length === 3) {\r\n      r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);\r\n      g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);\r\n      b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);\r\n    } else if (sanitizedHex.length === 6) {\r\n      r = parseInt(sanitizedHex.substring(0, 2), 16);\r\n      g = parseInt(sanitizedHex.substring(2, 4), 16);\r\n      b = parseInt(sanitizedHex.substring(4, 6), 16);\r\n    } else {\r\n      return false;\r\n    }\r\n\r\n    if (isNaN(r) || isNaN(g) || isNaN(b)) {\r\n      return false;\r\n    }\r\n\r\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\r\n\r\n    return luminance > 220;\r\n  }\r\n\r\n  render() {\r\n    const isColorVeryLight = this.isLightColor(this.value);\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"checkerboard-bg\"\r\n          style={{\r\n            width: `${this.size}px`,\r\n            height: `${this.size}px`,\r\n            borderRadius: '50%',\r\n            display: 'inline-block',\r\n            position: 'relative',\r\n          }}\r\n        >\r\n          <div\r\n            class={{\r\n              'color-circle': true,\r\n              'white': isColorVeryLight,\r\n            }}\r\n            style={{\r\n              backgroundColor: this.value,\r\n              width: `${this.size}px`,\r\n              height: `${this.size}px`,\r\n              borderRadius: '50%',\r\n              position: 'absolute',\r\n              top: '0',\r\n              left: '0',\r\n              display: 'inline-block',\r\n            }}\r\n          ></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/{components/p-D0sLslUq.js → stencil/kritzel-color.entry.js}

@@ -1,12 +1,10 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-DJN0U8pI.js';
+import { r as registerInstance, h, d as Host } from './index-Df69oUcb.js';
 
 const kritzelColorCss = ":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";
 
-const KritzelColor = /*@__PURE__*/ proxyCustomElement(class KritzelColor extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const KritzelColor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.size = 24;
     }
     isLightColor(hexColor) {
@@ -35,13 +33,13 @@ const KritzelColor = /*@__PURE__*/ proxyCustomElement(class KritzelColor extends
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: '19ad3872a132c885c612dc3b96698a0c8dc7214d' }, h("div", { key: 'f67108e82396cbaa3d070c8dfc83da2b080ddf47', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'b73dbe1c4394a9467139ed27ed8310f94f635889' }, h("div", { key: 'd0c6149041ca6c7a1627ed8d4d829171542c9447', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '1af0cc3e9f6eebc04cae2367510ef3b98420a818', class: {
+            } }, h("div", { key: '209978e2cba8ab02c9ce4d9013d3855d0c245412', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -55,26 +53,10 @@ const KritzelColor = /*@__PURE__*/ proxyCustomElement(class KritzelColor extends
                 display: 'inline-block',
             } }))));
     }
-    static get style() { return kritzelColorCss; }
-}, [257, "kritzel-color", {
-        "value": [1],
-        "size": [2]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-color"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-color":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelColor);
-            }
-            break;
-    } });
-}
+};
+KritzelColor.style = kritzelColorCss;
 
-export { KritzelColor as K, defineCustomElement as d };
-//# sourceMappingURL=p-D0sLslUq.js.map
+export { KritzelColor as kritzel_color };
+//# sourceMappingURL=kritzel-color.entry.esm.js.map
 
-//# sourceMappingURL=p-D0sLslUq.js.map
+//# sourceMappingURL=kritzel-color.entry.js.map

package/dist/stencil/kritzel-color.entry.js.map

@@ -0,0 +1 @@
+{"file":"kritzel-color.entry.esm.js","mappings":"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","names":[],"sources":["src/components/shared/kritzel-color/kritzel-color.css?tag=kritzel-color&encapsulation=shadow","src/components/shared/kritzel-color/kritzel-color.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n}\r\n\r\n.checkerboard-bg {\r\n  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.color-circle {\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 50%;\r\n  box-sizing: border-box;\r\n  display: block;\r\n}\r\n\r\n.color-circle.white {\r\n  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);\r\n}","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color',\r\n  styleUrl: 'kritzel-color.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColor {\r\n  @Prop()\r\n  value: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  private isLightColor(hexColor: string): boolean {\r\n    if (!hexColor) return false;\r\n\r\n    let r = 0,\r\n      g = 0,\r\n      b = 0;\r\n\r\n    let sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;\r\n\r\n    if (sanitizedHex.length === 3) {\r\n      r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);\r\n      g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);\r\n      b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);\r\n    } else if (sanitizedHex.length === 6) {\r\n      r = parseInt(sanitizedHex.substring(0, 2), 16);\r\n      g = parseInt(sanitizedHex.substring(2, 4), 16);\r\n      b = parseInt(sanitizedHex.substring(4, 6), 16);\r\n    } else {\r\n      return false;\r\n    }\r\n\r\n    if (isNaN(r) || isNaN(g) || isNaN(b)) {\r\n      return false;\r\n    }\r\n\r\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\r\n\r\n    return luminance > 220;\r\n  }\r\n\r\n  render() {\r\n    const isColorVeryLight = this.isLightColor(this.value);\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"checkerboard-bg\"\r\n          style={{\r\n            width: `${this.size}px`,\r\n            height: `${this.size}px`,\r\n            borderRadius: '50%',\r\n            display: 'inline-block',\r\n            position: 'relative',\r\n          }}\r\n        >\r\n          <div\r\n            class={{\r\n              'color-circle': true,\r\n              'white': isColorVeryLight,\r\n            }}\r\n            style={{\r\n              backgroundColor: this.value,\r\n              width: `${this.size}px`,\r\n              height: `${this.size}px`,\r\n              borderRadius: '50%',\r\n              position: 'absolute',\r\n              top: '0',\r\n              left: '0',\r\n              display: 'inline-block',\r\n            }}\r\n          ></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/{components/p-BY8BWGge.js → stencil/kritzel-context-menu-B2p1_Ffh.js}

@@ -1,14 +1,11 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DJN0U8pI.js';
-import { d as defineCustomElement$1 } from './p-CtiROna-.js';
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-Df69oUcb.js';
 
 const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #f0f0f0);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
 
-const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContextMenu extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.actionSelected = createEvent(this, "actionSelected");
+const KritzelContextMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.actionSelected = createEvent(this, "actionSelected", 7);
         this.disabledStates = new Map();
         this.visibleItems = [];
     }
@@ -75,45 +72,20 @@ const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContext
         this.disabledStates = new Map(newStates);
     }
     render() {
-        return (h(Host, { key: '3265d2e63ff1e1f91faf1c6c5da3490687f3adb1' }, h("div", { key: '80b2100e2ffcaba25ca08cfec650b1f7558c5d25', class: "menu-container" }, this.visibleItems.map((item, index) => {
+        return (h(Host, { key: 'cc1a338a7bf0d32764c2737f4f32774ccb22370a' }, h("div", { key: '4a83b9366332e42b506c3c876c00d77498a2b8b5', class: "menu-container" }, this.visibleItems.map((item, index) => {
             var _a;
             const isDisabled = (_a = this.disabledStates.get(index)) !== null && _a !== void 0 ? _a : false;
             return (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index), onTouchStart: () => this.handleItemClick(item, index), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)));
         }))));
     }
-    get hostElement() { return this; }
+    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "items": ["onItemsChanged"]
     }; }
-    static get style() { return kritzelContextMenuCss; }
-}, [257, "kritzel-context-menu", {
-        "items": [16],
-        "objects": [16],
-        "disabledStates": [32],
-        "visibleItems": [32]
-    }, undefined, {
-        "items": ["onItemsChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-context-menu", "kritzel-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-context-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelContextMenu);
-            }
-            break;
-        case "kritzel-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
+};
+KritzelContextMenu.style = kritzelContextMenuCss;
 
-export { KritzelContextMenu as K, defineCustomElement as d };
-//# sourceMappingURL=p-BY8BWGge.js.map
+export { KritzelContextMenu as K };
+//# sourceMappingURL=kritzel-context-menu-B2p1_Ffh.js.map
 
-//# sourceMappingURL=p-BY8BWGge.js.map
+//# sourceMappingURL=kritzel-context-menu-B2p1_Ffh.js.map

package/dist/stencil/kritzel-context-menu-B2p1_Ffh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-context-menu-B2p1_Ffh.js","sources":["src/components/ui/kritzel-context-menu/kritzel-context-menu.css?tag=kritzel-context-menu&encapsulation=shadow","src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"sourcesContent":[":host {\r\n  display: block; \r\n}\r\n\r\n.menu-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--kritzel-context-menu-background-color, #ffffff);\r\n  border-radius: var(--kritzel-context-menu-border-radius, 12px);\r\n  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n  border: var(--kritzel-context-menu-border, 1px solid #f0f0f0);\r\n  padding: var(--kritzel-context-menu-padding,4px);\r\n}\r\n\r\n.menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--kritzel-context-menu-item-gap, 8px);\r\n  background: none;\r\n  border: none;\r\n  text-align: left;\r\n  padding: var(--kritzel-context-menu-item-padding, 8px);\r\n  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);\r\n  cursor: pointer;\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  color: var(--kritzel-context-menu-item-color, #333333);\r\n  white-space: nowrap;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.menu-item:not(.disabled):hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item:not(.disabled):active {\r\n  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.menu-item.disabled {\r\n  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);\r\n  cursor: default;\r\n}\r\n\r\n.menu-item kritzel-icon {\r\n  opacity: 0.8;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.menu-item.disabled kritzel-icon {\r\n  opacity: 0.4;\r\n}\r\n\r\n.label {\r\n  flex-grow: 1;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Prop()\r\n  items: ContextMenuItem[];\r\n\r\n  @Prop()\r\n  objects: KritzelBaseObject[];\r\n\r\n  @Event()\r\n  actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n  @Element()\r\n  hostElement: HTMLElement;\r\n\r\n  @State()\r\n  private disabledStates: Map<number, boolean> = new Map();\r\n\r\n  @State()\r\n  private visibleItems: ContextMenuItem[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, index: number) {\r\n    if (!this.disabledStates.get(index)) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async resolveVisibleItems() {\r\n    const visibleItems: ContextMenuItem[] = [];\r\n    const visibilityPromises = this.items.map(async (item, index) => {\r\n      let isVisible = true;\r\n      if (item.visible !== undefined) {\r\n        if (typeof item.visible === 'boolean') {\r\n          isVisible = item.visible;\r\n        } else if (typeof item.visible === 'function') {\r\n          const result = item.visible(null, this.objects);\r\n          if (result instanceof Promise) {\r\n            isVisible = await result;\r\n          } else {\r\n            isVisible = result;\r\n          }\r\n        }\r\n      }\r\n      return { item, index, isVisible };\r\n    });\r\n\r\n    const visibilityResults = await Promise.all(visibilityPromises);\r\n    visibilityResults.forEach(({ item, isVisible }) => {\r\n      if (isVisible) {\r\n        visibleItems.push(item);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visibleItems;\r\n  }\r\n\r\n  private async resolveDisabledStates() {\r\n    const newStates = new Map<number, boolean>();\r\n    const disabledPromises = this.visibleItems.map(async (item, index) => {\r\n      let isDisabled = false;\r\n      if (typeof item.disabled === 'boolean') {\r\n        isDisabled = item.disabled;\r\n      } else if (typeof item.disabled === 'function') {\r\n        const result = item.disabled(null, this.objects);\r\n        if (result instanceof Promise) {\r\n          isDisabled = await result;\r\n        } else {\r\n          isDisabled = result;\r\n        }\r\n      }\r\n      newStates.set(index, isDisabled);\r\n    });\r\n\r\n    await Promise.all(disabledPromises);\r\n    this.disabledStates = new Map(newStates);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.visibleItems.map((item, index) => {\r\n            const isDisabled = this.disabledStates.get(index) ?? false;\r\n            return (\r\n              <button\r\n                key={`${item.label}-${index}`}\r\n                class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n                onClick={() => this.handleItemClick(item, index)}\r\n                onTouchStart={() => this.handleItemClick(item, index)}\r\n                disabled={isDisabled}\r\n              >\r\n                {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n                <span class=\"label\">{item.label}</span>\r\n              </button>\r\n            );\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/stencil/kritzel-context-menu-DPHV6MRm.js

@@ -0,0 +1,91 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-Df69oUcb.js';
+
+const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #f0f0f0);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
+
+const KritzelContextMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.actionSelected = createEvent(this, "actionSelected", 7);
+        this.disabledStates = new Map();
+        this.visibleItems = [];
+    }
+    componentWillLoad() {
+        this.resolveVisibleItems();
+        this.resolveDisabledStates();
+    }
+    onItemsChanged() {
+        this.resolveVisibleItems();
+        this.resolveDisabledStates();
+    }
+    handleItemClick(item, index) {
+        if (!this.disabledStates.get(index)) {
+            this.actionSelected.emit(item);
+        }
+    }
+    async resolveVisibleItems() {
+        const visibleItems = [];
+        const visibilityPromises = this.items.map(async (item, index) => {
+            let isVisible = true;
+            if (item.visible !== undefined) {
+                if (typeof item.visible === 'boolean') {
+                    isVisible = item.visible;
+                }
+                else if (typeof item.visible === 'function') {
+                    const result = item.visible(null, this.objects);
+                    if (result instanceof Promise) {
+                        isVisible = await result;
+                    }
+                    else {
+                        isVisible = result;
+                    }
+                }
+            }
+            return { item, index, isVisible };
+        });
+        const visibilityResults = await Promise.all(visibilityPromises);
+        visibilityResults.forEach(({ item, isVisible }) => {
+            if (isVisible) {
+                visibleItems.push(item);
+            }
+        });
+        this.visibleItems = visibleItems;
+    }
+    async resolveDisabledStates() {
+        const newStates = new Map();
+        const disabledPromises = this.visibleItems.map(async (item, index) => {
+            let isDisabled = false;
+            if (typeof item.disabled === 'boolean') {
+                isDisabled = item.disabled;
+            }
+            else if (typeof item.disabled === 'function') {
+                const result = item.disabled(null, this.objects);
+                if (result instanceof Promise) {
+                    isDisabled = await result;
+                }
+                else {
+                    isDisabled = result;
+                }
+            }
+            newStates.set(index, isDisabled);
+        });
+        await Promise.all(disabledPromises);
+        this.disabledStates = new Map(newStates);
+    }
+    render() {
+        return (h(Host, { key: '6584e2ee67ec1bc99f07f4546ab2413254793cc1' }, h("div", { key: '330cccb2b51a4828cf18f5d8cd77469d5e1ade20', class: "menu-container" }, this.visibleItems.map((item, index) => {
+            var _a;
+            const isDisabled = (_a = this.disabledStates.get(index)) !== null && _a !== void 0 ? _a : false;
+            return (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index), onTouchStart: () => this.handleItemClick(item, index), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)));
+        }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["onItemsChanged"]
+    }; }
+};
+KritzelContextMenu.style = kritzelContextMenuCss;
+
+export { KritzelContextMenu as K };
+//# sourceMappingURL=kritzel-context-menu-DPHV6MRm.js.map
+
+//# sourceMappingURL=kritzel-context-menu-DPHV6MRm.js.map

package/dist/stencil/kritzel-context-menu-DPHV6MRm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-context-menu-DPHV6MRm.js","sources":["src/components/ui/kritzel-context-menu/kritzel-context-menu.css?tag=kritzel-context-menu&encapsulation=shadow","src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"sourcesContent":[":host {\r\n  display: block; \r\n}\r\n\r\n.menu-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--kritzel-context-menu-background-color, #ffffff);\r\n  border-radius: var(--kritzel-context-menu-border-radius, 12px);\r\n  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n  border: var(--kritzel-context-menu-border, 1px solid #f0f0f0);\r\n  padding: var(--kritzel-context-menu-padding,4px);\r\n}\r\n\r\n.menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--kritzel-context-menu-item-gap, 8px);\r\n  background: none;\r\n  border: none;\r\n  text-align: left;\r\n  padding: var(--kritzel-context-menu-item-padding, 8px);\r\n  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);\r\n  cursor: pointer;\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  color: var(--kritzel-context-menu-item-color, #333333);\r\n  white-space: nowrap;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.menu-item:not(.disabled):hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item:not(.disabled):active {\r\n  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.menu-item.disabled {\r\n  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);\r\n  cursor: default;\r\n}\r\n\r\n.menu-item kritzel-icon {\r\n  opacity: 0.8;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.menu-item.disabled kritzel-icon {\r\n  opacity: 0.4;\r\n}\r\n\r\n.label {\r\n  flex-grow: 1;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Prop()\r\n  items: ContextMenuItem[];\r\n\r\n  @Prop()\r\n  objects: KritzelBaseObject[];\r\n\r\n  @Event()\r\n  actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n  @Element()\r\n  hostElement: HTMLElement;\r\n\r\n  @State()\r\n  private disabledStates: Map<number, boolean> = new Map();\r\n\r\n  @State()\r\n  private visibleItems: ContextMenuItem[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, index: number) {\r\n    if (!this.disabledStates.get(index)) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async resolveVisibleItems() {\r\n    const visibleItems: ContextMenuItem[] = [];\r\n    const visibilityPromises = this.items.map(async (item, index) => {\r\n      let isVisible = true;\r\n      if (item.visible !== undefined) {\r\n        if (typeof item.visible === 'boolean') {\r\n          isVisible = item.visible;\r\n        } else if (typeof item.visible === 'function') {\r\n          const result = item.visible(null, this.objects);\r\n          if (result instanceof Promise) {\r\n            isVisible = await result;\r\n          } else {\r\n            isVisible = result;\r\n          }\r\n        }\r\n      }\r\n      return { item, index, isVisible };\r\n    });\r\n\r\n    const visibilityResults = await Promise.all(visibilityPromises);\r\n    visibilityResults.forEach(({ item, isVisible }) => {\r\n      if (isVisible) {\r\n        visibleItems.push(item);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visibleItems;\r\n  }\r\n\r\n  private async resolveDisabledStates() {\r\n    const newStates = new Map<number, boolean>();\r\n    const disabledPromises = this.visibleItems.map(async (item, index) => {\r\n      let isDisabled = false;\r\n      if (typeof item.disabled === 'boolean') {\r\n        isDisabled = item.disabled;\r\n      } else if (typeof item.disabled === 'function') {\r\n        const result = item.disabled(null, this.objects);\r\n        if (result instanceof Promise) {\r\n          isDisabled = await result;\r\n        } else {\r\n          isDisabled = result;\r\n        }\r\n      }\r\n      newStates.set(index, isDisabled);\r\n    });\r\n\r\n    await Promise.all(disabledPromises);\r\n    this.disabledStates = new Map(newStates);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.visibleItems.map((item, index) => {\r\n            const isDisabled = this.disabledStates.get(index) ?? false;\r\n            return (\r\n              <button\r\n                key={`${item.label}-${index}`}\r\n                class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n                onClick={() => this.handleItemClick(item, index)}\r\n                onTouchStart={() => this.handleItemClick(item, index)}\r\n                disabled={isDisabled}\r\n              >\r\n                {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n                <span class=\"label\">{item.label}</span>\r\n              </button>\r\n            );\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/stencil/kritzel-context-menu.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-context-menu.entry.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/stencil/kritzel-context-menu.entry.js

@@ -0,0 +1,5 @@
+export { K as kritzel_context_menu } from './kritzel-context-menu-DPHV6MRm.js';
+import './index-Df69oUcb.js';
+//# sourceMappingURL=kritzel-context-menu.entry.esm.js.map
+
+//# sourceMappingURL=kritzel-context-menu.entry.js.map

package/dist/stencil/kritzel-context-menu.entry.js.map

@@ -0,0 +1 @@
+{"file":"kritzel-context-menu.entry.esm.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/stencil/kritzel-control-brush-config.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-control-brush-config.entry.esm.js","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"],"names":[],"mappings":"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"}

package/dist/stencil/kritzel-control-brush-config.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-Df69oUcb.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)}";
+
+const KritzelControlBrushConfig = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toolChange = createEvent(this, "toolChange", 7);
+        this.isExpanded = false;
+        this.palette = [];
+    }
+    handleToolChange(newTool) {
+        this.palette = newTool.palettes[newTool.type];
+    }
+    componentWillLoad() {
+        this.palette = this.tool.palettes[this.tool.type];
+    }
+    handleToggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    handleTypeChange(event) {
+        this.palette = this.tool.palettes[event.detail];
+        this.tool.type = event.detail;
+        this.tool.color = this.palette[0];
+        this.toolChange.emit(this.tool);
+    }
+    handleColorChange(event) {
+        this.tool.color = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleSizeChange(event) {
+        this.tool.size = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    render() {
+        return (h(Host, { key: '673926b1885e7dcd5ec27ed8999fd00726e88af4' }, h("div", { key: '2f990894a2396b793c2583791849b87b0749140c', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-brush-style", { key: 'c10f73e5d08624b22aae08fea842b42c5aa5806a', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '19afdcc96e78d631f3c4d631bb1c71e76467eafc', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'b072ef96a0243a980141050812349828bce1e9bf', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'a677c177be8abac3fd32f46291661bde84cef55f', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '84644447f48f4dedbbb43f194faaed48aeb4f750', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+    }
+    static get watchers() { return {
+        "tool": ["handleToolChange"]
+    }; }
+};
+KritzelControlBrushConfig.style = kritzelControlBrushConfigCss;
+
+export { KritzelControlBrushConfig as kritzel_control_brush_config };
+//# sourceMappingURL=kritzel-control-brush-config.entry.esm.js.map
+
+//# sourceMappingURL=kritzel-control-brush-config.entry.js.map

package/dist/stencil/kritzel-control-brush-config.entry.js.map

@@ -0,0 +1 @@
+{"file":"kritzel-control-brush-config.entry.esm.js","mappings":"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","names":[],"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/stencil/kritzel-control-text-config.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-control-text-config.entry.esm.js","sources":["src/components/ui/kritzel-control-text-config/kritzel-control-text-config.css?tag=kritzel-control-text-config&encapsulation=shadow","src/components/ui/kritzel-control-text-config/kritzel-control-text-config.tsx"],"sourcesContent":[":host {\r\n  display: block;\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}\r\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-text-config',\r\n  styleUrl: 'kritzel-control-text-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlTextConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelTextTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelTextTool>;\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleFamilyChange(event: CustomEvent<string>) {\r\n    this.tool.fontFamily = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.fontColor = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.fontSize = 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-font-family selectedFontFamily={this.tool.fontFamily} onFontFamilyChange={event => this.handleFamilyChange(event)}></kritzel-font-family>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'}>\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.tool.palette}\r\n          selectedColor={this.tool.fontColor}\r\n          isExpanded={this.isExpanded}\r\n          onColorChange={event => this.handleColorChange(event)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-font-size selectedSize={this.tool.fontSize} fontFamily={this.tool.fontFamily} onSizeChange={event => this.handleSizeChange(event)}></kritzel-font-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,2BAA2B,GAAG,qTAAqT;;MCQ5U,wBAAwB,GAAA,MAAA;AALrC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUE,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAuD5B;IAlDC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;AAGpC,IAAA,kBAAkB,CAAC,KAA0B,EAAA;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,iBAAiB,CAAC,KAA0B,EAAA;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,gBAAgB,CAAC,KAA0B,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM;QACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,KAAK;AACX,aAAA,EAAA,EAED,CAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAwB,CAAA,EAElJ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,QAAQ,EAAA,EACpH,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,cAAc,EAAA,CAAiB,CAC7E,CACL,EAEN,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EACzB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAClC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAA,EAEzB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAsB,CAAA,CAC3J;;;;;;;"}