kritzel-stencil 0.3.12 → 0.3.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (169) hide show
  1. package/dist/cjs/{index-CFnj_FXt.js → index-Xav9JFHg.js} +1 -1
  2. package/dist/cjs/index.cjs.js +41 -3
  3. package/dist/cjs/kritzel-active-users_42.cjs.entry.js +281 -113
  4. package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
  5. package/dist/cjs/loader.cjs.js +2 -2
  6. package/dist/cjs/{schema.constants-CzfoUWxF.js → schema.constants-DJQTjcy7.js} +84 -42
  7. package/dist/cjs/stencil.cjs.js +3 -3
  8. package/dist/collection/classes/core/viewport.class.js +97 -8
  9. package/dist/collection/classes/objects/image.class.js +62 -0
  10. package/dist/collection/classes/objects/shape.class.js +2 -1
  11. package/dist/collection/classes/tools/base-tool.class.js +2 -0
  12. package/dist/collection/classes/tools/brush-tool.class.js +1 -0
  13. package/dist/collection/classes/tools/eraser-tool.class.js +1 -0
  14. package/dist/collection/classes/tools/image-tool.class.js +1 -0
  15. package/dist/collection/classes/tools/line-tool.class.js +1 -0
  16. package/dist/collection/classes/tools/selection-tool.class.js +1 -0
  17. package/dist/collection/classes/tools/shape-tool.class.js +1 -0
  18. package/dist/collection/classes/tools/text-tool.class.js +1 -0
  19. package/dist/collection/collection-manifest.json +1 -1
  20. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +156 -33
  21. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +270 -19
  22. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +3 -3
  23. package/dist/collection/components/shared/kritzel-input/kritzel-input.css +1 -1
  24. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +2 -2
  25. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +7 -0
  26. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js +7 -1
  27. package/dist/collection/components/ui/kritzel-export/kritzel-export.css +1 -1
  28. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js +2 -2
  29. package/dist/collection/configs/default-asset-storage.config.js +1 -2
  30. package/dist/collection/configs/default-sync.config.js +2 -5
  31. package/dist/collection/constants/version.js +1 -1
  32. package/dist/collection/helpers/tool-config.helper.js +58 -65
  33. package/dist/collection/interfaces/tool-type.interface.js +1 -0
  34. package/dist/collection/themes/dark-theme.js +5 -0
  35. package/dist/collection/themes/light-theme.js +5 -0
  36. package/dist/components/index.js +1 -1
  37. package/dist/components/kritzel-active-users.js +1 -1
  38. package/dist/components/kritzel-avatar.js +1 -1
  39. package/dist/components/kritzel-awareness-cursors.js +1 -1
  40. package/dist/components/kritzel-back-to-content.js +1 -1
  41. package/dist/components/kritzel-brush-style.js +1 -1
  42. package/dist/components/kritzel-button.js +1 -1
  43. package/dist/components/kritzel-color-palette.js +1 -1
  44. package/dist/components/kritzel-color.js +1 -1
  45. package/dist/components/kritzel-context-menu.js +1 -1
  46. package/dist/components/kritzel-controls.js +1 -1
  47. package/dist/components/kritzel-current-user-dialog.js +1 -1
  48. package/dist/components/kritzel-current-user.js +1 -1
  49. package/dist/components/kritzel-cursor-trail.js +1 -1
  50. package/dist/components/kritzel-dialog.js +1 -1
  51. package/dist/components/kritzel-dropdown.js +1 -1
  52. package/dist/components/kritzel-editor.js +1 -1
  53. package/dist/components/kritzel-engine.js +1 -1
  54. package/dist/components/kritzel-export.js +1 -1
  55. package/dist/components/kritzel-font-family.js +1 -1
  56. package/dist/components/kritzel-font-size.js +1 -1
  57. package/dist/components/kritzel-font.js +1 -1
  58. package/dist/components/kritzel-icon.js +1 -1
  59. package/dist/components/kritzel-input.js +1 -1
  60. package/dist/components/kritzel-line-endings.js +1 -1
  61. package/dist/components/kritzel-login-dialog.js +1 -1
  62. package/dist/components/kritzel-master-detail.js +1 -1
  63. package/dist/components/kritzel-menu-item.js +1 -1
  64. package/dist/components/kritzel-menu.js +1 -1
  65. package/dist/components/kritzel-more-menu.js +1 -1
  66. package/dist/components/kritzel-numeric-input.js +1 -1
  67. package/dist/components/kritzel-opacity-slider.js +1 -1
  68. package/dist/components/kritzel-pill-tabs.js +1 -1
  69. package/dist/components/kritzel-portal.js +1 -1
  70. package/dist/components/kritzel-settings.js +1 -1
  71. package/dist/components/kritzel-shape-fill.js +1 -1
  72. package/dist/components/kritzel-share-dialog.js +1 -1
  73. package/dist/components/kritzel-slide-toggle.js +1 -1
  74. package/dist/components/kritzel-split-button.js +1 -1
  75. package/dist/components/kritzel-stroke-size.js +1 -1
  76. package/dist/components/kritzel-tool-config.js +1 -1
  77. package/dist/components/kritzel-tooltip.js +1 -1
  78. package/dist/components/kritzel-utility-panel.js +1 -1
  79. package/dist/components/kritzel-workspace-manager.js +1 -1
  80. package/dist/components/p-2xYAGd0I.js +1 -0
  81. package/dist/components/{p-DdmJquQr.js → p-B2Os1ya_.js} +1 -1
  82. package/dist/components/p-B2w8X7vn.js +1 -0
  83. package/dist/components/{p-DRB3TZzI.js → p-B4b6TDxp.js} +1 -1
  84. package/dist/components/p-B5xxfwKF.js +1 -0
  85. package/dist/components/{p-D0aom7Yu.js → p-BFYtCsZu.js} +1 -1
  86. package/dist/components/{p-CARNM9pf.js → p-BFoK4W--.js} +1 -1
  87. package/dist/components/p-BTEV1WwT.js +1 -0
  88. package/dist/components/{p-x38RbGJA.js → p-BYmp9Ovv.js} +1 -1
  89. package/dist/components/{p-KVG5rztB.js → p-BbactVA0.js} +1 -1
  90. package/dist/components/{p-B_JH91jB.js → p-BfNHpqQ8.js} +1 -1
  91. package/dist/components/{p-DXgUuzXW.js → p-BiG1dxPS.js} +1 -1
  92. package/dist/components/{p-Dov3qOAR.js → p-Bj2laX89.js} +1 -1
  93. package/dist/components/{p-Cr7xOsIZ.js → p-BqwqGFQY.js} +1 -1
  94. package/dist/components/{p-DmTG0Y5h.js → p-BzYU3-MJ.js} +1 -1
  95. package/dist/components/p-C0TN5IAi.js +1 -0
  96. package/dist/components/{p-RnuCSIt-.js → p-C2SX-XRr.js} +1 -1
  97. package/dist/components/{p-guqEWGgV.js → p-CFgkUYoO.js} +1 -1
  98. package/dist/components/{p-BTSOqHMI.js → p-CHrSFOSI.js} +1 -1
  99. package/dist/components/p-CJOhfMU5.js +1 -0
  100. package/dist/components/p-CLLbE_z8.js +9 -0
  101. package/dist/components/{p-DJLJfKY2.js → p-COLHjboZ.js} +1 -1
  102. package/dist/components/{p-CKY7AvGR.js → p-COgo9OWy.js} +1 -1
  103. package/dist/components/p-CUPYGT8c.js +1 -0
  104. package/dist/components/{p-DhAM4qeQ.js → p-CXpv9Rxe.js} +1 -1
  105. package/dist/components/{p-Bp3kdH4l.js → p-CcyIAi9S.js} +1 -1
  106. package/dist/components/{p-COIxq81R.js → p-CmuNn1Tc.js} +1 -1
  107. package/dist/components/{p-DfH7YY2C.js → p-D-sRVAbQ.js} +1 -1
  108. package/dist/components/{p-ZgZqbJ58.js → p-DDYoDSrm.js} +1 -1
  109. package/dist/components/{p-u0b2RJAn.js → p-DEy7zJCe.js} +1 -1
  110. package/dist/components/{p-BPEn0_hr.js → p-DM11KXUT.js} +1 -1
  111. package/dist/components/{p-CJERvHdy.js → p-DbB730vO.js} +1 -1
  112. package/dist/components/{p-C8ggg-5h.js → p-Df3BwVGy.js} +1 -1
  113. package/dist/components/{p-EFyZdR89.js → p-DkaiWg1V.js} +1 -1
  114. package/dist/components/{p-Dx_xz_El.js → p-DlwYHzSj.js} +1 -1
  115. package/dist/components/{p-CJ2V42sz.js → p-FK7b3BGt.js} +1 -1
  116. package/dist/components/{p-Do4UlU4e.js → p-J9_SwObO.js} +1 -1
  117. package/dist/components/{p-CxtTuKCy.js → p-JhOYwUOj.js} +1 -1
  118. package/dist/components/{p-Dw9sKOsb.js → p-SptaSMno.js} +1 -1
  119. package/dist/components/{p-KjtNlFTl.js → p-UoPj5QjH.js} +1 -1
  120. package/dist/components/{p-CYR9wbJg.js → p-dcAernE1.js} +1 -1
  121. package/dist/components/{p-BI_UUiTr.js → p-skWUIStn.js} +1 -1
  122. package/dist/components/{p-DgtrNOWm.js → p-x6doYeiI.js} +1 -1
  123. package/dist/esm/{index-D9HaikfQ.js → index-Dhio9uis.js} +1 -1
  124. package/dist/esm/index.js +42 -4
  125. package/dist/esm/kritzel-active-users_42.entry.js +281 -113
  126. package/dist/esm/kritzel-brush-style.entry.js +1 -1
  127. package/dist/esm/loader.js +3 -3
  128. package/dist/esm/{schema.constants-BcT1vV4J.js → schema.constants-DiCnmIYK.js} +85 -42
  129. package/dist/esm/stencil.js +4 -4
  130. package/dist/stencil/index.esm.js +1 -1
  131. package/dist/stencil/p-DiCnmIYK.js +1 -0
  132. package/dist/stencil/p-ea76b21f.entry.js +9 -0
  133. package/dist/stencil/{p-69298b5f.entry.js → p-fb32cd8f.entry.js} +1 -1
  134. package/dist/stencil/stencil.esm.js +1 -1
  135. package/dist/types/classes/core/viewport.class.d.ts +38 -0
  136. package/dist/types/classes/objects/image.class.d.ts +15 -0
  137. package/dist/types/classes/tools/base-tool.class.d.ts +3 -0
  138. package/dist/types/classes/tools/brush-tool.class.d.ts +1 -0
  139. package/dist/types/classes/tools/eraser-tool.class.d.ts +1 -0
  140. package/dist/types/classes/tools/image-tool.class.d.ts +1 -0
  141. package/dist/types/classes/tools/line-tool.class.d.ts +1 -0
  142. package/dist/types/classes/tools/selection-tool.class.d.ts +1 -0
  143. package/dist/types/classes/tools/shape-tool.class.d.ts +1 -0
  144. package/dist/types/classes/tools/text-tool.class.d.ts +1 -0
  145. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +13 -3
  146. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +49 -5
  147. package/dist/types/components/ui/kritzel-context-menu/kritzel-context-menu.d.ts +1 -0
  148. package/dist/types/components.d.ts +54 -20
  149. package/dist/types/configs/default-asset-storage.config.d.ts +1 -1
  150. package/dist/types/configs/default-sync.config.d.ts +1 -1
  151. package/dist/types/constants/version.d.ts +1 -1
  152. package/dist/types/interfaces/theme.interface.d.ts +8 -3
  153. package/dist/types/interfaces/tool-config.interface.d.ts +3 -6
  154. package/dist/types/interfaces/tool-type.interface.d.ts +1 -0
  155. package/dist/types/interfaces/tool.interface.d.ts +1 -0
  156. package/dist/types/stencil-public-runtime.d.ts +1 -0
  157. package/package.json +1 -1
  158. package/dist/components/p-C0wFAtT_.js +0 -1
  159. package/dist/components/p-CWgI1dA0.js +0 -1
  160. package/dist/components/p-DH-H7om7.js +0 -1
  161. package/dist/components/p-DIiGd0LS.js +0 -1
  162. package/dist/components/p-DLh8x1jK.js +0 -9
  163. package/dist/components/p-Dqjil3Hm.js +0 -1
  164. package/dist/components/p-IiG44Unz.js +0 -1
  165. package/dist/components/p-K7ySy791.js +0 -1
  166. package/dist/stencil/p-0c95e585.entry.js +0 -9
  167. package/dist/stencil/p-BcT1vV4J.js +0 -1
  168. /package/dist/components/{p-BWj1eE2b.js → p-B43upypT.js} +0 -0
  169. /package/dist/stencil/{p-D9HaikfQ.js → p-Dhio9uis.js} +0 -0
