kritzel-stencil 0.0.126 → 0.0.128

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

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-color-palette.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,mBAAmB;IALhC;QAOE,WAAM,GAAa,EAAE,CAAC;QAGtB,kBAAa,GAAkB,IAAI,CAAC;QAGpC,eAAU,GAAY,KAAK,CAAC;QAG5B,aAAQ,GAAY,KAAK,CAAC;KAgD3B;IA3CS,gBAAgB,CAAC,KAAa;QACpC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEO,eAAe;QACrB,MAAM,YAAY,GAAG,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,MAAM,GAAG,GAAG,CAAC,CAAC;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;QAC9D,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAChF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QAEzE,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;iBAC5B,EACD,KAAK,EAAE;oBACL,MAAM,EAAE,cAAc;iBACvB,IAEA,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,WACE,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;iBACzC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;gBAE3C,qBAAe,KAAK,EAAE,KAAK,GAAkB,CACzC,CACP,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color-palette',\r\n  styleUrl: 'kritzel-color-palette.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n  @Prop()\r\n  colors: string[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  selectedColor: string | null = null;\r\n\r\n  @Prop()\r\n  isExpanded: boolean = false;\r\n\r\n  @Prop()\r\n  isOpaque: boolean = false;\r\n\r\n  @Event()\r\n  colorChange: EventEmitter<string>;\r\n\r\n  private handleColorClick(color: string) {\r\n    this.selectedColor = color;\r\n    this.colorChange.emit(color);\r\n  }\r\n\r\n  private calculateHeight(): string {\r\n    const colorsPerRow = 6;\r\n    const rowHeight = 32;\r\n    const gap = 8;\r\n    const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n    return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n  }\r\n\r\n  render() {\r\n    const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n    const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={{\r\n            'color-grid': true,\r\n            'expanded': this.isExpanded,\r\n          }}\r\n          style={{\r\n            height: expandedHeight\r\n          }}\r\n        >\r\n          {displayedColors.map(color => (\r\n            <div\r\n              class={{\r\n                'color-container': true,\r\n                'selected': this.selectedColor === color,\r\n              }}\r\n              onClick={() => this.handleColorClick(color)}\r\n            >\r\n              <kritzel-color value={color}></kritzel-color>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,53 @@
+:host {
+  display: inline-flex; /* Ensures the host shrinks/grows with the wrapper */
+  vertical-align: middle; /* Aligns with other inline-block or inline-flex elements */
+  width: 100%; /* Ensures the host takes full width of the parent */
+}
+
+.dropdown-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid #333333;
+  border-radius: var(--kritzel-controls-control-border-radius, 12px);
+  overflow: hidden;
+  height: 32px;
+  width: 100%;
+}
+
+.custom-select {
+  padding: 0 8px;
+  padding-right: 30px; 
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0; 
+  border: none; 
+  background-color: #fff;
+  cursor: pointer;
+  outline: none;
+  font-size: inherit;
+  color: var(--kritzel-controls-text-color, #333333); /* Use CSS var with fallback */
+  -webkit-tap-highlight-color: transparent;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-position: right 8px center; 
+}
+
+.custom-select.has-suffix-border {
+  border-right: 1px solid #333333; 
+}
+
+.custom-select.has-prefix-border {
+  border-left: 1px solid #333333; 
+}
+
+::slotted(*) {
+  height: 100%; 
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,215 @@
+import { Host, h } from "@stencil/core";
+export class KritzelDropdown {
+    constructor() {
+        this.options = [];
+        this.selectStyles = {};
+        this.hasSuffixContent = false;
+        this.hasPrefixContent = false;
+        this.handleSelectChange = (event) => {
+            const newValue = event.target.value;
+            if (this.internalValue !== newValue) {
+                this.internalValue = newValue;
+                this.valueChanged.emit(this.internalValue);
+            }
+        };
+        this.evaluateSuffixContent = () => {
+            if (this.suffixSlotElement) {
+                const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
+                if (this.hasSuffixContent !== newHasContent) {
+                    this.hasSuffixContent = newHasContent;
+                }
+            }
+            else {
+                if (this.hasSuffixContent !== false) {
+                    this.hasSuffixContent = false;
+                }
+            }
+        };
+        this.evaluatePrefixContent = () => {
+            if (this.prefixSlotElement) {
+                const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
+                if (this.hasPrefixContent !== newHasContent) {
+                    this.hasPrefixContent = newHasContent;
+                }
+            }
+            else {
+                if (this.hasPrefixContent !== false) {
+                    this.hasPrefixContent = false;
+                }
+            }
+        };
+    }
+    componentWillLoad() {
+        this.updateInternalValue(this.value, false);
+        this.evaluateSuffixContent();
+        this.evaluatePrefixContent();
+    }
+    externalValueChanged(newValue) {
+        if (newValue !== this.internalValue) {
+            this.updateInternalValue(newValue, false);
+        }
+    }
+    optionsChanged() {
+        this.updateInternalValue(this.internalValue, true);
+    }
+    updateInternalValue(proposedValue, emitChange) {
+        let finalValue = proposedValue;
+        if (this.options && this.options.length > 0) {
+            const isValidValue = this.options.some(opt => opt.value === finalValue);
+            if (!finalValue || !isValidValue) {
+                finalValue = this.options[0].value;
+            }
+        }
+        else {
+            finalValue = undefined;
+        }
+        if (this.internalValue !== finalValue) {
+            this.internalValue = finalValue;
+            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
+                this.valueChanged.emit(this.internalValue);
+            }
+        }
+    }
+    render() {
+        const selectClasses = {
+            'custom-select': true,
+            'has-suffix-border': this.hasSuffixContent,
+            'has-prefix-border': this.hasPrefixContent,
+        };
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "attribute": "options",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[]",
+                    "resolved": "DropdownOption[]",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx",
+                            "id": "src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "selectStyles": {
+                "type": "any",
+                "attribute": "select-styles",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "hasSuffixContent": {},
+            "hasPrefixContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "externalValueChanged"
+            }, {
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-dropdown.js.map

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

@@ -0,0 +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

@@ -0,0 +1,10 @@
+: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

@@ -0,0 +1,92 @@
+import { Host, h } from "@stencil/core";
+export class KritzelFont {
+    constructor() {
+        this.fontFamily = 'Arial, sans-serif';
+        this.size = 24;
+        this.color = '#000000';
+    }
+    render() {
+        return (h(Host, { key: 'd318355704f1bf66468dd793e5e38da827076d3b' }, h("div", { key: '447b4fba97f5d1900060859943438733667aed08', class: "font-preview", style: {
+                fontFamily: this.fontFamily,
+                fontSize: `${this.size}px`,
+                color: this.color
+            } }, "A")));
+    }
+    static get is() { return "kritzel-font"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-font.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-font.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fontFamily": {
+                "type": "string",
+                "attribute": "font-family",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Arial, sans-serif'"
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#000000'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=kritzel-font.js.map

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

@@ -0,0 +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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,115 @@
+import { Host, h } from "@stencil/core";
+export class KritzelFontFamily {
+    constructor() {
+        this.fontOptions = [
+            { value: 'arial', label: 'Arial' },
+            { value: 'verdana', label: 'Verdana' },
+            { value: 'helvetica', label: 'Helvetica' },
+            { value: 'tahoma', label: 'Tahoma' },
+            { value: 'trebuchet ms', label: 'Trebuchet MS' },
+            { value: 'times new roman', label: 'Times New Roman' },
+            { value: 'georgia', label: 'Georgia' },
+            { value: 'garamond', label: 'Garamond' },
+            { value: 'courier new', label: 'Courier New' },
+            { value: 'brush script mt', label: 'Brush Script MT' },
+        ];
+        this.handleDropdownValueChange = (event) => {
+            this.fontFamilyChange.emit(event.detail);
+        };
+    }
+    componentWillLoad() {
+        if (this.fontOptions && this.fontOptions.length > 0) {
+            const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
+            if (!this.selectedFontFamily || !isValidCurrentFont) {
+                this.selectedFontFamily = this.fontOptions[0].value;
+            }
+        }
+    }
+    render() {
+        const dropdownOptions = this.fontOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+            style: { fontFamily: option.value },
+        }));
+        return (h(Host, { key: '801b1dbc2b7da7d00fb00ed6a8d8ee7be3e9ef17' }, h("kritzel-dropdown", { key: '5f774c0b31ca16a1c8acda1c73ea3aacc2784649', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: '3c101155ff08854f665750f8988fb3691a77c04a', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '48d2ead137a8a35f06fb8b5487431e2ce613c755', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+    }
+    static get is() { return "kritzel-font-family"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-font-family.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-font-family.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fontOptions": {
+                "type": "unknown",
+                "attribute": "font-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "FontOption[]",
+                    "resolved": "FontOption[]",
+                    "references": {
+                        "FontOption": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-font-family/kritzel-font-family.tsx",
+                            "id": "src/components/shared/kritzel-font-family/kritzel-font-family.tsx::FontOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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",
+                "attribute": "selected-font-family",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fontFamilyChange",
+                "name": "fontFamilyChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-font-family.js.map

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

@@ -0,0 +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

@@ -0,0 +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, #ebebeb);
+}
+
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
+}
+