kritzel-stencil 0.0.157 → 0.0.159

package/dist/components/p-BQg4YML7.js

@@ -0,0 +1,106 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
+import { d as defineCustomElement$7 } from './p-D4yvhd1d.js';
+import { d as defineCustomElement$6 } from './p-D1uj4A4F.js';
+import { d as defineCustomElement$5 } from './p-CIXPLjCu.js';
+import { d as defineCustomElement$4 } from './p-uuRJU2R1.js';
+import { d as defineCustomElement$3 } from './p-BgznZoBH.js';
+import { d as defineCustomElement$2 } from './p-DDmSxM5f.js';
+import { d as defineCustomElement$1 } from './p-Bhtn9qay.js';
+
+const kritzelControlTextConfigCss = ":host{display:block;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 KritzelControlTextConfig = /*@__PURE__*/ proxyCustomElement(class KritzelControlTextConfig extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.toolChange = createEvent(this, "toolChange");
+    }
+    tool;
+    isExpanded = false;
+    toolChange;
+    handleToggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    handleFamilyChange(event) {
+        this.tool.fontFamily = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleColorChange(event) {
+        this.tool.fontColor = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleSizeChange(event) {
+        this.tool.fontSize = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    render() {
+        return (h(Host, { key: '82e611092700f057bd36823e7f7503fe7a0423ed' }, h("div", { key: '37ed39adeeeb58981a917918cd185e96d589e973', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-font-family", { key: 'cd8afc5c4a1eee087610cd3d5a6c05210cfda6b3', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '085f1bba060bde27a7b64dc5477bb51305b76235', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '3ff8fec207120e67f43315c6dace72fc2f6bd0f1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '2e29d01a6b5c0e4a8ec347e63b6a2698c282db40', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: 'c972068f1251d66e756b8de72fbdd1b6002d1daa', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+    }
+    static get style() { return kritzelControlTextConfigCss; }
+}, [769, "kritzel-control-text-config", {
+        "tool": [1040],
+        "isExpanded": [1028, "is-expanded"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-control-text-config", "kritzel-color", "kritzel-color-palette", "kritzel-dropdown", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-control-text-config":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelControlTextConfig);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kritzel-color-palette":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-font":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-font-family":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-font-size":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelControlTextConfig as K, defineCustomElement as d };
+//# sourceMappingURL=p-BQg4YML7.js.map
+
+//# sourceMappingURL=p-BQg4YML7.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BQg4YML7.js","mappings":";;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,qTAAqT;;MCQ5U,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACV,IAAA,IAAI;IACJ,UAAU,GAAY,KAAK;AAE3C,IAAA,UAAU;IAEnB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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 }) tool: KritzelTextTool;\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() 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"],"version":3}

package/dist/{stencil/kritzel-font-family.entry.js → components/p-BgznZoBH.js}

@@ -1,11 +1,16 @@
-import { r as registerInstance, a as createEvent, h, d as Host } from './index-DniO_INI.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
+import { d as defineCustomElement$1 } from './p-CIXPLjCu.js';
 
 const kritzelFontFamilyCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:pointer;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}";
 
-const KritzelFontFamily = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.fontFamilyChange = createEvent(this, "fontFamilyChange", 7);
+const KritzelFontFamily = /*@__PURE__*/ proxyCustomElement(class KritzelFontFamily extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.fontFamilyChange = createEvent(this, "fontFamilyChange");
     }
     fontOptions = [
         { value: 'arial', label: 'Arial' },
@@ -40,8 +45,31 @@ const KritzelFontFamily = class {
         }));
         return (h(Host, { key: '27d14ddb4a57b9cd7b936047b6ea6a9251a1ab27' }, h("kritzel-dropdown", { key: '20ea042c9a907dc1ac5e16a589a8856f87389e36', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'f63fed16477a327aadaeb54feefe35df1780e37d', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '13b3089606c2e83b256ed2cec6513a9911016754', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
-};
-KritzelFontFamily.style = kritzelFontFamilyCss;
+    static get style() { return kritzelFontFamilyCss; }
+}, [769, "kritzel-font-family", {
+        "fontOptions": [16],
+        "selectedFontFamily": [1025, "selected-font-family"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font-family", "kritzel-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font-family":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelFontFamily);
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelFontFamily as K, defineCustomElement as d };
+//# sourceMappingURL=p-BgznZoBH.js.map
 
-export { KritzelFontFamily as kritzel_font_family };
-//# sourceMappingURL=kritzel-font-family.entry.esm.js.map
+//# sourceMappingURL=p-BgznZoBH.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BgznZoBH.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,wxBAAwxB;;MCYxyB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,WAAW,GAAiB;AAClC,QAAA,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,QAAA,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;AAC1C,QAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;AACpC,QAAA,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;AAChD,QAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;AACtD,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,QAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACxC,QAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;AAC9C,QAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;KACvD;AAEwB,IAAA,kBAAkB;AAElC,IAAA,gBAAgB;IAEzB,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACnD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC;YAC9F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE;gBACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK;;;;AAKjD,IAAA,yBAAyB,GAAG,CAAC,KAA0B,KAAI;QACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC1C,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,KAAK;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,YAAA,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;AACpC,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAA,EAErD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAW,EAAA,GAAA,CAAA,EAC1D,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,EAAW,EAAA,GAAA,CAAA,CACrD,CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-family/kritzel-font-family.css?tag=kritzel-font-family&encapsulation=shadow","src/components/shared/kritzel-font-family/kritzel-font-family.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.font-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: pointer;\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}\r\n\r\n.font-style-button.italic-text {\r\n  font-style: italic;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-font-family',\r\n  styleUrl: 'kritzel-font-family.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n  @Prop() fontOptions: FontOption[] = [\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ];\r\n\r\n  @Prop({ mutable: true }) selectedFontFamily: string;\r\n\r\n  @Event() fontFamilyChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    if (this.fontOptions && this.fontOptions.length > 0) {\r\n      const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n      if (!this.selectedFontFamily || !isValidCurrentFont) {\r\n        this.selectedFontFamily = this.fontOptions[0].value;\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n    this.fontFamilyChange.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    const dropdownOptions = this.fontOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n      style: { fontFamily: option.value },\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown\r\n          options={dropdownOptions}\r\n          value={this.selectedFontFamily}\r\n          onValueChanged={this.handleDropdownValueChange}\r\n          selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n        >\r\n          <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n          <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-Bhtn9qay.js

@@ -0,0 +1,98 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-CwkUrTy1.js';
+
+class KritzelIconRegistry {
+    static registry = new Map();
+    static register(name, svgContent) {
+        if (this.registry.has(name)) {
+            console.warn(`[IconRegistry] Icon "${name}" is already registered. It will be overwritten.`);
+        }
+        this.registry.set(name, svgContent);
+    }
+    static get(name) {
+        return this.registry.get(name);
+    }
+    static registerIcons(icons) {
+        for (const name in icons) {
+            if (Object.prototype.hasOwnProperty.call(icons, name)) {
+                this.register(name, icons[name]);
+            }
+        }
+    }
+    static has(name) {
+        return this.registry.has(name);
+    }
+}
+KritzelIconRegistry.registerIcons({
+    'cursor': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',
+    'pen': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
+    'highlighter': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>',
+    'eraser': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',
+    'type': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
+    'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
+    'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
+    'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
+    'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+    'paste': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-paste-icon lucide-clipboard-paste"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>',
+    'cut': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors-icon lucide-scissors"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>',
+    'delete': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>',
+    'bring-to-front': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line"><path d="M5 3h14"/><path d="m18 13-6-6-6 6"/><path d="M12 7v14"/></svg>',
+    'send-to-back': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>',
+    'select-all': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',
+    'download': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
+    'undo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
+    'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>',
+    'plus': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+    'ellipsis-vertical': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
+    'x': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    'check': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'
+});
+
+const kritzelIconCss = ":host{display:inline-flex;justify-content:center;align-items:center;color:var(--kritzel-icon-color, inherited)}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";
+
+const KritzelIcon = /*@__PURE__*/ proxyCustomElement(class KritzelIcon extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    name;
+    label;
+    size = 24;
+    render() {
+        const svgContent = KritzelIconRegistry.get(this.name);
+        if (!svgContent) {
+            console.error(`[kritzel-icon] Icon "${this.name}" not found in registry.`);
+            return h("span", { class: "error-icon", "aria-label": `Error: Icon ${this.name} not found` }, "?");
+        }
+        const styles = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+        };
+        return (h(Host, { style: styles }, h("span", { "aria-hidden": !this.label, role: this.label ? 'img' : undefined, "aria-label": this.label, innerHTML: svgContent })));
+    }
+    static get style() { return kritzelIconCss; }
+}, [769, "kritzel-icon", {
+        "name": [1],
+        "label": [1],
+        "size": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelIcon);
+            }
+            break;
+    } });
+}
+
+export { KritzelIconRegistry as K, KritzelIcon as a, defineCustomElement as d };
+//# sourceMappingURL=p-Bhtn9qay.js.map
+
+//# sourceMappingURL=p-Bhtn9qay.js.map

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

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

package/dist/{stencil/kritzel-context-menu-GdU9xEKC.js → components/p-C2sWlNsJ.js}

@@ -1,14 +1,19 @@
-import { r as registerInstance, a as createEvent, e as getElement, h, d as Host } from './index-DniO_INI.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 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 #ebebeb);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.close = createEvent(this, "close", 7);
+const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContextMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.actionSelected = createEvent(this, "actionSelected");
+        this.close = createEvent(this, "close");
     }
-    get host() { return getElement(this); }
+    get host() { return this; }
     items;
     onItemsChanged() {
         this.updateMenuItems();
@@ -57,10 +62,34 @@ const KritzelContextMenu = class {
     static get watchers() { return {
         "items": ["onItemsChanged"]
     }; }
-};
-KritzelContextMenu.style = kritzelContextMenuCss;
+    static get style() { return kritzelContextMenuCss; }
+}, [769, "kritzel-context-menu", {
+        "items": [16],
+        "objects": [16],
+        "processedItems": [32]
+    }, [[9, "pointerdown", "handleOutsideClick"]], {
+        "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;
+    } });
+}
 
-export { KritzelContextMenu as K };
-//# sourceMappingURL=kritzel-context-menu-GdU9xEKC.js.map
+export { KritzelContextMenu as K, defineCustomElement as d };
+//# sourceMappingURL=p-C2sWlNsJ.js.map
 
-//# sourceMappingURL=kritzel-context-menu-GdU9xEKC.js.map
+//# sourceMappingURL=p-C2sWlNsJ.js.map

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

@@ -0,0 +1 @@
+{"file":"p-C2sWlNsJ.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,yxCAAyxC;;MCc1yC,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AAGrB,IAAA,KAAK;IAEb,cAAc,GAAA;QACZ,IAAI,CAAC,eAAe,EAAE;;AAGhB,IAAA,OAAO;AAEN,IAAA,cAAc;AACd,IAAA,KAAK;IAEG,cAAc,GAAwB,EAAE;AAGzD,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAC7B,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;;IAIrB,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGhB,eAAe,CAAC,IAAqB,EAAE,UAAmB,EAAA;QAChE,IAAI,CAAC,UAAU,EAAE;AACf,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;;;AAI1B,IAAA,MAAM,eAAe,GAAA;QAC3B,MAAM,SAAS,GAAwB,EAAE;AAEzC,QAAA,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;AAC7B,YAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;YACjE,IAAI,SAAS,EAAE;AACb,gBAAA,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC;gBACpE,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;;;AAIxC,QAAA,IAAI,CAAC,cAAc,GAAG,SAAS;;AAGzB,IAAA,MAAM,gBAAgB,CAAC,KAAoG,EAAE,YAAqB,EAAA;AACxJ,QAAA,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AAC9B,YAAA,OAAO,KAAK;;AAEd,QAAA,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;AAC/B,YAAA,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;AAEzD,QAAA,OAAO,YAAY;;IAGrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,KAAK,MACnD,CACE,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,CAAG,EAAA,IAAI,CAAC,KAAK,CAAI,CAAA,EAAA,KAAK,CAAE,CAAA,EAC7B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,EACpD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,EACrD,QAAQ,EAAE,UAAU,EAAA,EAEnB,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,cAAA,EAAA,EAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAiB,CAAA,EACtE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACV,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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 #ebebeb);\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, State, Watch, Listen, Element } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\ninterface ProcessedMenuItem {\r\n  item: ContextMenuItem;\r\n  isDisabled: boolean;\r\n}\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  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: ContextMenuItem[];\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Prop() objects: KritzelBaseObject[];\r\n\r\n  @Event() actionSelected: EventEmitter<ContextMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, isDisabled: boolean) {\r\n    if (!isDisabled) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async updateMenuItems() {\r\n    const processed: ProcessedMenuItem[] = [];\r\n\r\n    for (const item of this.items) {\r\n      const isVisible = await this.evaluateProperty(item.visible, true);\r\n      if (isVisible) {\r\n        const isDisabled = await this.evaluateProperty(item.disabled, false);\r\n        processed.push({ item, isDisabled });\r\n      }\r\n    }\r\n\r\n    this.processedItems = processed;\r\n  }\r\n\r\n  private async evaluateProperty(value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>), defaultValue: boolean): Promise<boolean> {\r\n    if (typeof value === 'boolean') {\r\n      return value;\r\n    }\r\n    if (typeof value === 'function') {\r\n      return await Promise.resolve(value(null, this.objects));\r\n    }\r\n    return defaultValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.processedItems.map(({ item, isDisabled }, index) => (\r\n            <button\r\n              key={`${item.label}-${index}`}\r\n              class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n              onClick={() => this.handleItemClick(item, isDisabled)}\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        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/{stencil/html.helper-C6qB08BS.js → components/p-C6qB08BS.js}

@@ -63,6 +63,6 @@ class KritzelHTMLHelper {
 }
 
 export { KritzelHTMLHelper as K };
-//# sourceMappingURL=html.helper-C6qB08BS.js.map
+//# sourceMappingURL=p-C6qB08BS.js.map
 
-//# sourceMappingURL=html.helper-C6qB08BS.js.map
+//# sourceMappingURL=p-C6qB08BS.js.map

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

@@ -0,0 +1 @@
+{"file":"p-C6qB08BS.js","mappings":"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","names":[],"sources":["src/helpers/html.helper.ts"],"sourcesContent":["export class KritzelHTMLHelper {\r\n static getNumericValueFromStyle(element: HTMLElement, property: string): number {\r\n   const value = window.getComputedStyle(element).getPropertyValue(property);\r\n   return parseFloat(value) || 0;\r\n }\r\n\r\n static getScrollableParent(element: HTMLElement): HTMLElement | Window {\r\n    if (!element) {\r\n      return window;\r\n    }\r\n\r\n    const parent = ((element.parentNode as ShadowRoot)?.host as HTMLElement) ?? element.parentElement;\r\n\r\n    if (!parent || parent.tagName === 'BODY') {\r\n      return window;\r\n    }\r\n\r\n    const style = window.getComputedStyle(parent);\r\n    if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {\r\n      return parent;\r\n    }\r\n\r\n    return this.getScrollableParent(parent);\r\n  }\r\n\r\n  static isElementInViewport(element: HTMLElement): boolean {\r\n    if (!element) {\r\n      return false;\r\n    }\r\n\r\n    const scrollableParent = this.getScrollableParent(element);\r\n    const rect = element.getBoundingClientRect();\r\n\r\n    if (scrollableParent === window) {\r\n      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\r\n      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;\r\n\r\n      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;\r\n    }\r\n\r\n    const parentRect = (scrollableParent as HTMLElement).getBoundingClientRect();\r\n\r\n    return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;\r\n  }\r\n\r\n  static getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n      if (!root) return [];\r\n  \r\n      const focusableElements: HTMLElement[] = [];\r\n      const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n  \r\n      const isVisible = (el: HTMLElement) => {\r\n        return el.offsetParent !== null;\r\n      };\r\n  \r\n      const find = (element: Element) => {\r\n        // Check if the element itself is focusable\r\n        if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {\r\n          focusableElements.push(element);\r\n        }\r\n  \r\n        // Traverse shadow DOM\r\n        if (element.shadowRoot) {\r\n          Array.from(element.shadowRoot.children).forEach(find);\r\n        }\r\n  \r\n        // Traverse slotted content\r\n        if (element.tagName === 'SLOT') {\r\n          (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(find);\r\n        }\r\n  \r\n        // Traverse light DOM children if there is no shadow root\r\n        if (!element.shadowRoot) {\r\n          Array.from(element.children).forEach(find);\r\n        }\r\n      };\r\n  \r\n      find(root);\r\n  \r\n      return focusableElements;\r\n    }\r\n}"],"version":3}