npm - kritzel-stencil - Versions diffs - 0.0.105 → 0.0.106 - Mend

kritzel-stencil 0.0.105 → 0.0.106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js CHANGED Viewed

@@ -76,7 +76,7 @@ export class KritzelDropdown {
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
         };
-        return (h(Host, { key: '1e4df5425e205d3709d93d71f2e7a47844a5b0f2' }, h("div", { key: '6e0d6fa7b35d1d9d61cf2174828d0d0f0d242683', class: "dropdown-wrapper" }, h("slot", { key: '07565dc0982498a9b026bc36f285eb728b5c771b', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), h("select", { key: 'ba618a1166681f36aae554242192e375286ba7e8', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: '2731003fa214cb3aa968b48db36ab1816d563425', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
+        return (h(Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
     }
     static get is() { return "kritzel-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-dropdown.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\n\nexport interface DropdownOption {\n value: string;\n label: string;\n style?: any; // For individual option styling, e.g., font family\n}\n\n@Component({\n tag: 'kritzel-dropdown',\n styleUrl: 'kritzel-dropdown.css',\n shadow: true,\n})\nexport class KritzelDropdown {\n @Prop() \n options: DropdownOption[] = [];\n \n @Prop() \n value: string;\n \n @Prop() \n width?: string;\n \n @Prop() \n selectStyles?: any = {}; \n\n @State() \n internalValue: string;\n\n @State() \n hasSuffixContent: boolean = false;\n\n @State()\n hasPrefixContent: boolean = false;\n\n @Event() \n valueChanged: EventEmitter<string>;\n\n private suffixSlotElement?: HTMLSlotElement;\n private prefixSlotElement?: HTMLSlotElement;\n\n componentWillLoad() {\n this.updateInternalValue(this.value, false);\n this.evaluateSuffixContent();\n this.evaluatePrefixContent();\n }\n\n @Watch('value')\n externalValueChanged(newValue: string) {\n if (newValue !== this.internalValue) {\n this.updateInternalValue(newValue, false);\n }\n }\n \n @Watch('options')\n optionsChanged() {\n this.updateInternalValue(this.internalValue, true);\n }\n\n private updateInternalValue(proposedValue: string, emitChange: boolean) {\n let finalValue = proposedValue;\n if (this.options && this.options.length > 0) {\n const isValidValue = this.options.some(opt => opt.value === finalValue);\n if (!finalValue \|\| !isValidValue) {\n finalValue = this.options[0].value;\n }\n } else {\n finalValue = undefined;\n }\n\n if (this.internalValue !== finalValue) {\n this.internalValue = finalValue;\n if (emitChange \|\| (proposedValue !== finalValue && proposedValue !== undefined)) {\n this.valueChanged.emit(this.internalValue);\n }\n }\n }\n\n private handleSelectChange = (event: Event) => {\n const newValue = (event.target as HTMLSelectElement).value;\n if (this.internalValue !== newValue) {\n this.internalValue = newValue;\n this.valueChanged.emit(this.internalValue);\n }\n };\n\n private evaluateSuffixContent = () => {\n if (this.suffixSlotElement) {\n const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;\n if (this.hasSuffixContent !== newHasContent) {\n this.hasSuffixContent = newHasContent;\n }\n } else {\n if (this.hasSuffixContent !== false) {\n this.hasSuffixContent = false;\n }\n }\n }\n\n private evaluatePrefixContent = () => {\n if (this.prefixSlotElement) {\n const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;\n if (this.hasPrefixContent !== newHasContent) {\n this.hasPrefixContent = newHasContent;\n }\n } else {\n if (this.hasPrefixContent !== false) {\n this.hasPrefixContent = false;\n }\n }\n }\n\n render() {\n const selectClasses = {\n 'custom-select': true,\n 'has-suffix-border': this.hasSuffixContent,\n 'has-prefix-border': this.hasPrefixContent,\n };\n\n return (\n <Host>\n <div class=\"dropdown-wrapper\">\n <slot\n name=\"prefix\"\n ref={el => this.prefixSlotElement = el as HTMLSlotElement}\n onSlotchange={this.evaluatePrefixContent}\n ></slot>\n <select\n class={selectClasses}\n style={{ ...this.selectStyles, width: this.width }}\n onInput={this.handleSelectChange}\n >\n {this.options.map(option => (\n <option\n value={option.value}\n style={option.style}\n selected={option.value === this.internalValue}\n >\n {option.label}\n </option>\n ))}\n </select>\n <slot \n name=\"suffix\"\n ref={el => this.suffixSlotElement = el as HTMLSlotElement}\n onSlotchange={this.evaluateSuffixContent}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-dropdown.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\nexport interface DropdownOption {\r\n value: string;\r\n label: string;\r\n style?: any; // For individual option styling, e.g., font family\r\n}\r\n\r\n@Component({\r\n tag: 'kritzel-dropdown',\r\n styleUrl: 'kritzel-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class KritzelDropdown {\r\n @Prop() \r\n options: DropdownOption[] = [];\r\n \r\n @Prop() \r\n value: string;\r\n \r\n @Prop() \r\n width?: string;\r\n \r\n @Prop() \r\n selectStyles?: any = {}; \r\n\r\n @State() \r\n internalValue: string;\r\n\r\n @State() \r\n hasSuffixContent: boolean = false;\r\n\r\n @State()\r\n hasPrefixContent: boolean = false;\r\n\r\n @Event() \r\n valueChanged: EventEmitter<string>;\r\n\r\n private suffixSlotElement?: HTMLSlotElement;\r\n private prefixSlotElement?: HTMLSlotElement;\r\n\r\n componentWillLoad() {\r\n this.updateInternalValue(this.value, false);\r\n this.evaluateSuffixContent();\r\n this.evaluatePrefixContent();\r\n }\r\n\r\n @Watch('value')\r\n externalValueChanged(newValue: string) {\r\n if (newValue !== this.internalValue) {\r\n this.updateInternalValue(newValue, false);\r\n }\r\n }\r\n \r\n @Watch('options')\r\n optionsChanged() {\r\n this.updateInternalValue(this.internalValue, true);\r\n }\r\n\r\n private updateInternalValue(proposedValue: string, emitChange: boolean) {\r\n let finalValue = proposedValue;\r\n if (this.options && this.options.length > 0) {\r\n const isValidValue = this.options.some(opt => opt.value === finalValue);\r\n if (!finalValue \|\| !isValidValue) {\r\n finalValue = this.options[0].value;\r\n }\r\n } else {\r\n finalValue = undefined;\r\n }\r\n\r\n if (this.internalValue !== finalValue) {\r\n this.internalValue = finalValue;\r\n if (emitChange \|\| (proposedValue !== finalValue && proposedValue !== undefined)) {\r\n this.valueChanged.emit(this.internalValue);\r\n }\r\n }\r\n }\r\n\r\n private handleSelectChange = (event: Event) => {\r\n const newValue = (event.target as HTMLSelectElement).value;\r\n if (this.internalValue !== newValue) {\r\n this.internalValue = newValue;\r\n this.valueChanged.emit(this.internalValue);\r\n }\r\n };\r\n\r\n private evaluateSuffixContent = () => {\r\n if (this.suffixSlotElement) {\r\n const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n if (this.hasSuffixContent !== newHasContent) {\r\n this.hasSuffixContent = newHasContent;\r\n }\r\n } else {\r\n if (this.hasSuffixContent !== false) {\r\n this.hasSuffixContent = false;\r\n }\r\n }\r\n }\r\n\r\n private evaluatePrefixContent = () => {\r\n if (this.prefixSlotElement) {\r\n const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n if (this.hasPrefixContent !== newHasContent) {\r\n this.hasPrefixContent = newHasContent;\r\n }\r\n } else {\r\n if (this.hasPrefixContent !== false) {\r\n this.hasPrefixContent = false;\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const selectClasses = {\r\n 'custom-select': true,\r\n 'has-suffix-border': this.hasSuffixContent,\r\n 'has-prefix-border': this.hasPrefixContent,\r\n };\r\n\r\n return (\r\n <Host>\r\n <div class=\"dropdown-wrapper\">\r\n <slot\r\n name=\"prefix\"\r\n ref={el => this.prefixSlotElement = el as HTMLSlotElement}\r\n onSlotchange={this.evaluatePrefixContent}\r\n ></slot>\r\n <select\r\n class={selectClasses}\r\n style={{ ...this.selectStyles, width: this.width }}\r\n onInput={this.handleSelectChange}\r\n >\r\n {this.options.map(option => (\r\n <option\r\n value={option.value}\r\n style={option.style}\r\n selected={option.value === this.internalValue}\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n <slot \r\n name=\"suffix\"\r\n ref={el => this.suffixSlotElement = el as HTMLSlotElement}\r\n onSlotchange={this.evaluateSuffixContent}\r\n ></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-font/kritzel-font.css CHANGED Viewed

@@ -1,10 +1,10 @@
-:host {
-  display: block;
-}
-.font-preview {
-  color: var(--kritzel-font-size-text-color, #333333);
-  line-height: 1;
-  text-align: center;
-  font-weight: bold;
-}
+:host {
+  display: block;
+}
+.font-preview {
+  color: var(--kritzel-font-size-text-color, #333333);
+  line-height: 1;
+  text-align: center;
+  font-weight: bold;
+}

package/dist/collection/components/shared/kritzel-font/kritzel-font.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class KritzelFont {
         this.color = '#000000';
     }
     render() {
-        return (h(Host, { key: '6f25832892d8042464751360cc9e2307193f5407' }, h("div", { key: '3d2ec48a6a3b3e347c8cc1ab6f129bfacd984776', class: "font-preview", style: {
+        return (h(Host, { key: 'b4ebef665dacaca67e0a7574a15eae851e40ba3d' }, h("div", { key: '3af8906e1092fe333daf52da9e0da7a764fc47e3', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/collection/components/shared/kritzel-font/kritzel-font.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-font.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font/kritzel-font.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IALxB;QAOE,eAAU,GAAW,mBAAmB,CAAC;QAGzC,SAAI,GAAW,EAAE,CAAC;QAGlB,UAAK,GAAW,SAAS,CAAC;KAkB3B;IAhBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,QAGG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'kritzel-font',\n styleUrl: 'kritzel-font.css',\n shadow: true,\n})\nexport class KritzelFont {\n @Prop()\n fontFamily: string = 'Arial, sans-serif';\n\n @Prop()\n size: number = 24;\n\n @Prop()\n color: string = '#000000';\n\n render() {\n return (\n <Host>\n <div\n class=\"font-preview\"\n style={{\n fontFamily: this.fontFamily,\n fontSize: `${this.size}px`,\n color: this.color\n }}\n >\n A\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-font.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font/kritzel-font.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IALxB;QAOE,eAAU,GAAW,mBAAmB,CAAC;QAGzC,SAAI,GAAW,EAAE,CAAC;QAGlB,UAAK,GAAW,SAAS,CAAC;KAkB3B;IAhBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,QAGG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-font',\r\n styleUrl: 'kritzel-font.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFont {\r\n @Prop()\r\n fontFamily: string = 'Arial, sans-serif';\r\n\r\n @Prop()\r\n size: number = 24;\r\n\r\n @Prop()\r\n color: string = '#000000';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class=\"font-preview\"\r\n style={{\r\n fontFamily: this.fontFamily,\r\n fontSize: `${this.size}px`,\r\n color: this.color\r\n }}\r\n >\r\n A\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css CHANGED Viewed

@@ -1,48 +1,48 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
-  box-sizing: border-box;
-  width: 100%;
-}
-.font-style-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 42px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: none;
-  cursor: pointer;
-  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);
-}
-.font-style-button.italic-text {
-  font-style: italic;
-}
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.font-style-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  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);
+}
+.font-style-button.italic-text {
+  font-style: italic;
+}

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class KritzelFontFamily {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '7ab677468a605e6b23466b73c1c93e258cf85c1a' }, h("kritzel-dropdown", { key: '5c2528687d1e5068d958b9f663cb0ceb46a2794e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'ab422c954569515f636031ddaaea2ec5f13a7bdc', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '884116c86f3d710df58f82c10294f66aae95829e', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (h(Host, { key: 'f420ff18156d54bfc475148a7d9aae0f1441408c' }, h("kritzel-dropdown", { key: '6b54fb8265a0eb59a6a681c6a2b7a95fb222671c', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'b853c75a425c7baafa7a8e749c90c0b08884375c', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '68dea850dd1d1f38db727d8be0eec3481890c571', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
     static get is() { return "kritzel-font-family"; }
     static get encapsulation() { return "shadow"; }
@@ -70,7 +70,7 @@ export class KritzelFontFamily {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n    { value: 'arial', label: 'Arial' },\n    { value: 'verdana', label: 'Verdana' },\n    { value: 'helvetica', label: 'Helvetica' },\n    { value: 'tahoma', label: 'Tahoma' },\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\n    { value: 'times new roman', label: 'Times New Roman' },\n    { value: 'georgia', label: 'Georgia' },\n    { value: 'garamond', label: 'Garamond' },\n    { value: 'courier new', label: 'Courier New' },\n    { value: 'brush script mt', label: 'Brush Script MT' },\n  ]"
+                "defaultValue": "[\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ]"
             },
             "selectedFontFamily": {
                 "type": "string",

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-font-family.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAY9E,MAAM,OAAO,iBAAiB;IAL9B;QAOE,gBAAW,GAAiB;YAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;YAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;YACtD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;YAC9C,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;SACvD,CAAC;QAiBM,8BAAyB,GAAG,CAAC,KAA0B,EAAE,EAAE;YACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,CAAC,CAAC;KAuBH;IAlCC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;SACpC,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBAErD,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,QAAW;gBAC1D,+DAAQ,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,QAAW,CACrD,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nexport interface FontOption {\n value: string;\n label: string;\n}\n\n@Component({\n tag: 'kritzel-font-family',\n styleUrl: 'kritzel-font-family.css',\n shadow: true,\n})\nexport class KritzelFontFamily {\n @Prop() \n fontOptions: FontOption[] = [\n { value: 'arial', label: 'Arial' },\n { value: 'verdana', label: 'Verdana' },\n { value: 'helvetica', label: 'Helvetica' },\n { value: 'tahoma', label: 'Tahoma' },\n { value: 'trebuchet ms', label: 'Trebuchet MS' },\n { value: 'times new roman', label: 'Times New Roman' },\n { value: 'georgia', label: 'Georgia' },\n { value: 'garamond', label: 'Garamond' },\n { value: 'courier new', label: 'Courier New' },\n { value: 'brush script mt', label: 'Brush Script MT' },\n ];\n\n @Prop({ mutable: true }) \n selectedFontFamily: string;\n\n @Event()\n fontFamilyChange: EventEmitter<string>;\n\n componentWillLoad() {\n if (this.fontOptions && this.fontOptions.length > 0) {\n const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\n if (!this.selectedFontFamily \|\| !isValidCurrentFont) {\n this.selectedFontFamily = this.fontOptions[0].value;\n }\n }\n }\n\n private handleDropdownValueChange = (event: CustomEvent<string>) => {\n this.fontFamilyChange.emit(event.detail);\n };\n\n render() {\n const dropdownOptions = this.fontOptions.map(option => ({\n value: option.value,\n label: option.label,\n style: { fontFamily: option.value },\n }));\n\n return (\n <Host>\n <kritzel-dropdown\n options={dropdownOptions}\n value={this.selectedFontFamily}\n onValueChanged={this.handleDropdownValueChange}\n selectStyles={{ fontFamily: this.selectedFontFamily }}\n >\n <button class=\"font-style-button\" slot=\"suffix\">B</button>\n <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\n </kritzel-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-font-family.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAY9E,MAAM,OAAO,iBAAiB;IAL9B;QAOE,gBAAW,GAAiB;YAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;YAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;YACtD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;YAC9C,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;SACvD,CAAC;QAiBM,8BAAyB,GAAG,CAAC,KAA0B,EAAE,EAAE;YACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,CAAC,CAAC;KAuBH;IAlCC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;SACpC,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBAErD,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,QAAW;gBAC1D,+DAAQ,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,QAAW,CACrD,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\n@Component({\r\n tag: 'kritzel-font-family',\r\n styleUrl: 'kritzel-font-family.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n @Prop() \r\n fontOptions: FontOption[] = [\r\n { value: 'arial', label: 'Arial' },\r\n { value: 'verdana', label: 'Verdana' },\r\n { value: 'helvetica', label: 'Helvetica' },\r\n { value: 'tahoma', label: 'Tahoma' },\r\n { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n { value: 'times new roman', label: 'Times New Roman' },\r\n { value: 'georgia', label: 'Georgia' },\r\n { value: 'garamond', label: 'Garamond' },\r\n { value: 'courier new', label: 'Courier New' },\r\n { value: 'brush script mt', label: 'Brush Script MT' },\r\n ];\r\n\r\n @Prop({ mutable: true }) \r\n selectedFontFamily: string;\r\n\r\n @Event()\r\n fontFamilyChange: EventEmitter<string>;\r\n\r\n componentWillLoad() {\r\n if (this.fontOptions && this.fontOptions.length > 0) {\r\n const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n if (!this.selectedFontFamily \|\| !isValidCurrentFont) {\r\n this.selectedFontFamily = this.fontOptions[0].value;\r\n }\r\n }\r\n }\r\n\r\n private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n this.fontFamilyChange.emit(event.detail);\r\n };\r\n\r\n render() {\r\n const dropdownOptions = this.fontOptions.map(option => ({\r\n value: option.value,\r\n label: option.label,\r\n style: { fontFamily: option.value },\r\n }));\r\n\r\n return (\r\n <Host>\r\n <kritzel-dropdown\r\n options={dropdownOptions}\r\n value={this.selectedFontFamily}\r\n onValueChanged={this.handleDropdownValueChange}\r\n selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n >\r\n <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n </kritzel-dropdown>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css CHANGED Viewed

@@ -1,30 +1,30 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
-  box-sizing: border-box;
-}
-.size-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
-  cursor: pointer;
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  border-radius: 50%;
-}
-.size-container:hover {
-  background-color: var(--kritzel-font-size-hover-background-color, #f0f0f0);
-}
-.size-container.selected {
-  border-color: var(--kritzel-selection-border-color, #0E1111);
-  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
-}
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+.size-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+.size-container:hover {
+  background-color: var(--kritzel-font-size-hover-background-color, #f0f0f0);
+}
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #0E1111);
+  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
+}

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js CHANGED Viewed

@@ -10,7 +10,7 @@ export class KritzelFontSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: 'daf7a1f16f96dfcbaaaa2ba43b77c99565c9893d' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-font-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAOE,UAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAG1C,iBAAY,GAAkB,IAAI,CAAC;QAGnC,eAAU,GAAW,OAAO,CAAC;KA2B9B;IAtBS,eAAe,CAAC,IAAY;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;aACvC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAEzC,oBAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'kritzel-font-size',\n styleUrl: 'kritzel-font-size.css',\n shadow: true,\n})\nexport class KritzelFontSize {\n @Prop()\n sizes: number[] = [8, 10, 12, 16, 20, 24];\n\n @Prop({ mutable: true })\n selectedSize: number \| null = null;\n\n @Prop()\n fontFamily: string = 'Arial';\n\n @Event()\n sizeChange: EventEmitter<number>;\n\n private handleSizeClick(size: number) {\n this.selectedSize = size;\n this.sizeChange.emit(size);\n }\n\n render() {\n return (\n <Host>\n {this.sizes.map(size => (\n <div\n class={{\n 'size-container': true,\n 'selected': this.selectedSize === size,\n }}\n onClick={() => this.handleSizeClick(size)}\n >\n <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\n </div>\n ))}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-font-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAOE,UAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAG1C,iBAAY,GAAkB,IAAI,CAAC;QAGnC,eAAU,GAAW,OAAO,CAAC;KA2B9B;IAtBS,eAAe,CAAC,IAAY;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;aACvC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAEzC,oBAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-font-size',\r\n styleUrl: 'kritzel-font-size.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n @Prop()\r\n sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n\r\n @Prop({ mutable: true })\r\n selectedSize: number \| null = null;\r\n\r\n @Prop()\r\n fontFamily: string = 'Arial';\r\n\r\n @Event()\r\n sizeChange: EventEmitter<number>;\r\n\r\n private handleSizeClick(size: number) {\r\n this.selectedSize = size;\r\n this.sizeChange.emit(size);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.sizes.map(size => (\r\n <div\r\n class={{\r\n 'size-container': true,\r\n 'selected': this.selectedSize === size,\r\n }}\r\n onClick={() => this.handleSizeClick(size)}\r\n >\r\n <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n </div>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css CHANGED Viewed

@@ -1,17 +1,17 @@
-:host {
-  display: inline-flex; /* Changed from block to inline-flex for better alignment */
-  justify-content: center; /* Center content horizontally */
-  align-items: center; /* Center content vertically */
-}
-span {
-  display: flex;
-  align-items: center;
-  width: 100%; /* Make span fill host width */
-  height: 100%; /* Make span fill host height */
-}
-span > svg { /* Ensure SVG scales within the span */
-  width: 100%;
-  height: 100%;
-}
+:host {
+  display: inline-flex; /* Changed from block to inline-flex for better alignment */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+}
+span {
+  display: flex;
+  align-items: center;
+  width: 100%; /* Make span fill host width */
+  height: 100%; /* Make span fill host height */
+}
+span > svg { /* Ensure SVG scales within the span */
+  width: 100%;
+  height: 100%;
+}

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

@@ -9,7 +9,7 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: 'ee73f8679fa8e1f99bc01f31fb5cd8935fa597a8' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));

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

@@ -1,17 +1,17 @@
-:host {
-  width: auto;
-}
-.tooltip-content {
-  position: relative;
-  padding: 8px 12px;
-  border-radius: 4px;
-  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);
-  border-radius: var(--kritzel-controls-tooltip-border-radius, 8px);
-  white-space: nowrap;
-  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
-}
+:host {
+  width: auto;
+}
+.tooltip-content {
+  position: relative;
+  padding: 8px 12px;
+  border-radius: 4px;
+  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);
+  border-radius: var(--kritzel-controls-tooltip-border-radius, 8px);
+  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 CHANGED Viewed

@@ -37,23 +37,23 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '30db4852719464fcb9c6964c34992e87a364caa3', style: {
+        return (h(Host, { key: 'd0ec1b12583a5e69a022ed4538060a0fe609b4fc', 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`,
-            } }, h("div", { key: '3f270c9bdb1a5282f67034618123a5d61f9f8b40', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'bd4a11782eb2e263f21a8ab57ad64eb4fd4fe7ec' }), h("div", { key: '4ede173979b8e0335fb3a012b662a694dc09ea28', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'f4edf3ee17d5074aff60808dada77ddb601ea33d', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '947ea9110ccb0ed4a02684d7a51b04da8df6c909' }), h("div", { key: 'bffda8ba16f67e54cb581f96f355b5ddefca5792', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: 'c96993f91dde76cc5feb0c42dd4e599837121bf7', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '76d33735507f0164dc68173f02c3ca2d45070744', 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, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '888f9d44f58969b3f50db04f1cd3d49008872b55', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: '8f1913c9ed12f8a3171963cfb0360241fab21302', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen } from '@stencil/core';\n\nconst MOBILE_BREAKPOINT = 768;\n\n@Component({\n tag: 'kritzel-tooltip',\n styleUrl: 'kritzel-tooltip.css',\n shadow: true,\n})\nexport class KritzelTooltip {\n @Prop()\n isVisible: boolean = false;\n\n @Prop()\n anchorElement: HTMLElement;\n\n @Prop()\n arrowSize: number = 8;\n\n @Prop()\n offsetY: number = 24;\n\n @Element()\n el: HTMLElement;\n\n @State()\n positionX: number = 0;\n\n @State()\n arrowOffset: string = '0px';\n\n @State()\n private isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\n\n @Listen('resize', { target: 'window' })\n handleWindowResize() {\n this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\n this.calculateAdjustedPosition();\n }\n\n componentWillLoad() {\n this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\n this.calculateAdjustedPosition();\n }\n\n componentWillUpdate() {\n this.calculateAdjustedPosition();\n }\n\n private calculateAdjustedPosition() {\n if (this.isVisible && this.anchorElement) {\n const anchorRect = this.anchorElement.getBoundingClientRect();\n const tooltipContent = this.el.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\n\n if (!this.isMobileView) {\n this.positionX = anchorRect.left + anchorRect.width / 2;\n this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \n } else {\n const tooltipRect = tooltipContent.getBoundingClientRect();\n this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\n this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\n }\n }\n }\n\n render() {\n return (\n <Host\n style={{\n position: 'fixed',\n zIndex: '9999',\n transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\n visibility: this.isVisible ? 'visible' : 'hidden',\n left: !this.isMobileView ? `${this.positionX}px` : '50%',\n marginBottom: `${this.offsetY + this.arrowSize}px`,\n }}\n >\n <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\n <slot></slot>\n <div\n class=\"tooltip-arrow-wrapper\"\n style={{\n position: 'fixed',\n left: this.arrowOffset,\n bottom: `-${this.arrowSize * 2}px`,\n }}\n >\n <div\n class=\"tooltip-arrow\"\n style={{\n borderLeft: `${this.arrowSize}px solid transparent`,\n borderRight: `${this.arrowSize}px solid transparent`,\n borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\n filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\n }}\n ></div>\n <div\n class=\"tooltip-arrow-rect\"\n style={{\n position: 'relative',\n width: `${this.arrowSize * 2}px`,\n height: `${this.arrowSize}px`,\n backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\n bottom: `${this.arrowSize * 2}px`,\n }}\n ></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen } from '@stencil/core';\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n@Component({\r\n tag: 'kritzel-tooltip',\r\n styleUrl: 'kritzel-tooltip.css',\r\n shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n @Prop()\r\n isVisible: boolean = false;\r\n\r\n @Prop()\r\n anchorElement: HTMLElement;\r\n\r\n @Prop()\r\n arrowSize: number = 8;\r\n\r\n @Prop()\r\n offsetY: number = 24;\r\n\r\n @Element()\r\n el: HTMLElement;\r\n\r\n @State()\r\n positionX: number = 0;\r\n\r\n @State()\r\n arrowOffset: string = '0px';\r\n\r\n @State()\r\n private isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n @Listen('resize', { target: 'window' })\r\n handleWindowResize() {\r\n this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n componentWillLoad() {\r\n this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n private calculateAdjustedPosition() {\r\n if (this.isVisible && this.anchorElement) {\r\n const anchorRect = this.anchorElement.getBoundingClientRect();\r\n const tooltipContent = this.el.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n\r\n if (!this.isMobileView) {\r\n this.positionX = anchorRect.left + anchorRect.width / 2;\r\n this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \r\n } else {\r\n const tooltipRect = tooltipContent.getBoundingClientRect();\r\n this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\r\n this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{\r\n position: 'fixed',\r\n zIndex: '9999',\r\n transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n visibility: this.isVisible ? 'visible' : 'hidden',\r\n left: !this.isMobileView ? `${this.positionX}px` : '50%',\r\n marginBottom: `${this.offsetY + this.arrowSize}px`,\r\n }}\r\n >\r\n <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n <slot></slot>\r\n <div\r\n class=\"tooltip-arrow-wrapper\"\r\n style={{\r\n position: 'fixed',\r\n left: this.arrowOffset,\r\n bottom: `-${this.arrowSize * 2}px`,\r\n }}\r\n >\r\n <div\r\n class=\"tooltip-arrow\"\r\n style={{\r\n borderLeft: `${this.arrowSize}px solid transparent`,\r\n borderRight: `${this.arrowSize}px solid transparent`,\r\n borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\r\n filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\r\n }}\r\n ></div>\r\n <div\r\n class=\"tooltip-arrow-rect\"\r\n style={{\r\n position: 'relative',\r\n width: `${this.arrowSize * 2}px`,\r\n height: `${this.arrowSize}px`,\r\n backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\r\n bottom: `${this.arrowSize * 2}px`,\r\n }}\r\n ></div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -7,7 +7,7 @@ export class KritzelContextMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'dfbafed8ab0ab62e8124763431e00283ddfc9aaa' }, h("div", { key: 'd0d7cf6241d24bd85ca2f4d2aa3e23aeb4283d82', class: "menu-container" }, this.items.map(item => (h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+        return (h(Host, { key: 'db318a0936f89f202ef5101447b723c0ba7aa139' }, h("div", { key: '53da01021464f605e08c5f910997bb8f21d481a1', class: "menu-container" }, this.items.map(item => (h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, 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"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,kBAAkB;IAarB,eAAe,CAAC,IAAqB;QAE3C,MAAM,UAAU,GAAG,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEzF,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAChD,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC/G,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAC9C,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAE9E,IAAI,CAAC,IAAI,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;gBACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACV,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\n\n@Component({\n tag: 'kritzel-context-menu',\n styleUrl: 'kritzel-context-menu.css',\n shadow: true,\n})\nexport class KritzelContextMenu {\n @Prop()\n items: ContextMenuItem[];\n\n @Event()\n actionSelected: EventEmitter<ContextMenuItem>;\n\n @Event()\n close: EventEmitter<void>;\n\n @Element()\n hostElement: HTMLElement;\n\n private handleItemClick(item: ContextMenuItem) {\n \n const isDisabled = typeof item.disabled === 'function' ? item.disabled() : item.disabled;\n\n if (!isDisabled) {\n this.actionSelected.emit(item);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"menu-container\">\n {this.items.map(item => (\n <button\n key={`${item.label}-${this.items.indexOf(item)}`}\n class={{ 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }}\n onClick={() => this.handleItemClick(item)}\n onTouchStart={() => this.handleItemClick(item)}\n disabled={typeof item.disabled === 'function' ? item.disabled() : item.disabled}\n >\n {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\n <span class=\"label\">{item.label}</span>\n </button>\n ))}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,kBAAkB;IAarB,eAAe,CAAC,IAAqB;QAE3C,MAAM,UAAU,GAAG,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEzF,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAChD,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC/G,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAC9C,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAE9E,IAAI,CAAC,IAAI,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;gBACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACV,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\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 @Event()\r\n actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n @Event()\r\n close: EventEmitter<void>;\r\n\r\n @Element()\r\n hostElement: HTMLElement;\r\n\r\n private handleItemClick(item: ContextMenuItem) {\r\n \r\n const isDisabled = typeof item.disabled === 'function' ? item.disabled() : item.disabled;\r\n\r\n if (!isDisabled) {\r\n this.actionSelected.emit(item);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"menu-container\">\r\n {this.items.map(item => (\r\n <button\r\n key={`${item.label}-${this.items.indexOf(item)}`}\r\n class={{ 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }}\r\n onClick={() => this.handleItemClick(item)}\r\n onTouchStart={() => this.handleItemClick(item)}\r\n disabled={typeof item.disabled === 'function' ? item.disabled() : item.disabled}\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 </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 CHANGED Viewed

@@ -1,19 +1,19 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.expand-toggle {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  padding: 8px;
-  color: var(--kritzel-color-palette-expand-toggle-color, #666666);
-}
-.expand-toggle:hover {
-  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);
+: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 CHANGED Viewed

@@ -28,14 +28,14 @@ export class KritzelControlBrushConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
+        return (h(Host, { key: '29f0492264283879fd86195fc0db8e5a8f352a0f' }, h("div", { key: 'c5bde66ab565eb717bf302f3f97d08ed0b261289', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: 'e78ec70c5d0eb24933543e12389f1a3db4c3b8f2', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '9fbde247a8ed3cf43ef0bd0b269f8562dfac56a0', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '3cf37dd520fabd632cfd7d764254467d563670e1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'daa59edce48e683a52a39ae4062fe811908dc685', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: 'b71bfb1176c35c24c15827ebc89dcac56bb42f0e', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-brush-config"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-control-brush-config.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\n\n@Component({\n tag: 'kritzel-control-brush-config',\n styleUrl: 'kritzel-control-brush-config.css',\n shadow: true,\n})\nexport class KritzelControlBrushConfig {\n @Prop({ mutable: true })\n tool: KritzelBrushTool;\n\n @Prop({ mutable: true })\n isExpanded: boolean = false;\n\n @Event()\n toolChange: EventEmitter<KritzelBrushTool>;\n\n @State()\n palette: string[] = [];\n\n @Watch('tool')\n handleToolChange(newTool: KritzelBrushTool) {\n this.palette = newTool.palettes[newTool.type];\n }\n\n componentWillLoad() {\n this.palette = this.tool.palettes[this.tool.type];\n }\n\n handleToggleExpand() {\n this.isExpanded = !this.isExpanded;\n }\n\n handleTypeChange(event: CustomEvent<'pen' \| 'highlighter'>) {\n this.palette = this.tool.palettes[event.detail];\n this.tool.type = event.detail;\n this.tool.color = this.palette[0];\n this.toolChange.emit(this.tool);\n }\n\n handleColorChange(event: CustomEvent<string>) {\n this.tool.color = event.detail;\n this.toolChange.emit(this.tool);\n }\n\n handleSizeChange(event: CustomEvent<number>) {\n this.tool.size = event.detail;\n this.toolChange.emit(this.tool);\n }\n\n render() {\n return (\n <Host>\n <div\n style={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'flex-start',\n width: '100%',\n gap: '8px',\n }}\n >\n <kritzel-brush-style type={this.tool.type} onTypeChange={event => this.handleTypeChange(event)}></kritzel-brush-style>\n\n <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'} style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}>\n <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\n </button>\n </div>\n\n <kritzel-color-palette\n colors={this.palette}\n selectedColor={this.tool.color}\n isExpanded={this.isExpanded}\n isOpaque={true}\n onColorChange={color => this.handleColorChange(color)}\n ></kritzel-color-palette>\n\n <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kritzel-control-brush-config.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n tag: 'kritzel-control-brush-config',\r\n styleUrl: 'kritzel-control-brush-config.css',\r\n shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n @Prop({ mutable: true })\r\n tool: KritzelBrushTool;\r\n\r\n @Prop({ mutable: true })\r\n isExpanded: boolean = false;\r\n\r\n @Event()\r\n toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n @State()\r\n palette: string[] = [];\r\n\r\n @Watch('tool')\r\n handleToolChange(newTool: KritzelBrushTool) {\r\n this.palette = newTool.palettes[newTool.type];\r\n }\r\n\r\n componentWillLoad() {\r\n this.palette = this.tool.palettes[this.tool.type];\r\n }\r\n\r\n handleToggleExpand() {\r\n this.isExpanded = !this.isExpanded;\r\n }\r\n\r\n handleTypeChange(event: CustomEvent<'pen' \| 'highlighter'>) {\r\n this.palette = this.tool.palettes[event.detail];\r\n this.tool.type = event.detail;\r\n this.tool.color = this.palette[0];\r\n this.toolChange.emit(this.tool);\r\n }\r\n\r\n handleColorChange(event: CustomEvent<string>) {\r\n this.tool.color = event.detail;\r\n this.toolChange.emit(this.tool);\r\n }\r\n\r\n handleSizeChange(event: CustomEvent<number>) {\r\n this.tool.size = event.detail;\r\n this.toolChange.emit(this.tool);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n style={{\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n width: '100%',\r\n gap: '8px',\r\n }}\r\n >\r\n <kritzel-brush-style type={this.tool.type} onTypeChange={event => this.handleTypeChange(event)}></kritzel-brush-style>\r\n\r\n <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'} style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}>\r\n <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n </button>\r\n </div>\r\n\r\n <kritzel-color-palette\r\n colors={this.palette}\r\n selectedColor={this.tool.color}\r\n isExpanded={this.isExpanded}\r\n isOpaque={true}\r\n onColorChange={color => this.handleColorChange(color)}\r\n ></kritzel-color-palette>\r\n\r\n <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}