kritzel-stencil 0.4.30 → 0.4.31

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

@@ -1,58 +1,58 @@
-:host {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.avatar-image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-.avatar-initials {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  color: var(--kritzel-avatar-initials-color, #ffffff);
-  font-weight: var(--kritzel-avatar-initials-font-weight, 500);
-  font-family: var(--kritzel-avatar-initials-font-family, sans-serif);
-  line-height: 1;
-}
-
-.avatar-default {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: var(--kritzel-avatar-default-background, #e0e0e0);
-  color: var(--kritzel-avatar-default-color, #9e9e9e);
-}
-
-.avatar-default svg {
-  width: 60%;
-  height: 60%;
-}
-
-:host(.has-image) {
-  border: var(--kritzel-avatar-border, none);
-}
-
-:host(.has-initials) {
-  border: var(--kritzel-avatar-border, none);
-}
-
-:host(.has-default) {
-  border: var(--kritzel-avatar-border, none);
-}
+:host {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.avatar-initials {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  color: var(--kritzel-avatar-initials-color, #ffffff);
+  font-weight: var(--kritzel-avatar-initials-font-weight, 500);
+  font-family: var(--kritzel-avatar-initials-font-family, sans-serif);
+  line-height: 1;
+}
+
+.avatar-default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--kritzel-avatar-default-background, #e0e0e0);
+  color: var(--kritzel-avatar-default-color, #9e9e9e);
+}
+
+.avatar-default svg {
+  width: 60%;
+  height: 60%;
+}
+
+:host(.has-image) {
+  border: var(--kritzel-avatar-border, none);
+}
+
+:host(.has-initials) {
+  border: var(--kritzel-avatar-border, none);
+}
+
+:host(.has-default) {
+  border: var(--kritzel-avatar-border, none);
+}

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

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: 'f199b56955b749b868ad8e7940ef3114f1109c37', style: containerStyles, class: {
+        return (h(Host, { key: '2aa6089fe51ec346fbd5446bad4190b0f9970f89', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '621a58cc965cf6d037f8515e1263bd5bf4098ab0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'c7c9670f6c3596c6a1e60fea1309da3306fb40f0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: '28ff2e8b191c2d476c0f40dd57a2c8ec330ba104', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'd2ef56b2fca2a609b5b99bb8d7e8747308ab9699', class: "avatar-default" }, h("svg", { key: '1c1d6e6e306a9938f559016eeb77a67aae42f536', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2c6af53101c20e137756d1194a3bac04c931066d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'e9899002b0e210d77c8eeb7f4e359bc518c82076', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '359b57ab41b24ce2f7163ff782cca167b3078133', class: "avatar-default" }, h("svg", { key: '26f60f955453804ef40fac4cb2982c650c15d236', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '9d872cdf173250f36596eb76c45bdae437f801a7', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css

@@ -1,43 +1,43 @@
-:host {
-  display: flex; 
-  align-items: flex-start; 
-  gap: 8px; 
-  padding: 8px; 
-  box-sizing: border-box; 
-  width: 100%;
-}
-
-.brush-style-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 42px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: none;
-  border-radius: 0; 
-  color: var(--control-text-color);
-  font-weight: bold;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.font-style-button:not(:last-child) {
-  border-right: 1px solid #333333; 
-}
-
-.font-style-button:hover {
-  background-color: var(--control-hover-bg);
-}
-
-.font-style-button:active {
-  background-color: var(--control-active-bg);
-}
-
-.font-style-button.selected,
-.font-style-button.selected:hover,
-.font-style-button.selected:active {
-  background-color: var(--control-selected-bg);
-  color: var(--control-selected-color);
+:host {
+  display: flex; 
+  align-items: flex-start; 
+  gap: 8px; 
+  padding: 8px; 
+  box-sizing: border-box; 
+  width: 100%;
+}
+
+.brush-style-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  border-radius: 0; 
+  color: var(--control-text-color);
+  font-weight: bold;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.font-style-button:not(:last-child) {
+  border-right: 1px solid #333333; 
+}
+
+.font-style-button:hover {
+  background-color: var(--control-hover-bg);
+}
+
+.font-style-button:active {
+  background-color: var(--control-active-bg);
+}
+
+.font-style-button.selected,
+.font-style-button.selected:hover,
+.font-style-button.selected:active {
+  background-color: var(--control-selected-bg);
+  color: var(--control-selected-color);
 }

package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js

@@ -14,7 +14,7 @@ export class KritzelBrushStyle {
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '7b05e93ce8d28c23503e4ca358a487165169f1ad' }, h("kritzel-dropdown", { key: 'a8f2f30762b339411cd3995482c3bc658855f749', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ac06462897a0fbd5011533095fafb7491a75508a', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'caee4c657c7fee478b1038ebd2ef3b502cf73e5e', name: this.type, size: 16 })))));
+        return (h(Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', name: this.type, size: 16 })))));
     }
     static get is() { return "kritzel-brush-style"; }
     static get encapsulation() { return "shadow"; }
@@ -59,7 +59,7 @@ export class KritzelBrushStyle {
                     "references": {
                         "BrushStyleOption": {
                             "location": "local",
-                            "path": "/home/runner/work/kritzel/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx",
+                            "path": "C:/Projects/kritzel-private/libs/kritzel-stencil/src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx",
                             "id": "src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx::BrushStyleOption"
                         }
                     }
@@ -72,7 +72,7 @@ export class KritzelBrushStyle {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    { value: 'pen', label: 'Pen' },\n    { value: 'highlighter', label: 'Highlighter' },\n  ]"
+                "defaultValue": "[\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ]"
             }
         };
     }

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

@@ -1,73 +1,73 @@
-:host {
-  display: inline-block;
-  font-family: sans-serif;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  display: inline-flex;
-  width: var(--kritzel-button-width, auto);
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border-radius: var(--kritzel-button-border-radius, 8px);
-  padding: var(--kritzel-button-padding, 12px 20px);
-  font-size: var(--kritzel-button-font-size, 14px);
-  font-weight: var(--kritzel-button-font-weight, 500);
-  transition: background-color 0.15s ease, opacity 0.15s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-button.primary {
-  background-color: var(--kritzel-button-primary-background-color, #007AFF);
-  color: var(--kritzel-button-primary-color, #ffffff);
-}
-
-button.primary:hover {
-  background-color: var(--kritzel-button-primary-hover-background-color, #006ae6);
-}
-
-button.primary:active {
-  background-color: var(--kritzel-button-primary-active-background-color, #005bbf);
-}
-
-button.secondary {
-  background-color: var(--kritzel-button-secondary-background-color, #f0f0f0);
-  color: var(--kritzel-button-secondary-color, #333333);
-}
-
-button.secondary:hover {
-  background-color: var(--kritzel-button-secondary-hover-background-color, #e0e0e0);
-}
-
-button.secondary:active {
-  background-color: var(--kritzel-button-secondary-active-background-color, #d0d0d0);
-}
-
-button.text {
-  background-color: transparent;
-  color: var(--kritzel-button-text-color, #007AFF);
-}
-
-button.text:hover {
-  background-color: var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08));
-}
-
-button.text:active {
-  background-color: var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15));
-}
-
-button.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
+:host {
+  display: inline-block;
+  font-family: sans-serif;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  display: inline-flex;
+  width: var(--kritzel-button-width, auto);
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: var(--kritzel-button-border-radius, 8px);
+  padding: var(--kritzel-button-padding, 12px 20px);
+  font-size: var(--kritzel-button-font-size, 14px);
+  font-weight: var(--kritzel-button-font-weight, 500);
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button.primary {
+  background-color: var(--kritzel-button-primary-background-color, #007AFF);
+  color: var(--kritzel-button-primary-color, #ffffff);
+}
+
+button.primary:hover {
+  background-color: var(--kritzel-button-primary-hover-background-color, #006ae6);
+}
+
+button.primary:active {
+  background-color: var(--kritzel-button-primary-active-background-color, #005bbf);
+}
+
+button.secondary {
+  background-color: var(--kritzel-button-secondary-background-color, #f0f0f0);
+  color: var(--kritzel-button-secondary-color, #333333);
+}
+
+button.secondary:hover {
+  background-color: var(--kritzel-button-secondary-hover-background-color, #e0e0e0);
+}
+
+button.secondary:active {
+  background-color: var(--kritzel-button-secondary-active-background-color, #d0d0d0);
+}
+
+button.text {
+  background-color: transparent;
+  color: var(--kritzel-button-text-color, #007AFF);
+}
+
+button.text:hover {
+  background-color: var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08));
+}
+
+button.text:active {
+  background-color: var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15));
+}
+
+button.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: 'b7d78dad25d41116ac6368c1ff2cd41ee28d9cdc' }, h("button", { key: '88cfd3674e63cd82ea5874205237415a540307b6', type: this.type, class: {
+        return (h(Host, { key: 'a5f90834739101961dd128dba592cf53b877bb82' }, h("button", { key: '19cbfaeb85e14fbbc76b517ace1a1e084adbb65d', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'a7f4fd923800f66bc7ea438f2cbcdfde81b11ae1' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '6e4c7cdfb295aa0dc79e494e5fdeb5527ab80383' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,25 +1,25 @@
-:host {
-  display: flex;
-}
-
-.checkerboard-bg {
-  background: repeating-conic-gradient(
-      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
-      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
-    )
-    50% / 8px 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.color-circle {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  display: block;
-}
-
-.color-circle.white {
-  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
+:host {
+  display: flex;
+}
+
+.checkerboard-bg {
+  background: repeating-conic-gradient(
+      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
+      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
+    )
+    50% / 8px 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.color-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.color-circle.white {
+  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
 }

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

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: '17b5c44e1defe8f3fb41632391be093a12bb899b' }, h("div", { key: '545f4c4fd62dea22a4a5f36108a51d30c57f2652', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '230d6fa9bc597920e9b2ebc97d597d4f57df0b92' }, h("div", { key: '3146aac9869f34762c7f86ed8882d62ef01248ce', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: 'bbcb68f6e5f00d9a33b316d52ac86e49911e463c', class: {
+            } }, h("div", { key: 'bddf0776144a6bdfca9c005708fa1467e244546b', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css

@@ -1,46 +1,46 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.color-grid {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(6, 32px);
-  gap: 8px;
-  justify-items: center;
-  overflow: hidden;
-  height: 40px;
-  transition: height 0.1s ease-in-out;
-}
-
-.color-grid.expanded {
-  height: 500px;
-}
-
-.color-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-}
-
-.color-container:hover {
-  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
-}
-
-.color-container.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-color-palette-selected-background-color);
-}
-
-
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.color-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(6, 32px);
+  gap: 8px;
+  justify-items: center;
+  overflow: hidden;
+  height: 40px;
+  transition: height 0.1s ease-in-out;
+}
+
+.color-grid.expanded {
+  height: 500px;
+}
+
+.color-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+}
+
+.color-container:hover {
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.color-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-color-palette-selected-background-color);
+}
+
+

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '5f25a2ead76106ba2ef9762b4d212d5a9d7ac2a8' }, h("div", { key: '764cc6a55cc1865aaf1c501ee89a161f74fefa1c', class: {
+        return (h(Host, { key: '285c0db424b154d1b4ebca2fd4447bb248bc50f5' }, h("div", { key: '703abc3074b886895e963992cbc3084357c06a15', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {