kritzel-stencil 0.0.126 → 0.0.128

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

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-split-button.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-split-button',\r\n  styleUrl: 'kritzel-split-button.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n  @Prop()\r\n  buttonText: string;\r\n\r\n  @Prop()\r\n  buttonIcon: string;\r\n\r\n  @Prop()\r\n  dropdownIcon = 'chevron-down';\r\n\r\n  @Prop()\r\n  options: KritzelMenuItem[] = [];\r\n\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  @Prop()\r\n  activeItemIndex: number | null = null;\r\n\r\n  @Prop()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  isMenuOpen = false;\r\n\r\n  @Event()\r\n  buttonClick: EventEmitter<void>;\r\n\r\n  @Event()\r\n  optionSelect: EventEmitter<KritzelMenuItem>;\r\n\r\n  @Event()\r\n  menuOpened: EventEmitter<void>;\r\n\r\n  @Event()\r\n  menuClosed: EventEmitter<void>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  splitMenuButton: HTMLButtonElement;\r\n\r\n  @Method()\r\n  async openMenu() {\r\n    if (this.disabled || this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = true;\r\n    this.menuOpened.emit();\r\n    document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n  }\r\n\r\n  @Method()\r\n  async closeMenu() {\r\n    if (this.disabled || !this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = false;\r\n    this.menuClosed.emit();\r\n\r\n    this.host.focus();\r\n  }\r\n\r\n  private handleDocumentClick = (event: MouseEvent) => {\r\n    const path = (event.composedPath && event.composedPath()) || [];\r\n    const clickedInside = path.some(node => (node as HTMLElement)?.tagName === 'KRITZEL-SPLIT-BUTTON' || (node as HTMLElement)?.tagName === 'KRITZEL-MENU');\r\n\r\n    if (!clickedInside) {\r\n      this.closeMenu();\r\n    } else if (this.isMenuOpen) {\r\n      document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n    }\r\n  };\r\n\r\n  private toggleMenu = () => {\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu();\r\n    }\r\n  };\r\n\r\n  private handleButtonClick = () => {\r\n    if (!this.disabled) {\r\n      this.buttonClick.emit();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.disabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n          {this.buttonText && (\r\n            <span>\r\n              {this.buttonText} ({this.options.length})\r\n            </span>\r\n          )}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButton = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.disabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.host} offsetY={4}>\r\n          {this.isMenuOpen && (\r\n            <kritzel-menu\r\n              style={{ maxHeight: '300px', width: '180px' }}\r\n              items={this.options}\r\n              activeItemIndex={this.activeItemIndex}\r\n              editingIndex={this.editingIndex}\r\n              onClose={() => this.closeMenu()}\r\n            ></kritzel-menu>\r\n          )}\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css

@@ -0,0 +1,28 @@
+: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: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+}
+
+.size-container:hover {
+  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);
+}
+
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);
+}

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

