kritzel-stencil 0.0.134 → 0.0.136

package/dist/components/{p-Dw4n-4zp.js → p-BehchtaT.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
 import { d as defineCustomElement$3 } from './p-sq9jgfX0.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$2 } from './p-NP1Htol7.js';
+import { d as defineCustomElement$2 } from './p-BlPlPpUy.js';
 
 const kritzelMenuItemCss = ":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);outline:none;cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";
 
@@ -181,6 +181,10 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
     itemCloseChildMenu;
     close;
     selectedIndex = null;
+    async setScrollTop(scrollTop) {
+        this.host.scrollTop = scrollTop;
+        this.host.scrollTo({ top: scrollTop, behavior: 'auto' });
+    }
     async setFocus() {
         const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');
         if (firstItem) {
@@ -218,13 +222,14 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: 'd971df2bd948b07f7bf2abc589c226d57891d05e', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'dfa6846429aac15a5912b87acd45610663200a3e', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map((item) => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '211bd579000294d9edf6f85f2d7244aebe331191', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'b1c397118b1fbac934867677073661a69be1cab1', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
     static get style() { return kritzelMenuCss; }
 }, [257, "kritzel-menu", {
         "items": [16],
         "parent": [16],
         "selectedIndex": [32],
+        "setScrollTop": [64],
         "setFocus": [64]
     }]);
 function defineCustomElement() {
@@ -262,6 +267,6 @@ function defineCustomElement() {
 }
 
 export { KritzelMenu as K, KritzelMenuItem as a, defineCustomElement$1 as b, defineCustomElement as d };
-//# sourceMappingURL=p-Dw4n-4zp.js.map
+//# sourceMappingURL=p-BehchtaT.js.map
 
-//# sourceMappingURL=p-Dw4n-4zp.js.map
+//# sourceMappingURL=p-BehchtaT.js.map

package/dist/components/p-BehchtaT.js.map

@@ -0,0 +1 @@
+{"file":"p-BehchtaT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-menu-item/kritzel-menu-item.css?tag=kritzel-menu-item&encapsulation=shadow","src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx","src/components/shared/kritzel-menu/kritzel-menu.css?tag=kritzel-menu&encapsulation=shadow","src/components/shared/kritzel-menu/kritzel-menu.tsx"],"sourcesContent":[":host {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  padding: var(--kritzel-menu-item-padding, 8px);\r\n  box-sizing: border-box;\r\n  gap: 16px;\r\n  height: var(--kritzel-menu-item-height, 40px);\r\n  min-height: var(--kritzel-menu-item-min-height, 40px);\r\n  font-family: sans-serif;\r\n  font-size: var(--kritzel-menu-item-font-size, 14px);\r\n  color: var(--kritzel-menu-item-color, #333333);\r\n  border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n  outline: none;\r\n  cursor: default;\r\n}\r\n\r\n:host(:hover) .menu-item-overlay,\r\n:host(:focus-within) .menu-item-overlay {\r\n  background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.selected) {\r\n  background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n  color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button {\r\n  color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected.editing) {\r\n  background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n:host(.selected) .edit-input {\r\n  color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button kritzel-icon {\r\n  --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\nkritzel-icon {\r\n  --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);\r\n}\r\n\r\n:host(.selected) .edit-input::selection {\r\n  background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));\r\n}\r\n\r\n:host(.editing) {\r\n  background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.disabled) {\r\n  opacity: 0.5;\r\n  pointer-events: none !important;\r\n}\r\n\r\n:host(.child-open) {\r\n  background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.child-open.selected) {\r\n  background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n.menu-item-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-color: transparent;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n  border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n}\r\n\r\n.menu-item-content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  position: relative;\r\n  z-index: 1;\r\n  height: 100%;\r\n}\r\n\r\n.left {\r\n  justify-content: flex-start;\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n.left > div {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.right {\r\n  justify-content: flex-end;\r\n}\r\n\r\n.edit-input {\r\n  flex: 1;\r\n  height: var(--kritzel-menu-item-input-height, 24px);\r\n  padding: 0;\r\n  background-color: transparent;\r\n  border-radius: 0;\r\n  border: none;\r\n  border-bottom: 1px solid var(--kritzel-menu-item-input-border, #ccc);\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  width: 100%;\r\n  min-width: 0;\r\n  box-sizing: border-box;\r\n  outline: none;\r\n}\r\n\r\n.edit-input::selection {\r\n  background-color: var(--kritzel-menu-item-input-selection-color, #007bff);\r\n  color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);\r\n}\r\n\r\n.action-button {\r\n  padding: 4px;\r\n  border-radius: 8px;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: transparent;\r\n  background: transparent;\r\n  outline: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.action-button:hover,\r\n.action-button:focus {\r\n  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.action-button.disabled {\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-menu-item',\r\n  styleUrl: 'kritzel-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() item: IKritzelMenuItem;\r\n  @Watch('item')\r\n  onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n    if (newValue !== oldValue) {\r\n      this.isDirty = false;\r\n    }\r\n  }\r\n  @Prop() parent: IKritzelMenuItem = null;\r\n\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\r\n  @State()\r\n  isDirty: boolean = false;\r\n\r\n  private inputRef: HTMLInputElement;\r\n\r\n  private focusInput() {\r\n    if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n      this.inputRef.focus();\r\n\r\n      if (KritzelDevicesHelper.isIOS()) {\r\n        const length = this.inputRef.value.length;\r\n        this.inputRef.setSelectionRange(length, length);\r\n      } else {\r\n        this.inputRef.select();\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setDeviceSpecificStyles();\r\n    this.focusInput();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.focusInput();\r\n  }\r\n\r\n  private setDeviceSpecificStyles = () => {\r\n    const isTouchDevice = KritzelDevicesHelper.isTouchDevice();\r\n    if (isTouchDevice) {\r\n      this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');\r\n      this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');\r\n    }\r\n  };\r\n\r\n  private handleItemSelect = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n  };\r\n\r\n  private handleInputChange = (event: Event) => {\r\n    event.stopPropagation();\r\n    const target = event.target as HTMLInputElement;\r\n    this.item.label = target.value;\r\n    this.isDirty = true;\r\n  };\r\n\r\n  private handleSave = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.host.focus();\r\n    this.itemSave.emit(this.item);\r\n  };\r\n\r\n  private handleCancel = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.host.focus();\r\n    this.itemCancel.emit(this.item);\r\n  };\r\n\r\n  private handleMenuToggle = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n  };\r\n\r\n  private handleMenuClose = () => {\r\n    this.itemCloseChildMenu.emit(this.item);\r\n  };\r\n\r\n  private renderViewMode() {\r\n    return [\r\n      <div class=\"menu-item-content left\">\r\n        <div>{this.item.label}</div>\r\n      </div>,\r\n      <div class=\"menu-item-content right\">\r\n        {this.item.children &&\r\n          this.item.children.length > 0 && [\r\n            <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n              <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n            </button>,\r\n            <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n              <kritzel-menu\r\n                items={this.item.children}\r\n                parent={this.item}\r\n                onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n                onItemSave={event => this.itemSave.emit(event.detail)}\r\n                onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n                onClose={this.handleMenuClose}\r\n              ></kritzel-menu>\r\n            </kritzel-portal>,\r\n          ]}\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  private renderEditMode() {\r\n    return [\r\n      <div class=\"menu-item-content left\">\r\n        <input\r\n          ref={el => (this.inputRef = el)}\r\n          type=\"text\"\r\n          class=\"edit-input\"\r\n          value={this.item.label}\r\n          onInput={this.handleInputChange}\r\n        />\r\n      </div>,\r\n      <div class=\"menu-item-content right\">\r\n        <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n          <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n        </div>\r\n        <div\r\n          tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0}\r\n          class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }}\r\n          onClick={this.handleSave}\r\n        >\r\n          <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n        </div>\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        tabIndex={this.item.isDisabled ? -1 : 0}\r\n        class={{\r\n          'selected': this.item.isSelected,\r\n          'editing': this.item.isEditing,\r\n          'disabled': this.item.isDisabled,\r\n          'child-open': this.item.isChildMenuOpen,\r\n        }}\r\n        onClick={this.handleItemSelect}\r\n      >\r\n        <div class=\"menu-item-overlay\"></div>\r\n        {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--kritzel-menu-background-color, #ffffff);\r\n  width: var(--kritzel-menu-width, 200px);\r\n  padding: var(--kritzel-menu-padding, 8px);\r\n  border-radius: var(--kritzel-menu-border-radius, 12px);\r\n  box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-menu-border, 1px solid #ebebeb);\r\n  z-index: 2;\r\n  gap: var(--kritzel-menu-gap, 4px);\r\n  overflow-y: auto;\r\n  scrollbar-color: #ebebeb transparent;\r\n  scrollbar-width: thin;\r\n  max-height: 300px;\r\n}\r\n\r\n:host(:focus-visible) {\r\n  outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.has-open-child-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 3;\r\n}\r\n","import { Component, Host, Prop, h, State, Event, EventEmitter, Element, Method } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-menu',\r\n  styleUrl: 'kritzel-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelMenu {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() items: IKritzelMenuItem[];\r\n  @Prop() parent: IKritzelMenuItem = null;\r\n\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() selectedIndex: number | null = null;\r\n\r\n  @Method()\r\n  async setScrollTop(scrollTop: number) {\r\n    this.host.scrollTop = scrollTop;\r\n    this.host.scrollTo({ top: scrollTop, behavior: 'auto' });\r\n  }\r\n\r\n  @Method()\r\n  async setFocus() {\r\n    const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');\r\n    if (firstItem) {\r\n      firstItem.focus();\r\n    }\r\n  }\r\n\r\n  get openChildMenuItem() {\r\n    return this.items.find(item => item.isChildMenuOpen);\r\n  }\r\n\r\n  get editingMenuItem() {\r\n    return this.items.find(item => item.isEditing);\r\n  }\r\n\r\n  private onOverlayClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemCloseChildMenu.emit(this.openChildMenuItem);\r\n  };\r\n\r\n  private handleItemSelect = (event: CustomEvent<{ item: IKritzelMenuItem; parent: IKritzelMenuItem }>) => {\r\n    event.stopPropagation();\r\n    this.itemSelect.emit(event.detail);\r\n  };\r\n\r\n  private handleSave = (event: CustomEvent<IKritzelMenuItem>) => {\r\n    event.stopPropagation();\r\n    this.itemSave.emit(event.detail);\r\n  };\r\n\r\n  private handleCancel = (event: CustomEvent<IKritzelMenuItem>) => {\r\n    event.stopPropagation();\r\n    this.itemCancel.emit(event.detail);\r\n  };\r\n\r\n  private handleToggleChildMenu = (event: CustomEvent<{ item: IKritzelMenuItem; childMenuAnchor: HTMLElement }>) => {\r\n    event.stopPropagation();\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleCloseChildMenu = (event: CustomEvent<IKritzelMenuItem>) => {\r\n    event.stopPropagation();\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0} onClick={e => e.stopPropagation()}>\r\n        {this.openChildMenuItem && <div class=\"has-open-child-overlay\" onClick={this.onOverlayClick}></div>}\r\n        {this.items.map(item => (\r\n          <kritzel-menu-item\r\n            key={item.id}\r\n            item={item}\r\n            parent={this.parent}\r\n            style={{ pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleSave}\r\n            onItemCancel={this.handleCancel}\r\n            onItemToggleChildMenu={this.handleToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleCloseChildMenu}\r\n          ></kritzel-menu-item>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BKvOO7NT.js → p-BgpsMYcw.js}

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { d as defineCustomElement$5 } from './p-sq9jgfX0.js';
-import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-Dw4n-4zp.js';
-import { d as defineCustomElement$2 } from './p-NP1Htol7.js';
-import { d as defineCustomElement$1 } from './p-CM8KdFZI.js';
+import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-BehchtaT.js';
+import { d as defineCustomElement$2 } from './p-BlPlPpUy.js';
+import { d as defineCustomElement$1 } from './p-BorT6g39.js';
 
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
 
@@ -27,6 +27,11 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
     openChildMenuItem = null;
     newWorkspace = null;
     editingItemId = null;
+    handleWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }
     kritzelEngineRef = null;
     splitButtonRef;
     get sortedWorkspaces() {
@@ -150,7 +155,7 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
         "openChildMenuItem": [32],
         "newWorkspace": [32],
         "editingItemId": [32]
-    }]);
+    }, [[8, "wheel", "handleWheel"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -191,6 +196,6 @@ function defineCustomElement() {
 }
 
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-BKvOO7NT.js.map
+//# sourceMappingURL=p-BgpsMYcw.js.map
 
-//# sourceMappingURL=p-BKvOO7NT.js.map
+//# sourceMappingURL=p-BgpsMYcw.js.map

package/dist/components/p-BgpsMYcw.js.map

@@ -0,0 +1 @@
+{"file":"p-BgpsMYcw.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css?tag=kritzel-workspace-manager&encapsulation=shadow","src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 1;\r\n}\r\n","import { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() activeWorkspace: KritzelWorkspace;\r\n  @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n  @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @State() childMenuAnchor: HTMLElement = null;\r\n  @State() openChildMenuItem: IKritzelMenuItem = null;\r\n  @State() newWorkspace: KritzelWorkspace | null = null;\r\n  @State() editingItemId: string | null = null;\r\n\r\n  @Listen('wheel', { target: 'window', passive: false })\r\n  handleWheel(event: WheelEvent) {\r\n    if(event.ctrlKey){\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  kritzelEngineRef: HTMLKritzelEngineElement | null = null;\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngineRef) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n    if (this.editingItemId) {\r\n      return;\r\n    }\r\n\r\n    if (item.action) {\r\n      item.action(item, parent);\r\n      return;\r\n    }\r\n\r\n    this.workspaceChange.emit(item.value);\r\n  }\r\n\r\n  private async add() {\r\n    await this.splitButtonRef.open();\r\n    this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n    this.editingItemId = this.newWorkspace.id;\r\n  }\r\n\r\n  private edit(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n    requestAnimationFrame(() => {\r\n      this.editingItemId = item.id;\r\n    });\r\n  }\r\n\r\n  private async save(item: IKritzelMenuItem) {\r\n    if (this.newWorkspace) {\r\n      this.newWorkspace.name = item.label;\r\n      await this.kritzelEngineRef.createWorkspace(this.newWorkspace);\r\n      this.workspaceChange.emit(this.newWorkspace);\r\n    } else {\r\n      const workspace = item.value;\r\n      workspace.name = item.label;\r\n      await this.kritzelEngineRef.updateWorkspace(workspace);\r\n    }\r\n\r\n    this.editingItemId = null;\r\n    this.newWorkspace = null;\r\n  }\r\n\r\n  private cancel() {\r\n    this.newWorkspace = null;\r\n    this.editingItemId = null;\r\n  }\r\n\r\n  private async delete(item: IKritzelMenuItem) {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n\r\n    await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n\r\n    if (item.value.id === this.activeWorkspace?.id) {\r\n      this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;\r\n      this.workspaceChange.emit(this.activeWorkspace);\r\n    }\r\n\r\n    await this.splitButtonRef.focusMenu();\r\n  }\r\n\r\n  private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n    this.openChildMenuItem = item;\r\n    this.childMenuAnchor = anchor;\r\n  }\r\n\r\n  private closeChildMenu() {\r\n    this.openChildMenuItem = null;\r\n    this.childMenuAnchor = null;\r\n  }\r\n\r\n  private handleMenuOpen() {\r\n    this.kritzelEngineRef.disable();\r\n  }\r\n\r\n  private handleMenuClose() {\r\n    this.cancel();\r\n    this.closeChildMenu();\r\n    this.kritzelEngineRef.enable();\r\n  }\r\n\r\n  render() {\r\n    const menuItems = this.sortedWorkspaces\r\n      .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n      .filter(ws => ws !== null)\r\n      .map(ws => {\r\n        return {\r\n          id: ws.id,\r\n          label: ws.name,\r\n          value: ws,\r\n          isEditing: this.editingItemId === ws.id,\r\n          isSelected: this.activeWorkspace?.id === ws.id,\r\n          isNewItem: this.newWorkspace?.id === ws.id,\r\n          isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n          childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n          children: [\r\n            {\r\n              id: `${ws.id}-rename`,\r\n              label: 'Rename',\r\n              value: 'rename',\r\n              action: (_item, parent) => this.edit(parent),\r\n            },\r\n            {\r\n              id: `${ws.id}-delete`,\r\n              label: 'Delete',\r\n              value: 'delete',\r\n              isDisabled: this.sortedWorkspaces.length <= 1,\r\n              action: (_item, parent) => this.delete(parent),\r\n            },\r\n          ],\r\n        };\r\n      });\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          items={menuItems}\r\n          mainButtonDisabled={this.editingItemId != null}\r\n          onMainButtonClick={() => this.add()}\r\n          onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n          onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n          onItemSave={event => this.save(event.detail)}\r\n          onItemCancel={() => this.cancel()}\r\n          onItemCloseChildMenu={() => this.closeChildMenu()}\r\n          onMenuOpen={() => this.handleMenuOpen()}\r\n          onMenuClose={() => this.handleMenuClose()}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-NP1Htol7.js → p-BlPlPpUy.js}

@@ -64,6 +64,15 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
     handleResize() {
         this.calculatePosition();
     }
+    handleWindowScroll() {
+        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        if (!isInViewport) {
+            this.anchor?.blur();
+            this.closePortal();
+            return;
+        }
+        this.calculatePosition();
+    }
     portal;
     id = `portal-${ObjectHelper.generateUUID()}`;
     defaultOffset = 0;
@@ -166,7 +175,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: 'a994d8ab8c758bc92836693f35f8d9415913cfff', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'a9b9a71d82e9b57de24e5ecfa90197a27ed691c4' })));
+        return (h(Host, { key: 'a906e21c1257dfc6ed21257cce150db17048f04e', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '972544f2258f8b6dc8c691f3762d5ba806a57c41' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
@@ -176,7 +185,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         "offsetX": [2, "offset-x"],
         "offsetY": [2, "offset-y"],
         "autoFocus": [4, "auto-focus"]
-    }, [[8, "click", "handleOutsideClick"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"]], {
+    }, [[8, "click", "handleOutsideClick"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"], [11, "scroll", "handleWindowScroll"]], {
         "anchor": ["anchorChanged"]
     }]);
 function defineCustomElement() {
@@ -194,6 +203,6 @@ function defineCustomElement() {
 }
 
 export { KritzelPortal as K, defineCustomElement as d };
-//# sourceMappingURL=p-NP1Htol7.js.map
+//# sourceMappingURL=p-BlPlPpUy.js.map
 
-//# sourceMappingURL=p-NP1Htol7.js.map
+//# sourceMappingURL=p-BlPlPpUy.js.map

package/dist/components/p-BlPlPpUy.js.map

@@ -0,0 +1 @@
+{"file":"p-BlPlPpUy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-portal/kritzel-portal.tsx"],"sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() anchor: HTMLElement;\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.openPortal();\r\n      this.calculatePosition();\r\n      if (this.autoFocus) {\r\n        this.focusFirstElement();\r\n      }\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Prop() offsetX: number;\r\n  @Prop() offsetY: number;\r\n  @Prop() autoFocus: boolean = true;\r\n\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    if (event.key === 'Escape') {\r\n      this.anchor.focus();\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n\r\n    if (event.key === 'Tab') {\r\n      this.trapFocus(event);\r\n    }\r\n\r\n    if (event.key === 'Enter') {\r\n      const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n      if (activeElement?.click) {\r\n        event.preventDefault();\r\n        activeElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  @Listen('scroll', { target: 'window', capture: true })\r\n  handleWindowScroll() {\r\n    const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n    if (!isInViewport) {\r\n      this.anchor?.blur();\r\n      this.closePortal();\r\n      return;\r\n    }\r\n\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private portal: HTMLElement;\r\n  private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n  private defaultOffset = 0;\r\n  private minLeft = 0;\r\n\r\n  private focusFirstElement() {\r\n    requestAnimationFrame(() => {\r\n      this.firstFocusableElement?.focus?.();\r\n    });\r\n  }\r\n\r\n  private getDeepActiveElement(): Element {\r\n    let activeEl = document.activeElement;\r\n    while (activeEl?.shadowRoot?.activeElement) {\r\n      activeEl = activeEl.shadowRoot.activeElement;\r\n    }\r\n    return activeEl;\r\n  }\r\n\r\n  private trapFocus(event: KeyboardEvent) {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length === 0) return;\r\n\r\n    const firstFocusable = focusableElements[0];\r\n    const lastFocusable = focusableElements[focusableElements.length - 1];\r\n    const activeElement = this.getDeepActiveElement();\r\n\r\n    if (event.shiftKey) {\r\n      /* shift + tab */\r\n      if (activeElement === firstFocusable) {\r\n        lastFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    } else {\r\n      /* tab */\r\n      if (activeElement === lastFocusable) {\r\n        firstFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    }\r\n  }\r\n\r\n  private get firstFocusableElement(): HTMLElement | null {\r\n    const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n    if (!firstAssigned) return null;\r\n\r\n    const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);\r\n    return focusable[0] ?? firstAssigned;\r\n  }\r\n\r\n  private get lastAddedPortal(): HTMLElement | null {\r\n    const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n    return portals.length ? portals[portals.length - 1] : null;\r\n  }\r\n\r\n  private calculateLeft() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n\r\n    const offset = this.offsetX ?? this.defaultOffset;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n    if (left < this.minLeft) left = this.minLeft;\r\n    if (left > maxLeft) left = maxLeft;\r\n\r\n    return Math.round(left + window.scrollX);\r\n  }\r\n\r\n  private calculateTop() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n    const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private openPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', this.id);\r\n    this.portal.style.zIndex = '1';\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    this.portal.appendChild(this.host);\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private closePortal() {\r\n    const portal = document.getElementById(this.id);\r\n    if (!portal) return;\r\n    document.body.removeChild(portal);\r\n    this.host.remove();\r\n  }\r\n\r\n  private calculatePosition() {\r\n    if (!this.anchor || !this.portal) return;\r\n    const top = this.calculateTop();\r\n    const left = this.calculateLeft();\r\n    this.portal.style.top = `${top}px`;\r\n    this.portal.style.left = `${left}px`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-CM8KdFZI.js → p-BorT6g39.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$4 } from './p-sq9jgfX0.js';
-import { b as defineCustomElement$2, d as defineCustomElement$3 } from './p-Dw4n-4zp.js';
-import { d as defineCustomElement$1 } from './p-NP1Htol7.js';
+import { b as defineCustomElement$2, d as defineCustomElement$3 } from './p-BehchtaT.js';
+import { d as defineCustomElement$1 } from './p-BlPlPpUy.js';
 
 const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
 
@@ -39,6 +39,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
     isMenuOpen = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     anchorElement;
+    menuScrollTop = 0;
     splitMenuButtonRef;
     menuRef;
     async open() {
@@ -71,6 +72,9 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         this.isMenuOpen = true;
         this.anchorElement = this.host;
         this.menuOpen.emit();
+        requestAnimationFrame(() => {
+            this.menuRef?.setScrollTop(this.menuScrollTop);
+        });
     };
     closeMenu = () => {
         this.isMenuOpen = false;
@@ -93,8 +97,11 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
     handleItemCloseChildMenu = event => {
         this.itemCloseChildMenu.emit(event.detail);
     };
+    handleScroll = event => {
+        this.menuScrollTop = event.target.scrollTop;
+    };
     render() {
-        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 }))));
+        return (h(Host, { key: 'd18a70b94e3d6860dfac952b26f66e5b96cc6fa0', class: { mobile: this.isTouchDevice } }, h("button", { key: 'ee65221543fd8984f94d0a0b43beb7e1d28411f2', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '1dbdd1e4db4087564464e9586e91b48f80b88aae', name: this.buttonIcon })), h("div", { key: '78b5e0589e7a3dd0592fb2c1cdaae8732f57b129', class: "split-divider" }), h("button", { key: 'cfc5d53f06485a927608a99ea491e36b0e993fcc', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '0e141b614cbfc758f01d21908d846d16bdce586d', name: this.dropdownIcon })), h("kritzel-portal", { key: 'b5def34dcfe5cbbf9641b1218af803937d7a77b6', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '695f6c85a8ecd44f74ecf7752bf77d0caac69e6a', 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, onScroll: this.handleScroll }))));
     }
     static get style() { return kritzelSplitButtonCss; }
 }, [257, "kritzel-split-button", {
@@ -106,6 +113,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         "isMenuOpen": [32],
         "isTouchDevice": [32],
         "anchorElement": [32],
+        "menuScrollTop": [32],
         "open": [64],
         "focusMenu": [64]
     }]);
