kritzel-stencil 0.3.21 → 0.3.23
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/index.cjs.js +3 -1
- package/dist/cjs/kritzel-active-users_45.cjs.entry.js +507 -288
- package/dist/cjs/{schema.constants-IBG5VW_J.js → schema.constants-Lr_zNkox.js} +713 -47
- package/dist/collection/classes/core/core.class.js +83 -5
- package/dist/collection/classes/core/store.class.js +9 -0
- package/dist/collection/classes/handlers/key.handler.js +1 -1
- package/dist/collection/classes/handlers/selection.handler.js +13 -9
- package/dist/collection/classes/objects/base-object.class.js +20 -8
- package/dist/collection/classes/objects/custom-element.class.js +330 -8
- package/dist/collection/classes/objects/image.class.js +0 -1
- package/dist/collection/classes/objects/selection-group.class.js +12 -0
- package/dist/collection/classes/providers/assets/asset-resolver.class.js +24 -14
- package/dist/collection/classes/providers/assets/indexeddb-asset-provider.class.js +0 -8
- package/dist/collection/classes/registries/custom-element-renderer.registry.js +52 -0
- package/dist/collection/classes/structures/app-state-map.structure.js +17 -3
- package/dist/collection/classes/structures/object-map.structure.js +17 -3
- package/dist/collection/classes/tools/selection-tool.class.js +34 -6
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +9 -8
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +211 -78
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +2 -1
- package/dist/collection/configs/default-engine-config.js +3 -2
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/helpers/html.helper.js +52 -0
- package/dist/collection/helpers/object.helper.js +3 -0
- package/dist/collection/helpers/svg-export.helper.js +35 -0
- package/dist/collection/helpers/wheel.helper.js +113 -0
- package/dist/collection/index.js +3 -0
- package/dist/collection/interfaces/custom-element-renderer.interface.js +1 -0
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-awareness-cursors.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-dialog.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-login-dialog.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-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-split-button.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/{p-BwuemYET.js → p-B4WfPDj0.js} +1 -1
- package/dist/components/p-BNu3Akp5.js +1 -0
- package/dist/components/p-BYveczcb.js +1 -0
- package/dist/components/{p-D28ZylHn.js → p-BixEMVtW.js} +1 -1
- package/dist/components/{p-Ndib1Jb3.js → p-BntMEYss.js} +1 -1
- package/dist/components/p-C48bv_0f.js +9 -0
- package/dist/components/{p-BO1CnEOT.js → p-CPMpf9ku.js} +1 -1
- package/dist/components/{p-BhODnvMO.js → p-CZQz_mul.js} +1 -1
- package/dist/components/{p-COj8EVzL.js → p-Ckpa5tHF.js} +1 -1
- package/dist/components/{p-BPoDE87Q.js → p-DJ3KI725.js} +1 -1
- package/dist/components/{p-DRsD38Nl.js → p-DPlEzPKO.js} +1 -1
- package/dist/components/{p-C-RiEw9X.js → p-DSd5xTAH.js} +1 -1
- package/dist/components/{p-CbMLbDou.js → p-DTqMF94b.js} +1 -1
- package/dist/components/{p-CHrSFOSI.js → p-DX2nriaq.js} +1 -1
- package/dist/components/{p-BAN5dnHX.js → p-Dd-pMvlr.js} +1 -1
- package/dist/components/{p-C5TZjIE1.js → p-M9m9-OEY.js} +1 -1
- package/dist/components/p-WUdQqYnu.js +1 -0
- package/dist/components/{p-YFR180v-.js → p-XDNjFYRB.js} +1 -1
- package/dist/components/{p-CJEIUs0x.js → p-X_pyPCe8.js} +1 -1
- package/dist/components/{p-CpR9lc-o.js → p-meY80XnF.js} +1 -1
- package/dist/components/{p-6Ca7Eolf.js → p-y5T0_Wvi.js} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-active-users_45.entry.js +500 -281
- package/dist/esm/{schema.constants-D35cwCYd.js → schema.constants-DMPBDrZh.js} +711 -47
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-27d41f6f.entry.js +9 -0
- package/dist/stencil/p-DMPBDrZh.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/core/core.class.d.ts +15 -0
- package/dist/types/classes/core/store.class.d.ts +6 -0
- package/dist/types/classes/objects/base-object.class.d.ts +3 -2
- package/dist/types/classes/objects/custom-element.class.d.ts +87 -21
- package/dist/types/classes/objects/image.class.d.ts +0 -1
- package/dist/types/classes/objects/selection-group.class.d.ts +1 -0
- package/dist/types/classes/providers/assets/asset-resolver.class.d.ts +3 -0
- package/dist/types/classes/providers/assets/indexeddb-asset-provider.class.d.ts +0 -1
- package/dist/types/classes/registries/custom-element-renderer.registry.d.ts +32 -0
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +7 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/constants/version.d.ts +1 -1
- package/dist/types/helpers/html.helper.d.ts +2 -0
- package/dist/types/helpers/object.helper.d.ts +1 -0
- package/dist/types/helpers/svg-export.helper.d.ts +9 -0
- package/dist/types/helpers/wheel.helper.d.ts +9 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/interfaces/asset-storage-config.interface.d.ts +0 -4
- package/dist/types/interfaces/custom-element-renderer.interface.d.ts +40 -0
- package/dist/types/interfaces/debug-info.interface.d.ts +1 -0
- package/dist/types/interfaces/object.interface.d.ts +0 -1
- package/package.json +2 -2
- package/dist/components/p-BML28BJR.js +0 -1
- package/dist/components/p-BYzaazty.js +0 -1
- package/dist/components/p-CVV-HzFR.js +0 -1
- package/dist/components/p-DWhWFDcC.js +0 -9
- package/dist/stencil/p-60842099.entry.js +0 -9
- package/dist/stencil/p-D35cwCYd.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as i,H as e,c as o,h as t,d as r,t as l}from"./p-B43upypT.js";import{d as s}from"./p-
|
|
1
|
+
import{p as i,H as e,c as o,h as t,d as r,t as l}from"./p-B43upypT.js";import{d as s}from"./p-DX2nriaq.js";import{d as n}from"./p-CdR76C4L.js";const a=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.providerLogin=o(this,"providerLogin"),this.dialogClosed=o(this,"dialogClosed")}get host(){return this}providers=[];dialogTitle="Sign in";subtitle;isDialogOpen=!1;loadingProvider=null;providerLogin;dialogClosed;async open(){this.loadingProvider=null,this.isDialogOpen=!0}async close(){this.isDialogOpen=!1,this.loadingProvider=null}async setLoading(i){this.loadingProvider=i}handleProviderClick=i=>{this.loadingProvider||(this.loadingProvider=i.name,this.providerLogin.emit({provider:i.name}))};closeDialog=()=>{this.isDialogOpen=!1,this.loadingProvider=null,this.dialogClosed.emit()};render(){return t(r,{key:"6ef65077c95d32fee8da4b70ad2e832ad1bb78f7"},t("kritzel-dialog",{key:"04f3d3350393475c7267d8ca90c0b3f0fce10c38",dialogTitle:this.dialogTitle,isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small",contained:!0},t("div",{key:"c2ed4e339d86dcea23b4a0778b8966a6ae36107a",class:"login-content"},this.subtitle&&t("p",{key:"ae46baa70526d057b3427459903287489e645e08",class:"login-subtitle"},this.subtitle),t("div",{key:"1055d5861e5281be234094a3c5c86a6aaf58935f",class:"login-providers"},this.providers.map((i=>t("button",{key:i.name,class:{"provider-button":!0,"is-loading":this.loadingProvider===i.name,"is-disabled":null!==this.loadingProvider&&this.loadingProvider!==i.name},disabled:null!==this.loadingProvider&&this.loadingProvider!==i.name,onClick:()=>this.handleProviderClick(i)},this.loadingProvider===i.name?t("span",{class:"spinner"}):i.icon&&t("kritzel-icon",{name:i.icon,size:20}),t("span",{class:"provider-label"},i.label))))))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}"}},[513,"kritzel-login-dialog",{providers:[16],dialogTitle:[1,"dialog-title"],subtitle:[1],isDialogOpen:[32],loadingProvider:[32],open:[64],close:[64],setLoading:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-login-dialog","kritzel-dialog","kritzel-icon"].forEach((i=>{switch(i){case"kritzel-login-dialog":customElements.get(l(i))||customElements.define(l(i),a);break;case"kritzel-dialog":customElements.get(l(i))||s();break;case"kritzel-icon":customElements.get(l(i))||n()}}))}export{a as K,d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as o,c as
|
|
1
|
+
import{p as e,H as o,c as i,h as s,d as t,t as a}from"./p-B43upypT.js";import{d as r}from"./p-DX2nriaq.js";import{d as c}from"./p-CdR76C4L.js";import{d as l}from"./p-D0RYktBV.js";const n=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toggleIsPublic=i(this,"toggleIsPublic"),this.dialogClosed=i(this,"dialogClosed")}get host(){return this}isPublic=!1;workspaceId=void 0;terms={};onIsPublicChange(e){this.internalIsPublic=e}isDialogOpen=!1;internalIsPublic=!1;copySuccess=!1;toggleIsPublic;dialogClosed;async open(){this.internalIsPublic=this.isPublic,this.isDialogOpen=!0}async close(){this.isDialogOpen=!1}handleToggleChange=e=>{const o=e.detail;this.internalIsPublic=o,this.toggleIsPublic.emit(o)};getShareUrl(){if(!this.workspaceId)return"";const e=new URL(this.workspaceId,window.location.origin);return e.searchParams.set("share","true"),e.toString()}handleCopyUrl=async()=>{const e=this.getShareUrl();if(e)try{await navigator.clipboard.writeText(e),this.copySuccess=!0,setTimeout((()=>{this.copySuccess=!1}),2e3)}catch{const o=document.createElement("textarea");o.value=e,document.body.appendChild(o),o.select(),document.execCommand("copy"),document.body.removeChild(o),this.copySuccess=!0,setTimeout((()=>{this.copySuccess=!1}),2e3)}};closeDialog=()=>{this.isDialogOpen=!1,this.dialogClosed.emit()};render(){return s(t,{key:"031cf5d1ab48f2791454d4c7348352295359d225"},s("kritzel-dialog",{key:"cdce63c86ca329a97d1f1787adcb2b92bbfa40f9",dialogTitle:this.terms["share.dialogTitle"]??"Share Workspace",size:"small",isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,contained:!0},s("div",{key:"dbb62b3cb175358955b11f6c2d74b0b0eecf212e",class:"share-content"},s("div",{key:"8dc0eaea9644b60ff33812dac20def226fa14232",class:"share-section"},s("div",{key:"d3cfbf05c28a01681b1223edb6f0b73998ccfd08",class:"share-row"},s("div",{key:"2400f062f92dd918341391cf71086c2676f7fc66",class:"share-label-group"},s("label",{key:"ab01691b9f53f59f92116a2994b6e3551d347c7b",class:"share-label"},this.terms["share.linkSharing.label"]??"Link sharing"),s("p",{key:"fd830ad21e32e4fc5d8ba97d5cea7ef8da15fba4",class:"share-description"},this.internalIsPublic?this.terms["share.linkSharing.enabledDescription"]??"Anyone with the link can access this workspace.":this.terms["share.linkSharing.disabledDescription"]??"Link sharing is disabled. Only you can access this workspace.")),s("kritzel-slide-toggle",{key:"6f1a71ba524b34753ccd5437eab00bfcbeffdd79",checked:this.internalIsPublic,onCheckedChange:this.handleToggleChange,label:this.terms["share.linkSharing.toggleLabel"]??"Enable link sharing"}))),this.internalIsPublic&&s("div",{key:"298680e1afdf0094c5393aa95c4983a0a8dd5e18",class:"share-section"},s("div",{key:"546645a748cf9a42df0c8163f2478ef31445273a",class:"share-url-container"},s("input",{key:"9d5b93d762d1cd899f3fc8041380bae603a4919c",type:"text",class:"share-url-input",value:this.getShareUrl(),readOnly:!0,onClick:e=>e.target.select()}),s("button",{key:"747a7ca4a25827de6934b7df30cabc2db4583e1b",class:{"copy-button":!0,"copy-success":this.copySuccess},onClick:this.handleCopyUrl,title:this.copySuccess?this.terms["share.copyLink.copied"]??"Copied!":this.terms["share.copyLink.title"]??"Copy link"},s("kritzel-icon",{key:"096ca9a0527796462769dc9d42dd81d8f97f2865",name:this.copySuccess?"check":"copy",size:18})))))))}static get watchers(){return{isPublic:[{onIsPublicChange:0}]}}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:420px}.share-content{display:flex;flex-direction:column;gap:20px}.share-section{display:flex;flex-direction:column;gap:8px}.share-section-revoke{padding-top:12px;border-top:1px solid var(--kritzel-share-dialog-border-color, #e5e5e5)}.share-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.share-label-group{display:flex;flex-direction:column;gap:8px;flex:1}.share-label{font-size:14px;font-weight:600;color:var(--kritzel-share-dialog-label-color, #333333);margin:0}.share-description{font-size:12px;color:var(--kritzel-share-dialog-description-color, #666666);margin:0;line-height:1.4}.share-url-container{display:flex;align-items:center;gap:8px;background:var(--kritzel-share-dialog-input-background, #f5f5f5);border:1px solid var(--kritzel-share-dialog-input-border-color, #e0e0e0);border-radius:6px;padding:4px 4px 4px 12px}.share-url-input{flex:1;border:none;background:transparent;font-size:13px;color:var(--kritzel-share-dialog-input-text-color, #333333);outline:none;min-width:0;padding:8px 0}.share-url-input:focus{outline:none}.share-url-input::selection{background:var(--kritzel-share-dialog-selection-color, #cce5ff)}.copy-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:4px;background:var(--kritzel-share-dialog-copy-button-background, #ffffff);color:var(--kritzel-share-dialog-copy-button-color, #666666);cursor:pointer;transition:all 0.15s ease;flex-shrink:0}.copy-button:hover{background:var(--kritzel-share-dialog-copy-button-hover-background, #e8e8e8);color:var(--kritzel-share-dialog-copy-button-hover-color, #333333)}.copy-button.copy-success{background:var(--kritzel-share-dialog-copy-success-background, #d4edda);color:var(--kritzel-share-dialog-copy-success-color, #28a745)}.revoke-button{align-self:flex-start;padding:8px 16px;border:1px solid var(--kritzel-share-dialog-revoke-button-border-color, #dc3545);border-radius:6px;background:transparent;color:var(--kritzel-share-dialog-revoke-button-color, #dc3545);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s ease}.revoke-button:hover{background:var(--kritzel-share-dialog-revoke-button-hover-background, #dc3545);color:var(--kritzel-share-dialog-revoke-button-hover-color, #ffffff)}kritzel-dropdown{--kritzel-dropdown-trigger-padding:8px 12px;--kritzel-dropdown-trigger-font-size:13px}"}},[513,"kritzel-share-dialog",{isPublic:[4,"is-public"],workspaceId:[1,"workspace-id"],terms:[16],isDialogOpen:[32],internalIsPublic:[32],copySuccess:[32],open:[64],close:[64]},void 0,{isPublic:[{onIsPublicChange:0}]}]);function d(){"undefined"!=typeof customElements&&["kritzel-share-dialog","kritzel-dialog","kritzel-icon","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-share-dialog":customElements.get(a(e))||customElements.define(a(e),n);break;case"kritzel-dialog":customElements.get(a(e))||r();break;case"kritzel-icon":customElements.get(a(e))||c();break;case"kritzel-slide-toggle":customElements.get(a(e))||l()}}))}export{n as K,d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-B43upypT.js";import{f as n,e as l}from"./p-
|
|
1
|
+
import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-B43upypT.js";import{f as n,e as l}from"./p-CPMpf9ku.js";import{a}from"./p-CpzicliK.js";import{d as h}from"./p-C4-Som48.js";import{d as p}from"./p-CO0eEzos.js";import{d as c}from"./p-Df3BwVGy.js";import{d}from"./p-BX-nQAyH.js";import{d as m}from"./p-JhOYwUOj.js";import{d as f}from"./p-Cb5YwXbC.js";import{d as u}from"./p-CdR76C4L.js";import{d as g}from"./p-CXpv9Rxe.js";import{d as z}from"./p-CdkNxxut.js";import{d as y}from"./p-BFYtCsZu.js";import{d as k}from"./p-C1jg5IQi.js";class C{static getToolConfig(e){switch(e?.toolType){case"selection":return"getToolConfig"in e&&"function"==typeof e.getToolConfig?e.getToolConfig():null;case"brush":return{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"}]};case"line":return{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]};case"shape":return{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]};case"text":return{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]};default:return null}}}const x=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=C.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=C.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;engine;terms={};handleSelectionChangeBound=this.handleSelectionChange.bind(this);onThemeChange(){this.emitDisplayValues()}handleEngineChange(e,t){t&&t.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound),e&&e.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}toolChange;displayValuesChange;config;palette=[];sizes=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof n&&(this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}disconnectedCallback(){this.engine&&this.engine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}componentWillLoad(){this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()),this.engine&&this.engine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:a.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof l&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}updateSizes(){this.config&&(this.sizes="none"===this.config.sizesSource?[]:this.tool.sizes||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return i("kritzel-stroke-size",{key:e.type,sizes:this.sizes,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,sizes:this.sizes,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,s=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?this.terms["toolConfig.collapse"]??"Collapse":this.terms["toolConfig.expand"]??"Expand"},i("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],engine:[16],terms:[16],config:[32],palette:[32],sizes:[32],currentOpacity:[32],updateTrigger:[32]},void 0,{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}]);function b(){"undefined"!=typeof customElements&&["kritzel-tool-config","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"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),x);break;case"kritzel-color":customElements.get(r(e))||h();break;case"kritzel-color-palette":customElements.get(r(e))||p();break;case"kritzel-dropdown":customElements.get(r(e))||c();break;case"kritzel-font":customElements.get(r(e))||d();break;case"kritzel-font-family":customElements.get(r(e))||m();break;case"kritzel-font-size":customElements.get(r(e))||f();break;case"kritzel-icon":customElements.get(r(e))||u();break;case"kritzel-line-endings":customElements.get(r(e))||g();break;case"kritzel-opacity-slider":customElements.get(r(e))||z();break;case"kritzel-shape-fill":customElements.get(r(e))||y();break;case"kritzel-stroke-size":customElements.get(r(e))||k()}}))}export{C as K,x as a,b 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-
|
|
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 a=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:"ba4d13171aa25acac6c615ee12f35eab96d0aad6",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:"923168164a018b08eac4246d88c7f8648b71d078",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"aafad8ab026d591ebb9e2aeffa15d07718eba261"})))}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 h(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))}export{a as K,h as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,c as i,h as e,d as n,t as h}from"./p-B43upypT.js";import{O as o}from"./p-
|
|
1
|
+
import{p as t,H as s,c as i,h as e,d as n,t as h}from"./p-B43upypT.js";import{O as o}from"./p-Dd-pMvlr.js";import{K as r}from"./p-WUdQqYnu.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.close=i(this,"close")}get host(){return this}anchor;anchorChanged(t){t?(this.openPortal(),requestAnimationFrame((()=>{this.calculatePosition(),this.autoFocus&&this.focusFirstElement()}))):this.closePortal()}offsetX;offsetY;autoFocus=!0;close;handleDismissMenus(){this.portal&&(this.close.emit(),this.closePortal())}handleOutsideClick(t){this.lastAddedPortal===this.portal&&(this.host.contains(t.target)||(this.close.emit(),this.closePortal()))}handleOutsidePointerDown(t){if(!this.portal)return;if(this.lastAddedPortal!==this.portal)return;const s=t.composedPath(),i=s.some((t=>t===this.host)),e=this.anchor&&s.some((t=>t===this.anchor));i||e||(t.stopPropagation(),t.preventDefault(),this.close.emit(),this.closePortal())}handleKeyDown(t){if(this.lastAddedPortal===this.portal){if("Escape"===t.key)return t.stopPropagation(),this.anchor.focus(),this.close.emit(),void this.closePortal();if("Tab"!==t.key){if("Enter"===t.key){const s=this.getDeepActiveElement();s?.click&&(t.preventDefault(),s.click())}}else this.trapFocus(t)}}handleResize(){this.calculatePosition()}handleWindowScroll(){if(!r.isElementInViewport(this.anchor))return this.anchor?.blur(),void this.closePortal();this.calculatePosition()}portal;id=`portal-${o.generateUUID()}`;defaultOffset=0;minLeft=0;themeObserver;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(t){const s=r.getFocusableElements(this.host);if(0===s.length)return;const i=s[0],e=s[s.length-1],n=this.getDeepActiveElement();t.shiftKey?n===i&&(e.focus(),t.preventDefault()):n===e&&(i.focus(),t.preventDefault())}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot"),s=t?.assignedElements({flatten:!0})[0];return s?r.getFocusableElements(s)[0]??s:null}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetX??this.defaultOffset;let e;e=t.left+t.width/2>window.innerWidth/2?t.right-s.width-i:t.left+i;const n=window.innerWidth-s.width-this.minLeft;return e<this.minLeft&&(e=this.minLeft),e>n&&(e=n),Math.round(e+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetY??this.defaultOffset;let e=t.bottom+i;const n=window.innerHeight-t.bottom-i-8,h=t.top-i-8;return this.host.style.removeProperty("--kritzel-portal-max-height"),s.height<=n?e=t.bottom+i:s.height<=h?e=t.top-s.height-i:n>=h?(e=t.bottom+i,this.host.style.setProperty("--kritzel-portal-max-height",`${n}px`)):(e=8,this.host.style.setProperty("--kritzel-portal-max-height",`${h}px`)),Math.round(e+window.scrollY)}getThemeProvider(){if(!this.anchor)return null;let t=this.anchor;for(;t;){const i=t.closest("kritzel-editor");if(i instanceof s)return i;const e=t.closest('[id^="portal-"]');if(e instanceof s)return e;const n=t.getRootNode();if(!(n instanceof ShadowRoot))return null;t=n.host}return null}openPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.id),this.portal.style.zIndex="1",this.portal.style.position="absolute",this.portal.style.top="0px",this.portal.style.left="0px",this.portal.style.visibility="hidden";const t=this.getThemeProvider();if(t){const s=()=>{if(this.portal)for(let s=0;s<t.style.length;s++){const i=t.style[s];i.startsWith("--kritzel-")&&this.portal.style.setProperty(i,t.style.getPropertyValue(i))}};s(),this.themeObserver=new MutationObserver((()=>s())),this.themeObserver.observe(t,{attributes:!0,attributeFilter:["style"]})}this.portal.appendChild(this.host),document.body.append(this.portal)}closePortal(){this.themeObserver?.disconnect(),this.themeObserver=null;const t=document.getElementById(this.id);t&&(document.body.removeChild(t),this.host.remove())}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop(),s=this.calculateLeft();this.portal.style.top=`${t}px`,this.portal.style.left=`${s}px`,this.portal.style.visibility="visible"}render(){return e(n,{key:"95fbfde070f33a7f1b59026de7c687a2f6d0119c",style:{display:this.anchor?"block":"none"}},e("slot",{key:"14af59a35c5caf71079f7afb5ea6f4c5f13b05f8"}))}static get watchers(){return{anchor:[{anchorChanged:0}]}}},[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"kritzel-dismiss-menus","handleDismissMenus"],[8,"click","handleOutsideClick"],[6,"pointerdown","handleOutsidePointerDown"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:[{anchorChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-portal"].forEach((t=>{"kritzel-portal"===t&&(customElements.get(h(t))||customElements.define(h(t),l))}))}export{l as K,a 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-BO1CnEOT.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-BPoDE87Q.js";import{a as h}from"./p-CpzicliK.js";import{d as p}from"./p-C4-Som48.js";import{d as k}from"./p-CO0eEzos.js";import{d as f}from"./p-Df3BwVGy.js";import{d as b}from"./p-BX-nQAyH.js";import{d as u}from"./p-JhOYwUOj.js";import{d as g}from"./p-Cb5YwXbC.js";import{d as z}from"./p-CdR76C4L.js";import{d as m}from"./p-CXpv9Rxe.js";import{d as v}from"./p-CdkNxxut.js";import{d as y}from"./p-BFYtCsZu.js";import{d as x}from"./p-C1jg5IQi.js";import{d as w}from"./p-DRsD38Nl.js";import{d as C}from"./p-NwN6r0N0.js";const j=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}visible=!0;controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme="light";terms={};isControlsReady;firstConfig=null;isTouchDevice=a.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;internalControls=[];handleActiveToolChangeBound=this.handleActiveToolChange.bind(this);handleSelectionChangeBound=this.handleSelectionChange.bind(this);handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.internalControls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async onControlsChange(){this.kritzelEngine&&await this.initializeTools()}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=c.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:h.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof s&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}componentDidRender(){this.updateScrollIndicators()}disconnectedCallback(){this.kritzelEngine&&(this.kritzelEngine.removeEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound))}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.");this.kritzelEngine.addEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}async initializeTools(){let t=!1;const o=this.controls.map((t=>({...t})));for(const e of o){if("tool"===e.type&&e.tool){let t=e.tool;"function"!=typeof t&&(t=t.constructor);const o=await this.kritzelEngine.registerTool(e.name,t,e.config);o&&(e.tool=o)}"tool"===e.type&&e.isDefault&&e.tool&&(await this.kritzelEngine.changeActiveTool(e.tool),this.activeControl=e,this.updateDisplayValues(e.tool),t=!0),"config"===e.type&&(null===this.firstConfig?this.firstConfig=e:console.warn("Only one config control is allowed. The first one will be used."))}if(this.internalControls=o,!t){const t=this.internalControls.find((t=>"tool"===t.type&&t.tool));t&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool))}}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.closeTooltip(),await this.handleControlClick(t)}render(){const t=null!==(this.activeControl?.tool?c.getToolConfig(this.activeControl.tool):null),o=this.internalControls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.internalControls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"266e38cdeffb8c22a7f778e865e5fab6b461f5b6",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"5e75ece000ac02675d3d226461b7f522dcf5ead9",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,terms:this.terms,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"fc98b1675afe1abb6a8d391c4ace34c7f0e46677",class:"kritzel-controls"},r("div",{key:"b17bc9e9a65646735c56f78a326a281229fa9790",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"9ab9d5c44e515551d75f27c31875de72e9d3407c",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),"aria-label":o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":`Select ${t.name} options`,"data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t),"aria-label":t.name.charAt(0).toUpperCase()+t.name.slice(1)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"fad7512f5d1aa68905a56b8f22d498380f166f9f",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"2ff7cb3ad18608102f3d8188b5936cf00b00451f",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"10f15f717c8573cbad6ea53b412ad56254099ad1",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"a1b0ed8ecc2696a591e32add642a3d5cb2bf7f4a",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,terms:this.terms,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"7ac8214a3dbad5323a38cad3ff7324b57f9dbfb5",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.displayValues&&r("div",{key:"7e64f79859f7f2b03d72bb7a93fb295e7d2b2ac0",class:"color-container"},r("kritzel-color",{key:"b87d9861949379d84954ef1ecb554e13317b3287",value:this.displayValues.color,theme:this.theme,size:18,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{visible:[4],controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],terms:[16],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],internalControls:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"]],{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}]);function E(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),j);break;case"kritzel-color":customElements.get(l(t))||p();break;case"kritzel-color-palette":customElements.get(l(t))||k();break;case"kritzel-dropdown":customElements.get(l(t))||f();break;case"kritzel-font":customElements.get(l(t))||b();break;case"kritzel-font-family":customElements.get(l(t))||u();break;case"kritzel-font-size":customElements.get(l(t))||g();break;case"kritzel-icon":customElements.get(l(t))||z();break;case"kritzel-line-endings":customElements.get(l(t))||m();break;case"kritzel-opacity-slider":customElements.get(l(t))||v();break;case"kritzel-shape-fill":customElements.get(l(t))||y();break;case"kritzel-stroke-size":customElements.get(l(t))||x();break;case"kritzel-tool-config":customElements.get(l(t))||d();break;case"kritzel-tooltip":customElements.get(l(t))||w();break;case"kritzel-utility-panel":customElements.get(l(t))||C()}}))}export{j as K,E as d}
|
|
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-CPMpf9ku.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-DJ3KI725.js";import{a as h}from"./p-CpzicliK.js";import{d as p}from"./p-C4-Som48.js";import{d as k}from"./p-CO0eEzos.js";import{d as f}from"./p-Df3BwVGy.js";import{d as b}from"./p-BX-nQAyH.js";import{d as u}from"./p-JhOYwUOj.js";import{d as g}from"./p-Cb5YwXbC.js";import{d as z}from"./p-CdR76C4L.js";import{d as m}from"./p-CXpv9Rxe.js";import{d as v}from"./p-CdkNxxut.js";import{d as y}from"./p-BFYtCsZu.js";import{d as x}from"./p-C1jg5IQi.js";import{d as w}from"./p-DPlEzPKO.js";import{d as C}from"./p-NwN6r0N0.js";const j=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}visible=!0;controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme="light";terms={};isControlsReady;firstConfig=null;isTouchDevice=a.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;internalControls=[];handleActiveToolChangeBound=this.handleActiveToolChange.bind(this);handleSelectionChangeBound=this.handleSelectionChange.bind(this);handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.internalControls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async onControlsChange(){this.kritzelEngine&&await this.initializeTools()}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=c.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:h.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof s&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}componentDidRender(){this.updateScrollIndicators()}disconnectedCallback(){this.kritzelEngine&&(this.kritzelEngine.removeEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound))}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.");this.kritzelEngine.addEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}async initializeTools(){let t=!1;const o=this.controls.map((t=>({...t})));for(const e of o){if("tool"===e.type&&e.tool){let t=e.tool;"function"!=typeof t&&(t=t.constructor);const o=await this.kritzelEngine.registerTool(e.name,t,e.config);o&&(e.tool=o)}"tool"===e.type&&e.isDefault&&e.tool&&(await this.kritzelEngine.changeActiveTool(e.tool),this.activeControl=e,this.updateDisplayValues(e.tool),t=!0),"config"===e.type&&(null===this.firstConfig?this.firstConfig=e:console.warn("Only one config control is allowed. The first one will be used."))}if(this.internalControls=o,!t){const t=this.internalControls.find((t=>"tool"===t.type&&t.tool));t&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool))}}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.closeTooltip(),await this.handleControlClick(t)}render(){const t=null!==(this.activeControl?.tool?c.getToolConfig(this.activeControl.tool):null),o=this.internalControls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.internalControls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"266e38cdeffb8c22a7f778e865e5fab6b461f5b6",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"5e75ece000ac02675d3d226461b7f522dcf5ead9",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,terms:this.terms,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"fc98b1675afe1abb6a8d391c4ace34c7f0e46677",class:"kritzel-controls"},r("div",{key:"b17bc9e9a65646735c56f78a326a281229fa9790",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"9ab9d5c44e515551d75f27c31875de72e9d3407c",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),"aria-label":o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":`Select ${t.name} options`,"data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t),"aria-label":t.name.charAt(0).toUpperCase()+t.name.slice(1)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"fad7512f5d1aa68905a56b8f22d498380f166f9f",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"2ff7cb3ad18608102f3d8188b5936cf00b00451f",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"10f15f717c8573cbad6ea53b412ad56254099ad1",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"a1b0ed8ecc2696a591e32add642a3d5cb2bf7f4a",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,terms:this.terms,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"7ac8214a3dbad5323a38cad3ff7324b57f9dbfb5",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.displayValues&&r("div",{key:"7e64f79859f7f2b03d72bb7a93fb295e7d2b2ac0",class:"color-container"},r("kritzel-color",{key:"b87d9861949379d84954ef1ecb554e13317b3287",value:this.displayValues.color,theme:this.theme,size:18,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{visible:[4],controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],terms:[16],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],internalControls:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"]],{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}]);function E(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),j);break;case"kritzel-color":customElements.get(l(t))||p();break;case"kritzel-color-palette":customElements.get(l(t))||k();break;case"kritzel-dropdown":customElements.get(l(t))||f();break;case"kritzel-font":customElements.get(l(t))||b();break;case"kritzel-font-family":customElements.get(l(t))||u();break;case"kritzel-font-size":customElements.get(l(t))||g();break;case"kritzel-icon":customElements.get(l(t))||z();break;case"kritzel-line-endings":customElements.get(l(t))||m();break;case"kritzel-opacity-slider":customElements.get(l(t))||v();break;case"kritzel-shape-fill":customElements.get(l(t))||y();break;case"kritzel-stroke-size":customElements.get(l(t))||x();break;case"kritzel-tool-config":customElements.get(l(t))||d();break;case"kritzel-tooltip":customElements.get(l(t))||w();break;case"kritzel-utility-panel":customElements.get(l(t))||C()}}))}export{j as K,E as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,c as i,h as o,d as l,t as n}from"./p-B43upypT.js";import{K as s}from"./p-BML28BJR.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dialogOpen=i(this,"dialogOpen"),this.dialogClose=i(this,"dialogClose")}get host(){return this}isOpen=!1;dialogTitle;closable=!0;closeOnBackdrop=!0;closeOnEscape=!0;autoFocus=!0;trapFocus=!0;size="medium";fullscreenOnMobile=!0;contained=!1;isAnimating=!1;mobileLockedHeight=null;containerRect=null;containerBorderRadius=null;dialogOpen;dialogClose;previousOverflow="";previousActiveElement=null;visualViewportListenersAttached=!1;containerElement=null;containerResizeObserver=null;containerTrackingFrame=null;handleIsOpenChange(t){t?this.openDialog():this.closeDialog()}handleKeyDown(t){this.isOpen&&("Escape"===t.key&&this.closeOnEscape&&(t.preventDefault(),t.stopPropagation(),this.emitClose("escape")),"Tab"===t.key&&this.trapFocus&&this.handleTabKey(t))}handleWindowResize(){this.isOpen&&this.lockMobileViewportHeight()}handleOrientationChange(){this.isOpen&&requestAnimationFrame((()=>this.lockMobileViewportHeight()))}async open(){this.isOpen||(this.isOpen=!0)}async close(t="programmatic"){this.emitClose(t)}async focusFirstElement(){this.focusFirst()}componentDidLoad(){this.isOpen&&this.openDialog()}disconnectedCallback(){this.removeVisualViewportListeners(),this.stopContainerTracking(),this.restoreBodyScroll()}openDialog(){this.isAnimating=!0,this.previousActiveElement=document.activeElement,this.contained?this.startContainerTracking():(this.lockBodyScroll(),this.addVisualViewportListeners()),this.lockMobileViewportHeight(),this.dialogOpen.emit(),this.autoFocus&&requestAnimationFrame((()=>{this.focusFirst()})),requestAnimationFrame((()=>{this.isAnimating=!1}))}closeDialog(){this.restoreBodyScroll(),this.removeVisualViewportListeners(),this.stopContainerTracking(),this.mobileLockedHeight=null,this.returnFocusToPreviousElement()}findContainerElement(){let t=this.host;for(;t;){if(t instanceof e&&(t.hasAttribute("data-kritzel-dialog-container")||"KRITZEL-EDITOR"===t.tagName))return t;t=t.parentNode||(t instanceof ShadowRoot?t.host:null)}return null}startContainerTracking(){this.containerElement=this.findContainerElement(),this.containerElement?(this.updateContainerRect(),"undefined"!=typeof ResizeObserver&&(this.containerResizeObserver=new ResizeObserver((()=>this.updateContainerRect())),this.containerResizeObserver.observe(this.containerElement)),window.addEventListener("resize",this.handleContainerTrackingEvent,{passive:!0}),window.addEventListener("scroll",this.handleContainerTrackingEvent,{capture:!0,passive:!0})):this.containerRect=null}stopContainerTracking(){this.containerResizeObserver&&(this.containerResizeObserver.disconnect(),this.containerResizeObserver=null),window.removeEventListener("resize",this.handleContainerTrackingEvent),window.removeEventListener("scroll",this.handleContainerTrackingEvent,{capture:!0}),null!==this.containerTrackingFrame&&(cancelAnimationFrame(this.containerTrackingFrame),this.containerTrackingFrame=null),this.containerElement=null,this.containerRect=null,this.containerBorderRadius=null}handleContainerTrackingEvent=()=>{null===this.containerTrackingFrame&&(this.containerTrackingFrame=requestAnimationFrame((()=>{this.containerTrackingFrame=null,this.updateContainerRect()})))};updateContainerRect(){if(!this.containerElement)return;const t=this.containerElement.getBoundingClientRect(),e={top:t.top,left:t.left,width:t.width,height:t.height},i=this.containerRect;i&&i.top===e.top&&i.left===e.left&&i.width===e.width&&i.height===e.height||(this.containerRect=e);const o=this.findVisualBorderRadius(this.containerElement);this.containerBorderRadius!==o&&(this.containerBorderRadius=o)}findVisualBorderRadius(t){let e=t;for(;e&&e!==document.body&&e!==document.documentElement;){const t=window.getComputedStyle(e),i=t.borderTopLeftRadius,o=t.borderTopRightRadius,l=t.borderBottomRightRadius,n=t.borderBottomLeftRadius,s=t=>!t||"0px"===t||"0%"===t;if(!(s(i)&&s(o)&&s(l)&&s(n)))return`${i} ${o} ${l} ${n}`;e=e.parentElement}return null}emitClose(t){this.dialogClose.emit({reason:t})}lockBodyScroll(){this.previousOverflow=document.body.style.overflow,document.body.style.overflow="hidden"}lockMobileViewportHeight(){if(this.contained)return void(this.mobileLockedHeight=null);const t=this.getViewportWidth(),e=this.getViewportHeight();this.mobileLockedHeight=!this.fullscreenOnMobile||Math.min(t,e)>576?null:`${e}px`}getViewportWidth(){return Math.round(window.visualViewport?.width??window.innerWidth)}getViewportHeight(){return Math.round(window.visualViewport?.height??window.innerHeight)}addVisualViewportListeners(){const t=window.visualViewport;t&&!this.visualViewportListenersAttached&&(t.addEventListener("resize",this.handleVisualViewportChange),t.addEventListener("scroll",this.handleVisualViewportChange),this.visualViewportListenersAttached=!0)}removeVisualViewportListeners(){const t=window.visualViewport;t&&this.visualViewportListenersAttached&&(t.removeEventListener("resize",this.handleVisualViewportChange),t.removeEventListener("scroll",this.handleVisualViewportChange),this.visualViewportListenersAttached=!1)}handleVisualViewportChange=()=>{this.isOpen&&this.lockMobileViewportHeight()};restoreBodyScroll(){document.body.style.overflow=this.previousOverflow}returnFocusToPreviousElement(){this.previousActiveElement?.focus&&this.previousActiveElement.focus()}focusFirst(){const t=this.host.shadowRoot?.querySelector(".dialog-content");if(!t)return;const e=[...s.getFocusableElements(t),...this.getSlottedFocusableElements()];e.length>0?e[0].focus():t.focus()}getSlottedFocusableElements(){const t=this.host.shadowRoot?.querySelectorAll("slot")??[],e=[];return t.forEach((t=>{t.assignedElements({flatten:!0}).forEach((t=>{const i=s.getFocusableElements(t);e.push(...i)}))})),e}handleTabKey(t){const e=this.getSlottedFocusableElements(),i=this.host.shadowRoot?.querySelector(".close-button");if(i&&this.closable&&e.unshift(i),0===e.length)return;const o=e[0],l=e[e.length-1],n=this.getDeepActiveElement();t.shiftKey?n===o&&(t.preventDefault(),l.focus()):n===l&&(t.preventDefault(),o.focus())}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}handleBackdropClick=t=>{t.stopPropagation(),this.closeOnBackdrop&&this.emitClose("backdrop")};handleCloseButtonClick=t=>{t.stopPropagation(),this.emitClose("close-button")};handleContentClick=t=>{t.stopPropagation()};renderCloseButton(){return this.closable?o("button",{class:"close-button",type:"button","aria-label":"Close dialog",onClick:this.handleCloseButtonClick},o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null}renderHeader(){const t=null!==this.host.querySelector('[slot="header"]'),e=!!this.dialogTitle;return t||e||this.closable?o("div",{class:"dialog-header"},t?o("slot",{name:"header"}):e?o("h2",{class:"dialog-title"},this.dialogTitle):null,this.renderCloseButton()):null}renderFooter(){return null!==this.host.querySelector('[slot="footer"]')?o("div",{class:"dialog-footer"},o("slot",{name:"footer"})):null}getBackdropStyle(){if(!this.contained||!this.containerRect)return;const{top:t,left:e,width:i,height:o}=this.containerRect,l={top:`${t}px`,left:`${e}px`,right:"auto",bottom:"auto",width:`${i}px`,height:`${o}px`};return this.containerBorderRadius&&(l.borderRadius=this.containerBorderRadius,l.overflow="hidden"),l}getDialogContentStyle(){const t={};if(this.contained&&this.containerRect){const{width:e,height:i}=this.containerRect;if(this.isContainerMobile())t.width=`${e}px`,t.height=`${i}px`,t.maxWidth=`${e}px`,t.maxHeight=`${i}px`,t.borderRadius="0";else{const o=Math.max(0,e-32),l=Math.max(0,i-32);t.maxWidth=`${o}px`,t.maxHeight=`${l}px`}}return this.mobileLockedHeight&&(t.height=this.mobileLockedHeight,t.maxHeight=this.mobileLockedHeight),Object.keys(t).length>0?t:void 0}isContainerMobile(){return!(!this.fullscreenOnMobile||!this.containerRect)&&Math.min(this.containerRect.width,this.containerRect.height)<=576}render(){if(!this.isOpen)return null;const t=this.contained&&this.isContainerMobile();return o(l,null,o("div",{class:{backdrop:!0,"is-animating":this.isAnimating,"contained-fullscreen":t},style:this.getBackdropStyle(),onClick:this.handleBackdropClick},o("div",{class:{"dialog-content":!0,"is-animating":this.isAnimating,[`size-${this.size}`]:!0,"fullscreen-on-mobile":this.fullscreenOnMobile,"contained-fullscreen":t},style:this.getDialogContentStyle(),role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?"dialog-title":void 0,tabIndex:-1,onClick:this.handleContentClick},this.renderHeader(),o("div",{class:"dialog-body"},o("slot",null)),this.renderFooter())))}static get watchers(){return{isOpen:[{handleIsOpenChange:0}]}}static get style(){return":host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}"}},[769,"kritzel-dialog",{isOpen:[516,"is-open"],dialogTitle:[1,"dialog-title"],closable:[4],closeOnBackdrop:[4,"close-on-backdrop"],closeOnEscape:[4,"close-on-escape"],autoFocus:[4,"auto-focus"],trapFocus:[4,"trap-focus"],size:[1],fullscreenOnMobile:[4,"fullscreen-on-mobile"],contained:[516],isAnimating:[32],mobileLockedHeight:[32],containerRect:[32],containerBorderRadius:[32],open:[64],close:[64],focusFirstElement:[64]},[[8,"keydown","handleKeyDown"],[9,"resize","handleWindowResize"],[8,"orientationchange","handleOrientationChange"]],{isOpen:[{handleIsOpenChange:0}]}]);function r(){"undefined"!=typeof customElements&&["kritzel-dialog"].forEach((t=>{"kritzel-dialog"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))}export{a as K,r as d}
|
|
1
|
+
import{p as t,H as e,c as i,h as o,d as l,t as n}from"./p-B43upypT.js";import{K as s}from"./p-WUdQqYnu.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dialogOpen=i(this,"dialogOpen"),this.dialogClose=i(this,"dialogClose")}get host(){return this}isOpen=!1;dialogTitle;closable=!0;closeOnBackdrop=!0;closeOnEscape=!0;autoFocus=!0;trapFocus=!0;size="medium";fullscreenOnMobile=!0;contained=!1;isAnimating=!1;mobileLockedHeight=null;containerRect=null;containerBorderRadius=null;dialogOpen;dialogClose;previousOverflow="";previousActiveElement=null;visualViewportListenersAttached=!1;containerElement=null;containerResizeObserver=null;containerTrackingFrame=null;handleIsOpenChange(t){t?this.openDialog():this.closeDialog()}handleKeyDown(t){this.isOpen&&("Escape"===t.key&&this.closeOnEscape&&(t.preventDefault(),t.stopPropagation(),this.emitClose("escape")),"Tab"===t.key&&this.trapFocus&&this.handleTabKey(t))}handleWindowResize(){this.isOpen&&this.lockMobileViewportHeight()}handleOrientationChange(){this.isOpen&&requestAnimationFrame((()=>this.lockMobileViewportHeight()))}async open(){this.isOpen||(this.isOpen=!0)}async close(t="programmatic"){this.emitClose(t)}async focusFirstElement(){this.focusFirst()}componentDidLoad(){this.isOpen&&this.openDialog()}disconnectedCallback(){this.removeVisualViewportListeners(),this.stopContainerTracking(),this.restoreBodyScroll()}openDialog(){this.isAnimating=!0,this.previousActiveElement=document.activeElement,this.contained?this.startContainerTracking():(this.lockBodyScroll(),this.addVisualViewportListeners()),this.lockMobileViewportHeight(),this.dialogOpen.emit(),this.autoFocus&&requestAnimationFrame((()=>{this.focusFirst()})),requestAnimationFrame((()=>{this.isAnimating=!1}))}closeDialog(){this.restoreBodyScroll(),this.removeVisualViewportListeners(),this.stopContainerTracking(),this.mobileLockedHeight=null,this.returnFocusToPreviousElement()}findContainerElement(){let t=this.host;for(;t;){if(t instanceof e&&(t.hasAttribute("data-kritzel-dialog-container")||"KRITZEL-EDITOR"===t.tagName))return t;t=t.parentNode||(t instanceof ShadowRoot?t.host:null)}return null}startContainerTracking(){this.containerElement=this.findContainerElement(),this.containerElement?(this.updateContainerRect(),"undefined"!=typeof ResizeObserver&&(this.containerResizeObserver=new ResizeObserver((()=>this.updateContainerRect())),this.containerResizeObserver.observe(this.containerElement)),window.addEventListener("resize",this.handleContainerTrackingEvent,{passive:!0}),window.addEventListener("scroll",this.handleContainerTrackingEvent,{capture:!0,passive:!0})):this.containerRect=null}stopContainerTracking(){this.containerResizeObserver&&(this.containerResizeObserver.disconnect(),this.containerResizeObserver=null),window.removeEventListener("resize",this.handleContainerTrackingEvent),window.removeEventListener("scroll",this.handleContainerTrackingEvent,{capture:!0}),null!==this.containerTrackingFrame&&(cancelAnimationFrame(this.containerTrackingFrame),this.containerTrackingFrame=null),this.containerElement=null,this.containerRect=null,this.containerBorderRadius=null}handleContainerTrackingEvent=()=>{null===this.containerTrackingFrame&&(this.containerTrackingFrame=requestAnimationFrame((()=>{this.containerTrackingFrame=null,this.updateContainerRect()})))};updateContainerRect(){if(!this.containerElement)return;const t=this.containerElement.getBoundingClientRect(),e={top:t.top,left:t.left,width:t.width,height:t.height},i=this.containerRect;i&&i.top===e.top&&i.left===e.left&&i.width===e.width&&i.height===e.height||(this.containerRect=e);const o=this.findVisualBorderRadius(this.containerElement);this.containerBorderRadius!==o&&(this.containerBorderRadius=o)}findVisualBorderRadius(t){let e=t;for(;e&&e!==document.body&&e!==document.documentElement;){const t=window.getComputedStyle(e),i=t.borderTopLeftRadius,o=t.borderTopRightRadius,l=t.borderBottomRightRadius,n=t.borderBottomLeftRadius,s=t=>!t||"0px"===t||"0%"===t;if(!(s(i)&&s(o)&&s(l)&&s(n)))return`${i} ${o} ${l} ${n}`;e=e.parentElement}return null}emitClose(t){this.dialogClose.emit({reason:t})}lockBodyScroll(){this.previousOverflow=document.body.style.overflow,document.body.style.overflow="hidden"}lockMobileViewportHeight(){if(this.contained)return void(this.mobileLockedHeight=null);const t=this.getViewportWidth(),e=this.getViewportHeight();this.mobileLockedHeight=!this.fullscreenOnMobile||Math.min(t,e)>576?null:`${e}px`}getViewportWidth(){return Math.round(window.visualViewport?.width??window.innerWidth)}getViewportHeight(){return Math.round(window.visualViewport?.height??window.innerHeight)}addVisualViewportListeners(){const t=window.visualViewport;t&&!this.visualViewportListenersAttached&&(t.addEventListener("resize",this.handleVisualViewportChange),t.addEventListener("scroll",this.handleVisualViewportChange),this.visualViewportListenersAttached=!0)}removeVisualViewportListeners(){const t=window.visualViewport;t&&this.visualViewportListenersAttached&&(t.removeEventListener("resize",this.handleVisualViewportChange),t.removeEventListener("scroll",this.handleVisualViewportChange),this.visualViewportListenersAttached=!1)}handleVisualViewportChange=()=>{this.isOpen&&this.lockMobileViewportHeight()};restoreBodyScroll(){document.body.style.overflow=this.previousOverflow}returnFocusToPreviousElement(){this.previousActiveElement?.focus&&this.previousActiveElement.focus()}focusFirst(){const t=this.host.shadowRoot?.querySelector(".dialog-content");if(!t)return;const e=[...s.getFocusableElements(t),...this.getSlottedFocusableElements()];e.length>0?e[0].focus():t.focus()}getSlottedFocusableElements(){const t=this.host.shadowRoot?.querySelectorAll("slot")??[],e=[];return t.forEach((t=>{t.assignedElements({flatten:!0}).forEach((t=>{const i=s.getFocusableElements(t);e.push(...i)}))})),e}handleTabKey(t){const e=this.getSlottedFocusableElements(),i=this.host.shadowRoot?.querySelector(".close-button");if(i&&this.closable&&e.unshift(i),0===e.length)return;const o=e[0],l=e[e.length-1],n=this.getDeepActiveElement();t.shiftKey?n===o&&(t.preventDefault(),l.focus()):n===l&&(t.preventDefault(),o.focus())}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}handleBackdropClick=t=>{t.stopPropagation(),this.closeOnBackdrop&&this.emitClose("backdrop")};handleCloseButtonClick=t=>{t.stopPropagation(),this.emitClose("close-button")};handleContentClick=t=>{t.stopPropagation()};renderCloseButton(){return this.closable?o("button",{class:"close-button",type:"button","aria-label":"Close dialog",onClick:this.handleCloseButtonClick},o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null}renderHeader(){const t=null!==this.host.querySelector('[slot="header"]'),e=!!this.dialogTitle;return t||e||this.closable?o("div",{class:"dialog-header"},t?o("slot",{name:"header"}):e?o("h2",{class:"dialog-title"},this.dialogTitle):null,this.renderCloseButton()):null}renderFooter(){return null!==this.host.querySelector('[slot="footer"]')?o("div",{class:"dialog-footer"},o("slot",{name:"footer"})):null}getBackdropStyle(){if(!this.contained||!this.containerRect)return;const{top:t,left:e,width:i,height:o}=this.containerRect,l={top:`${t}px`,left:`${e}px`,right:"auto",bottom:"auto",width:`${i}px`,height:`${o}px`};return this.containerBorderRadius&&(l.borderRadius=this.containerBorderRadius,l.overflow="hidden"),l}getDialogContentStyle(){const t={};if(this.contained&&this.containerRect){const{width:e,height:i}=this.containerRect;if(this.isContainerMobile())t.width=`${e}px`,t.height=`${i}px`,t.maxWidth=`${e}px`,t.maxHeight=`${i}px`,t.borderRadius="0";else{const o=Math.max(0,e-32),l=Math.max(0,i-32);t.maxWidth=`${o}px`,t.maxHeight=`${l}px`}}return this.mobileLockedHeight&&(t.height=this.mobileLockedHeight,t.maxHeight=this.mobileLockedHeight),Object.keys(t).length>0?t:void 0}isContainerMobile(){return!(!this.fullscreenOnMobile||!this.containerRect)&&Math.min(this.containerRect.width,this.containerRect.height)<=576}render(){if(!this.isOpen)return null;const t=this.contained&&this.isContainerMobile();return o(l,null,o("div",{class:{backdrop:!0,"is-animating":this.isAnimating,"contained-fullscreen":t},style:this.getBackdropStyle(),onClick:this.handleBackdropClick},o("div",{class:{"dialog-content":!0,"is-animating":this.isAnimating,[`size-${this.size}`]:!0,"fullscreen-on-mobile":this.fullscreenOnMobile,"contained-fullscreen":t},style:this.getDialogContentStyle(),role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?"dialog-title":void 0,tabIndex:-1,onClick:this.handleContentClick},this.renderHeader(),o("div",{class:"dialog-body"},o("slot",null)),this.renderFooter())))}static get watchers(){return{isOpen:[{handleIsOpenChange:0}]}}static get style(){return":host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}"}},[769,"kritzel-dialog",{isOpen:[516,"is-open"],dialogTitle:[1,"dialog-title"],closable:[4],closeOnBackdrop:[4,"close-on-backdrop"],closeOnEscape:[4,"close-on-escape"],autoFocus:[4,"auto-focus"],trapFocus:[4,"trap-focus"],size:[1],fullscreenOnMobile:[4,"fullscreen-on-mobile"],contained:[516],isAnimating:[32],mobileLockedHeight:[32],containerRect:[32],containerBorderRadius:[32],open:[64],close:[64],focusFirstElement:[64]},[[8,"keydown","handleKeyDown"],[9,"resize","handleWindowResize"],[8,"orientationchange","handleOrientationChange"]],{isOpen:[{handleIsOpenChange:0}]}]);function r(){"undefined"!=typeof customElements&&["kritzel-dialog"].forEach((t=>{"kritzel-dialog"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))}export{a as K,r as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class t{static generateUUID(t=16){const r=crypto.getRandomValues(new Uint8Array(t));return Array.from(r).map((t=>"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"[t%62])).join("")}static isEmpty(t){return null==t||0===Object?.keys(t).length&&t?.constructor===Object}}export{t as O}
|
|
1
|
+
class t{static generateUUID(t=16){const r=crypto.getRandomValues(new Uint8Array(t));return Array.from(r).map((t=>"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"[t%62])).join("")}static isEmpty(t){return null==t||0===Object?.keys(t).length&&t?.constructor===Object}static isClass(t,r){return!!t&&t.__class__===r}}export{t as O}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,c as i,h as n,d as s,t as o}from"./p-B43upypT.js";import{K as l}from"./p-jGOpkGDl.js";import{d as r}from"./p-CdR76C4L.js";import{d as a,a as u}from"./p-
|
|
1
|
+
import{p as t,H as e,c as i,h as n,d as s,t as o}from"./p-B43upypT.js";import{K as l}from"./p-jGOpkGDl.js";import{d as r}from"./p-CdR76C4L.js";import{d as a,a as u}from"./p-BntMEYss.js";import{d as c}from"./p-DSd5xTAH.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.mainButtonClick=i(this,"mainButtonClick"),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu"),this.menuOpen=i(this,"menuOpen"),this.menuClose=i(this,"menuClose")}get host(){return this}buttonIcon="plus";dropdownIcon="chevron-down";items=[];mainButtonDisabled=!1;menuButtonDisabled=!1;mainButtonClick;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;menuOpen;menuClose;isMenuOpen=!1;isTouchDevice=l.isTouchDevice();anchorElement;menuScrollTop=0;splitMenuButtonRef;menuRef;async open(){this.isMenuOpen||(window.dispatchEvent(new CustomEvent("kritzel-dismiss-menus")),this.isMenuOpen=!0,this.anchorElement=this.host,this.menuOpen.emit())}async focusMenu(){this.menuRef&&await this.menuRef.setFocus()}handleButtonClick=t=>{t.stopPropagation(),this.mainButtonClick.emit()};toggleMenu=t=>{t.stopPropagation(),this.isMenuOpen?this.closeMenu():this.openMenu(t)};openMenu=t=>{t.stopPropagation(),window.dispatchEvent(new CustomEvent("kritzel-dismiss-menus")),this.isMenuOpen=!0,this.anchorElement=this.host,this.menuOpen.emit(),requestAnimationFrame((()=>{this.menuRef?.setScrollTop(this.menuScrollTop)}))};closeMenu=()=>{this.isMenuOpen=!1,this.anchorElement=null,this.splitMenuButtonRef?.blur(),this.menuClose.emit()};handleItemSelect=t=>{this.itemSelect.emit(t.detail)};handleItemSave=t=>{this.itemSave.emit(t.detail)};handleItemCancel=t=>{this.itemCancel.emit(t.detail)};handleItemToggleChildMenu=t=>{this.itemToggleChildMenu.emit(t.detail)};handleItemCloseChildMenu=t=>{this.itemCloseChildMenu.emit(t.detail)};handleScroll=t=>{this.menuScrollTop=t.target.scrollTop};render(){return n(s,{key:"d6856a86b3be4d9a22c5e78df1bda19113cb988b",class:{mobile:this.isTouchDevice}},n("button",{key:"d26026af275a8bd5717254223d5829e3d7f02bcb",class:"split-main-button",tabIndex:0,onClick:this.handleButtonClick,disabled:this.mainButtonDisabled,"aria-label":"Main action"},this.buttonIcon&&n("kritzel-icon",{key:"1b3e2f4c2f8245b281d0f85458fd6bcc0cc73c59",name:this.buttonIcon})),n("div",{key:"b002b904e168d62075fa086c88df72e36cc8e8c2",class:"split-divider"}),n("button",{key:"d39084da6775613f2c896f3fa1ae4e216505bacc",ref:t=>this.splitMenuButtonRef=t,class:"split-menu-button",tabIndex:0,onClick:this.toggleMenu,disabled:this.menuButtonDisabled,"aria-label":"Open menu"},n("kritzel-icon",{key:"b1bc427b0d7cd26a283dbeb772dee0a6d2ca172c",name:this.dropdownIcon})),n("kritzel-portal",{key:"e76300f48a23772a5923ea2cbd0824590302e7e7",anchor:this.anchorElement,offsetY:4,onClose:this.closeMenu},n("kritzel-menu",{key:"f110b9315ec63dca9bb1b615136b2d3e284567ba",ref:t=>this.menuRef=t,items:this.items,onItemSelect:this.handleItemSelect,onItemSave:this.handleItemSave,onItemCancel:this.handleItemCancel,onItemToggleChildMenu:this.handleItemToggleChildMenu,onItemCloseChildMenu:this.handleItemCloseChildMenu,onClose:this.closeMenu,onScroll:this.handleScroll})))}static get style(){return":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:var(--kritzel-split-button-color, #000000);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}"}},[513,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],menuScrollTop:[32],open:[64],focusMenu:[64]}]);function b(){"undefined"!=typeof customElements&&["kritzel-split-button","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((t=>{switch(t){case"kritzel-split-button":customElements.get(o(t))||customElements.define(o(t),d);break;case"kritzel-icon":customElements.get(o(t))||r();break;case"kritzel-menu":customElements.get(o(t))||u();break;case"kritzel-menu-item":customElements.get(o(t))||a();break;case"kritzel-portal":customElements.get(o(t))||c()}}))}export{d as K,b as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
class t{static getNumericValueFromStyle(t,n){const e=window.getComputedStyle(t).getPropertyValue(n);return parseFloat(e)||0}static isScrollableElement(t){if(!(t instanceof HTMLElement))return!1;const n=window.getComputedStyle(t),e=n.overflowX,r=n.overflowY,o=n.overflow;return("auto"===e||"scroll"===e||"overlay"===e)&&t.scrollWidth>t.clientWidth||("auto"===r||"scroll"===r||"overlay"===r)&&t.scrollHeight>t.clientHeight||("auto"===o||"scroll"===o||"overlay"===o)&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)}static findScrollableElement(t){if(!t)return null;const n=new Set,e=t=>{if(n.has(t))return null;if(n.add(t),this.isScrollableElement(t))return t;if(t.shadowRoot)for(const n of Array.from(t.shadowRoot.children)){const t=e(n);if(t)return t}if("SLOT"===t.tagName)for(const n of t.assignedElements({flatten:!0})){const t=e(n);if(t)return t}for(const n of Array.from(t.children)){const t=e(n);if(t)return t}return null};return e(t)}static getScrollableParent(t){if(!t)return window;const n=t.parentNode?.host??t.parentElement;if(!n||"BODY"===n.tagName)return window;const e=window.getComputedStyle(n);return"auto"===e.overflow||"auto"===e.overflowY||"scroll"===e.overflow||"scroll"===e.overflowY?n:this.getScrollableParent(n)}static isElementInViewport(t){if(!t)return!1;const n=this.getScrollableParent(t),e=t.getBoundingClientRect();if(n===window){const t=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth;return e.top>=0&&e.left>=0&&e.bottom<=t&&e.right<=n}const r=n.getBoundingClientRect();return e.top>=r.top&&e.left>=r.left&&e.bottom<=r.bottom&&e.right<=r.right}static getFocusableElements(t){if(!t)return[];const n=[],e=t=>{t instanceof HTMLElement&&t.matches('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])')&&!t.hasAttribute("disabled")&&(t=>{const n=window.getComputedStyle(t);return"none"!==n.display&&"hidden"!==n.visibility})(t)&&n.push(t),t.shadowRoot&&Array.from(t.shadowRoot.children).forEach(e),"SLOT"===t.tagName&&t.assignedElements({flatten:!0}).forEach(e),t.shadowRoot||Array.from(t.children).forEach(e)};return e(t),n}}export{t as K}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as s,d as i,t as a}from"./p-B43upypT.js";import{d as r}from"./p-W1ZwImdd.js";import{d as l}from"./p-
|
|
1
|
+
import{p as e,H as t,h as s,d as i,t as a}from"./p-B43upypT.js";import{d as r}from"./p-W1ZwImdd.js";import{d as l}from"./p-DX2nriaq.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get host(){return this}user;terms={};isDialogOpen=!1;async open(){this.isDialogOpen=!0}async close(){this.isDialogOpen=!1}closeDialog=()=>{this.isDialogOpen=!1};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 s(i,{key:"042455d68a432e0e218d5b8750fb1d22b0d202fc"},s("kritzel-dialog",{key:"058abbc8e1c38c647cc02e85c272e89693cab22a",dialogTitle:this.terms["currentUser.dialogTitle"]??"Account",isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small",contained:!0},s("div",{key:"ee141b2e91f093527e2d8f6649bade8e1a14f130",class:"user-info"},s("kritzel-avatar",{key:"2734bb0d3c69df14d26c204eeaf726174afaabc0",user:this.user,size:80}),e&&s("div",{key:"56cbad7a51264ebada0cb029e6455aabb9cb4ae9",class:"user-name"},e),this.user?.email&&s("div",{key:"ef9075dfdeb52ce6f90bb41d1348fbdf7dbb93ee",class:"user-email"},this.user.email))))}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}"}},[513,"kritzel-current-user-dialog",{user:[16],terms:[16],isDialogOpen:[32],open:[64],close:[64]}]);function c(){"undefined"!=typeof customElements&&["kritzel-current-user-dialog","kritzel-avatar","kritzel-dialog"].forEach((e=>{switch(e){case"kritzel-current-user-dialog":customElements.get(a(e))||customElements.define(a(e),o);break;case"kritzel-avatar":customElements.get(a(e))||r();break;case"kritzel-dialog":customElements.get(a(e))||l()}}))}export{o as K,c as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as r,d as s,t as a}from"./p-B43upypT.js";import{d as i}from"./p-W1ZwImdd.js";import{d as c}from"./p-
|
|
1
|
+
import{p as e,H as t,h as r,d as s,t as a}from"./p-B43upypT.js";import{d as i}from"./p-W1ZwImdd.js";import{d as c}from"./p-XDNjFYRB.js";import{d as l}from"./p-DX2nriaq.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get host(){return this}user;avatarSize=40;terms={};dialogRef;handleAvatarClick=e=>{e.stopPropagation(),this.dialogRef?.open()};render(){return r(s,{key:"bdee6b71c08d6ea22aec40e88ba56077882b301d"},r("kritzel-avatar",{key:"97bcaaa6b683c0d26d547ac5cbd9df7814f0cd80",user:this.user,size:this.avatarSize,onClick:this.handleAvatarClick}),r("kritzel-current-user-dialog",{key:"c984ea1803bcf2b06569fd66d12e4e7054235225",ref:e=>this.dialogRef=e,user:this.user,terms:this.terms}))}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 n(){"undefined"!=typeof customElements&&["kritzel-current-user","kritzel-avatar","kritzel-current-user-dialog","kritzel-dialog"].forEach((e=>{switch(e){case"kritzel-current-user":customElements.get(a(e))||customElements.define(a(e),o);break;case"kritzel-avatar":customElements.get(a(e))||i();break;case"kritzel-current-user-dialog":customElements.get(a(e))||c();break;case"kritzel-dialog":customElements.get(a(e))||l()}}))}export{o as K,n as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as r,h as o,d as
|
|
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-BntMEYss.js";import{d as c}from"./p-DSd5xTAH.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:"3e7179c87713cb0087d2d2053f97db8f603f7321",class:{mobile:this.isTouchDevice},style:{display:this.visible?"":"none"}},o("div",{key:"23d6be1ec2c25cd0335c1134f18aad7d5be25c85",class:{"more-menu-wrapper":!0,visible:this.visible}},o("button",{key:"e3064ba3f7b4c20e8447e16327b73d0f47f3842b",class:"more-menu-button","data-testid":"more-menu-button",onClick:this.toggleMenu,"aria-label":this.terms["moreMenu.ariaLabel"]??"More options"},o("kritzel-icon",{key:"feed090efe4f80c62a29c8146c2d7d8041624381",name:this.icon,size:this.iconSize})),o("kritzel-portal",{key:"7b1a5db932c7bfb5ea8f4d666571c4f7fbbcd238",anchor:this.menuAnchor,offsetY:this.offsetY,onClose:this.closeMenu},o("kritzel-menu",{key:"65b1225b15a494d49712ad1d2d108e90f09507e9",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 d(){"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,d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as r,d as o,t as a}from"./p-B43upypT.js";import{d as s}from"./p-
|
|
1
|
+
import{p as e,H as t,c as i,h as r,d as o,t as a}from"./p-B43upypT.js";import{d as s}from"./p-DX2nriaq.js";import{d as l}from"./p-Df3BwVGy.js";import{d as n}from"./p-CdR76C4L.js";import{d as p}from"./p-Bg0xIZiR.js";import{d as c}from"./p-BG6hOSrm.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.exportPng=i(this,"exportPng"),this.exportSvg=i(this,"exportSvg"),this.exportJson=i(this,"exportJson")}workspaceName="workspace";terms={};isDialogOpen=!1;previewUrl;isLoading=!1;activeTab="viewport";exportFilename="";viewportExportFormat="png";exportPng;exportSvg;exportJson;get tabs(){return[{id:"viewport",label:this.terms["export.tabs.viewport"]??"Export Viewport"},{id:"workspace",label:this.terms["export.tabs.workspace"]??"Export Workspace"}]}viewportFormatOptions=[{value:"png",label:"PNG"},{value:"svg",label:"SVG"}];async open(e){this.previewUrl=e,this.activeTab="viewport",this.viewportExportFormat="png",this.exportFilename=this.generateDefaultFilename(),this.isDialogOpen=!0}generateDefaultFilename(){const e=(new Date).toISOString().replace(/[:.]/g,"-").slice(0,-5);return`${this.workspaceName}-${e}`}handleFilenameChange=e=>{this.exportFilename=e.detail};closeDialog=()=>{this.isDialogOpen=!1};handleTabChange=e=>{this.activeTab=e.detail};handleViewportFormatChange=e=>{this.viewportExportFormat=e.detail};handleExport=()=>{"viewport"===this.activeTab?"png"===this.viewportExportFormat?this.exportPng.emit():this.exportSvg.emit():this.exportJson.emit(this.exportFilename||this.generateDefaultFilename()),this.closeDialog()};renderViewportExport(){return r("div",{class:"export-tab-content"},this.previewUrl&&r("div",{class:"preview-container"},r("img",{src:this.previewUrl,alt:"Viewport Preview"})),r("kritzel-input",{label:this.terms["export.filename.label"]??"Filename",value:this.exportFilename,placeholder:this.terms["export.filename.placeholder"]??"Enter filename",suffix:`.${this.viewportExportFormat}`,onValueChange:this.handleFilenameChange}),r("div",{class:"format-selection"},r("label",null,this.terms["export.format.label"]??"Format"),r("kritzel-dropdown",{options:this.viewportFormatOptions,value:this.viewportExportFormat,forceOpenDirection:"up",onValueChanged:this.handleViewportFormatChange})))}renderWorkspaceExport(){return r("div",{class:"export-tab-content"},r("kritzel-input",{label:this.terms["export.filename.label"]??"Filename",value:this.exportFilename,placeholder:this.terms["export.filename.placeholder"]??"Enter filename",suffix:".json",onValueChange:this.handleFilenameChange}))}render(){return r(o,{key:"fd219fffd4d8bb528e6a90055c2b43a5f5a73060"},r("kritzel-dialog",{key:"9f4ba5b05f5ad31084aab457386a86cbc6d4f2bc",isOpen:this.isDialogOpen,dialogTitle:this.terms["export.dialogTitle"]??"Export",closable:!0,contained:!0,onDialogClose:this.closeDialog},r("div",{key:"920bb8f20b42897680084bde47270b3812e2f3e4",class:"export-content"},r("kritzel-pill-tabs",{key:"7090bd0a371457adceaa4bd7461a616839a66349",tabs:this.tabs,value:this.activeTab,onValueChange:this.handleTabChange}),"viewport"===this.activeTab&&this.renderViewportExport(),"workspace"===this.activeTab&&this.renderWorkspaceExport(),r("button",{key:"ddf36c1e7cb81409c2cecfa6585e0f1dd7aca2c3",class:"export-primary-button",onClick:this.handleExport},this.terms["export.exportButton"]??"Export"))))}static get style(){return":host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}"}},[513,"kritzel-export",{workspaceName:[1,"workspace-name"],terms:[16],isDialogOpen:[32],previewUrl:[32],isLoading:[32],activeTab:[32],exportFilename:[32],viewportExportFormat:[32],open:[64]}]);function h(){"undefined"!=typeof customElements&&["kritzel-export","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-input","kritzel-pill-tabs"].forEach((e=>{switch(e){case"kritzel-export":customElements.get(a(e))||customElements.define(a(e),d);break;case"kritzel-dialog":customElements.get(a(e))||s();break;case"kritzel-dropdown":customElements.get(a(e))||l();break;case"kritzel-icon":customElements.get(a(e))||n();break;case"kritzel-input":customElements.get(a(e))||p();break;case"kritzel-pill-tabs":customElements.get(a(e))||c()}}))}export{d as K,h as d}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-
|
|
2
|
-
export {
|
|
1
|
+
import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-DMPBDrZh.js';
|
|
2
|
+
export { N as APP_STATE_MIGRATIONS, A as AssetNotFoundError, P as CURRENT_APP_STATE_SCHEMA_VERSION, Q as CURRENT_WORKSPACE_SCHEMA_VERSION, B as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, z as DEFAULT_LINE_TOOL_CONFIG, y as DEFAULT_TEXT_CONFIG, G as DE_LOCALE, F as EN_LOCALE, J as FR_LOCALE, I as IndexedDBAssetProvider, L as KritzelAlignment, t as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, x as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, w as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, v as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, u as KritzelThemeManager, s as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, O as WORKSPACE_MIGRATIONS, E as darkTheme, C as lightTheme, M as runMigrations } from './schema.constants-DMPBDrZh.js';
|
|
3
3
|
import * as Y from 'yjs';
|
|
4
4
|
import { IndexeddbPersistence } from 'y-indexeddb';
|
|
5
5
|
import { WebsocketProvider } from 'y-websocket';
|