kritzel-stencil 0.3.34 → 0.3.35

package/dist/components/kritzel-engine.js

@@ -1 +1 @@
-import{n as o,m as s}from"./p-vLVZEJXX.js";const m=o,p=s;export{m as KritzelEngine,p as defineCustomElement}
+import{n as o,m as s}from"./p-D9BugXUi.js";const m=o,p=s;export{m as KritzelEngine,p as defineCustomElement}

package/dist/components/kritzel-export.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DYLBjStF.js";const t=o,p=s;export{t as KritzelExport,p as defineCustomElement}
+import{K as o,d as p}from"./p-DPpPd5GI.js";const s=o,r=p;export{s as KritzelExport,r as defineCustomElement}

package/dist/components/kritzel-font-size.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-Cb5YwXbC.js";const p=o,r=s;export{p as KritzelFontSize,r as defineCustomElement}
+import{K as o,d as s}from"./p-8xkoVMfO.js";const p=o,r=s;export{p as KritzelFontSize,r as defineCustomElement}

package/dist/components/kritzel-font.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-BX-nQAyH.js";const p=o,r=s;export{p as KritzelFont,r as defineCustomElement}
+import{K as o,d as s}from"./p-DgnK50xO.js";const p=o,r=s;export{p as KritzelFont,r as defineCustomElement}

package/dist/components/kritzel-input.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-Bg0xIZiR.js";const p=o,r=s;export{p as KritzelInput,r as defineCustomElement}
+import{K as o,d as s}from"./p-DSOc0eIT.js";const p=o,r=s;export{p as KritzelInput,r as defineCustomElement}

