kritzel-stencil 0.0.126 → 0.0.128

package/dist/components/p-hSuNJiIq.js

@@ -0,0 +1,152 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
+import { d as defineCustomElement$2 } from './p-BLmFBe2a.js';
+import { d as defineCustomElement$1 } from './p-BmJbJwkH.js';
+
+const kritzelMenuCss = ":host{display:flex;flex-direction:column;min-width:180px;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-item-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}button{all:unset;background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;text-align:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;-webkit-tap-highlight-color:transparent}button:focus{outline:none}:host(:focus){outline:none}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-family:sans-serif;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);gap:var(--kritzel-context-menu-item-gap, 12px)}.menu-item:focus,.menu-item:focus-within{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item:not(.disabled):not(.inactive):not(.active):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):not(.inactive):not(.active):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.active{color:var(--kritzel-controls-background-color, #ffffff);background-color:var(--kritzel-controls-control-selected-background-color, #007aff)}.menu-item.active kritzel-icon{filter:brightness(0) invert(1)}.menu-item.active:hover{background-color:var(--kritzel-controls-control-selected-hover-background-color, #0075f1)}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);background-color:transparent;cursor:default}.menu-item.child-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important}.menu-item.active.menu-item.child-open{background-color:var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.edit-mode input{background:transparent;border:none;outline:none;font-size:inherit;font-family:inherit;color:inherit;padding:0;width:100%;padding:2px 0px;border-bottom:1px solid var(--kritzel-context-menu-item-color, #333333)}.menu-item.active.edit-mode input{border-bottom:1px solid var(--kritzel-controls-background-color, #ffffff)}.menu-item.edit-mode input::selection{background-color:var(--kritzel-controls-control-selected-background-color, #007aff);border-radius:4px;color:var(--kritzel-controls-background-color, #ffffff)}.menu-item.active.edit-mode input::selection{background-color:var(--kritzel-menu-item-selected-input-background-color, #ffffff34)}.menu-item-button{background:transparent;border:none;outline:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center}.menu-item-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-button:focus{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.edit-container,.view-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-context-menu-item-gap, 4px)}";
+
+const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.close = createEvent(this, "close");
+        this.items = [];
+        this.parentIndex = null;
+        this.parent = null;
+        this.activeItemIndex = null;
+        this.editingIndex = null;
+        this.openChildMenuIndex = null;
+        this.childMenuAnchor = null;
+        this.cancelButton = null;
+        this.saveButton = null;
+    }
+    onEditingIndexChange(newValue) {
+        if (newValue === null) {
+            this.openChildMenuIndex = null;
+            this.editInput = undefined;
+            return;
+        }
+    }
+    handleWindowClick(event) {
+        if (this.openChildMenuIndex === null) {
+            return;
+        }
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.openChildMenuIndex = null;
+        }
+    }
+    handleEscape(event) {
+        var _a;
+        if (event.key === 'Escape') {
+            if (this.openChildMenuIndex !== null) {
+                return;
+            }
+            if (this.editingIndex !== null) {
+                (_a = this.cancelButton) === null || _a === void 0 ? void 0 : _a.click();
+                return;
+            }
+            this.close.emit();
+        }
+    }
+    handleEnter(event) {
+        var _a;
+        if (event.key === 'Enter') {
+            if (this.editingIndex !== null) {
+                (_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.click();
+                return;
+            }
+        }
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.host.focus();
+        });
+    }
+    isViewMode(index) {
+        return this.editingIndex !== index;
+    }
+    handleSelect(item) {
+        var _a;
+        if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {
+            return;
+        }
+        (_a = item.select) === null || _a === void 0 ? void 0 : _a.call(item, item);
+    }
+    render() {
+        return (h(Host, { key: '6d98c1d40c1af36b7b36c45ddc96fb89ab6ebdca', tabIndex: 0 }, this.items.map((item, index) => (h("button", { tabIndex: 0, class: {
+                'menu-item': true,
+                'disabled': item.disabled,
+                'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,
+                'child-open': this.openChildMenuIndex === index,
+                'edit-mode': this.editingIndex === index,
+                'active': this.activeItemIndex === index,
+            }, onClick: () => this.handleSelect(item) }, this.isViewMode(index) === true && (h("div", { class: "view-container" }, h("span", { class: "menu-item-label" }, item.label), h("div", null, item.children && item.children.length > 0 && (h("button", { class: "menu-item-button", tabIndex: 0, onClick: event => {
+                if (this.editingIndex !== null)
+                    return;
+                event.stopPropagation();
+                this.childMenuAnchor = this.openChildMenuIndex === index ? null : event.currentTarget;
+                this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;
+            } }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index && (h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => this.openChildMenuIndex = null }, h("kritzel-menu", { style: { minWidth: '100px' }, items: item.children, parentIndex: index, parent: item, onClose: () => {
+                var _a;
+                this.openChildMenuIndex = null;
+                (_a = this.childMenuAnchor) === null || _a === void 0 ? void 0 : _a.focus();
+            } })))))), this.isViewMode(index) === false && (h("div", { class: "edit-container" }, h("input", { tabIndex: 0, ref: el => {
+                this.editInput = el;
+                requestAnimationFrame(() => {
+                    var _a, _b;
+                    (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = this.editInput) === null || _b === void 0 ? void 0 : _b.select();
+                });
+            }, type: "text", name: 'menu-item-' + index, value: item.label, onInput: e => (item.label = e.target.value) }), h("div", { style: { display: 'flex', gap: '8px' } }, h("button", { ref: el => (this.cancelButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, h("kritzel-icon", { name: "x", size: 16 })), h("button", { ref: el => (this.saveButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, h("kritzel-icon", { name: "check", size: 16 }))))))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "editingIndex": ["onEditingIndexChange"]
+    }; }
+    static get style() { return kritzelMenuCss; }
+}, [257, "kritzel-menu", {
+        "items": [16],
+        "parentIndex": [2, "parent-index"],
+        "parent": [16],
+        "activeItemIndex": [2, "active-item-index"],
+        "editingIndex": [2, "editing-index"],
+        "openChildMenuIndex": [32]
+    }, [[8, "click", "handleWindowClick"], [8, "keydown", "handleEscape"], [8, "keydown", "handleEnter"]], {
+        "editingIndex": ["onEditingIndexChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-menu", "kritzel-icon", "kritzel-menu", "kritzel-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelMenu);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "kritzel-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelMenu as K, defineCustomElement as d };
+//# sourceMappingURL=p-hSuNJiIq.js.map
+
+//# sourceMappingURL=p-hSuNJiIq.js.map

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

@@ -0,0 +1 @@
+{"file":"p-hSuNJiIq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["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  display: flex;\r\n  flex-direction: column;\r\n  min-width: 180px;\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, 12px);\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: 2;\r\n  gap: var(--kritzel-menu-item-gap, 4px);\r\n  overflow-y: auto;\r\n  scrollbar-color: #ebebeb transparent;\r\n  scrollbar-width: thin;\r\n}\r\n\r\nbutton {\r\n  all: unset;\r\n  background: transparent;\r\n  border: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  line-height: inherit;\r\n  text-align: inherit;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  border-radius: 0;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\nbutton:focus {\r\n  outline: none;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n.menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: var(--kritzel-context-menu-item-padding, 8px);\r\n  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);\r\n  cursor: pointer;\r\n  font-family: sans-serif;\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  color: var(--kritzel-context-menu-item-color, #333333);\r\n  gap: var(--kritzel-context-menu-item-gap, 12px);\r\n}\r\n\r\n.menu-item:focus,\r\n.menu-item:focus-within {\r\n  outline: none;\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item-label {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.menu-item:not(.disabled):not(.inactive):not(.active):hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item:not(.disabled):not(.inactive):not(.active):active {\r\n  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.menu-item.active {\r\n  color: var(--kritzel-controls-background-color, #ffffff);\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);\r\n}\r\n\r\n.menu-item.active kritzel-icon {\r\n  filter: brightness(0) invert(1);\r\n}\r\n\r\n.menu-item.active:hover {\r\n  background-color: var(--kritzel-controls-control-selected-hover-background-color, #0075f1);\r\n}\r\n\r\n.menu-item.disabled {\r\n  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);\r\n  background-color: transparent;\r\n  cursor: default;\r\n}\r\n\r\n.menu-item.child-open {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important;\r\n}\r\n\r\n.menu-item.active.menu-item.child-open {\r\n  background-color: var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important;\r\n}\r\n\r\n.menu-item kritzel-icon {\r\n  opacity: 0.8;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.menu-item.disabled kritzel-icon {\r\n  opacity: 0.4;\r\n}\r\n\r\n.menu-item.edit-mode input {\r\n  background: transparent;\r\n  border: none;\r\n  outline: none;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: inherit;\r\n  padding: 0;\r\n  width: 100%;\r\n  padding: 2px 0px;\r\n  border-bottom: 1px solid var(--kritzel-context-menu-item-color, #333333);\r\n}\r\n\r\n.menu-item.active.edit-mode input {\r\n  border-bottom: 1px solid var(--kritzel-controls-background-color, #ffffff);\r\n}\r\n\r\n.menu-item.edit-mode input::selection {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);\r\n  border-radius: 4px;\r\n  color: var(--kritzel-controls-background-color, #ffffff);\r\n}\r\n\r\n.menu-item.active.edit-mode input::selection {\r\n  background-color: var(--kritzel-menu-item-selected-input-background-color, #ffffff34);\r\n}\r\n\r\n.menu-item-button {\r\n  background: transparent;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  border-radius: 8px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.menu-item-button:hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item-button:focus {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.edit-container,\r\n.view-container {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--kritzel-context-menu-item-gap, 4px);\r\n}\r\n","import { Component, h, Prop, Host, State, Listen, Element, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\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()\r\n  host: HTMLElement;\r\n\r\n  @Prop()\r\n  items: KritzelMenuItem[] = [];\r\n\r\n  @Prop()\r\n  parentIndex: number | null = null;\r\n\r\n  @Prop()\r\n  parent: KritzelMenuItem = null;\r\n\r\n  @Prop()\r\n  activeItemIndex: number | null = null;\r\n\r\n  @Prop()\r\n  editingIndex: number | null = null;\r\n\r\n  @Event()\r\n  close: EventEmitter<void>;\r\n\r\n  @State()\r\n  openChildMenuIndex: number | null = null;\r\n\r\n  private editInput?: HTMLInputElement;\r\n\r\n  private childMenuAnchor?: HTMLElement = null;\r\n\r\n  private cancelButton?: HTMLElement = null;\r\n\r\n  private saveButton?: HTMLElement = null;\r\n\r\n  @Watch('editingIndex')\r\n  onEditingIndexChange(newValue: number | null) {\r\n    if (newValue === null) {\r\n      this.openChildMenuIndex = null;\r\n      this.editInput = undefined;\r\n      return;\r\n    }\r\n  }\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleWindowClick(event: MouseEvent) {\r\n    if (this.openChildMenuIndex === null) {\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.openChildMenuIndex = null;\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleEscape(event: KeyboardEvent) {\r\n    if (event.key === 'Escape') {\r\n      if (this.openChildMenuIndex !== null) {\r\n        return;\r\n      }\r\n\r\n      if (this.editingIndex !== null) {\r\n        this.cancelButton?.click();\r\n        return;\r\n      }\r\n\r\n      this.close.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleEnter(event: KeyboardEvent) {\r\n    if (event.key === 'Enter') {\r\n      if (this.editingIndex !== null) {\r\n        this.saveButton?.click();\r\n        return;\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.host.focus();\r\n    });\r\n  }\r\n\r\n  isViewMode(index: number): boolean {\r\n    return this.editingIndex !== index;\r\n  }\r\n\r\n  handleSelect(item: KritzelMenuItem) {\r\n    if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {\r\n      return;\r\n    }\r\n    item.select?.(item);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0}>\r\n        {this.items.map((item, index) => (\r\n          <button\r\n            tabIndex={0}\r\n            class={{\r\n              'menu-item': true,\r\n              'disabled': item.disabled,\r\n              'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,\r\n              'child-open': this.openChildMenuIndex === index,\r\n              'edit-mode': this.editingIndex === index,\r\n              'active': this.activeItemIndex === index,\r\n            }}\r\n            onClick={() => this.handleSelect(item)}\r\n          >\r\n            {this.isViewMode(index) === true && (\r\n              <div class=\"view-container\">\r\n                <span class=\"menu-item-label\">{item.label}</span>\r\n\r\n                <div>\r\n                  {item.children && item.children.length > 0 && (\r\n                    <button\r\n                      class=\"menu-item-button\"\r\n                      tabIndex={0}\r\n                      onClick={event => {\r\n                        if (this.editingIndex !== null) return;\r\n                        event.stopPropagation();\r\n                        this.childMenuAnchor = this.openChildMenuIndex === index ? null : (event.currentTarget as HTMLElement);\r\n                        this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;\r\n                      }}\r\n                    >\r\n                      <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n                    </button>\r\n                  )}\r\n\r\n                  {this.openChildMenuIndex === index && (\r\n                    <kritzel-portal\r\n                      anchor={this.childMenuAnchor}\r\n                      offsetY={4}\r\n                      onClose={() => this.openChildMenuIndex = null}\r\n                    >\r\n                      <kritzel-menu\r\n                        style={{ minWidth: '100px' }}\r\n                        items={item.children}\r\n                        parentIndex={index}\r\n                        parent={item}\r\n                        onClose={() => {\r\n                          this.openChildMenuIndex = null;\r\n                          this.childMenuAnchor?.focus();\r\n                        }}\r\n                      ></kritzel-menu>\r\n                    </kritzel-portal>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            )}\r\n\r\n            {this.isViewMode(index) === false && (\r\n              <div class=\"edit-container\">\r\n                <input\r\n                  tabIndex={0}\r\n                  ref={el => {\r\n                    this.editInput = el as HTMLInputElement;\r\n                    requestAnimationFrame(() => {\r\n                      this.editInput?.focus();\r\n                      this.editInput?.select();\r\n                    });\r\n                  }}\r\n                  type=\"text\"\r\n                  name={'menu-item-' + index}\r\n                  value={item.label}\r\n                  onInput={e => (item.label = (e.target as HTMLInputElement).value)}\r\n                />\r\n\r\n                <div style={{ display: 'flex', gap: '8px' }}>\r\n                  <button ref={el => (this.cancelButton = el)} class=\"menu-item-button\" tabIndex={0} onClick={() => item.cancel?.(item)}>\r\n                    <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n                  </button>\r\n\r\n                  <button ref={el => (this.saveButton = el)} class=\"menu-item-button\" tabIndex={0} onClick={() => item.save?.(item)}>\r\n                    <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            )}\r\n          </button>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/{stencil/kritzel-tooltip.entry.js → components/p-jG1e48OE.js}

@@ -1,11 +1,15 @@
-import { r as registerInstance, h, d as Host, e as getElement } from './index-Df69oUcb.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BqrTPNyu.js';
 
 const kritzelTooltipCss = ":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";
 
 const MOBILE_BREAKPOINT = 768;
-const KritzelTooltip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
         this.isVisible = false;
         this.arrowSize = 8;
         this.offsetY = 24;
@@ -41,23 +45,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c746aaec0d9d29225e3a050a00ef878e0c682c2a', style: {
+        return (h(Host, { key: '7610e8185e037813cc363daa3212a4164a20daaf', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: '55c6fd7d07a767bcdacef455664c31b114a72b53', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '914c250449dacdbe207a21bc3c454ef33e79d0ae' }), h("div", { key: '1b508f8a8c1c9be401c170cf5d4f384e236aa582', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'bd5c1f0f7ff3afddfcf2469277189d026e79b453', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '547e5a8fcb8131225461881a1ad0125fa4b0d55b' }), h("div", { key: 'de1d30c31667a81a36873d32bec20fcc911ec89f', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '254cb36260dd0993e556766745d8de095650910f', class: "tooltip-arrow", style: {
+            } }, h("div", { key: 'ebbf83bd4d35e252b0258a7c81ebcef48ac10004', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '78602a790ec58cafec58864a5db5ecf3e5507faa', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: '918ca46c438657dc4f72ccc73f81d58076d637c5', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -65,11 +69,32 @@ const KritzelTooltip = class {
                 bottom: `${this.arrowSize * 2}px`,
             } })))));
     }
-    get el() { return getElement(this); }
-};
-KritzelTooltip.style = kritzelTooltipCss;
+    get el() { return this; }
+    static get style() { return kritzelTooltipCss; }
+}, [257, "kritzel-tooltip", {
+        "isVisible": [4, "is-visible"],
+        "anchorElement": [16, "anchor-element"],
+        "arrowSize": [2, "arrow-size"],
+        "offsetY": [2, "offset-y"],
+        "positionX": [32],
+        "arrowOffset": [32],
+        "isMobileView": [32]
+    }, [[9, "resize", "handleWindowResize"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelTooltip);
+            }
+            break;
+    } });
+}
 
