@mhmo91/schmancy 0.10.5 → 0.10.6

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 (383) hide show
  1. package/custom-elements.json +4 -707
  2. package/dist/agent/{flow-CaPi2G8y.js.map → flow-3RrZM-e7.js.map} +1 -1
  3. package/dist/agent/schmancy.agent.js +2807 -4687
  4. package/dist/agent/schmancy.agent.js.map +1 -1
  5. package/dist/agent/schmancy.manifest.json +6 -471
  6. package/dist/agent/{vendor-jsqr-r7GNh4P3.js.map → vendor-jsqr-BUVwyoGC.js.map} +1 -1
  7. package/dist/agent/{vendor-material-color-Be96dpGE.js.map → vendor-material-color-33Mj762T.js.map} +1 -1
  8. package/dist/{area-D5haQE-J.js → area-CIZZ5tbB.js} +1 -1
  9. package/dist/{area-D5haQE-J.js.map → area-CIZZ5tbB.js.map} +1 -1
  10. package/dist/{area-CSQdhCBF.cjs → area-oZjYJlUy.cjs} +1 -1
  11. package/dist/{area-CSQdhCBF.cjs.map → area-oZjYJlUy.cjs.map} +1 -1
  12. package/dist/area.cjs +1 -1
  13. package/dist/area.js +1 -1
  14. package/dist/{autocomplete-DtyjZJ1E.js → autocomplete-C1oDLuol.js} +2 -2
  15. package/dist/{autocomplete-DtyjZJ1E.js.map → autocomplete-C1oDLuol.js.map} +1 -1
  16. package/dist/{autocomplete-B_bJXUjm.cjs → autocomplete-X20i6D62.cjs} +1 -1
  17. package/dist/{autocomplete-B_bJXUjm.cjs.map → autocomplete-X20i6D62.cjs.map} +1 -1
  18. package/dist/autocomplete.cjs +1 -1
  19. package/dist/autocomplete.js +1 -1
  20. package/dist/avatar.cjs +1 -1
  21. package/dist/avatar.js +2 -2
  22. package/dist/badge.cjs +1 -1
  23. package/dist/badge.js +1 -1
  24. package/dist/{boat-BJLCp-Hv.cjs → boat-CUx58Gwe.cjs} +1 -1
  25. package/dist/{boat-BJLCp-Hv.cjs.map → boat-CUx58Gwe.cjs.map} +1 -1
  26. package/dist/{boat-MT8bRT8u.js → boat-CpE0yAlK.js} +1 -1
  27. package/dist/{boat-MT8bRT8u.js.map → boat-CpE0yAlK.js.map} +1 -1
  28. package/dist/boat.cjs +1 -1
  29. package/dist/boat.js +1 -1
  30. package/dist/breadcrumb.cjs +1 -1
  31. package/dist/breadcrumb.js +1 -1
  32. package/dist/{busy-6BqWGryX.js → busy-C9n-DUY4.js} +1 -1
  33. package/dist/{busy-6BqWGryX.js.map → busy-C9n-DUY4.js.map} +1 -1
  34. package/dist/{busy-DSF2E-zy.cjs → busy-D1DKZhgV.cjs} +1 -1
  35. package/dist/{busy-DSF2E-zy.cjs.map → busy-D1DKZhgV.cjs.map} +1 -1
  36. package/dist/busy.cjs +1 -1
  37. package/dist/busy.js +1 -1
  38. package/dist/button.cjs +1 -1
  39. package/dist/button.js +1 -1
  40. package/dist/{card-CvuVha-W.js → card-B3hN-qzk.js} +1 -1
  41. package/dist/{card-CvuVha-W.js.map → card-B3hN-qzk.js.map} +1 -1
  42. package/dist/{card-DnKnaHzf.cjs → card-DZJ7qjf2.cjs} +1 -1
  43. package/dist/{card-DnKnaHzf.cjs.map → card-DZJ7qjf2.cjs.map} +1 -1
  44. package/dist/card.cjs +1 -1
  45. package/dist/card.js +1 -1
  46. package/dist/charts.cjs +1 -1
  47. package/dist/charts.js +1 -1
  48. package/dist/{checkbox-QDRsE8cp.js → checkbox-CvmB1ev9.js} +1 -1
  49. package/dist/{checkbox-QDRsE8cp.js.map → checkbox-CvmB1ev9.js.map} +1 -1
  50. package/dist/{checkbox-D3u8Wm9r.cjs → checkbox-DapdzDow.cjs} +1 -1
  51. package/dist/{checkbox-D3u8Wm9r.cjs.map → checkbox-DapdzDow.cjs.map} +1 -1
  52. package/dist/checkbox.cjs +1 -1
  53. package/dist/checkbox.js +1 -1
  54. package/dist/{chips-CMoQzop1.cjs → chips-7g6mWRuh.cjs} +1 -1
  55. package/dist/{chips-CMoQzop1.cjs.map → chips-7g6mWRuh.cjs.map} +1 -1
  56. package/dist/{chips-Dy9vx8JS.js → chips-C8Y3_3ke.js} +2 -2
  57. package/dist/{chips-Dy9vx8JS.js.map → chips-C8Y3_3ke.js.map} +1 -1
  58. package/dist/chips.cjs +1 -1
  59. package/dist/chips.js +2 -2
  60. package/dist/connectivity.cjs +1 -1
  61. package/dist/connectivity.js +1 -1
  62. package/dist/content-drawer.cjs +1 -1
  63. package/dist/content-drawer.js +1 -1
  64. package/dist/{date-range-Boesjlic.js → date-range-DdcaPX7C.js} +2 -2
  65. package/dist/{date-range-Boesjlic.js.map → date-range-DdcaPX7C.js.map} +1 -1
  66. package/dist/{date-range-B2NuihKA.cjs → date-range-ZfUl4duV.cjs} +1 -1
  67. package/dist/{date-range-B2NuihKA.cjs.map → date-range-ZfUl4duV.cjs.map} +1 -1
  68. package/dist/{date-range-inline-BI6_4Ahl.cjs → date-range-inline-D-d7N6bh.cjs} +1 -1
  69. package/dist/{date-range-inline-BI6_4Ahl.cjs.map → date-range-inline-D-d7N6bh.cjs.map} +1 -1
  70. package/dist/{date-range-inline-DBuND2pc.js → date-range-inline-QQmIWhZ4.js} +1 -1
  71. package/dist/{date-range-inline-DBuND2pc.js.map → date-range-inline-QQmIWhZ4.js.map} +1 -1
  72. package/dist/date-range-inline.cjs +1 -1
  73. package/dist/date-range-inline.js +1 -1
  74. package/dist/date-range.cjs +1 -1
  75. package/dist/date-range.js +1 -1
  76. package/dist/delay.cjs +1 -1
  77. package/dist/delay.js +2 -2
  78. package/dist/{details-BRs_z5-k.cjs → details-3rL6UQU8.cjs} +1 -1
  79. package/dist/{details-BRs_z5-k.cjs.map → details-3rL6UQU8.cjs.map} +1 -1
  80. package/dist/{details-BrGrUTGC.js → details-Dpjh-XnJ.js} +1 -1
  81. package/dist/{details-BrGrUTGC.js.map → details-Dpjh-XnJ.js.map} +1 -1
  82. package/dist/details.cjs +1 -1
  83. package/dist/details.js +1 -1
  84. package/dist/{divider-W3TiDasp.js → divider-BdfEKQsH.js} +1 -1
  85. package/dist/{divider-W3TiDasp.js.map → divider-BdfEKQsH.js.map} +1 -1
  86. package/dist/{divider-BOxQ2T9h.cjs → divider-CutXDz3F.cjs} +1 -1
  87. package/dist/{divider-BOxQ2T9h.cjs.map → divider-CutXDz3F.cjs.map} +1 -1
  88. package/dist/divider.cjs +1 -1
  89. package/dist/divider.js +1 -1
  90. package/dist/dropdown.cjs +1 -1
  91. package/dist/dropdown.js +1 -1
  92. package/dist/{expand-CnccBF91.cjs → expand-DM6zfZf7.cjs} +1 -1
  93. package/dist/{expand-CnccBF91.cjs.map → expand-DM6zfZf7.cjs.map} +1 -1
  94. package/dist/{expand-Pu8fZ0jZ.js → expand-DrgMPJbu.js} +2 -2
  95. package/dist/{expand-Pu8fZ0jZ.js.map → expand-DrgMPJbu.js.map} +1 -1
  96. package/dist/expand.cjs +1 -1
  97. package/dist/expand.js +1 -1
  98. package/dist/{extra-DxEWs41z.js → extra-B6gFu4_1.js} +1 -1
  99. package/dist/{extra-DxEWs41z.js.map → extra-B6gFu4_1.js.map} +1 -1
  100. package/dist/{extra-B8IPs6gG.cjs → extra-DJRYaOXe.cjs} +1 -1
  101. package/dist/{extra-B8IPs6gG.cjs.map → extra-DJRYaOXe.cjs.map} +1 -1
  102. package/dist/extra.cjs +1 -1
  103. package/dist/extra.js +1 -1
  104. package/dist/{float-WCVdp3um.js → float-1iihPek5.js} +1 -1
  105. package/dist/{float-WCVdp3um.js.map → float-1iihPek5.js.map} +1 -1
  106. package/dist/{float-BRKa-P6Z.cjs → float-Ckyk85XG.cjs} +1 -1
  107. package/dist/{float-BRKa-P6Z.cjs.map → float-Ckyk85XG.cjs.map} +1 -1
  108. package/dist/float.cjs +1 -1
  109. package/dist/float.js +1 -1
  110. package/dist/{form-CI59gad4.js.map → form-BF1c3Dk1.js.map} +1 -1
  111. package/dist/{form-B2qudx_q.cjs.map → form-DeO5XX3b.cjs.map} +1 -1
  112. package/dist/form.cjs +1 -1
  113. package/dist/form.js +1 -1
  114. package/dist/handover/agent-runtime-followups.md +1 -1
  115. package/dist/handover/agent-runtime-v1.md +3 -3
  116. package/dist/{hashContent-a8uVr3xs.js.map → hashContent-BU6jl5ih.js.map} +1 -1
  117. package/dist/{hashContent-ejkBgDnN.cjs.map → hashContent-Bobsobip.cjs.map} +1 -1
  118. package/dist/{icons-DXEbmg-O.cjs → icons-CV-fiGcW.cjs} +1 -1
  119. package/dist/{icons-DXEbmg-O.cjs.map → icons-CV-fiGcW.cjs.map} +1 -1
  120. package/dist/{icons-C0ufCcdp.js → icons-DUkcTZAY.js} +1 -1
  121. package/dist/{icons-C0ufCcdp.js.map → icons-DUkcTZAY.js.map} +1 -1
  122. package/dist/icons.cjs +1 -1
  123. package/dist/icons.js +1 -1
  124. package/dist/{iframe-c9lGxw7x.js → iframe-C9tj7F6Y.js} +1 -1
  125. package/dist/{iframe-c9lGxw7x.js.map → iframe-C9tj7F6Y.js.map} +1 -1
  126. package/dist/{iframe-C6RVODkW.cjs → iframe-DF97oGtZ.cjs} +1 -1
  127. package/dist/{iframe-C6RVODkW.cjs.map → iframe-DF97oGtZ.cjs.map} +1 -1
  128. package/dist/iframe.cjs +1 -1
  129. package/dist/iframe.js +1 -1
  130. package/dist/index.cjs +1 -1
  131. package/dist/index.js +70 -72
  132. package/dist/{input-Pmj_bH37.js → input-DE7x223Y.js} +1 -1
  133. package/dist/{input-Pmj_bH37.js.map → input-DE7x223Y.js.map} +1 -1
  134. package/dist/{input-B4HM-9-H.cjs → input-TW9G3n7X.cjs} +1 -1
  135. package/dist/{input-B4HM-9-H.cjs.map → input-TW9G3n7X.cjs.map} +1 -1
  136. package/dist/{input-chip-BIGgd_7w.js → input-chip-BdoaVw_D.js} +1 -1
  137. package/dist/{input-chip-BIGgd_7w.js.map → input-chip-BdoaVw_D.js.map} +1 -1
  138. package/dist/{input-chip-BoDisY6c.cjs → input-chip-Do48eI5r.cjs} +1 -1
  139. package/dist/{input-chip-BoDisY6c.cjs.map → input-chip-Do48eI5r.cjs.map} +1 -1
  140. package/dist/input.cjs +1 -1
  141. package/dist/input.js +1 -1
  142. package/dist/json.cjs +1 -1
  143. package/dist/json.js +2 -2
  144. package/dist/kbd.cjs +1 -1
  145. package/dist/kbd.js +1 -1
  146. package/dist/layout.cjs +1 -1
  147. package/dist/layout.js +1 -1
  148. package/dist/{lightbox-K1eJTYXP.js → lightbox-DcutIyjx.js} +2 -2
  149. package/dist/{lightbox-K1eJTYXP.js.map → lightbox-DcutIyjx.js.map} +1 -1
  150. package/dist/{lightbox-DK1vDKm3.cjs → lightbox-sPfnYzjJ.cjs} +1 -1
  151. package/dist/{lightbox-DK1vDKm3.cjs.map → lightbox-sPfnYzjJ.cjs.map} +1 -1
  152. package/dist/lightbox.cjs +1 -1
  153. package/dist/lightbox.js +1 -1
  154. package/dist/{list-Ds0Nv1y5.js → list-BWrtrdgs.js} +1 -1
  155. package/dist/{list-Ds0Nv1y5.js.map → list-BWrtrdgs.js.map} +1 -1
  156. package/dist/{list-CEuVqAxN.cjs → list-C4vasUly.cjs} +1 -1
  157. package/dist/{list-CEuVqAxN.cjs.map → list-C4vasUly.cjs.map} +1 -1
  158. package/dist/list.cjs +1 -1
  159. package/dist/list.js +1 -1
  160. package/dist/{map-BrBSrIqg.cjs → map-BAQ9FEB6.cjs} +1 -1
  161. package/dist/{map-BrBSrIqg.cjs.map → map-BAQ9FEB6.cjs.map} +1 -1
  162. package/dist/{map-1uwxxvBa.js → map-CEreveeI.js} +1 -1
  163. package/dist/{map-1uwxxvBa.js.map → map-CEreveeI.js.map} +1 -1
  164. package/dist/map.cjs +1 -1
  165. package/dist/map.js +1 -1
  166. package/dist/{menu-Bly30Nje.cjs → menu-3yXDZusj.cjs} +1 -1
  167. package/dist/{menu-Bly30Nje.cjs.map → menu-3yXDZusj.cjs.map} +1 -1
  168. package/dist/{menu-L8MK1ma5.js → menu-CxChOxWT.js} +2 -2
  169. package/dist/{menu-L8MK1ma5.js.map → menu-CxChOxWT.js.map} +1 -1
  170. package/dist/menu.cjs +1 -1
  171. package/dist/menu.js +1 -1
  172. package/dist/mixins-Db7gjDah.cjs +298 -0
  173. package/dist/{mixins-CAb0b03r.cjs.map → mixins-Db7gjDah.cjs.map} +1 -1
  174. package/dist/mixins-Dw6hVfy-.js +627 -0
  175. package/dist/{mixins-B34UxxCe.js.map → mixins-Dw6hVfy-.js.map} +1 -1
  176. package/dist/mixins.cjs +1 -1
  177. package/dist/mixins.js +1 -1
  178. package/dist/nav-drawer.cjs +1 -1
  179. package/dist/nav-drawer.js +1 -1
  180. package/dist/navigation-bar.cjs +1 -1
  181. package/dist/navigation-bar.js +1 -1
  182. package/dist/navigation-rail.cjs +1 -1
  183. package/dist/navigation-rail.js +1 -1
  184. package/dist/{notification-7fSbk8hm.cjs → notification-DKYy9qVe.cjs} +1 -1
  185. package/dist/{notification-7fSbk8hm.cjs.map → notification-DKYy9qVe.cjs.map} +1 -1
  186. package/dist/{notification-DB25M-qo.js → notification-ycbUBbOu.js} +2 -2
  187. package/dist/{notification-DB25M-qo.js.map → notification-ycbUBbOu.js.map} +1 -1
  188. package/dist/notification.cjs +1 -1
  189. package/dist/notification.js +1 -1
  190. package/dist/{option-DDHa25k5.js → option-DtOhMd3k.js} +1 -1
  191. package/dist/{option-DDHa25k5.js.map → option-DtOhMd3k.js.map} +1 -1
  192. package/dist/{option-HF9Xqbuq.cjs → option-zgVge3BH.cjs} +1 -1
  193. package/dist/{option-HF9Xqbuq.cjs.map → option-zgVge3BH.cjs.map} +1 -1
  194. package/dist/option.cjs +1 -1
  195. package/dist/option.js +1 -1
  196. package/dist/{overlay-stack-CCiTaf_C.js.map → overlay-stack-DCDS17uj.js.map} +1 -1
  197. package/dist/{overlay-stack-CFGiYf34.cjs.map → overlay-stack-DPIe_aYv.cjs.map} +1 -1
  198. package/dist/overlay.cjs +1 -1
  199. package/dist/{overlay.confirm-body-BDG94R0x.js → overlay.confirm-body-AFqYBqrI.js} +1 -1
  200. package/dist/{overlay.confirm-body-BDG94R0x.js.map → overlay.confirm-body-AFqYBqrI.js.map} +1 -1
  201. package/dist/{overlay.confirm-body-b4Nx_OVf.cjs → overlay.confirm-body-DctQLDao.cjs} +1 -1
  202. package/dist/{overlay.confirm-body-b4Nx_OVf.cjs.map → overlay.confirm-body-DctQLDao.cjs.map} +1 -1
  203. package/dist/overlay.js +3 -3
  204. package/dist/{overlay.service-BUCuZa6V.js → overlay.service-B9On2-Aa.js} +2 -2
  205. package/dist/{overlay.service-BUCuZa6V.js.map → overlay.service-B9On2-Aa.js.map} +1 -1
  206. package/dist/{overlay.service-CRHZZY9F.cjs → overlay.service-k2nCE4pi.cjs} +1 -1
  207. package/dist/{overlay.service-CRHZZY9F.cjs.map → overlay.service-k2nCE4pi.cjs.map} +1 -1
  208. package/dist/page.cjs +1 -1
  209. package/dist/page.js +2 -2
  210. package/dist/{payment-card-form-C4jb-OdM.js → payment-card-form-Be1-OVlL.js} +1 -1
  211. package/dist/{payment-card-form-C4jb-OdM.js.map → payment-card-form-Be1-OVlL.js.map} +1 -1
  212. package/dist/{payment-card-form-WEx4CscR.cjs → payment-card-form-CNnGePG4.cjs} +1 -1
  213. package/dist/{payment-card-form-WEx4CscR.cjs.map → payment-card-form-CNnGePG4.cjs.map} +1 -1
  214. package/dist/payment-card-form.cjs +1 -1
  215. package/dist/payment-card-form.js +1 -1
  216. package/dist/{progress-CqOyMM4i.js → progress-BFWzmTlz.js} +1 -1
  217. package/dist/{progress-CqOyMM4i.js.map → progress-BFWzmTlz.js.map} +1 -1
  218. package/dist/{progress-54R4QRgW.cjs → progress-C4TGG2eN.cjs} +1 -1
  219. package/dist/{progress-54R4QRgW.cjs.map → progress-C4TGG2eN.cjs.map} +1 -1
  220. package/dist/progress.cjs +1 -1
  221. package/dist/progress.js +1 -1
  222. package/dist/qr-scanner.cjs +1 -1
  223. package/dist/qr-scanner.js +1 -1
  224. package/dist/{radio-group-B4zbBIZF.js → radio-group-DTNAW5dd.js} +1 -1
  225. package/dist/{radio-group-B4zbBIZF.js.map → radio-group-DTNAW5dd.js.map} +1 -1
  226. package/dist/{radio-group-BJqZpYVy.cjs → radio-group-xLRp1g57.cjs} +1 -1
  227. package/dist/{radio-group-BJqZpYVy.cjs.map → radio-group-xLRp1g57.cjs.map} +1 -1
  228. package/dist/radio-group.cjs +1 -1
  229. package/dist/radio-group.js +1 -1
  230. package/dist/range.cjs +1 -1
  231. package/dist/range.js +1 -1
  232. package/dist/{rxjs-utils-BXpvHN4-.js.map → rxjs-utils-BK8VMe3K.js.map} +1 -1
  233. package/dist/{rxjs-utils-CaC-tdot.cjs.map → rxjs-utils-DhOKenkS.cjs.map} +1 -1
  234. package/dist/rxjs-utils.cjs +1 -1
  235. package/dist/rxjs-utils.js +1 -1
  236. package/dist/{scroll-CYm6Krus.js → scroll-BCmdqSQU.js} +1 -1
  237. package/dist/{scroll-CYm6Krus.js.map → scroll-BCmdqSQU.js.map} +1 -1
  238. package/dist/{scroll-iSRovYYt.cjs → scroll-Bdgb-vRy.cjs} +1 -1
  239. package/dist/{scroll-iSRovYYt.cjs.map → scroll-Bdgb-vRy.cjs.map} +1 -1
  240. package/dist/{select-1WHseXP6.js → select-COGARE0b.js} +2 -2
  241. package/dist/{select-1WHseXP6.js.map → select-COGARE0b.js.map} +1 -1
  242. package/dist/{select-DiQHtQJN.cjs → select-Cv5t_PT3.cjs} +1 -1
  243. package/dist/{select-DiQHtQJN.cjs.map → select-Cv5t_PT3.cjs.map} +1 -1
  244. package/dist/select.cjs +1 -1
  245. package/dist/select.js +1 -1
  246. package/dist/skeleton.cjs +1 -1
  247. package/dist/skeleton.js +1 -1
  248. package/dist/skills/INDEX.md +1 -4
  249. package/dist/skills/schmancy/INDEX.md +1 -4
  250. package/dist/slider.cjs +1 -1
  251. package/dist/slider.js +1 -1
  252. package/dist/{splash-screen-CJL8DGDe.cjs → splash-screen-B8rFbjqT.cjs} +1 -1
  253. package/dist/{splash-screen-CJL8DGDe.cjs.map → splash-screen-B8rFbjqT.cjs.map} +1 -1
  254. package/dist/{splash-screen-BwvtKMdN.js → splash-screen-DbGbGttg.js} +1 -1
  255. package/dist/{splash-screen-BwvtKMdN.js.map → splash-screen-DbGbGttg.js.map} +1 -1
  256. package/dist/splash-screen.cjs +1 -1
  257. package/dist/splash-screen.js +1 -1
  258. package/dist/{src-UaZeROcW.js → src-YRir9pOP.js} +37 -39
  259. package/dist/{src-UaZeROcW.js.map → src-YRir9pOP.js.map} +1 -1
  260. package/dist/{src-Bwr2NR0A.cjs → src-b8D-Ec-Q.cjs} +1 -1
  261. package/dist/{src-Bwr2NR0A.cjs.map → src-b8D-Ec-Q.cjs.map} +1 -1
  262. package/dist/steps.cjs +1 -1
  263. package/dist/steps.js +1 -1
  264. package/dist/{surface-DPUkQ3OL.js → surface-BE7sGTBt.js} +1 -1
  265. package/dist/{surface-DPUkQ3OL.js.map → surface-BE7sGTBt.js.map} +1 -1
  266. package/dist/{surface-DE5iuI8e.cjs → surface-BvudRtf5.cjs} +1 -1
  267. package/dist/{surface-DE5iuI8e.cjs.map → surface-BvudRtf5.cjs.map} +1 -1
  268. package/dist/surface.cjs +1 -1
  269. package/dist/surface.js +1 -1
  270. package/dist/switch.cjs +1 -1
  271. package/dist/switch.js +1 -1
  272. package/dist/table.cjs +1 -1
  273. package/dist/table.js +1 -1
  274. package/dist/{tabs-CsDQ72Qk.cjs → tabs-C0XKld1Z.cjs} +1 -1
  275. package/dist/{tabs-CsDQ72Qk.cjs.map → tabs-C0XKld1Z.cjs.map} +1 -1
  276. package/dist/{tabs-B2XEQPQl.js → tabs-DIzCRsA3.js} +1 -1
  277. package/dist/{tabs-B2XEQPQl.js.map → tabs-DIzCRsA3.js.map} +1 -1
  278. package/dist/tabs.cjs +1 -1
  279. package/dist/tabs.js +1 -1
  280. package/dist/teleport.cjs +1 -1
  281. package/dist/teleport.js +1 -1
  282. package/dist/{textarea-aeAP9cDG.cjs → textarea-BCDCGCJd.cjs} +1 -1
  283. package/dist/{textarea-aeAP9cDG.cjs.map → textarea-BCDCGCJd.cjs.map} +1 -1
  284. package/dist/{textarea-C_ps0lL-.js → textarea-UbZzBwqm.js} +1 -1
  285. package/dist/{textarea-C_ps0lL-.js.map → textarea-UbZzBwqm.js.map} +1 -1
  286. package/dist/textarea.cjs +1 -1
  287. package/dist/textarea.js +1 -1
  288. package/dist/{theme-DAYTVw13.cjs → theme-CIsI-sFj.cjs} +1 -1
  289. package/dist/{theme-DAYTVw13.cjs.map → theme-CIsI-sFj.cjs.map} +1 -1
  290. package/dist/{theme-DAx1iRNr.js → theme-Qh-yPEPL.js} +2 -2
  291. package/dist/{theme-DAx1iRNr.js.map → theme-Qh-yPEPL.js.map} +1 -1
  292. package/dist/{theme-button-BrHkzCtj.js → theme-button-CjTnfs9x.js} +1 -1
  293. package/dist/{theme-button-BrHkzCtj.js.map → theme-button-CjTnfs9x.js.map} +1 -1
  294. package/dist/{theme-button-LsMKY_N_.cjs → theme-button-Dv1D_Vil.cjs} +1 -1
  295. package/dist/{theme-button-LsMKY_N_.cjs.map → theme-button-Dv1D_Vil.cjs.map} +1 -1
  296. package/dist/theme-button.cjs +1 -1
  297. package/dist/theme-button.js +1 -1
  298. package/dist/theme.cjs +1 -1
  299. package/dist/{theme.interface-DESopuZS.cjs.map → theme.interface-BeW-sz_g.cjs.map} +1 -1
  300. package/dist/{theme.interface-C_034TxG.js.map → theme.interface-v7SkAnDH.js.map} +1 -1
  301. package/dist/theme.js +3 -3
  302. package/dist/timeline.cjs +1 -1
  303. package/dist/timeline.js +1 -1
  304. package/dist/tree.cjs +1 -1
  305. package/dist/tree.js +1 -1
  306. package/dist/typography.cjs +1 -1
  307. package/dist/typography.js +1 -1
  308. package/dist/{utils-BzFQfaIr.js → utils-BfOze6Tk.js} +1 -1
  309. package/dist/{utils-BzFQfaIr.js.map → utils-BfOze6Tk.js.map} +1 -1
  310. package/dist/{utils-oLBkMvor.cjs → utils-CJ9y2Jz9.cjs} +1 -1
  311. package/dist/{utils-oLBkMvor.cjs.map → utils-CJ9y2Jz9.cjs.map} +1 -1
  312. package/dist/utils.cjs +1 -1
  313. package/dist/utils.js +2 -2
  314. package/dist/visually-hidden.cjs +1 -1
  315. package/dist/visually-hidden.js +1 -1
  316. package/dist/{window-BJrKS6Zr.cjs → window-9HOUXrTU.cjs} +1 -1
  317. package/dist/{window-BJrKS6Zr.cjs.map → window-9HOUXrTU.cjs.map} +1 -1
  318. package/dist/{window-CyDuTN80.js → window-B_55dzk0.js} +2 -2
  319. package/dist/{window-CyDuTN80.js.map → window-B_55dzk0.js.map} +1 -1
  320. package/dist/window.cjs +1 -1
  321. package/dist/window.js +1 -1
  322. package/package.json +1 -2
  323. package/skills/schmancy/INDEX.md +1 -4
  324. package/src/index.ts +0 -2
  325. package/types/src/index.d.ts +0 -2
  326. package/dist/agent/vendor-highlight-CHJZQQB7.js +0 -2178
  327. package/dist/agent/vendor-highlight-CHJZQQB7.js.map +0 -1
  328. package/dist/code-highlight-Ddp0oZnm.cjs +0 -190
  329. package/dist/code-highlight-Ddp0oZnm.cjs.map +0 -1
  330. package/dist/code-highlight-DtE2-ObF.js +0 -296
  331. package/dist/code-highlight-DtE2-ObF.js.map +0 -1
  332. package/dist/code-highlight.cjs +0 -1
  333. package/dist/code-highlight.js +0 -2
  334. package/dist/mailbox-CDWqbVvZ.cjs +0 -1140
  335. package/dist/mailbox-CDWqbVvZ.cjs.map +0 -1
  336. package/dist/mailbox-DD2How0H.js +0 -1607
  337. package/dist/mailbox-DD2How0H.js.map +0 -1
  338. package/dist/mailbox.cjs +0 -1
  339. package/dist/mailbox.js +0 -2
  340. package/dist/mixins-B34UxxCe.js +0 -627
  341. package/dist/mixins-CAb0b03r.cjs +0 -298
  342. package/dist/skills/code-highlight.md +0 -47
  343. package/dist/skills/mailbox.md +0 -102
  344. package/dist/skills/schmancy/code-highlight.md +0 -47
  345. package/dist/skills/schmancy/mailbox.md +0 -102
  346. package/skills/schmancy/code-highlight.md +0 -47
  347. package/skills/schmancy/mailbox.md +0 -102
  348. package/src/code-highlight/code-highlight.ts +0 -345
  349. package/src/code-highlight/code-preview.ts +0 -125
  350. package/src/code-highlight/index.ts +0 -3
  351. package/src/mailbox/README.md +0 -128
  352. package/src/mailbox/email-editor.ts +0 -1076
  353. package/src/mailbox/email-layout-selector.ts +0 -58
  354. package/src/mailbox/email-recipients.ts +0 -599
  355. package/src/mailbox/email-template-picker.ts +0 -303
  356. package/src/mailbox/email-viewer.ts +0 -717
  357. package/src/mailbox/index.ts +0 -31
  358. package/src/mailbox/mailbox.ts +0 -364
  359. package/src/mailbox/types.ts +0 -180
  360. package/types/src/code-highlight/code-highlight.d.ts +0 -49
  361. package/types/src/code-highlight/code-preview.d.ts +0 -30
  362. package/types/src/code-highlight/index.d.ts +0 -3
  363. package/types/src/mailbox/email-editor.d.ts +0 -101
  364. package/types/src/mailbox/email-layout-selector.d.ts +0 -18
  365. package/types/src/mailbox/email-recipients.d.ts +0 -122
  366. package/types/src/mailbox/email-template-picker.d.ts +0 -54
  367. package/types/src/mailbox/email-viewer.d.ts +0 -86
  368. package/types/src/mailbox/index.d.ts +0 -12
  369. package/types/src/mailbox/mailbox.d.ts +0 -82
  370. package/types/src/mailbox/types.d.ts +0 -176
  371. /package/dist/agent/{flow-CaPi2G8y.js → flow-3RrZM-e7.js} +0 -0
  372. /package/dist/agent/{vendor-jsqr-r7GNh4P3.js → vendor-jsqr-BUVwyoGC.js} +0 -0
  373. /package/dist/agent/{vendor-material-color-Be96dpGE.js → vendor-material-color-33Mj762T.js} +0 -0
  374. /package/dist/{form-CI59gad4.js → form-BF1c3Dk1.js} +0 -0
  375. /package/dist/{form-B2qudx_q.cjs → form-DeO5XX3b.cjs} +0 -0
  376. /package/dist/{hashContent-a8uVr3xs.js → hashContent-BU6jl5ih.js} +0 -0
  377. /package/dist/{hashContent-ejkBgDnN.cjs → hashContent-Bobsobip.cjs} +0 -0
  378. /package/dist/{overlay-stack-CCiTaf_C.js → overlay-stack-DCDS17uj.js} +0 -0
  379. /package/dist/{overlay-stack-CFGiYf34.cjs → overlay-stack-DPIe_aYv.cjs} +0 -0
  380. /package/dist/{rxjs-utils-BXpvHN4-.js → rxjs-utils-BK8VMe3K.js} +0 -0
  381. /package/dist/{rxjs-utils-CaC-tdot.cjs → rxjs-utils-DhOKenkS.cjs} +0 -0
  382. /package/dist/{theme.interface-DESopuZS.cjs → theme.interface-BeW-sz_g.cjs} +0 -0
  383. /package/dist/{theme.interface-C_034TxG.js → theme.interface-v7SkAnDH.js} +0 -0
