kritzel-stencil 0.1.1 → 0.1.2

package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+export class KritzelOpacitySlider {
+    /** Current opacity value (0 to 1) */
+    value = 1;
+    /** Minimum opacity value */
+    min = 0;
+    /** Maximum opacity value */
+    max = 1;
+    /** Step increment */
+    step = 0.01;
+    /** Color to display in the preview (optional) */
+    previewColor = '#000000';
+    valueChange;
+    handleInput(event) {
+        const input = event.target;
+        const newValue = parseFloat(input.value);
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getPercentage() {
+        return Math.round(this.value * 100);
+    }
+    render() {
+        const percentage = this.getPercentage();
+        return (h(Host, { key: 'e1409175b038e78d2659356452c48ccc7d79b8de' }, h("div", { key: '1de138f56f699fc54623ed8d7b8b5c6d3eda3c67', class: "opacity-container" }, h("div", { key: '1dd5d0d36c8d025ba46a0623a20f040990cc749a', class: "slider-wrapper" }, h("input", { key: '7b555aa0a4a9abfdcdadc86bffa5878c9336d1e4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+                '--slider-progress': `${percentage}%`,
+            } })))));
+    }
+    static get is() { return "kritzel-opacity-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-opacity-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-opacity-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current opacity value (0 to 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "1"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum opacity value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum opacity value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "1"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "0.01"
+            },
+            "previewColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color to display in the preview (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-color",
+                "defaultValue": "'#000000'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -189,7 +189,7 @@ export class KritzelPortal {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '9706a815c6f49853983a0fdb68b097d62e65e90b', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '1bd76deeb440cd25e3895dc8824f5200461e4ae0' })));
+        return (h(Host, { key: 'c70a1f7c4b2801346fc7a711b44e951337f42f77', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '654bd6dd3ec83d77984a500d505ed1f3c04a0c26' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css

@@ -0,0 +1,47 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.fill-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fill-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: var(--kritzel-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background: var(--kritzel-shape-fill-option-background, #ffffff);
+  padding: 4px;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.fill-option:hover {
+  background-color: var(--kritzel-shape-fill-hover-background-color, #ebebeb);
+}
+
+.fill-option.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-shape-fill-selected-background-color, #ebebeb);
+}
+
+.fill-option:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--kritzel-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.fill-icon {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js

@@ -0,0 +1,93 @@
+import { Host, h } from "@stencil/core";
+export class KritzelShapeFill {
+    /** Current fill type */
+    value = 'transparent';
+    valueChange;
+    handleFillChange(type) {
+        this.value = type;
+        this.valueChange.emit(type);
+    }
+    renderFillIcon(type) {
+        const strokeColor = '#000000';
+        if (type === 'transparent') {
+            return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "none", stroke: strokeColor, "stroke-width": "2" })));
+        }
+        // Filled
+        return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
+    }
+    render() {
+        return (h(Host, { key: '7935296eb495557672cc96ab838ff4996953b220' }, h("div", { key: '69011629ff2dbdd38c7fb03b873fe5411b712de3', class: "fill-row" }, h("button", { key: '8a16a43b1ed8f316bc698a304d76667397a83015', class: {
+                'fill-option': true,
+                'selected': this.value === 'transparent',
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'f51854da5ece9f18242b4b91ac9645e13efc41b3', class: {
+                'fill-option': true,
+                'selected': this.value === 'filled',
+            }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
+    }
+    static get is() { return "kritzel-shape-fill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-shape-fill.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-shape-fill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ShapeFillType",
+                    "resolved": "\"filled\" | \"transparent\"",
+                    "references": {
+                        "ShapeFillType": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-shape-fill/kritzel-shape-fill.tsx",
+                            "id": "src/components/shared/kritzel-shape-fill/kritzel-shape-fill.tsx::ShapeFillType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current fill type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'transparent'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ShapeFillType",
+                    "resolved": "\"filled\" | \"transparent\"",
+                    "references": {
+                        "ShapeFillType": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-shape-fill/kritzel-shape-fill.tsx",
+                            "id": "src/components/shared/kritzel-shape-fill/kritzel-shape-fill.tsx::ShapeFillType"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js

@@ -80,7 +80,7 @@ export class KritzelSplitButton {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: 'a5587085e47c4e33148f9d0817731bfa3aa804b6', class: { mobile: this.isTouchDevice } }, h("button", { key: 'd3815785bb0919e2385bc7b9b0812466ed2b45a3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'b3225e1966bd21e8d37590cb39c0922e46afdaa9', name: this.buttonIcon })), h("div", { key: '526a88ef833cae7d2c7749f2a4bd96bcd2210a56', class: "split-divider" }), h("button", { key: '2c3ee46806bc64edc1f89a97c5e76ec493822065', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'c6204d8b14d8cefe9d6eff33af95b2a7ea9a6b7c', name: this.dropdownIcon })), h("kritzel-portal", { key: '07a5e9793484f79d9b4b1f9ae09503f762cb2580', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0cf7601fd43b846a69152f0fc6ab950ac108ebff', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'cdfb795efe513061f464c76650aa226cd7d5ac81', class: { mobile: this.isTouchDevice } }, h("button", { key: '5c38c82b57f35c2e39b0dbba71b3ccfd99ebcc5c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '862d96cca7ec5aef55284ac6a65ce16b07a03dda', name: this.buttonIcon })), h("div", { key: '41849e36e756af257d10baf82d2cb0c9cd1e441f', class: "split-divider" }), h("button", { key: '0c54c40c84dcf5cf1b94b024353334e4be0e3404', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '15b0d07c9afa584105180fb5f0701c15974f11aa', name: this.dropdownIcon })), h("kritzel-portal", { key: '23014ad95c3ee688b9348f480cc33cdb1c970244', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '90f4f29429a80f5700d16b1e99f3dd6315464bbb', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
     static get is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }
@@ -146,7 +146,8 @@ export class KritzelSplitButton {
                         "IKritzelMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
                         }
                     }
                 },
@@ -243,7 +244,8 @@ export class KritzelSplitButton {
                         "IKritzelMenuItemSelectEvent": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemSelectEvent"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemSelectEvent",
+                            "referenceLocation": "IKritzelMenuItemSelectEvent"
                         }
                     }
                 }
@@ -264,7 +266,8 @@ export class KritzelSplitButton {
                         "IKritzelMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
                         }
                     }
                 }
@@ -285,7 +288,8 @@ export class KritzelSplitButton {
                         "IKritzelMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
                         }
                     }
                 }
@@ -306,7 +310,8 @@ export class KritzelSplitButton {
                         "IKritzelMenuItemToggleChildMenuEvent": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemToggleChildMenuEvent"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemToggleChildMenuEvent",
+                            "referenceLocation": "IKritzelMenuItemToggleChildMenuEvent"
                         }
                     }
                 }
@@ -327,7 +332,8 @@ export class KritzelSplitButton {
                         "IKritzelMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/menu-item.interface",
-                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
                         }
                     }
                 }

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css

@@ -1,11 +1,20 @@
 :host {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
+  gap: 0;
+  padding: 0;
+  width: 100%;
   box-sizing: border-box;
 }
 
+.size-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(6, 32px);
+  gap: 8px;
+  justify-items: center;
+}
+
 .size-container {
   display: flex;
   justify-content: center;

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js

@@ -8,10 +8,10 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'd204d14384367ca8847ad30cab9801788c8d8fac' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '891f899a41844bba03305e3dd7cbf428d4471ff9' }, h("div", { key: '773a756d54d0632c9ea6b3aebb743abad2274244', class: "size-grid" }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
-            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size })))))));
     }
     static get is() { return "kritzel-stroke-size"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css

@@ -9,7 +9,7 @@
   width: fit-content;
   background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);
   color: var(--kritzel-controls-tooltip-color, #000000);
-  padding: var(--kritzel-controls-tooltip-padding, 8px);
+  padding: var(--kritzel-controls-tooltip-padding, 12px);
   border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);
   white-space: nowrap;
   box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -11,8 +11,10 @@ export class KritzelTooltip {
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
-        const target = event.target;
-        if (!this.host.contains(target)) {
+        // Check if click is inside the tooltip host or any of its shadow DOM content
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        if (!isInsideTooltip) {
             this.tooltipClosed.emit();
         }
     }
@@ -62,14 +64,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'c257f254b8ba6b95f251eac3136f5be282d23e30', style: {
+        return (h(Host, { key: '104ad4a160e4f47454955696e5f0e7a28873c3f5', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '14f31dc995236a2309e2371ecef278a0e6374139', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '6dace4d6ed82878333f8771cf4670d53cea36873' }))));
+            } }, h("div", { key: '283eec8d84ea29caefdb1f0c4f129c57d30bc133', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '1c6e2d9bcb69f8deec08b6c10384b4c7593babd3' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,8 @@ export class KritzelContextMenu {
                         "ContextMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/context-menu-item.interface",
-                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
                         }
                     }
                 },
@@ -130,7 +131,8 @@ export class KritzelContextMenu {
                         "KritzelBaseObject": {
                             "location": "import",
                             "path": "../../../classes/objects/base-object.class",
-                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
                         }
                     }
                 },
@@ -168,7 +170,8 @@ export class KritzelContextMenu {
                         "ContextMenuItem": {
                             "location": "import",
                             "path": "../../../interfaces/context-menu-item.interface",
-                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
                         }
                     }
                 }