npm - kritzel-stencil - Versions diffs - 0.0.165 → 0.0.167 - Mend

kritzel-stencil 0.0.165 → 0.0.167

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js.map CHANGED Viewed

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

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import { Host, h } from "@stencil/core";
 import { KritzelHTMLHelper } from "../../../helpers/html.helper";
-const MOBILE_BREAKPOINT = 768;
 export class KritzelTooltip {
     host;
     isVisible = false;
     anchorElement;
     arrowSize = 8;
     offsetY = 24;
+    showArrow = true;
     tooltipClosed;
     positionX = 0;
+    positionY = 0;
     arrowOffset = '0px';
-    isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
@@ -20,7 +20,6 @@ export class KritzelTooltip {
         }
     }
     handleWindowResize() {
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
     }
     async focusContent() {
@@ -33,7 +32,6 @@ export class KritzelTooltip {
         this.focusSlottedContent();
     }
     componentWillLoad() {
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
     }
     componentWillUpdate() {
@@ -51,41 +49,49 @@ export class KritzelTooltip {
         if (this.isVisible && this.anchorElement) {
             const anchorRect = this.anchorElement.getBoundingClientRect();
             const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
-            if (!this.isMobileView) {
-                this.positionX = anchorRect.left + anchorRect.width / 2;
-                this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
-            }
-            else {
-                const tooltipRect = tooltipContent.getBoundingClientRect();
-                this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;
-                this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;
-            }
+            const tooltipRect = tooltipContent?.getBoundingClientRect();
+            const tooltipWidth = tooltipRect?.width || 0;
+            const viewportPadding = 12; // Minimum distance from viewport edges
+            const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+            // Step 1: Try to center the tooltip above the anchor
+            let idealLeft = anchorCenterX - tooltipWidth / 2;
+            // Step 2: Clamp to viewport bounds
+            const minLeft = viewportPadding;
+            const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;
+            // Apply clamping - adjust if tooltip would overflow
+            this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
+            // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
+            this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
+            // Step 4: Calculate arrow offset to point to the center of the anchor element
+            // Arrow should point to anchorCenterX, relative to where tooltip is positioned
+            const arrowPositionInTooltip = anchorCenterX - this.positionX - this.arrowSize;
+            this.arrowOffset = `${arrowPositionInTooltip}px`;
         }
     }
     render() {
-        return (h(Host, { key: '8f78668b3d266d7a0eb140d01626998534acc252', style: {
+        return (h(Host, { key: '468ba81a0a9265f04725e23b19dd879c1287e473', 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: '77b526b1687d41654b32b6f14d3e0400908b0a79', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'fcd088608c091ff877b1e58425a0905c84c9999a' }), h("div", { key: '002913b582b5c034e7af722c433fbe79d0c32150', class: "tooltip-arrow-wrapper", style: {
+                left: `${this.positionX}px`,
+                bottom: `${this.positionY}px`,
+            } }, h("div", { key: 'c6867197197f4e80e93bc63f0e7dd5dfbb19a523', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'a4df46360e349cbf68af08c0cc3297dd8d141b3c' }), this.showArrow && (h("div", { key: '9a7c9011b3286179f592c36afb2cdaf927838930', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: 'fc834bf34b464ac039ffb58e47485b76f8ced03e', class: "tooltip-arrow", style: {
+            } }, h("div", { key: 'd215175c6cb66c72b1fcb30eafc6af073946ad87', 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: '65939011ae607a144f8217cf3aa5bdd2ff0f88fc', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: '65cd5bf2f0de3897794e7ba4e77d0866aa5724e5', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
                 backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',
                 bottom: `${this.arrowSize * 2}px`,
-            } })))));
+            } }))))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -182,14 +188,34 @@ export class KritzelTooltip {
                 "reflect": false,
                 "attribute": "offset-y",
                 "defaultValue": "24"
+            },
+            "showArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-arrow",
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
             "positionX": {},