@@ -144,6 +152,6 @@ function defineCustomElement() {
 }
 
 export { KritzelSplitButton as K, defineCustomElement as d };
-//# sourceMappingURL=p-CM8KdFZI.js.map
+//# sourceMappingURL=p-BorT6g39.js.map
 
-//# sourceMappingURL=p-CM8KdFZI.js.map
+//# sourceMappingURL=p-BorT6g39.js.map

package/dist/components/p-BorT6g39.js.map

@@ -0,0 +1 @@
+{"file":"p-BorT6g39.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  font-family: sans-serif;\r\n  z-index: 1;\r\n  padding: var(--kritzel-split-button-padding, 4px);\r\n  background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n  border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-split-button-border, 1px solid #ebebeb);\r\n  gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n:host(.mobile){\r\n  --kritzel-split-button-hover-background-color: transparent;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  background-color: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  color: inherit;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: all;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.split-main-button,\r\n.split-menu-button {\r\n  height: auto;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: var(--kritzel-split-button-padding, 8px);\r\n  background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n  border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n  font-size: var(--kritzel-split-button-font-size, 14px);\r\n}\r\n\r\n.split-main-button:hover,\r\n.split-menu-button:hover {\r\n  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button:focus,\r\n.split-menu-button:focus {\r\n  outline: none;\r\n  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button {\r\n  gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n.split-menu-button {\r\n  border-left: none;\r\n  justify-content: center;\r\n}\r\n\r\n.split-divider {\r\n  width: var(--kritzel-split-button-divider-width, 1px);\r\n  height: 24px;\r\n  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:disabled {\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n","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  @State() menuScrollTop: number = 0;\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    requestAnimationFrame(() => {\r\n      this.menuRef?.setScrollTop(this.menuScrollTop);\r\n    });\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  private handleScroll = event => {\r\n    this.menuScrollTop = (event.target as HTMLElement).scrollTop;\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            onScroll={this.handleScroll}\r\n          ></kritzel-menu>\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-B3LGnqFz.js → p-RKMcsakE.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
-import { b as KritzelBrushTool, c as KritzelTextTool } from './p-CNTK3JOp.js';
+import { b as KritzelBrushTool, c as KritzelTextTool } from './p-obTL5Wl7.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$c } from './p-B7kZ1_RH.js';
 import { d as defineCustomElement$b } from './p-CsyM5q2M.js';
@@ -238,6 +238,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-B3LGnqFz.js.map
+//# sourceMappingURL=p-RKMcsakE.js.map
 
-//# sourceMappingURL=p-B3LGnqFz.js.map
+//# sourceMappingURL=p-RKMcsakE.js.map

package/dist/components/{p-B3LGnqFz.js.map → p-RKMcsakE.js.map}

@@ -1 +1 @@
-{"file":"p-B3LGnqFz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n  --kritzel-controls-control-hover-background-color: transparent;\r\n  --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--kritzel-controls-gap, 8px);\r\n  height: 100%;\r\n  padding: var(--kritzel-controls-padding, 8px);\r\n  background-color: var(--kritzel-controls-background-color, #ffffff);\r\n  border-radius: var(--kritzel-controls-border-radius, 16px);\r\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n  z-index: 10000;\r\n  position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  padding: var(--kritzel-controls-control-padding, 8px);\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  -webkit-tap-highlight-color: transparent;\r\n  font-weight: bold;\r\n}\r\n\r\n.kritzel-control:focus,\r\n.kritzel-control:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control.selected:focus {\r\n    background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;\r\n\r\n}\r\n\r\n.kritzel-divider {\r\n  width: var(--kritzel-controls-divider-width, 1px);\r\n  height: var(--kritzel-controls-divider-height, 24px);\r\n  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-config-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 40px;\r\n  height: 40px;\r\n  box-sizing: border-box;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-config {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  border-radius: 50%;\r\n}\r\n\r\n.kritzel-config:focus {\r\n  outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.color-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n    height: 24px;\r\n    width: 24px;\r\n    border-radius: 50%;\r\n    border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n  position: fixed;\r\n  bottom: 56px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 10001;\r\n}\r\n","import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n  tooltipRef: HTMLKritzelTooltipElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\r\n  }\r\n\r\n  render() {\r\n    const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'divider') {\r\n              return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div class=\"kritzel-config-container\" key={control.name}>\r\n                  <kritzel-tooltip\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    tabIndex={0}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\r\n                    style={{\r\n                      cursor: this.activeControl.config ? 'pointer' : 'default',\r\n                      pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n\r\n                    {hasNoConfig && <div class=\"no-config\"></div>}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-RKMcsakE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n  --kritzel-controls-control-hover-background-color: transparent;\r\n  --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--kritzel-controls-gap, 8px);\r\n  height: 100%;\r\n  padding: var(--kritzel-controls-padding, 8px);\r\n  background-color: var(--kritzel-controls-background-color, #ffffff);\r\n  border-radius: var(--kritzel-controls-border-radius, 16px);\r\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n  z-index: 10000;\r\n  position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  padding: var(--kritzel-controls-control-padding, 8px);\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  -webkit-tap-highlight-color: transparent;\r\n  font-weight: bold;\r\n}\r\n\r\n.kritzel-control:focus,\r\n.kritzel-control:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control.selected:focus {\r\n    background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;\r\n\r\n}\r\n\r\n.kritzel-divider {\r\n  width: var(--kritzel-controls-divider-width, 1px);\r\n  height: var(--kritzel-controls-divider-height, 24px);\r\n  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-config-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 40px;\r\n  height: 40px;\r\n  box-sizing: border-box;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-config {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  border-radius: 50%;\r\n}\r\n\r\n.kritzel-config:focus {\r\n  outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.color-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n    height: 24px;\r\n    width: 24px;\r\n    border-radius: 50%;\r\n    border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n  position: fixed;\r\n  bottom: 56px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 10001;\r\n}\r\n","import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n  tooltipRef: HTMLKritzelTooltipElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\r\n  }\r\n\r\n  render() {\r\n    const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'divider') {\r\n              return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div class=\"kritzel-config-container\" key={control.name}>\r\n                  <kritzel-tooltip\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    tabIndex={0}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\r\n                    style={{\r\n                      cursor: this.activeControl.config ? 'pointer' : 'default',\r\n                      pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n\r\n                    {hasNoConfig && <div class=\"no-config\"></div>}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-CNTK3JOp.js → p-obTL5Wl7.js}

@@ -436,7 +436,6 @@ class KritzelBaseObject {
             z: this.scale,
             width: this.totalWidth / this.scale,
             height: this.totalHeight / this.scale,
-            depth: 0,
         };
     }
     get rotatedBoundingBox() {
@@ -446,7 +445,6 @@ class KritzelBaseObject {
             z: this.scale,
             width: this.maxXRotated - this.minXRotated,
             height: this.maxYRotated - this.minYRotated,
-            depth: 0,
         };
     }
     get rotatedPolygon() {
@@ -538,11 +536,12 @@ class KritzelBaseObject {
             x: -this._core.store.state.translateX / this._core.store.state.scale,
             y: -this._core.store.state.translateY / this._core.store.state.scale,
             width: this._core.store.state.viewportWidth / this._core.store.state.scale,
-            height: this._core.store.state.viewportHeight / this._core.store.state.scale};
-        return (this.boundingBox.x < viewportBounds.x + viewportBounds.width &&
-            this.boundingBox.x + this.boundingBox.width > viewportBounds.x &&
-            this.boundingBox.y < viewportBounds.y + viewportBounds.height &&
-            this.boundingBox.y + this.boundingBox.height > viewportBounds.y);
+            height: this._core.store.state.viewportHeight / this._core.store.state.scale,
+        };
+        return (this.rotatedBoundingBox.x < viewportBounds.x + viewportBounds.width &&
+            this.rotatedBoundingBox.x + this.rotatedBoundingBox.width > viewportBounds.x &&
+            this.rotatedBoundingBox.y < viewportBounds.y + viewportBounds.height &&
+            this.rotatedBoundingBox.y + this.rotatedBoundingBox.height > viewportBounds.y);
     }
     centerInViewport() {
         const scale = this._core.store.state.scale;
@@ -1159,6 +1158,6 @@ class KritzelBrushTool extends KritzelBaseTool {
 }
 
 export { AddObjectCommand as A, KritzelText as K, UpdateObjectCommand as U, KritzelPath as a, KritzelBrushTool as b, KritzelTextTool as c, KritzelKeyboardHelper as d, KritzelBaseObject as e, KritzelBaseCommand as f, KritzelBaseTool as g, KritzelEventHelper as h, KritzelToolRegistry as i };
-//# sourceMappingURL=p-CNTK3JOp.js.map
+//# sourceMappingURL=p-obTL5Wl7.js.map
 
-//# sourceMappingURL=p-CNTK3JOp.js.map
+//# sourceMappingURL=p-obTL5Wl7.js.map