kritzel-stencil 0.0.130 → 0.0.132

package/dist/components/{p-jpGLgpoq.js → p-CTvJDYFQ.js}

@@ -1,5 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
-import { O as ObjectHelper } from './p-Bb6od8He.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { O as ObjectHelper } from './p-EXPChOF6.js';
+import { K as KritzelHTMLHelper } from './p-C6qB08BS.js';
 
 const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal extends H {
     constructor(registerHost) {
@@ -9,11 +10,9 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         }
         this.__attachShadow();
         this.close = createEvent(this, "close");
-        this.autoFocus = true;
-        this.id = `portal-${ObjectHelper.generateUUID()}`;
-        this.defaultOffset = 0;
-        this.minLeft = 0;
     }
+    get host() { return this; }
+    anchor;
     anchorChanged(newValue) {
         if (newValue) {
             this.openPortal();
@@ -26,6 +25,10 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
             this.closePortal();
         }
     }
+    offsetX;
+    offsetY;
+    autoFocus = true;
+    close;
     handleOutsideClick(event) {
         event.stopPropagation();
         const isLastPortal = this.lastAddedPortal === this.portal;
@@ -52,7 +55,7 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         }
         if (event.key === 'Enter') {
             const activeElement = this.getDeepActiveElement();
-            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.click) {
+            if (activeElement?.click) {
                 event.preventDefault();
                 activeElement.click();
             }
@@ -61,22 +64,24 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
     handleResize() {
         this.calculatePosition();
     }
+    portal;
+    id = `portal-${ObjectHelper.generateUUID()}`;
+    defaultOffset = 0;
+    minLeft = 0;
     focusFirstElement() {
         requestAnimationFrame(() => {
-            var _a, _b;
-            (_b = (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.firstFocusableElement?.focus?.();
         });
     }
     getDeepActiveElement() {
-        var _a;
         let activeEl = document.activeElement;
-        while ((_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        while (activeEl?.shadowRoot?.activeElement) {
             activeEl = activeEl.shadowRoot.activeElement;
         }
         return activeEl;
     }
     trapFocus(event) {
-        const focusableElements = this.getFocusableElements(this.host);
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length === 0)
             return;
         const firstFocusable = focusableElements[0];
@@ -97,65 +102,24 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
             }
         }
     }
-    getFocusableElements(root) {
-        if (!root)
-            return [];
-        const focusableElements = [];
-        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
-        const isVisible = (el) => {
-            return el.offsetParent !== null;
-        };
-        // Check if the root element itself is focusable
-        if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {
-            focusableElements.push(root);
-        }
-        // Function to recursively find focusable elements
-        const findFocusable = (element) => {
-            // Search in shadow root
-            if (element.shadowRoot) {
-                Array.from(element.shadowRoot.querySelectorAll(focusableSelector)).forEach(el => {
-                    if (isVisible(el)) {
-                        focusableElements.push(el);
-                    }
-                });
-                Array.from(element.shadowRoot.children).forEach(findFocusable);
-            }
-            // Search in light DOM
-            Array.from(element.querySelectorAll(focusableSelector)).forEach(el => {
-                if (!focusableElements.includes(el) && isVisible(el)) {
-                    focusableElements.push(el);
-                }
-            });
-            // Handle slotted content
-            if (element.tagName === 'SLOT') {
-                element.assignedElements({ flatten: true }).forEach(el => findFocusable(el));
-            }
-            Array.from(element.children).forEach(findFocusable);
-        };
-        findFocusable(root);
-        // Return unique elements in document order
-        return [...new Set(focusableElements)];
-    }
     get firstFocusableElement() {
-        var _a, _b;
-        const slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        const firstAssigned = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements({ flatten: true })[0];
+        const slotEl = this.host.shadowRoot?.querySelector('slot');
+        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
         if (!firstAssigned)
             return null;
-        const focusable = this.getFocusableElements(firstAssigned);
-        return (_b = focusable[0]) !== null && _b !== void 0 ? _b : firstAssigned;
+        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
+        return focusable[0] ?? firstAssigned;
     }
     get lastAddedPortal() {
         const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
         return portals.length ? portals[portals.length - 1] : null;
     }
     calculateLeft() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : this.defaultOffset;
+        const offset = this.offsetX ?? this.defaultOffset;
         let left = refRect.left + offset;
         const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
         if (left < this.minLeft)
@@ -165,12 +129,11 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         return Math.round(left + window.scrollX);
     }
     calculateTop() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : this.defaultOffset;
+        const offset = this.offsetY ?? this.defaultOffset;
         let top = refRect.bottom + offset;
         if (top + portalRect.height > window.innerHeight) {
             top = refRect.top - portalRect.height - offset;
@@ -203,9 +166,8 @@ const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal exten
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
+        return (h(Host, { key: 'a994d8ab8c758bc92836693f35f8d9415913cfff', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'a9b9a71d82e9b57de24e5ecfa90197a27ed691c4' })));
     }
