kritzel-stencil 0.0.130 → 0.0.132

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

@@ -1,60 +1,79 @@
 import { h, Host } from "@stencil/core";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 export class KritzelSplitButton {
-    constructor() {
-        this.buttonIcon = 'plus';
-        this.dropdownIcon = 'chevron-down';
-        this.items = [];
-        this.mainButtonDisabled = false;
-        this.menuButtonDisabled = false;
-        this.isMenuOpen = false;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.handleButtonClick = (event) => {
-            event.stopPropagation();
-            this.buttonClick.emit();
-        };
-        this.toggleMenu = (event) => {
-            event.stopPropagation();
-            if (this.isMenuOpen) {
-                this.closeMenu();
-            }
-            else {
-                this.openMenu(event);
-            }
-        };
-        this.openMenu = (event) => {
-            event.stopPropagation();
-            this.isMenuOpen = true;
-            this.anchorElement = this.host;
-        };
-        this.closeMenu = () => {
-            this.isMenuOpen = false;
-            this.anchorElement = null;
-            this.close.emit();
-        };
-        this.handleItemSelect = event => {
-            this.itemSelect.emit(event.detail);
-        };
-        this.handleItemSave = event => {
-            this.itemSave.emit(event.detail);
-        };
-        this.handleItemCancel = event => {
-            this.itemCancel.emit(event.detail);
-        };
-        this.handleItemToggleChildMenu = event => {
-            this.itemToggleChildMenu.emit(event.detail);
-        };
-        this.handleItemCloseChildMenu = event => {
-            this.itemCloseChildMenu.emit(event.detail);
-        };
-    }
+    host;
+    buttonIcon = 'plus';
+    dropdownIcon = 'chevron-down';
+    items = [];
+    mainButtonDisabled = false;
+    menuButtonDisabled = false;
+    mainButtonClick;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    menuOpen;
+    menuClose;
+    isMenuOpen = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    anchorElement;
+    splitMenuButtonRef;
+    menuRef;
     async open() {
         if (this.isMenuOpen)
             return;
-        this.openMenu(new MouseEvent('click'));
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    }
+    async focusMenu() {
+        if (this.menuRef) {
+            await this.menuRef.setFocus();
+        }
     }
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        this.mainButtonClick.emit();
+    };
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.isMenuOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu(event);
+        }
+    };
+    openMenu = (event) => {
+        event.stopPropagation();
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    };
+    closeMenu = () => {
+        this.isMenuOpen = false;
+        this.anchorElement = null;
+        this.splitMenuButtonRef?.blur();
+        this.menuClose.emit();
+    };
+    handleItemSelect = event => {
+        this.itemSelect.emit(event.detail);
+    };
+    handleItemSave = event => {
+        this.itemSave.emit(event.detail);
+    };
+    handleItemCancel = event => {
+        this.itemCancel.emit(event.detail);
+    };
+    handleItemToggleChildMenu = event => {
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleItemCloseChildMenu = event => {
+        this.itemCloseChildMenu.emit(event.detail);
+    };
     render() {
-        return (h(Host, { key: 'be79d702d2c400d1feedeb89eca6fc78559f30f3', class: { mobile: this.isTouchDevice } }, h("button", { key: 'e4a74c56c122ea617f44f1d7e31672d1f913de46', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '44bd79270e7cc4a17b45133b5c513642013e5a66', name: this.buttonIcon })), h("div", { key: '2392e8c6f75510c529585a69c861b2fcafdef5ce', class: "split-divider" }), h("button", { key: 'bcdf61c2a195271771479de385db3b4982f6cad2', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '90383a8690111c97054fb8ac93b91cb6644de137', name: this.dropdownIcon })), h("kritzel-portal", { key: 'c6a4c32ab731fede13e1382bff9dbd68794b1103', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '8b792c9a2d4af60ba464bb80551c5358e21bfa96', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu }))));
+        return (h(Host, { key: '2521559224e78ed1984446320a1601e77ccf2843', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a924ad4590506cb5209ef9fa1babca5312ec0513', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '214565d158d4d3c06ad883559aa7bac2827a593f', name: this.buttonIcon })), h("div", { key: '2f7d189c46c08227c3006d226a0ee3065f241bf4', class: "split-divider" }), h("button", { key: '4d6e2e224e3719fe3685ee289af94680c120abf6', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'bc8176681dfedde9d13b9af561d8bdff8613098f', name: this.dropdownIcon })), h("kritzel-portal", { key: 'afb44cd208f52350cbc82e050d6dee0ba734391d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b28f04138daa8777e6c9b2aa7fa3b5f2f62fd914', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu }))));
     }
     static get is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }
@@ -186,8 +205,8 @@ export class KritzelSplitButton {
     }
     static get events() {
         return [{
-                "method": "buttonClick",
-                "name": "buttonClick",
+                "method": "mainButtonClick",
+                "name": "mainButtonClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -306,8 +325,23 @@ export class KritzelSplitButton {
                     }
                 }
             }, {
-                "method": "close",
-                "name": "close",
+                "method": "menuOpen",
+                "name": "menuOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuClose",
+                "name": "menuClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -340,6 +374,23 @@ export class KritzelSplitButton {
                     "text": "",
                     "tags": []
                 }
+            },
+            "focusMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -1 +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 { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } 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  @Element() host!: HTMLElement;\r\n\r\n  @Prop() buttonIcon: string = 'plus';\r\n  @Prop() dropdownIcon: string = 'chevron-down';\r\n  @Prop() items: IKritzelMenuItem[] = [];\r\n  @Prop() mainButtonDisabled = false;\r\n  @Prop() menuButtonDisabled = false;\r\n\r\n  @Event() buttonClick: EventEmitter<void>;\r\n  @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n  @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n  @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() isMenuOpen = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() anchorElement: HTMLElement;\r\n\r\n  splitMenuButtonRef: HTMLButtonElement;\r\n  menuRef: HTMLKritzelMenuElement;\r\n\r\n  @Method()\r\n  async open() {\r\n    if (this.isMenuOpen) return;\r\n    this.openMenu(new MouseEvent('click'));\r\n  }\r\n\r\n  private handleButtonClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.buttonClick.emit();\r\n  };\r\n\r\n  private toggleMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu(event);\r\n    }\r\n  };\r\n\r\n  private openMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n  };\r\n\r\n  private closeMenu = () => {\r\n    this.isMenuOpen = false;\r\n    this.anchorElement = null;\r\n    this.close.emit();\r\n  };\r\n\r\n  private handleItemSelect = event => {\r\n    this.itemSelect.emit(event.detail);\r\n  };\r\n\r\n  private handleItemSave = event => {\r\n    this.itemSave.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCancel = event => {\r\n    this.itemCancel.emit(event.detail);\r\n  };\r\n\r\n  private handleItemToggleChildMenu = event => {\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCloseChildMenu = event => {\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n          <kritzel-menu\r\n            ref={el => (this.menuRef = el)}\r\n            items={this.items}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleItemSave}\r\n            onItemCancel={this.handleItemCancel}\r\n            onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n            onClose={this.closeMenu}\r\n          ></kritzel-menu>\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"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 { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } 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  @Element() host!: HTMLElement;\r\n\r\n  @Prop() buttonIcon: string = 'plus';\r\n  @Prop() dropdownIcon: string = 'chevron-down';\r\n  @Prop() items: IKritzelMenuItem[] = [];\r\n  @Prop() mainButtonDisabled = false;\r\n  @Prop() menuButtonDisabled = false;\r\n\r\n  @Event() mainButtonClick: EventEmitter<void>;\r\n  @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n  @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n  @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n  @Event() menuOpen: EventEmitter<void>;\r\n  @Event() menuClose: EventEmitter<void>;\r\n\r\n  @State() isMenuOpen = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() anchorElement: HTMLElement;\r\n\r\n  splitMenuButtonRef: HTMLButtonElement;\r\n  menuRef: HTMLKritzelMenuElement;\r\n\r\n  @Method()\r\n  async open() {\r\n    if (this.isMenuOpen) return;\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n  }\r\n\r\n  @Method()\r\n  async focusMenu() {\r\n    if (this.menuRef) {\r\n      await this.menuRef.setFocus();\r\n    }\r\n  }\r\n\r\n  private handleButtonClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.mainButtonClick.emit();\r\n  };\r\n\r\n  private toggleMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu(event);\r\n    }\r\n  };\r\n\r\n  private openMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n  };\r\n\r\n  private closeMenu = () => {\r\n    this.isMenuOpen = false;\r\n    this.anchorElement = null;\r\n    this.splitMenuButtonRef?.blur();\r\n    this.menuClose.emit();\r\n  };\r\n\r\n  private handleItemSelect = event => {\r\n    this.itemSelect.emit(event.detail);\r\n  };\r\n\r\n  private handleItemSave = event => {\r\n    this.itemSave.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCancel = event => {\r\n    this.itemCancel.emit(event.detail);\r\n  };\r\n\r\n  private handleItemToggleChildMenu = event => {\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCloseChildMenu = event => {\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n          <kritzel-menu\r\n            ref={el => (this.menuRef = el)}\r\n            items={this.items}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleItemSave}\r\n            onItemCancel={this.handleItemCancel}\r\n            onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n            onClose={this.closeMenu}\r\n          ></kritzel-menu>\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

@@ -18,6 +18,10 @@
   box-sizing: border-box;
 }
 
+.size-container:focus-visible {
+  outline: var(--kritzel-stroke-size-focus-outline, 2px auto #e3e3e3);
+}
+
 .size-container:hover {
   background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);
 }

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

@@ -1,15 +1,14 @@
 import { Host, h } from "@stencil/core";
 export class KritzelStrokeSize {
-    constructor() {
-        this.sizes = [4, 6, 8, 12, 16, 24];
-        this.selectedSize = null;
-    }
+    sizes = [4, 6, 8, 12, 16, 24];
+    selectedSize = null;
+    sizeChange;
     handleSizeClick(size) {
         this.selectedSize = size;
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'f9f0fe49963655a2beeffe5c369ccbe018c8aa5e' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '001a0ef8408d19532b57a521929c0cba54e99c52' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));

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

@@ -1 +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"]}
+{"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;IACpB,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvB,YAAY,GAAkB,IAAI,CAAC;IAEnD,UAAU,CAAuB;IAElC,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,QAAQ,EAAE,CAAC,EACX,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() sizes: number[] = [4, 6, 8, 12, 16, 24];\r\n  @Prop({ mutable: true }) selectedSize: number | null = null;\r\n\r\n  @Event() 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            tabIndex={0}\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.js

@@ -1,18 +1,37 @@
 import { Host, h } from "@stencil/core";
+import { KritzelHTMLHelper } from "../../../helpers/html.helper";
 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;
+    host;
+    isVisible = false;
+    anchorElement;
+    arrowSize = 8;
+    offsetY = 24;
+    tooltipClosed;
+    positionX = 0;
+    arrowOffset = '0px';
+    isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+    handleOutsideClick(event) {
+        if (!this.isVisible)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.tooltipClosed.emit();
+        }
     }
     handleWindowResize() {
         this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
     }
+    async focusContent() {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    componentDidLoad() {
+        this.focusSlottedContent();
+    }
     componentWillLoad() {
         this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
@@ -20,11 +39,18 @@ export class KritzelTooltip {
     componentWillUpdate() {
         this.calculateAdjustedPosition();
     }
+    focusSlottedContent() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const assignedElements = slot?.assignedElements() || [];
+        if (assignedElements.length > 0) {
+            const firstElement = assignedElements[0];
+            firstElement.focus();
+        }
+    }
     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');
+            const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
             if (!this.isMobileView) {
                 this.positionX = anchorRect.left + anchorRect.width / 2;
                 this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
@@ -37,23 +63,23 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '6eb67bcfd08234affe3724dff4d94ddf7907a1a7', style: {
+        return (h(Host, { key: '8c3aeff60625f43f129afa70367cdb7a68a4b271', 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: '9314b30b71200776e3728027b2ac7332cf4ab669', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '80cb8d0a8a91d9c816580cedc02fc9382fb07f8c' }), h("div", { key: '87fb2399463a0eb7beb1ca0f2c2867d8ff033f3a', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'b22b606c2a836c2c9bbe21c6b470754753ccb309', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '783403f4b5560012c9f6bd184a8c5eb26428e148' }), h("div", { key: 'bb98400edc5c6e05fd4ed2a476a5821f93964b8e', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: 'fc3953ad9b6aa5a4b2228653573fc3a7e37c0487', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '850a058d635113a7870f25fa288a6447394c53ed', 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: '5b8e4e3eb90c4c47c47fa47dc96e4149794e1732', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: 'bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -167,9 +193,54 @@ export class KritzelTooltip {
             "isMobileView": {}
         };
     }
-    static get elementRef() { return "el"; }
+    static get events() {
+        return [{
+                "method": "tooltipClosed",
+                "name": "tooltipClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusContent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "resize",
                 "method": "handleWindowResize",
                 "target": "window",

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';\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"]}
+{"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAO9B,MAAM,OAAO,cAAc;IACd,IAAI,CAAc;IAErB,SAAS,GAAY,KAAK,CAAC;IAC3B,aAAa,CAAc;IAC3B,SAAS,GAAW,CAAC,CAAC;IACtB,OAAO,GAAW,EAAE,CAAC;IAEpB,aAAa,CAAqB;IAElC,SAAS,GAAW,CAAC,CAAC;IACtB,WAAW,GAAW,KAAK,CAAC;IAC5B,YAAY,GAAY,MAAM,CAAC,UAAU,GAAG,iBAAiB,CAAC;IAGvE,kBAAkB,CAAC,KAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAG,OAAO;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB,CAAC;QAC1D,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5E,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjC,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB,CAAC;QAC1D,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,MAAM,gBAAgB,GAAG,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;QACxD,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChC,MAAM,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;YACxD,YAAY,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,yBAAyB;QAC/B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACzC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;YAC9D,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAgB,CAAC;YAE9F,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;gBACxD,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,OAAO,IAAI,CAAC,SAAS,KAAK,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,MAAM,WAAW,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;gBAC3D,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC;gBAChF,IAAI,CAAC,WAAW,GAAG,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;YACvG,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,sDAAsD;gBAClE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;gBACjD,IAAI,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,KAAK;gBACxD,YAAY,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,IAAI;aACnD;YAED,4DAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;gBACpE,8DAAa;gBACb,4DACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;wBACL,QAAQ,EAAE,OAAO;wBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;wBACtB,MAAM,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;qBACnC;oBAED,4DACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;4BACP,UAAU,EAAE,GAAG,IAAI,CAAC,SAAS,sBAAsB;4BACnD,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,sBAAsB;4BACpD,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,oEAAoE;4BAChG,MAAM,EAAE,2CAA2C;yBAClD,GACI;oBACP,4DACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE;4BACP,QAAQ,EAAE,UAAU;4BACpB,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;4BAChC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI;4BAC7B,eAAe,EAAE,2DAA2D;4BAC5E,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;yBAChC,GACI,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\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  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() arrowSize: number = 8;\r\n  @Prop() offsetY: number = 24;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() arrowOffset: string = '0px';\r\n  @State() isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\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  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\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 focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\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.host.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

@@ -1,12 +1,22 @@
 import { Host, h } from "@stencil/core";
 export class KritzelContextMenu {
-    constructor() {
-        this.processedItems = [];
-    }
-    componentWillLoad() {
+    host;
+    items;
+    onItemsChanged() {
         this.updateMenuItems();
     }
-    onItemsChanged() {
+    objects;
+    actionSelected;
+    close;
+    processedItems = [];
+    handleOutsideClick(event) {
+        event.preventDefault();
+        const path = event.composedPath();
+        if (!path.includes(this.host)) {
+            this.close.emit();
+        }
+    }
+    componentWillLoad() {
         this.updateMenuItems();
     }
     handleItemClick(item, isDisabled) {
@@ -14,15 +24,6 @@ export class KritzelContextMenu {
             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) {
@@ -34,8 +35,17 @@ export class KritzelContextMenu {
         }
         this.processedItems = processed;
     }
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
     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)))))));
+        return (h(Host, { key: 'ff72bd31f6c0f3193674710bccab829f14e011d3' }, h("div", { key: '80cd7a99dc9bb1fb9ec4edb09a9bacde70dde7c3', 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), 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"; }
@@ -128,14 +138,38 @@ export class KritzelContextMenu {
                         }
                     }
                 }
+            }, {
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
-    static get elementRef() { return "hostElement"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "items",
                 "methodName": "onItemsChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handleOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=kritzel-context-menu.js.map

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,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"]}
+{"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch, Listen, Element } 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  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: ContextMenuItem[];\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Prop() objects: KritzelBaseObject[];\r\n\r\n  @Event() actionSelected: EventEmitter<ContextMenuItem>;\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @State() private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.preventDefault();\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.host)) {\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\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 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  private async evaluateProperty(value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>), defaultValue: boolean): 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  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              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

@@ -14,6 +14,10 @@
   color: var(--kritzel-color-palette-expand-toggle-color, #666666);
 }
 
+.expand-toggle:focus-visible {
+  outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);
+}
+
 .expand-toggle:hover {
   color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);
 }