kritzel-stencil 0.0.126 → 0.0.127

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js

@@ -0,0 +1,178 @@
+import { Host, h } from "@stencil/core";
+export class KritzelContextMenu {
+    constructor() {
+        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: '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)));
+        }))));
+    }
+    static get is() { return "kritzel-context-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-context-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-context-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[]",
+                    "resolved": "ContextMenuItem[]",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-item.interface",
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "objects": {
+                "type": "unknown",
+                "attribute": "objects",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelBaseObject[]",
+                    "resolved": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                    "references": {
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "disabledStates": {},
+            "visibleItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionSelected",
+                "name": "actionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ContextMenuItem",
+                    "resolved": "ContextMenuItem",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-item.interface",
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChanged"
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-context-menu.js.map

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASrG,MAAM,OAAO,kBAAkB;IAL/B;QAmBU,mBAAc,GAAyB,IAAI,GAAG,EAAE,CAAC;QAGjD,iBAAY,GAAsB,EAAE,CAAC;KA6F9C;IA3FC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAID,cAAc;QACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEO,eAAe,CAAC,IAAqB,EAAE,KAAa;QAC1D,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,mBAAmB;QAC/B,MAAM,YAAY,GAAsB,EAAE,CAAC;QAC3C,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9D,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC/B,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBACtC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC3B,CAAC;qBAAM,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;oBAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;oBAChD,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;wBAC9B,SAAS,GAAG,MAAM,MAAM,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,SAAS,GAAG,MAAM,CAAC;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,MAAM,iBAAiB,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAChE,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;YAChD,IAAI,SAAS,EAAE,CAAC;gBACd,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAEO,KAAK,CAAC,qBAAqB;QACjC,MAAM,SAAS,GAAG,IAAI,GAAG,EAAmB,CAAC;QAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACnE,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;gBACvC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC7B,CAAC;iBAAM,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjD,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;oBAC9B,UAAU,GAAG,MAAM,MAAM,CAAC;gBAC5B,CAAC;qBAAM,CAAC;oBACN,UAAU,GAAG,MAAM,CAAC;gBACtB,CAAC;YACH,CAAC;YACD,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;gBACrC,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,KAAK,CAAC;gBAC3D,OAAO,CACL,cACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAC7B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EAChD,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EACrD,QAAQ,EAAE,UAAU;oBAEnB,IAAI,CAAC,IAAI,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;oBACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACV,CAAC;YACJ,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css

@@ -0,0 +1,19 @@
+: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);
+}

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js

@@ -0,0 +1,136 @@
+import { Host, h } from "@stencil/core";
+export class KritzelControlBrushConfig {
+    constructor() {
+        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: 'c200146a90a3dd72241e098eff555312fd3125a9' }, h("div", { key: '886492ec4c5e15954166c4a7569ba832d0e6eff8', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-brush-style", { key: '64e205189fbd740c01d4fd94c5098edae574d69b', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '4b2d0fbf4d485350223dbc27601e78ab37be8df5', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '35262e8456901d10c84437e578317287282cf690', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '4f519179f419a3e3567d2db39d0d8f9f30d5a6a1', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '05f05946c3ebd2707f1c41c236a2efca47cedbec', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+    }
+    static get is() { return "kritzel-control-brush-config"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-control-brush-config.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-control-brush-config.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tool": {
+                "type": "unknown",
+                "attribute": "tool",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelBrushTool",
+                    "resolved": "KritzelBrushTool",
+                    "references": {
+                        "KritzelBrushTool": {
+                            "location": "import",
+                            "path": "../../../classes/tools/brush-tool.class",
+                            "id": "src/classes/tools/brush-tool.class.ts::KritzelBrushTool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "attribute": "is-expanded",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "palette": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toolChange",
+                "name": "toolChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelBrushTool",
+                    "resolved": "KritzelBrushTool",
+                    "references": {
+                        "KritzelBrushTool": {
+                            "location": "import",
+                            "path": "../../../classes/tools/brush-tool.class",
+                            "id": "src/classes/tools/brush-tool.class.ts::KritzelBrushTool"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "tool",
+                "methodName": "handleToolChange"
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-control-brush-config.js.map

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-control-brush-config.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.css

@@ -0,0 +1,19 @@
+: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);
+}

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js

@@ -0,0 +1,116 @@
+import { Host, h } from "@stencil/core";
+export class KritzelControlTextConfig {
+    constructor() {
+        this.isExpanded = false;
+    }
+    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: '1c8463a1f6b7bcf81f3b58fc0064330c50d6ada9' }, h("div", { key: '69825e6c9be473dda3597c86d51dffff9a6418fd', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-font-family", { key: '56c947950e32989782512a2b00e3be0aaa12d77b', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '83fdb5908340adc032a7abae9b4b678697e0cff8', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '739c175fbc3c0c5c342f2983d0e47323bc5b56f4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '98251da71574b3487bf6ee46f7e4e95d133e1eea', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '95c88611a6631a4db5d200aac57e7eeef2c195b8', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+    }
+    static get is() { return "kritzel-control-text-config"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-control-text-config.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-control-text-config.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tool": {
+                "type": "unknown",
+                "attribute": "tool",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelTextTool",
+                    "resolved": "KritzelTextTool",
+                    "references": {
+                        "KritzelTextTool": {
+                            "location": "import",
+                            "path": "../../../classes/tools/text-tool.class",
+                            "id": "src/classes/tools/text-tool.class.ts::KritzelTextTool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "attribute": "is-expanded",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toolChange",
+                "name": "toolChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelTextTool",
+                    "resolved": "KritzelTextTool",
+                    "references": {
+                        "KritzelTextTool": {
+                            "location": "import",
+                            "path": "../../../classes/tools/text-tool.class",
+                            "id": "src/classes/tools/text-tool.class.ts::KritzelTextTool"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-control-text-config.js.map

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-control-text-config.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-control-text-config/kritzel-control-text-config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,wBAAwB;IALrC;QAUE,eAAU,GAAY,KAAK,CAAC;KAuD7B;IAlDC,kBAAkB;QAChB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,kBAAkB,CAAC,KAA0B;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,iBAAiB,CAAC,KAA0B;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB,CAAC,KAA0B;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,YAAY;oBAC5B,KAAK,EAAE,MAAM;oBACb,GAAG,EAAE,KAAK;iBACX;gBAED,4EAAqB,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,GAAwB;gBAElJ,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;oBACpH,qEAAc,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAiB,CAC7E,CACL;YAEN,8EACE,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,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAC9B;YAEzB,0EAAmB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAsB,CAC3J,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -0,0 +1,124 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.kritzel-controls {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--kritzel-controls-gap, 8px);
+  height: 100%;
+  padding: var(--kritzel-controls-padding, 8px);
+  background-color: var(--kritzel-controls-background-color, #ffffff);
+  border-radius: var(--kritzel-controls-border-radius, 16px);
+  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-controls-border, 1px solid #f0f0f0);
+  z-index: 10000;
+  position: relative;
+}
+
+.kritzel-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--kritzel-controls-control-color, #000000);
+  border-radius: var(--kritzel-controls-control-border-radius, 12px);
+  padding: var(--kritzel-controls-control-padding, 8px);
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  font-weight: bold;
+}
+
+.kritzel-control:hover {
+  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+:host(.mobile) .kritzel-control:hover {
+  background-color: unset;
+}
+
+.kritzel-control:active {
+  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+:host(.mobile) .kritzel-control:active {
+  background-color: unset;
+}
+
+.kritzel-control.selected,
+.kritzel-control.selected:hover,
+.kritzel-control.selected:active {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;
+  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;
+}
+
+.kritzel-divider {
+  width: var(--kritzel-controls-divider-width, 1px);
+  height: var(--kritzel-controls-divider-height, 24px);
+  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-config-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kritzel-config {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.color-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);
+}
+
+.font-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);
+}
+
+.no-config {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    border: 1px dashed gray;
+}
+
+kritzel-tooltip {
+  position: fixed;
+  bottom: 66px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+}