-export { KritzelTooltip as kritzel_tooltip };
-//# sourceMappingURL=kritzel-tooltip.entry.esm.js.map
+export { KritzelTooltip as K, defineCustomElement as d };
+//# sourceMappingURL=p-jG1e48OE.js.map
 
-//# sourceMappingURL=kritzel-tooltip.entry.js.map
+//# sourceMappingURL=p-jG1e48OE.js.map

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

@@ -0,0 +1 @@
+{"file":"p-jG1e48OE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","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}

package/dist/components/p-rQeWFfPG.js

@@ -0,0 +1,54 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
+import { d as defineCustomElement$1 } from './p-5CJxFNEE.js';
+
+const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
+
+const KritzelStrokeSize = /*@__PURE__*/ proxyCustomElement(class KritzelStrokeSize extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange");
+        this.sizes = [4, 6, 8, 12, 16, 24];
+        this.selectedSize = null;
+    }
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    render() {
+        return (h(Host, { key: '0185d3243c35c49169324c98f87df6a286fc3d31' }, this.sizes.map(size => (h("div", { class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
+    }
+    static get style() { return kritzelStrokeSizeCss; }
+}, [257, "kritzel-stroke-size", {
+        "sizes": [16],
+        "selectedSize": [1026, "selected-size"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-stroke-size", "kritzel-color"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-stroke-size":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelStrokeSize);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelStrokeSize as K, defineCustomElement as d };
+//# sourceMappingURL=p-rQeWFfPG.js.map
+
+//# sourceMappingURL=p-rQeWFfPG.js.map

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

@@ -0,0 +1 @@
+{"file":"p-rQeWFfPG.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,8gBAA8gB;;MCO9hB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOE,QAAA,IAAA,CAAA,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAGvC,QAAA,IAAY,CAAA,YAAA,GAAkB,IAAI;AA2BnC;AAtBS,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,eAAA,EAAA,EAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,EAAA,CAAkB,CACvD,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-stroke-size/kritzel-stroke-size.css?tag=kritzel-stroke-size&encapsulation=shadow","src/components/shared/kritzel-stroke-size/kritzel-stroke-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-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}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);\r\n}\r\n","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}

package/dist/components/p-sQmW5NRu.js

@@ -0,0 +1,156 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
+import { K as KritzelWorkspace } from './p-BeVv4o5c.js';
+import { O as ObjectHelper } from './p-Bb6od8He.js';
+import { d as defineCustomElement$4 } from './p-BLmFBe2a.js';
+import { d as defineCustomElement$3 } from './p-hSuNJiIq.js';
+import { d as defineCustomElement$2 } from './p-BmJbJwkH.js';
+import { d as defineCustomElement$1 } from './p-DV4ERZv5.js';
+
+const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
+
+const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWorkspaceManager extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.isWorkspaceManagerReady = createEvent(this, "isWorkspaceManagerReady");
+        this.workspaceChange = createEvent(this, "workspaceChange");
+        this.workspaces = [];
+        this.editingIndex = null;
+        this.newWorkspace = null;
+        this.kritzelEngine = null;
+        this.handleNewWorkspace = async () => {
+            var _a;
+            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
+            requestAnimationFrame(() => {
+                this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+                this.editingIndex = 0;
+            });
+        };
+        this.handleMenuClosed = () => {
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleSave = async (item) => {
+            const workspace = item.value;
+            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
+            if (this.newWorkspace) {
+                await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.selectWorkspace(updatedWorkspace);
+            }
+            else {
+                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+            }
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleRename = (index) => {
+            this.editingIndex = index;
+        };
+        this.handleDelete = async (workspaceToDelete) => {
+            var _a;
+            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
+            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
+                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
+                this.selectWorkspace(newActiveWorkspace);
+            }
+        };
+    }
+    get sortedWorkspaces() {
+        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
+        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    get activeItemIndex() {
+        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    handleSelect(workspace) {
+        this.selectWorkspace(workspace);
+    }
+    selectWorkspace(workspace) {
+        if (this.editingIndex !== null)
+            return;
+        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
+        this.workspaceChange.emit(workspace);
+    }
+    render() {
+        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
+            label: ws.name,
+            value: ws,
+            select: () => this.handleSelect(ws),
+            cancel: this.handleMenuClosed,
+            save: this.handleSave,
+            children: [
+                {
+                    label: 'Rename',
+                    value: 'rename',
+                    select: () => this.handleRename(index),
+                },
+                {
+                    label: 'Delete',
+                    value: 'delete',
+                    disabled: this.sortedWorkspaces.length <= 1,
+                    select: () => this.handleDelete(ws),
+                },
+            ],
+        }));
+        return (h(Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+    }
+    get host() { return this; }
+    static get style() { return kritzelWorkspaceManagerCss; }
+}, [257, "kritzel-workspace-manager", {
+        "workspaces": [16],
+        "activeWorkspace": [1040, "active-workspace"],
+        "editingIndex": [32],
+        "newWorkspace": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-workspace-manager", "kritzel-icon", "kritzel-menu", "kritzel-portal", "kritzel-split-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-workspace-manager":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelWorkspaceManager);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-split-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelWorkspaceManager as K, defineCustomElement as d };
+//# sourceMappingURL=p-sQmW5NRu.js.map
+
+//# sourceMappingURL=p-sQmW5NRu.js.map

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

@@ -0,0 +1 @@
+{"file":"p-sQmW5NRu.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 { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\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  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\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.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 handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n    }\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\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          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,6 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+//# sourceMappingURL=app-globals-DQuL1Twl.js.map
+
+//# sourceMappingURL=app-globals-DQuL1Twl.js.map

package/dist/esm/app-globals-DQuL1Twl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-DQuL1Twl.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\nexport const globalStyles = \"\";\n"],"names":[],"mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}