@@ -1,1607 +0,0 @@
1
- import { s as e } from "./mixins-B34UxxCe.js";
2
- import { t } from "./decorate-23nYs4Le.js";
3
- import { o as n } from "./overlay.service-BUCuZa6V.js";
4
- import { r } from "./notification-DB25M-qo.js";
5
- import { fromEvent as i, takeUntil as a } from "rxjs";
6
- import { customElement as o, property as s, state as c } from "lit/decorators.js";
7
- import { css as l, html as u } from "lit";
8
- import { createRef as d, ref as f } from "lit/directives/ref.js";
9
- import { repeat as p } from "lit/directives/repeat.js";
10
- import { when as m } from "lit/directives/when.js";
11
- var h = class extends e {
12
- constructor(...e) {
13
- super(...e), this.config = {}, this.templates = [], this.importSources = [], this.disabled = !1, this.recipientsTitle = "Recipients", this.recipientsEmptyTitle = "No recipients yet", this.recipientsEmptyMessage = "Import from sources or upload a CSV", this.enableCsvImport = !0, this.enableDragDrop = !0, this.recipients = [], this.selectedRecipients = [], this.subject = "", this.body = "", this.templateId = null, this.attachments = [], this.isSending = !1, this.handleEmailsImported = (e) => {
14
- let { emails: t } = e.detail, n = [...new Set([...this.recipients, ...t])], r = t.filter((e) => !this.recipients.includes(e));
15
- this.recipients = n, this.selectedRecipients = [...new Set([...this.selectedRecipients, ...r])], this.dispatchEvent(new CustomEvent("emails-imported", {
16
- detail: {
17
- emails: r,
18
- source: e.detail.source
19
- },
20
- bubbles: !0,
21
- composed: !0
22
- }));
23
- }, this.handleRecipientRemoved = (e) => {
24
- let { email: t } = e.detail;
25
- this.recipients = this.recipients.filter((e) => e !== t), this.selectedRecipients = this.selectedRecipients.filter((e) => e !== t), this.dispatchEvent(new CustomEvent("recipient-removed", {
26
- detail: { email: t },
27
- bubbles: !0,
28
- composed: !0
29
- }));
30
- }, this.handleRecipientsCleared = () => {
31
- this.recipients = [], this.selectedRecipients = [], this.dispatchEvent(new CustomEvent("recipients-cleared", {
32
- bubbles: !0,
33
- composed: !0
34
- }));
35
- }, this.handleSelectionChanged = (e) => {
36
- let { selectedEmails: t } = e.detail;
37
- this.selectedRecipients = t, this.dispatchEvent(new CustomEvent("selection-changed", {
38
- detail: { selectedEmails: t },
39
- bubbles: !0,
40
- composed: !0
41
- }));
42
- }, this.handleEditorChange = (e) => {
43
- let { subject: t, body: n, templateId: r, attachments: i } = e.detail;
44
- this.subject = t, this.body = n, this.templateId = r, this.attachments = i, this.dispatchEvent(new CustomEvent("compose-changed", {
45
- detail: {
46
- subject: t,
47
- body: n,
48
- templateId: r,
49
- attachments: i
50
- },
51
- bubbles: !0,
52
- composed: !0
53
- }));
54
- }, this.handleSend = async () => {
55
- if (this.selectedRecipients.length !== 0) if (this.subject.trim()) if (this.body.trim()) {
56
- this.isSending = !0;
57
- try {
58
- let e = {
59
- recipients: this.selectedRecipients,
60
- subject: this.subject,
61
- body: this.body,
62
- attachments: this.attachments,
63
- templateId: this.templateId
64
- };
65
- this.dispatchEvent(new CustomEvent("send-email", {
66
- detail: { request: e },
67
- bubbles: !0,
68
- composed: !0
69
- }));
70
- } catch (e) {
71
- this.dispatchEvent(new CustomEvent("send-error", {
72
- detail: { error: e instanceof Error ? e.message : "Failed to send email" },
73
- bubbles: !0,
74
- composed: !0
75
- }));
76
- } finally {
77
- this.isSending = !1;
78
- }
79
- } else this.dispatchEvent(new CustomEvent("send-error", {
80
- detail: { error: "Please enter a message body" },
81
- bubbles: !0,
82
- composed: !0
83
- }));
84
- else this.dispatchEvent(new CustomEvent("send-error", {
85
- detail: { error: "Please enter a subject" },
86
- bubbles: !0,
87
- composed: !0
88
- }));
89
- else this.dispatchEvent(new CustomEvent("send-error", {
90
- detail: { error: "Please select at least one recipient" },
91
- bubbles: !0,
92
- composed: !0
93
- }));
94
- };
95
- }
96
- static {
97
- this.styles = [l`
98
- :host {
99
- display: block;
100
- height: 100%;
101
- }
102
- `];
103
- }
104
- connectedCallback() {
105
- super.connectedCallback(), this.setSending(this.disabled);
106
- }
107
- updated(e) {
108
- super.updated(e), e.has("disabled") && this.setSending(this.disabled);
109
- }
110
- addRecipients(e) {
111
- let t = [...new Set([...this.recipients, ...e])], n = e.filter((e) => !this.recipients.includes(e));
112
- this.recipients = t, this.selectedRecipients = [...new Set([...this.selectedRecipients, ...n])];
113
- }
114
- setSubject(e) {
115
- this.subject = e;
116
- }
117
- setBody(e) {
118
- this.body = e;
119
- }
120
- setTemplate(e) {
121
- this.templateId = e;
122
- }
123
- clearCompose() {
124
- this.recipients = [], this.selectedRecipients = [], this.subject = "", this.body = "", this.templateId = null, this.attachments = [];
125
- }
126
- setSending(e) {
127
- this.isSending = e;
128
- }
129
- render() {
130
- let e = this.selectedRecipients.length > 0 && this.subject.trim() && this.body.trim() && !this.isSending && !this.disabled;
131
- return u`
132
- <!-- Main Layout Container -->
133
- <div class="flex flex-col h-full gap-6 p-6">
134
-
135
- <!-- Main Content Section: Composer and Preview -->
136
- <div class="flex flex-col xl:flex-row gap-6 flex-1 min-h-0">
137
-
138
- <!-- Composer Section - Full width on mobile/tablet, half on large screens -->
139
- <div class="w-full xl:w-1/2 min-h-0 flex flex-col">
140
- <schmancy-email-editor
141
- .subject=${this.subject}
142
- .body=${this.body}
143
- .templates=${this.templates}
144
- .attachments=${this.attachments}
145
- .disabled=${this.disabled}
146
- .config=${this.config}
147
- @editor-change=${this.handleEditorChange}
148
- class="h-full"
149
- ></schmancy-email-editor>
150
- </div>
151
-
152
- <!-- Preview Section - Full width on mobile/tablet, half on large screens -->
153
- <div class="w-full xl:w-1/2 min-h-0 flex flex-col">
154
- <schmancy-email-viewer
155
- .subject=${this.subject}
156
- .body=${this.body}
157
- .recipients=${this.selectedRecipients}
158
- .attachments=${this.attachments}
159
- class="h-full"
160
- ></schmancy-email-viewer>
161
- </div>
162
-
163
- </div>
164
-
165
- <!-- Send Section - Sticky bottom bar -->
166
- <div class="shrink-0">
167
- <schmancy-surface
168
- type="subtle"
169
- rounded="all"
170
- class="p-4"
171
- >
172
- <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
173
- <!-- Send Info -->
174
- <div class="flex flex-col gap-1">
175
- <schmancy-typography type="body" token="sm" class="font-medium">
176
- ${this.selectedRecipients.length} recipient${this.selectedRecipients.length === 1 ? "" : "s"} selected
177
- </schmancy-typography>
178
- ${m(this.attachments.length > 0, () => u`
179
- <schmancy-typography type="body" token="xs">
180
- ${this.attachments.length} attachment${this.attachments.length === 1 ? "" : "s"}
181
- </schmancy-typography>
182
- `)}
183
- </div>
184
-
185
- <!-- Send Button -->
186
- <schmancy-button
187
- variant="filled"
188
- ?disabled=${!e}
189
- @click=${this.handleSend}
190
- class="w-full sm:w-auto"
191
- >
192
- <schmancy-icon slot="prefix" size="18px">send</schmancy-icon>
193
- ${this.isSending ? "Sending..." : "Send Email"}
194
- </schmancy-button>
195
- </div>
196
- </schmancy-surface>
197
- </div>
198
-
199
- </div>
200
-
201
- <!-- Recipients Panel as Floating Boat -->
202
- <schmancy-email-recipients
203
- .recipients=${this.recipients}
204
- .selectedRecipients=${this.selectedRecipients}
205
- .importSources=${this.importSources}
206
- .disabled=${this.disabled}
207
- .enableCsvImport=${this.enableCsvImport}
208
- .enableDragDrop=${this.enableDragDrop}
209
- .title=${this.recipientsTitle}
210
- .emptyStateTitle=${this.recipientsEmptyTitle}
211
- .emptyStateMessage=${this.recipientsEmptyMessage}
212
- @emails-imported=${this.handleEmailsImported}
213
- @recipient-removed=${this.handleRecipientRemoved}
214
- @recipients-cleared=${this.handleRecipientsCleared}
215
- @selection-changed=${this.handleSelectionChanged}
216
- ></schmancy-email-recipients>
217
- `;
218
- }
219
- };
220
- t([s({ type: Object })], h.prototype, "config", void 0), t([s({ type: Array })], h.prototype, "templates", void 0), t([s({ type: Array })], h.prototype, "importSources", void 0), t([s({ type: Boolean })], h.prototype, "disabled", void 0), t([s({ type: String })], h.prototype, "recipientsTitle", void 0), t([s({ type: String })], h.prototype, "recipientsEmptyTitle", void 0), t([s({ type: String })], h.prototype, "recipientsEmptyMessage", void 0), t([s({ type: Boolean })], h.prototype, "enableCsvImport", void 0), t([s({ type: Boolean })], h.prototype, "enableDragDrop", void 0), t([c()], h.prototype, "recipients", void 0), t([c()], h.prototype, "selectedRecipients", void 0), t([c()], h.prototype, "subject", void 0), t([c()], h.prototype, "body", void 0), t([c()], h.prototype, "templateId", void 0), t([c()], h.prototype, "attachments", void 0), t([c()], h.prototype, "isSending", void 0), h = t([o("schmancy-mailbox")], h);
221
- var g = class extends e {
222
- constructor(...e) {
223
- super(...e), this.layouts = [
224
- {
225
- id: "columns-2",
226
- icon: "view_week",
227
- label: "2 Col"
228
- },
229
- {
230
- id: "columns-3",
231
- icon: "view_column",
232
- label: "3 Col"
233
- },
234
- {
235
- id: "sidebar-left",
236
- icon: "view_sidebar",
237
- label: "Left"
238
- },
239
- {
240
- id: "sidebar-right",
241
- icon: "view_sidebar",
242
- label: "Right",
243
- flipped: !0
244
- },
245
- {
246
- id: "image-row",
247
- icon: "collections",
248
- label: "Images"
249
- }
250
- ];
251
- }
252
- selectLayout(e) {
253
- this.dispatchEvent(new CustomEvent("layout-select", {
254
- detail: { layout: e },
255
- bubbles: !0,
256
- composed: !0
257
- }));
258
- }
259
- render() {
260
- return u`
261
- <div class="grid p-3 gap-2">
262
- ${this.layouts.map((e) => u`
263
- <schmancy-button
264
- variant="outlined"
265
- @click=${() => this.selectLayout(e.id)}
266
- >
267
- <schmancy-icon
268
- slot="prefix"
269
- size="20px"
270
- class=${e.flipped ? "scale-x-[-1]" : ""}
271
- >
272
- ${e.icon}
273
- </schmancy-icon>
274
- ${e.label}
275
- </schmancy-button>
276
- `)}
277
- </div>
278
- `;
279
- }
280
- };
281
- g = t([o("schmancy-email-layout-selector")], g);
282
- var _ = class extends e {
283
- constructor(...e) {
284
- super(...e), this.templates = [], this.searchQuery = "", this.filteredTemplates = [], this.selectedCategory = "all", this.handleSearch = (e) => {
285
- let t = e.target;
286
- this.searchQuery = t.value;
287
- }, this.handleCategorySelect = (e) => {
288
- this.selectedCategory = e, this.updateFilteredTemplates();
289
- }, this.selectTemplate = (e) => {
290
- this.dispatchEvent(new CustomEvent("template-selected", {
291
- detail: e,
292
- bubbles: !0,
293
- composed: !0
294
- })), this.dispatchEvent(new CustomEvent("close", {
295
- detail: e,
296
- bubbles: !0,
297
- composed: !0
298
- }));
299
- }, this.close = () => {
300
- this.dispatchEvent(new CustomEvent("close", {
301
- bubbles: !0,
302
- composed: !0
303
- }));
304
- };
305
- }
306
- static {
307
- this.styles = [l`
308
- :host {
309
- display: block;
310
- }
311
- `];
312
- }
313
- connectedCallback() {
314
- super.connectedCallback(), this.updateFilteredTemplates();
315
- }
316
- updated(e) {
317
- (e.has("templates") || e.has("searchQuery") || e.has("selectedCategory")) && this.updateFilteredTemplates();
318
- }
319
- get categories() {
320
- let e = /* @__PURE__ */ new Set();
321
- return this.templates.forEach((t) => {
322
- t.category && e.add(t.category);
323
- }), ["all", ...Array.from(e)];
324
- }
325
- updateFilteredTemplates() {
326
- let e = [...this.templates];
327
- if (this.selectedCategory !== "all" && (e = e.filter((e) => e.category === this.selectedCategory)), this.searchQuery.trim()) {
328
- let t = this.searchQuery.toLowerCase();
329
- e = e.filter((e) => e.name.toLowerCase().includes(t) || e.category?.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t));
330
- }
331
- this.filteredTemplates = e;
332
- }
333
- render() {
334
- return u`
335
- <div class="flex flex-col h-full overflow-hidden">
336
- <!-- Header -->
337
- <div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant">
338
- <div class="flex items-center gap-3">
339
- <schmancy-icon size="24px" class="text-primary">mail</schmancy-icon>
340
- <schmancy-typography type="headline" token="md">
341
- Choose Email Template
342
- </schmancy-typography>
343
- </div>
344
- <schmancy-button
345
- variant="text"
346
- @click=${this.close}
347
- class="hover:bg-surface-container rounded-full w-10 h-10 p-0"
348
- >
349
- <schmancy-icon>close</schmancy-icon>
350
- </schmancy-button>
351
- </div>
352
-
353
- <!-- Body -->
354
- <div class="flex-1 flex flex-col overflow-hidden">
355
- ${this.renderTemplateList()}
356
- </div>
357
- </div>
358
- `;
359
- }
360
- renderTemplateList() {
361
- return u`
362
- <!-- Search and Filter Bar -->
363
- <div class="px-6 py-4 border-b border-outline-variant bg-surface-containerLow">
364
- <div class="flex flex-col gap-4">
365
- <!-- Search Input -->
366
- <schmancy-input
367
- type="search"
368
- placeholder="Search templates..."
369
- .value=${this.searchQuery}
370
- @input=${this.handleSearch}
371
- class="w-full"
372
- >
373
- <schmancy-icon slot="prefix" size="20px" class="text-surface-onVariant">search</schmancy-icon>
374
- ${m(this.searchQuery, () => u`
375
- <schmancy-button
376
- slot="suffix"
377
- variant="text"
378
- @click=${() => {
379
- this.searchQuery = "";
380
- }}
381
- class="rounded-full w-8 h-8 p-0"
382
- >
383
- <schmancy-icon size="16px">close</schmancy-icon>
384
- </schmancy-button>
385
- `)}
386
- </schmancy-input>
387
-
388
- <!-- Category Filter -->
389
- ${m(this.categories.length > 1, () => u`
390
- <div class="flex gap-2 flex-wrap">
391
- ${p(this.categories, (e) => e, (e) => u`
392
- <schmancy-chip
393
- class="cursor-pointer transition-all hover:shadow-sm ${this.selectedCategory === e ? "bg-primary text-primary-on" : "border border-outline"}"
394
- @click=${() => this.handleCategorySelect(e)}
395
- >
396
- ${e === "all" ? "All Templates" : e}
397
- </schmancy-chip>
398
- `)}
399
- </div>
400
- `)}
401
- </div>
402
- </div>
403
-
404
- <!-- Template List with Previews -->
405
- <div class="flex-1 overflow-y-auto px-6 py-6">
406
- ${m(this.filteredTemplates.length > 0, () => u`
407
- <div class="space-y-6">
408
- ${p(this.filteredTemplates, (e) => e.id, (e) => u`
409
- <schmancy-surface
410
- type="subtle"
411
- elevation="1"
412
- rounded="all"
413
- class="group cursor-pointer hover:elevation-3 transition-all duration-200 overflow-hidden"
414
- @click=${() => this.selectTemplate(e)}
415
- >
416
- <!-- Template Header -->
417
- <div class="p-4 border-b border-outline-variant">
418
- <div class="flex items-start justify-between">
419
- <div class="flex-1">
420
- <schmancy-typography type="title" token="md" class="font-semibold leading-tight mb-1">
421
- ${e.name}
422
- </schmancy-typography>
423
- ${m(e.category, () => u`
424
- <schmancy-chip class="text-xs border border-outline">
425
- ${e.category}
426
- </schmancy-chip>
427
- `)}
428
- </div>
429
- <schmancy-button
430
- variant="filled"
431
- size="sm"
432
- class="opacity-0 group-hover:opacity-100 transition-opacity"
433
- >
434
- Use This
435
- </schmancy-button>
436
- </div>
437
- </div>
438
-
439
- <!-- Email Preview -->
440
- <div class="p-4 bg-surface">
441
- <schmancy-email-viewer
442
- subject=${e.subject}
443
- body=${e.body}
444
- class="max-h-96 overflow-y-auto"
445
- ></schmancy-email-viewer>
446
- </div>
447
- </schmancy-surface>
448
- `)}
449
- </div>
450
- `, () => u`
451
- <div class="flex flex-col items-center justify-center h-96 text-center">
452
- <div class="mb-6">
453
- <schmancy-icon size="64px" class="text-surface-onVariant opacity-20">mail_outline</schmancy-icon>
454
- </div>
455
- <schmancy-typography type="headline" token="sm" class="mb-2">
456
- ${this.searchQuery || this.selectedCategory !== "all" ? "No templates found" : "No templates available"}
457
- </schmancy-typography>
458
- <schmancy-typography type="body" token="md" class="text-surface-onVariant mb-6 max-w-md">
459
- ${this.searchQuery ? `No templates match your search for "${this.searchQuery}"` : this.selectedCategory === "all" ? "Start by creating your first email template" : `No templates found in the "${this.selectedCategory}" category`}
460
- </schmancy-typography>
461
- ${m(this.searchQuery || this.selectedCategory !== "all", () => u`
462
- <div class="flex gap-3">
463
- ${m(this.searchQuery, () => u`
464
- <schmancy-button
465
- variant="outlined"
466
- @click=${() => {
467
- this.searchQuery = "";
468
- }}
469
- >
470
- <schmancy-icon slot="prefix">clear</schmancy-icon>
471
- Clear Search
472
- </schmancy-button>
473
- `)}
474
- ${m(this.selectedCategory !== "all", () => u`
475
- <schmancy-button
476
- variant="filled"
477
- @click=${() => this.handleCategorySelect("all")}
478
- >
479
- <schmancy-icon slot="prefix">view_list</schmancy-icon>
480
- Show All Templates
481
- </schmancy-button>
482
- `)}
483
- </div>
484
- `)}
485
- </div>
486
- `)}
487
- </div>
488
- `;
489
- }
490
- };
491
- t([s({ type: Array })], _.prototype, "templates", void 0), t([c()], _.prototype, "searchQuery", void 0), t([c()], _.prototype, "filteredTemplates", void 0), t([c()], _.prototype, "selectedCategory", void 0), _ = t([o("schmancy-email-template-picker")], _);
492
- var v = class extends e {
493
- constructor(...e) {
494
- super(...e), this.subject = "", this.body = "", this.disabled = !1, this.attachments = [], this.config = {}, this.templates = this.getDefaultTemplates(), this.dragOver = !1, this.isUploading = !1, this.subjectInputRef = d(), this.bodyTextAreaRef = d(), this.fileInputRef = d(), this.imageInputRef = d(), this.handleKeyDown = (e) => {
495
- if (this.disabled) return;
496
- let t = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
497
- e.key === "Tab" && e.target === t && (e.preventDefault(), this.insertAtCursor(" "));
498
- }, this.handlePaste = (e) => {
499
- let t = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
500
- if (this.disabled || document.activeElement !== t) return;
501
- let n = e.clipboardData?.items;
502
- if (n) for (let t = 0; t < n.length; t++) {
503
- let r = n[t];
504
- if (r.type.indexOf("image") !== -1) {
505
- e.preventDefault();
506
- let t = r.getAsFile();
507
- t && this.uploadImage(t);
508
- break;
509
- }
510
- }
511
- }, this.handleSubjectChange = (e) => {
512
- let t = e.target;
513
- this.subject = t.value, this.dispatchChange();
514
- }, this.handleBodyChange = (e) => {
515
- this.body = e.detail.value, this.dispatchChange();
516
- }, this.dispatchChange = () => {
517
- this.dispatchEvent(new CustomEvent("editor-change", {
518
- detail: {
519
- subject: this.subject,
520
- body: this.body,
521
- attachments: this.attachments
522
- },
523
- bubbles: !0,
524
- composed: !0
525
- }));
526
- }, this.openLayoutDialog = () => {
527
- n(u`
528
- <schmancy-email-layout-selector
529
- @layout-select=${(e) => {
530
- e.currentTarget?.dispatchEvent(new CustomEvent("close", {
531
- detail: e.detail.layout,
532
- bubbles: !0,
533
- composed: !0
534
- }));
535
- }}
536
- ></schmancy-email-layout-selector>
537
- `).pipe(a(this.disconnecting)).subscribe((e) => {
538
- e && this.applyLayout(e);
539
- });
540
- }, this.openTemplatePicker = () => {
541
- n(_, { props: { templates: this.templates } }).pipe(a(this.disconnecting)).subscribe((e) => {
542
- e && this.handleTemplateSelected(e);
543
- });
544
- }, this.handleTemplateSelected = (e) => {
545
- this.subject = e.subject, this.body = e.body, this.dispatchChange(), r.success(`Template "${e.name}" applied successfully`);
546
- }, this.applyLayout = (e) => {
547
- let t = {
548
- "columns-2": "\n:::layout columns-2\n<div class=\"column\">\n![Left Photo](https://via.placeholder.com/400x300?text=Replace+with+your+photo){height=300px}\n\n**Photo Title**\n\nReplace the placeholder image above with your own photo. The height=300px ensures both images have equal height while width adjusts automatically.\n</div>\n\n<div class=\"column\">\n![Right Photo](https://via.placeholder.com/400x300?text=Replace+with+your+photo){height=300px}\n\n**Photo Title**\n\nUse the same height value (300px) for both images to keep them aligned perfectly side by side.\n</div>\n:::\n",
549
- "columns-3": "\n:::layout columns-3\n<div class=\"column\">\n![Photo 1](https://via.placeholder.com/300x200?text=Photo+1){height=200px}\n\n**Item Title**\n\nBrief description or caption for this item.\n</div>\n\n<div class=\"column\">\n![Photo 2](https://via.placeholder.com/300x200?text=Photo+2){height=200px}\n\n**Item Title**\n\nBrief description or caption for this item.\n</div>\n\n<div class=\"column\">\n![Photo 3](https://via.placeholder.com/300x200?text=Photo+3){height=200px}\n\n**Item Title**\n\nBrief description or caption for this item.\n</div>\n:::\n",
550
- "sidebar-left": "\n:::layout sidebar-left\n<div class=\"sidebar\">\n**Sidebar Content**\n\n* Navigation item 1\n* Navigation item 2\n* Navigation item 3\n</div>\n\n<div class=\"main\">\n**Main Content Area**\n\nYour primary content goes here. This area takes up most of the width while the sidebar provides supplementary information or navigation.\n</div>\n:::\n",
551
- "sidebar-right": "\n:::layout sidebar-right\n<div class=\"main\">\n**Main Content Area**\n\nYour primary content goes here. This area takes up most of the width while the sidebar provides supplementary information or navigation.\n</div>\n\n<div class=\"sidebar\">\n**Sidebar Content**\n\n* Quick links\n* Related info\n* Contact details\n</div>\n:::\n",
552
- "image-row": "\n:::layout image-row\n<div class=\"image\">\n![Gallery Image 1](https://via.placeholder.com/400x250?text=Gallery+Image+1){height=250px}\n</div>\n\n<div class=\"image\">\n![Gallery Image 2](https://via.placeholder.com/400x250?text=Gallery+Image+2){height=250px}\n</div>\n\n<div class=\"image\">\n![Gallery Image 3](https://via.placeholder.com/400x250?text=Gallery+Image+3){height=250px}\n</div>\n:::\n"
553
- }[e];
554
- t && this.insertAtCursor(t);
555
- }, this.uploadImage = async (e) => {
556
- if (e.type.startsWith("image/")) if (e.size > 10485760) r.error(`Image "${e.name}" is too large. Maximum size is 10MB.`);
557
- else {
558
- this.isUploading = !0;
559
- try {
560
- let t;
561
- this.config.imageUploadHandler ? t = await this.config.imageUploadHandler(e) : this.config.uploadHandler ? t = await this.config.uploadHandler(e) : (t = await this.createDataUrl(e), r.warning("No upload handler configured. Using local preview."));
562
- let n = await this.getImageDimensions(e);
563
- this.insertImageMarkdown(t, e.name, n.width, n.height), r.success("Image uploaded successfully");
564
- } catch {
565
- r.error("Failed to upload image");
566
- } finally {
567
- this.isUploading = !1;
568
- }
569
- }
570
- else r.error(`File "${e.name}" is not an image`);
571
- }, this.createDataUrl = (e) => new Promise((t, n) => {
572
- let r = new FileReader();
573
- r.addEventListener("load", () => t(r.result), { once: !0 }), r.addEventListener("error", () => n(r.error), { once: !0 }), r.readAsDataURL(e);
574
- }), this.getImageDimensions = (e) => new Promise((t) => {
575
- let n = new Image();
576
- n.addEventListener("load", () => {
577
- t({
578
- width: n.width,
579
- height: n.height
580
- }), URL.revokeObjectURL(n.src);
581
- }, { once: !0 }), n.addEventListener("error", () => {
582
- t({
583
- width: 400,
584
- height: 300
585
- }), URL.revokeObjectURL(n.src);
586
- }, { once: !0 }), n.src = URL.createObjectURL(e);
587
- }), this.insertImageMarkdown = (e, t, n, r) => {
588
- let i = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
589
- if (!i) return;
590
- let a = `![${t}](${e}){width=${Math.min(n, 600)}px height=auto}`, o = i.selectionStart, s = i.selectionEnd, c = this.body.substring(0, o) + a + this.body.substring(s);
591
- this.body = c, this.dispatchChange(), this.updateComplete.then(() => {
592
- let e = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
593
- if (e) {
594
- let t = o + a.length;
595
- e.setSelectionRange(t, t), e.focus();
596
- }
597
- });
598
- }, this.handleFileChange = (e) => {
599
- let t = e.target, n = t.files;
600
- if (n) for (let e = 0; e < n.length; e++) {
601
- let t = n[e];
602
- t.type.startsWith("image/") ? this.uploadImage(t) : this.addFile(t);
603
- }
604
- t.value = "";
605
- }, this.handleImageSelect = (e) => {
606
- let t = e.target, n = t.files?.[0];
607
- n && n.type.startsWith("image/") && this.uploadImage(n), t.value = "";
608
- }, this.handleDrop = (e) => {
609
- e.preventDefault(), this.dragOver = !1;
610
- let t = e.dataTransfer?.files;
611
- if (t) for (let e = 0; e < t.length; e++) {
612
- let n = t[e];
613
- n.type.startsWith("image/") ? this.uploadImage(n) : this.addFile(n);
614
- }
615
- }, this.handleDragEnter = (e) => {
616
- e.preventDefault(), this.dragOver = !0;
617
- }, this.handleDocumentDragLeave = (e) => {
618
- e.preventDefault(), this.dragOver = !1;
619
- }, this.handleDocumentDrop = (e) => {
620
- e.preventDefault(), this.dragOver = !1;
621
- }, this.handleDragOver = (e) => {
622
- e.preventDefault();
623
- }, this.handleDragLeave = (e) => {
624
- e.preventDefault();
625
- }, this.addFile = (e) => {
626
- if (e.size > 10485760) return void r.error(`File "${e.name}" is too large. Maximum size is 10MB.`);
627
- if (this.attachments.some((t) => t.name === e.name && t.size === e.size)) return void r.warning(`File "${e.name}" is already attached.`);
628
- let t = {
629
- id: crypto.randomUUID(),
630
- file: e,
631
- name: e.name,
632
- size: e.size,
633
- type: e.type || "application/octet-stream"
634
- };
635
- this.attachments = [...this.attachments, t], this.dispatchChange();
636
- }, this.removeAttachment = (e) => {
637
- this.attachments = this.attachments.filter((t) => t.id !== e), this.dispatchChange();
638
- };
639
- }
640
- static {
641
- this.styles = [l`
642
- :host {
643
- display: block;
644
- height: 100%;
645
- }
646
- `];
647
- }
648
- connectedCallback() {
649
- super.connectedCallback(), this.addEventListeners();
650
- }
651
- disconnectedCallback() {
652
- super.disconnectedCallback();
653
- }
654
- getDefaultTemplates() {
655
- return [
656
- {
657
- id: "welcome",
658
- name: "Welcome Email",
659
- subject: "Welcome to Our Community! 🌟",
660
- description: "A warm welcome message for new users",
661
- category: "onboarding",
662
- body: "# Welcome to Our Community!\n\nWe're thrilled to have you on board. Thank you for joining us on this journey.\n\n## What's Next?\n\n* **Explore** your dashboard and discover all the features\n* **Connect** with other community members\n* **Get support** whenever you need it - we're here to help\n\n---\n\n*Need assistance? Simply reply to this email and we'll get back to you within 24 hours.*\n\nBest regards, \nThe Team"
663
- },
664
- {
665
- id: "newsletter",
666
- name: "Newsletter",
667
- subject: "Weekly Insights & Updates",
668
- description: "Regular newsletter template with updates and insights",
669
- category: "communication",
670
- body: "# This Week's Highlights\n\n## Featured Story\n\n**[Article Title]** \nBrief description of the main story or update that you want to highlight this week.\n\n[Read More](https://example.com)\n\n## Quick Updates\n\n* **Update 1**: Brief description of an important update\n* **Update 2**: Another noteworthy development\n* **Update 3**: Additional news worth sharing\n\n## Upcoming Events\n\n**[Event Name]** - *Date* \nShort description of the upcoming event.\n\n---\n\n*Thanks for reading! Forward this to a friend who might enjoy it.*\n\nUntil next week, \nThe Team"
671
- },
672
- {
673
- id: "product-launch",
674
- name: "Product Launch",
675
- subject: "Introducing Our Latest Innovation 🚀",
676
- description: "Announce new products or features",
677
- category: "marketing",
678
- body: "# Something Amazing is Here\n\nWe've been working hard behind the scenes, and today we're excited to introduce our latest creation.\n\n## Key Features\n\n* **Feature 1**: Benefit that matters to your users\n* **Feature 2**: Another compelling capability\n* **Feature 3**: The feature that sets you apart\n\n## Early Access\n\nAs a valued member, you get **exclusive early access** starting today.\n\n[Get Started Now](https://example.com)\n\n---\n\n*Questions? We'd love to hear from you. Just hit reply!*\n\nBest, \nThe Product Team"
679
- },
680
- {
681
- id: "event-invitation",
682
- name: "Event Invitation",
683
- subject: "You're Invited: [Event Name]",
684
- description: "Professional event invitation template",
685
- category: "events",
686
- body: "# You're Invited!\n\n## [Event Name]\n\n**When**: [Date & Time] \n**Where**: [Location or Virtual Link] \n**Duration**: [Duration]\n\nJoin us for an exclusive gathering where we'll explore [brief event description].\n\n## What to Expect\n\n* **Networking** with industry professionals\n* **Insights** from leading experts\n* **Interactive** sessions and discussions\n\n## RSVP Required\n\nSpace is limited, so please confirm your attendance by [RSVP Date].\n\n[Confirm Attendance](https://example.com)\n\n---\n\n*Can't make it? Let us know and we'll share the key highlights with you.*\n\nLooking forward to seeing you there, \nThe Events Team"
687
- },
688
- {
689
- id: "thank-you",
690
- name: "Thank You",
691
- subject: "Thank You - It Means Everything",
692
- description: "Express gratitude to customers or supporters",
693
- category: "appreciation",
694
- body: "# Thank You\n\nYour support means the world to us.\n\nWhether you've been with us from the beginning or just joined our community, we want you to know how much we appreciate you.\n\n## Because of You\n\n* We've been able to improve our service\n* Our community has grown stronger\n* We've achieved milestones we never thought possible\n\n## What's Next\n\nWe're committed to continuing to earn your trust and providing even more value in the coming months.\n\n---\n\n*Your feedback shapes everything we do. Reply anytime with thoughts or suggestions.*\n\nWith genuine gratitude, \nThe Team"
695
- },
696
- {
697
- id: "feedback-request",
698
- name: "Feedback Request",
699
- subject: "Your Opinion Matters - 2 Minutes?",
700
- description: "Request feedback or reviews from users",
701
- category: "feedback",
702
- body: "# We'd Love Your Feedback\n\nYour experience matters to us, and we're always looking for ways to improve.\n\n## Quick Favor?\n\nCould you spare **2 minutes** to share your thoughts? Your honest feedback helps us serve you better.\n\n[Share Your Feedback](https://example.com)\n\n## What We're Asking\n\n* How has your experience been so far?\n* What's working well for you?\n* What could we improve?\n\n## Thank You Gift\n\nAs a small token of appreciation, everyone who completes our feedback form receives [incentive].\n\n---\n\n*Every response is read personally by our team. We take your input seriously.*\n\nThanks in advance, \nThe Team"
703
- },
704
- {
705
- id: "password-reset",
706
- name: "Password Reset",
707
- subject: "Reset Your Password - Action Required",
708
- description: "Secure password reset instructions",
709
- category: "security",
710
- body: "# Password Reset Request\n\nWe received a request to reset the password for your account.\n\n## Reset Your Password\n\nClick the button below to create a new password. This link will expire in **24 hours** for your security.\n\n[Reset Password](https://example.com/reset)\n\n## Didn't Request This?\n\nIf you didn't request a password reset, please ignore this email. Your account remains secure.\n\n## Need Help?\n\nIf you're having trouble with the reset process, contact our support team and we'll assist you right away.\n\n---\n\n*For security reasons, this link can only be used once and expires in 24 hours.*\n\nBest regards, \nSecurity Team"
711
- },
712
- {
713
- id: "order-confirmation",
714
- name: "Order Confirmation",
715
- subject: "Order Confirmed - #[ORDER-NUMBER]",
716
- description: "Professional order confirmation template",
717
- category: "commerce",
718
- body: "# Order Confirmation\n\nThanks for your order! We've received your payment and are preparing your items for shipment.\n\n## Order Details\n\n**Order Number**: #[ORDER-NUMBER] \n**Order Date**: [DATE] \n**Total**: $[AMOUNT]\n\n## Items Ordered\n\n* **[Item 1]** - Quantity: [QTY] - $[PRICE]\n* **[Item 2]** - Quantity: [QTY] - $[PRICE]\n\n## Shipping Information\n\n**Address**: [SHIPPING ADDRESS] \n**Method**: [SHIPPING METHOD] \n**Estimated Delivery**: [DELIVERY DATE]\n\n## Next Steps\n\nYou'll receive a tracking number via email once your order ships (usually within 1-2 business days).\n\n[Track Your Order](https://example.com/track)\n\n---\n\n*Questions about your order? Reply to this email or contact our support team.*\n\nThank you for your business, \nThe Fulfillment Team"
719
- }
720
- ];
721
- }
722
- addEventListeners() {
723
- i(this, "keydown").pipe(a(this.disconnecting)).subscribe(this.handleKeyDown), i(document, "paste").pipe(a(this.disconnecting)).subscribe(this.handlePaste), i(document, "dragenter").pipe(a(this.disconnecting)).subscribe(this.handleDragEnter), i(document, "dragleave").pipe(a(this.disconnecting)).subscribe(this.handleDocumentDragLeave), i(document, "drop").pipe(a(this.disconnecting)).subscribe(this.handleDocumentDrop);
724
- }
725
- insertAtCursor(e, t) {
726
- if (!this.bodyTextAreaRef.value) return;
727
- let n = this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");
728
- if (!n) return;
729
- let r = n.selectionStart, i = n.selectionEnd, a = n.value.substring(0, r) + e + n.value.substring(i);
730
- this.body = a, this.dispatchChange(), this.updateComplete.then(() => {
731
- let n = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
732
- if (n) if (n.focus(), t) {
733
- let i = r + e.indexOf(t), a = i + t.length;
734
- n.setSelectionRange(i, a);
735
- } else n.setSelectionRange(r + e.length, r + e.length);
736
- });
737
- }
738
- wrapSelection(e, t, n) {
739
- if (!this.bodyTextAreaRef.value) return;
740
- let r = this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");
741
- if (!r) return;
742
- let i = r.selectionStart, a = r.selectionEnd, o = r.value.substring(i, a), s = e + (o || n) + t, c = r.value.substring(0, i) + s + r.value.substring(a);
743
- this.body = c, this.dispatchChange(), this.updateComplete.then(() => {
744
- let t = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
745
- t && (t.focus(), o ? t.setSelectionRange(i + s.length, i + s.length) : t.setSelectionRange(i + e.length, i + e.length + n.length));
746
- });
747
- }
748
- render() {
749
- return u`
750
- <schmancy-surface
751
- type="solid"
752
- rounded="all"
753
- class=${this.classMap({
754
- "border-2 border-dashed border-primary": this.dragOver,
755
- "h-full flex flex-col": !0
756
- })}
757
- @drop=${this.handleDrop}
758
- @dragover=${this.handleDragOver}
759
- @dragleave=${this.handleDragLeave}
760
- >
761
- <div class="flex flex-col h-full gap-4">
762
-
763
- <!-- Header Section with Subject -->
764
- <div class="shrink-0 p-4 pb-0 space-y-4">
765
- <!-- Subject Field -->
766
- <div class="space-y-2">
767
- <schmancy-typography type="label" token="md">
768
- Subject *
769
- </schmancy-typography>
770
- <schmancy-input
771
- ${f(this.subjectInputRef)}
772
- .value=${this.subject}
773
- @input=${this.handleSubjectChange}
774
- placeholder="Enter email subject..."
775
- .disabled=${this.disabled}
776
- class="w-full"
777
- ></schmancy-input>
778
- </div>
779
- </div>
780
-
781
- <!-- Formatting Toolbar -->
782
- <div class="shrink-0 px-4">
783
- <schmancy-surface type="subtle" rounded="all" class="p-3">
784
- <div class="flex flex-wrap gap-2 items-center">
785
- <!-- Text Formatting Group -->
786
- <div class="flex gap-1">
787
- <schmancy-icon-button
788
- size="sm"
789
- variant="text"
790
- title="Bold"
791
- ?disabled=${this.disabled}
792
- @click=${() => this.wrapSelection("**", "**", "bold text")}
793
- >
794
- <schmancy-icon>format_bold</schmancy-icon>
795
- </schmancy-icon-button>
796
- <schmancy-icon-button
797
- size="sm"
798
- variant="text"
799
- title="Italic"
800
- ?disabled=${this.disabled}
801
- @click=${() => this.wrapSelection("*", "*", "italic text")}
802
- >
803
- <schmancy-icon>format_italic</schmancy-icon>
804
- </schmancy-icon-button>
805
- <schmancy-icon-button
806
- size="sm"
807
- variant="text"
808
- title="Link"
809
- ?disabled=${this.disabled}
810
- @click=${() => this.insertAtCursor("[link text](https://example.com)", "link text")}
811
- >
812
- <schmancy-icon>link</schmancy-icon>
813
- </schmancy-icon-button>
814
- </div>
815
-
816
- <!-- Divider -->
817
- <div class="h-6 w-px bg-outline-variant"></div>
818
-
819
- <!-- Structure Formatting Group -->
820
- <div class="flex gap-1">
821
- <schmancy-icon-button
822
- size="sm"
823
- variant="text"
824
- title="Heading"
825
- ?disabled=${this.disabled}
826
- @click=${() => this.insertAtCursor("\n# Heading\n", "Heading")}
827
- >
828
- <schmancy-icon>title</schmancy-icon>
829
- </schmancy-icon-button>
830
- <schmancy-icon-button
831
- size="sm"
832
- variant="text"
833
- title="Bullet List"
834
- ?disabled=${this.disabled}
835
- @click=${() => this.insertAtCursor("\n* List item\n", "List item")}
836
- >
837
- <schmancy-icon>format_list_bulleted</schmancy-icon>
838
- </schmancy-icon-button>
839
- </div>
840
-
841
- <!-- Divider -->
842
- <div class="h-6 w-px bg-outline-variant"></div>
843
-
844
- <!-- Media and Layout Group -->
845
- <div class="flex gap-1">
846
- <schmancy-icon-button
847
- size="sm"
848
- variant="text"
849
- title="Insert Image"
850
- ?disabled=${this.disabled || this.isUploading}
851
- @click=${() => this.imageInputRef.value?.click()}
852
- >
853
- ${m(this.isUploading, () => u`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`, () => u`<schmancy-icon>image</schmancy-icon>`)}
854
- </schmancy-icon-button>
855
- <schmancy-icon-button
856
- size="sm"
857
- variant="text"
858
- title="Insert Layout"
859
- ?disabled=${this.disabled}
860
- @click=${this.openLayoutDialog}
861
- >
862
- <schmancy-icon>mobile_layout</schmancy-icon>
863
- </schmancy-icon-button>
864
- <schmancy-icon-button
865
- size="sm"
866
- variant="text"
867
- title="Use Template"
868
- ?disabled=${this.disabled || this.templates.length === 0}
869
- @click=${this.openTemplatePicker}
870
- >
871
- <schmancy-icon>description</schmancy-icon>
872
- </schmancy-icon-button>
873
- </div>
874
- </div>
875
- </schmancy-surface>
876
- </div>
877
-
878
- <!-- Textarea Container - Takes remaining space -->
879
- <div class="flex-1 px-4 relative min-h-0">
880
- <schmancy-textarea
881
- ${f(this.bodyTextAreaRef)}
882
- .value=${this.body}
883
- @change=${this.handleBodyChange}
884
- placeholder="Enter your email message here...
885
-
886
- Use the toolbar buttons above for formatting, or type markdown directly:
887
- **bold**, *italic*, [link](url), ![image](url)
888
-
889
- Drag & drop images or press Ctrl+V to paste from clipboard.
890
- Tab key inserts 2 spaces for better formatting."
891
- .disabled=${this.disabled}
892
- .required=${!0}
893
- .rows=${4}
894
- class="w-full font-mono text-sm"
895
- ></schmancy-textarea>
896
-
897
- <!-- Upload Progress Overlay -->
898
- ${m(this.isUploading, () => u`
899
- <div class="absolute top-3 right-3 z-10">
900
- <schmancy-surface type="subtle" rounded="all" class="p-2">
901
- <div class="flex items-center gap-2">
902
- <schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>
903
- <schmancy-typography type="body" token="xs">Uploading...</schmancy-typography>
904
- </div>
905
- </schmancy-surface>
906
- </div>
907
- `)}
908
- </div>
909
-
910
- <!-- Footer Section -->
911
- <div class="shrink-0 p-4 pt-0 space-y-2">
912
- <!-- Character/Word Counter -->
913
- <div class="text-center">
914
- <schmancy-typography type="body" token="xs">
915
- ${this.body.length} characters • ${this.body.trim() ? this.body.trim().split(/\s+/).length : 0} words
916
- </schmancy-typography>
917
- </div>
918
-
919
- <!-- Attachments Display (if any) -->
920
- ${m(this.attachments.length > 0, () => u`
921
- <div class="space-y-2">
922
- <schmancy-typography type="label" token="sm" class="flex items-center gap-2">
923
- <schmancy-icon size="16px">attach_file</schmancy-icon>
924
- Attachments (${this.attachments.length})
925
- </schmancy-typography>
926
- <div class="flex flex-wrap gap-2">
927
- ${p(this.attachments, (e) => e.id, (e) => u`
928
- <schmancy-chip class="text-xs">
929
- <span class="truncate max-w-32">${e.name}</span>
930
- <button
931
- @click=${() => this.removeAttachment(e.id)}
932
- class="ml-2 text-error hover:text-error-container"
933
- title="Remove attachment"
934
- >
935
- <schmancy-icon size="14px">close</schmancy-icon>
936
- </button>
937
- </schmancy-chip>
938
- `)}
939
- </div>
940
- </div>
941
- `)}
942
- </div>
943
-
944
- <!-- Hidden File Inputs -->
945
- <div class="hidden">
946
- <input
947
- ${f(this.fileInputRef)}
948
- type="file"
949
- multiple
950
- @change=${this.handleFileChange}
951
- >
952
- <input
953
- ${f(this.imageInputRef)}
954
- type="file"
955
- accept="image/*"
956
- @change=${this.handleImageSelect}
957
- >
958
- </div>
959
-
960
- </div>
961
- </schmancy-surface>
962
-
963
- `;
964
- }
965
- };
966
- t([s({ type: String })], v.prototype, "subject", void 0), t([s({ type: String })], v.prototype, "body", void 0), t([s({ type: Boolean })], v.prototype, "disabled", void 0), t([s({ type: Array })], v.prototype, "attachments", void 0), t([s({ type: Object })], v.prototype, "config", void 0), t([s({ type: Array })], v.prototype, "templates", void 0), t([c()], v.prototype, "dragOver", void 0), t([c()], v.prototype, "isUploading", void 0), v = t([o("schmancy-email-editor")], v);
967
- var y = class extends e {
968
- constructor(...e) {
969
- super(...e), this.subject = "", this.body = "", this.attachments = [], this.recipients = [], this.fromAddress = "sender@example.com", this.toAddress = "recipient@example.com", this.viewMode = "html";
970
- }
971
- static {
972
- this.styles = [l`
973
- :host {
974
- display: block;
975
- }
976
- `];
977
- }
978
- parseLayoutBlocks(e) {
979
- return e.replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (e, t, n) => {
980
- switch (t) {
981
- case "columns-2": return this.parseColumnsLayout(n, 2);
982
- case "columns-3": return this.parseColumnsLayout(n, 3);
983
- case "sidebar-left": return this.parseSidebarLayout(n, "left");
984
- case "sidebar-right": return this.parseSidebarLayout(n, "right");
985
- case "image-row": return this.parseImageRowLayout(n);
986
- default: return n;
987
- }
988
- });
989
- }
990
- parseColumnsLayout(e, t) {
991
- let n = /<div class="column">([\s\S]*?)<\/div>/g, r = [], i;
992
- for (; (i = n.exec(e)) !== null;) r.push(i[1].trim());
993
- if (r.length === 0) return e;
994
- let a = Math.floor(100 / t), o = "0 10px 0 0", s = "<tr>";
995
- for (let e = 0; e < t && e < r.length; e++) s += `\n\t\t\t\t<td width="${a}%" style="padding: ${e === t - 1 ? "0" : o}; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">\n\t\t\t\t\t${this.parseBasicMarkdown(r[e])}\n\t\t\t\t</td>`;
996
- for (let e = r.length; e < t; e++) s += `\n\t\t\t\t<td width="${a}%" style="padding: ${e === t - 1 ? "0" : o}; vertical-align: top;">\n\t\t\t\t\t&nbsp;\n\t\t\t\t</td>`;
997
- return s += "</tr>", `\n\t\t\t<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">\n\t\t\t\t${s}\n\t\t\t</table>`;
998
- }
999
- parseSidebarLayout(e, t) {
1000
- let n = e.match(/<div class="sidebar">([\s\S]*?)<\/div>/), r = e.match(/<div class="main">([\s\S]*?)<\/div>/);
1001
- if (!n || !r) return e;
1002
- let i = `\n\t\t\t<td width="30%" style="padding: 0 16px 0 0; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">\n\t\t\t\t${this.parseBasicMarkdown(n[1].trim())}\n\t\t\t</td>`, a = `\n\t\t\t<td width="70%" style="padding: 0; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">\n\t\t\t\t${this.parseBasicMarkdown(r[1].trim())}\n\t\t\t</td>`;
1003
- return `\n\t\t\t<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">\n\t\t\t\t${t === "left" ? `<tr>${i}${a}</tr>` : `<tr>${a}${i.replace("0 16px 0 0", "0 0 0 16px")}</tr>`}\n\t\t\t</table>`;
1004
- }
1005
- parseImageRowLayout(e) {
1006
- let t = /<div class="image">([\s\S]*?)<\/div>/g, n = [], r;
1007
- for (; (r = t.exec(e)) !== null;) {
1008
- let e = r[1].trim().match(/!\[([^\]]*)\]\(([^)]+)\)/);
1009
- if (e) {
1010
- let [, t, r] = e;
1011
- n.push(`<img src="${r}" alt="${t || "Image"}" style="display: block; max-width: 100%; height: auto;" border="0">`);
1012
- }
1013
- }
1014
- if (n.length === 0) return e;
1015
- let i = Math.floor(100 / n.length), a = "<tr>";
1016
- return n.forEach((e, t) => {
1017
- let r = t === n.length - 1 ? "0" : "0 8px 0 0";
1018
- a += `\n\t\t\t\t<td width="${i}%" style="padding: ${r}; vertical-align: top; text-align: center;">\n\t\t\t\t\t${e}\n\t\t\t\t</td>`;
1019
- }), a += "</tr>", `\n\t\t\t<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">\n\t\t\t\t${a}\n\t\t\t</table>`;
1020
- }
1021
- parseImageAttributes(e) {
1022
- let t = {};
1023
- if (!e) return t;
1024
- let n = e.match(/width=([^\s}]+)/);
1025
- n && (t.width = n[1]);
1026
- let r = e.match(/height=([^\s}]+)/);
1027
- return r && (t.height = r[1]), e.includes("cover") && (t.cover = !0), e.includes("contain") && (t.contain = !0), t;
1028
- }
1029
- generateImageStyles(e, t = !1) {
1030
- let n, r, i = "display: block; margin: 8px 0; border: 0;";
1031
- return e.width ? e.width === "auto" ? i += t ? " max-width: 100%; height: auto;" : " height: auto;" : e.width.endsWith("%") ? (i += ` width: ${e.width}; max-width: 100%;`, e.height || (i += " height: auto;")) : e.width.endsWith("px") && (n = e.width.replace("px", ""), i += " max-width: 100%;", e.height || (i += " height: auto;")) : i += t ? " width: 100%; max-width: 100%; height: auto;" : " max-width: 100%; height: auto;", e.height && (e.height === "auto" ? i += " height: auto;" : e.height.endsWith("px") && (r = e.height.replace("px", ""), e.width || (i += " max-width: 100%;"))), (e.cover || e.contain) && (e.width || e.height || (i += " width: 100%;")), {
1032
- imgStyle: i,
1033
- imgWidth: n,
1034
- imgHeight: r
1035
- };
1036
- }
1037
- parseBasicMarkdown(e) {
1038
- return e.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, (e, t, n, r) => {
1039
- let i = this.parseImageAttributes(r), { imgStyle: a, imgWidth: o, imgHeight: s } = this.generateImageStyles(i, !0), c = `<img src="${n}" alt="${t || "Image"}" style="${a}" border="0"`;
1040
- return o && (c += ` width="${o}"`), s && (c += ` height="${s}"`), c += ">", c;
1041
- }).replace(/\n\n/g, "</p><p style=\"margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;\">").replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, "<strong style=\"font-weight: bold;\">$1</strong>").replace(/\*(.*?)\*/g, "<em style=\"font-style: italic;\">$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\" style=\"color: #0066cc; text-decoration: underline;\">$1</a>").replace(/^# (.*$)/gim, "<h2 style=\"margin: 16px 0 8px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #1a1a1a;\">$1</h2>").replace(/^\* (.*$)/gim, "<li style=\"margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;\">$1</li>").replace(/^\d+\. (.*$)/gim, "<li style=\"margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;\">$1</li>").replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs, (e) => {
1042
- let t = /^\d+\./.test(e.replace(/<[^>]*>/g, "")) ? "ol" : "ul";
1043
- return `<${t} style="margin: 8px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${e}</${t}>`;
1044
- }).replace(/^(?!<[h\d]|<p|<ul|<ol|<li|<img)(.+)$/gim, "<p style=\"margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;\">$1</p>");
1045
- }
1046
- parseExtendedMarkdown(e) {
1047
- let t = e;
1048
- return t = this.parseLayoutBlocks(t), t = t.replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g, "[Multiple Images - View in web browser]"), t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, (e, t, n, r) => {
1049
- let i = this.parseImageAttributes(r), { imgStyle: a, imgWidth: o, imgHeight: s } = this.generateImageStyles(i, !1), c = `<img src="${n}" alt="${t || "Image"}" style="${a}" border="0"`;
1050
- return o && (c += ` width="${o}"`), s && (c += ` height="${s}"`), c += ">", `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${c}</td></tr></table>`;
1051
- }), t = t.replace(/\n\n/g, "</p><p style=\"margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;\">").replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, "<strong style=\"font-weight: bold;\">$1</strong>").replace(/\*(.*?)\*/g, "<em style=\"font-style: italic;\">$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\" style=\"color: #0066cc; text-decoration: underline;\">$1</a>").replace(/^# (.*$)/gim, "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"margin: 24px 0 16px 0;\"><tr><td><h1 style=\"margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a;\">$1</h1></td></tr></table>").replace(/^\* (.*$)/gim, "<li style=\"margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;\">$1</li>").replace(/^\d+\. (.*$)/gim, "<li style=\"margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;\">$1</li>").replace(/^---$/gim, "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"margin: 24px 0;\"><tr><td style=\"border-top: 1px solid #e0e0e0; height: 1px; line-height: 1px;\">&nbsp;</td></tr></table>"), t = t.replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs, (e) => {
1052
- let t = /^\d+\./.test(e.replace(/<[^>]*>/g, "")) ? "ol" : "ul";
1053
- return `<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><${t} style="margin: 16px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${e}</${t}></td></tr></table>`;
1054
- }), t.includes("<table>") || t.includes("<h1>") || (t = `<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">${t}</p>`), t = `<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">\n\t\t\t<tr>\n\t\t\t\t<td style="padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">\n\t\t\t\t\t${t}\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>`, t;
1055
- }
1056
- convertToPlainText(e) {
1057
- return e.trim().replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (e, t, n) => n.replace(/<div class="(?:column|sidebar|main|image)">/g, "\n").replace(/<\/div>/g, "\n").replace(/\n{3,}/g, "\n\n").trim()).replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g, "[Images]").replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, "[Image: $1]").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/__(.*?)__/g, "$1").replace(/~~(.*?)~~/g, "$1").replace(/`(.*?)`/g, "$1").replace(/^#{1,3} (.*$)/gim, "$1").replace(/^> (.*$)/gim, "$1").replace(/^\* (.*$)/gim, "• $1").replace(/^\d+\. (.*$)/gim, "$1").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1 ($2)").replace(/^---$/gim, "---").replace(/\n\n+/g, "\n\n");
1058
- }
1059
- formatFileSize(e) {
1060
- if (e === 0) return "0 Bytes";
1061
- let t = Math.floor(Math.log(e) / Math.log(1024));
1062
- return parseFloat((e / 1024 ** t).toFixed(2)) + " " + [
1063
- "Bytes",
1064
- "KB",
1065
- "MB",
1066
- "GB"
1067
- ][t];
1068
- }
1069
- render() {
1070
- let e = this.parseExtendedMarkdown(this.body), t = this.convertToPlainText(this.body), n = this.recipients[0] || this.toAddress;
1071
- return u`
1072
- <schmancy-surface type="solid" rounded="all" class="h-full flex flex-col">
1073
-
1074
- <!-- Header Section -->
1075
- <div class="shrink-0 p-4 border-b border-outline-variant">
1076
- <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
1077
- <schmancy-typography type="title" token="md" class="flex items-center gap-2">
1078
- <schmancy-icon size="20px">preview</schmancy-icon>
1079
- Email Preview
1080
- </schmancy-typography>
1081
-
1082
- <!-- View Mode Toggle -->
1083
- <div class="flex gap-1 bg-surface-container rounded-full p-1">
1084
- <schmancy-chip
1085
- ?selected=${this.viewMode === "html"}
1086
- @click=${() => {
1087
- this.viewMode = "html";
1088
- }}
1089
- class="text-xs h-8"
1090
- data-variant=${this.viewMode === "html" ? "filled" : "outlined"}
1091
- >
1092
- <schmancy-icon slot="prefix" size="14px">code</schmancy-icon>
1093
- HTML
1094
- </schmancy-chip>
1095
- <schmancy-chip
1096
- ?selected=${this.viewMode === "plaintext"}
1097
- @click=${() => {
1098
- this.viewMode = "plaintext";
1099
- }}
1100
- class="text-xs h-8"
1101
- data-variant=${this.viewMode === "plaintext" ? "filled" : "outlined"}
1102
- >
1103
- <schmancy-icon slot="prefix" size="14px">text_fields</schmancy-icon>
1104
- Text
1105
- </schmancy-chip>
1106
- </div>
1107
- </div>
1108
- </div>
1109
-
1110
- <!-- Preview Content Container -->
1111
- <div class="flex-1 flex flex-col min-h-0 p-4 gap-4">
1112
-
1113
- <!-- Email Mock Container -->
1114
- <div class="flex-1 flex flex-col min-h-0">
1115
- <schmancy-surface
1116
- type="subtle"
1117
- rounded="all"
1118
- class="flex-1 flex flex-col overflow-hidden shadow-sm"
1119
- >
1120
- <!-- Email Header -->
1121
- <div class="shrink-0 p-4 bg-surface-containerLow border-b border-outline-variant">
1122
- <div class="space-y-3">
1123
- <!-- From Field -->
1124
- <div class="flex items-start gap-3">
1125
- <div class="flex items-center gap-2 min-w-0 shrink-0 w-16">
1126
- <schmancy-icon size="16px">account_circle</schmancy-icon>
1127
- <schmancy-typography type="body" token="sm" class="font-medium">
1128
- From
1129
- </schmancy-typography>
1130
- </div>
1131
- <schmancy-typography type="body" token="sm" class="break-all flex-1">
1132
- ${this.fromAddress}
1133
- </schmancy-typography>
1134
- </div>
1135
-
1136
- <!-- To Field -->
1137
- <div class="flex items-start gap-3">
1138
- <div class="flex items-center gap-2 min-w-0 shrink-0 w-16">
1139
- <schmancy-icon size="16px">person</schmancy-icon>
1140
- <schmancy-typography type="body" token="sm" class="font-medium">
1141
- To
1142
- </schmancy-typography>
1143
- </div>
1144
- <schmancy-typography type="body" token="sm" class="break-all flex-1">
1145
- ${n}
1146
- </schmancy-typography>
1147
- </div>
1148
-
1149
- <!-- Subject Field -->
1150
- <div class="flex items-start gap-3">
1151
- <div class="flex items-center gap-2 min-w-0 shrink-0 w-16">
1152
- <schmancy-icon size="16px">subject</schmancy-icon>
1153
- <schmancy-typography type="body" token="sm" class="font-medium">
1154
- Subject
1155
- </schmancy-typography>
1156
- </div>
1157
- <schmancy-typography type="body" token="sm" class="font-medium flex-1">
1158
- ${this.subject || u`<span class="italic text-surface-onVariant">(No subject)</span>`}
1159
- </schmancy-typography>
1160
- </div>
1161
- </div>
1162
- </div>
1163
-
1164
- <!-- Email Body Content -->
1165
- <div class="flex-1 overflow-y-auto min-h-0">
1166
- ${m(this.body, () => u`
1167
- ${m(this.viewMode === "html", () => u`
1168
- <div class="p-6 bg-white" style="color: #333; line-height: 1.6; font-family: system-ui, -apple-system, sans-serif; font-size: 14px;">
1169
- <div .innerHTML=${e}></div>
1170
- </div>
1171
- `, () => u`
1172
- <div class="p-6 bg-white" style="color: #333; line-height: 1.6; font-family: 'Courier New', monospace; font-size: 13px; white-space: pre-wrap;">
1173
- ${t}
1174
- </div>
1175
- `)}
1176
- `, () => u`
1177
- <!-- Empty State -->
1178
- <div class="flex-1 flex items-center justify-center p-8">
1179
- <div class="text-center space-y-3">
1180
- <schmancy-icon size="48px" class="text-surface-onVariant opacity-50">mail_outline</schmancy-icon>
1181
- <schmancy-typography type="body" token="md">
1182
- No message content to preview
1183
- </schmancy-typography>
1184
- <schmancy-typography type="body" token="sm" class="text-surface-onVariant">
1185
- Start typing in the composer to see a preview
1186
- </schmancy-typography>
1187
- </div>
1188
- </div>
1189
- `)}
1190
- </div>
1191
-
1192
- <!-- Attachments Section -->
1193
- ${m(this.attachments.length > 0, () => u`
1194
- <div class="shrink-0 p-4 border-t border-outline-variant bg-surface-containerLowest">
1195
- <div class="space-y-3">
1196
- <!-- Attachments Header -->
1197
- <div class="flex items-center gap-2">
1198
- <schmancy-icon size="18px">attach_file</schmancy-icon>
1199
- <schmancy-typography type="label" token="md" class="font-medium">
1200
- Attachments (${this.attachments.length})
1201
- </schmancy-typography>
1202
- </div>
1203
-
1204
- <!-- Attachments List -->
1205
- <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
1206
- ${p(this.attachments, (e) => e.id, (e) => u`
1207
- <schmancy-surface type="subtle" rounded="all" class="p-3">
1208
- <div class="flex items-center gap-3">
1209
- <!-- File Icon -->
1210
- <schmancy-icon size="20px" class="text-surface-onVariant shrink-0">
1211
- ${e.type.startsWith("image/") ? "image" : e.type.includes("pdf") ? "picture_as_pdf" : e.type.includes("text") ? "description" : "attach_file"}
1212
- </schmancy-icon>
1213
-
1214
- <!-- File Info -->
1215
- <div class="flex-1 min-w-0">
1216
- <schmancy-typography type="body" token="sm" class="font-medium truncate">
1217
- ${e.name}
1218
- </schmancy-typography>
1219
- <schmancy-typography type="body" token="xs" class="text-surface-onVariant">
1220
- ${this.formatFileSize(e.size)} • ${e.type}
1221
- </schmancy-typography>
1222
- </div>
1223
- </div>
1224
- </schmancy-surface>
1225
- `)}
1226
- </div>
1227
- </div>
1228
- </div>
1229
- `)}
1230
- </schmancy-surface>
1231
- </div>
1232
-
1233
- <!-- Preview Stats -->
1234
- ${m(this.body, () => u`
1235
- <div class="shrink-0">
1236
- <schmancy-surface type="subtle" rounded="all" class="p-3">
1237
- <div class="flex items-center justify-center gap-6 text-center">
1238
- <div>
1239
- <schmancy-typography type="body" token="xs" class="text-surface-onVariant">
1240
- Characters
1241
- </schmancy-typography>
1242
- <schmancy-typography type="body" token="sm" class="font-medium">
1243
- ${this.body.length}
1244
- </schmancy-typography>
1245
- </div>
1246
- <div class="w-px h-8 bg-outline-variant"></div>
1247
- <div>
1248
- <schmancy-typography type="body" token="xs" class="text-surface-onVariant">
1249
- Words
1250
- </schmancy-typography>
1251
- <schmancy-typography type="body" token="sm" class="font-medium">
1252
- ${this.body.trim() ? this.body.trim().split(/\s+/).length : 0}
1253
- </schmancy-typography>
1254
- </div>
1255
- ${m(this.attachments.length > 0, () => u`
1256
- <div class="w-px h-8 bg-outline-variant"></div>
1257
- <div>
1258
- <schmancy-typography type="body" token="xs" class="text-surface-onVariant">
1259
- Attachments
1260
- </schmancy-typography>
1261
- <schmancy-typography type="body" token="sm" class="font-medium">
1262
- ${this.attachments.length}
1263
- </schmancy-typography>
1264
- </div>
1265
- `)}
1266
- </div>
1267
- </schmancy-surface>
1268
- </div>
1269
- `)}
1270
-
1271
- </div>
1272
- </schmancy-surface>
1273
- `;
1274
- }
1275
- };
1276
- t([s({ type: String })], y.prototype, "subject", void 0), t([s({ type: String })], y.prototype, "body", void 0), t([s({ type: Array })], y.prototype, "attachments", void 0), t([s({ type: Array })], y.prototype, "recipients", void 0), t([s({ type: String })], y.prototype, "fromAddress", void 0), t([s({ type: String })], y.prototype, "toAddress", void 0), t([c()], y.prototype, "viewMode", void 0), y = t([o("schmancy-email-viewer")], y);
1277
- var b = class extends e {
1278
- constructor(...e) {
1279
- super(...e), this.disabled = !1, this.recipients = [], this.importSources = [], this.selectedRecipients = [], this.enableCsvImport = !0, this.enableDragDrop = !0, this.title = "Recipients", this.emptyStateTitle = "No recipients yet", this.emptyStateMessage = "Import from sources or upload a CSV", this.dragOver = !1, this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.searchQuery = "", this.filteredRecipients = [], this.boatState = "collapsed", this.fileInputRef = d(), this.handleEmailsImported = () => {
1280
- this.updateFilteredRecipients(), this.requestUpdate();
1281
- }, this.handleImportFromCSV = () => {
1282
- this.enableCsvImport && this.fileInputRef.value?.click();
1283
- }, this.handleFileSelect = (e) => {
1284
- let t = e.target.files?.[0];
1285
- t && this.processCSVFile(t);
1286
- }, this.handleDrop = (e) => {
1287
- if (!this.enableDragDrop) return;
1288
- e.preventDefault(), this.dragOver = !1;
1289
- let t = e.dataTransfer?.files[0];
1290
- t && this.processCSVFile(t);
1291
- }, this.processCSVFile = (e) => {
1292
- if (!e.name.endsWith(".csv")) return void r.error("Please select a CSV file");
1293
- let t = new FileReader();
1294
- t.addEventListener("load", (e) => {
1295
- let t = e.target?.result;
1296
- try {
1297
- let e = this.parseCSV(t);
1298
- if (e.length === 0) return void r.error("No valid email addresses found in CSV");
1299
- this.dispatchEvent(new CustomEvent("emails-imported", {
1300
- detail: {
1301
- emails: e,
1302
- source: "csv"
1303
- },
1304
- bubbles: !0,
1305
- composed: !0
1306
- })), r.success(`Imported ${e.length} emails from CSV file`);
1307
- } catch {
1308
- r.error("Failed to parse CSV file");
1309
- }
1310
- }, { once: !0 }), t.readAsText(e);
1311
- }, this.toggleRecipientSelection = (e) => {
1312
- this.localSelectedRecipients.has(e) ? this.localSelectedRecipients.delete(e) : this.localSelectedRecipients.add(e), this.localSelectedRecipients = new Set(this.localSelectedRecipients), this.dispatchSelectionChange();
1313
- }, this.selectAll = () => {
1314
- this.localSelectedRecipients = new Set(this.filteredRecipients), this.dispatchSelectionChange();
1315
- }, this.selectNone = () => {
1316
- this.localSelectedRecipients.clear(), this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.dispatchSelectionChange();
1317
- }, this.removeRecipient = (e) => {
1318
- this.dispatchEvent(new CustomEvent("recipient-removed", {
1319
- detail: { email: e },
1320
- bubbles: !0,
1321
- composed: !0
1322
- }));
1323
- }, this.clearAll = () => {
1324
- this.dispatchEvent(new CustomEvent("recipients-cleared", {
1325
- bubbles: !0,
1326
- composed: !0
1327
- }));
1328
- }, this.updateFilteredRecipients = () => {
1329
- let e = Array.isArray(this.recipients) ? this.recipients : [];
1330
- if (this.searchQuery.trim()) {
1331
- let t = this.searchQuery.toLowerCase();
1332
- this.filteredRecipients = e.filter((e) => e.toLowerCase().includes(t));
1333
- } else this.filteredRecipients = [...e];
1334
- }, this.handleSearchInput = (e) => {
1335
- let t = e.target;
1336
- this.searchQuery = t.value;
1337
- }, this.clearSearch = () => {
1338
- this.searchQuery = "";
1339
- }, this.dispatchSelectionChange = () => {
1340
- this.dispatchEvent(new CustomEvent("selection-changed", {
1341
- detail: { selectedEmails: Array.from(this.localSelectedRecipients) },
1342
- bubbles: !0,
1343
- composed: !0
1344
- }));
1345
- }, this.handleBoatStateChange = (e) => {
1346
- this.boatState = e.detail;
1347
- };
1348
- }
1349
- static {
1350
- this.styles = [l`
1351
- :host {
1352
- display: block;
1353
- height: 100%;
1354
- }
1355
- `];
1356
- }
1357
- connectedCallback() {
1358
- super.connectedCallback(), this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), i(this, "emails-imported").pipe(a(this.disconnecting)).subscribe(this.handleEmailsImported);
1359
- }
1360
- updated(e) {
1361
- super.updated(e), e.has("selectedRecipients") && (this.localSelectedRecipients = new Set(this.selectedRecipients)), (e.has("recipients") || e.has("searchQuery")) && this.updateFilteredRecipients(), e.has("recipients") && this.requestUpdate();
1362
- }
1363
- parseCSV(e) {
1364
- let t = [], n;
1365
- n = this.csvParser ? this.csvParser.parse(e, {
1366
- header: !0,
1367
- skipEmptyLines: !0,
1368
- dynamicTyping: !0,
1369
- delimiter: "",
1370
- transformHeader: (e) => e.trim()
1371
- }) : this.simpleCSVParse(e);
1372
- let r = n.data, i = n.meta.fields || [], a = i.find((e) => e.toLowerCase().includes("email"));
1373
- if (!a) for (let e of i) {
1374
- let t = r[0]?.[e]?.toString();
1375
- if (t && this.isValidEmail(t)) {
1376
- a = e;
1377
- break;
1378
- }
1379
- }
1380
- if (!a) throw Error("No email column found in CSV");
1381
- let o = /* @__PURE__ */ new Set();
1382
- for (let e of r) {
1383
- let n = e[a]?.toString();
1384
- if (!n) continue;
1385
- let r = n.toLowerCase().trim();
1386
- this.isValidEmail(r) && !o.has(r) && (o.add(r), t.push(r));
1387
- }
1388
- return t;
1389
- }
1390
- simpleCSVParse(e) {
1391
- let t = e.split("\n").filter((e) => e.trim());
1392
- if (t.length === 0) return {
1393
- data: [],
1394
- meta: {}
1395
- };
1396
- let n = t[0].split(",").map((e) => e.trim().replace(/"/g, "")), r = [];
1397
- for (let e = 1; e < t.length; e++) {
1398
- let i = t[e].split(",").map((e) => e.trim().replace(/"/g, "")), a = {};
1399
- n.forEach((e, t) => {
1400
- a[e] = i[t] || "";
1401
- }), r.push(a);
1402
- }
1403
- return {
1404
- data: r,
1405
- meta: { fields: n }
1406
- };
1407
- }
1408
- isValidEmail(e) {
1409
- return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
1410
- }
1411
- addRecipients(e) {
1412
- if (!e.length) return;
1413
- let t = [...new Set([...this.recipients, ...e])], n = e.filter((e) => !this.recipients.includes(e));
1414
- this.recipients = t, this.selectedRecipients = [...new Set([...this.selectedRecipients, ...n])], this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), this.requestUpdate();
1415
- }
1416
- showBoat() {
1417
- this.boatState = "collapsed";
1418
- }
1419
- hideBoat() {
1420
- this.boatState = "collapsed";
1421
- }
1422
- expandBoat() {
1423
- this.boatState = "expanded";
1424
- }
1425
- toggleBoat() {
1426
- this.boatState = this.boatState === "collapsed" ? "expanded" : "collapsed";
1427
- }
1428
- render() {
1429
- return this.renderBoatLayout();
1430
- }
1431
- renderBoatLayout() {
1432
- return u`
1433
- <!-- Hidden file input for CSV import -->
1434
- ${m(this.enableCsvImport, () => u`
1435
- <input
1436
- type="file"
1437
- accept=".csv"
1438
- ${f(this.fileInputRef)}
1439
- @change=${this.handleFileSelect}
1440
- class="hidden"
1441
- />
1442
- `)}
1443
-
1444
- <schmancy-boat
1445
- .state=${this.boatState}
1446
- @change=${this.handleBoatStateChange}
1447
- >
1448
- <!-- Boat Header -->
1449
- <div slot="header" class="flex items-center justify-between w-full px-4 py-2">
1450
- <div class="flex items-center gap-3">
1451
- <schmancy-icon size="20px">group</schmancy-icon>
1452
- <schmancy-typography type="title" token="md" class="font-semibold">
1453
- ${this.title}
1454
- </schmancy-typography>
1455
- ${m(this.recipients.length > 0, () => u`
1456
- <schmancy-badge>
1457
- ${this.localSelectedRecipients.size}/${this.recipients.length}
1458
- </schmancy-badge>
1459
- `)}
1460
- </div>
1461
- </div>
1462
-
1463
- <!-- Boat Content -->
1464
- <div class="h-full flex flex-col max-h-[70vh]">
1465
- ${this.renderBoatContent()}
1466
- </div>
1467
- </schmancy-boat>
1468
- `;
1469
- }
1470
- renderBoatContent() {
1471
- return u`
1472
- <!-- Search Bar and CSV Import on one line -->
1473
- <div class="p-4 flex gap-3">
1474
- <schmancy-input
1475
- type="text"
1476
- placeholder="Search recipients"
1477
- .value=${this.searchQuery}
1478
- @input=${this.handleSearchInput}
1479
- class="flex-1"
1480
- >
1481
- ${m(this.searchQuery, () => u`
1482
- <schmancy-button
1483
- slot="suffix"
1484
- variant="text"
1485
- @click=${this.clearSearch}
1486
- >
1487
- <schmancy-icon size="16px">close</schmancy-icon>
1488
- </schmancy-button>
1489
- `)}
1490
- </schmancy-input>
1491
-
1492
- ${m(this.enableCsvImport, () => u`
1493
- <schmancy-button
1494
- variant="outlined"
1495
- @click=${this.handleImportFromCSV}
1496
- ?disabled=${this.disabled}
1497
- >
1498
- <schmancy-icon slot="prefix" size="16px">upload_file</schmancy-icon>
1499
- Import
1500
- </schmancy-button>
1501
- `)}
1502
- </div>
1503
-
1504
- ${m(this.recipients.length > 0, () => u`
1505
- <!-- Bulk Actions -->
1506
- <div class="px-4 pb-4">
1507
- <div class="flex items-center gap-3">
1508
- <schmancy-button
1509
- variant="outlined"
1510
- @click=${this.selectAll}
1511
- ?disabled=${this.localSelectedRecipients.size === this.filteredRecipients.length}
1512
- >
1513
- <schmancy-icon slot="prefix" size="14px">select_all</schmancy-icon>
1514
- Select All
1515
- </schmancy-button>
1516
-
1517
- <schmancy-button
1518
- variant="outlined"
1519
- @click=${this.selectNone}
1520
- ?disabled=${this.localSelectedRecipients.size === 0}
1521
- >
1522
- <schmancy-icon slot="prefix" size="14px">deselect</schmancy-icon>
1523
- Clear Selection
1524
- </schmancy-button>
1525
-
1526
- <div class="flex-1"></div>
1527
-
1528
- <schmancy-button variant="text" @click=${this.clearAll}>
1529
- <schmancy-icon slot="prefix" size="14px">delete_forever</schmancy-icon>
1530
- Clear All
1531
- </schmancy-button>
1532
- </div>
1533
- </div>
1534
-
1535
- <!-- Recipients List -->
1536
- <div class="flex-1 overflow-y-auto px-4 pb-4">
1537
- ${m(this.filteredRecipients.length > 0, () => u`
1538
- <div class="flex flex-wrap gap-3">
1539
- ${p(this.filteredRecipients, (e) => e, (e) => u`
1540
- <schmancy-button
1541
- variant=${this.localSelectedRecipients.has(e) ? "filled" : "outlined"}
1542
- @click=${(t) => {
1543
- t.stopPropagation(), t.preventDefault(), this.toggleRecipientSelection(e);
1544
- }}
1545
- class="cursor-pointer flex items-center gap-2"
1546
- >
1547
- <span class="truncate flex-1 text-left">${e}</span>
1548
- <schmancy-icon
1549
- @click=${(t) => {
1550
- t.stopPropagation(), this.removeRecipient(e);
1551
- }}
1552
- size="16px"
1553
- class="ml-2"
1554
- >close</schmancy-icon>
1555
- </schmancy-button>
1556
- `)}
1557
- </div>
1558
- `, () => u`
1559
- <div class="text-center py-8">
1560
- <schmancy-icon size="32px" class="opacity-50 mb-2">search_off</schmancy-icon>
1561
- <schmancy-typography type="body" token="sm" class="mb-2">
1562
- No recipients match "${this.searchQuery}"
1563
- </schmancy-typography>
1564
- <schmancy-button variant="outlined" @click=${this.clearSearch}>
1565
- Clear Search
1566
- </schmancy-button>
1567
- </div>
1568
- `)}
1569
- </div>
1570
- `, () => u`
1571
- <!-- Empty State -->
1572
- <div class="flex-1 flex items-center justify-center p-8">
1573
- <div class="text-center space-y-4">
1574
- <schmancy-icon size="48px" class="opacity-30">mail_outline</schmancy-icon>
1575
- <schmancy-typography type="title" token="md" class="mb-2">
1576
- ${this.emptyStateTitle}
1577
- </schmancy-typography>
1578
- <schmancy-typography type="body" token="sm">
1579
- ${this.emptyStateMessage}
1580
- </schmancy-typography>
1581
- </div>
1582
- </div>
1583
- `)}
1584
-
1585
- <!-- Drag Overlay -->
1586
- ${m(this.dragOver && this.enableDragDrop, () => u`
1587
- <div
1588
- class="absolute inset-4 flex items-center justify-center border-2 border-dashed border-primary rounded-lg z-10"
1589
- @dragover=${(e) => {
1590
- e.preventDefault(), this.dragOver = !0;
1591
- }}
1592
- @dragleave=${() => this.dragOver = !1}
1593
- @drop=${this.handleDrop}
1594
- >
1595
- <schmancy-surface type="solid" rounded="all" class="p-6 text-center">
1596
- <schmancy-icon size="48px" class="mb-2">upload</schmancy-icon>
1597
- <schmancy-typography type="body" token="md">
1598
- Drop CSV file here
1599
- </schmancy-typography>
1600
- </schmancy-surface>
1601
- </div>
1602
- `)}
1603
- `;
1604
- }
1605
- };
1606
- t([s({ type: Boolean })], b.prototype, "disabled", void 0), t([s({ type: Array })], b.prototype, "recipients", void 0), t([s({ type: Array })], b.prototype, "importSources", void 0), t([s({ type: Array })], b.prototype, "selectedRecipients", void 0), t([s({ type: Boolean })], b.prototype, "enableCsvImport", void 0), t([s({ type: Boolean })], b.prototype, "enableDragDrop", void 0), t([s({ type: String })], b.prototype, "title", void 0), t([s({ type: String })], b.prototype, "emptyStateTitle", void 0), t([s({ type: String })], b.prototype, "emptyStateMessage", void 0), t([s({ type: Object })], b.prototype, "csvParser", void 0), t([c()], b.prototype, "dragOver", void 0), t([c()], b.prototype, "localSelectedRecipients", void 0), t([c()], b.prototype, "searchQuery", void 0), t([c()], b.prototype, "filteredRecipients", void 0), t([c()], b.prototype, "boatState", void 0), b = t([o("schmancy-email-recipients")], b);
1607
- export { h as a, g as i, y as n, v as r, b as t };