kritzel-stencil 0.0.72 → 0.0.74

package/dist/cjs/index-BUKRdCPx.js

@@ -90,6 +90,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
+                case 'kritzel-dummy.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './kritzel-dummy.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'kritzel-brush-style_18.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */

package/dist/cjs/kritzel-brush-style_18.cjs.entry.js

@@ -60,13 +60,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (index.h(index.Host, { key: '929deee05337a8f617c4e429db7b79a210d4aa9d' }, index.h("div", { key: '592615e5172c24273e41ae70bbf4f1924a9c3eab', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: 'e913815994a30d97f92781e742c4a13de19e59fe' }, index.h("div", { key: 'e0cc40b10dcb298f5b86be7d4283d6bffbd08c2c', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '5ae0dffe7a3736273f063e7f7c61bc0bc50137ee', class: {
+            } }, index.h("div", { key: '5e0a092a6d3463d852a1760d125fba04494e0d90', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -108,7 +108,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: 'bae0e5b2c6444f4a447dbcb13bfd427b4f25ddb6' }, index.h("div", { key: '3020fe3b1eef1cafb8e1720716219464d11c0594', class: {
+        return (index.h(index.Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, index.h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -175,14 +175,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '711ced86c98b0a001fd52aa4b7eed19397fd512a' }, index.h("div", { key: '68c179e1b18bbb282920190942c8f2583eaabcc4', style: {
+        return (index.h(index.Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, index.h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: '2248a0e26f3a5ca6d4ad8af5f5dc861d0804e917', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: '6e2b5263c404d0e1bd8fce6414165bc0ba534b9a', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: 'ad494a319feee66e3793ddb9c89b67167bf072a4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ef258220f1613cb255a47dc08574b33427e7e904', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '5d186e8c0906393d3d151aefeb9ab3e587dd552d', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -214,14 +214,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '1c8463a1f6b7bcf81f3b58fc0064330c50d6ada9' }, index.h("div", { key: '69825e6c9be473dda3597c86d51dffff9a6418fd', style: {
+        return (index.h(index.Host, { key: '27d47c47987fb7644313a4face4a7023dfbe454d' }, index.h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: '56c947950e32989782512a2b00e3be0aaa12d77b', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '83fdb5908340adc032a7abae9b4b678697e0cff8', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '739c175fbc3c0c5c342f2983d0e47323bc5b56f4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '98251da71574b3487bf6ee46f7e4e95d133e1eea', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '95c88611a6631a4db5d200aac57e7eeef2c195b8', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -3134,11 +3134,11 @@ const KritzelControls = class {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (index.h(index.Host, { key: 'ab3a0b64ca3d79e10561ac3b7e768a5bbc979acd' }, index.h("kritzel-utility-panel", { key: '20b64a02a95a5c9bf916460d6aa48364f052db97', style: {
+        return (index.h(index.Host, { key: '843ec6f6887dc821fe5de4373fa074320973750f' }, index.h("kritzel-utility-panel", { key: '80da8761a8d0fd9df9ddbc65f935a631e834f33a', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), index.h("div", { key: 'de725b2e2b2327d2b9fd1910bbd21f3dd59b2a19', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), index.h("div", { key: 'fdb54d5e8098a738bf8f8391ee683b3615ec5530', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
@@ -4830,14 +4830,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1498c131b352144fbe99d0cadcf3de1eef794aff' }, index.h("kritzel-engine", { key: '65aa62cd9bd11f42c6bb460f943af8fb7832fae9', onEngineReady: () => this.handleEngineReady() }), index.h("div", { key: '7dc799845fed0d0652ad9a085169d282d4ec77e1', style: {
-                position: 'absolute',
-                bottom: '0',
-                left: '0',
-                backgroundColor: 'red',
-            } }, "Hello World"), index.h("kritzel-controls", { key: '2be2f3ead912a8afc28462a02a73ef7e961873d1', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: {
-                visibility: 'hidden',
-            } })));
+        return (index.h(index.Host, { key: '1498c131b352144fbe99d0cadcf3de1eef794aff' }, index.h("kritzel-engine", { key: '65aa62cd9bd11f42c6bb460f943af8fb7832fae9', onEngineReady: () => this.handleEngineReady() }), index.h("kritzel-controls", { key: 'ec8b22b47b369b76580e7d164bda28b4fed538c2', controls: this.controls, onControlsReady: () => this.handleControlsReady(), style: this.hideControls ? { display: 'none' } : {} })));
     }
 };
 KritzelEditor.style = kritzelEditorCss;
@@ -6086,7 +6079,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (index.h(index.Host, { key: '634eba2b2c90ccf7334b0ad24fbad98e9daf3a20' }, index.h("div", { key: '0c863f4c9f5e82a4f2b1f7dd7515b45ac7dced01', class: "font-preview", style: {
+        return (index.h(index.Host, { key: '6f25832892d8042464751360cc9e2307193f5407' }, index.h("div", { key: '3d2ec48a6a3b3e347c8cc1ab6f129bfacd984776', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -6151,7 +6144,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: 'e197ad17dc37e4af8d578c3bfa6bef2d1b7096f1' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -6195,7 +6188,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: 'b481b62184551bc776042f58d2f27beba837f61d' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: '#000000', size: size }))))));
@@ -6244,23 +6237,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '699f16bdb98e3d07f458b5c4f84f5df58060ffe6', style: {
+        return (index.h(index.Host, { key: '30db4852719464fcb9c6964c34992e87a364caa3', 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.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, index.h("div", { key: '7d2b685365b87c0e35f72323a09ce39ed2c8a6c2', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'c567073feddd24c851f14b217595610784f13847' }), index.h("div", { key: '1123ac7c2b725eefd0c2c041f4f822df8a54633d', class: "tooltip-arrow-wrapper", style: {
+            } }, index.h("div", { key: '3f270c9bdb1a5282f67034618123a5d61f9f8b40', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'bd4a11782eb2e263f21a8ab57ad64eb4fd4fe7ec' }), index.h("div", { key: '4ede173979b8e0335fb3a012b662a694dc09ea28', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: '89854afd1b07f2d6a9cba4b6015db4a6a90cf296', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: '8bf67c5383b53ac908b1d0865cf2ffe9cadf3fd6', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '3e92e4759e2c25a53fa6e3ab42339088a8c23c6d', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '0991da16ce655de3f9a798b1da9ddb3e8e399487', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,