@@ -0,0 +1,91 @@
+import { Host, h } from "@stencil/core";
+export class KritzelStrokeSize {
+    constructor() {
+        this.sizes = [4, 6, 8, 12, 16, 24];
+        this.selectedSize = null;
+    }
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    render() {
+        return (h(Host, { key: '0185d3243c35c49169324c98f87df6a286fc3d31' }, this.sizes.map(size => (h("div", { class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
+    }
+    static get is() { return "kritzel-stroke-size"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-stroke-size.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-stroke-size.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sizes": {
+                "type": "unknown",
+                "attribute": "sizes",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[4, 6, 8, 12, 16, 24]"
+            },
+            "selectedSize": {
+                "type": "number",
+                "attribute": "selected-size",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sizeChange",
+                "name": "sizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-stroke-size.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-stroke-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-stroke-size/kritzel-stroke-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,iBAAiB;IAL9B;QAOE,UAAK,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAGxC,iBAAY,GAAkB,IAAI,CAAC;KA2BpC;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,qBAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,GAAkB,CACvD,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-stroke-size',\r\n  styleUrl: 'kritzel-stroke-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelStrokeSize {\r\n  @Prop() \r\n  sizes: number[] = [4, 6, 8, 12, 16, 24];\r\n\r\n  @Prop({ mutable: true }) \r\n  selectedSize: number | null = null;\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-color value='#000000' size={size}></kritzel-color>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +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, 16px);
+  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

@@ -0,0 +1,181 @@
+import { Host, h } from "@stencil/core";
+const MOBILE_BREAKPOINT = 768;
+export class KritzelTooltip {
+    constructor() {
+        this.isVisible = false;
+        this.arrowSize = 8;
+        this.offsetY = 24;
+        this.positionX = 0;
+        this.arrowOffset = '0px';
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+    }
+    handleWindowResize() {
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+        this.calculateAdjustedPosition();
+    }
+    componentWillLoad() {
+        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+        this.calculateAdjustedPosition();
+    }
+    componentWillUpdate() {
+        this.calculateAdjustedPosition();
+    }
+    calculateAdjustedPosition() {
+        var _a;
+        if (this.isVisible && this.anchorElement) {
+            const anchorRect = this.anchorElement.getBoundingClientRect();
+            const tooltipContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip-content');
+            if (!this.isMobileView) {
+                this.positionX = anchorRect.left + anchorRect.width / 2;
+                this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
+            }
+            else {
+                const tooltipRect = tooltipContent.getBoundingClientRect();
+                this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;
+                this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '7610e8185e037813cc363daa3212a4164a20daaf', 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: 'bd5c1f0f7ff3afddfcf2469277189d026e79b453', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '547e5a8fcb8131225461881a1ad0125fa4b0d55b' }), h("div", { key: 'de1d30c31667a81a36873d32bec20fcc911ec89f', class: "tooltip-arrow-wrapper", style: {
+                position: 'fixed',
+                left: this.arrowOffset,
+                bottom: `-${this.arrowSize * 2}px`,
+            } }, h("div", { key: 'ebbf83bd4d35e252b0258a7c81ebcef48ac10004', 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: '918ca46c438657dc4f72ccc73f81d58076d637c5', class: "tooltip-arrow-rect", style: {
+                position: 'relative',
+                width: `${this.arrowSize * 2}px`,
+                height: `${this.arrowSize}px`,
+                backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',
+                bottom: `${this.arrowSize * 2}px`,
+            } })))));
+    }
+    static get is() { return "kritzel-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isVisible": {
+                "type": "boolean",
+                "attribute": "is-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "anchorElement": {
+                "type": "unknown",
+                "attribute": "anchor-element",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "arrowSize": {
+                "type": "number",
+                "attribute": "arrow-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "8"
+            },
+            "offsetY": {
+                "type": "number",
+                "attribute": "offset-y",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "positionX": {},
+            "arrowOffset": {},
+            "isMobileView": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-tooltip.js.map

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

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

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css

@@ -0,0 +1,55 @@
+:host {
+  display: block; 
+}
+
+.menu-container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--kritzel-context-menu-background-color, #ffffff);
+  border-radius: var(--kritzel-context-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
+  padding: var(--kritzel-context-menu-padding,4px);
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--kritzel-context-menu-item-gap, 8px);
+  background: none;
+  border: none;
+  text-align: left;
+  padding: var(--kritzel-context-menu-item-padding, 8px);
+  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);
+  cursor: pointer;
+  font-size: var(--kritzel-context-menu-item-font-size, 14px);
+  color: var(--kritzel-context-menu-item-color, #333333);
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.menu-item:not(.disabled):hover {
+  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.menu-item:not(.disabled):active {
+  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.menu-item.disabled {
+  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);
+  cursor: default;
+}
+
+.menu-item kritzel-icon {
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.menu-item.disabled kritzel-icon {
+  opacity: 0.4;
+}
+
+.label {
+  flex-grow: 1;
+}

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

@@ -0,0 +1,141 @@
+import { Host, h } from "@stencil/core";
+export class KritzelContextMenu {
+    constructor() {
+        this.processedItems = [];
+    }
+    componentWillLoad() {
+        this.updateMenuItems();
+    }
+    onItemsChanged() {
+        this.updateMenuItems();
+    }
+    handleItemClick(item, isDisabled) {
+        if (!isDisabled) {
+            this.actionSelected.emit(item);
+        }
+    }
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
+    async updateMenuItems() {
+        const processed = [];
+        for (const item of this.items) {
+            const isVisible = await this.evaluateProperty(item.visible, true);
+            if (isVisible) {
+                const isDisabled = await this.evaluateProperty(item.disabled, false);
+                processed.push({ item, isDisabled });
+            }
+        }
+        this.processedItems = processed;
+    }
+    render() {
+        return (h(Host, { key: '96569454f806a6d17380315b4d0200236fe22550' }, h("div", { key: '0e5899a2901e1e9ab9d657824e105121ce785bdc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, disabled: isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), onTouchStart: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-context-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-context-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[]",
+                    "resolved": "ContextMenuItem[]",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-item.interface",
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "objects": {
+                "type": "unknown",
+                "attribute": "objects",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelBaseObject[]",
+                    "resolved": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                    "references": {
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "processedItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionSelected",
+                "name": "actionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ContextMenuItem",
+                    "resolved": "ContextMenuItem",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-item.interface",
+                            "id": "src/interfaces/context-menu-item.interface.ts::ContextMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChanged"
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-context-menu.js.map

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

@@ -0,0 +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,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAcrG,MAAM,OAAO,kBAAkB;IAL/B;QAmBU,mBAAc,GAAwB,EAAE,CAAC;KAgElD;IA9DC,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe,CAAC,IAAqB,EAAE,UAAmB;QAChE,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAC5B,KAAoG,EACpG,YAAqB;QAErB,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;YAChC,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,MAAM,SAAS,GAAwB,EAAE,CAAC;QAE1C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YAClE,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;gBACrE,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACxD,cACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAC7B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,EACrD,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,EAC1D,QAAQ,EAAE,UAAU;gBAEnB,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, State, Watch } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\ninterface ProcessedMenuItem {\r\n  item: ContextMenuItem;\r\n  isDisabled: boolean;\r\n}\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  @Prop()\r\n  objects: KritzelBaseObject[];\r\n\r\n  @Event()\r\n  actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n  @Element()\r\n  hostElement: HTMLElement;\r\n\r\n  @State()\r\n  private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, isDisabled: boolean) {\r\n    if (!isDisabled) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async evaluateProperty(\r\n    value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>),\r\n    defaultValue: boolean,\r\n  ): Promise<boolean> {\r\n    if (typeof value === 'boolean') {\r\n      return value;\r\n    }\r\n    if (typeof value === 'function') {\r\n      return await Promise.resolve(value(null, this.objects));\r\n    }\r\n    return defaultValue;\r\n  }\r\n\r\n  private async updateMenuItems() {\r\n    const processed: ProcessedMenuItem[] = [];\r\n\r\n    for (const item of this.items) {\r\n      const isVisible = await this.evaluateProperty(item.visible, true);\r\n      if (isVisible) {\r\n        const isDisabled = await this.evaluateProperty(item.disabled, false);\r\n        processed.push({ item, isDisabled });\r\n      }\r\n    }\r\n\r\n    this.processedItems = processed;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.processedItems.map(({ item, isDisabled }, index) => (\r\n            <button\r\n              key={`${item.label}-${index}`} \r\n              class={{ 'menu-item': true, disabled: isDisabled }}\r\n              onClick={() => this.handleItemClick(item, isDisabled)}\r\n              onTouchStart={() => this.handleItemClick(item, isDisabled)}\r\n              disabled={isDisabled}\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

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