kritzel-stencil 0.0.105 → 0.0.107

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

@@ -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"]}
+{"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

@@ -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

@@ -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: 'd0378237899c5641ae4354f3bffb14e3f8bafb59' }, h("div", { key: '1475a6ae39ffc97eb780b30c85015c22cecafa6e', 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

@@ -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"]}
+{"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

@@ -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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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: '1c09a403f1e8278d30b2675c3a6e17e12ec79afa' }, 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

@@ -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"]}
+{"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

@@ -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-tooltip/kritzel-tooltip.css

@@ -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

@@ -37,23 +37,23 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '30db4852719464fcb9c6964c34992e87a364caa3', style: {
+        return (h(Host, { key: '3161826337f6957d2e568f52cfe3f57d705af0ed', 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: '12fc4bc05b7be756102ce3779c9be1d51f3fe13b', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '90f645f8f7cec371aaeda7207a9fb420b02b2ae4' }), h("div", { key: '73380e2c6df22bc4a97479a52315e7b34d069fa1', 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: '2e13cb01a3282e161d3212f4970a93b20ca1a0fe', 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: '30ddbd00b928c0c734656d6309eaefbae5baf264', 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

@@ -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"]}
+{"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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', 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: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-brush-config"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/helpers/keyboard.helper.js

@@ -4,5 +4,28 @@ export class KritzelKeyboardHelper {
             document.activeElement.blur();
         }
     }
+    static enableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            if (!currentContent.includes('interactive-widget=resizes-content')) {
+                currentContent += ', interactive-widget=resizes-content';
+            }
+            meta.setAttribute('content', currentContent);
+        }
+    }
+    static disableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
+            newContent = newContent
+                .replace(/,(\s*,)+/g, ',')
+                .replace(/^,/, '')
+                .replace(/,$/, '')
+                .trim();
+            meta.setAttribute('content', newContent);
+        }
+    }
 }
 //# sourceMappingURL=keyboard.helper.js.map

package/dist/collection/helpers/keyboard.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.helper.js","sourceRoot":"","sources":["../../src/helpers/keyboard.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;IAChC,MAAM,CAAC,iBAAiB;QACtB,IAAI,QAAQ,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;YAClD,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;CACF","sourcesContent":["export class KritzelKeyboardHelper {\r\n  static forceHideKeyboard(): void {\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement.blur();\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"keyboard.helper.js","sourceRoot":"","sources":["../../src/helpers/keyboard.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;IAChC,MAAM,CAAC,iBAAiB;QACtB,IAAI,QAAQ,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;YAClD,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,MAAM,CAAC,uBAAuB;QAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,sEAAsE,CAAC,CAAC;QAC5G,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAClD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,oCAAoC,CAAC,EAAE,CAAC;gBACnE,cAAc,IAAI,sCAAsC,CAAC;YAC3D,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,sEAAsE,CAAC,CAAC;QAC5G,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAClD,IAAI,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,gDAAgD,EAAE,EAAE,CAAC,CAAC;YAC9F,UAAU,GAAG,UAAU;iBACpB,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;iBACzB,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;iBACjB,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;iBACjB,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;CACF","sourcesContent":["export class KritzelKeyboardHelper {\r\n  static forceHideKeyboard(): void {\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement.blur();\r\n    }\r\n  }\r\n\r\n  static enableInteractiveWidget(): void {\r\n    const meta = document.querySelector('meta[name=\"viewport\"][content*=\"interactive-widget=resizes-content\"]');\r\n    if (meta) {\r\n      let currentContent = meta.getAttribute('content');\r\n      if (!currentContent.includes('interactive-widget=resizes-content')) {\r\n        currentContent += ', interactive-widget=resizes-content';\r\n      }\r\n      meta.setAttribute('content', currentContent);\r\n    }\r\n  }\r\n\r\n  static disableInteractiveWidget(): void {\r\n    const meta = document.querySelector('meta[name=\"viewport\"][content*=\"interactive-widget=resizes-content\"]');\r\n    if (meta) {\r\n      let currentContent = meta.getAttribute('content');\r\n      let newContent = currentContent.replace(/\\s*interactive-widget=resizes-content\\s*[,;]?/g, '');\r\n      newContent = newContent\r\n        .replace(/,(\\s*,)+/g, ',')\r\n        .replace(/^,/, '')\r\n        .replace(/,$/, '')\r\n        .trim();\r\n      meta.setAttribute('content', newContent);\r\n    }\r\n  }\r\n}\r\n"]}