@@ -1 +1 @@
1
- import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-BWj1eE2b.js";import{h as n,f as s}from"./p-Dqjil3Hm.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-DIiGd0LS.js";import{a as h}from"./p-DH-H7om7.js";import{d as p}from"./p-BI_UUiTr.js";import{d as k}from"./p-CARNM9pf.js";import{d as b}from"./p-C8ggg-5h.js";import{d as u}from"./p-COIxq81R.js";import{d as f}from"./p-CxtTuKCy.js";import{d as g}from"./p-CJ2V42sz.js";import{d as z}from"./p-CJERvHdy.js";import{d as m}from"./p-DhAM4qeQ.js";import{d as v}from"./p-u0b2RJAn.js";import{d as y}from"./p-D0aom7Yu.js";import{d as x}from"./p-DdmJquQr.js";import{d as w}from"./p-CYR9wbJg.js";import{d as C}from"./p-Bp3kdH4l.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";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:"0f40a136a6a9556080d922d346318045794421a8",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"d543e7575cb30e54d9362eddf7c7221fb8cce5f5",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"1083380152e9d1b51c35da335533c20ca2ca8fcc",class:"kritzel-controls"},r("div",{key:"11ef0fb76c30ffda0e30f01d43229ca2142a5854",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"269924a8859aece37ff31202307d4feaecbbde86",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:"8b97a5bba3ac4992482e8f433d7ba6197918a914",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:"d9adef8c2acc8d9b9d745174050ce78960b89b58",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"7605bbd2b6335c89c57aa68952293f26efad6b4b",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"27b0f41442215e78b692fa44bb665444a4993b89",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"1fb5979b1c531593acf5086861b22b7d78d03e8d",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:"3713ef344630f6b4d88df2e83992018859ddb18c",class:"color-container"},r("kritzel-color",{key:"c2679f68efae77c6daeb98be9e03d5320d51a73a",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],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))||b();break;case"kritzel-font":customElements.get(l(t))||u();break;case"kritzel-font-family":customElements.get(l(t))||f();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{e as n,d as s}from"./p-CUPYGT8c.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-BTEV1WwT.js";import{a as h}from"./p-2xYAGd0I.js";import{d as p}from"./p-skWUIStn.js";import{d as k}from"./p-BFoK4W--.js";import{d as b}from"./p-Df3BwVGy.js";import{d as u}from"./p-CmuNn1Tc.js";import{d as f}from"./p-JhOYwUOj.js";import{d as g}from"./p-FK7b3BGt.js";import{d as z}from"./p-DbB730vO.js";import{d as m}from"./p-CXpv9Rxe.js";import{d as v}from"./p-DEy7zJCe.js";import{d as y}from"./p-BFYtCsZu.js";import{d as x}from"./p-B2Os1ya_.js";import{d as w}from"./p-dcAernE1.js";import{d as C}from"./p-CcyIAi9S.js";const T=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";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:"0f40a136a6a9556080d922d346318045794421a8",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"d543e7575cb30e54d9362eddf7c7221fb8cce5f5",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"1083380152e9d1b51c35da335533c20ca2ca8fcc",class:"kritzel-controls"},r("div",{key:"11ef0fb76c30ffda0e30f01d43229ca2142a5854",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"269924a8859aece37ff31202307d4feaecbbde86",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:"8b97a5bba3ac4992482e8f433d7ba6197918a914",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:"d9adef8c2acc8d9b9d745174050ce78960b89b58",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"7605bbd2b6335c89c57aa68952293f26efad6b4b",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"27b0f41442215e78b692fa44bb665444a4993b89",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"1fb5979b1c531593acf5086861b22b7d78d03e8d",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:"3713ef344630f6b4d88df2e83992018859ddb18c",class:"color-container"},r("kritzel-color",{key:"c2679f68efae77c6daeb98be9e03d5320d51a73a",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],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),T);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))||b();break;case"kritzel-font":customElements.get(l(t))||u();break;case"kritzel-font-family":customElements.get(l(t))||f();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{T as K,E as d}
@@ -1 +1 @@
1
- import{p as t,H as e,c as o,h as l,d as a,t as n}from"./p-BWj1eE2b.js";import{d as r}from"./p-C8ggg-5h.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.fontFamilyChange=o(this,"fontFamilyChange")}fontOptions=[{value:"arial",label:"Arial"},{value:"verdana",label:"Verdana"},{value:"helvetica",label:"Helvetica"},{value:"tahoma",label:"Tahoma"},{value:"trebuchet ms",label:"Trebuchet MS"},{value:"times new roman",label:"Times New Roman"},{value:"georgia",label:"Georgia"},{value:"garamond",label:"Garamond"},{value:"courier new",label:"Courier New"},{value:"brush script mt",label:"Brush Script MT"}];selectedFontFamily;fontFamilyChange;componentWillLoad(){if(this.fontOptions&&this.fontOptions.length>0){const t=this.fontOptions.some((t=>t.value===this.selectedFontFamily));this.selectedFontFamily&&t||(this.selectedFontFamily=this.fontOptions[0].value)}}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};render(){const t=this.fontOptions.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.value}})));return l(a,{key:"0123dbdff9b7051d2ebc9dcf8d1f9c7c4c161dc4"},l("kritzel-dropdown",{key:"5d4e289161502ecc60cef3d0c6d546a64817a12a",options:t,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:this.selectedFontFamily}}))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}"}},[513,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}]);function i(){"undefined"!=typeof customElements&&["kritzel-font-family","kritzel-dropdown"].forEach((t=>{switch(t){case"kritzel-font-family":customElements.get(n(t))||customElements.define(n(t),s);break;case"kritzel-dropdown":customElements.get(n(t))||r()}}))}export{s as K,i as d}
1
+ import{p as t,H as e,c as o,h as l,d as a,t as n}from"./p-B43upypT.js";import{d as r}from"./p-Df3BwVGy.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.fontFamilyChange=o(this,"fontFamilyChange")}fontOptions=[{value:"arial",label:"Arial"},{value:"verdana",label:"Verdana"},{value:"helvetica",label:"Helvetica"},{value:"tahoma",label:"Tahoma"},{value:"trebuchet ms",label:"Trebuchet MS"},{value:"times new roman",label:"Times New Roman"},{value:"georgia",label:"Georgia"},{value:"garamond",label:"Garamond"},{value:"courier new",label:"Courier New"},{value:"brush script mt",label:"Brush Script MT"}];selectedFontFamily;fontFamilyChange;componentWillLoad(){if(this.fontOptions&&this.fontOptions.length>0){const t=this.fontOptions.some((t=>t.value===this.selectedFontFamily));this.selectedFontFamily&&t||(this.selectedFontFamily=this.fontOptions[0].value)}}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};render(){const t=this.fontOptions.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.value}})));return l(a,{key:"0123dbdff9b7051d2ebc9dcf8d1f9c7c4c161dc4"},l("kritzel-dropdown",{key:"5d4e289161502ecc60cef3d0c6d546a64817a12a",options:t,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:this.selectedFontFamily}}))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}"}},[513,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}]);function i(){"undefined"!=typeof customElements&&["kritzel-font-family","kritzel-dropdown"].forEach((t=>{switch(t){case"kritzel-font-family":customElements.get(n(t))||customElements.define(n(t),s);break;case"kritzel-dropdown":customElements.get(n(t))||r()}}))}export{s as K,i as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as i,h as o,d as n,t as r}from"./p-BWj1eE2b.js";import{d as s}from"./p-CJERvHdy.js";import{K as l}from"./p-jGOpkGDl.js";import{d as a}from"./p-x38RbGJA.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),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")}get host(){return this}item;onItemChange(e,t){e!==t&&(this.isDirty=!1)}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=!1;inputRef;focusInput(){this.item.isEditing&&!this.isDirty&&requestAnimationFrame((()=>{if(this.inputRef)if(this.inputRef.focus(),l.isIOS()){const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e)}else this.inputRef.select()}))}componentDidLoad(){this.setDeviceSpecificStyles(),this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{l.isTouchDevice()&&(this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent"),this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent"))};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=e=>{e.stopPropagation(),this.item.label=e.target.value,this.isDirty=!0};handleSave=e=>{e.stopPropagation(),this.host.focus(),this.itemSave.emit(this.item)};handleCancel=e=>{e.stopPropagation(),this.host.focus(),this.itemCancel.emit(this.item)};handleMenuToggle=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:e.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[o("div",{class:"menu-item-content left"},this.item.icon&&o("span",{title:this.item.iconTooltip},o("kritzel-icon",{name:this.item.icon,size:16,style:this.item.color?{"--kritzel-icon-color":this.item.color}:void 0})),o("div",{style:this.item.color?{color:this.item.color}:void 0},this.item.label)),o("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[o("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},o("kritzel-icon",{name:"ellipsis-vertical",size:16})),o("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},o("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:e=>this.itemSelect.emit(e.detail),onItemSave:e=>this.itemSave.emit(e.detail),onItemCancel:e=>this.itemCancel.emit(e.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[o("div",{class:"menu-item-content left"},o("input",{ref:e=>this.inputRef=e,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),o("div",{class:"menu-item-content right"},o("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},o("kritzel-icon",{name:"x",size:16})),o("div",{tabIndex:this.isDirty||this.item.isNewItem?0:-1,class:{"action-button":!0,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},o("kritzel-icon",{name:"check",size:16})))]}render(){return o(n,{key:"ae5057ce9101dc08e2365455c544914715be468e",tabIndex:this.item.isDisabled?-1:0,class:{selected:this.item.isSelected,editing:this.item.isEditing,disabled:this.item.isDisabled,"child-open":this.item.isChildMenuOpen},onClick:this.handleItemSelect},o("div",{key:"973fc68404ea95c2f0459565b8a3d124d31ae090",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:[{onItemChange:0}]}}static get style(){return":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff);caret-color:var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);border-color:var(--kritzel-menu-item-input-border-color-on-selected, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));color:var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff)}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.menu-item-content span{display:flex;align-items:center;line-height:0}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input{caret-color:var(--kritzel-menu-item-input-caret-color, currentColor)}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}"}},[513,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},void 0,{item:[{onItemChange:0}]}]);function h(){"undefined"!=typeof customElements&&["kritzel-menu-item","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu-item":customElements.get(r(e))||customElements.define(r(e),c);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||d();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),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.close=i(this,"close")}get host(){return this}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(e){this.host.scrollTop=e,this.host.scrollTo({top:e,behavior:"auto"})}async setFocus(){const e=this.host.shadowRoot.querySelector("kritzel-menu-item");e&&e.focus()}get openChildMenuItem(){return this.items.find((e=>e.isChildMenuOpen))}get editingMenuItem(){return this.items.find((e=>e.isEditing))}onOverlayClick=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit(e.detail)};handleSave=e=>{e.stopPropagation(),this.itemSave.emit(e.detail)};handleCancel=e=>{e.stopPropagation(),this.itemCancel.emit(e.detail)};handleToggleChildMenu=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit(e.detail)};handleCloseChildMenu=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(e.detail)};render(){return o(n,{key:"2d6d46fc8135133ed3e42d65399c8549bc5f6bb5",tabIndex:0,onClick:e=>e.stopPropagation()},this.openChildMenuItem&&o("div",{key:"b5b3910cc82f7cb451730792fe6e3b3a254036f3",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((e=>o("kritzel-menu-item",{key:e.id,"data-testid":`menu-item-${e.id}`,item:e,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!e.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}static get style(){return":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}"}},[513,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu":customElements.get(r(e))||customElements.define(r(e),m);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||d();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}export{m as K,d as a,c as b,h as d}
1
+ import{p as e,H as t,c as i,h as o,d as n,t as r}from"./p-B43upypT.js";import{d as s}from"./p-DbB730vO.js";import{K as l}from"./p-jGOpkGDl.js";import{d as a}from"./p-BYmp9Ovv.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),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")}get host(){return this}item;onItemChange(e,t){e!==t&&(this.isDirty=!1)}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=!1;inputRef;focusInput(){this.item.isEditing&&!this.isDirty&&requestAnimationFrame((()=>{if(this.inputRef)if(this.inputRef.focus(),l.isIOS()){const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e)}else this.inputRef.select()}))}componentDidLoad(){this.setDeviceSpecificStyles(),this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{l.isTouchDevice()&&(this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent"),this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent"))};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=e=>{e.stopPropagation(),this.item.label=e.target.value,this.isDirty=!0};handleSave=e=>{e.stopPropagation(),this.host.focus(),this.itemSave.emit(this.item)};handleCancel=e=>{e.stopPropagation(),this.host.focus(),this.itemCancel.emit(this.item)};handleMenuToggle=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:e.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[o("div",{class:"menu-item-content left"},this.item.icon&&o("span",{title:this.item.iconTooltip},o("kritzel-icon",{name:this.item.icon,size:16,style:this.item.color?{"--kritzel-icon-color":this.item.color}:void 0})),o("div",{style:this.item.color?{color:this.item.color}:void 0},this.item.label)),o("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[o("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},o("kritzel-icon",{name:"ellipsis-vertical",size:16})),o("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},o("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:e=>this.itemSelect.emit(e.detail),onItemSave:e=>this.itemSave.emit(e.detail),onItemCancel:e=>this.itemCancel.emit(e.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[o("div",{class:"menu-item-content left"},o("input",{ref:e=>this.inputRef=e,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),o("div",{class:"menu-item-content right"},o("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},o("kritzel-icon",{name:"x",size:16})),o("div",{tabIndex:this.isDirty||this.item.isNewItem?0:-1,class:{"action-button":!0,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},o("kritzel-icon",{name:"check",size:16})))]}render(){return o(n,{key:"ae5057ce9101dc08e2365455c544914715be468e",tabIndex:this.item.isDisabled?-1:0,class:{selected:this.item.isSelected,editing:this.item.isEditing,disabled:this.item.isDisabled,"child-open":this.item.isChildMenuOpen},onClick:this.handleItemSelect},o("div",{key:"973fc68404ea95c2f0459565b8a3d124d31ae090",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:[{onItemChange:0}]}}static get style(){return":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff);caret-color:var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);border-color:var(--kritzel-menu-item-input-border-color-on-selected, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));color:var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff)}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.menu-item-content span{display:flex;align-items:center;line-height:0}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input{caret-color:var(--kritzel-menu-item-input-caret-color, currentColor)}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}"}},[513,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},void 0,{item:[{onItemChange:0}]}]);function h(){"undefined"!=typeof customElements&&["kritzel-menu-item","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu-item":customElements.get(r(e))||customElements.define(r(e),c);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||u();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),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.close=i(this,"close")}get host(){return this}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(e){this.host.scrollTop=e,this.host.scrollTo({top:e,behavior:"auto"})}async setFocus(){const e=this.host.shadowRoot.querySelector("kritzel-menu-item");e&&e.focus()}get openChildMenuItem(){return this.items.find((e=>e.isChildMenuOpen))}get editingMenuItem(){return this.items.find((e=>e.isEditing))}onOverlayClick=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit(e.detail)};handleSave=e=>{e.stopPropagation(),this.itemSave.emit(e.detail)};handleCancel=e=>{e.stopPropagation(),this.itemCancel.emit(e.detail)};handleToggleChildMenu=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit(e.detail)};handleCloseChildMenu=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(e.detail)};render(){return o(n,{key:"2d6d46fc8135133ed3e42d65399c8549bc5f6bb5",tabIndex:0,onClick:e=>e.stopPropagation()},this.openChildMenuItem&&o("div",{key:"b5b3910cc82f7cb451730792fe6e3b3a254036f3",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((e=>o("kritzel-menu-item",{key:e.id,"data-testid":`menu-item-${e.id}`,item:e,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!e.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}static get style(){return":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}"}},[513,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}]);function u(){"undefined"!=typeof customElements&&["kritzel-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu":customElements.get(r(e))||customElements.define(r(e),m);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||u();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}export{m as K,u as a,c as b,h as d}
@@ -1 +1 @@
1
- import{p as t,H as o,c as r,h as e,d as n,t as a}from"./p-BWj1eE2b.js";const i=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonClick=r(this,"buttonClick")}variant="primary";disabled=!1;type="button";buttonClick;handleClick=t=>{this.disabled||(t.stopPropagation(),this.buttonClick.emit())};render(){return e(n,{key:"c915db75630392741de404f07265a391330e54ca"},e("button",{key:"50248ee1ed5862c9ea72b4f7cf7d564d03b5b14e",type:this.type,class:{"kritzel-button":!0,[this.variant]:!0,disabled:this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"d595cd819c7c0a3550e468ce65d4e2c28cc02164"})))}static get style(){return":host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}"}},[769,"kritzel-button",{variant:[1],disabled:[4],type:[1]}]);function c(){"undefined"!=typeof customElements&&["kritzel-button"].forEach((t=>{"kritzel-button"===t&&(customElements.get(a(t))||customElements.define(a(t),i))}))}export{i as K,c as d}
1
+ import{p as t,H as o,c as r,h as e,d as n,t as a}from"./p-B43upypT.js";const i=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonClick=r(this,"buttonClick")}variant="primary";disabled=!1;type="button";buttonClick;handleClick=t=>{this.disabled||(t.stopPropagation(),this.buttonClick.emit())};render(){return e(n,{key:"c915db75630392741de404f07265a391330e54ca"},e("button",{key:"50248ee1ed5862c9ea72b4f7cf7d564d03b5b14e",type:this.type,class:{"kritzel-button":!0,[this.variant]:!0,disabled:this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"d595cd819c7c0a3550e468ce65d4e2c28cc02164"})))}static get style(){return":host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}"}},[769,"kritzel-button",{variant:[1],disabled:[4],type:[1]}]);function c(){"undefined"!=typeof customElements&&["kritzel-button"].forEach((t=>{"kritzel-button"===t&&(customElements.get(a(t))||customElements.define(a(t),i))}))}export{i as K,c 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-BWj1eE2b.js";import{K as l}from"./p-BML28BJR.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=e(this,"tooltipClosed"),this.tooltipOpened=e(this,"tooltipOpened")}get host(){return this}isVisible=!1;anchorElement;triggerElement;offsetY=24;tooltipClosed;tooltipOpened;positionX=0;positionY=0;handleOutsideClick(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||this.close()}handleOutsidePointerDown(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||(t.stopPropagation(),t.preventDefault(),this.close())}handleCloseAll(t){t.detail!==this.host&&this.close()}handleWindowResize(){this.calculateAdjustedPosition()}handleTriggerElementChange(t,i){i&&i.removeEventListener("click",this.handleTriggerClick),t&&t.addEventListener("click",this.handleTriggerClick)}handleVisibilityChange(t){t&&(this.calculateAdjustedPosition(),requestAnimationFrame((()=>{this.focusContent()})))}async open(){this.isVisible||(document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll",{detail:this.host})),this.isVisible=!0,this.tooltipOpened.emit())}async close(){this.isVisible&&(this.isVisible=!1,this.tooltipClosed.emit())}async toggle(){this.isVisible?this.close():this.open()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}connectedCallback(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentDidLoad(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}disconnectedCallback(){this.triggerElement&&this.triggerElement.removeEventListener("click",this.handleTriggerClick)}handleTriggerClick=t=>{t.stopPropagation(),this.toggle()};calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),i=this.host.shadowRoot?.querySelector(".tooltip-content"),e=i?.getBoundingClientRect(),s=e?.width||0,o=12,n=window.innerWidth-s-o;this.positionX=Math.max(o,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(o,{key:"10bff4d14ff1f724d59463afc059f254e9485175",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:"6bfc8f2fe731d758c74319abeb82c4b84616f8b6",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"2a92ad23f4424b2d17035f86983be66a81fee81d"})))}static get watchers(){return{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[1028,"is-visible"],anchorElement:[16],triggerElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],open:[64],close:[64],toggle:[64],focusContent:[64]},[[4,"click","handleOutsideClick"],[6,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}]);function r(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h as K,r as d}
1
+ 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-BML28BJR.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=e(this,"tooltipClosed"),this.tooltipOpened=e(this,"tooltipOpened")}get host(){return this}isVisible=!1;anchorElement;triggerElement;offsetY=24;tooltipClosed;tooltipOpened;positionX=0;positionY=0;handleOutsideClick(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||this.close()}handleOutsidePointerDown(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||(t.stopPropagation(),t.preventDefault(),this.close())}handleCloseAll(t){t.detail!==this.host&&this.close()}handleWindowResize(){this.calculateAdjustedPosition()}handleTriggerElementChange(t,i){i&&i.removeEventListener("click",this.handleTriggerClick),t&&t.addEventListener("click",this.handleTriggerClick)}handleVisibilityChange(t){t&&(this.calculateAdjustedPosition(),requestAnimationFrame((()=>{this.focusContent()})))}async open(){this.isVisible||(document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll",{detail:this.host})),this.isVisible=!0,this.tooltipOpened.emit())}async close(){this.isVisible&&(this.isVisible=!1,this.tooltipClosed.emit())}async toggle(){this.isVisible?this.close():this.open()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}connectedCallback(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentDidLoad(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}disconnectedCallback(){this.triggerElement&&this.triggerElement.removeEventListener("click",this.handleTriggerClick)}handleTriggerClick=t=>{t.stopPropagation(),this.toggle()};calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),i=this.host.shadowRoot?.querySelector(".tooltip-content"),e=i?.getBoundingClientRect(),s=e?.width||0,o=12,n=window.innerWidth-s-o;this.positionX=Math.max(o,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(o,{key:"10bff4d14ff1f724d59463afc059f254e9485175",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:"6bfc8f2fe731d758c74319abeb82c4b84616f8b6",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"2a92ad23f4424b2d17035f86983be66a81fee81d"})))}static get watchers(){return{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[1028,"is-visible"],anchorElement:[16],triggerElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],open:[64],close:[64],toggle:[64],focusContent:[64]},[[4,"click","handleOutsideClick"],[6,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}]);function r(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h as K,r as d}
@@ -1 +1 @@
1
- import{p as e,H as r,h as t,d as i,t as o}from"./p-BWj1eE2b.js";import{a as s}from"./p-DH-H7om7.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}value;theme;size=24;resolveColor(){return this.value?"string"==typeof this.value?this.value:s.resolveThemeColor(this.value,this.theme):""}isLightColor(e){if(!e)return!1;let r=0,t=0,i=0,o=e.startsWith("#")?e.slice(1):e;if(3===o.length)r=parseInt(o[0]+o[0],16),t=parseInt(o[1]+o[1],16),i=parseInt(o[2]+o[2],16);else{if(6!==o.length)return!1;r=parseInt(o.substring(0,2),16),t=parseInt(o.substring(2,4),16),i=parseInt(o.substring(4,6),16)}return!(isNaN(r)||isNaN(t)||isNaN(i))&&.299*r+.587*t+.114*i>220}render(){const e=this.resolveColor(),r=this.isLightColor(e);return t(i,{key:"c4c1fe2559aca61557ff2e8154f4d46ce3511b30"},t("div",{key:"158c243018763a9609e0a056229263864a5e4d13",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},t("div",{key:"afa21c72b17ab5fb4b16521b91dbe7e9162d05f8",class:{"color-circle":!0,white:r},style:{backgroundColor:e,width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",position:"absolute",top:"0",left:"0",display:"inline-block"}})))}static get style(){return":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}"}},[513,"kritzel-color",{value:[1],theme:[1],size:[2]}]);function l(){"undefined"!=typeof customElements&&["kritzel-color"].forEach((e=>{"kritzel-color"===e&&(customElements.get(o(e))||customElements.define(o(e),c))}))}export{c as K,l as d}
1
+ import{p as e,H as r,h as t,d as i,t as o}from"./p-B43upypT.js";import{a as s}from"./p-2xYAGd0I.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}value;theme;size=24;resolveColor(){return this.value?"string"==typeof this.value?this.value:s.resolveThemeColor(this.value,this.theme):""}isLightColor(e){if(!e)return!1;let r=0,t=0,i=0,o=e.startsWith("#")?e.slice(1):e;if(3===o.length)r=parseInt(o[0]+o[0],16),t=parseInt(o[1]+o[1],16),i=parseInt(o[2]+o[2],16);else{if(6!==o.length)return!1;r=parseInt(o.substring(0,2),16),t=parseInt(o.substring(2,4),16),i=parseInt(o.substring(4,6),16)}return!(isNaN(r)||isNaN(t)||isNaN(i))&&.299*r+.587*t+.114*i>220}render(){const e=this.resolveColor(),r=this.isLightColor(e);return t(i,{key:"c4c1fe2559aca61557ff2e8154f4d46ce3511b30"},t("div",{key:"158c243018763a9609e0a056229263864a5e4d13",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},t("div",{key:"afa21c72b17ab5fb4b16521b91dbe7e9162d05f8",class:{"color-circle":!0,white:r},style:{backgroundColor:e,width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",position:"absolute",top:"0",left:"0",display:"inline-block"}})))}static get style(){return":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}"}},[513,"kritzel-color",{value:[1],theme:[1],size:[2]}]);function l(){"undefined"!=typeof customElements&&["kritzel-color"].forEach((e=>{"kritzel-color"===e&&(customElements.get(o(e))||customElements.define(o(e),c))}))}export{c as K,l as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as i,h as l,d as s,t as r}from"./p-BWj1eE2b.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.checkedChange=i(this,"checkedChange")}checked=!1;disabled=!1;label;checkedChange;handleToggle=()=>{this.disabled||(this.checked=!this.checked,this.checkedChange.emit(this.checked))};handleKeyDown=e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this.handleToggle())};render(){return l(s,{key:"8a1f816240f815905cc7def7cac92eb7ddac0df2",class:{checked:this.checked,disabled:this.disabled},tabIndex:this.disabled?-1:0,role:"switch","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false","aria-label":this.label,onClick:this.handleToggle,onKeyDown:this.handleKeyDown},l("div",{key:"d5fa5091ad54032f81dad3879149c4d8ec7ea37b",class:"toggle-track"},l("div",{key:"cce0d61431ed65a26926b0a496a5c22eb4169577",class:"toggle-thumb"})))}static get style(){return":host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}"}},[513,"kritzel-slide-toggle",{checked:[1028],disabled:[4],label:[1]}]);function a(){"undefined"!=typeof customElements&&["kritzel-slide-toggle"].forEach((e=>{"kritzel-slide-toggle"===e&&(customElements.get(r(e))||customElements.define(r(e),o))}))}export{o as K,a as d}
1
+ import{p as e,H as t,c as i,h as l,d as s,t as r}from"./p-B43upypT.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.checkedChange=i(this,"checkedChange")}checked=!1;disabled=!1;label;checkedChange;handleToggle=()=>{this.disabled||(this.checked=!this.checked,this.checkedChange.emit(this.checked))};handleKeyDown=e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this.handleToggle())};render(){return l(s,{key:"8a1f816240f815905cc7def7cac92eb7ddac0df2",class:{checked:this.checked,disabled:this.disabled},tabIndex:this.disabled?-1:0,role:"switch","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false","aria-label":this.label,onClick:this.handleToggle,onKeyDown:this.handleKeyDown},l("div",{key:"d5fa5091ad54032f81dad3879149c4d8ec7ea37b",class:"toggle-track"},l("div",{key:"cce0d61431ed65a26926b0a496a5c22eb4169577",class:"toggle-thumb"})))}static get style(){return":host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}"}},[513,"kritzel-slide-toggle",{checked:[1028],disabled:[4],label:[1]}]);function a(){"undefined"!=typeof customElements&&["kritzel-slide-toggle"].forEach((e=>{"kritzel-slide-toggle"===e&&(customElements.get(r(e))||customElements.define(r(e),o))}))}export{o as K,a as d}
@@ -2,7 +2,7 @@ const NAMESPACE = 'stencil';
2
2
  const BUILD = /* stencil */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
3
3
 
4
4
  /*
5
- Stencil Client Platform v4.43.4 | MIT Licensed | https://stenciljs.com
5
+ Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
6
6
  */
7
7
 
8
8
 
package/dist/esm/index.js CHANGED
@@ -1,8 +1,8 @@
1
- import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-BcT1vV4J.js';
2
- export { C as APP_STATE_MIGRATIONS, A as AssetNotFoundError, F as CURRENT_APP_STATE_SCHEMA_VERSION, G as CURRENT_WORKSPACE_SCHEMA_VERSION, w as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, v as DEFAULT_LINE_TOOL_CONFIG, u as DEFAULT_TEXT_CONFIG, q as IndexedDBAssetProvider, I as IndexedDBSyncProvider, z as KritzelAlignment, s as KritzelAnchorManager, p as KritzelAssetResolver, K as KritzelBaseObject, h as KritzelBrushTool, n as KritzelCursorHelper, j as KritzelEraserTool, f as KritzelGroup, d as KritzelImage, k as KritzelImageTool, e as KritzelLine, i as KritzelLineTool, c as KritzelPath, o as KritzelSelectionTool, g as KritzelShape, m as KritzelShapeTool, b as KritzelText, l as KritzelTextTool, t as KritzelThemeManager, r as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, E as WORKSPACE_MIGRATIONS, y as darkTheme, x as lightTheme, B as runMigrations } from './schema.constants-BcT1vV4J.js';
1
+ import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-DiCnmIYK.js';
2
+ export { B as APP_STATE_MIGRATIONS, A as AssetNotFoundError, E as CURRENT_APP_STATE_SCHEMA_VERSION, F as CURRENT_WORKSPACE_SCHEMA_VERSION, v as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, I as IndexedDBAssetProvider, y as KritzelAlignment, r as KritzelAnchorManager, p as KritzelAssetResolver, K as KritzelBaseObject, h as KritzelBrushTool, n as KritzelCursorHelper, j as KritzelEraserTool, f as KritzelGroup, d as KritzelImage, k as KritzelImageTool, e as KritzelLine, i as KritzelLineTool, c as KritzelPath, o as KritzelSelectionTool, g as KritzelShape, m as KritzelShapeTool, b as KritzelText, l as KritzelTextTool, s as KritzelThemeManager, q as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, C as WORKSPACE_MIGRATIONS, x as darkTheme, w as lightTheme, z as runMigrations } from './schema.constants-DiCnmIYK.js';
3
3
  import * as Y from 'yjs';
4
+ import { IndexeddbPersistence } from 'y-indexeddb';
4
5
  import { WebsocketProvider } from 'y-websocket';
5
- import 'y-indexeddb';
6
6
 
7
7
  /**
8
8
  * Common Math expressions.
@@ -499,6 +499,44 @@ class InMemorySyncProvider {
499
499
  }
500
500
  }
501
501
 
502
+ /**
503
+ * IndexedDB sync provider for local persistence
504
+ */
505
+ class IndexedDBSyncProvider {
506
+ type = 'local';
507
+ provider;
508
+ isConnected = false;
509
+ constructor(docName, doc, options) {
510
+ const dbName = options?.name || docName;
511
+ this.provider = new IndexeddbPersistence(dbName, doc);
512
+ }
513
+ async connect() {
514
+ if (this.isConnected) {
515
+ return;
516
+ }
517
+ return new Promise(resolve => {
518
+ this.provider.on('synced', () => {
519
+ this.isConnected = true;
520
+ resolve();
521
+ });
522
+ });
523
+ }
524
+ disconnect() {
525
+ // IndexedDB doesn't need explicit disconnect
526
+ this.isConnected = false;
527
+ }
528
+ async reconnect() {
529
+ this.disconnect();
530
+ return this.connect();
531
+ }
532
+ destroy() {
533
+ if (this.provider) {
534
+ this.provider.destroy();
535
+ }
536
+ this.isConnected = false;
537
+ }
538
+ }
539
+
502
540
  /**
503
541
  * WebSocket sync provider for real-time collaboration
504
542
  */
@@ -1131,4 +1169,4 @@ class PresignedAssetProvider {
1131
1169
  }
1132
1170
  }
1133
1171
 
1134
- export { BroadcastSyncProvider, HocuspocusSyncProvider, HttpAssetProvider, InMemorySyncProvider, PresignedAssetProvider, WebSocketSyncProvider };
1172
+ export { BroadcastSyncProvider, HocuspocusSyncProvider, HttpAssetProvider, InMemorySyncProvider, IndexedDBSyncProvider, PresignedAssetProvider, WebSocketSyncProvider };