kritzel-stencil 0.0.125 → 0.0.126

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

@@ -1,178 +0,0 @@
-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: '3265d2e63ff1e1f91faf1c6c5da3490687f3adb1' }, h("div", { key: '80b2100e2ffcaba25ca08cfec650b1f7558c5d25', 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

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

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

@@ -1,136 +0,0 @@
-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: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-brush-style", { key: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', 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

@@ -1 +0,0 @@
-{"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

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

@@ -1,116 +0,0 @@
-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: '27d47c47987fb7644313a4face4a7023dfbe454d' }, h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                width: '100%',
-                gap: '8px',
-            } }, h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', 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

@@ -1 +0,0 @@
-{"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

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