-            "arrowOffset": {},
-            "isMobileView": {}
+            "positionY": {},
+            "arrowOffset": {}
         };
     }
     static get events() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;~~AAEjE~~,MAAM,~~iBAAiB,GAAG,GAAG,CAAC;AAO9B,MAAM,~~OAAO,cAAc;IACd,IAAI,CAAc;IAErB,SAAS,GAAY,KAAK,CAAC;IAC3B,aAAa,CAAc;IAC3B,SAAS,GAAW,CAAC,CAAC;IACtB,OAAO,GAAW,EAAE,CAAC;~~IAEpB~~,aAAa,CAAqB;IAElC,SAAS,GAAW,CAAC,CAAC;IACtB,~~WAAW~~,GAAW,~~KAAK~~,CAAC;~~IAC5B~~,~~YAAY~~,~~GAAY~~,~~MAAM~~,CAAC~~,UAAU,GAAG,iBAAiB,CAAC~~;~~IAGvE~~,kBAAkB,CAAC,KAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAG,OAAO;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,~~YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB,CAAC;QAC1D,IAAI,CAAC,~~yBAAyB,EAAE,CAAC;IACnC,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5E,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjC,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,~~YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB,CAAC;QAC1D,IAAI,CAAC,~~yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,MAAM,gBAAgB,GAAG,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;QACxD,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChC,MAAM,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;YACxD,YAAY,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,yBAAyB;QAC/B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACzC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;YAC9D,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAgB,CAAC;~~YAE9F~~,~~IAAI~~,~~CAAC~~,~~IAAI~~,CAAC,YAAY,EAAE,CAAC;~~gBACvB~~,~~IAAI~~,CAAC,~~SAAS~~,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;~~gBACxD~~,IAAI,~~CAAC~~,~~WAAW,~~GAAG,~~QAAQ~~,~~EAAE~~,~~OAAO~~,~~IAAI~~,CAAC,~~SAAS,KAAK,~~CAAC;~~YAC1D~~,~~CAAC~~;~~iBAAM~~,CAAC;~~gBACN~~,MAAM,~~WAAW~~,GAAG,~~cAAc~~,CAAC,~~qBAAqB~~,~~EAAE~~,CAAC;~~gBAC3D~~,IAAI,CAAC,SAAS,GAAG,~~UAAU~~,CAAC,~~IAAI,~~GAAG,~~UAAU,~~CAAC,~~KAAK~~,~~GAAG~~,CAAC,GAAG,~~WAAW,~~CAAC,~~KAAK~~,~~GAAG~~,CAAC,CAAC;~~gBAChF~~,IAAI,CAAC,~~WAAW~~,GAAG,GAAG,UAAU,CAAC,~~IAAI~~,GAAG,~~UAAU~~,CAAC,~~KAAK~~,GAAG,~~CAAC~~,GAAG,~~WAAW~~,CAAC,~~IAAI~~,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC~~;YACvG~~,CAAC;~~QACH~~,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,sDAAsD;gBAClE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;gBACjD,IAAI,EAAE,~~CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,~~GAAG,IAAI,CAAC,SAAS,IAAI~~,CAAC,CAAC,CAAC,KAAK~~;~~gBACxD~~,~~YAAY~~,EAAE,GAAG,IAAI,CAAC,~~OAAO,GAAG,IAAI,CAAC,~~SAAS,IAAI;~~aACnD~~;YAED,4DAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;gBACpE,8DAAa;~~gBACb~~,4DACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;wBACL,QAAQ,EAAE,OAAO;wBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;wBACtB,MAAM,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;qBACnC;oBAED,4DACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;4BACP,UAAU,EAAE,GAAG,IAAI,CAAC,SAAS,sBAAsB;4BACnD,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,sBAAsB;4BACpD,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,oEAAoE;4BAChG,MAAM,EAAE,2CAA2C;yBAClD,GACI;oBACP,4DACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE;4BACP,QAAQ,EAAE,UAAU;4BACpB,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;4BAChC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI;4BAC7B,eAAe,EAAE,2DAA2D;4BAC5E,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;yBAChC,GACI,CACH,~~CACF~~,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\~~nconst MOBILE_BREAKPOINT = 768;\r\~~n~~\r\n~~@Component({\r\n tag: 'kritzel-tooltip',\r\n styleUrl: 'kritzel-tooltip.css',\r\n shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() isVisible: boolean = false;\r\n @Prop() anchorElement: HTMLElement;\r\n @Prop() arrowSize: number = 8;\r\n @Prop() offsetY: number = 24;\r\n\r\n @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n @State() positionX: number = 0;\r\n @State() ~~arrowOffset~~: ~~string~~ = ~~'0px'~~;\r\n @State() ~~isMobileView~~: ~~boolean~~ = ~~window.innerWidth < MOBILE_BREAKPOINT~~;\r\n\r\n @Listen('click', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n if( !this.isVisible ) return;\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.tooltipClosed.emit();\r\n }\r\n }\r\n\r\n @Listen('resize', { target: 'window' })\r\n handleWindowResize() {\r\n this.~~isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n this.~~calculateAdjustedPosition();\r\n }\r\n\r\n @Method()\r\n async focusContent() {\r\n const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n if (focusableElements.length > 0) {\r\n focusableElements[0].focus();\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.focusSlottedContent();\r\n }\r\n\r\n componentWillLoad() {\r\n this.~~isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n this.~~calculateAdjustedPosition();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n private focusSlottedContent() {\r\n const slot = this.host.shadowRoot?.querySelector('slot');\r\n const assignedElements = slot?.assignedElements() \|\| [];\r\n if (assignedElements.length > 0) {\r\n const firstElement = assignedElements[0] as HTMLElement;\r\n firstElement.focus();\r\n }\r\n }\r\n\r\n private calculateAdjustedPosition() {\r\n if (this.isVisible && this.anchorElement) {\r\n const anchorRect = this.anchorElement.getBoundingClientRect();\r\n const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n\r\n if ~~(!this.isMobileView)~~ {\r\n ~~this.positionX~~ = anchorRect.left + anchorRect.width / 2;\r\n ~~this.arrowOffset~~ = ~~`calc(${50}%~~ - ~~${this.arrowSize}px)`;~~ \r\n } ~~else~~ {\r\n const ~~tooltipRect~~ = ~~tooltipContent~~.~~getBoundingClientRect()~~;\r\n this.positionX = ~~anchorRect~~.~~left~~ ~~+ anchorRect~~.~~width~~ / 2 - ~~tooltipRect.width~~ / ~~2;\~~r\n this.~~arrowOffset~~ = ~~`${~~anchorRect.~~left~~ + ~~anchorRect~~.~~width~~ / 2 - ~~tooltipRect~~.~~left~~ - this.arrowSize~~}px`;\~~r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{\r\n position: 'fixed',\r\n zIndex: '9999',\r\n transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n visibility: this.isVisible ? 'visible' : 'hidden',\r\n left: ~~!this.isMobileView ?~~ `${this.positionX}px~~` : '50%',\~~r\n ~~marginBottom~~: `${this.~~offsetY + this.arrowSize~~}px`,\r\n }}\r\n >\r\n <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n <slot></slot>\r\n <div\r\n class=\"tooltip-arrow-wrapper\"\r\n style={{\r\n position: 'fixed',\r\n left: this.arrowOffset,\r\n bottom: `-${this.arrowSize * 2}px`,\r\n }}\r\n >\r\n <div\r\n class=\"tooltip-arrow\"\r\n style={{\r\n borderLeft: `${this.arrowSize}px solid transparent`,\r\n borderRight: `${this.arrowSize}px solid transparent`,\r\n borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\r\n filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\r\n }}\r\n ></div>\r\n <div\r\n class=\"tooltip-arrow-rect\"\r\n style={{\r\n position: 'relative',\r\n width: `${this.arrowSize * 2}px`,\r\n height: `${this.arrowSize}px`,\r\n backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\r\n bottom: `${this.arrowSize * 2}px`,\r\n }}\r\n ></div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-tooltip.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAOjE,MAAM,OAAO,cAAc;IACd,IAAI,CAAc;IAErB,SAAS,GAAY,KAAK,CAAC;IAC3B,aAAa,CAAc;IAC3B,SAAS,GAAW,CAAC,CAAC;IACtB,OAAO,GAAW,EAAE,CAAC;IACrB,SAAS,GAAY,IAAI,CAAC;IAEzB,aAAa,CAAqB;IAElC,SAAS,GAAW,CAAC,CAAC;IACtB,SAAS,GAAW,CAAC,CAAC;IACtB,WAAW,GAAW,KAAK,CAAC;IAGrC,kBAAkB,CAAC,KAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAG,OAAO;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5E,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjC,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEO,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,MAAM,gBAAgB,GAAG,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;QACxD,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChC,MAAM,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;YACxD,YAAY,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,yBAAyB;QAC/B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACzC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;YAC9D,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAgB,CAAC;YAC9F,MAAM,WAAW,GAAG,cAAc,EAAE,qBAAqB,EAAE,CAAC;YAC5D,MAAM,YAAY,GAAG,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;YAE7C,MAAM,eAAe,GAAG,EAAE,CAAC,CAAC,uCAAuC;YACnE,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;YAE7D,qDAAqD;YACrD,IAAI,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,CAAC,CAAC;YAEjD,mCAAmC;YACnC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,YAAY,GAAG,eAAe,CAAC;YAEnE,oDAAoD;YACpD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;YAEjE,8FAA8F;YAC9F,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;YAEpE,8EAA8E;YAC9E,+EAA+E;YAC/E,MAAM,sBAAsB,GAAG,aAAa,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/E,IAAI,CAAC,WAAW,GAAG,GAAG,sBAAsB,IAAI,CAAC;QACnD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,sDAAsD;gBAClE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;gBACjD,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI;gBAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI;aAC9B;YAED,4DAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;gBACpE,8DAAa;gBACZ,IAAI,CAAC,SAAS,IAAI,CACjB,4DACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;wBACL,QAAQ,EAAE,OAAO;wBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;wBACtB,MAAM,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;qBACnC;oBAED,4DACE,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;4BACP,UAAU,EAAE,GAAG,IAAI,CAAC,SAAS,sBAAsB;4BACnD,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,sBAAsB;4BACpD,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,oEAAoE;4BAChG,MAAM,EAAE,2CAA2C;yBAClD,GACI;oBACP,4DACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE;4BACP,QAAQ,EAAE,UAAU;4BACpB,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;4BAChC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI;4BAC7B,eAAe,EAAE,2DAA2D;4BAC5E,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI;yBAChC,GACI,CACH,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-tooltip',\r\n styleUrl: 'kritzel-tooltip.css',\r\n shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() isVisible: boolean = false;\r\n @Prop() anchorElement: HTMLElement;\r\n @Prop() arrowSize: number = 8;\r\n @Prop() offsetY: number = 24;\r\n @Prop() showArrow: boolean = true;\r\n\r\n @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n @State() positionX: number = 0;\r\n @State() positionY: number = 0;\r\n @State() arrowOffset: string = '0px';\r\n\r\n @Listen('click', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n if( !this.isVisible ) return;\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.tooltipClosed.emit();\r\n }\r\n }\r\n\r\n @Listen('resize', { target: 'window' })\r\n handleWindowResize() {\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n @Method()\r\n async focusContent() {\r\n const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n if (focusableElements.length > 0) {\r\n focusableElements[0].focus();\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.focusSlottedContent();\r\n }\r\n\r\n componentWillLoad() {\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.calculateAdjustedPosition();\r\n }\r\n\r\n private focusSlottedContent() {\r\n const slot = this.host.shadowRoot?.querySelector('slot');\r\n const assignedElements = slot?.assignedElements() \|\| [];\r\n if (assignedElements.length > 0) {\r\n const firstElement = assignedElements[0] as HTMLElement;\r\n firstElement.focus();\r\n }\r\n }\r\n\r\n private calculateAdjustedPosition() {\r\n if (this.isVisible && this.anchorElement) {\r\n const anchorRect = this.anchorElement.getBoundingClientRect();\r\n const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n const tooltipRect = tooltipContent?.getBoundingClientRect();\r\n const tooltipWidth = tooltipRect?.width \|\| 0;\r\n \r\n const viewportPadding = 12; // Minimum distance from viewport edges\r\n const anchorCenterX = anchorRect.left + anchorRect.width / 2;\r\n \r\n // Step 1: Try to center the tooltip above the anchor\r\n let idealLeft = anchorCenterX - tooltipWidth / 2;\r\n \r\n // Step 2: Clamp to viewport bounds\r\n const minLeft = viewportPadding;\r\n const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;\r\n \r\n // Apply clamping - adjust if tooltip would overflow\r\n this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));\r\n \r\n // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)\r\n this.positionY = window.innerHeight - anchorRect.top + this.offsetY;\r\n \r\n // Step 4: Calculate arrow offset to point to the center of the anchor element\r\n // Arrow should point to anchorCenterX, relative to where tooltip is positioned\r\n const arrowPositionInTooltip = anchorCenterX - this.positionX - this.arrowSize;\r\n this.arrowOffset = `${arrowPositionInTooltip}px`;\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.positionX}px`,\r\n bottom: `${this.positionY}px`,\r\n }}\r\n >\r\n <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n <slot></slot>\r\n {this.showArrow && (\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 )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css CHANGED Viewed

@@ -140,20 +140,10 @@
   background-color: rgba(255, 255, 255, 0.15);
 }
-/* Submenu styles */
-.kritzel-submenu {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
+/* Submenu content styles (positioned by kritzel-tooltip) */
+.kritzel-submenu-content {
   display: flex;
   flex-direction: column;
-  background: var(--kritzel-controls-background-color, #ffffff);
-  border-radius: 12px;
-  padding: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid #ebebeb;
-  z-index: 10001;
   min-width: 140px;
 }
@@ -257,9 +247,5 @@
 }
 kritzel-tooltip {
-  position: fixed;
-  bottom: 56px;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 10001;
 }

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js CHANGED Viewed

@@ -20,10 +20,6 @@ export class KritzelControls {
             return;
         }
         this.isTooltipVisible = false;
-        // Close submenu when clicking outside
-        if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {
-            this.openSubMenuControl = null;
-        }
     }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
@@ -146,13 +142,13 @@ export class KritzelControls {
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
             this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: '34a8a81224f1714a30a0d6e03fb81ed031fe36a0', class: {
+        return (h(Host, { key: '542415492107a5aa516602f53cbb830ee58ae320', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8ddfe7b4872d59b08b0561dbd61c67b9c245dcc9', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '38ea0136db9c81b38753a88915b98433f75dc9d4', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '370229830b9a6c0ae5704d9fb0ce35d130fcf049', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '30843843f99eeb50cdbe2dd22472c112bfe952f4', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 // Check if this control has sub-options (split-button)
                 if (control.subOptions?.length) {
@@ -162,10 +158,13 @@ export class KritzelControls {
                     return (h("div", { class: {
                             'kritzel-control-split': true,
                             'selected': isActive,
-                        }, key: control.name }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                        }, key: control.name, ref: el => {
+                            if (el)
+                                control._anchorRef = el;
+                        } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
                             'kritzel-control-dropdown': true,
                             'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), isSubMenuOpen && (h("div", { class: "kritzel-submenu" }, control.subOptions.map(option => (h("button", { class: {
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, showArrow: false, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
                             'kritzel-submenu-item': true,
                             'active': option.id === selectedSubOption?.id,
                         }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAGzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAWvE,MAAM,OAAO,eAAe;IACf,IAAI,CAAe;IAEtB,QAAQ,GAA4B,EAAE,CAAC;IACtB,aAAa,GAAiC,IAAI,CAAC;IACpE,qBAAqB,GAAY,IAAI,CAAC;IACtC,SAAS,GAAqB,IAAI,CAAC;IAElC,eAAe,CAAqB;IAEpC,WAAW,GAAsB,IAAI,CAAC;IACtC,gBAAgB,GAAY,KAAK,CAAC;IAClC,aAAa,GAAY,oBAAoB,CAAC,aAAa,EAAE,CAAC;IAC9D,kBAAkB,GAAyC,IAAI,GAAG,EAAE,CAAC;IACrE,kBAAkB,GAAiC,IAAI,CAAC;IAGjE,mBAAmB,CAAC,KAAiB;QACnC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE5C,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAE9B,sCAAsC;QACtC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACvF,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QACjC,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,KAAK;QACjB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,sBAAsB,CAAC,KAAkB;QAC7C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;IAC5F,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;IAED,aAAa,GAAoC,IAAI,CAAC;IACtD,UAAU,GAAqC,IAAI,CAAC;IAEpD,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAuB,CAAC;IACrD,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAwB,CAAC;IACtD,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC9B,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,MAAM,cAAc,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACnD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAE7E,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChC,CAAC,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;YAC3E,CAAC;YAED,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC/C,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAuB,CAAC,CAAC;gBACrE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;YACzB,CAAC;YAED,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACxB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE,CAAC;oBAC9B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;gBACvB,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC,CAAC;gBAClF,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,kBAAkB,CAAC,OAA8B;QAC7D,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;QAE7B,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACvC,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAuB,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAC/C,IAAG,IAAI,CAAC,gBAAgB,EAAC,CAAC;YACxB,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;QAC/B,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC;QAClC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAAC,KAAkB;QAC/C,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAE,IAAI,CAAC,aAAqB,CAAC,IAAI,CAAC,CAAC;IAC9E,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACK,oBAAoB,CAAC,OAA8B;QACzD,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM;YAAE,OAAO,SAAS,CAAC;QAClD,OAAO,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAED;;OAEG;IACK,aAAa,CAAC,KAAiB,EAAE,OAA8B;QACrE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;YACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC;QACpC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,eAAe,CAAC,OAA8B,EAAE,MAA+B;QAC3F,sEAAsE;QACtE,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;QAEjC,uDAAuD;QACvD,IAAI,OAAO,CAAC,IAAI,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO,CAAC,IAAY,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5D,CAAC;QAED,oBAAoB;QACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAE/B,wBAAwB;QACxB,MAAM,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,YAAY,gBAAgB;YACpD,IAAI,CAAC,aAAa,EAAE,IAAI,YAAY,eAAe,CAAC;QAExE,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,aAAa;aAC3B;YAEA,IAAI,CAAC,qBAAqB,IAAI,CAC7B,8EACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,MAAM;oBACd,IAAI,EAAE,MAAM;iBACb,EACD,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,EACxC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,EACxC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,GACrB,CAC1B;YAED,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBAC3B,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;oBAC5B,uDAAuD;oBACvD,IAAI,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC;wBAC/B,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;wBAC7D,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;wBAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;wBAErE,OAAO,CACL,WACE,KAAK,EAAE;gCACL,uBAAuB,EAAE,IAAI;gCAC7B,UAAU,EAAE,QAAQ;6BACrB,EACD,GAAG,EAAE,OAAO,CAAC,IAAI;4BAEjB,cACE,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAC/C,KAAK,EAAE,iBAAiB,EAAE,KAAK;gCAE/B,oBAAc,IAAI,EAAE,iBAAiB,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,GAAiB,CACrE;4BACT,cACE,KAAK,EAAE;oCACL,0BAA0B,EAAE,IAAI;oCAChC,SAAS,EAAE,QAAQ;iCACpB,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,gBACnC,mBAAmB,mBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCAE3B,oBAAc,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAiB,CACpD;4BAER,aAAa,IAAI,CAChB,WAAK,KAAK,EAAC,iBAAiB,IACzB,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAChC,cACE,KAAK,EAAE;oCACL,sBAAsB,EAAE,IAAI;oCAC5B,QAAQ,EAAE,MAAM,CAAC,EAAE,KAAK,iBAAiB,EAAE,EAAE;iCAC9C,EACD,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC;gCAEpD,oBAAc,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;gCAC1D,gBAAO,MAAM,CAAC,KAAK,CAAQ,CACpB,CACV,CAAC,CACE,CACP,CACG,CACP,CAAC;oBACJ,CAAC;oBAED,wCAAwC;oBACxC,OAAO,CACL,cACE,KAAK,EAAE;4BACL,iBAAiB,EAAE,IAAI;4BACvB,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,KAAK,OAAO,EAAE,IAAI;yBACvD,EACD,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,OAAO,CAAC;wBAErD,oBAAc,IAAI,EAAE,OAAO,CAAC,IAAI,GAAiB,CAC1C,CACV,CAAC;gBACJ,CAAC;gBAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC/F,OAAO,CACL,WACE,KAAK,EAAE;4BACL,0BAA0B,EAAE,IAAI;4BAChC,SAAS,EAAE,WAAW;yBACvB,EACD,GAAG,EAAE,OAAO,CAAC,IAAI;wBAEjB,uBACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,2BAA2B,CAAgB,EAC9F,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE;4BAEjD,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE;gCAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,OAAO,IAAI,CACtC,oCAA8B,IAAI,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,GAAiC,CACvJ;gCAEA,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,IAAI,CACrC,mCAA6B,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,GAAgC,CACpJ,CACG,CACU;wBAElB,WACE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EACjD,SAAS,EAAE,KAAK,CAAC,EAAE;gCACjB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oCAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC,KAAY,CAAC,CAAC;gCACzC,CAAC;4BACH,CAAC,EACD,KAAK,EAAE;gCACL,MAAM,EAAE,SAAS;6BAClB;4BAEA,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,gBAAgB,IAAI,CACtD,WAAK,KAAK,EAAC,iBAAiB;gCAC1B,qBACE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,KAAK,EACxC,IAAI,EAAE,IAAI,CAAC,qBAAqB,EAAE,IAAI,EACtC,KAAK,EAAE;wCACL,YAAY,EAAE,KAAK;wCACnB,MAAM,EAAE,MAAM;qCACf,GACc,CACb,CACP;4BAEA,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,eAAe,IAAI,CACrD,WAAK,KAAK,EAAC,gBAAgB;gCACzB,oBACE,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,EACjD,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,EACzC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAC7B,CACZ,CACP,CACG,CACF,CACP,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n tag: 'kritzel-controls',\r\n styleUrl: 'kritzel-controls.css',\r\n shadow: true,\r\n assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop() controls: KritzelToolbarControl[] = [];\r\n @Prop({ mutable: true }) activeControl: KritzelToolbarControl \| null = null;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n @Prop() undoState: KritzelUndoState = null;\r\n\r\n @Event() isControlsReady: EventEmitter<void>;\r\n\r\n @State() firstConfig: ToolConfig \| null = null;\r\n @State() isTooltipVisible: boolean = false;\r\n @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n @State() openSubMenuControl: KritzelToolbarControl \| null = null;\r\n\r\n @Listen('click', { target: 'document' })\r\n handleDocumentClick(event: MouseEvent) {\r\n const element = event.target as HTMLElement;\r\n\r\n if (!this.kritzelEngine \|\| element.closest('.kritzel-tooltip')) {\r\n return;\r\n }\r\n\r\n this.isTooltipVisible = false;\r\n\r\n // Close submenu when clicking outside\r\n if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {\r\n this.openSubMenuControl = null;\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.closeTooltip();\r\n this.openSubMenuControl = null;\r\n this.kritzelEngine?.enable();\r\n }\r\n }\r\n\r\n @Listen('activeToolChange', { target: 'document' })\r\n async handleActiveToolChange(event: CustomEvent) {\r\n this.activeControl = this.controls.find(control => control.tool === event.detail) \|\| null;\r\n }\r\n\r\n @Method()\r\n async closeTooltip() {\r\n this.isTooltipVisible = false;\r\n }\r\n\r\n kritzelEngine: HTMLKritzelEngineElement \| null = null;\r\n tooltipRef: HTMLKritzelTooltipElement \| null = null;\r\n\r\n get activeToolAsTextTool() {\r\n return this.activeControl?.tool as KritzelTextTool;\r\n }\r\n\r\n get activeToolAsBrushTool() {\r\n return this.activeControl?.tool as KritzelBrushTool;\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n await this.initializeTools();\r\n this.isControlsReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngine) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async initializeTools() {\r\n for (const c of this.controls) {\r\n if (c.type === 'tool' && c.tool) {\r\n c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n }\r\n\r\n if (c.type === 'tool' && c.isDefault && c.tool) {\r\n await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n this.activeControl = c;\r\n }\r\n\r\n if (c.type === 'config') {\r\n if (this.firstConfig === null) {\r\n this.firstConfig = c;\r\n } else {\r\n console.warn('Only one config control is allowed. The first one will be used.');\r\n }\r\n }\r\n }\r\n }\r\n\r\n private async handleControlClick(control: KritzelToolbarControl) {\r\n this.activeControl = control;\r\n\r\n if (this.activeControl.type === 'tool') {\r\n await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n }\r\n }\r\n\r\n private handleConfigClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.isTooltipVisible = !this.isTooltipVisible;\r\n if(this.isTooltipVisible){\r\n this.kritzelEngine?.disable();\r\n } else {\r\n this.kritzelEngine?.enable();\r\n }\r\n\r\n setTimeout(() => {\r\n this.tooltipRef?.focusContent();\r\n }, 100);\r\n }\r\n\r\n private async handleToolChange(event: CustomEvent) {\r\n this.activeControl = { ...this.activeControl, tool: event.detail };\r\n await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n }\r\n\r\n private handleTooltipClosed() {\r\n this.isTooltipVisible = false;\r\n this.kritzelEngine?.enable();\r\n }\r\n\r\n /*\r\n Get the currently selected sub-option for a control.\r\n * Returns the first sub-option as default if none is selected.\r\n /\r\n private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption \| undefined {\r\n if (!control.subOptions?.length) return undefined;\r\n return this.selectedSubOptions.get(control.name) \|\| control.subOptions[0];\r\n }\r\n\r\n /\r\n Toggle the submenu for a split-button control\r\n /\r\n private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n event.stopPropagation();\r\n if (this.openSubMenuControl?.name === control.name) {\r\n this.openSubMenuControl = null;\r\n } else {\r\n this.openSubMenuControl = control;\r\n }\r\n }\r\n\r\n /\r\n Select a sub-option and update the tool property\r\n */\r\n private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n // Update the selected sub-options map (create new Map for reactivity)\r\n const newMap = new Map(this.selectedSubOptions);\r\n newMap.set(control.name, option);\r\n this.selectedSubOptions = newMap;\r\n\r\n // Update the tool property if the tool is instantiated\r\n if (control.tool && typeof control.tool !== 'function') {\r\n (control.tool as any)[option.toolProperty] = option.value;\r\n }\r\n\r\n // Close the submenu\r\n this.openSubMenuControl = null;\r\n\r\n // Activate this control\r\n await this.handleControlClick(control);\r\n }\r\n\r\n render() {\r\n const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool \|\| \r\n this.activeControl?.tool instanceof KritzelTextTool;\r\n\r\n return (\r\n <Host\r\n class={{\r\n mobile: this.isTouchDevice,\r\n }}\r\n >\r\n {this.isUtilityPanelVisible && (\r\n <kritzel-utility-panel\r\n style={{\r\n position: 'absolute',\r\n bottom: '56px',\r\n left: '12px',\r\n }}\r\n undoState={this.undoState}\r\n onUndo={() => this.kritzelEngine?.undo()}\r\n onRedo={() => this.kritzelEngine?.redo()}\r\n onDelete={() => this.kritzelEngine?.delete()}\r\n ></kritzel-utility-panel>\r\n )}\r\n\r\n <div class=\"kritzel-controls\">\r\n {this.controls.map(control => {\r\n if (control.type === 'tool') {\r\n // Check if this control has sub-options (split-button)\r\n if (control.subOptions?.length) {\r\n const selectedSubOption = this.getSelectedSubOption(control);\r\n const isActive = this.activeControl?.name === control.name;\r\n const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n return (\r\n <div\r\n class={{\r\n 'kritzel-control-split': true,\r\n 'selected': isActive,\r\n }}\r\n key={control.name}\r\n >\r\n <button\r\n class=\"kritzel-control-main\"\r\n onClick={() => this.handleControlClick(control)}\r\n title={selectedSubOption?.label}\r\n >\r\n <kritzel-icon name={selectedSubOption?.icon \|\| control.icon}></kritzel-icon>\r\n </button>\r\n <button\r\n class={{\r\n 'kritzel-control-dropdown': true,\r\n 'visible': isActive,\r\n }}\r\n onClick={(e) => this.toggleSubMenu(e, control)}\r\n aria-label=\"Select shape type\"\r\n aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n tabIndex={isActive ? 0 : -1}\r\n >\r\n <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n </button>\r\n\r\n {isSubMenuOpen && (\r\n <div class=\"kritzel-submenu\">\r\n {control.subOptions.map(option => (\r\n <button\r\n class={{\r\n 'kritzel-submenu-item': true,\r\n 'active': option.id === selectedSubOption?.id,\r\n }}\r\n key={option.id}\r\n onClick={() => this.selectSubOption(control, option)}\r\n >\r\n <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n <span>{option.label}</span>\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Regular tool control (no sub-options)\r\n return (\r\n <button\r\n class={{\r\n 'kritzel-control': true,\r\n 'selected': this.activeControl?.name === control?.name,\r\n }}\r\n key={control.name}\r\n onClick={_event => this.handleControlClick?.(control)}\r\n >\r\n <kritzel-icon name={control.icon}></kritzel-icon>\r\n </button>\r\n );\r\n }\r\n\r\n if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div \r\n class={{\r\n 'kritzel-config-container': true,\r\n 'visible': hasConfigUI,\r\n }}\r\n key={control.name}\r\n >\r\n <kritzel-tooltip\r\n ref={el => (this.tooltipRef = el)}\r\n isVisible={this.isTooltipVisible}\r\n anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n onTooltipClosed={() => this.handleTooltipClosed()}\r\n >\r\n <div style={{ width: '294px', height: '100%' }}>\r\n {this.activeControl.name === 'brush' && (\r\n <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n )}\r\n\r\n {this.activeControl.name === 'text' && (\r\n <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n )}\r\n </div>\r\n </kritzel-tooltip>\r\n\r\n <div\r\n tabIndex={hasConfigUI ? 0 : -1}\r\n class=\"kritzel-config\"\r\n onClick={event => this.handleConfigClick?.(event)}\r\n onKeyDown={event => {\r\n if (event.key === 'Enter') {\r\n this.handleConfigClick?.(event as any);\r\n }\r\n }}\r\n style={{\r\n cursor: 'pointer',\r\n }}\r\n >\r\n {this.activeControl.tool instanceof KritzelBrushTool && (\r\n <div class=\"color-container\">\r\n <kritzel-color\r\n value={this.activeToolAsBrushTool?.color}\r\n size={this.activeToolAsBrushTool?.size}\r\n style={{\r\n borderRadius: '50%',\r\n border: 'none',\r\n }}\r\n ></kritzel-color>\r\n </div>\r\n )}\r\n\r\n {this.activeControl.tool instanceof KritzelTextTool && (\r\n <div class=\"font-container\">\r\n <kritzel-font\r\n fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n size={this.activeToolAsTextTool?.fontSize}\r\n color={this.activeToolAsTextTool?.fontColor}\r\n ></kritzel-font>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n })}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAGzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAWvE,MAAM,OAAO,eAAe;IACf,IAAI,CAAe;IAEtB,QAAQ,GAA4B,EAAE,CAAC;IACtB,aAAa,GAAiC,IAAI,CAAC;IACpE,qBAAqB,GAAY,IAAI,CAAC;IACtC,SAAS,GAAqB,IAAI,CAAC;IAElC,eAAe,CAAqB;IAEpC,WAAW,GAAsB,IAAI,CAAC;IACtC,gBAAgB,GAAY,KAAK,CAAC;IAClC,aAAa,GAAY,oBAAoB,CAAC,aAAa,EAAE,CAAC;IAC9D,kBAAkB,GAAyC,IAAI,GAAG,EAAE,CAAC;IACrE,kBAAkB,GAAiC,IAAI,CAAC;IAGjE,mBAAmB,CAAC,KAAiB;QACnC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE5C,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;IAGD,aAAa,CAAC,KAAK;QACjB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,sBAAsB,CAAC,KAAkB;QAC7C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;IAC5F,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;IAED,aAAa,GAAoC,IAAI,CAAC;IACtD,UAAU,GAAqC,IAAI,CAAC;IAEpD,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAuB,CAAC;IACrD,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAwB,CAAC;IACtD,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC9B,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,MAAM,cAAc,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACnD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAE7E,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChC,CAAC,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;YAC3E,CAAC;YAED,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC/C,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAuB,CAAC,CAAC;gBACrE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;YACzB,CAAC;YAED,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACxB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE,CAAC;oBAC9B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;gBACvB,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC,CAAC;gBAClF,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,kBAAkB,CAAC,OAA8B;QAC7D,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;QAE7B,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACvC,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAuB,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAC/C,IAAG,IAAI,CAAC,gBAAgB,EAAC,CAAC;YACxB,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;QAC/B,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC;QAClC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAAC,KAAkB;QAC/C,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAE,IAAI,CAAC,aAAqB,CAAC,IAAI,CAAC,CAAC;IAC9E,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACK,oBAAoB,CAAC,OAA8B;QACzD,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM;YAAE,OAAO,SAAS,CAAC;QAClD,OAAO,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAED;;OAEG;IACK,aAAa,CAAC,KAAiB,EAAE,OAA8B;QACrE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;YACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC;QACpC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,eAAe,CAAC,OAA8B,EAAE,MAA+B;QAC3F,sEAAsE;QACtE,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;QAEjC,uDAAuD;QACvD,IAAI,OAAO,CAAC,IAAI,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO,CAAC,IAAY,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5D,CAAC;QAED,oBAAoB;QACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAE/B,wBAAwB;QACxB,MAAM,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,YAAY,gBAAgB;YACpD,IAAI,CAAC,aAAa,EAAE,IAAI,YAAY,eAAe,CAAC;QAExE,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,aAAa;aAC3B;YAEA,IAAI,CAAC,qBAAqB,IAAI,CAC7B,8EACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,MAAM;oBACd,IAAI,EAAE,MAAM;iBACb,EACD,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,EACxC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,EACxC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,GACrB,CAC1B;YAED,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBAC3B,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;oBAC5B,uDAAuD;oBACvD,IAAI,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC;wBAC/B,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;wBAC7D,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;wBAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,kBAAkB,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;wBAEvE,OAAO,CACH,WACE,KAAK,EAAE;gCACL,uBAAuB,EAAE,IAAI;gCAC7B,UAAU,EAAE,QAAQ;6BACrB,EACD,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,GAAG,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE;gCAAG,OAAe,CAAC,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC;4BAExD,cACE,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAC/C,KAAK,EAAE,iBAAiB,EAAE,KAAK;gCAE/B,oBAAc,IAAI,EAAE,iBAAiB,EAAE,IAAI,IAAI,OAAO,CAAC,IAAI,GAAiB,CACrE;4BACT,cACE,KAAK,EAAE;oCACL,0BAA0B,EAAE,IAAI;oCAChC,SAAS,EAAE,QAAQ;iCACpB,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,gBACnC,mBAAmB,mBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCAE3B,oBAAc,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAiB,CACpD;4BAET,uBACE,SAAS,EAAE,aAAa,EACxB,aAAa,EAAG,OAAe,CAAC,UAAU,EAC1C,SAAS,EAAE,KAAK,EAChB,eAAe,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC,CAAC;gCAE1D,WAAK,KAAK,EAAC,yBAAyB,IACjC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAChC,cACE,KAAK,EAAE;wCACL,sBAAsB,EAAE,IAAI;wCAC5B,QAAQ,EAAE,MAAM,CAAC,EAAE,KAAK,iBAAiB,EAAE,EAAE;qCAC9C,EACD,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC;oCAEpD,oBAAc,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;oCAC1D,gBAAO,MAAM,CAAC,KAAK,CAAQ,CACpB,CACV,CAAC,CACE,CACU,CACd,CACP,CAAC;oBACJ,CAAC;oBAED,wCAAwC;oBACxC,OAAO,CACL,cACE,KAAK,EAAE;4BACL,iBAAiB,EAAE,IAAI;4BACvB,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,KAAK,OAAO,EAAE,IAAI;yBACvD,EACD,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,OAAO,CAAC;wBAErD,oBAAc,IAAI,EAAE,OAAO,CAAC,IAAI,GAAiB,CAC1C,CACV,CAAC;gBACJ,CAAC;gBAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC/F,OAAO,CACL,WACE,KAAK,EAAE;4BACL,0BAA0B,EAAE,IAAI;4BAChC,SAAS,EAAE,WAAW;yBACvB,EACD,GAAG,EAAE,OAAO,CAAC,IAAI;wBAEjB,uBACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,2BAA2B,CAAgB,EAC9F,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE;4BAEjD,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE;gCAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,OAAO,IAAI,CACtC,oCAA8B,IAAI,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,GAAiC,CACvJ;gCAEA,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,IAAI,CACrC,mCAA6B,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,GAAgC,CACpJ,CACG,CACU;wBAElB,WACE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EACjD,SAAS,EAAE,KAAK,CAAC,EAAE;gCACjB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oCAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC,KAAY,CAAC,CAAC;gCACzC,CAAC;4BACH,CAAC,EACD,KAAK,EAAE;gCACL,MAAM,EAAE,SAAS;6BAClB;4BAEA,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,gBAAgB,IAAI,CACtD,WAAK,KAAK,EAAC,iBAAiB;gCAC1B,qBACE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,KAAK,EACxC,IAAI,EAAE,IAAI,CAAC,qBAAqB,EAAE,IAAI,EACtC,KAAK,EAAE;wCACL,YAAY,EAAE,KAAK;wCACnB,MAAM,EAAE,MAAM;qCACf,GACc,CACb,CACP;4BAEA,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,eAAe,IAAI,CACrD,WAAK,KAAK,EAAC,gBAAgB;gCACzB,oBACE,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,EACjD,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,EACzC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAC7B,CACZ,CACP,CACG,CACF,CACP,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n tag: 'kritzel-controls',\r\n styleUrl: 'kritzel-controls.css',\r\n shadow: true,\r\n assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop() controls: KritzelToolbarControl[] = [];\r\n @Prop({ mutable: true }) activeControl: KritzelToolbarControl \| null = null;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n @Prop() undoState: KritzelUndoState = null;\r\n\r\n @Event() isControlsReady: EventEmitter<void>;\r\n\r\n @State() firstConfig: ToolConfig \| null = null;\r\n @State() isTooltipVisible: boolean = false;\r\n @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n @State() openSubMenuControl: KritzelToolbarControl \| null = null;\r\n\r\n @Listen('click', { target: 'document' })\r\n handleDocumentClick(event: MouseEvent) {\r\n const element = event.target as HTMLElement;\r\n\r\n if (!this.kritzelEngine \|\| element.closest('.kritzel-tooltip')) {\r\n return;\r\n }\r\n\r\n this.isTooltipVisible = false;\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.closeTooltip();\r\n this.openSubMenuControl = null;\r\n this.kritzelEngine?.enable();\r\n }\r\n }\r\n\r\n @Listen('activeToolChange', { target: 'document' })\r\n async handleActiveToolChange(event: CustomEvent) {\r\n this.activeControl = this.controls.find(control => control.tool === event.detail) \|\| null;\r\n }\r\n\r\n @Method()\r\n async closeTooltip() {\r\n this.isTooltipVisible = false;\r\n }\r\n\r\n kritzelEngine: HTMLKritzelEngineElement \| null = null;\r\n tooltipRef: HTMLKritzelTooltipElement \| null = null;\r\n\r\n get activeToolAsTextTool() {\r\n return this.activeControl?.tool as KritzelTextTool;\r\n }\r\n\r\n get activeToolAsBrushTool() {\r\n return this.activeControl?.tool as KritzelBrushTool;\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n await this.initializeTools();\r\n this.isControlsReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngine) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async initializeTools() {\r\n for (const c of this.controls) {\r\n if (c.type === 'tool' && c.tool) {\r\n c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n }\r\n\r\n if (c.type === 'tool' && c.isDefault && c.tool) {\r\n await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n this.activeControl = c;\r\n }\r\n\r\n if (c.type === 'config') {\r\n if (this.firstConfig === null) {\r\n this.firstConfig = c;\r\n } else {\r\n console.warn('Only one config control is allowed. The first one will be used.');\r\n }\r\n }\r\n }\r\n }\r\n\r\n private async handleControlClick(control: KritzelToolbarControl) {\r\n this.activeControl = control;\r\n\r\n if (this.activeControl.type === 'tool') {\r\n await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n }\r\n }\r\n\r\n private handleConfigClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.isTooltipVisible = !this.isTooltipVisible;\r\n if(this.isTooltipVisible){\r\n this.kritzelEngine?.disable();\r\n } else {\r\n this.kritzelEngine?.enable();\r\n }\r\n\r\n setTimeout(() => {\r\n this.tooltipRef?.focusContent();\r\n }, 100);\r\n }\r\n\r\n private async handleToolChange(event: CustomEvent) {\r\n this.activeControl = { ...this.activeControl, tool: event.detail };\r\n await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n }\r\n\r\n private handleTooltipClosed() {\r\n this.isTooltipVisible = false;\r\n this.kritzelEngine?.enable();\r\n }\r\n\r\n /*\r\n Get the currently selected sub-option for a control.\r\n * Returns the first sub-option as default if none is selected.\r\n /\r\n private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption \| undefined {\r\n if (!control.subOptions?.length) return undefined;\r\n return this.selectedSubOptions.get(control.name) \|\| control.subOptions[0];\r\n }\r\n\r\n /\r\n Toggle the submenu for a split-button control\r\n /\r\n private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n event.stopPropagation();\r\n if (this.openSubMenuControl?.name === control.name) {\r\n this.openSubMenuControl = null;\r\n } else {\r\n this.openSubMenuControl = control;\r\n }\r\n }\r\n\r\n /\r\n Select a sub-option and update the tool property\r\n */\r\n private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n // Update the selected sub-options map (create new Map for reactivity)\r\n const newMap = new Map(this.selectedSubOptions);\r\n newMap.set(control.name, option);\r\n this.selectedSubOptions = newMap;\r\n\r\n // Update the tool property if the tool is instantiated\r\n if (control.tool && typeof control.tool !== 'function') {\r\n (control.tool as any)[option.toolProperty] = option.value;\r\n }\r\n\r\n // Close the submenu\r\n this.openSubMenuControl = null;\r\n\r\n // Activate this control\r\n await this.handleControlClick(control);\r\n }\r\n\r\n render() {\r\n const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool \|\| \r\n this.activeControl?.tool instanceof KritzelTextTool;\r\n\r\n return (\r\n <Host\r\n class={{\r\n mobile: this.isTouchDevice,\r\n }}\r\n >\r\n {this.isUtilityPanelVisible && (\r\n <kritzel-utility-panel\r\n style={{\r\n position: 'absolute',\r\n bottom: '56px',\r\n left: '12px',\r\n }}\r\n undoState={this.undoState}\r\n onUndo={() => this.kritzelEngine?.undo()}\r\n onRedo={() => this.kritzelEngine?.redo()}\r\n onDelete={() => this.kritzelEngine?.delete()}\r\n ></kritzel-utility-panel>\r\n )}\r\n\r\n <div class=\"kritzel-controls\">\r\n {this.controls.map(control => {\r\n if (control.type === 'tool') {\r\n // Check if this control has sub-options (split-button)\r\n if (control.subOptions?.length) {\r\n const selectedSubOption = this.getSelectedSubOption(control);\r\n const isActive = this.activeControl?.name === control.name;\r\n const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n return (\r\n <div\r\n class={{\r\n 'kritzel-control-split': true,\r\n 'selected': isActive,\r\n }}\r\n key={control.name}\r\n ref={el => { if (el) (control as any)._anchorRef = el; }}\r\n >\r\n <button\r\n class=\"kritzel-control-main\"\r\n onClick={() => this.handleControlClick(control)}\r\n title={selectedSubOption?.label}\r\n >\r\n <kritzel-icon name={selectedSubOption?.icon \|\| control.icon}></kritzel-icon>\r\n </button>\r\n <button\r\n class={{\r\n 'kritzel-control-dropdown': true,\r\n 'visible': isActive,\r\n }}\r\n onClick={(e) => this.toggleSubMenu(e, control)}\r\n aria-label=\"Select shape type\"\r\n aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n tabIndex={isActive ? 0 : -1}\r\n >\r\n <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n </button>\r\n\r\n <kritzel-tooltip\r\n isVisible={isSubMenuOpen}\r\n anchorElement={(control as any)._anchorRef}\r\n showArrow={false}\r\n onTooltipClosed={() => { this.openSubMenuControl = null; }}\r\n >\r\n <div class=\"kritzel-submenu-content\">\r\n {control.subOptions.map(option => (\r\n <button\r\n class={{\r\n 'kritzel-submenu-item': true,\r\n 'active': option.id === selectedSubOption?.id,\r\n }}\r\n key={option.id}\r\n onClick={() => this.selectSubOption(control, option)}\r\n >\r\n <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n <span>{option.label}</span>\r\n </button>\r\n ))}\r\n </div>\r\n </kritzel-tooltip>\r\n </div>\r\n );\r\n }\r\n\r\n // Regular tool control (no sub-options)\r\n return (\r\n <button\r\n class={{\r\n 'kritzel-control': true,\r\n 'selected': this.activeControl?.name === control?.name,\r\n }}\r\n key={control.name}\r\n onClick={_event => this.handleControlClick?.(control)}\r\n >\r\n <kritzel-icon name={control.icon}></kritzel-icon>\r\n </button>\r\n );\r\n }\r\n\r\n if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div \r\n class={{\r\n 'kritzel-config-container': true,\r\n 'visible': hasConfigUI,\r\n }}\r\n key={control.name}\r\n >\r\n <kritzel-tooltip\r\n ref={el => (this.tooltipRef = el)}\r\n isVisible={this.isTooltipVisible}\r\n anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n onTooltipClosed={() => this.handleTooltipClosed()}\r\n >\r\n <div style={{ width: '294px', height: '100%' }}>\r\n {this.activeControl.name === 'brush' && (\r\n <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n )}\r\n\r\n {this.activeControl.name === 'text' && (\r\n <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n )}\r\n </div>\r\n </kritzel-tooltip>\r\n\r\n <div\r\n tabIndex={hasConfigUI ? 0 : -1}\r\n class=\"kritzel-config\"\r\n onClick={event => this.handleConfigClick?.(event)}\r\n onKeyDown={event => {\r\n if (event.key === 'Enter') {\r\n this.handleConfigClick?.(event as any);\r\n }\r\n }}\r\n style={{\r\n cursor: 'pointer',\r\n }}\r\n >\r\n {this.activeControl.tool instanceof KritzelBrushTool && (\r\n <div class=\"color-container\">\r\n <kritzel-color\r\n value={this.activeToolAsBrushTool?.color}\r\n size={this.activeToolAsBrushTool?.size}\r\n style={{\r\n borderRadius: '50%',\r\n border: 'none',\r\n }}\r\n ></kritzel-color>\r\n </div>\r\n )}\r\n\r\n {this.activeControl.tool instanceof KritzelTextTool && (\r\n <div class=\"font-container\">\r\n <kritzel-font\r\n fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n size={this.activeToolAsTextTool?.fontSize}\r\n color={this.activeToolAsTextTool?.fontColor}\r\n ></kritzel-font>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n })}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/components/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CwkUrTy1.js';
-export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './p-Dz2XHHqa.js';
-import { w as writeVarUint, a as writeVarUint8Array, t as toUint8Array, r as readVarUint, b as readVarUint8Array, e as encodeStateAsUpdate, c as applyUpdate, d as encodeStateVector, f as createEncoder, g as createDecoder, s as setIfUndefined, h as create, i as fromBase64, v as varStorage, j as toBase64, o as onChange, k as createUint8ArrayFromArrayBuffer, l as offChange, m as readVarString, O as Observable, n as floor, p as getUnixTime, q as equalityDeep, u as writeVarString, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './p-BDX0tuVV.js';
-export { M as IndexedDBSyncProvider, P as KritzelAnchorManager, N as KritzelAppStateMap, J as KritzelCursorHelper, G as KritzelEraserTool, K as KritzelImage, I as KritzelImageTool, E as KritzelLine, F as KritzelLineTool, L as KritzelSelectionTool } from './p-BDX0tuVV.js';
+export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './p-Bwv1dxAB.js';
+import { w as writeVarUint, a as writeVarUint8Array, t as toUint8Array, r as readVarUint, b as readVarUint8Array, e as encodeStateAsUpdate, c as applyUpdate, d as encodeStateVector, f as createEncoder, g as createDecoder, s as setIfUndefined, h as create, i as fromBase64, v as varStorage, j as toBase64, o as onChange, k as createUint8ArrayFromArrayBuffer, l as offChange, m as readVarString, O as Observable, n as floor, p as getUnixTime, q as equalityDeep, u as writeVarString, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './p-CIXaR1a8.js';
+export { M as IndexedDBSyncProvider, P as KritzelAnchorManager, N as KritzelAppStateMap, J as KritzelCursorHelper, G as KritzelEraserTool, K as KritzelImage, I as KritzelImageTool, E as KritzelLine, F as KritzelLineTool, L as KritzelSelectionTool } from './p-CIXaR1a8.js';
 export { K as KritzelWorkspace } from './p-n789Y3S-.js';
 export { D as DEFAULT_BRUSH_CONFIG, b as DEFAULT_LINE_TOOL_CONFIG, a as DEFAULT_TEXT_CONFIG, KritzelEditor, defineCustomElement as defineCustomElementKritzelEditor } from './kritzel-editor.js';
 export { KritzelBrushStyle, defineCustomElement as defineCustomElementKritzelBrushStyle } from './kritzel-brush-style.js';

package/dist/components/kritzel-controls.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-tp96UZ0l.js';
+import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-xcQV8l_c.js';
 const KritzelControls = KritzelControls$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-editor.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$a } from './p-Cv4BGNPb.js';
-import { S as ShapeType, Q as ABSOLUTE_SCALE_MAX, R as ABSOLUTE_SCALE_MIN, L as KritzelSelectionTool, F as KritzelLineTool, G as KritzelEraserTool, T as KritzelShapeTool, I as KritzelImageTool, U as defineCustomElement$e } from './p-BDX0tuVV.js';
-import { b as KritzelBrushTool, c as KritzelTextTool, d as KritzelKeyboardHelper } from './p-Dz2XHHqa.js';
+import { S as ShapeType, Q as ABSOLUTE_SCALE_MAX, R as ABSOLUTE_SCALE_MIN, L as KritzelSelectionTool, F as KritzelLineTool, G as KritzelEraserTool, T as KritzelShapeTool, I as KritzelImageTool, U as defineCustomElement$e } from './p-CIXaR1a8.js';
+import { b as KritzelBrushTool, c as KritzelTextTool, d as KritzelKeyboardHelper } from './p-Bwv1dxAB.js';
 import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$m } from './p-LAsVgL2e.js';
@@ -9,19 +9,19 @@ import { d as defineCustomElement$l } from './p-Brd9SxWS.js';
 import { d as defineCustomElement$k } from './p-D1YAsWrL.js';
 import { d as defineCustomElement$j } from './p-D8L0t-Ro.js';
 import { d as defineCustomElement$i } from './p-5OECjGHq.js';
-import { d as defineCustomElement$h } from './p-tp96UZ0l.js';
+import { d as defineCustomElement$h } from './p-xcQV8l_c.js';
 import { d as defineCustomElement$g } from './p-B_3OZeom.js';
 import { d as defineCustomElement$f } from './p-BdwB-S9G.js';
 import { d as defineCustomElement$d } from './p-Ck4lGnmt.js';
 import { d as defineCustomElement$c } from './p-CFH6XRL5.js';
 import { d as defineCustomElement$b } from './p-B6r22FSC.js';
-import { d as defineCustomElement$8, a as defineCustomElement$9 } from './p-DguzZn_x.js';
-import { d as defineCustomElement$7 } from './p-OFrACpZf.js';
-import { d as defineCustomElement$6 } from './p-BuS7MM1j.js';
+import { d as defineCustomElement$8, a as defineCustomElement$9 } from './p-BoazmhlG.js';
+import { d as defineCustomElement$7 } from './p-aeYt0bPO.js';
+import { d as defineCustomElement$6 } from './p-BmdYFhLx.js';
 import { d as defineCustomElement$5 } from './p-CRGwaUcp.js';
-import { d as defineCustomElement$4 } from './p-9Fzdviju.js';
+import { d as defineCustomElement$4 } from './p-C1S1zPH-.js';
 import { d as defineCustomElement$3 } from './p-BSBMBjhq.js';
-import { d as defineCustomElement$2 } from './p-I3iPEDpx.js';
+import { d as defineCustomElement$2 } from './p-CiM-IPaD.js';
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',

package/dist/components/kritzel-engine.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { V as KritzelEngine$1, U as defineCustomElement$1 } from './p-BDX0tuVV.js';
+import { V as KritzelEngine$1, U as defineCustomElement$1 } from './p-CIXaR1a8.js';
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-menu-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { b as KritzelMenuItem$1, d as defineCustomElement$1 } from './p-DguzZn_x.js';
+import { b as KritzelMenuItem$1, d as defineCustomElement$1 } from './p-BoazmhlG.js';
 const KritzelMenuItem = KritzelMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelMenu$1, a as defineCustomElement$1 } from './p-DguzZn_x.js';
+import { K as KritzelMenu$1, a as defineCustomElement$1 } from './p-BoazmhlG.js';
 const KritzelMenu = KritzelMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-portal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-OFrACpZf.js';
+import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-aeYt0bPO.js';
 const KritzelPortal = KritzelPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-split-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-BuS7MM1j.js';
+import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-BmdYFhLx.js';
 const KritzelSplitButton = KritzelSplitButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-tooltip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-9Fzdviju.js';
+import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-C1S1zPH-.js';
 const KritzelTooltip = KritzelTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-workspace-manager.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-I3iPEDpx.js';
+import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-CiM-IPaD.js';
 const KritzelWorkspaceManager = KritzelWorkspaceManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-BuS7MM1j.js → p-BmdYFhLx.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$4 } from './p-Cv4BGNPb.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-DguzZn_x.js';
-import { d as defineCustomElement$1 } from './p-OFrACpZf.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BoazmhlG.js';
+import { d as defineCustomElement$1 } from './p-aeYt0bPO.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:var(--kritzel-pointer-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{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}";
@@ -152,6 +152,6 @@ function defineCustomElement() {
 }
 export { KritzelSplitButton as K, defineCustomElement as d };
-//# sourceMappingURL=p-BuS7MM1j.js.map
+//# sourceMappingURL=p-BmdYFhLx.js.map
-//# sourceMappingURL=p-BuS7MM1j.js.map
+//# sourceMappingURL=p-BmdYFhLx.js.map