package/dist/components/kritzel-loading-overlay.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface KritzelLoadingOverlay extends Components.KritzelLoadingOverlay, HTMLElement {}
+export const KritzelLoadingOverlay: {
+    prototype: KritzelLoadingOverlay;
+    new (): KritzelLoadingOverlay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/kritzel-loading-overlay.js

@@ -0,0 +1 @@
+import{K as s,d as o}from"./p-B_6RNask.js";const a=s,p=o;export{a as KritzelLoadingOverlay,p as defineCustomElement}

package/dist/components/kritzel-login-dialog.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CZQz_mul.js";const m=o,p=s;export{m as KritzelLoginDialog,p as defineCustomElement}
+import{K as s,d as o}from"./p-Ds-P2bYH.js";const p=s,r=o;export{p as KritzelLoginDialog,r as defineCustomElement}

package/dist/components/kritzel-master-detail.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-D0v9WP5w.js";const p=o,r=s;export{p as KritzelMasterDetail,r as defineCustomElement}
+import{K as o,d as s}from"./p-CVhcOiEA.js";const p=o,r=s;export{p as KritzelMasterDetail,r as defineCustomElement}

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

@@ -1 +1 @@
-import{b as s,d as o}from"./p-BntMEYss.js";const t=s,p=o;export{t as KritzelMenuItem,p as defineCustomElement}
+import{b as s,d as o}from"./p-BKOsmXB5.js";const m=s,p=o;export{m as KritzelMenuItem,p as defineCustomElement}

package/dist/components/kritzel-menu.js

@@ -1 +1 @@
-import{K as s,a as o}from"./p-BntMEYss.js";const t=s,a=o;export{t as KritzelMenu,a as defineCustomElement}
+import{K as s,a as o}from"./p-BKOsmXB5.js";const a=s,m=o;export{a as KritzelMenu,m as defineCustomElement}

package/dist/components/kritzel-more-menu.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-meY80XnF.js";const m=o,p=s;export{m as KritzelMoreMenu,p as defineCustomElement}
+import{K as o,d as s}from"./p-jzuGPW5o.js";const p=o,r=s;export{p as KritzelMoreMenu,r as defineCustomElement}

package/dist/components/kritzel-numeric-input.js

@@ -1 +1 @@
-import{K as o,d as r}from"./p-BrAeYciD.js";const s=o,p=r;export{s as KritzelNumericInput,p as defineCustomElement}
+import{K as o,d as s}from"./p-DIMNEOTW.js";const p=o,r=s;export{p as KritzelNumericInput,r as defineCustomElement}

package/dist/components/kritzel-opacity-slider.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CdkNxxut.js";const t=o,p=s;export{t as KritzelOpacitySlider,p as defineCustomElement}
+import{K as s,d as o}from"./p-BzrxIesp.js";const p=s,r=o;export{p as KritzelOpacitySlider,r as defineCustomElement}

package/dist/components/kritzel-portal.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DSd5xTAH.js";const p=o,r=s;export{p as KritzelPortal,r as defineCustomElement}
+import{K as o,d as s}from"./p-BLOPBDUF.js";const p=o,r=s;export{p as KritzelPortal,r as defineCustomElement}

package/dist/components/kritzel-settings.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DZ8yfhhf.js";const f=o,p=s;export{f as KritzelSettings,p as defineCustomElement}
+import{K as s,d as o}from"./p-sLHApVnR.js";const p=s,r=o;export{p as KritzelSettings,r as defineCustomElement}

package/dist/components/kritzel-share-dialog.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DJVRW9So.js";const p=o,r=s;export{p as KritzelShareDialog,r as defineCustomElement}
+import{K as o,d as p}from"./p-DEqpY4K2.js";const s=o,r=p;export{s as KritzelShareDialog,r as defineCustomElement}

package/dist/components/kritzel-slide-toggle.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-D0RYktBV.js";const t=o,p=s;export{t as KritzelSlideToggle,p as defineCustomElement}
+import{K as o,d as s}from"./p-BzJEwFtn.js";const t=o,p=s;export{t as KritzelSlideToggle,p as defineCustomElement}

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

@@ -1 +1 @@
-import{K as o,d as s}from"./p-M9m9-OEY.js";const m=o,p=s;export{m as KritzelSplitButton,p as defineCustomElement}
+import{K as o,d as s}from"./p-D8TOEhPY.js";const p=o,r=s;export{p as KritzelSplitButton,r as defineCustomElement}

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

@@ -1 +1 @@
-import{K as o,d as s}from"./p-7ZnANv7C.js";const p=o,r=s;export{p as KritzelStrokeSize,r as defineCustomElement}
+import{K as o,d as s}from"./p-Bm_BWQa4.js";const a=o,m=s;export{a as KritzelStrokeSize,m as defineCustomElement}

package/dist/components/kritzel-tool-config.js

@@ -1 +1 @@
-import{a as o,d as s}from"./p-BUc0GFPj.js";const a=o,p=s;export{a as KritzelToolConfig,p as defineCustomElement}
+import{a as o,d as s}from"./p-BlozPPKi.js";const a=o,p=s;export{a as KritzelToolConfig,p as defineCustomElement}

package/dist/components/kritzel-tooltip.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DPlEzPKO.js";const p=o,r=s;export{p as KritzelTooltip,r as defineCustomElement}
+import{K as o,d as s}from"./p-DZcwchEg.js";const c=o,p=s;export{c as KritzelTooltip,p as defineCustomElement}

package/dist/components/kritzel-utility-panel.js

@@ -1 +1 @@
-import{K as o,d as p}from"./p-8p1DKytO.js";const s=o,t=p;export{s as KritzelUtilityPanel,t as defineCustomElement}
+import{K as o,d as s}from"./p-Bd_yPNfg.js";const p=o,r=s;export{p as KritzelUtilityPanel,r as defineCustomElement}

package/dist/components/kritzel-watermark.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CC0J_kEP.js";const p=o,r=s;export{p as KritzelWatermark,r as defineCustomElement}
+import{K as o,d as s}from"./p-CwuGA058.js";const p=o,r=s;export{p as KritzelWatermark,r as defineCustomElement}

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

@@ -1 +1 @@
-import{K as o,d as s}from"./p-BixEMVtW.js";const t=o,p=s;export{t as KritzelWorkspaceManager,p as defineCustomElement}
+import{K as o,d as s}from"./p-BulDbBWB.js";const p=o,r=s;export{p as KritzelWorkspaceManager,r as defineCustomElement}

package/dist/components/kritzel-zoom-panel.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CfS-5J9k.js";const p=o,r=s;export{p as KritzelZoomPanel,r as defineCustomElement}
+import{K as p,d as o}from"./p-CMphprF1.js";const r=p,s=o;export{r as KritzelZoomPanel,s as defineCustomElement}

package/dist/components/{p-wl9BhN6s.js → p-1nG2hxfJ.js}

@@ -1 +1 @@
-import{p as e,H as t,c as o,h as r,d as s,t as i}from"./p-B43upypT.js";import{a as l}from"./p-BmyTdQGy.js";import{d as a}from"./p-BcB97x3U.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colorChange=o(this,"colorChange")}colors=[];selectedColor=null;isExpanded=!1;isOpaque=!1;opacity=1;theme;colorChange;handleColorClick(e){this.selectedColor=e,this.colorChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t))}calculateHeight(){const e=Math.ceil(this.colors.length/6);return 32*e+8*(e-1)+"px"}areColorsEqual(e,t){return!!e&&e.light===t.light&&e.dark===t.dark}render(){const e=this.isExpanded?this.colors:this.colors.slice(0,6),t=this.isExpanded?this.calculateHeight():"32px";return r(s,{key:"6d003ec5b92f586532782144c25ca5a733741f20"},r("div",{key:"031838b45da4916aa91d87c066ac950cfe3a1ddc",class:{"color-grid":!0,expanded:this.isExpanded},style:{height:t}},e.map((e=>r("div",{tabIndex:0,class:{"color-container":!0,selected:this.areColorsEqual(this.selectedColor,e)},onClick:()=>this.handleColorClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},r("kritzel-color",{value:l.applyOpacity(e,this.opacity,this.theme),theme:this.theme}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}"}},[513,"kritzel-color-palette",{colors:[16],selectedColor:[1040],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"],opacity:[2],theme:[1]}]);function n(){"undefined"!=typeof customElements&&["kritzel-color-palette","kritzel-color"].forEach((e=>{switch(e){case"kritzel-color-palette":customElements.get(i(e))||customElements.define(i(e),c);break;case"kritzel-color":customElements.get(i(e))||a()}}))}export{c as K,n as d}
+import{p as e,H as t,c as o,h as r,d as s,t as i}from"./p-B43upypT.js";import{a as l}from"./p-BmyTdQGy.js";import{d as a}from"./p-zd7zXld8.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colorChange=o(this,"colorChange")}colors=[];selectedColor=null;isExpanded=!1;isOpaque=!1;opacity=1;theme;colorChange;handleColorClick(e){this.selectedColor=e,this.colorChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t))}calculateHeight(){const e=Math.ceil(this.colors.length/6);return 32*e+8*(e-1)+"px"}areColorsEqual(e,t){return!!e&&e.light===t.light&&e.dark===t.dark}render(){const e=this.isExpanded?this.colors:this.colors.slice(0,6),t=this.isExpanded?this.calculateHeight():"32px";return r(s,{key:"16aa405a43b3943473e577c5a6ab86adf4ae1ba9"},r("div",{key:"f65bb286889700dc1f0e8d84ff59721071b7b73a",class:{"color-grid":!0,expanded:this.isExpanded},style:{height:t}},e.map((e=>r("div",{tabIndex:0,class:{"color-container":!0,selected:this.areColorsEqual(this.selectedColor,e)},onClick:()=>this.handleColorClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},r("kritzel-color",{value:l.applyOpacity(e,this.opacity,this.theme),theme:this.theme}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}"}},[513,"kritzel-color-palette",{colors:[16],selectedColor:[1040],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"],opacity:[2],theme:[1]}]);function n(){"undefined"!=typeof customElements&&["kritzel-color-palette","kritzel-color"].forEach((e=>{switch(e){case"kritzel-color-palette":customElements.get(i(e))||customElements.define(i(e),c);break;case"kritzel-color":customElements.get(i(e))||a()}}))}export{c as K,n as d}

package/dist/components/{p-Cb5YwXbC.js → p-8xkoVMfO.js}

@@ -1 +1 @@
-import{p as e,H as t,c as s,h as i,d as r,t as o}from"./p-B43upypT.js";import{d as n}from"./p-BX-nQAyH.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=s(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleSizeClick(t))}render(){return i(r,{key:"a314e990b56cb4e819c4d83a139016b1658606b8"},(this.sizes??[]).map((e=>i("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},i("kritzel-font",{fontFamily:this.fontFamily,size:e,color:"var(--kritzel-global-text-primary)"})))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}"}},[513,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-size","kritzel-font"].forEach((e=>{switch(e){case"kritzel-font-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-font":customElements.get(o(e))||n()}}))}export{l as K,a as d}
+import{p as e,H as t,c as s,h as i,d as r,t as o}from"./p-B43upypT.js";import{d as n}from"./p-DgnK50xO.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=s(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleSizeClick(t))}render(){return i(r,{key:"56eb19367abe312bac3b626cfcae3b1ff6e90d21"},(this.sizes??[]).map((e=>i("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},i("kritzel-font",{fontFamily:this.fontFamily,size:e,color:"var(--kritzel-global-text-primary)"})))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}"}},[513,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-size","kritzel-font"].forEach((e=>{switch(e){case"kritzel-font-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-font":customElements.get(o(e))||n()}}))}export{l as K,a as d}

