kritzel-stencil 0.1.83 → 0.1.86

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 (187) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/index.cjs.js +1 -1
  3. package/dist/cjs/kritzel-active-users_42.cjs.entry.js +94 -94
  4. package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
  5. package/dist/cjs/{workspace.migrations-K5oVASsb.js → workspace.migrations-Dj-FiYEO.js} +6 -6
  6. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css +115 -115
  7. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js +1 -1
  8. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css +10 -10
  9. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
  10. package/dist/collection/components/core/kritzel-editor/kritzel-editor.css +71 -71
  11. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +12 -12
  12. package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +99 -99
  13. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +14 -14
  14. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.css +58 -58
  15. package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
  16. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css +42 -42
  17. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +3 -3
  18. package/dist/collection/components/shared/kritzel-button/kritzel-button.css +72 -72
  19. package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
  20. package/dist/collection/components/shared/kritzel-color/kritzel-color.css +24 -24
  21. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
  22. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css +46 -46
  23. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
  24. package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +179 -179
  25. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +190 -190
  26. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +2 -2
  27. package/dist/collection/components/shared/kritzel-font/kritzel-font.css +10 -10
  28. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
  29. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css +48 -48
  30. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +3 -3
  31. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css +30 -30
  32. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
  33. package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css +18 -18
  34. package/dist/collection/components/shared/kritzel-input/kritzel-input.css +69 -69
  35. package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
  36. package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css +60 -60
  37. package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +3 -3
  38. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css +190 -190
  39. package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
  40. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +34 -34
  41. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
  42. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css +160 -160
  43. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
  44. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +102 -102
  45. package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
  46. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.css +85 -85
  47. package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
  48. package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.css +58 -58
  49. package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
  50. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
  51. package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
  52. package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
  53. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
  54. package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
  55. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css +78 -78
  56. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
  57. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css +37 -37
  58. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
  59. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css +18 -18
  60. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
  61. package/dist/collection/components/ui/kritzel-active-users/kritzel-active-users.css +65 -65
  62. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
  63. package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
  64. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +105 -105
  65. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js +1 -1
  66. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +330 -330
  67. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +5 -5
  68. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.css +11 -11
  69. package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
  70. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.css +29 -29
  71. package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
  72. package/dist/collection/components/ui/kritzel-export/kritzel-export.css +89 -89
  73. package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
  74. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.css +98 -98
  75. package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
  76. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.css +45 -45
  77. package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +2 -2
  78. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.css +129 -129
  79. package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
  80. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.css +133 -133
  81. package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
  82. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css +38 -38
  83. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
  84. package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
  85. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css +5 -5
  86. package/dist/collection/constants/version.js +1 -1
  87. package/dist/collection/helpers/cursor.helper.js +6 -6
  88. package/dist/collection/helpers/svg-export.helper.js +31 -31
  89. package/dist/components/index.js +1 -1
  90. package/dist/components/kritzel-active-users.js +1 -1
  91. package/dist/components/kritzel-avatar.js +1 -1
  92. package/dist/components/kritzel-awareness-cursors.js +1 -1
  93. package/dist/components/kritzel-back-to-content.js +1 -1
  94. package/dist/components/kritzel-brush-style.js +1 -1
  95. package/dist/components/kritzel-button.js +1 -1
  96. package/dist/components/kritzel-color-palette.js +1 -1
  97. package/dist/components/kritzel-color.js +1 -1
  98. package/dist/components/kritzel-context-menu.js +1 -1
  99. package/dist/components/kritzel-controls.js +1 -1
  100. package/dist/components/kritzel-current-user-dialog.js +1 -1
  101. package/dist/components/kritzel-current-user.js +1 -1
  102. package/dist/components/kritzel-cursor-trail.js +1 -1
  103. package/dist/components/kritzel-dialog.js +1 -1
  104. package/dist/components/kritzel-dropdown.js +1 -1
  105. package/dist/components/kritzel-editor.js +1 -1
  106. package/dist/components/kritzel-engine.js +1 -1
  107. package/dist/components/kritzel-export.js +1 -1
  108. package/dist/components/kritzel-font-family.js +1 -1
  109. package/dist/components/kritzel-font-size.js +1 -1
  110. package/dist/components/kritzel-font.js +1 -1
  111. package/dist/components/kritzel-input.js +1 -1
  112. package/dist/components/kritzel-line-endings.js +1 -1
  113. package/dist/components/kritzel-login-dialog.js +1 -1
  114. package/dist/components/kritzel-master-detail.js +1 -1
  115. package/dist/components/kritzel-menu-item.js +1 -1
  116. package/dist/components/kritzel-menu.js +1 -1
  117. package/dist/components/kritzel-more-menu.js +1 -1
  118. package/dist/components/kritzel-numeric-input.js +1 -1
  119. package/dist/components/kritzel-opacity-slider.js +1 -1
  120. package/dist/components/kritzel-pill-tabs.js +1 -1
  121. package/dist/components/kritzel-portal.js +1 -1
  122. package/dist/components/kritzel-settings.js +1 -1
  123. package/dist/components/kritzel-shape-fill.js +1 -1
  124. package/dist/components/kritzel-share-dialog.js +1 -1
  125. package/dist/components/kritzel-slide-toggle.js +1 -1
  126. package/dist/components/kritzel-split-button.js +1 -1
  127. package/dist/components/kritzel-stroke-size.js +1 -1
  128. package/dist/components/kritzel-tool-config.js +1 -1
  129. package/dist/components/kritzel-tooltip.js +1 -1
  130. package/dist/components/kritzel-utility-panel.js +1 -1
  131. package/dist/components/kritzel-workspace-manager.js +1 -1
  132. package/dist/components/{p-B5WII1Lk.js → p-0cs6zQLB.js} +1 -1
  133. package/dist/components/p-7yTPTHbQ.js +1 -0
  134. package/dist/components/{p-DwemlMvt.js → p-B3UJucEe.js} +1 -1
  135. package/dist/components/{p-DUQmBcTy.js → p-B5a3arJg.js} +1 -1
  136. package/dist/components/{p-DCH4Rlqx.js → p-BIdZCZ_l.js} +1 -1
  137. package/dist/components/{p-CNMpVlot.js → p-BMPgR5Bt.js} +1 -1
  138. package/dist/components/{p-CKfjz1gj.js → p-BOcGfEkz.js} +1 -1
  139. package/dist/components/{p-DUnKjQN7.js → p-BVEYAGm1.js} +1 -1
  140. package/dist/components/{p-CMGHx71q.js → p-BYX50YSd.js} +1 -1
  141. package/dist/components/{p-BjPmEs5A.js → p-BfJav4Zz.js} +1 -1
  142. package/dist/components/{p-CLo-TjD_.js → p-BgopgrfE.js} +1 -1
  143. package/dist/components/{p-CJzg_ejc.js → p-BsQ4E7I8.js} +1 -1
  144. package/dist/components/{p-V3VW2JKl.js → p-C-ZoFpSf.js} +1 -1
  145. package/dist/components/p-C0U3Mg5I.js +1 -0
  146. package/dist/components/{p-Brwz_Dpb.js → p-C3Dwuqka.js} +1 -1
  147. package/dist/components/{p-CS7r-zhx.js → p-C4vg_-vg.js} +1 -1
  148. package/dist/components/{p-DrsORMoT.js → p-C4zfI-dj.js} +1 -1
  149. package/dist/components/{p-cjeDomsc.js → p-CBTqCoUx.js} +1 -1
  150. package/dist/components/{p-BaaFG0p-.js → p-CBq-KE9C.js} +1 -1
  151. package/dist/components/{p-CfEGaTaV.js → p-CTj2UdbS.js} +1 -1
  152. package/dist/components/{p-Bat829Bg.js → p-C_OSXZqJ.js} +1 -1
  153. package/dist/components/{p-B4F19Aqj.js → p-CaKSDRid.js} +1 -1
  154. package/dist/components/{p-BZ8bK8qT.js → p-CekG3_ce.js} +1 -1
  155. package/dist/components/{p-Dw0Obsn5.js → p-Cz2gQKbL.js} +1 -1
  156. package/dist/components/{p-VxgCvVox.js → p-CzIuqMQA.js} +1 -1
  157. package/dist/components/{p-1ppb4M65.js → p-D6KNaj_Y.js} +1 -1
  158. package/dist/components/{p-rNu5JVNH.js → p-D8fQwcNC.js} +1 -1
  159. package/dist/components/{p-CYl_JKvH.js → p-DBZRCL1u.js} +1 -1
  160. package/dist/components/{p-DkT0KZCm.js → p-DDBaFNFi.js} +1 -1
  161. package/dist/components/{p-CM7rYf9A.js → p-DEd2L0e3.js} +1 -1
  162. package/dist/components/{p-DYcsC2zO.js → p-DMvIGnOt.js} +1 -1
  163. package/dist/components/{p-C9zsWWH2.js → p-DPmAV68B.js} +1 -1
  164. package/dist/components/{p-7yR-sKH8.js → p-DRbR0Li3.js} +1 -1
  165. package/dist/components/{p-C-MtTi6x.js → p-DXO_ppUK.js} +1 -1
  166. package/dist/components/p-DemKKw9U.js +1 -0
  167. package/dist/components/{p-D5BXoK9m.js → p-Dxb22STM.js} +1 -1
  168. package/dist/components/p-Nq8UyPCc.js +1 -0
  169. package/dist/components/{p-DEOUiiyI.js → p-R9M5PnAz.js} +1 -1
  170. package/dist/components/{p-D7pwbRUy.js → p-qBqQhAmh.js} +1 -1
  171. package/dist/esm/index.js +1 -1
  172. package/dist/esm/kritzel-active-users_42.entry.js +94 -94
  173. package/dist/esm/kritzel-brush-style.entry.js +1 -1
  174. package/dist/esm/{workspace.migrations-D5iSPf3E.js → workspace.migrations-ByWmiPl8.js} +6 -6
  175. package/dist/stencil/index.esm.js +1 -1
  176. package/dist/stencil/{p-b0be4da1.entry.js → p-10c2b77c.entry.js} +1 -1
  177. package/dist/stencil/p-b38650d2.entry.js +9 -0
  178. package/dist/stencil/stencil.esm.js +1 -1
  179. package/dist/types/constants/version.d.ts +1 -1
  180. package/package.json +2 -2
  181. package/readme.md +114 -114
  182. package/dist/components/p-B4h_tGG1.js +0 -1
  183. package/dist/components/p-CJKsuQun.js +0 -1
  184. package/dist/components/p-DKeBfe_l.js +0 -1
  185. package/dist/components/p-HK-6khHo.js +0 -1
  186. package/dist/stencil/p-c28b30ab.entry.js +0 -9
  187. /package/dist/stencil/{p-D5iSPf3E.js → p-ByWmiPl8.js} +0 -0
