kritzel-stencil 0.3.42 → 0.3.44
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.
- package/dist/cjs/kritzel-active-users_46.cjs.entry.js +57 -68
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +9 -16
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +0 -7
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +4 -10
- package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +1 -1
- package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
- package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
- package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
- package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
- package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
- package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
- package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
- package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
- package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
- package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
- package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
- package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
- package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +1 -1
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
- package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
- package/dist/collection/constants/version.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-active-users.js +1 -1
- package/dist/components/kritzel-avatar.js +1 -1
- package/dist/components/kritzel-back-to-content.js +1 -1
- package/dist/components/kritzel-button.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-current-user-dialog.js +1 -1
- package/dist/components/kritzel-current-user.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-input.js +1 -1
- package/dist/components/kritzel-loading-overlay.js +1 -1
- package/dist/components/kritzel-login-dialog.js +1 -1
- package/dist/components/kritzel-master-detail.js +1 -1
- package/dist/components/kritzel-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-numeric-input.js +1 -1
- package/dist/components/kritzel-opacity-slider.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-share-dialog.js +1 -1
- package/dist/components/kritzel-slide-toggle.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-utility-panel.js +1 -1
- package/dist/components/kritzel-watermark.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/kritzel-zoom-panel.js +1 -1
- package/dist/components/{p-BulDbBWB.js → p-9692OaI_.js} +1 -1
- package/dist/components/{p-BzrxIesp.js → p-B6t5q-V4.js} +1 -1
- package/dist/components/{p-DgnK50xO.js → p-B8Xi4Clg.js} +1 -1
- package/dist/components/{p-DIMNEOTW.js → p-BDzlx2hB.js} +1 -1
- package/dist/components/{p-8xkoVMfO.js → p-BI2ng9I_.js} +1 -1
- package/dist/components/{p-B_6RNask.js → p-BJ3Do8l1.js} +1 -1
- package/dist/components/p-BbGeZ47F.js +9 -0
- package/dist/components/{p-CVhcOiEA.js → p-BsANVili.js} +1 -1
- package/dist/components/{p-DSOc0eIT.js → p-C4NrrUfN.js} +1 -1
- package/dist/components/{p-BzJEwFtn.js → p-CWRSGYOE.js} +1 -1
- package/dist/components/{p-BLOPBDUF.js → p-Ca-igU1f.js} +1 -1
- package/dist/components/{p-Bd_yPNfg.js → p-Cf2ZKUo0.js} +1 -1
- package/dist/components/{p-DMAScsJF.js → p-CiJ8GUSN.js} +1 -1
- package/dist/components/{p-DPpPd5GI.js → p-Cq3RhUie.js} +1 -1
- package/dist/components/{p-zd7zXld8.js → p-CqLgB8JK.js} +1 -1
- package/dist/components/{p-D8TOEhPY.js → p-Cr682JI_.js} +1 -1
- package/dist/components/{p-DEqpY4K2.js → p-CrihGZwy.js} +1 -1
- package/dist/components/{p-BKOsmXB5.js → p-CwJwsRR3.js} +1 -1
- package/dist/components/{p-1nG2hxfJ.js → p-Cymum41a.js} +1 -1
- package/dist/components/{p-Ds-P2bYH.js → p-D-NSbx5U.js} +1 -1
- package/dist/components/p-D2q_wTyG.js +1 -0
- package/dist/components/{p-DXcjIb_a.js → p-D5jf8wAu.js} +1 -1
- package/dist/components/{p-Bm_BWQa4.js → p-D82VaHce.js} +1 -1
- package/dist/components/{p-oGAPPwAL.js → p-DEBwmRTC.js} +1 -1
- package/dist/components/{p-yD_3Z3K1.js → p-DJ88BrIW.js} +1 -1
- package/dist/components/p-DJy_uWqB.js +1 -0
- package/dist/components/{p-CMphprF1.js → p-DS6BjPHy.js} +1 -1
- package/dist/components/{p-DZcwchEg.js → p-DU7g4PU-.js} +1 -1
- package/dist/components/{p-CGGLMeG_.js → p-DiN6reV0.js} +1 -1
- package/dist/components/{p-D52oKO_e.js → p-MWbDABmq.js} +1 -1
- package/dist/components/{p-CwuGA058.js → p-PSFAfAyd.js} +1 -1
- package/dist/components/{p-jzuGPW5o.js → p-_Bq7P1RT.js} +1 -1
- package/dist/components/{p-C4XDwGU0.js → p-zPqYwncm.js} +1 -1
- package/dist/esm/kritzel-active-users_46.entry.js +57 -68
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/p-c6ee3857.entry.js +9 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -3
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +0 -1
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-BR0Hnrhc.js +0 -1
- package/dist/components/p-Di5dpXrF.js +0 -1
- package/dist/components/p-hkYKD6tT.js +0 -9
- package/dist/stencil/p-5fc166d8.entry.js +0 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,t,H as e,h as r,d as s}from"./p-B43upypT.js";import{d as i}from"./p-
|
|
1
|
+
import{p as a,t,H as e,h as r,d as s}from"./p-B43upypT.js";import{d as i}from"./p-D5jf8wAu.js";const o=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}users=[];avatarSize=40;maxVisible=3;overlap=20;getDisplayName(a){return a.displayName??([a.firstName,a.lastName].filter(Boolean).join(" ")||a.email||"User")}render(){if(!this.users||0===this.users.length)return r(s,{style:{display:"none"}});const a=this.users.slice(0,this.maxVisible),t=this.users.length-this.maxVisible;return r(s,{style:{"--avatar-overlap":`-${this.overlap}px`}},r("div",{class:"avatars"},a.map(((t,e)=>r("div",{class:"avatar-wrapper",style:{marginLeft:e>0?"var(--avatar-overlap)":"0px",zIndex:""+(a.length-e)}},r("kritzel-avatar",{user:t,size:this.avatarSize}),r("span",{class:"avatar-tooltip"},this.getDisplayName(t)))))),t>0&&r("span",{class:"overflow-count"},"+",t,r("span",{class:"avatar-tooltip"},this.users.slice(this.maxVisible).map((a=>r("div",null,this.getDisplayName(a)))))))}static get style(){return":host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}"}},[513,"kritzel-active-users",{users:[16],avatarSize:[2,"avatar-size"],maxVisible:[2,"max-visible"],overlap:[2]}]);function l(){"undefined"!=typeof customElements&&["kritzel-active-users","kritzel-avatar"].forEach((a=>{switch(a){case"kritzel-active-users":customElements.get(t(a))||customElements.define(t(a),o);break;case"kritzel-avatar":customElements.get(t(a))||i()}}))}export{o as K,l as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as e,H as t,h as r,d as a,t as s}from"./p-B43upypT.js";import{d as i}from"./p-D5jf8wAu.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}user;avatarSize=40;terms={};render(){return r(a,{key:"4810f63c9297931ae1a5e2eb9d866bab1bf1aa55"},r("kritzel-avatar",{key:"e6735fd9aaea0ff41006d6034ebe8d6248ee6a03",user:this.user,size:this.avatarSize}))}static get style(){return":host{display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}kritzel-avatar{cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}"}},[513,"kritzel-current-user",{user:[16],avatarSize:[2,"avatar-size"],terms:[16]}]);function u(){"undefined"!=typeof customElements&&["kritzel-current-user","kritzel-avatar"].forEach((e=>{switch(e){case"kritzel-current-user":customElements.get(s(e))||customElements.define(s(e),n);break;case"kritzel-avatar":customElements.get(s(e))||i()}}))}export{n as K,u as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,H as o,c as t,h as i,d as n,t as r}from"./p-B43upypT.js";import{d as a}from"./p-CdR76C4L.js";const l=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.zoomIn=t(this,"zoomIn"),this.zoomOut=t(this,"zoomOut")}visible=!0;disabled=!1;zoomPercent=100;terms={};zoomIn;zoomOut;handleZoomIn=()=>{this.disabled||this.zoomIn.emit()};handleZoomOut=()=>{this.disabled||this.zoomOut.emit()};get normalizedZoomPercent(){return Number.isFinite(this.zoomPercent)?Math.max(1,Math.round(this.zoomPercent)):100}render(){return i(n,{key:"896039bb4a3e29ede6ef5eb596509d36a3543eb9"},i("div",{key:"c56e78040be3195b25b08f47b28dfb5217d6ed51",class:{panel:!0,visible:this.visible}},i("button",{key:"d365dbfd6f1a855166dc75e194e8b3f9221006be",class:"zoom-button",type:"button","aria-label":this.terms["zoom.zoomOut"]??"Zoom out",disabled:this.disabled,onClick:this.handleZoomOut},i("kritzel-icon",{key:"958e586cec30aedf5d6580b5825cd6d17da6c7d4",name:"minus"})),i("span",{key:"f5de55de9d4711f46dc43f84105e2b1febde4a86",class:"zoom-level","aria-live":"polite"},this.normalizedZoomPercent,"%"),i("button",{key:"f6e748d689fe845310d2a55f928fc3a90eae0aee",class:"zoom-button",type:"button","aria-label":this.terms["zoom.zoomIn"]??"Zoom in",disabled:this.disabled,onClick:this.handleZoomIn},i("kritzel-icon",{key:"37644571a174917549a8bdc052c835b79dc5deb2",name:"plus"}))))}static get style(){return":host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}"}},[513,"kritzel-zoom-panel",{visible:[4],disabled:[4],zoomPercent:[2,"zoom-percent"],terms:[16]}]);function s(){"undefined"!=typeof customElements&&["kritzel-zoom-panel","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-zoom-panel":customElements.get(r(e))||customElements.define(r(e),l);break;case"kritzel-icon":customElements.get(r(e))||a()}}))}export{l as K,s as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as i,c as e,h as s,d as o,t as n}from"./p-B43upypT.js";import{K as l}from"./p-WUdQqYnu.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=e(this,"tooltipClosed"),this.tooltipOpened=e(this,"tooltipOpened")}get host(){return this}isVisible=!1;anchorElement;triggerElement;offsetY=24;tooltipClosed;tooltipOpened;positionX=0;positionY=0;handleOutsideClick(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||this.close()}handleOutsidePointerDown(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||(t.stopPropagation(),t.preventDefault(),this.close())}handleCloseAll(t){t.detail!==this.host&&this.close()}handleWindowResize(){this.calculateAdjustedPosition()}handleTriggerElementChange(t,i){i&&i.removeEventListener("click",this.handleTriggerClick),t&&t.addEventListener("click",this.handleTriggerClick)}handleVisibilityChange(t){t&&(this.calculateAdjustedPosition(),requestAnimationFrame((()=>{this.focusContent()})))}async open(){this.isVisible||(document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll",{detail:this.host})),this.isVisible=!0,this.tooltipOpened.emit())}async close(){this.isVisible&&(this.isVisible=!1,this.tooltipClosed.emit())}async toggle(){this.isVisible?this.close():this.open()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}connectedCallback(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentDidLoad(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}disconnectedCallback(){this.triggerElement&&this.triggerElement.removeEventListener("click",this.handleTriggerClick)}handleTriggerClick=t=>{t.stopPropagation(),this.toggle()};calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),i=this.host.shadowRoot?.querySelector(".tooltip-content"),e=i?.getBoundingClientRect(),s=e?.width||0,o=12,n=window.innerWidth-s-o;this.positionX=Math.max(o,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(o,{key:"
|
|
1
|
+
import{p as t,H as i,c as e,h as s,d as o,t as n}from"./p-B43upypT.js";import{K as l}from"./p-WUdQqYnu.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=e(this,"tooltipClosed"),this.tooltipOpened=e(this,"tooltipOpened")}get host(){return this}isVisible=!1;anchorElement;triggerElement;offsetY=24;tooltipClosed;tooltipOpened;positionX=0;positionY=0;handleOutsideClick(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||this.close()}handleOutsidePointerDown(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||(t.stopPropagation(),t.preventDefault(),this.close())}handleCloseAll(t){t.detail!==this.host&&this.close()}handleWindowResize(){this.calculateAdjustedPosition()}handleTriggerElementChange(t,i){i&&i.removeEventListener("click",this.handleTriggerClick),t&&t.addEventListener("click",this.handleTriggerClick)}handleVisibilityChange(t){t&&(this.calculateAdjustedPosition(),requestAnimationFrame((()=>{this.focusContent()})))}async open(){this.isVisible||(document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll",{detail:this.host})),this.isVisible=!0,this.tooltipOpened.emit())}async close(){this.isVisible&&(this.isVisible=!1,this.tooltipClosed.emit())}async toggle(){this.isVisible?this.close():this.open()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}connectedCallback(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentDidLoad(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}disconnectedCallback(){this.triggerElement&&this.triggerElement.removeEventListener("click",this.handleTriggerClick)}handleTriggerClick=t=>{t.stopPropagation(),this.toggle()};calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),i=this.host.shadowRoot?.querySelector(".tooltip-content"),e=i?.getBoundingClientRect(),s=e?.width||0,o=12,n=window.innerWidth-s-o;this.positionX=Math.max(o,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(o,{key:"4465ed45a4a145164e3b86baa2dbfbe6185574ed",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.positionX}px`,bottom:`${this.positionY}px`}},s("div",{key:"b98c28e7d1ecacb04534cb5044d2bee468c8a52c",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"42d05b850b4a87f8b2663d9462f3d05b641df1f1"})))}static get watchers(){return{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[1028,"is-visible"],anchorElement:[16],triggerElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],open:[64],close:[64],toggle:[64],focusContent:[64]},[[4,"click","handleOutsideClick"],[6,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}]);function r(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h as K,r as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-B43upypT.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-DX2nriaq.js";import{d as c}from"./p-Df3BwVGy.js";import{d as h}from"./p-CdR76C4L.js";import{d as g}from"./p-CVhcOiEA.js";import{d}from"./p-DIMNEOTW.js";import{d as p}from"./p-BzJEwFtn.js";const u=-1/0,b=1/0,m=-1/0,f=1/0,v={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0,showAssetResolverInfo:!1},w=["general","viewport","shortcuts","developer","about"],y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}availableThemes=["light","dark"];availableLocales=[];shortcuts=[];terms={};settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=w[0];scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;theme="light";locale="en";viewportBoundaryLeft=u;viewportBoundaryRight=b;viewportBoundaryTop=m;viewportBoundaryBottom=f;debugInfo={...v};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"string"==typeof e.theme&&(this.theme=e.theme),"string"==typeof e.locale&&(this.locale=e.locale),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...v,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.theme,locale:this.locale,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.theme=e.detail,this.emitSettings()};handleLocaleChange=e=>{this.locale=e.detail,this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??u,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??b,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??m,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}t(e,t){return this.terms[e]??t}get categories(){const e={general:"settings",viewport:"viewport",shortcuts:"command",developer:"braces",about:"info"},t={general:{key:"settings.categories.general",fallback:"General"},viewport:{key:"settings.categories.viewport",fallback:"Viewport"},shortcuts:{key:"settings.categories.shortcuts",fallback:"Keyboard Shortcuts"},developer:{key:"settings.categories.developer",fallback:"Developer Options"},about:{key:"settings.categories.about",fallback:"About"}};return w.map((s=>({id:s,label:this.t(t[s].key,t[s].fallback),icon:e[s]})))}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.general.title","General Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.theme.label","Theme")),i("p",{class:"settings-description"},this.t("settings.general.theme.description","Select a registered color theme for the editor interface.")),i("kritzel-dropdown",{options:this.availableThemes.map((e=>({value:e,label:e}))),value:this.theme,onValueChanged:this.handleThemeChange})),this.availableLocales.length>0&&i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.language.label","Language")),i("p",{class:"settings-description"},this.t("settings.general.language.description","Select the display language for the editor interface.")),i("kritzel-dropdown",{options:this.availableLocales.map((e=>({value:e.code,label:e.label}))),value:this.locale,onValueChanged:this.handleLocaleChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale")),i("p",{class:"settings-description"},this.t("settings.general.lockDrawingScale.description","When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.")),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale"),onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.viewport.title","Viewport Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.minZoom.label","Minimum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.minZoom.description","Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.")),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.maxZoom.label","Maximum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.maxZoom.description","Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.")),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryLeft.label","Viewport Boundary Left")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryLeft.description","Left boundary in world coordinates. Set to limit how far left the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryRight.label","Viewport Boundary Right")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryRight.description","Right boundary in world coordinates. Set to limit how far right the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryTop.label","Viewport Boundary Top")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryTop.description","Top boundary in world coordinates. Set to limit how far up the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryBottom.label","Viewport Boundary Bottom")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryBottom.description","Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.shortcuts.title","Keyboard Shortcuts")),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.developer.title","Developer Options")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showViewportInfo.label","Show Viewport Info")),i("p",{class:"settings-description"},this.t("settings.developer.showViewportInfo.description","Display viewport debug information such as position, zoom level, and boundaries.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:this.t("settings.developer.showViewportInfo.label","Show Viewport Info"),onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showObjectInfo.label","Show Object Info")),i("p",{class:"settings-description"},this.t("settings.developer.showObjectInfo.description","Display debug information about objects on the canvas.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:this.t("settings.developer.showObjectInfo.label","Show Object Info"),onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info")),i("p",{class:"settings-description"},this.t("settings.developer.showSyncProviderInfo.description","Display debug information about the sync provider connection status.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info"),onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showMigrationInfo.label","Show Migration Info")),i("p",{class:"settings-description"},this.t("settings.developer.showMigrationInfo.description","Display debug information about data migrations.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:this.t("settings.developer.showMigrationInfo.label","Show Migration Info"),onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.about.title","About")),i("p",null,this.t("settings.about.description","Kritzel - A drawing application")),i("p",{class:"version-info"},"Version ","0.3.42"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"7e65885051a30635291bb98fb87addf0bdbca8e8"},i("kritzel-dialog",{key:"c795bad227882904d8dda96768e8ccdd7c48df71",isOpen:this.isDialogOpen,dialogTitle:this.t("settings.dialogTitle","Settings"),size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"eff1486d14d4b55441b9a52b293da7459771331d",items:this.categories,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}"}},[513,"kritzel-settings",{availableThemes:[16],availableLocales:[16],shortcuts:[16],terms:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],theme:[32],locale:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function k(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),y);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-dropdown":customElements.get(n(e))||c();break;case"kritzel-icon":customElements.get(n(e))||h();break;case"kritzel-master-detail":customElements.get(n(e))||g();break;case"kritzel-numeric-input":customElements.get(n(e))||d();break;case"kritzel-slide-toggle":customElements.get(n(e))||p()}}))}export{y as K,k as d}
|
|
1
|
+
import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-B43upypT.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-DX2nriaq.js";import{d as c}from"./p-Df3BwVGy.js";import{d as h}from"./p-CdR76C4L.js";import{d as g}from"./p-BsANVili.js";import{d}from"./p-BDzlx2hB.js";import{d as p}from"./p-CWRSGYOE.js";const u=-1/0,b=1/0,m=-1/0,f=1/0,v={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0,showAssetResolverInfo:!1},w=["general","viewport","shortcuts","developer","about"],y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}availableThemes=["light","dark"];availableLocales=[];shortcuts=[];terms={};settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=w[0];scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;theme="light";locale="en";viewportBoundaryLeft=u;viewportBoundaryRight=b;viewportBoundaryTop=m;viewportBoundaryBottom=f;debugInfo={...v};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"string"==typeof e.theme&&(this.theme=e.theme),"string"==typeof e.locale&&(this.locale=e.locale),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...v,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.theme,locale:this.locale,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.theme=e.detail,this.emitSettings()};handleLocaleChange=e=>{this.locale=e.detail,this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??u,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??b,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??m,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}t(e,t){return this.terms[e]??t}get categories(){const e={general:"settings",viewport:"viewport",shortcuts:"command",developer:"braces",about:"info"},t={general:{key:"settings.categories.general",fallback:"General"},viewport:{key:"settings.categories.viewport",fallback:"Viewport"},shortcuts:{key:"settings.categories.shortcuts",fallback:"Keyboard Shortcuts"},developer:{key:"settings.categories.developer",fallback:"Developer Options"},about:{key:"settings.categories.about",fallback:"About"}};return w.map((s=>({id:s,label:this.t(t[s].key,t[s].fallback),icon:e[s]})))}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.general.title","General Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.theme.label","Theme")),i("p",{class:"settings-description"},this.t("settings.general.theme.description","Select a registered color theme for the editor interface.")),i("kritzel-dropdown",{options:this.availableThemes.map((e=>({value:e,label:e}))),value:this.theme,onValueChanged:this.handleThemeChange})),this.availableLocales.length>0&&i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.language.label","Language")),i("p",{class:"settings-description"},this.t("settings.general.language.description","Select the display language for the editor interface.")),i("kritzel-dropdown",{options:this.availableLocales.map((e=>({value:e.code,label:e.label}))),value:this.locale,onValueChanged:this.handleLocaleChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale")),i("p",{class:"settings-description"},this.t("settings.general.lockDrawingScale.description","When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.")),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale"),onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.viewport.title","Viewport Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.minZoom.label","Minimum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.minZoom.description","Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.")),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.maxZoom.label","Maximum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.maxZoom.description","Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.")),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryLeft.label","Viewport Boundary Left")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryLeft.description","Left boundary in world coordinates. Set to limit how far left the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryRight.label","Viewport Boundary Right")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryRight.description","Right boundary in world coordinates. Set to limit how far right the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryTop.label","Viewport Boundary Top")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryTop.description","Top boundary in world coordinates. Set to limit how far up the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryBottom.label","Viewport Boundary Bottom")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryBottom.description","Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.shortcuts.title","Keyboard Shortcuts")),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.developer.title","Developer Options")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showViewportInfo.label","Show Viewport Info")),i("p",{class:"settings-description"},this.t("settings.developer.showViewportInfo.description","Display viewport debug information such as position, zoom level, and boundaries.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:this.t("settings.developer.showViewportInfo.label","Show Viewport Info"),onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showObjectInfo.label","Show Object Info")),i("p",{class:"settings-description"},this.t("settings.developer.showObjectInfo.description","Display debug information about objects on the canvas.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:this.t("settings.developer.showObjectInfo.label","Show Object Info"),onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info")),i("p",{class:"settings-description"},this.t("settings.developer.showSyncProviderInfo.description","Display debug information about the sync provider connection status.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info"),onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showMigrationInfo.label","Show Migration Info")),i("p",{class:"settings-description"},this.t("settings.developer.showMigrationInfo.description","Display debug information about data migrations.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:this.t("settings.developer.showMigrationInfo.label","Show Migration Info"),onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.about.title","About")),i("p",null,this.t("settings.about.description","Kritzel - A drawing application")),i("p",{class:"version-info"},"Version ","0.3.44"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"22874e24f0da09587a8a7101c0caca229927493d"},i("kritzel-dialog",{key:"2b754b625e7ccabcfd7b64fdc383165dd5b65f6f",isOpen:this.isDialogOpen,dialogTitle:this.t("settings.dialogTitle","Settings"),size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"0a3d94aa291bfb9fe2623714d50cc385ca89ed95",items:this.categories,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}"}},[513,"kritzel-settings",{availableThemes:[16],availableLocales:[16],shortcuts:[16],terms:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],theme:[32],locale:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function k(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),y);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-dropdown":customElements.get(n(e))||c();break;case"kritzel-icon":customElements.get(n(e))||h();break;case"kritzel-master-detail":customElements.get(n(e))||g();break;case"kritzel-numeric-input":customElements.get(n(e))||d();break;case"kritzel-slide-toggle":customElements.get(n(e))||p()}}))}export{y as K,k as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,H as t,c as r,h as o,d as i,t as a}from"./p-B43upypT.js";import{d as s}from"./p-D5jf8wAu.js";import{d as l}from"./p-DEBwmRTC.js";import{d as n}from"./p-DX2nriaq.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.logoutRequest=r(this,"logoutRequest")}get host(){return this}user;terms={};isDialogOpen=!1;logoutRequest;async open(){this.isDialogOpen=!0}async close(){this.isDialogOpen=!1}closeDialog=()=>{this.isDialogOpen=!1};handleLogout=()=>{this.logoutRequest.emit(),this.closeDialog()};getDisplayName(){if(this.user)return this.user.displayName??([this.user.firstName,this.user.lastName].filter(Boolean).join(" ")||void 0)}render(){const e=this.getDisplayName();return o(i,{key:"510a75d18b03e26e6c0b5ebd4e687b938e739318"},o("kritzel-dialog",{key:"088b9b931b781081b93690c2a683da731a7f1825",dialogTitle:this.terms["currentUser.dialogTitle"]??"Account",isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small",contained:!0},o("div",{key:"8ae1247fd8c2e21d2a1c541e05373f9e11088aaa",class:"user-info"},o("kritzel-avatar",{key:"3a8dc6052093be6358a83f004f3b08d926a585d9",user:this.user,size:80}),e&&o("div",{key:"4984bef4e32ece2051b92795e046629760442914",class:"user-name"},e),this.user?.email&&o("div",{key:"0c5a73d026512e139e1c90050fa5798c138215e5",class:"user-email"},this.user.email),o("kritzel-button",{key:"7a3d7947a98e2a16e43865ea5cee83e61cc7294e",class:"logout-button",variant:"primary",onButtonClick:this.handleLogout},this.terms["menu.logout"]??"Logout"))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.user-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}.user-name{font-size:18px;font-weight:600;color:var(--kritzel-current-user-dialog-name-color, #333333);text-align:center;margin-top:8px}.user-email{font-size:14px;color:var(--kritzel-current-user-dialog-email-color, #666666);text-align:center}.logout-button{margin-top:16px;width:100%;--kritzel-button-width:100%;--kritzel-button-primary-background-color:var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);--kritzel-button-primary-hover-background-color:var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);--kritzel-button-primary-active-background-color:var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);--kritzel-button-primary-color:var(--kritzel-current-user-dialog-logout-button-color, #ffffff)}"}},[513,"kritzel-current-user-dialog",{user:[16],terms:[16],isDialogOpen:[32],open:[64],close:[64]}]);function u(){"undefined"!=typeof customElements&&["kritzel-current-user-dialog","kritzel-avatar","kritzel-button","kritzel-dialog"].forEach((e=>{switch(e){case"kritzel-current-user-dialog":customElements.get(a(e))||customElements.define(a(e),c);break;case"kritzel-avatar":customElements.get(a(e))||s();break;case"kritzel-button":customElements.get(a(e))||l();break;case"kritzel-dialog":customElements.get(a(e))||n()}}))}export{c as K,u as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as r,h as t,d as a,t as o}from"./p-B43upypT.js";const i=1e3,n=1e-4,s=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}core;label;render(){const e=this.label??this.core.localizationManager.translate("watermark.poweredBy");return t(a,{key:"
|
|
1
|
+
import{p as e,H as r,h as t,d as a,t as o}from"./p-B43upypT.js";const i=1e3,n=1e-4,s=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}core;label;render(){const e=this.label??this.core.localizationManager.translate("watermark.poweredBy");return t(a,{key:"143ea32342e30351c93751714dfd12b725ddca24"},t("a",{key:"95fb2dfa0d806367e6a71dad3932b321d7ae5a76",class:"watermark-link",href:"https://kritzel.io",target:"_blank",rel:"noopener noreferrer",part:"watermark",onPointerDown:e=>e.stopPropagation(),onPointerUp:e=>e.stopPropagation()},e))}static get style(){return":host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}"}},[513,"kritzel-watermark",{core:[16],label:[1]}]);function l(){"undefined"!=typeof customElements&&["kritzel-watermark"].forEach((e=>{"kritzel-watermark"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{i as A,s as K,n as a,l as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as r,h as o,d as n,t as i}from"./p-B43upypT.js";import{K as s}from"./p-jGOpkGDl.js";import{d as a}from"./p-CdR76C4L.js";import{d as l,a as m}from"./p-
|
|
1
|
+
import{p as e,H as t,c as r,h as o,d as n,t as i}from"./p-B43upypT.js";import{K as s}from"./p-jGOpkGDl.js";import{d as a}from"./p-CdR76C4L.js";import{d as l,a as m}from"./p-CwJwsRR3.js";import{d as c}from"./p-Ca-igU1f.js";const u=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=r(this,"itemSelect")}get host(){return this}visible=!1;items=[];icon="ellipsis-vertical";iconSize=24;offsetY=4;terms={};itemSelect;menuAnchor=null;isTouchDevice=s.isTouchDevice();toggleMenu=e=>{e.stopPropagation(),this.menuAnchor?this.closeMenu():(window.dispatchEvent(new CustomEvent("kritzel-dismiss-menus")),this.menuAnchor=this.host)};closeMenu=()=>{this.menuAnchor=null};get visibleItems(){return this.items.filter((e=>!1!==e.isVisible))}handleMenuItemSelect=e=>{const{item:t,parent:r}=e.detail;t.action&&t.action(t,r),this.itemSelect.emit(e.detail),this.closeMenu()};render(){return o(n,{key:"74e62332a41aa59ea2748f4650856cc7fe40f0f7",class:{mobile:this.isTouchDevice},style:{display:this.visible?"":"none"}},o("div",{key:"562935db827f826b4814bb18ad7a4f213f0a4a4c",class:{"more-menu-wrapper":!0,visible:this.visible}},o("button",{key:"7dd522a43e8154d85edff6934ecce5253a1d1b4c",class:"more-menu-button","data-testid":"more-menu-button",onClick:this.toggleMenu,"aria-label":this.terms["moreMenu.ariaLabel"]??"More options"},o("kritzel-icon",{key:"2787a984c3532b17c3eaad1d5b1ba1f3f55a9ae0",name:this.icon,size:this.iconSize})),o("kritzel-portal",{key:"448375148d9c024bf836b2f6555522f7cd553ebd",anchor:this.menuAnchor,offsetY:this.offsetY,onClose:this.closeMenu},o("kritzel-menu",{key:"79b35fd2e5ea1050d07894d6eb7949c9ab14d1bc",items:this.visibleItems,onItemSelect:this.handleMenuItemSelect}))))}static get style(){return":host{display:inline-flex;z-index:1}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}"}},[513,"kritzel-more-menu",{visible:[4],items:[16],icon:[1],iconSize:[2,"icon-size"],offsetY:[2,"offset-y"],terms:[16],menuAnchor:[32],isTouchDevice:[32]}]);function b(){"undefined"!=typeof customElements&&["kritzel-more-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-more-menu":customElements.get(i(e))||customElements.define(i(e),u);break;case"kritzel-icon":customElements.get(i(e))||a();break;case"kritzel-menu":customElements.get(i(e))||m();break;case"kritzel-menu-item":customElements.get(i(e))||l();break;case"kritzel-portal":customElements.get(i(e))||c()}}))}export{u as K,b as d}
|
|
@@ -1 +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-D8NvNMcU.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-BR0Hnrhc.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}
|
|
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-D8NvNMcU.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-D2q_wTyG.js";import{a as h}from"./p-BmyTdQGy.js";import{d as p}from"./p-CqLgB8JK.js";import{d as k}from"./p-Cymum41a.js";import{d as f}from"./p-Df3BwVGy.js";import{d as u}from"./p-B8Xi4Clg.js";import{d as b}from"./p-JhOYwUOj.js";import{d as g}from"./p-BI2ng9I_.js";import{d as z}from"./p-CdR76C4L.js";import{d as m}from"./p-CXpv9Rxe.js";import{d as v}from"./p-B6t5q-V4.js";import{d as y}from"./p-BFYtCsZu.js";import{d as x}from"./p-D82VaHce.js";import{d as w}from"./p-DU7g4PU-.js";import{d as C}from"./p-Cf2ZKUo0.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:"7112ce9c79dcff24e48d6dff09257791b253ac4e",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"19f70fef9b6bd8a2e27c0d01099e93b72c57356b",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:"8c36e3de1e3c0012c3e5d98ca0118ab9c45152f8",class:"kritzel-controls"},r("div",{key:"b2d6f311dc4c1e3e2edb01c83c7aa01b99e9f01a",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"cdd4af3f020a9cf9b8924d27286555488f65477e",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:"7bbd436986a433f934f5992f8ae96b6cdb233381",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:"3c00abcde934f2a6d5c3768277b20cf22bcf66d6",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"67cf36c2eaddfd66bd243496a48736d89d60b370",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"8bcaae6e0482858eea69aae42adbe62665ad4d98",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:"91d3b8578958f322d31dd0e38dc7203095c23f9f",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:"6bd17c4d1781cf9e33483a801f52ef09af70802f",class:"color-container"},r("kritzel-color",{key:"a1af397c023a3f0247afdf06b9400543d0c3cbdd",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 T(){"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,T as d}
|