package/dist/components/{p-BeHVCJ7n.js → p-BH4AasB1.js}

@@ -1 +1 @@
-import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-B43upypT.js";import{f as n,e as s}from"./p-BVu03tNB.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-BUc0GFPj.js";import{a as h}from"./p-BmyTdQGy.js";import{d as p}from"./p-BcB97x3U.js";import{d as k}from"./p-wl9BhN6s.js";import{d as f}from"./p-Df3BwVGy.js";import{d as b}from"./p-BX-nQAyH.js";import{d as u}from"./p-JhOYwUOj.js";import{d as g}from"./p-Cb5YwXbC.js";import{d as z}from"./p-CdR76C4L.js";import{d as m}from"./p-CXpv9Rxe.js";import{d as v}from"./p-CdkNxxut.js";import{d as y}from"./p-BFYtCsZu.js";import{d as x}from"./p-7ZnANv7C.js";import{d as w}from"./p-DPlEzPKO.js";import{d as C}from"./p-8p1DKytO.js";const j=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}visible=!0;controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme="light";terms={};isControlsReady;firstConfig=null;isTouchDevice=a.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;internalControls=[];handleActiveToolChangeBound=this.handleActiveToolChange.bind(this);handleSelectionChangeBound=this.handleSelectionChange.bind(this);handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.internalControls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async onControlsChange(){this.kritzelEngine&&await this.initializeTools()}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=c.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:h.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof s&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}componentDidRender(){this.updateScrollIndicators()}disconnectedCallback(){this.kritzelEngine&&(this.kritzelEngine.removeEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound))}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.");this.kritzelEngine.addEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}async initializeTools(){let t=!1;const o=this.controls.map((t=>({...t})));for(const e of o){if("tool"===e.type&&e.tool){let t=e.tool;"function"!=typeof t&&(t=t.constructor);const o=await this.kritzelEngine.registerTool(e.name,t,e.config);o&&(e.tool=o)}"tool"===e.type&&e.isDefault&&e.tool&&(await this.kritzelEngine.changeActiveTool(e.tool),this.activeControl=e,this.updateDisplayValues(e.tool),t=!0),"config"===e.type&&(null===this.firstConfig?this.firstConfig=e:console.warn("Only one config control is allowed. The first one will be used."))}if(this.internalControls=o,!t){const t=this.internalControls.find((t=>"tool"===t.type&&t.tool));t&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool))}}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.closeTooltip(),await this.handleControlClick(t)}render(){const t=null!==(this.activeControl?.tool?c.getToolConfig(this.activeControl.tool):null),o=this.internalControls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.internalControls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"266e38cdeffb8c22a7f778e865e5fab6b461f5b6",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"5e75ece000ac02675d3d226461b7f522dcf5ead9",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,terms:this.terms,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"fc98b1675afe1abb6a8d391c4ace34c7f0e46677",class:"kritzel-controls"},r("div",{key:"b17bc9e9a65646735c56f78a326a281229fa9790",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"9ab9d5c44e515551d75f27c31875de72e9d3407c",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),"aria-label":o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":`Select ${t.name} options`,"data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t),"aria-label":t.name.charAt(0).toUpperCase()+t.name.slice(1)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"fad7512f5d1aa68905a56b8f22d498380f166f9f",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"2ff7cb3ad18608102f3d8188b5936cf00b00451f",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"10f15f717c8573cbad6ea53b412ad56254099ad1",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"a1b0ed8ecc2696a591e32add642a3d5cb2bf7f4a",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,terms:this.terms,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"7ac8214a3dbad5323a38cad3ff7324b57f9dbfb5",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.displayValues&&r("div",{key:"7e64f79859f7f2b03d72bb7a93fb295e7d2b2ac0",class:"color-container"},r("kritzel-color",{key:"b87d9861949379d84954ef1ecb554e13317b3287",value:this.displayValues.color,theme:this.theme,size:18,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{visible:[4],controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],terms:[16],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],internalControls:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"]],{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}]);function E(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),j);break;case"kritzel-color":customElements.get(l(t))||p();break;case"kritzel-color-palette":customElements.get(l(t))||k();break;case"kritzel-dropdown":customElements.get(l(t))||f();break;case"kritzel-font":customElements.get(l(t))||b();break;case"kritzel-font-family":customElements.get(l(t))||u();break;case"kritzel-font-size":customElements.get(l(t))||g();break;case"kritzel-icon":customElements.get(l(t))||z();break;case"kritzel-line-endings":customElements.get(l(t))||m();break;case"kritzel-opacity-slider":customElements.get(l(t))||v();break;case"kritzel-shape-fill":customElements.get(l(t))||y();break;case"kritzel-stroke-size":customElements.get(l(t))||x();break;case"kritzel-tool-config":customElements.get(l(t))||d();break;case"kritzel-tooltip":customElements.get(l(t))||w();break;case"kritzel-utility-panel":customElements.get(l(t))||C()}}))}export{j as K,E as d}
+import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-B43upypT.js";import{f as n,e as s}from"./p-BJlf4iHH.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-BlozPPKi.js";import{a as h}from"./p-BmyTdQGy.js";import{d as p}from"./p-zd7zXld8.js";import{d as k}from"./p-1nG2hxfJ.js";import{d as f}from"./p-Df3BwVGy.js";import{d as u}from"./p-DgnK50xO.js";import{d as b}from"./p-JhOYwUOj.js";import{d as g}from"./p-8xkoVMfO.js";import{d as z}from"./p-CdR76C4L.js";import{d as m}from"./p-CXpv9Rxe.js";import{d as v}from"./p-BzrxIesp.js";import{d as y}from"./p-BFYtCsZu.js";import{d as x}from"./p-Bm_BWQa4.js";import{d as w}from"./p-DZcwchEg.js";import{d as C}from"./p-Bd_yPNfg.js";const j=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}visible=!0;controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme="light";terms={};isControlsReady;firstConfig=null;isTouchDevice=a.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;internalControls=[];handleActiveToolChangeBound=this.handleActiveToolChange.bind(this);handleSelectionChangeBound=this.handleSelectionChange.bind(this);handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.internalControls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async onControlsChange(){this.kritzelEngine&&await this.initializeTools()}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=c.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:h.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof s&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}componentDidRender(){this.updateScrollIndicators()}disconnectedCallback(){this.kritzelEngine&&(this.kritzelEngine.removeEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound))}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.");this.kritzelEngine.addEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}async initializeTools(){let t=!1;const o=this.controls.map((t=>({...t})));for(const e of o){if("tool"===e.type&&e.tool){let t=e.tool;"function"!=typeof t&&(t=t.constructor);const o=await this.kritzelEngine.registerTool(e.name,t,e.config);o&&(e.tool=o)}"tool"===e.type&&e.isDefault&&e.tool&&(await this.kritzelEngine.changeActiveTool(e.tool),this.activeControl=e,this.updateDisplayValues(e.tool),t=!0),"config"===e.type&&(null===this.firstConfig?this.firstConfig=e:console.warn("Only one config control is allowed. The first one will be used."))}if(this.internalControls=o,!t){const t=this.internalControls.find((t=>"tool"===t.type&&t.tool));t&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool))}}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.closeTooltip(),await this.handleControlClick(t)}render(){const t=null!==(this.activeControl?.tool?c.getToolConfig(this.activeControl.tool):null),o=this.internalControls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.internalControls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"f66fd3057bd88d31d7d585f2c286feb7e33c3611",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"4841cd070407422f0081dd528566d3943d2db7cd",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,terms:this.terms,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"54fb1da3f8b070c4c75e27930c95ca06f46f48f1",class:"kritzel-controls"},r("div",{key:"9ce27b621a8fb668716f1eb15f3b01302e476d86",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"eb9f499b5139c481b5748b09ecf21cd414918a11",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),"aria-label":o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":`Select ${t.name} options`,"data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t),"aria-label":t.name.charAt(0).toUpperCase()+t.name.slice(1)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"c990abf4ff2970e6519c605135f3fbded691e91a",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"1c163b818eed3a76bda9e802b083d2bfe8431c87",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"f7252d9aa17bdde580ca31cd558ba93d99822937",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"a15a873d8740d5c45a657bb4677a514fe9e183de",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,terms:this.terms,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"ffbf1e35387ee732c6877f8425dbe07234d8233f",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.displayValues&&r("div",{key:"eb272119da9354eb069231c3d29a196c5b0e4aa2",class:"color-container"},r("kritzel-color",{key:"465b3af943d740b83bd260ee493840edd235a9af",value:this.displayValues.color,theme:this.theme,size:18,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{visible:[4],controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],terms:[16],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],internalControls:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"]],{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}]);function E(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),j);break;case"kritzel-color":customElements.get(l(t))||p();break;case"kritzel-color-palette":customElements.get(l(t))||k();break;case"kritzel-dropdown":customElements.get(l(t))||f();break;case"kritzel-font":customElements.get(l(t))||u();break;case"kritzel-font-family":customElements.get(l(t))||b();break;case"kritzel-font-size":customElements.get(l(t))||g();break;case"kritzel-icon":customElements.get(l(t))||z();break;case"kritzel-line-endings":customElements.get(l(t))||m();break;case"kritzel-opacity-slider":customElements.get(l(t))||v();break;case"kritzel-shape-fill":customElements.get(l(t))||y();break;case"kritzel-stroke-size":customElements.get(l(t))||x();break;case"kritzel-tool-config":customElements.get(l(t))||d();break;case"kritzel-tooltip":customElements.get(l(t))||w();break;case"kritzel-utility-panel":customElements.get(l(t))||C()}}))}export{j as K,E as d}