-    get host() { return this; }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
     }; }
@@ -232,6 +194,6 @@ function defineCustomElement() {
 }
 
 export { KritzelPortal as K, defineCustomElement as d };
-//# sourceMappingURL=p-jpGLgpoq.js.map
+//# sourceMappingURL=p-CTvJDYFQ.js.map
 
-//# sourceMappingURL=p-jpGLgpoq.js.map
+//# sourceMappingURL=p-CTvJDYFQ.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CTvJDYFQ.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  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\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-BAPUTr3K.js → p-CsyM5q2M.js}

@@ -1,7 +1,7 @@
-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';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { d as defineCustomElement$1 } from './p-B7kZ1_RH.js';
 
-const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-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}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
+const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-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}.color-container:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
 const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorPalette extends H {
     constructor(registerHost) {
@@ -11,11 +11,12 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
         }
         this.__attachShadow();
         this.colorChange = createEvent(this, "colorChange");
-        this.colors = [];
-        this.selectedColor = null;
-        this.isExpanded = false;
-        this.isOpaque = false;
     }
+    colors = [];
+    selectedColor = null;
+    isExpanded = false;
+    isOpaque = false;
+    colorChange;
     handleColorClick(color) {
         this.selectedColor = color;
         this.colorChange.emit(color);
@@ -30,12 +31,12 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: 'dddc32b0904800092d45727e833181af32eb8766' }, h("div", { key: '293cbed8e9c62b5f409b7dcdca0df5de9d65b758', class: {
+        return (h(Host, { key: '2ead7cd530ce181856e5f582f086a22a1fe69390' }, h("div", { key: 'fcc75b267f36e271d50615bfde42a29c28aa2536', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
-                height: expandedHeight
-            } }, displayedColors.map(color => (h("div", { class: {
+                height: expandedHeight,
+            } }, displayedColors.map(color => (h("div", { tabIndex: 0, class: {
                 'color-container': true,
                 'selected': this.selectedColor === color,
             }, onClick: () => this.handleColorClick(color) }, h("kritzel-color", { value: color })))))));
@@ -67,6 +68,6 @@ function defineCustomElement() {
 }
 
 export { KritzelColorPalette as K, defineCustomElement as d };
-//# sourceMappingURL=p-BAPUTr3K.js.map
+//# sourceMappingURL=p-CsyM5q2M.js.map
 
-//# sourceMappingURL=p-BAPUTr3K.js.map
+//# sourceMappingURL=p-CsyM5q2M.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CsyM5q2M.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,m0BAAm0B;;MCOr1B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACtB,MAAM,GAAa,EAAE;IACJ,aAAa,GAAkB,IAAI;IACpD,UAAU,GAAY,KAAK;IAC3B,QAAQ,GAAY,KAAK;AAExB,IAAA,WAAW;AAEZ,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGtB,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,CAAC;QACtB,MAAM,SAAS,GAAG,EAAE;QACpB,MAAM,GAAG,GAAG,CAAC;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAC7D,QAAA,OAAO,CAAG,EAAA,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI;;IAG3D,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,cAAc;aACvB,EAAA,EAEA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,WACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,EAE3C,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EAAkB,CAAA,CACzC,CACP,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color-palette/kritzel-color-palette.css?tag=kritzel-color-palette&encapsulation=shadow","src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.color-grid {\r\n  width: 100%;\r\n  display: grid;\r\n  grid-template-columns: repeat(6, 32px);\r\n  gap: 8px;\r\n  justify-items: center;\r\n  overflow: hidden;\r\n  height: 40px;\r\n  transition: height 0.1s ease-in-out;\r\n}\r\n\r\n.color-grid.expanded {\r\n  height: 500px;\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}\r\n\r\n.color-container:focus-visible {\r\n  outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.color-container:hover {\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n\r\n.color-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-color-palette-selected-background-color);\r\n}\r\n\r\n\r\n","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color-palette',\r\n  styleUrl: 'kritzel-color-palette.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n  @Prop() colors: string[] = [];\r\n  @Prop({ mutable: true }) selectedColor: string | null = null;\r\n  @Prop() isExpanded: boolean = false;\r\n  @Prop() isOpaque: boolean = false;\r\n\r\n  @Event() colorChange: EventEmitter<string>;\r\n\r\n  private handleColorClick(color: string) {\r\n    this.selectedColor = color;\r\n    this.colorChange.emit(color);\r\n  }\r\n\r\n  private calculateHeight(): string {\r\n    const colorsPerRow = 6;\r\n    const rowHeight = 32;\r\n    const gap = 8;\r\n    const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n    return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n  }\r\n\r\n  render() {\r\n    const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n    const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={{\r\n            'color-grid': true,\r\n            'expanded': this.isExpanded,\r\n          }}\r\n          style={{\r\n            height: expandedHeight,\r\n          }}\r\n        >\r\n          {displayedColors.map(color => (\r\n            <div\r\n              tabIndex={0}\r\n              class={{\r\n                'color-container': true,\r\n                'selected': this.selectedColor === color,\r\n              }}\r\n              onClick={() => this.handleColorClick(color)}\r\n            >\r\n              <kritzel-color value={color}></kritzel-color>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-CvmWmUK9.js

@@ -0,0 +1,149 @@
+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-D_907-Wd.js';
+import { d as defineCustomElement$1 } from './p-CTvJDYFQ.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}";
+
+const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mainButtonClick = createEvent(this, "mainButtonClick");
+        this.itemSelect = createEvent(this, "itemSelect");
+        this.itemSave = createEvent(this, "itemSave");
+        this.itemCancel = createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = createEvent(this, "itemCloseChildMenu");
+        this.menuOpen = createEvent(this, "menuOpen");
+        this.menuClose = createEvent(this, "menuClose");
+    }
+    get host() { return this; }
+    buttonIcon = 'plus';
+    dropdownIcon = 'chevron-down';
+    items = [];
+    mainButtonDisabled = false;
+    menuButtonDisabled = false;
+    mainButtonClick;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    menuOpen;
+    menuClose;
+    isMenuOpen = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    anchorElement;
+    splitMenuButtonRef;
+    menuRef;
+    async open() {
+        if (this.isMenuOpen)
+            return;
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    }
+    async focusMenu() {
+        if (this.menuRef) {
+            await this.menuRef.setFocus();
+        }
+    }
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        this.mainButtonClick.emit();
+    };
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.isMenuOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu(event);
+        }
+    };
+    openMenu = (event) => {
+        event.stopPropagation();
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    };
+    closeMenu = () => {
+        this.isMenuOpen = false;
+        this.anchorElement = null;
+        this.splitMenuButtonRef?.blur();
+        this.menuClose.emit();
+    };
+    handleItemSelect = event => {
+        this.itemSelect.emit(event.detail);
+    };
+    handleItemSave = event => {
+        this.itemSave.emit(event.detail);
+    };
+    handleItemCancel = event => {
+        this.itemCancel.emit(event.detail);
+    };
+    handleItemToggleChildMenu = event => {
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleItemCloseChildMenu = event => {
+        this.itemCloseChildMenu.emit(event.detail);
+    };
+    render() {
+        return (h(Host, { key: '2521559224e78ed1984446320a1601e77ccf2843', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a924ad4590506cb5209ef9fa1babca5312ec0513', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '214565d158d4d3c06ad883559aa7bac2827a593f', name: this.buttonIcon })), h("div", { key: '2f7d189c46c08227c3006d226a0ee3065f241bf4', class: "split-divider" }), h("button", { key: '4d6e2e224e3719fe3685ee289af94680c120abf6', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'bc8176681dfedde9d13b9af561d8bdff8613098f', name: this.dropdownIcon })), h("kritzel-portal", { key: 'afb44cd208f52350cbc82e050d6dee0ba734391d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b28f04138daa8777e6c9b2aa7fa3b5f2f62fd914', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu }))));
+    }
+    static get style() { return kritzelSplitButtonCss; }
+}, [257, "kritzel-split-button", {
+        "buttonIcon": [1, "button-icon"],
+        "dropdownIcon": [1, "dropdown-icon"],
+        "items": [16],
+        "mainButtonDisabled": [4, "main-button-disabled"],
+        "menuButtonDisabled": [4, "menu-button-disabled"],
+        "isMenuOpen": [32],
+        "isTouchDevice": [32],
+        "anchorElement": [32],
+        "open": [64],
+        "focusMenu": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-split-button", "kritzel-icon", "kritzel-menu", "kritzel-menu-item", "kritzel-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-split-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelSplitButton);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelSplitButton as K, defineCustomElement as d };
+//# sourceMappingURL=p-CvmWmUK9.js.map
+
+//# sourceMappingURL=p-CvmWmUK9.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CvmWmUK9.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\r\n  splitMenuButtonRef: HTMLButtonElement;\r\n  menuRef: HTMLKritzelMenuElement;\r\n\r\n  @Method()\r\n  async open() {\r\n    if (this.isMenuOpen) return;\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n  }\r\n\r\n  @Method()\r\n  async focusMenu() {\r\n    if (this.menuRef) {\r\n      await this.menuRef.setFocus();\r\n    }\r\n  }\r\n\r\n  private handleButtonClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.mainButtonClick.emit();\r\n  };\r\n\r\n  private toggleMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu(event);\r\n    }\r\n  };\r\n\r\n  private openMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n  };\r\n\r\n  private closeMenu = () => {\r\n    this.isMenuOpen = false;\r\n    this.anchorElement = null;\r\n    this.splitMenuButtonRef?.blur();\r\n    this.menuClose.emit();\r\n  };\r\n\r\n  private handleItemSelect = event => {\r\n    this.itemSelect.emit(event.detail);\r\n  };\r\n\r\n  private handleItemSave = event => {\r\n    this.itemSave.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCancel = event => {\r\n    this.itemCancel.emit(event.detail);\r\n  };\r\n\r\n  private handleItemToggleChildMenu = event => {\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCloseChildMenu = event => {\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n          <kritzel-menu\r\n            ref={el => (this.menuRef = el)}\r\n            items={this.items}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleItemSave}\r\n            onItemCancel={this.handleItemCancel}\r\n            onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n            onClose={this.closeMenu}\r\n          ></kritzel-menu>\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-fyfT6A5K.js → p-DCx3703u.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BqrTPNyu.js';
-import { d as defineCustomElement$1 } from './p-BLmFBe2a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { d as defineCustomElement$1 } from './p-sq9jgfX0.js';
 
-const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
+const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:focus{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
 
 const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilityPanel extends H {
     constructor(registerHost) {
@@ -14,6 +14,9 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo = createEvent(this, "redo");
         this.delete = createEvent(this, "delete");
     }
+    undo;
+    redo;
+    delete;
     handleUndo(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -27,7 +30,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '134058928a840d11fdc39849b35f08b21840fc0c' }, h("button", { key: '8d80cb496983b0709c06bacb12ca6819789aa47d', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'c6733ef61ab6a272f80a580243fdd15063b8bf0c', name: "undo" })), h("button", { key: 'dc6147152bccd43ea54b9af20d019d305e550987', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '3ab8bced0f398a8d5f053cb0f388199fd2148bfc', name: "redo" })), h("div", { key: 'ebbfd25fb69faf2b669de20dc74a3dcabc01f489', class: "utility-separator" }), h("button", { key: 'd86caf8a7f2c2bc899b09871f555973137693eb9', class: "utility-button" }, h("kritzel-icon", { key: 'e1b4e9eef3d3ab2a2ddd1688818d4bcd2d7226c1', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '8109ccff01374c046d057021dfbcabdc632d829f' }, h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get style() { return kritzelUtilityPanelCss; }
 }, [257, "kritzel-utility-panel"]);
@@ -51,6 +54,6 @@ function defineCustomElement() {
 }
 
 export { KritzelUtilityPanel as K, defineCustomElement as d };
-//# sourceMappingURL=p-fyfT6A5K.js.map
+//# sourceMappingURL=p-DCx3703u.js.map
 
-//# sourceMappingURL=p-fyfT6A5K.js.map
+//# sourceMappingURL=p-DCx3703u.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DCx3703u.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mrBAAmrB;;MCOrsB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AACrB,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 12px;\r\n  border-top-right-radius: 12px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:focus {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event() undo: EventEmitter<void>;\r\n  @Event() redo: EventEmitter<void>;\r\n  @Event() delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}