@@ -1 +1 @@
1
- import{p as e,H as t,c as i,h as r,d as o,t as a}from"./p-BWj1eE2b.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange")}value="";label="";placeholder="";suffix="";type="text";disabled=!1;valueChange;inputValue="";onValueChange(e){this.inputValue=e??""}componentWillLoad(){this.inputValue=this.value??""}handleInput=e=>{const t=e.target;this.inputValue=t.value,this.value=t.value,this.valueChange.emit(t.value)};render(){return r(o,{key:"5cfc93853afd27dd24ff9709dcd277571ae4d0a1"},r("div",{key:"fa0a43610b98ffbc30bf9485a4f8730b80f74ab7",class:"input-container"},this.label&&r("label",{key:"151346732ef4a00a1ea78bbc19ac56a94488dfc4",class:"input-label"},this.label),r("div",{key:"79b28f6f45cdacf7d122988bb4c844c929544cce",class:{"input-wrapper":!0,"has-suffix":!!this.suffix}},r("input",{key:"e22abd0e10ee231b2e66f50085693769584a1254",type:this.type,class:"text-input",value:this.inputValue,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput}),this.suffix&&r("span",{key:"5c96287d24dc28f4ac321f108a356527194f4e81",class:"input-suffix"},this.suffix))))}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return":host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:6px;overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}"}},[513,"kritzel-input",{value:[1025],label:[1],placeholder:[1],suffix:[1],type:[1],disabled:[4],inputValue:[32]},void 0,{value:[{onValueChange:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-input"].forEach((e=>{"kritzel-input"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))}export{l as K,n as d}
1
+ import{p as e,H as t,c as i,h as r,d as o,t as a}from"./p-BWj1eE2b.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange")}value="";label="";placeholder="";suffix="";type="text";disabled=!1;valueChange;inputValue="";onValueChange(e){this.inputValue=e??""}componentWillLoad(){this.inputValue=this.value??""}handleInput=e=>{const t=e.target;this.inputValue=t.value,this.value=t.value,this.valueChange.emit(t.value)};render(){return r(o,{key:"e482edcbaf7cee8c35effbce0428c2b4dea84bd4"},r("div",{key:"a71f5e3eeba5e34470227ea3be4dd6731a94a52e",class:"input-container"},this.label&&r("label",{key:"757a32997f09558412952fe948fa234d1baecb3f",class:"input-label"},this.label),r("div",{key:"cfb13fe0041efdd9fe4a7bf2a098ff321b545b79",class:{"input-wrapper":!0,"has-suffix":!!this.suffix}},r("input",{key:"b8bf209f14f15f4ad8eb0cf1be1afb1bfc958f79",type:this.type,class:"text-input",value:this.inputValue,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput}),this.suffix&&r("span",{key:"b5d4444609ad93c10d86978a488252b673979c94",class:"input-suffix"},this.suffix))))}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return":host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:6px;overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}"}},[513,"kritzel-input",{value:[1025],label:[1],placeholder:[1],suffix:[1],type:[1],disabled:[4],inputValue:[32]},void 0,{value:[{onValueChange:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-input"].forEach((e=>{"kritzel-input"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))}export{l as K,n as d}
@@ -1 +1 @@
1
- import{p as t,H as s,c as i,h as e,d as h,t as n}from"./p-BWj1eE2b.js";import{O as o}from"./p-BAN5dnHX.js";import{K as r}from"./p-BML28BJR.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.close=i(this,"close")}get host(){return this}anchor;anchorChanged(t){t?(this.openPortal(),requestAnimationFrame((()=>{this.calculatePosition(),this.autoFocus&&this.focusFirstElement()}))):this.closePortal()}offsetX;offsetY;autoFocus=!0;close;handleDismissMenus(){this.portal&&(this.close.emit(),this.closePortal())}handleOutsideClick(t){this.lastAddedPortal===this.portal&&(this.host.contains(t.target)||(this.close.emit(),this.closePortal()))}handleKeyDown(t){if(this.lastAddedPortal===this.portal){if("Escape"===t.key)return t.stopPropagation(),this.anchor.focus(),this.close.emit(),void this.closePortal();if("Tab"!==t.key){if("Enter"===t.key){const s=this.getDeepActiveElement();s?.click&&(t.preventDefault(),s.click())}}else this.trapFocus(t)}}handleResize(){this.calculatePosition()}handleWindowScroll(){if(!r.isElementInViewport(this.anchor))return this.anchor?.blur(),void this.closePortal();this.calculatePosition()}portal;id=`portal-${o.generateUUID()}`;defaultOffset=0;minLeft=0;themeObserver;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(t){const s=r.getFocusableElements(this.host);if(0===s.length)return;const i=s[0],e=s[s.length-1],h=this.getDeepActiveElement();t.shiftKey?h===i&&(e.focus(),t.preventDefault()):h===e&&(i.focus(),t.preventDefault())}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot"),s=t?.assignedElements({flatten:!0})[0];return s?r.getFocusableElements(s)[0]??s:null}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetX??this.defaultOffset;let e;e=t.left+t.width/2>window.innerWidth/2?t.right-s.width-i:t.left+i;const h=window.innerWidth-s.width-this.minLeft;return e<this.minLeft&&(e=this.minLeft),e>h&&(e=h),Math.round(e+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetY??this.defaultOffset;let e=t.bottom+i;const h=window.innerHeight-t.bottom-i-8,n=t.top-i-8;return this.host.style.removeProperty("--kritzel-portal-max-height"),s.height<=h?e=t.bottom+i:s.height<=n?e=t.top-s.height-i:h>=n?(e=t.bottom+i,this.host.style.setProperty("--kritzel-portal-max-height",`${h}px`)):(e=8,this.host.style.setProperty("--kritzel-portal-max-height",`${n}px`)),Math.round(e+window.scrollY)}getThemeProvider(){if(!this.anchor)return null;let t=this.anchor;for(;t;){const i=t.closest("kritzel-editor");if(i instanceof s)return i;const e=t.closest('[id^="portal-"]');if(e instanceof s)return e;const h=t.getRootNode();if(!(h instanceof ShadowRoot))return null;t=h.host}return null}openPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.id),this.portal.style.zIndex="1",this.portal.style.position="absolute",this.portal.style.top="0px",this.portal.style.left="0px",this.portal.style.visibility="hidden";const t=this.getThemeProvider();if(t){const s=()=>{if(this.portal)for(let s=0;s<t.style.length;s++){const i=t.style[s];i.startsWith("--kritzel-")&&this.portal.style.setProperty(i,t.style.getPropertyValue(i))}};s(),this.themeObserver=new MutationObserver((()=>s())),this.themeObserver.observe(t,{attributes:!0,attributeFilter:["style"]})}this.portal.appendChild(this.host),document.body.append(this.portal)}closePortal(){this.themeObserver?.disconnect(),this.themeObserver=null;const t=document.getElementById(this.id);t&&(document.body.removeChild(t),this.host.remove())}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop(),s=this.calculateLeft();this.portal.style.top=`${t}px`,this.portal.style.left=`${s}px`,this.portal.style.visibility="visible"}render(){return e(h,{key:"70a29385ee7f1bef37f903e1e6821b46fc9a147f",style:{display:this.anchor?"block":"none"}},e("slot",{key:"8f50bce48c3aa82abbfc34331f8e80f205a45f03"}))}static get watchers(){return{anchor:[{anchorChanged:0}]}}},[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"kritzel-dismiss-menus","handleDismissMenus"],[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:[{anchorChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-portal"].forEach((t=>{"kritzel-portal"===t&&(customElements.get(n(t))||customElements.define(n(t),l))}))}export{l as K,a as d}
1
+ import{p as t,H as s,c as i,h as e,d as h,t as n}from"./p-BWj1eE2b.js";import{O as o}from"./p-BAN5dnHX.js";import{K as r}from"./p-BML28BJR.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.close=i(this,"close")}get host(){return this}anchor;anchorChanged(t){t?(this.openPortal(),requestAnimationFrame((()=>{this.calculatePosition(),this.autoFocus&&this.focusFirstElement()}))):this.closePortal()}offsetX;offsetY;autoFocus=!0;close;handleDismissMenus(){this.portal&&(this.close.emit(),this.closePortal())}handleOutsideClick(t){this.lastAddedPortal===this.portal&&(this.host.contains(t.target)||(this.close.emit(),this.closePortal()))}handleKeyDown(t){if(this.lastAddedPortal===this.portal){if("Escape"===t.key)return t.stopPropagation(),this.anchor.focus(),this.close.emit(),void this.closePortal();if("Tab"!==t.key){if("Enter"===t.key){const s=this.getDeepActiveElement();s?.click&&(t.preventDefault(),s.click())}}else this.trapFocus(t)}}handleResize(){this.calculatePosition()}handleWindowScroll(){if(!r.isElementInViewport(this.anchor))return this.anchor?.blur(),void this.closePortal();this.calculatePosition()}portal;id=`portal-${o.generateUUID()}`;defaultOffset=0;minLeft=0;themeObserver;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(t){const s=r.getFocusableElements(this.host);if(0===s.length)return;const i=s[0],e=s[s.length-1],h=this.getDeepActiveElement();t.shiftKey?h===i&&(e.focus(),t.preventDefault()):h===e&&(i.focus(),t.preventDefault())}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot"),s=t?.assignedElements({flatten:!0})[0];return s?r.getFocusableElements(s)[0]??s:null}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetX??this.defaultOffset;let e;e=t.left+t.width/2>window.innerWidth/2?t.right-s.width-i:t.left+i;const h=window.innerWidth-s.width-this.minLeft;return e<this.minLeft&&(e=this.minLeft),e>h&&(e=h),Math.round(e+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetY??this.defaultOffset;let e=t.bottom+i;const h=window.innerHeight-t.bottom-i-8,n=t.top-i-8;return this.host.style.removeProperty("--kritzel-portal-max-height"),s.height<=h?e=t.bottom+i:s.height<=n?e=t.top-s.height-i:h>=n?(e=t.bottom+i,this.host.style.setProperty("--kritzel-portal-max-height",`${h}px`)):(e=8,this.host.style.setProperty("--kritzel-portal-max-height",`${n}px`)),Math.round(e+window.scrollY)}getThemeProvider(){if(!this.anchor)return null;let t=this.anchor;for(;t;){const i=t.closest("kritzel-editor");if(i instanceof s)return i;const e=t.closest('[id^="portal-"]');if(e instanceof s)return e;const h=t.getRootNode();if(!(h instanceof ShadowRoot))return null;t=h.host}return null}openPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.id),this.portal.style.zIndex="1",this.portal.style.position="absolute",this.portal.style.top="0px",this.portal.style.left="0px",this.portal.style.visibility="hidden";const t=this.getThemeProvider();if(t){const s=()=>{if(this.portal)for(let s=0;s<t.style.length;s++){const i=t.style[s];i.startsWith("--kritzel-")&&this.portal.style.setProperty(i,t.style.getPropertyValue(i))}};s(),this.themeObserver=new MutationObserver((()=>s())),this.themeObserver.observe(t,{attributes:!0,attributeFilter:["style"]})}this.portal.appendChild(this.host),document.body.append(this.portal)}closePortal(){this.themeObserver?.disconnect(),this.themeObserver=null;const t=document.getElementById(this.id);t&&(document.body.removeChild(t),this.host.remove())}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop(),s=this.calculateLeft();this.portal.style.top=`${t}px`,this.portal.style.left=`${s}px`,this.portal.style.visibility="visible"}render(){return e(h,{key:"6acf9d402aa0ee151d93b912fc2b9d46cfe88d07",style:{display:this.anchor?"block":"none"}},e("slot",{key:"dbeff1735d422e818179346f5880555fbadddba9"}))}static get watchers(){return{anchor:[{anchorChanged:0}]}}},[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"kritzel-dismiss-menus","handleDismissMenus"],[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:[{anchorChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-portal"].forEach((t=>{"kritzel-portal"===t&&(customElements.get(n(t))||customElements.define(n(t),l))}))}export{l as K,a as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as o,h as i,d as l,t as a}from"./p-BWj1eE2b.js";import{K as s}from"./p-BML28BJR.js";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogOpen=o(this,"dialogOpen"),this.dialogClose=o(this,"dialogClose")}get host(){return this}isOpen=!1;dialogTitle;closable=!0;closeOnBackdrop=!0;closeOnEscape=!0;autoFocus=!0;trapFocus=!0;size="medium";fullscreenOnMobile=!0;isAnimating=!1;mobileLockedHeight=null;dialogOpen;dialogClose;previousOverflow="";previousActiveElement=null;handleIsOpenChange(e){e?this.openDialog():this.closeDialog()}handleKeyDown(e){this.isOpen&&("Escape"===e.key&&this.closeOnEscape&&(e.preventDefault(),e.stopPropagation(),this.emitClose("escape")),"Tab"===e.key&&this.trapFocus&&this.handleTabKey(e))}async open(){this.isOpen||(this.isOpen=!0)}async close(e="programmatic"){this.emitClose(e)}async focusFirstElement(){this.focusFirst()}componentDidLoad(){this.isOpen&&this.openDialog()}disconnectedCallback(){this.restoreBodyScroll()}openDialog(){this.isAnimating=!0,this.previousActiveElement=document.activeElement,this.lockBodyScroll(),this.lockMobileViewportHeight(),this.dialogOpen.emit(),this.autoFocus&&requestAnimationFrame((()=>{this.focusFirst()})),requestAnimationFrame((()=>{this.isAnimating=!1}))}closeDialog(){this.restoreBodyScroll(),this.mobileLockedHeight=null,this.returnFocusToPreviousElement()}emitClose(e){this.dialogClose.emit({reason:e})}lockBodyScroll(){this.previousOverflow=document.body.style.overflow,document.body.style.overflow="hidden"}lockMobileViewportHeight(){this.mobileLockedHeight=!this.fullscreenOnMobile||window.innerWidth>576?null:`${window.innerHeight}px`}restoreBodyScroll(){document.body.style.overflow=this.previousOverflow}returnFocusToPreviousElement(){this.previousActiveElement?.focus&&this.previousActiveElement.focus()}focusFirst(){const e=this.host.shadowRoot?.querySelector(".dialog-content");if(!e)return;const t=[...s.getFocusableElements(e),...this.getSlottedFocusableElements()];t.length>0?t[0].focus():e.focus()}getSlottedFocusableElements(){const e=this.host.shadowRoot?.querySelectorAll("slot")??[],t=[];return e.forEach((e=>{e.assignedElements({flatten:!0}).forEach((e=>{const o=s.getFocusableElements(e);t.push(...o)}))})),t}handleTabKey(e){const t=this.getSlottedFocusableElements(),o=this.host.shadowRoot?.querySelector(".close-button");if(o&&this.closable&&t.unshift(o),0===t.length)return;const i=t[0],l=t[t.length-1],a=this.getDeepActiveElement();e.shiftKey?a===i&&(e.preventDefault(),l.focus()):a===l&&(e.preventDefault(),i.focus())}getDeepActiveElement(){let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e}handleBackdropClick=e=>{e.stopPropagation(),this.closeOnBackdrop&&this.emitClose("backdrop")};handleCloseButtonClick=e=>{e.stopPropagation(),this.emitClose("close-button")};handleContentClick=e=>{e.stopPropagation()};renderCloseButton(){return this.closable?i("button",{class:"close-button",type:"button","aria-label":"Close dialog",onClick:this.handleCloseButtonClick},i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),i("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null}renderHeader(){const e=null!==this.host.querySelector('[slot="header"]'),t=!!this.dialogTitle;return e||t||this.closable?i("div",{class:"dialog-header"},e?i("slot",{name:"header"}):t?i("h2",{class:"dialog-title"},this.dialogTitle):null,this.renderCloseButton()):null}renderFooter(){return null!==this.host.querySelector('[slot="footer"]')?i("div",{class:"dialog-footer"},i("slot",{name:"footer"})):null}render(){return this.isOpen?i(l,null,i("div",{class:{backdrop:!0,"is-animating":this.isAnimating},onClick:this.handleBackdropClick},i("div",{class:{"dialog-content":!0,"is-animating":this.isAnimating,[`size-${this.size}`]:!0,"fullscreen-on-mobile":this.fullscreenOnMobile},style:this.mobileLockedHeight?{height:this.mobileLockedHeight,maxHeight:this.mobileLockedHeight}:void 0,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?"dialog-title":void 0,tabIndex:-1,onClick:this.handleContentClick},this.renderHeader(),i("div",{class:"dialog-body"},i("slot",null)),this.renderFooter()))):null}static get watchers(){return{isOpen:[{handleIsOpenChange:0}]}}static get style(){return":host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}"}},[769,"kritzel-dialog",{isOpen:[516,"is-open"],dialogTitle:[1,"dialog-title"],closable:[4],closeOnBackdrop:[4,"close-on-backdrop"],closeOnEscape:[4,"close-on-escape"],autoFocus:[4,"auto-focus"],trapFocus:[4,"trap-focus"],size:[1],fullscreenOnMobile:[4,"fullscreen-on-mobile"],isAnimating:[32],mobileLockedHeight:[32],open:[64],close:[64],focusFirstElement:[64]},[[8,"keydown","handleKeyDown"]],{isOpen:[{handleIsOpenChange:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-dialog"].forEach((e=>{"kritzel-dialog"===e&&(customElements.get(a(e))||customElements.define(a(e),r))}))}export{r as K,n as d}
1
+ import{p as e,H as t,c as o,h as i,d as l,t as a}from"./p-BWj1eE2b.js";import{K as s}from"./p-BML28BJR.js";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogOpen=o(this,"dialogOpen"),this.dialogClose=o(this,"dialogClose")}get host(){return this}isOpen=!1;dialogTitle;closable=!0;closeOnBackdrop=!0;closeOnEscape=!0;autoFocus=!0;trapFocus=!0;size="medium";fullscreenOnMobile=!0;isAnimating=!1;mobileLockedHeight=null;dialogOpen;dialogClose;previousOverflow="";previousActiveElement=null;handleIsOpenChange(e){e?this.openDialog():this.closeDialog()}handleKeyDown(e){this.isOpen&&("Escape"===e.key&&this.closeOnEscape&&(e.preventDefault(),e.stopPropagation(),this.emitClose("escape")),"Tab"===e.key&&this.trapFocus&&this.handleTabKey(e))}async open(){this.isOpen||(this.isOpen=!0)}async close(e="programmatic"){this.emitClose(e)}async focusFirstElement(){this.focusFirst()}componentDidLoad(){this.isOpen&&this.openDialog()}disconnectedCallback(){this.restoreBodyScroll()}openDialog(){this.isAnimating=!0,this.previousActiveElement=document.activeElement,this.lockBodyScroll(),this.lockMobileViewportHeight(),this.dialogOpen.emit(),this.autoFocus&&requestAnimationFrame((()=>{this.focusFirst()})),requestAnimationFrame((()=>{this.isAnimating=!1}))}closeDialog(){this.restoreBodyScroll(),this.mobileLockedHeight=null,this.returnFocusToPreviousElement()}emitClose(e){this.dialogClose.emit({reason:e})}lockBodyScroll(){this.previousOverflow=document.body.style.overflow,document.body.style.overflow="hidden"}lockMobileViewportHeight(){this.mobileLockedHeight=!this.fullscreenOnMobile||window.innerWidth>576?null:`${window.innerHeight}px`}restoreBodyScroll(){document.body.style.overflow=this.previousOverflow}returnFocusToPreviousElement(){this.previousActiveElement?.focus&&this.previousActiveElement.focus()}focusFirst(){const e=this.host.shadowRoot?.querySelector(".dialog-content");if(!e)return;const t=[...s.getFocusableElements(e),...this.getSlottedFocusableElements()];t.length>0?t[0].focus():e.focus()}getSlottedFocusableElements(){const e=this.host.shadowRoot?.querySelectorAll("slot")??[],t=[];return e.forEach((e=>{e.assignedElements({flatten:!0}).forEach((e=>{const o=s.getFocusableElements(e);t.push(...o)}))})),t}handleTabKey(e){const t=this.getSlottedFocusableElements(),o=this.host.shadowRoot?.querySelector(".close-button");if(o&&this.closable&&t.unshift(o),0===t.length)return;const i=t[0],l=t[t.length-1],a=this.getDeepActiveElement();e.shiftKey?a===i&&(e.preventDefault(),l.focus()):a===l&&(e.preventDefault(),i.focus())}getDeepActiveElement(){let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e}handleBackdropClick=e=>{e.stopPropagation(),this.closeOnBackdrop&&this.emitClose("backdrop")};handleCloseButtonClick=e=>{e.stopPropagation(),this.emitClose("close-button")};handleContentClick=e=>{e.stopPropagation()};renderCloseButton(){return this.closable?i("button",{class:"close-button",type:"button","aria-label":"Close dialog",onClick:this.handleCloseButtonClick},i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),i("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null}renderHeader(){const e=null!==this.host.querySelector('[slot="header"]'),t=!!this.dialogTitle;return e||t||this.closable?i("div",{class:"dialog-header"},e?i("slot",{name:"header"}):t?i("h2",{class:"dialog-title"},this.dialogTitle):null,this.renderCloseButton()):null}renderFooter(){return null!==this.host.querySelector('[slot="footer"]')?i("div",{class:"dialog-footer"},i("slot",{name:"footer"})):null}render(){return this.isOpen?i(l,null,i("div",{class:{backdrop:!0,"is-animating":this.isAnimating},onClick:this.handleBackdropClick},i("div",{class:{"dialog-content":!0,"is-animating":this.isAnimating,[`size-${this.size}`]:!0,"fullscreen-on-mobile":this.fullscreenOnMobile},style:this.mobileLockedHeight?{height:this.mobileLockedHeight,maxHeight:this.mobileLockedHeight}:void 0,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?"dialog-title":void 0,tabIndex:-1,onClick:this.handleContentClick},this.renderHeader(),i("div",{class:"dialog-body"},i("slot",null)),this.renderFooter()))):null}static get watchers(){return{isOpen:[{handleIsOpenChange:0}]}}static get style(){return":host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}"}},[769,"kritzel-dialog",{isOpen:[516,"is-open"],dialogTitle:[1,"dialog-title"],closable:[4],closeOnBackdrop:[4,"close-on-backdrop"],closeOnEscape:[4,"close-on-escape"],autoFocus:[4,"auto-focus"],trapFocus:[4,"trap-focus"],size:[1],fullscreenOnMobile:[4,"fullscreen-on-mobile"],isAnimating:[32],mobileLockedHeight:[32],open:[64],close:[64],focusFirstElement:[64]},[[8,"keydown","handleKeyDown"]],{isOpen:[{handleIsOpenChange:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-dialog"].forEach((e=>{"kritzel-dialog"===e&&(customElements.get(a(e))||customElements.define(a(e),r))}))}export{r as K,n as d}
@@ -1 +1 @@
1
- import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-BWj1eE2b.js";import{h as n,d as s,f as a,e as c,g as d}from"./p-zM6hQ55n.js";import{K as p}from"./p-jGOpkGDl.js";import{K as h,d as k}from"./p-CYl_JKvH.js";import{a as f}from"./p-CjazGGq3.js";import{d as u}from"./p-BZ8bK8qT.js";import{d as b}from"./p-Brwz_Dpb.js";import{d as g}from"./p-cjeDomsc.js";import{d as z}from"./p-CS7r-zhx.js";import{d as m}from"./p-D7pwbRUy.js";import{d as v}from"./p-DkT0KZCm.js";import{d as x}from"./p-Gm5hSQ-e.js";import{d as y}from"./p-1ppb4M65.js";import{d as w}from"./p-CJKsuQun.js";import{d as C}from"./p-CM7rYf9A.js";import{d as j}from"./p-VxgCvVox.js";import{d as E}from"./p-B5WII1Lk.js";import{d as T}from"./p-CJzg_ejc.js";const S=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTouchDevice=p.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.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)}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=h.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:f.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof a&&(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()}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.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}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=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"fa03f9eae6ebc0a043d6ac3cb774ae32491ae943",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"2e789118656dc3366f131b520f2be4386e5889c8",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:"29b4d14746f81f7def022ec5769c9d1bf21a6dab",class:"kritzel-controls"},r("div",{key:"eb5a4ddd2c0ee9d77c008ddae1223e4ce4449116",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"5c41c8fc6770ef5eae7e5b03752f0fe65bcf30e1",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),title: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 shape type","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)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"a924ed9102961f992b27afe6945732c8541c13a0",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:"9709b046ceb6ba0982ca45b93212b2d449c2b2fe",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"b2a2521c810f176f54ef8accff5b98a4a1acf42d",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"cdfc29f2b8a3cd800789f68879216e73700d546e",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"09d77705945e3e52eff40107c3bcbccbb636586d",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.activeControl.tool instanceof a&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,theme:this.theme,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}: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:10000;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-border, #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",{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],closeTooltip:[64]},[[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}]);function D(){"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),S);break;case"kritzel-color":customElements.get(l(t))||u();break;case"kritzel-color-palette":customElements.get(l(t))||b();break;case"kritzel-dropdown":customElements.get(l(t))||g();break;case"kritzel-font":customElements.get(l(t))||z();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||x();break;case"kritzel-line-endings":customElements.get(l(t))||y();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||j();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||E();break;case"kritzel-utility-panel":customElements.get(l(t))||T()}}))}export{S as K,D as d}
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,d as s,f as a,e as c,g as d}from"./p-zM6hQ55n.js";import{K as h}from"./p-jGOpkGDl.js";import{K as p,d as k}from"./p-DBZRCL1u.js";import{a as f}from"./p-CjazGGq3.js";import{d as u}from"./p-CekG3_ce.js";import{d as b}from"./p-C3Dwuqka.js";import{d as g}from"./p-CBTqCoUx.js";import{d as z}from"./p-C4vg_-vg.js";import{d as m}from"./p-qBqQhAmh.js";import{d as v}from"./p-DDBaFNFi.js";import{d as x}from"./p-Gm5hSQ-e.js";import{d as y}from"./p-D6KNaj_Y.js";import{d as w}from"./p-DemKKw9U.js";import{d as C}from"./p-DEd2L0e3.js";import{d as j}from"./p-CzIuqMQA.js";import{d as E}from"./p-0cs6zQLB.js";import{d as T}from"./p-BsQ4E7I8.js";const S=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTouchDevice=h.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.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)}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=p.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:f.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof a&&(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()}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.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}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=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"ea5e17d6995c228862b6d3375213b8f4ff05f04b",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"3296551d078f9d358efff1438fdcf723349fa5e1",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:"9cbea189d5875cda4f09dc7228345e0cb268d47d",class:"kritzel-controls"},r("div",{key:"0df655a7ac5bd6bc164b82703bc212b480058ba2",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"bc16b645b6c6a12ec6bd8420a8d84aee83d2b6d2",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),title: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 shape type","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)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"2e0824a991997d52168a3d922c2214ed66f5bf57",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:"d2cb554f56ce0f3bfe72e85fcbb506199387c15f",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"39412859a99c71b536e0b2ed0045b671a975af7e",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"1977ceddd337df53e8636e2bddd1d928aca3a1ff",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"06bd3bf3558931a0c2317e149d8990f42e77adae",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.activeControl.tool instanceof a&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,theme:this.theme,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}: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:10000;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-border, #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",{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],closeTooltip:[64]},[[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}]);function D(){"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),S);break;case"kritzel-color":customElements.get(l(t))||u();break;case"kritzel-color-palette":customElements.get(l(t))||b();break;case"kritzel-dropdown":customElements.get(l(t))||g();break;case"kritzel-font":customElements.get(l(t))||z();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||x();break;case"kritzel-line-endings":customElements.get(l(t))||y();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||j();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||E();break;case"kritzel-utility-panel":customElements.get(l(t))||T()}}))}export{S as K,D as d}
@@ -1 +1 @@
1
- import{p as t,H as e,c as i,h as o,d as r,t as l}from"./p-BWj1eE2b.js";import{d as a}from"./p-Gm5hSQ-e.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.undo=i(this,"undo"),this.redo=i(this,"redo"),this.delete=i(this,"delete")}undoState=null;undo;redo;delete;handleUndo(t){t.cancelable&&(t.preventDefault(),t.stopPropagation(),this.undo.emit())}handleRedo(t){t.preventDefault(),t.stopPropagation(),this.redo.emit()}render(){return o(r,{key:"0277e775741c91fe53daea8b14f9fdec550bef45"},o("button",{key:"7eff5491f732dc6871b382612cf64a4d661fa39b",class:"utility-button","data-testid":"utility-undo",disabled:!this.undoState?.canUndo,onClick:t=>this.handleUndo(t)},o("kritzel-icon",{key:"4eff979e1b6158df5a1b17c702765432bd18f642",name:"undo"})),o("button",{key:"73d75b36bfbd9d4299aea16be54ed6e1687a47d1",class:"utility-button","data-testid":"utility-redo",disabled:!this.undoState?.canRedo,onClick:t=>this.handleRedo(t)},o("kritzel-icon",{key:"d1556e8b7aa32b102aad9ea572d040e8863197c3",name:"redo"})),o("div",{key:"eefbdb33bb73d5a48db79fe9621a91da77ddd46d",class:"utility-separator"}),o("button",{key:"15630243403ff4475123e209d0c3e7919718bc00",class:"utility-button","data-testid":"utility-delete",onClick:()=>this.delete.emit()},o("kritzel-icon",{key:"7a423865d246a4752fc8fa3411133d0bd4f1c75d",name:"delete"})))}static get style(){return":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:10000}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}"}},[513,"kritzel-utility-panel",{undoState:[16]}]);function d(){"undefined"!=typeof customElements&&["kritzel-utility-panel","kritzel-icon"].forEach((t=>{switch(t){case"kritzel-utility-panel":customElements.get(l(t))||customElements.define(l(t),n);break;case"kritzel-icon":customElements.get(l(t))||a()}}))}export{n as K,d}
1
+ import{p as t,H as e,c as i,h as o,d as r,t as l}from"./p-BWj1eE2b.js";import{d as n}from"./p-Gm5hSQ-e.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.undo=i(this,"undo"),this.redo=i(this,"redo"),this.delete=i(this,"delete")}undoState=null;undo;redo;delete;handleUndo(t){t.cancelable&&(t.preventDefault(),t.stopPropagation(),this.undo.emit())}handleRedo(t){t.preventDefault(),t.stopPropagation(),this.redo.emit()}render(){return o(r,{key:"5b03e990a92cbf09a71c067c4c07547da6dcd669"},o("button",{key:"9a5915187e2684c292b9d5d058a5b6dc3279088d",class:"utility-button","data-testid":"utility-undo",disabled:!this.undoState?.canUndo,onClick:t=>this.handleUndo(t)},o("kritzel-icon",{key:"33e3f3cdc5ee4c4fc79c5f732355523460d096ab",name:"undo"})),o("button",{key:"03bb54a25b70811a3c90624caf1f29c1534bfdcb",class:"utility-button","data-testid":"utility-redo",disabled:!this.undoState?.canRedo,onClick:t=>this.handleRedo(t)},o("kritzel-icon",{key:"042140dd6a6251d04d26fee326df30eec46d6825",name:"redo"})),o("div",{key:"16111e0e11d93d928fc6b71fc993e9ca59205a4a",class:"utility-separator"}),o("button",{key:"003edf23960221447cbeb735b04ab6642ef72f4c",class:"utility-button","data-testid":"utility-delete",onClick:()=>this.delete.emit()},o("kritzel-icon",{key:"2b3cbdbd65efe0b7923b7ecb1b4ff112a08dcc72",name:"delete"})))}static get style(){return":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:10000}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}"}},[513,"kritzel-utility-panel",{undoState:[16]}]);function d(){"undefined"!=typeof customElements&&["kritzel-utility-panel","kritzel-icon"].forEach((t=>{switch(t){case"kritzel-utility-panel":customElements.get(l(t))||customElements.define(l(t),a);break;case"kritzel-icon":customElements.get(l(t))||n()}}))}export{a as K,d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as i,h as s,d as n,t as l}from"./p-BWj1eE2b.js";import{K as a}from"./p-DhMlShij.js";import{O as o}from"./p-BAN5dnHX.js";import{d as h}from"./p-Gm5hSQ-e.js";import{d as r,a as c}from"./p-CNMpVlot.js";import{d as u}from"./p-CMGHx71q.js";import{d as m}from"./p-DKeBfe_l.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isWorkspaceManagerReady=i(this,"isWorkspaceManagerReady"),this.workspaceChange=i(this,"workspaceChange")}get host(){return this}activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(e){e.ctrlKey&&e.preventDefault()}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((e=>null!=e)).sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine(),this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");const e=this.host.closest("kritzel-editor");this.kritzelEngineRef=e?.querySelector("kritzel-engine")??null,this.kritzelEngineRef||console.warn("kritzel-engine not found in kritzel-editor.")}async select(e,t){this.editingItemId||(e.action?e.action(e,t):this.workspaceChange.emit(e.value))}async add(){await this.splitButtonRef.open(),this.newWorkspace=new a(o.generateUUID(),"New Workspace"),this.editingItemId=this.newWorkspace.id}edit(e){this.openChildMenuItem=null,this.childMenuAnchor=null,requestAnimationFrame((()=>{this.editingItemId=e.id}))}async save(e){if(this.newWorkspace)this.newWorkspace.name=e.label,await(this.kritzelEngineRef?.createWorkspace(this.newWorkspace)),this.workspaceChange.emit(this.newWorkspace);else{const t=e.value;t.name=e.label,await(this.kritzelEngineRef?.updateWorkspace(t))}this.editingItemId=null,this.newWorkspace=null}cancel(){this.newWorkspace=null,this.editingItemId=null}async delete(e){this.openChildMenuItem=null,this.childMenuAnchor=null,await(this.kritzelEngineRef?.deleteWorkspace(e.value)),e.value.id===this.activeWorkspace?.id&&(this.activeWorkspace=this.sortedWorkspaces.find((t=>t.id!==e.value.id))||null,this.workspaceChange.emit(this.activeWorkspace)),await this.splitButtonRef.focusMenu()}toggleChildMenu(e,t){this.openChildMenuItem=e,this.childMenuAnchor=t}closeChildMenu(){this.openChildMenuItem=null,this.childMenuAnchor=null}handleMenuOpen(){}handleMenuClose(){this.cancel(),this.closeChildMenu()}render(){const e=this.sortedWorkspaces.sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime())).filter((e=>null!==e)).map((e=>({id:e.id,label:e.name,icon:e.isPublic?"users-round":void 0,iconTooltip:e.isPublic?"Shared workspace":void 0,value:e,isEditing:this.editingItemId===e.id,isSelected:this.activeWorkspace?.id===e.id,isNewItem:this.newWorkspace?.id===e.id,isChildMenuOpen:this.openChildMenuItem?.id===e.id,childMenuAnchor:this.openChildMenuItem?.id===e.id?this.childMenuAnchor:null,children:[{id:`${e.id}-rename`,label:"Rename",value:"rename",action:(e,t)=>this.edit(t)},{id:`${e.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(e,t)=>this.delete(t)}]})));return s(n,null,s("kritzel-split-button",{ref:e=>this.splitButtonRef=e,items:e,mainButtonDisabled:null!=this.editingItemId,onMainButtonClick:()=>this.add(),onItemSelect:e=>this.select(e.detail.item,e.detail.parent),onItemToggleChildMenu:e=>this.toggleChildMenu(e.detail.item,e.detail.childMenuAnchor),onItemSave:e=>this.save(e.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()}))}static get style(){return":host{display:flex;flex-direction:column;z-index:1}"}},[513,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]]);function p(){"undefined"!=typeof customElements&&["kritzel-workspace-manager","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button"].forEach((e=>{switch(e){case"kritzel-workspace-manager":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-icon":customElements.get(l(e))||h();break;case"kritzel-menu":customElements.get(l(e))||c();break;case"kritzel-menu-item":customElements.get(l(e))||r();break;case"kritzel-portal":customElements.get(l(e))||u();break;case"kritzel-split-button":customElements.get(l(e))||m()}}))}export{d as K,p as d}
1
+ import{p as e,H as t,c as i,h as s,d as n,t as l}from"./p-BWj1eE2b.js";import{K as a}from"./p-DhMlShij.js";import{O as o}from"./p-BAN5dnHX.js";import{d as h}from"./p-Gm5hSQ-e.js";import{d as r,a as c}from"./p-BMPgR5Bt.js";import{d as u}from"./p-BYX50YSd.js";import{d as m}from"./p-7yTPTHbQ.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isWorkspaceManagerReady=i(this,"isWorkspaceManagerReady"),this.workspaceChange=i(this,"workspaceChange")}get host(){return this}activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(e){e.ctrlKey&&e.preventDefault()}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((e=>null!=e)).sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine(),this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");const e=this.host.closest("kritzel-editor");this.kritzelEngineRef=e?.querySelector("kritzel-engine")??null,this.kritzelEngineRef||console.warn("kritzel-engine not found in kritzel-editor.")}async select(e,t){this.editingItemId||(e.action?e.action(e,t):this.workspaceChange.emit(e.value))}async add(){await this.splitButtonRef.open(),this.newWorkspace=new a(o.generateUUID(),"New Workspace"),this.editingItemId=this.newWorkspace.id}edit(e){this.openChildMenuItem=null,this.childMenuAnchor=null,requestAnimationFrame((()=>{this.editingItemId=e.id}))}async save(e){if(this.newWorkspace)this.newWorkspace.name=e.label,await(this.kritzelEngineRef?.createWorkspace(this.newWorkspace)),this.workspaceChange.emit(this.newWorkspace);else{const t=e.value;t.name=e.label,await(this.kritzelEngineRef?.updateWorkspace(t))}this.editingItemId=null,this.newWorkspace=null}cancel(){this.newWorkspace=null,this.editingItemId=null}async delete(e){this.openChildMenuItem=null,this.childMenuAnchor=null,await(this.kritzelEngineRef?.deleteWorkspace(e.value)),e.value.id===this.activeWorkspace?.id&&(this.activeWorkspace=this.sortedWorkspaces.find((t=>t.id!==e.value.id))||null,this.workspaceChange.emit(this.activeWorkspace)),await this.splitButtonRef.focusMenu()}toggleChildMenu(e,t){this.openChildMenuItem=e,this.childMenuAnchor=t}closeChildMenu(){this.openChildMenuItem=null,this.childMenuAnchor=null}handleMenuOpen(){}handleMenuClose(){this.cancel(),this.closeChildMenu()}render(){const e=this.sortedWorkspaces.sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime())).filter((e=>null!==e)).map((e=>({id:e.id,label:e.name,icon:e.isPublic?"users-round":void 0,iconTooltip:e.isPublic?"Shared workspace":void 0,value:e,isEditing:this.editingItemId===e.id,isSelected:this.activeWorkspace?.id===e.id,isNewItem:this.newWorkspace?.id===e.id,isChildMenuOpen:this.openChildMenuItem?.id===e.id,childMenuAnchor:this.openChildMenuItem?.id===e.id?this.childMenuAnchor:null,children:[{id:`${e.id}-rename`,label:"Rename",value:"rename",action:(e,t)=>this.edit(t)},{id:`${e.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(e,t)=>this.delete(t)}]})));return s(n,null,s("kritzel-split-button",{ref:e=>this.splitButtonRef=e,items:e,mainButtonDisabled:null!=this.editingItemId,onMainButtonClick:()=>this.add(),onItemSelect:e=>this.select(e.detail.item,e.detail.parent),onItemToggleChildMenu:e=>this.toggleChildMenu(e.detail.item,e.detail.childMenuAnchor),onItemSave:e=>this.save(e.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()}))}static get style(){return":host{display:flex;flex-direction:column;z-index:1}"}},[513,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]]);function p(){"undefined"!=typeof customElements&&["kritzel-workspace-manager","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button"].forEach((e=>{switch(e){case"kritzel-workspace-manager":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-icon":customElements.get(l(e))||h();break;case"kritzel-menu":customElements.get(l(e))||c();break;case"kritzel-menu-item":customElements.get(l(e))||r();break;case"kritzel-portal":customElements.get(l(e))||u();break;case"kritzel-split-button":customElements.get(l(e))||m()}}))}export{d as K,p as d}
@@ -0,0 +1 @@
1
+ import{p as t,H as e,h as s,d as r,t as o}from"./p-BWj1eE2b.js";import{K as n,a as i}from"./p-DQK_4lkI.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;showEdgeIndicators=!0;edgeIndicatorPadding=8;remoteCursors=new Map;objectVersion=0;cleanupIntervalId;objectChangeRafId=null;componentDidLoad(){this.core.store.objects?.onAwarenessChange((t=>{this.handleAwarenessChange(t)})),this.core.store.objects?.onObjectsChange((()=>{this.handleRemoteObjectChange()})),this.cleanupIntervalId=setInterval((()=>{this.cleanupStaleCursors()}),3e3)}disconnectedCallback(){this.cleanupIntervalId&&clearInterval(this.cleanupIntervalId),null!==this.objectChangeRafId&&cancelAnimationFrame(this.objectChangeRafId)}handleAwarenessChange(t){const e=this.core.store.objects?.localClientId,s=Date.now(),r=new Map(this.remoteCursors),o=new Set;t.forEach(((t,n)=>{if(n===e)return;if(!t.user)return;o.add(n);const i=t.user,a=t.cursor,l=t.activeObjectId||null,c=t.selectionBox||null,d=r.get(n);r.set(n,{clientId:n,user:i,cursor:a,activeObjectId:l,selectionBox:c,lastUpdated:s,lastCursorMove:!d||!d.cursor!=!a||a&&d.cursor&&(a.x!==d.cursor.x||a.y!==d.cursor.y)?s:d?.lastCursorMove??s})}));for(const t of r.keys())o.has(t)||r.delete(t);this.remoteCursors=r}cleanupStaleCursors(){const t=Date.now();let e=!1;const s=new Map(this.remoteCursors);for(const[r,o]of s)t-o.lastUpdated>3e4?(s.delete(r),e=!0):!e&&t-o.lastCursorMove>1e4&&(e=!0);e&&(this.remoteCursors=s)}isStale(t){return Date.now()-t.lastCursorMove>1e4}hasActiveDrawingCursors(){for(const t of this.remoteCursors.values())if(t.activeObjectId)return!0;return!1}handleRemoteObjectChange(){this.hasActiveDrawingCursors()&&null===this.objectChangeRafId&&(this.objectChangeRafId=requestAnimationFrame((()=>{this.objectChangeRafId=null,this.objectVersion++})))}getActiveObjectTip(t){const e=this.core.store.objects?.findById(t);if(!e)return null;if(e instanceof n&&!e.isCompleted){const t=e.points[e.points.length-1];return t?{x:(t[0]-e.x)/e.scale+e.translateX,y:(t[1]-e.y)/e.scale+e.translateY}:null}return e instanceof i&&!e.isCompleted?{x:(e.endX-e.x)/e.scale+e.translateX,y:(e.endY-e.y)/e.scale+e.translateY}:null}worldToScreen(t,e){const{scale:s,translateX:r,translateY:o}=this.core.store.state;return{x:t*s+r,y:e*s+o}}isInViewport(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state;return t>=0&&t<=s&&e>=0&&e<=r}clampToEdge(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state,o=this.edgeIndicatorPadding,n=Math.max(o,Math.min(s-o,t)),i=Math.max(o,Math.min(r-o,e)),a=n-o,l=s-o-n,c=i-o;let d="top";const h=Math.min(a,l,c,r-o-i);return d=h===a?"left":h===l?"right":h===c?"top":"bottom",{x:n,y:i,angle:Math.atan2(e-i,t-n),edge:d}}getUserDisplayName(t){return t.displayName?t.displayName:t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):"Unknown"}render(){const t=Array.from(this.remoteCursors.values());return s(r,{key:"7147977660886684c8030075206790de5597c342"},t.map((t=>{if(!t.cursor)return null;let e,s=!1;if(t.activeObjectId){const r=this.getActiveObjectTip(t.activeObjectId);r?(s=!0,e=this.worldToScreen(r.x,r.y)):e=this.worldToScreen(t.cursor.x,t.cursor.y)}else e=this.worldToScreen(t.cursor.x,t.cursor.y);const r=this.isInViewport(e.x,e.y),o=this.isStale(t),n=t.user.color||"#6B7280";return r?this.renderCursor(t,e.x,e.y,n,o,s):this.showEdgeIndicators?this.renderEdgeIndicator(t,e.x,e.y,n,o,s):null})),t.map((t=>{if(!t.selectionBox)return null;const e=t.user.color||"#6B7280",r=t.selectionBox,o=this.worldToScreen(r.x,r.y),{scale:n}=this.core.store.state;return s("div",{key:`selection-box-${t.clientId}`,class:"remote-selection-box",style:{transform:`translate(${o.x}px, ${o.y}px)`,width:r.width*n+"px",height:r.height*n+"px",backgroundColor:`color-mix(in srgb, ${e} 20%, transparent)`,borderColor:`color-mix(in srgb, ${e} 50%, transparent)`}})})))}renderCursor(t,e,r,o,n,i){return s("div",{key:`cursor-${t.clientId}`,class:{"awareness-cursor":!0,stale:n,"tracking-object":i},style:{transform:`translate(${e}px, ${r}px)`}},s("svg",{class:"cursor-arrow",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{d:"M5 3L19 12L12 13L9 20L5 3Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"cursor-label",style:{backgroundColor:o}},this.getUserDisplayName(t.user)))}renderEdgeIndicator(t,e,r,o,n,i){const a=this.clampToEdge(e,r),l=180*a.angle/Math.PI+90;let c=0,d=0;"left"===a.edge?c=20:"right"===a.edge?c=-20:"top"===a.edge?d=20:"bottom"===a.edge&&(d=-20);const h=this.getUserDisplayName(t.user);return s("div",{key:`edge-${t.clientId}`,class:{"edge-indicator":!0,stale:n,"tracking-object":i},style:{transform:`translate(${a.x}px, ${a.y}px)`}},s("svg",{class:{"edge-arrow":!0,stale:n},width:"16",height:"16",viewBox:"0 0 16 16",style:{transform:`rotate(${l}deg)`}},s("path",{d:"M8 1L14 13H2L8 1Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"edge-label",style:{backgroundColor:o,transform:`translate(${c}px, ${d}px)`}},h))}static get style(){return":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}"}},[513,"kritzel-awareness-cursors",{core:[16],showEdgeIndicators:[4,"show-edge-indicators"],edgeIndicatorPadding:[2,"edge-indicator-padding"],remoteCursors:[32],objectVersion:[32]}]);function l(){"undefined"!=typeof customElements&&["kritzel-awareness-cursors"].forEach((t=>{"kritzel-awareness-cursors"===t&&(customElements.get(o(t))||customElements.define(o(t),a))}))}export{a as K,l as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as o,h as r,d as s,t as i}from"./p-BWj1eE2b.js";import{a as l}from"./p-CjazGGq3.js";import{d as a}from"./p-BZ8bK8qT.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colorChange=o(this,"colorChange")}colors=[];selectedColor=null;isExpanded=!1;isOpaque=!1;opacity=1;theme;colorChange;handleColorClick(e){this.selectedColor=e,this.colorChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t))}calculateHeight(){const e=Math.ceil(this.colors.length/6);return 32*e+8*(e-1)+"px"}areColorsEqual(e,t){return!!e&&e.light===t.light&&e.dark===t.dark}render(){const e=this.isExpanded?this.colors:this.colors.slice(0,6),t=this.isExpanded?this.calculateHeight():"32px";return r(s,{key:"22b6f0362933848cd40ad44c73a48fd4d8330884"},r("div",{key:"38adb9abc39d78ae9528341212acf2de425b4eb8",class:{"color-grid":!0,expanded:this.isExpanded},style:{height:t}},e.map((e=>r("div",{tabIndex:0,class:{"color-container":!0,selected:this.areColorsEqual(this.selectedColor,e)},onClick:()=>this.handleColorClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},r("kritzel-color",{value:l.applyOpacity(e,this.opacity,this.theme),theme:this.theme}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}"}},[513,"kritzel-color-palette",{colors:[16],selectedColor:[1040],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"],opacity:[2],theme:[1]}]);function n(){"undefined"!=typeof customElements&&["kritzel-color-palette","kritzel-color"].forEach((e=>{switch(e){case"kritzel-color-palette":customElements.get(i(e))||customElements.define(i(e),c);break;case"kritzel-color":customElements.get(i(e))||a()}}))}export{c as K,n as d}
1
+ import{p as e,H as t,c as o,h as r,d as s,t as i}from"./p-BWj1eE2b.js";import{a as l}from"./p-CjazGGq3.js";import{d as a}from"./p-CekG3_ce.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colorChange=o(this,"colorChange")}colors=[];selectedColor=null;isExpanded=!1;isOpaque=!1;opacity=1;theme;colorChange;handleColorClick(e){this.selectedColor=e,this.colorChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t))}calculateHeight(){const e=Math.ceil(this.colors.length/6);return 32*e+8*(e-1)+"px"}areColorsEqual(e,t){return!!e&&e.light===t.light&&e.dark===t.dark}render(){const e=this.isExpanded?this.colors:this.colors.slice(0,6),t=this.isExpanded?this.calculateHeight():"32px";return r(s,{key:"a2c996d16a44f66471f6f76e08129142fc9f5ddb"},r("div",{key:"245f4b9ff50412b84ede221d22b0894a104a6895",class:{"color-grid":!0,expanded:this.isExpanded},style:{height:t}},e.map((e=>r("div",{tabIndex:0,class:{"color-container":!0,selected:this.areColorsEqual(this.selectedColor,e)},onClick:()=>this.handleColorClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},r("kritzel-color",{value:l.applyOpacity(e,this.opacity,this.theme),theme:this.theme}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}"}},[513,"kritzel-color-palette",{colors:[16],selectedColor:[1040],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"],opacity:[2],theme:[1]}]);function n(){"undefined"!=typeof customElements&&["kritzel-color-palette","kritzel-color"].forEach((e=>{switch(e){case"kritzel-color-palette":customElements.get(i(e))||customElements.define(i(e),c);break;case"kritzel-color":customElements.get(i(e))||a()}}))}export{c as K,n as d}
@@ -1 +1 @@
1
- import{p as t,H as e,h as o,d as s,t as i}from"./p-BWj1eE2b.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return o(s,{key:"3d5fd9aecf7abc96c438b890f5831281d6194922"},o("div",{key:"2b3df82e475177e803f172f440ffcee97dbe5aa5",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}static get style(){return":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}"}},[513,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}]);function r(){"undefined"!=typeof customElements&&["kritzel-font"].forEach((t=>{"kritzel-font"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}export{n as K,r as d}
1
+ import{p as t,H as e,h as o,d as s,t as i}from"./p-BWj1eE2b.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return o(s,{key:"bcff1827a61df6896e49fe1df4819bf27b3610ef"},o("div",{key:"53a03532afde5fca6e8ec1cc78e6cd41ab1444cd",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}static get style(){return":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}"}},[513,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}]);function f(){"undefined"!=typeof customElements&&["kritzel-font"].forEach((t=>{"kritzel-font"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}export{n as K,f as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as r,h as o,d as n,t as i}from"./p-BWj1eE2b.js";import{K as s}from"./p-jGOpkGDl.js";import{d as a}from"./p-Gm5hSQ-e.js";import{d as c,a as m}from"./p-CNMpVlot.js";import{d as l}from"./p-CMGHx71q.js";const u=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=r(this,"itemSelect")}get host(){return this}items=[];icon="ellipsis-vertical";iconSize=24;offsetY=4;itemSelect;menuAnchor=null;isTouchDevice=s.isTouchDevice();toggleMenu=e=>{e.stopPropagation(),this.menuAnchor?this.closeMenu():(window.dispatchEvent(new CustomEvent("kritzel-dismiss-menus")),this.menuAnchor=this.host)};closeMenu=()=>{this.menuAnchor=null};get visibleItems(){return this.items.filter((e=>!1!==e.isVisible))}handleMenuItemSelect=e=>{const{item:t,parent:r}=e.detail;t.action&&t.action(t,r),this.itemSelect.emit(e.detail),this.closeMenu()};render(){return o(n,{key:"951577ab19a6bb10e7c578546a386e6159d16aff",class:{mobile:this.isTouchDevice}},o("button",{key:"2b5112a4458544945c91536cb974e230401c6cd2",class:"more-menu-button",onClick:this.toggleMenu},o("kritzel-icon",{key:"e37122c20fa642ad4e53ae039ab43539f3b5b195",name:this.icon,size:this.iconSize})),o("kritzel-portal",{key:"5b4fd597eb4ec299ca672194f0dd69d3d50c270b",anchor:this.menuAnchor,offsetY:this.offsetY,onClose:this.closeMenu},o("kritzel-menu",{key:"a3a48b1ebb064293ecb6bb06f1783cba849d2ade",items:this.visibleItems,onItemSelect:this.handleMenuItemSelect})))}static get style(){return":host{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb)}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}"}},[513,"kritzel-more-menu",{items:[16],icon:[1],iconSize:[2,"icon-size"],offsetY:[2,"offset-y"],menuAnchor:[32],isTouchDevice:[32]}]);function b(){"undefined"!=typeof customElements&&["kritzel-more-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-more-menu":customElements.get(i(e))||customElements.define(i(e),u);break;case"kritzel-icon":customElements.get(i(e))||a();break;case"kritzel-menu":customElements.get(i(e))||m();break;case"kritzel-menu-item":customElements.get(i(e))||c();break;case"kritzel-portal":customElements.get(i(e))||l()}}))}export{u as K,b as d}
1
+ import{p as e,H as t,c as r,h as o,d as n,t as i}from"./p-BWj1eE2b.js";import{K as s}from"./p-jGOpkGDl.js";import{d as a}from"./p-Gm5hSQ-e.js";import{d as c,a as m}from"./p-BMPgR5Bt.js";import{d as l}from"./p-BYX50YSd.js";const u=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=r(this,"itemSelect")}get host(){return this}items=[];icon="ellipsis-vertical";iconSize=24;offsetY=4;itemSelect;menuAnchor=null;isTouchDevice=s.isTouchDevice();toggleMenu=e=>{e.stopPropagation(),this.menuAnchor?this.closeMenu():(window.dispatchEvent(new CustomEvent("kritzel-dismiss-menus")),this.menuAnchor=this.host)};closeMenu=()=>{this.menuAnchor=null};get visibleItems(){return this.items.filter((e=>!1!==e.isVisible))}handleMenuItemSelect=e=>{const{item:t,parent:r}=e.detail;t.action&&t.action(t,r),this.itemSelect.emit(e.detail),this.closeMenu()};render(){return o(n,{key:"a41ae459f61a115232efb30d60d3f1ec0452f2bc",class:{mobile:this.isTouchDevice}},o("button",{key:"6bc1f0000690723868626dec580f9c92761c3ad0",class:"more-menu-button",onClick:this.toggleMenu},o("kritzel-icon",{key:"603f069ecb0b8a9a57dc090d92d1bb26cf29e033",name:this.icon,size:this.iconSize})),o("kritzel-portal",{key:"754259a7a7d265de462ac05468326396867ae3f3",anchor:this.menuAnchor,offsetY:this.offsetY,onClose:this.closeMenu},o("kritzel-menu",{key:"e95f63b8038468a67c159f6ba687279c79c10699",items:this.visibleItems,onItemSelect:this.handleMenuItemSelect})))}static get style(){return":host{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb)}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}"}},[513,"kritzel-more-menu",{items:[16],icon:[1],iconSize:[2,"icon-size"],offsetY:[2,"offset-y"],menuAnchor:[32],isTouchDevice:[32]}]);function b(){"undefined"!=typeof customElements&&["kritzel-more-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-more-menu":customElements.get(i(e))||customElements.define(i(e),u);break;case"kritzel-icon":customElements.get(i(e))||a();break;case"kritzel-menu":customElements.get(i(e))||m();break;case"kritzel-menu-item":customElements.get(i(e))||c();break;case"kritzel-portal":customElements.get(i(e))||l()}}))}export{u as K,b as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as o,h as i,d as r,t as s}from"./p-BWj1eE2b.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged")}get el(){return this}options=[];optionsChanged(){this.updateInternalValue(this.internalValue,!0)}value;externalValueChanged(e){e!==this.internalValue&&this.updateInternalValue(e,!1)}width;selectStyles={};forceOpenDirection;internalValue;hasSuffixContent=!1;hasPrefixContent=!1;isOpen=!1;focusedIndex=-1;openDirection="down";valueChanged;suffixSlotElement;prefixSlotElement;triggerElement;menuElement;wrapperElement;componentWillLoad(){this.updateInternalValue(this.value,!1),this.evaluateSuffixContent(),this.evaluatePrefixContent()}disconnectedCallback(){this.isOpen&&(this.isOpen=!1)}handleDocumentClick(e){this.isOpen&&!this.el.contains(e.target)&&this.closeMenu()}handleDocumentKeydown(e){this.isOpen&&"Escape"===e.key&&(e.stopPropagation(),e.preventDefault(),this.closeMenu(),this.triggerElement?.focus())}updateInternalValue(e,t){let o=e;if(this.options&&this.options.length>0){const e=this.options.some((e=>e.value===o));o&&e||(o=this.options[0].value)}else o=void 0;this.internalValue!==o&&(this.internalValue=o,(t||e!==o&&void 0!==e)&&this.valueChanged.emit(this.internalValue))}toggleMenu=()=>{this.isOpen?this.closeMenu():this.openMenu()};openMenu=()=>{this.calculateMenuDirection(),this.isOpen=!0;const e=this.options.findIndex((e=>e.value===this.internalValue));this.focusedIndex=e>=0?e:0,requestAnimationFrame((()=>{this.menuElement?.focus()}))};calculateMenuDirection=()=>{if(this.forceOpenDirection)return void(this.openDirection=this.forceOpenDirection);if(!this.wrapperElement)return void(this.openDirection="down");const e=this.wrapperElement.getBoundingClientRect(),t=window.innerHeight-e.bottom,o=e.top,i=Math.min(240,36*this.options.length+8);this.openDirection=t<i&&o>t?"up":"down"};closeMenu=()=>{this.isOpen=!1,this.focusedIndex=-1};selectOption=e=>{this.internalValue!==e.value&&(this.internalValue=e.value,this.valueChanged.emit(this.internalValue)),this.closeMenu(),this.triggerElement?.focus()};handleTriggerKeyDown=e=>{switch(e.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":e.preventDefault(),this.openMenu()}};handleMenuKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,this.options.length-1),this.scrollFocusedOptionIntoView();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.scrollFocusedOptionIntoView();break;case"Enter":case" ":e.preventDefault(),this.focusedIndex>=0&&this.focusedIndex<this.options.length&&this.selectOption(this.options[this.focusedIndex]);break;case"Home":e.preventDefault(),this.focusedIndex=0,this.scrollFocusedOptionIntoView();break;case"End":e.preventDefault(),this.focusedIndex=this.options.length-1,this.scrollFocusedOptionIntoView();break;case"Tab":this.closeMenu()}};scrollFocusedOptionIntoView=()=>{!this.menuElement||this.focusedIndex<0||requestAnimationFrame((()=>{const e=this.menuElement?.querySelector(".dropdown-option.is-focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}))};handleOptionMouseEnter=e=>{this.focusedIndex=e};evaluateSuffixContent=()=>{if(this.suffixSlotElement){const e=this.suffixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasSuffixContent!==e&&(this.hasSuffixContent=e)}else!1!==this.hasSuffixContent&&(this.hasSuffixContent=!1)};evaluatePrefixContent=()=>{if(this.prefixSlotElement){const e=this.prefixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasPrefixContent!==e&&(this.hasPrefixContent=e)}else!1!==this.hasPrefixContent&&(this.hasPrefixContent=!1)};getSelectedLabel(){const e=this.options.find((e=>e.value===this.internalValue));return e?.label??""}getSelectedStyle(){const e=this.options.find((e=>e.value===this.internalValue));return e?.style}render(){const e={"dropdown-trigger":!0,"has-suffix-border":this.hasSuffixContent,"has-prefix-border":this.hasPrefixContent,"is-open":this.isOpen,"open-up":"up"===this.openDirection},t={"dropdown-menu":!0,"is-open":this.isOpen,"open-up":"up"===this.openDirection,"open-down":"down"===this.openDirection};return i(r,{key:"b753a3cf28a0f21625c213c9ec5337b922023206"},i("div",{key:"dffe30b1d6968ad612c94718eea72f118c43f378",class:"dropdown-wrapper",ref:e=>this.wrapperElement=e},i("slot",{key:"0a08fa5aa5a2040e85ac80643d11ec778ed89b31",name:"prefix",ref:e=>this.prefixSlotElement=e,onSlotchange:this.evaluatePrefixContent}),i("div",{key:"8a8b4519787863d53fa7c72928e7632de6daa848",class:"dropdown-container",style:{width:this.width}},i("button",{key:"803fe1e4ef138a58cde8941771875dd5eadfe944",type:"button",class:e,style:{...this.selectStyles,...this.getSelectedStyle()},onClick:this.toggleMenu,onKeyDown:this.handleTriggerKeyDown,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false",ref:e=>this.triggerElement=e},i("span",{key:"05d9dfe94e62134c91316f33cf64f2a9efb57fbb",class:"dropdown-trigger-label"},this.getSelectedLabel()),i("span",{key:"332d5206a67ae8ef4ce0982d62c108210bca6252",class:"dropdown-trigger-arrow","aria-hidden":"true"},i("svg",{key:"f73539b0decf59fd59d075618dc5028ac82d11b5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("polyline",{key:"7b45a14ab898233a68845a40363ee37c9922098c",points:"6 9 12 15 18 9"}))))),i("slot",{key:"8936739a53b5dca8debdce27c4bead487a5bf803",name:"suffix",ref:e=>this.suffixSlotElement=e,onSlotchange:this.evaluateSuffixContent}),i("ul",{key:"f20417649f8988e46db5992100d93fd7bd827b96",class:t,role:"listbox",tabindex:"-1",onKeyDown:this.handleMenuKeyDown,ref:e=>this.menuElement=e},this.options.map(((e,t)=>{const o=e.value===this.internalValue;return i("li",{class:{"dropdown-option":!0,"is-selected":o,"is-focused":t===this.focusedIndex},role:"option","aria-selected":o?"true":"false",style:e.style,onClick:()=>this.selectOption(e),onMouseEnter:()=>this.handleOptionMouseEnter(t)},e.label,o&&i("span",{class:"dropdown-option-check","aria-hidden":"true"},i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("polyline",{points:"20 6 9 17 4 12"}))))})))))}static get watchers(){return{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}}static get style(){return":host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:6px;box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}"}},[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[16],forceOpenDirection:[1,"force-open-direction"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32],isOpen:[32],focusedIndex:[32],openDirection:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-dropdown"].forEach((e=>{"kritzel-dropdown"===e&&(customElements.get(s(e))||customElements.define(s(e),n))}))}export{n as K,a as d}
1
+ import{p as e,H as t,c as o,h as i,d as r,t as s}from"./p-BWj1eE2b.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged")}get el(){return this}options=[];optionsChanged(){this.updateInternalValue(this.internalValue,!0)}value;externalValueChanged(e){e!==this.internalValue&&this.updateInternalValue(e,!1)}width;selectStyles={};forceOpenDirection;internalValue;hasSuffixContent=!1;hasPrefixContent=!1;isOpen=!1;focusedIndex=-1;openDirection="down";valueChanged;suffixSlotElement;prefixSlotElement;triggerElement;menuElement;wrapperElement;componentWillLoad(){this.updateInternalValue(this.value,!1),this.evaluateSuffixContent(),this.evaluatePrefixContent()}disconnectedCallback(){this.isOpen&&(this.isOpen=!1)}handleDocumentClick(e){this.isOpen&&!this.el.contains(e.target)&&this.closeMenu()}handleDocumentKeydown(e){this.isOpen&&"Escape"===e.key&&(e.stopPropagation(),e.preventDefault(),this.closeMenu(),this.triggerElement?.focus())}updateInternalValue(e,t){let o=e;if(this.options&&this.options.length>0){const e=this.options.some((e=>e.value===o));o&&e||(o=this.options[0].value)}else o=void 0;this.internalValue!==o&&(this.internalValue=o,(t||e!==o&&void 0!==e)&&this.valueChanged.emit(this.internalValue))}toggleMenu=()=>{this.isOpen?this.closeMenu():this.openMenu()};openMenu=()=>{this.calculateMenuDirection(),this.isOpen=!0;const e=this.options.findIndex((e=>e.value===this.internalValue));this.focusedIndex=e>=0?e:0,requestAnimationFrame((()=>{this.menuElement?.focus()}))};calculateMenuDirection=()=>{if(this.forceOpenDirection)return void(this.openDirection=this.forceOpenDirection);if(!this.wrapperElement)return void(this.openDirection="down");const e=this.wrapperElement.getBoundingClientRect(),t=window.innerHeight-e.bottom,o=e.top,i=Math.min(240,36*this.options.length+8);this.openDirection=t<i&&o>t?"up":"down"};closeMenu=()=>{this.isOpen=!1,this.focusedIndex=-1};selectOption=e=>{this.internalValue!==e.value&&(this.internalValue=e.value,this.valueChanged.emit(this.internalValue)),this.closeMenu(),this.triggerElement?.focus()};handleTriggerKeyDown=e=>{switch(e.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":e.preventDefault(),this.openMenu()}};handleMenuKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,this.options.length-1),this.scrollFocusedOptionIntoView();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.scrollFocusedOptionIntoView();break;case"Enter":case" ":e.preventDefault(),this.focusedIndex>=0&&this.focusedIndex<this.options.length&&this.selectOption(this.options[this.focusedIndex]);break;case"Home":e.preventDefault(),this.focusedIndex=0,this.scrollFocusedOptionIntoView();break;case"End":e.preventDefault(),this.focusedIndex=this.options.length-1,this.scrollFocusedOptionIntoView();break;case"Tab":this.closeMenu()}};scrollFocusedOptionIntoView=()=>{!this.menuElement||this.focusedIndex<0||requestAnimationFrame((()=>{const e=this.menuElement?.querySelector(".dropdown-option.is-focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}))};handleOptionMouseEnter=e=>{this.focusedIndex=e};evaluateSuffixContent=()=>{if(this.suffixSlotElement){const e=this.suffixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasSuffixContent!==e&&(this.hasSuffixContent=e)}else!1!==this.hasSuffixContent&&(this.hasSuffixContent=!1)};evaluatePrefixContent=()=>{if(this.prefixSlotElement){const e=this.prefixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasPrefixContent!==e&&(this.hasPrefixContent=e)}else!1!==this.hasPrefixContent&&(this.hasPrefixContent=!1)};getSelectedLabel(){const e=this.options.find((e=>e.value===this.internalValue));return e?.label??""}getSelectedStyle(){const e=this.options.find((e=>e.value===this.internalValue));return e?.style}render(){const e={"dropdown-trigger":!0,"has-suffix-border":this.hasSuffixContent,"has-prefix-border":this.hasPrefixContent,"is-open":this.isOpen,"open-up":"up"===this.openDirection},t={"dropdown-menu":!0,"is-open":this.isOpen,"open-up":"up"===this.openDirection,"open-down":"down"===this.openDirection};return i(r,{key:"ac4dc8a445f79fa68555756a4ac26ba174a13eaa"},i("div",{key:"1c73835be42e6a289657920ef33c2a53c183913d",class:"dropdown-wrapper",ref:e=>this.wrapperElement=e},i("slot",{key:"ac73d76b5e24e2f2740113523524bc00d1c98d02",name:"prefix",ref:e=>this.prefixSlotElement=e,onSlotchange:this.evaluatePrefixContent}),i("div",{key:"e1e71c68a8abb2cf0dc2b9314e05d1170c0bb5b3",class:"dropdown-container",style:{width:this.width}},i("button",{key:"74588e1ff661f8f86318a2ed9bb53192ad96bacd",type:"button",class:e,style:{...this.selectStyles,...this.getSelectedStyle()},onClick:this.toggleMenu,onKeyDown:this.handleTriggerKeyDown,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false",ref:e=>this.triggerElement=e},i("span",{key:"432f694526e20e1e6abb6721f12aa246471d830d",class:"dropdown-trigger-label"},this.getSelectedLabel()),i("span",{key:"81f7d98f78201910f4427a7c442172d0283de45b",class:"dropdown-trigger-arrow","aria-hidden":"true"},i("svg",{key:"18db309dc145718fbb3d51e44058e3bfa96b0d27",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("polyline",{key:"32af6ce9a1f045c2ce3b205b1b1dc1fe1a80e227",points:"6 9 12 15 18 9"}))))),i("slot",{key:"b37cd43daa06424ea7b7951929352154f7d1ea0f",name:"suffix",ref:e=>this.suffixSlotElement=e,onSlotchange:this.evaluateSuffixContent}),i("ul",{key:"0e673d4e09e007a4c93ed6a992dddeb8eba33e91",class:t,role:"listbox",tabindex:"-1",onKeyDown:this.handleMenuKeyDown,ref:e=>this.menuElement=e},this.options.map(((e,t)=>{const o=e.value===this.internalValue;return i("li",{class:{"dropdown-option":!0,"is-selected":o,"is-focused":t===this.focusedIndex},role:"option","aria-selected":o?"true":"false",style:e.style,onClick:()=>this.selectOption(e),onMouseEnter:()=>this.handleOptionMouseEnter(t)},e.label,o&&i("span",{class:"dropdown-option-check","aria-hidden":"true"},i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("polyline",{points:"20 6 9 17 4 12"}))))})))))}static get watchers(){return{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}}static get style(){return":host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:6px;box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}"}},[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[16],forceOpenDirection:[1,"force-open-direction"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32],isOpen:[32],focusedIndex:[32],openDirection:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-dropdown"].forEach((e=>{"kritzel-dropdown"===e&&(customElements.get(s(e))||customElements.define(s(e),n))}))}export{n as K,a as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as i,h as a,d as r,t as l}from"./p-BWj1eE2b.js";import{d as o}from"./p-Gm5hSQ-e.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect")}get host(){return this}items=[];selectedItemId;itemSelect;focusedIndex=-1;showMobileDetail=!1;tabRefs=[];watchSelectedItemId(e,t){e!==t&&(this.showMobileDetail=!0)}componentWillRender(){this.tabRefs=[]}handleItemClick=e=>{e.disabled||(this.itemSelect.emit({item:e}),this.showMobileDetail=!0)};handleBackClick=()=>{this.showMobileDetail=!1};handleKeyDown=(e,t,i)=>{const a=this.items.map(((e,t)=>e.disabled?-1:t)).filter((e=>-1!==e)),r=a.indexOf(i);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusTab(a[(r+1)%a.length]);break;case"ArrowUp":e.preventDefault(),this.focusTab(a[(r-1+a.length)%a.length]);break;case"Home":e.preventDefault(),this.focusTab(a[0]);break;case"End":e.preventDefault(),this.focusTab(a[a.length-1]);break;case"Enter":case" ":e.preventDefault(),this.handleItemClick(t)}};focusTab(e){this.focusedIndex=e;const t=this.tabRefs[e];t&&t.focus()}handleFocus=e=>{this.focusedIndex=e};handleBlur=()=>{this.focusedIndex=-1};setTabRef=(e,t)=>{e&&(this.tabRefs[t]=e)};getTabIndex(e,t){return e.disabled?-1:0}render(){const e=this.items.find((e=>e.id===this.selectedItemId)),t="master-detail-panel",i=e?`tab-${e.id}`:void 0;return a(r,{key:"25913464ef131f1332146a5372c0caf9f7050f24"},a("div",{key:"206346f9bee671f1b283ebfaca4c4401706a074f",class:{"master-detail-container":!0,"is-mobile-detail-visible":this.showMobileDetail}},a("nav",{key:"f4cf41f060d1d25887d2b11a264de040e878d25c",class:"master-menu",role:"tablist","aria-orientation":"vertical","aria-label":"Settings categories"},this.items.map(((e,i)=>a("button",{key:e.id,id:`tab-${e.id}`,ref:e=>this.setTabRef(e,i),class:{"menu-item":!0,"is-selected":e.id===this.selectedItemId,"is-disabled":!!e.disabled,"is-focused":i===this.focusedIndex},role:"tab","aria-selected":e.id===this.selectedItemId?"true":"false","aria-controls":t,"aria-disabled":e.disabled?"true":void 0,tabIndex:this.getTabIndex(e,i),disabled:e.disabled,onClick:()=>this.handleItemClick(e),onKeyDown:t=>this.handleKeyDown(t,e,i),onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur},e.icon&&a("kritzel-icon",{name:e.icon,size:20,class:"menu-item-icon"}),a("span",{class:"menu-item-label"},e.label),a("span",{class:"menu-item-chevron","aria-hidden":"true"},a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},a("path",{d:"m9 18 6-6-6-6"}))))))),a("div",{key:"efb20b2c1c6dfcf03bee2c1ef06c2c7a6de27e7a",id:t,class:"detail-panel",role:"tabpanel","aria-labelledby":i},a("button",{key:"13b97670c0c0b7f8fe493438d26179cd5039cd9c",class:"mobile-back-button",onClick:this.handleBackClick,"aria-label":"Back to menu"},a("kritzel-icon",{key:"6a52e00dd7fc61bcacce71127bf78637bbff7e30",name:"chevron-left",size:20,class:"mobile-back-icon"}),"Back"),a("slot",{key:"99bd31682d0e8accc6c2eacfcbaf6778f3b92d05"}))))}static get watchers(){return{selectedItemId:[{watchSelectedItemId:0}]}}static get style(){return":host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}"}},[769,"kritzel-master-detail",{items:[16],selectedItemId:[1,"selected-item-id"],focusedIndex:[32],showMobileDetail:[32]},void 0,{selectedItemId:[{watchSelectedItemId:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-master-detail","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-master-detail":customElements.get(l(e))||customElements.define(l(e),s);break;case"kritzel-icon":customElements.get(l(e))||o()}}))}export{s as K,n as d}
1
+ import{p as e,H as t,c as i,h as a,d as r,t as l}from"./p-BWj1eE2b.js";import{d as o}from"./p-Gm5hSQ-e.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect")}get host(){return this}items=[];selectedItemId;itemSelect;focusedIndex=-1;showMobileDetail=!1;tabRefs=[];watchSelectedItemId(e,t){e!==t&&(this.showMobileDetail=!0)}componentWillRender(){this.tabRefs=[]}handleItemClick=e=>{e.disabled||(this.itemSelect.emit({item:e}),this.showMobileDetail=!0)};handleBackClick=()=>{this.showMobileDetail=!1};handleKeyDown=(e,t,i)=>{const a=this.items.map(((e,t)=>e.disabled?-1:t)).filter((e=>-1!==e)),r=a.indexOf(i);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusTab(a[(r+1)%a.length]);break;case"ArrowUp":e.preventDefault(),this.focusTab(a[(r-1+a.length)%a.length]);break;case"Home":e.preventDefault(),this.focusTab(a[0]);break;case"End":e.preventDefault(),this.focusTab(a[a.length-1]);break;case"Enter":case" ":e.preventDefault(),this.handleItemClick(t)}};focusTab(e){this.focusedIndex=e;const t=this.tabRefs[e];t&&t.focus()}handleFocus=e=>{this.focusedIndex=e};handleBlur=()=>{this.focusedIndex=-1};setTabRef=(e,t)=>{e&&(this.tabRefs[t]=e)};getTabIndex(e,t){return e.disabled?-1:0}render(){const e=this.items.find((e=>e.id===this.selectedItemId)),t="master-detail-panel",i=e?`tab-${e.id}`:void 0;return a(r,{key:"7f1fd360f657fddcdb6ce2eea17e4e2daf426eb2"},a("div",{key:"02f7f6dd141d057dbf395dd836f7841a649fa16d",class:{"master-detail-container":!0,"is-mobile-detail-visible":this.showMobileDetail}},a("nav",{key:"397758627252c5e9573a61c457d4481df6d9b4f2",class:"master-menu",role:"tablist","aria-orientation":"vertical","aria-label":"Settings categories"},this.items.map(((e,i)=>a("button",{key:e.id,id:`tab-${e.id}`,ref:e=>this.setTabRef(e,i),class:{"menu-item":!0,"is-selected":e.id===this.selectedItemId,"is-disabled":!!e.disabled,"is-focused":i===this.focusedIndex},role:"tab","aria-selected":e.id===this.selectedItemId?"true":"false","aria-controls":t,"aria-disabled":e.disabled?"true":void 0,tabIndex:this.getTabIndex(e,i),disabled:e.disabled,onClick:()=>this.handleItemClick(e),onKeyDown:t=>this.handleKeyDown(t,e,i),onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur},e.icon&&a("kritzel-icon",{name:e.icon,size:20,class:"menu-item-icon"}),a("span",{class:"menu-item-label"},e.label),a("span",{class:"menu-item-chevron","aria-hidden":"true"},a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},a("path",{d:"m9 18 6-6-6-6"}))))))),a("div",{key:"65cc4601a39cb7780c52cc86075efd0b4a24646a",id:t,class:"detail-panel",role:"tabpanel","aria-labelledby":i},a("button",{key:"6b6ae9ac689c757d71e2a42ecaf8aaceb3785154",class:"mobile-back-button",onClick:this.handleBackClick,"aria-label":"Back to menu"},a("kritzel-icon",{key:"28d9b2f68030587d44505f691e8fed57d968e631",name:"chevron-left",size:20,class:"mobile-back-icon"}),"Back"),a("slot",{key:"2a35ca82717713808ca12227ecca671b848d1f02"}))))}static get watchers(){return{selectedItemId:[{watchSelectedItemId:0}]}}static get style(){return":host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}"}},[769,"kritzel-master-detail",{items:[16],selectedItemId:[1,"selected-item-id"],focusedIndex:[32],showMobileDetail:[32]},void 0,{selectedItemId:[{watchSelectedItemId:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-master-detail","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-master-detail":customElements.get(l(e))||customElements.define(l(e),s);break;case"kritzel-icon":customElements.get(l(e))||o()}}))}export{s as K,n 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:"fa4a31e3978f5a7187c8e011d58278829f60f912",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:"1ae5a58c6cedf19626cba1e04abe566669582081",class:"toggle-track"},l("div",{key:"e11d42017fd624837f9e44f2671b74d38e4d015f",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-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:"376beaa4424858c3aaf1466797663024889c0f73",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:"2108fe8de84e0b9a619667b5ab4f57215c185375",class:"toggle-track"},l("div",{key:"ff8253ce660ca62313dea3034ac4980135eaac88",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 +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:"3a285bfdc1b336fb450304856aa81c1bd9c4e5e3"},e("button",{key:"f3119bfe9cf8ca1b6e031cdcc8bee9549c18e620",type:this.type,class:{"kritzel-button":!0,[this.variant]:!0,disabled:this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"5a26eee0781c5fafc7a41260364b2a2c11f192a6"})))}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 a,t as n}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(a,{key:"aa82a9e0c6c39b0b2bce597ac2e864049543d474"},e("button",{key:"5bda14f9fef89abacb9cd04e5aaa8ae7ae25048a",type:this.type,class:{"kritzel-button":!0,[this.variant]:!0,disabled:this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"8585675eec39345ddfbf3f6dbb705035f7a5d099"})))}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(n(t))||customElements.define(n(t),i))}))}export{i as K,c as d}
@@ -1 +1 @@
1
- import{p as a,t,H as e,h as r,d as s}from"./p-BWj1eE2b.js";import{d as i}from"./p-Dw0Obsn5.js";const o=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}users=[];avatarSize=40;maxVisible=3;overlap=20;getDisplayName(a){return a.displayName??([a.firstName,a.lastName].filter(Boolean).join(" ")||a.email||"User")}render(){if(!this.users||0===this.users.length)return r(s,{style:{display:"none"}});const a=this.users.slice(0,this.maxVisible),t=this.users.length-this.maxVisible;return r(s,{style:{"--avatar-overlap":`-${this.overlap}px`}},r("div",{class:"avatars"},a.map(((t,e)=>r("div",{class:"avatar-wrapper",style:{marginLeft:e>0?"var(--avatar-overlap)":"0px",zIndex:""+(a.length-e)}},r("kritzel-avatar",{user:t,size:this.avatarSize}),r("span",{class:"avatar-tooltip"},this.getDisplayName(t)))))),t>0&&r("span",{class:"overflow-count"},"+",t,r("span",{class:"avatar-tooltip"},this.users.slice(this.maxVisible).map((a=>r("div",null,this.getDisplayName(a)))))))}static get style(){return":host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}"}},[513,"kritzel-active-users",{users:[16],avatarSize:[2,"avatar-size"],maxVisible:[2,"max-visible"],overlap:[2]}]);function l(){"undefined"!=typeof customElements&&["kritzel-active-users","kritzel-avatar"].forEach((a=>{switch(a){case"kritzel-active-users":customElements.get(t(a))||customElements.define(t(a),o);break;case"kritzel-avatar":customElements.get(t(a))||i()}}))}export{o as K,l as d}
1
+ import{p as a,t,H as e,h as r,d as s}from"./p-BWj1eE2b.js";import{d as i}from"./p-Cz2gQKbL.js";const o=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}users=[];avatarSize=40;maxVisible=3;overlap=20;getDisplayName(a){return a.displayName??([a.firstName,a.lastName].filter(Boolean).join(" ")||a.email||"User")}render(){if(!this.users||0===this.users.length)return r(s,{style:{display:"none"}});const a=this.users.slice(0,this.maxVisible),t=this.users.length-this.maxVisible;return r(s,{style:{"--avatar-overlap":`-${this.overlap}px`}},r("div",{class:"avatars"},a.map(((t,e)=>r("div",{class:"avatar-wrapper",style:{marginLeft:e>0?"var(--avatar-overlap)":"0px",zIndex:""+(a.length-e)}},r("kritzel-avatar",{user:t,size:this.avatarSize}),r("span",{class:"avatar-tooltip"},this.getDisplayName(t)))))),t>0&&r("span",{class:"overflow-count"},"+",t,r("span",{class:"avatar-tooltip"},this.users.slice(this.maxVisible).map((a=>r("div",null,this.getDisplayName(a)))))))}static get style(){return":host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}"}},[513,"kritzel-active-users",{users:[16],avatarSize:[2,"avatar-size"],maxVisible:[2,"max-visible"],overlap:[2]}]);function l(){"undefined"!=typeof customElements&&["kritzel-active-users","kritzel-avatar"].forEach((a=>{switch(a){case"kritzel-active-users":customElements.get(t(a))||customElements.define(t(a),o);break;case"kritzel-avatar":customElements.get(t(a))||i()}}))}export{o as K,l as d}
@@ -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-CjazGGq3.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:"7e36e97c383cff73b3146279e971526dd5c7f0f7"},t("div",{key:"e8ad3ca5e9771c51a96a846627ea20c75212ceeb",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},t("div",{key:"9269087c7694604d70d50d846cedb6ce022373cd",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-BWj1eE2b.js";import{a as s}from"./p-CjazGGq3.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:"a740b94f2baacb978b26deae1ea1057c7faf9036"},t("div",{key:"e82f83a23e44a2ff23b5efbfac28e4c47cd5b749",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},t("div",{key:"d83e2be171f89ee4cd53e8cf83ab6591f585129f",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 a(){"undefined"!=typeof customElements&&["kritzel-color"].forEach((e=>{"kritzel-color"===e&&(customElements.get(o(e))||customElements.define(o(e),c))}))}export{c as K,a as d}
@@ -1 +1 @@
1
- import{p as e,H as t,h as a,d as r,t as i}from"./p-BWj1eE2b.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}user;name;size=32;color;imageError=!1;retryCount=0;maxRetries=3;retryTimer;userChanged(){this.resetImageState()}profileImageUrlChanged(){this.resetImageState()}resetImageState(){this.imageError=!1,this.retryCount=0,clearTimeout(this.retryTimer)}disconnectedCallback(){clearTimeout(this.retryTimer)}getImageUrl(){return this.user?.profileImageUrl}getDisplayName(){return this.user?this.user.displayName??([this.user.firstName,this.user.lastName].filter(Boolean).join(" ")||this.user.email):this.name}getInitials(){const e=this.getDisplayName();if(!e)return;const t=e.trim().split(/\s+/);return t.length>=2?(t[0][0]+t[t.length-1][0]).toUpperCase():t[0][0]?.toUpperCase()}getBackgroundColor(){return this.user?.color??this.color??this.generateColorFromName()}generateColorFromName(){const e=this.getDisplayName()||"";let t=0;for(let a=0;a<e.length;a++)t=e.charCodeAt(a)+((t<<5)-t);return`hsl(${Math.abs(t%360)}, 45%, 55%)`}handleImageError=()=>{if(this.retryCount<this.maxRetries){this.retryCount++;const e=1e3*Math.pow(2,this.retryCount-1);this.retryTimer=setTimeout((()=>{this.imageError=!1}),e)}this.imageError=!0};render(){const e=this.getImageUrl(),t=this.getInitials(),i=e&&!this.imageError,s=!i&&t,o=!i&&!s,l={width:`${this.size}px`,height:`${this.size}px`,fontSize:`${Math.round(.4*this.size)}px`};return a(r,{key:"67c0c1f944b9c835d1685d2b743114a1b5a1f061",style:l,class:{"has-image":!!i,"has-initials":!!s,"has-default":!!o},role:"img","aria-label":this.getDisplayName()||"User avatar"},i&&a("img",{key:"d71ccd7449a27133bcf8cc01f3cd654cc9b00142",src:e,alt:"",class:"avatar-image",ref:e=>{e&&(e.referrerPolicy="no-referrer",e.crossOrigin="anonymous")},onError:this.handleImageError}),s&&a("span",{key:"818ad4a24d6489565dffc8c64b3d4e76b701444c",class:"avatar-initials",style:{backgroundColor:this.getBackgroundColor()}},t),o&&a("span",{key:"87af93fd968f3bf5b1f86295de6bd4b71c94120c",class:"avatar-default"},a("svg",{key:"3267317fe99fb8d90432e207516bb48f603c08ed",viewBox:"0 0 24 24",fill:"currentColor"},a("path",{key:"9e4e225f9a058a24f63b508f36969c8c429fccd6",d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"}))))}static get watchers(){return{user:[{userChanged:0}],profileImageUrl:[{profileImageUrlChanged:0}]}}static get style(){return":host{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;user-select:none;flex-shrink:0}.avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-initials{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;color:var(--kritzel-avatar-initials-color, #ffffff);font-weight:var(--kritzel-avatar-initials-font-weight, 500);font-family:var(--kritzel-avatar-initials-font-family, sans-serif);line-height:1}.avatar-default{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;background-color:var(--kritzel-avatar-default-background, #e0e0e0);color:var(--kritzel-avatar-default-color, #9e9e9e)}.avatar-default svg{width:60%;height:60%}:host(.has-image){border:var(--kritzel-avatar-border, none)}:host(.has-initials){border:var(--kritzel-avatar-border, none)}:host(.has-default){border:var(--kritzel-avatar-border, none)}"}},[513,"kritzel-avatar",{user:[16],name:[1],size:[2],color:[1],imageError:[32]},void 0,{user:[{userChanged:0}],profileImageUrl:[{profileImageUrlChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["kritzel-avatar"].forEach((e=>{"kritzel-avatar"===e&&(customElements.get(i(e))||customElements.define(i(e),s))}))}export{s as K,o as d}
1
+ import{p as e,H as t,h as a,d as r,t as i}from"./p-BWj1eE2b.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}user;name;size=32;color;imageError=!1;retryCount=0;maxRetries=3;retryTimer;userChanged(){this.resetImageState()}profileImageUrlChanged(){this.resetImageState()}resetImageState(){this.imageError=!1,this.retryCount=0,clearTimeout(this.retryTimer)}disconnectedCallback(){clearTimeout(this.retryTimer)}getImageUrl(){return this.user?.profileImageUrl}getDisplayName(){return this.user?this.user.displayName??([this.user.firstName,this.user.lastName].filter(Boolean).join(" ")||this.user.email):this.name}getInitials(){const e=this.getDisplayName();if(!e)return;const t=e.trim().split(/\s+/);return t.length>=2?(t[0][0]+t[t.length-1][0]).toUpperCase():t[0][0]?.toUpperCase()}getBackgroundColor(){return this.user?.color??this.color??this.generateColorFromName()}generateColorFromName(){const e=this.getDisplayName()||"";let t=0;for(let a=0;a<e.length;a++)t=e.charCodeAt(a)+((t<<5)-t);return`hsl(${Math.abs(t%360)}, 45%, 55%)`}handleImageError=()=>{if(this.retryCount<this.maxRetries){this.retryCount++;const e=1e3*Math.pow(2,this.retryCount-1);this.retryTimer=setTimeout((()=>{this.imageError=!1}),e)}this.imageError=!0};render(){const e=this.getImageUrl(),t=this.getInitials(),i=e&&!this.imageError,s=!i&&t,o=!i&&!s,l={width:`${this.size}px`,height:`${this.size}px`,fontSize:`${Math.round(.4*this.size)}px`};return a(r,{key:"2067605684a743be45059efd562697ff21fefbcb",style:l,class:{"has-image":!!i,"has-initials":!!s,"has-default":!!o},role:"img","aria-label":this.getDisplayName()||"User avatar"},i&&a("img",{key:"1ed322318335deb011087494a2c437849b5a23a0",src:e,alt:"",class:"avatar-image",ref:e=>{e&&(e.referrerPolicy="no-referrer",e.crossOrigin="anonymous")},onError:this.handleImageError}),s&&a("span",{key:"ff99dded4cb17d6c25880b54e3875c262dfc0440",class:"avatar-initials",style:{backgroundColor:this.getBackgroundColor()}},t),o&&a("span",{key:"5a217c6a1366dea3ceee8bfa03a38917cad7a9f9",class:"avatar-default"},a("svg",{key:"f4537e21772e6e6f1bb60835ad7a56123a200dd7",viewBox:"0 0 24 24",fill:"currentColor"},a("path",{key:"29649695038a506e1caeba3a8b6c066860fb5a1d",d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"}))))}static get watchers(){return{user:[{userChanged:0}],profileImageUrl:[{profileImageUrlChanged:0}]}}static get style(){return":host{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;user-select:none;flex-shrink:0}.avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-initials{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;color:var(--kritzel-avatar-initials-color, #ffffff);font-weight:var(--kritzel-avatar-initials-font-weight, 500);font-family:var(--kritzel-avatar-initials-font-family, sans-serif);line-height:1}.avatar-default{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;background-color:var(--kritzel-avatar-default-background, #e0e0e0);color:var(--kritzel-avatar-default-color, #9e9e9e)}.avatar-default svg{width:60%;height:60%}:host(.has-image){border:var(--kritzel-avatar-border, none)}:host(.has-initials){border:var(--kritzel-avatar-border, none)}:host(.has-default){border:var(--kritzel-avatar-border, none)}"}},[513,"kritzel-avatar",{user:[16],name:[1],size:[2],color:[1],imageError:[32]},void 0,{user:[{userChanged:0}],profileImageUrl:[{profileImageUrlChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["kritzel-avatar"].forEach((e=>{"kritzel-avatar"===e&&(customElements.get(i(e))||customElements.define(i(e),s))}))}export{s as K,o as d}
@@ -1 +1 @@
1
- import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-BWj1eE2b.js";import{d as c}from"./p-BZ8bK8qT.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=t(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return r(i,{key:"d7b77c754e247879f94b05f9c7b282d2aec22035"},r("div",{key:"1f1c95ccb4b8f5500d73e4eafa775aa1dd93d83c",class:"size-grid"},this.sizes.map((e=>r("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},r("kritzel-color",{value:"var(--kritzel-global-text-primary)",size:e}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center}.size-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}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-color":customElements.get(o(e))||c()}}))}export{l as K,a as d}
1
+ import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-BWj1eE2b.js";import{d as l}from"./p-CekG3_ce.js";const c=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=t(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return r(i,{key:"f964d37a6cbfa48898ac066859165df1492535a9"},r("div",{key:"fed8ec5ddbe07d64beb151b22211fecdc0a278d1",class:"size-grid"},this.sizes.map((e=>r("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},r("kritzel-color",{value:"var(--kritzel-global-text-primary)",size:e}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center}.size-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}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),c);break;case"kritzel-color":customElements.get(o(e))||l()}}))}export{c as K,a as d}
@@ -1 +1 @@
1
- import{p as e,H as n,c as t,h as o,d as i,t as r}from"./p-BWj1eE2b.js";const s=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=t(this,"valueChange")}styles=["none","triangle"];value;valueChange;getStartEnding(){return this.value?.start?.enabled?this.value.start.style??"triangle":"none"}getEndEnding(){return this.value?.end?.enabled?this.value.end.style??"triangle":"none"}handleStartChange(e){const n={...this.value,start:"none"===e?{enabled:!1}:{enabled:!0,style:e}};this.value=n,this.valueChange.emit(n)}handleEndChange(e){const n={...this.value,end:"none"===e?{enabled:!1}:{enabled:!0,style:e}};this.value=n,this.valueChange.emit(n)}getEndingPath(e){switch(e){case"triangle":return"M 0 0 L 10 5 L 0 10 Z";case"open":return"M 0 0 L 10 5 L 0 10";case"diamond":return"M 0 5 L 5 0 L 10 5 L 5 10 Z";case"circle":return"M 10 5 A 5 5 0 1 1 0 5 A 5 5 0 1 1 10 5 Z";default:return""}}renderEndingIcon(e,n){const t="var(--kritzel-global-text-primary)";if("none"===e)return o("svg",{viewBox:"0 0 24 12",class:"ending-icon"},o("line",{x1:n?4:2,y1:"6",x2:n?22:20,y2:"6",stroke:t,"stroke-width":"2","stroke-linecap":"round"}));const i=this.getEndingPath(e),r="open"===e;return o("svg",{viewBox:"0 0 24 12",class:"ending-icon"},n?o("g",null,o("line",{x1:"12",y1:"6",x2:"22",y2:"6",stroke:t,"stroke-width":"2","stroke-linecap":"round"}),o("g",{transform:"translate(2, 1) scale(1, 1)"},o("path",{d:i,fill:r?"none":t,stroke:t,"stroke-width":r?2:0,"stroke-linecap":"round","stroke-linejoin":"round",transform:"scale(-1, 1) translate(-10, 0)"}))):o("g",null,o("line",{x1:"2",y1:"6",x2:"12",y2:"6",stroke:t,"stroke-width":"2","stroke-linecap":"round"}),o("g",{transform:"translate(12, 1)"},o("path",{d:i,fill:r?"none":t,stroke:t,"stroke-width":r?2:0,"stroke-linecap":"round","stroke-linejoin":"round"}))))}render(){const e=this.getStartEnding(),n=this.getEndEnding();return o(i,{key:"fd254becee71940867504c80b47d56a69ae2ab12"},o("div",{key:"be03727ba2f5802a8adadc90b28dd7488d1bfe1c",class:"endings-section"},o("div",{key:"0ba2fcefeb3690f7eee01c7b1c3f6db58ed8e918",class:"endings-row"},this.styles.map((n=>o("button",{class:{"ending-option":!0,selected:e===n},onClick:()=>this.handleStartChange(n),title:"none"===n?"No start arrow":`${n} start arrow`},this.renderEndingIcon(n,!0)))))),o("div",{key:"058ce9870084adc6f1b061aba50e830c0e8b4a01",class:"endings-section"},o("div",{key:"69c4ced0ddb8a47ea1fdd290431eee7bae95e192",class:"endings-row"},this.styles.map((e=>o("button",{class:{"ending-option":!0,selected:n===e},onClick:()=>this.handleEndChange(e),title:"none"===e?"No end arrow":`${e} end arrow`},this.renderEndingIcon(e,!1)))))))}static get style(){return":host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.endings-section{display:flex;flex-direction:column;gap:6px}.section-label{font-size:12px;font-weight:500;color:var(--kritzel-line-endings-label-color, #666666);padding-left:4px}.endings-row{display:flex;align-items:center;gap:4px}.ending-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-line-endings-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.ending-option:hover{background-color:var(--kritzel-line-endings-hover-background-color, #ebebeb)}.ending-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-line-endings-selected-background-color, #ebebeb)}.ending-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.ending-icon{width:100%;height:100%}"}},[513,"kritzel-line-endings",{styles:[16],value:[1040]}]);function a(){"undefined"!=typeof customElements&&["kritzel-line-endings"].forEach((e=>{"kritzel-line-endings"===e&&(customElements.get(r(e))||customElements.define(r(e),s))}))}export{s as K,a as d}
1
+ import{p as e,H as n,c as t,h as o,d as i,t as r}from"./p-BWj1eE2b.js";const s=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=t(this,"valueChange")}styles=["none","triangle"];value;valueChange;getStartEnding(){return this.value?.start?.enabled?this.value.start.style??"triangle":"none"}getEndEnding(){return this.value?.end?.enabled?this.value.end.style??"triangle":"none"}handleStartChange(e){const n={...this.value,start:"none"===e?{enabled:!1}:{enabled:!0,style:e}};this.value=n,this.valueChange.emit(n)}handleEndChange(e){const n={...this.value,end:"none"===e?{enabled:!1}:{enabled:!0,style:e}};this.value=n,this.valueChange.emit(n)}getEndingPath(e){switch(e){case"triangle":return"M 0 0 L 10 5 L 0 10 Z";case"open":return"M 0 0 L 10 5 L 0 10";case"diamond":return"M 0 5 L 5 0 L 10 5 L 5 10 Z";case"circle":return"M 10 5 A 5 5 0 1 1 0 5 A 5 5 0 1 1 10 5 Z";default:return""}}renderEndingIcon(e,n){const t="var(--kritzel-global-text-primary)";if("none"===e)return o("svg",{viewBox:"0 0 24 12",class:"ending-icon"},o("line",{x1:n?4:2,y1:"6",x2:n?22:20,y2:"6",stroke:t,"stroke-width":"2","stroke-linecap":"round"}));const i=this.getEndingPath(e),r="open"===e;return o("svg",{viewBox:"0 0 24 12",class:"ending-icon"},n?o("g",null,o("line",{x1:"12",y1:"6",x2:"22",y2:"6",stroke:t,"stroke-width":"2","stroke-linecap":"round"}),o("g",{transform:"translate(2, 1) scale(1, 1)"},o("path",{d:i,fill:r?"none":t,stroke:t,"stroke-width":r?2:0,"stroke-linecap":"round","stroke-linejoin":"round",transform:"scale(-1, 1) translate(-10, 0)"}))):o("g",null,o("line",{x1:"2",y1:"6",x2:"12",y2:"6",stroke:t,"stroke-width":"2","stroke-linecap":"round"}),o("g",{transform:"translate(12, 1)"},o("path",{d:i,fill:r?"none":t,stroke:t,"stroke-width":r?2:0,"stroke-linecap":"round","stroke-linejoin":"round"}))))}render(){const e=this.getStartEnding(),n=this.getEndEnding();return o(i,{key:"38bcd0b0e56c0d0fc7fd57346b718054faa0ba06"},o("div",{key:"5ae52039756334299a86d7301b15f6874d5689ff",class:"endings-section"},o("div",{key:"8a0dd7792498248203f2db8c346828fe7f57534d",class:"endings-row"},this.styles.map((n=>o("button",{class:{"ending-option":!0,selected:e===n},onClick:()=>this.handleStartChange(n),title:"none"===n?"No start arrow":`${n} start arrow`},this.renderEndingIcon(n,!0)))))),o("div",{key:"001c6cc50af45e1461ef15e2c43df4efdd83b48f",class:"endings-section"},o("div",{key:"96cc57da4bed38aa42207d40a6a21cd39fa18cad",class:"endings-row"},this.styles.map((e=>o("button",{class:{"ending-option":!0,selected:n===e},onClick:()=>this.handleEndChange(e),title:"none"===e?"No end arrow":`${e} end arrow`},this.renderEndingIcon(e,!1)))))))}static get style(){return":host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.endings-section{display:flex;flex-direction:column;gap:6px}.section-label{font-size:12px;font-weight:500;color:var(--kritzel-line-endings-label-color, #666666);padding-left:4px}.endings-row{display:flex;align-items:center;gap:4px}.ending-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-line-endings-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.ending-option:hover{background-color:var(--kritzel-line-endings-hover-background-color, #ebebeb)}.ending-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-line-endings-selected-background-color, #ebebeb)}.ending-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.ending-icon{width:100%;height:100%}"}},[513,"kritzel-line-endings",{styles:[16],value:[1040]}]);function a(){"undefined"!=typeof customElements&&["kritzel-line-endings"].forEach((e=>{"kritzel-line-endings"===e&&(customElements.get(r(e))||customElements.define(r(e),s))}))}export{s as K,a as d}
@@ -1 +1 @@
1
- import{p as i,H as e,c as o,h as t,d as l,t as r}from"./p-BWj1eE2b.js";import{d as s}from"./p-BjPmEs5A.js";import{d as n}from"./p-Gm5hSQ-e.js";const a=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.providerLogin=o(this,"providerLogin"),this.dialogClosed=o(this,"dialogClosed")}get host(){return this}providers=[];dialogTitle="Sign in";subtitle;isDialogOpen=!1;loadingProvider=null;providerLogin;dialogClosed;async open(){this.loadingProvider=null,this.isDialogOpen=!0}async close(){this.isDialogOpen=!1,this.loadingProvider=null}async setLoading(i){this.loadingProvider=i}handleProviderClick=i=>{this.loadingProvider||(this.loadingProvider=i.name,this.providerLogin.emit({provider:i.name}))};closeDialog=()=>{this.isDialogOpen=!1,this.loadingProvider=null,this.dialogClosed.emit()};render(){return t(l,{key:"21b548c3d1391203a02a33e66afa5d3dae603071"},t("kritzel-dialog",{key:"1254e8bdc8e84e71e606109e20f938ecb42b05e3",dialogTitle:this.dialogTitle,isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small"},t("div",{key:"99d23d7c0d52da043c3d59ee9d527d02e68d3b2b",class:"login-content"},this.subtitle&&t("p",{key:"7ce2131761e0127a190dbc1f7b4cd32884e4657b",class:"login-subtitle"},this.subtitle),t("div",{key:"bc32c6e61856c963cf9c0d22bfe5935c6c55568d",class:"login-providers"},this.providers.map((i=>t("button",{key:i.name,class:{"provider-button":!0,"is-loading":this.loadingProvider===i.name,"is-disabled":null!==this.loadingProvider&&this.loadingProvider!==i.name},disabled:null!==this.loadingProvider&&this.loadingProvider!==i.name,onClick:()=>this.handleProviderClick(i)},this.loadingProvider===i.name?t("span",{class:"spinner"}):i.icon&&t("kritzel-icon",{name:i.icon,size:20}),t("span",{class:"provider-label"},i.label))))))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}"}},[513,"kritzel-login-dialog",{providers:[16],dialogTitle:[1,"dialog-title"],subtitle:[1],isDialogOpen:[32],loadingProvider:[32],open:[64],close:[64],setLoading:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-login-dialog","kritzel-dialog","kritzel-icon"].forEach((i=>{switch(i){case"kritzel-login-dialog":customElements.get(r(i))||customElements.define(r(i),a);break;case"kritzel-dialog":customElements.get(r(i))||s();break;case"kritzel-icon":customElements.get(r(i))||n()}}))}export{a as K,d}
1
+ import{p as i,H as e,c as o,h as t,d as l,t as r}from"./p-BWj1eE2b.js";import{d as s}from"./p-BfJav4Zz.js";import{d as n}from"./p-Gm5hSQ-e.js";const a=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.providerLogin=o(this,"providerLogin"),this.dialogClosed=o(this,"dialogClosed")}get host(){return this}providers=[];dialogTitle="Sign in";subtitle;isDialogOpen=!1;loadingProvider=null;providerLogin;dialogClosed;async open(){this.loadingProvider=null,this.isDialogOpen=!0}async close(){this.isDialogOpen=!1,this.loadingProvider=null}async setLoading(i){this.loadingProvider=i}handleProviderClick=i=>{this.loadingProvider||(this.loadingProvider=i.name,this.providerLogin.emit({provider:i.name}))};closeDialog=()=>{this.isDialogOpen=!1,this.loadingProvider=null,this.dialogClosed.emit()};render(){return t(l,{key:"8cac83db48fef2531f1669c3f601526b1e5cdefa"},t("kritzel-dialog",{key:"72e0f2eb8e19f3c1081bfd5e1183aa9ed1bc678a",dialogTitle:this.dialogTitle,isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small"},t("div",{key:"bb17bcf6f3486000c9056b3983810e016b0f05a3",class:"login-content"},this.subtitle&&t("p",{key:"cef17bc6f5078769b8deed6ec1c615a71fe0c611",class:"login-subtitle"},this.subtitle),t("div",{key:"8462ef9a62201cb15f8911432ca188cf49bc8a8d",class:"login-providers"},this.providers.map((i=>t("button",{key:i.name,class:{"provider-button":!0,"is-loading":this.loadingProvider===i.name,"is-disabled":null!==this.loadingProvider&&this.loadingProvider!==i.name},disabled:null!==this.loadingProvider&&this.loadingProvider!==i.name,onClick:()=>this.handleProviderClick(i)},this.loadingProvider===i.name?t("span",{class:"spinner"}):i.icon&&t("kritzel-icon",{name:i.icon,size:20}),t("span",{class:"provider-label"},i.label))))))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}"}},[513,"kritzel-login-dialog",{providers:[16],dialogTitle:[1,"dialog-title"],subtitle:[1],isDialogOpen:[32],loadingProvider:[32],open:[64],close:[64],setLoading:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-login-dialog","kritzel-dialog","kritzel-icon"].forEach((i=>{switch(i){case"kritzel-login-dialog":customElements.get(r(i))||customElements.define(r(i),a);break;case"kritzel-dialog":customElements.get(r(i))||s();break;case"kritzel-icon":customElements.get(r(i))||n()}}))}export{a as K,d}