snice 2.1.4 → 2.2.0

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 (370) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C8aBfN72.js +4 -0
  123. package/dist/components/snice-cell-C8aBfN72.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +16 -20
  205. package/dist/index.cjs.map +1 -1
  206. package/dist/index.cjs.min.map +1 -1
  207. package/dist/index.esm.js +16 -20
  208. package/dist/index.esm.js.map +1 -1
  209. package/dist/index.esm.min.js +3 -3
  210. package/dist/index.esm.min.js.map +1 -1
  211. package/dist/index.iife.js +16 -20
  212. package/dist/index.iife.js.map +1 -1
  213. package/dist/index.iife.min.js +3 -3
  214. package/dist/index.iife.min.js.map +1 -1
  215. package/dist/symbols.esm.js +1 -1
  216. package/dist/transitions.esm.js +1 -1
  217. package/package.json +10 -6
  218. package/components/accordion/demo.html +0 -403
  219. package/components/accordion/snice-accordion-item.css +0 -85
  220. package/components/accordion/snice-accordion-item.ts +0 -226
  221. package/components/accordion/snice-accordion.css +0 -31
  222. package/components/accordion/snice-accordion.ts +0 -182
  223. package/components/accordion/snice-accordion.types.ts +0 -32
  224. package/components/alert/demo.html +0 -445
  225. package/components/alert/snice-alert.css +0 -195
  226. package/components/alert/snice-alert.ts +0 -141
  227. package/components/avatar/demo.html +0 -598
  228. package/components/avatar/snice-avatar.css +0 -131
  229. package/components/avatar/snice-avatar.ts +0 -136
  230. package/components/avatar/snice-avatar.types.ts +0 -13
  231. package/components/badge/demo.html +0 -523
  232. package/components/badge/snice-badge.css +0 -161
  233. package/components/badge/snice-badge.ts +0 -117
  234. package/components/breadcrumbs/demo.html +0 -404
  235. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  236. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  237. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  238. package/components/breadcrumbs/snice-crumb.ts +0 -26
  239. package/components/button/demo.html +0 -42
  240. package/components/button/snice-button.css +0 -230
  241. package/components/button/snice-button.ts +0 -169
  242. package/components/button/snice-button.types.ts +0 -25
  243. package/components/card/demo.html +0 -525
  244. package/components/card/snice-card.css +0 -140
  245. package/components/card/snice-card.ts +0 -102
  246. package/components/checkbox/demo.html +0 -253
  247. package/components/checkbox/snice-checkbox.css +0 -164
  248. package/components/checkbox/snice-checkbox.ts +0 -223
  249. package/components/checkbox/snice-checkbox.types.ts +0 -22
  250. package/components/chip/demo.html +0 -383
  251. package/components/chip/snice-chip.css +0 -195
  252. package/components/chip/snice-chip.ts +0 -139
  253. package/components/chip/snice-chip.types.ts +0 -15
  254. package/components/date-picker/README.md +0 -233
  255. package/components/date-picker/demo.html +0 -191
  256. package/components/date-picker/snice-date-picker.css +0 -330
  257. package/components/date-picker/snice-date-picker.ts +0 -777
  258. package/components/date-picker/snice-date-picker.types.ts +0 -83
  259. package/components/divider/demo.html +0 -233
  260. package/components/divider/snice-divider.css +0 -155
  261. package/components/divider/snice-divider.ts +0 -69
  262. package/components/drawer/demo.html +0 -328
  263. package/components/drawer/snice-drawer.css +0 -476
  264. package/components/drawer/snice-drawer.ts +0 -287
  265. package/components/drawer/snice-drawer.types.ts +0 -17
  266. package/components/global.d.ts +0 -14
  267. package/components/input/demo.html +0 -303
  268. package/components/input/snice-input.css +0 -257
  269. package/components/input/snice-input.ts +0 -442
  270. package/components/input/snice-input.types.ts +0 -59
  271. package/components/input/test.html +0 -77
  272. package/components/layout/README.md +0 -260
  273. package/components/layout/demo.html +0 -538
  274. package/components/layout/snice-layout-blog.css +0 -129
  275. package/components/layout/snice-layout-blog.ts +0 -48
  276. package/components/layout/snice-layout-card.css +0 -104
  277. package/components/layout/snice-layout-card.ts +0 -35
  278. package/components/layout/snice-layout-centered.css +0 -51
  279. package/components/layout/snice-layout-centered.ts +0 -22
  280. package/components/layout/snice-layout-dashboard.css +0 -98
  281. package/components/layout/snice-layout-dashboard.ts +0 -45
  282. package/components/layout/snice-layout-fullscreen.css +0 -72
  283. package/components/layout/snice-layout-fullscreen.ts +0 -34
  284. package/components/layout/snice-layout-landing.css +0 -92
  285. package/components/layout/snice-layout-landing.ts +0 -47
  286. package/components/layout/snice-layout-minimal.css +0 -16
  287. package/components/layout/snice-layout-minimal.ts +0 -19
  288. package/components/layout/snice-layout-sidebar.css +0 -117
  289. package/components/layout/snice-layout-sidebar.ts +0 -48
  290. package/components/layout/snice-layout-split.css +0 -103
  291. package/components/layout/snice-layout-split.ts +0 -29
  292. package/components/layout/snice-layout.css +0 -72
  293. package/components/layout/snice-layout.ts +0 -35
  294. package/components/login/demo-auth-controller.ts +0 -185
  295. package/components/login/demo.html +0 -470
  296. package/components/login/snice-login.css +0 -204
  297. package/components/login/snice-login.ts +0 -326
  298. package/components/login/snice-login.types.ts +0 -29
  299. package/components/modal/demo.html +0 -291
  300. package/components/modal/snice-modal.css +0 -203
  301. package/components/modal/snice-modal.ts +0 -233
  302. package/components/modal/snice-modal.types.ts +0 -21
  303. package/components/pagination/demo.html +0 -395
  304. package/components/pagination/snice-pagination.ts +0 -333
  305. package/components/pagination/snice-pagination.types.ts +0 -21
  306. package/components/progress/demo.html +0 -510
  307. package/components/progress/snice-progress.css +0 -267
  308. package/components/progress/snice-progress.ts +0 -247
  309. package/components/progress/snice-progress.types.ts +0 -19
  310. package/components/radio/demo.html +0 -287
  311. package/components/radio/snice-radio.css +0 -171
  312. package/components/radio/snice-radio.ts +0 -218
  313. package/components/radio/snice-radio.types.ts +0 -21
  314. package/components/select/demo.html +0 -511
  315. package/components/select/snice-option.ts +0 -52
  316. package/components/select/snice-select.css +0 -392
  317. package/components/select/snice-select.ts +0 -796
  318. package/components/select/snice-select.types.ts +0 -55
  319. package/components/skeleton/demo.html +0 -514
  320. package/components/skeleton/snice-skeleton.css +0 -109
  321. package/components/skeleton/snice-skeleton.ts +0 -126
  322. package/components/switch/demo.html +0 -284
  323. package/components/switch/snice-switch.css +0 -221
  324. package/components/switch/snice-switch.ts +0 -229
  325. package/components/switch/snice-switch.types.ts +0 -23
  326. package/components/symbols.ts +0 -23
  327. package/components/table/demo-table-controller.ts +0 -100
  328. package/components/table/demo.html +0 -480
  329. package/components/table/snice-cell-boolean.ts +0 -112
  330. package/components/table/snice-cell-date.ts +0 -210
  331. package/components/table/snice-cell-duration.ts +0 -91
  332. package/components/table/snice-cell-filesize.ts +0 -90
  333. package/components/table/snice-cell-number.ts +0 -165
  334. package/components/table/snice-cell-progress.ts +0 -83
  335. package/components/table/snice-cell-rating.ts +0 -82
  336. package/components/table/snice-cell-sparkline.ts +0 -253
  337. package/components/table/snice-cell-text.ts +0 -125
  338. package/components/table/snice-cell.css +0 -296
  339. package/components/table/snice-cell.ts +0 -473
  340. package/components/table/snice-column.ts +0 -353
  341. package/components/table/snice-header.css +0 -243
  342. package/components/table/snice-header.ts +0 -261
  343. package/components/table/snice-progress.ts +0 -66
  344. package/components/table/snice-rating.ts +0 -45
  345. package/components/table/snice-row.css +0 -255
  346. package/components/table/snice-row.ts +0 -331
  347. package/components/table/snice-table.css +0 -241
  348. package/components/table/snice-table.ts +0 -737
  349. package/components/table/snice-table.types.ts +0 -158
  350. package/components/tabs/demo.html +0 -487
  351. package/components/tabs/snice-tab-panel.css +0 -264
  352. package/components/tabs/snice-tab-panel.ts +0 -47
  353. package/components/tabs/snice-tab.css +0 -96
  354. package/components/tabs/snice-tab.ts +0 -65
  355. package/components/tabs/snice-tabs.css +0 -189
  356. package/components/tabs/snice-tabs.ts +0 -332
  357. package/components/tabs/snice-tabs.types.ts +0 -28
  358. package/components/theme/theme.css +0 -234
  359. package/components/toast/demo.html +0 -329
  360. package/components/toast/snice-toast-container.ts +0 -256
  361. package/components/toast/snice-toast.css +0 -213
  362. package/components/toast/snice-toast.ts +0 -276
  363. package/components/toast/snice-toast.types.ts +0 -35
  364. package/components/tooltip/demo.html +0 -350
  365. package/components/tooltip/snice-tooltip-portal.css +0 -79
  366. package/components/tooltip/snice-tooltip.css +0 -117
  367. package/components/tooltip/snice-tooltip.ts +0 -612
  368. package/components/tooltip/snice-tooltip.types.ts +0 -32
  369. package/components/transitions.ts +0 -94
  370. package/components/tsconfig.json +0 -18
package/components/toast/demo.html DELETED
@@ -1,329 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Snice Toast Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: var(--snice-font-family);
11
- background: var(--snice-color-background);
12
- color: var(--snice-color-text);
13
- padding: var(--snice-spacing-lg);
14
- margin: 0;
15
- }
16
-
17
- .container {
18
- max-width: 800px;
19
- margin: 0 auto;
20
- }
21
-
22
- h1 {
23
- font-size: var(--snice-font-size-3xl);
24
- margin-bottom: var(--snice-spacing-xl);
25
- }
26
-
27
- .section {
28
- margin-bottom: var(--snice-spacing-2xl);
29
- }
30
-
31
- .section h2 {
32
- font-size: var(--snice-font-size-xl);
33
- margin-bottom: var(--snice-spacing-md);
34
- color: var(--snice-color-text-secondary);
35
- }
36
-
37
- .controls {
38
- display: flex;
39
- flex-wrap: wrap;
40
- gap: var(--snice-spacing-sm);
41
- margin-bottom: var(--snice-spacing-lg);
42
- }
43
-
44
- .button-group {
45
- display: flex;
46
- flex-wrap: wrap;
47
- gap: var(--snice-spacing-xs);
48
- }
49
-
50
- button {
51
- padding: var(--snice-spacing-xs) var(--snice-spacing-md);
52
- border-radius: var(--snice-border-radius-md);
53
- border: 1px solid var(--snice-color-border);
54
- background: var(--snice-color-background);
55
- color: var(--snice-color-text);
56
- font-size: var(--snice-font-size-sm);
57
- font-family: var(--snice-font-family);
58
- cursor: pointer;
59
- transition: all var(--snice-transition-fast);
60
- }
61
-
62
- button:hover {
63
- background: var(--snice-color-background-secondary);
64
- border-color: var(--snice-color-border-hover);
65
- }
66
-
67
- button.success {
68
- background: var(--snice-color-success);
69
- color: var(--snice-color-text-inverse);
70
- border-color: var(--snice-color-success);
71
- }
72
-
73
- button.success:hover {
74
- background: var(--snice-color-success-hover);
75
- border-color: var(--snice-color-success-hover);
76
- }
77
-
78
- button.error {
79
- background: var(--snice-color-danger);
80
- color: var(--snice-color-text-inverse);
81
- border-color: var(--snice-color-danger);
82
- }
83
-
84
- button.error:hover {
85
- background: var(--snice-color-danger-hover);
86
- border-color: var(--snice-color-danger-hover);
87
- }
88
-
89
- button.warning {
90
- background: var(--snice-color-warning);
91
- color: var(--snice-color-text-inverse);
92
- border-color: var(--snice-color-warning);
93
- }
94
-
95
- button.warning:hover {
96
- background: var(--snice-color-warning-hover);
97
- border-color: var(--snice-color-warning-hover);
98
- }
99
-
100
- button.info {
101
- background: var(--snice-color-primary);
102
- color: var(--snice-color-text-inverse);
103
- border-color: var(--snice-color-primary);
104
- }
105
-
106
- button.info:hover {
107
- background: var(--snice-color-primary-hover);
108
- border-color: var(--snice-color-primary-hover);
109
- }
110
-
111
- .position-controls {
112
- display: grid;
113
- grid-template-columns: repeat(3, 1fr);
114
- gap: var(--snice-spacing-xs);
115
- max-width: 300px;
116
- }
117
-
118
- .position-controls button {
119
- padding: var(--snice-spacing-xs);
120
- font-size: var(--snice-font-size-xs);
121
- }
122
-
123
- .position-controls button.active {
124
- background: var(--snice-color-primary);
125
- color: var(--snice-color-text-inverse);
126
- border-color: var(--snice-color-primary);
127
- }
128
-
129
- .custom-message {
130
- display: flex;
131
- gap: var(--snice-spacing-sm);
132
- margin-bottom: var(--snice-spacing-md);
133
- }
134
-
135
- .custom-message input {
136
- flex: 1;
137
- padding: var(--snice-spacing-xs) var(--snice-spacing-sm);
138
- border: 1px solid var(--snice-color-border);
139
- border-radius: var(--snice-border-radius-md);
140
- background: var(--snice-color-background);
141
- color: var(--snice-color-text);
142
- font-size: var(--snice-font-size-sm);
143
- font-family: var(--snice-font-family);
144
- }
145
-
146
- .custom-message input:focus {
147
- outline: none;
148
- border-color: var(--snice-color-border-focus);
149
- box-shadow: 0 0 0 3px var(--snice-focus-ring-color);
150
- }
151
-
152
- .options {
153
- display: flex;
154
- gap: var(--snice-spacing-md);
155
- margin-bottom: var(--snice-spacing-md);
156
- }
157
-
158
- .options label {
159
- display: flex;
160
- align-items: center;
161
- gap: var(--snice-spacing-xs);
162
- font-size: var(--snice-font-size-sm);
163
- }
164
-
165
- .code {
166
- background: var(--snice-color-background-tertiary);
167
- padding: var(--snice-spacing-md);
168
- border-radius: var(--snice-border-radius-md);
169
- font-family: var(--snice-font-family-mono);
170
- font-size: var(--snice-font-size-sm);
171
- line-height: var(--snice-line-height-loose);
172
- }
173
- </style>
174
- <script type="module">
175
- import Toast from './snice-toast-container.ts';
176
- import { element, controller, on } from '../../src/index.ts';
177
-
178
- let currentPosition = 'bottom-right';
179
-
180
- function showToast(type) {
181
- const messages = {
182
- success: 'Operation completed successfully!',
183
- error: 'An error occurred. Please try again.',
184
- warning: 'This action cannot be undone.',
185
- info: 'New updates are available.'
186
- };
187
-
188
- Toast[type](messages[type], { position: currentPosition });
189
- }
190
-
191
- function showEventToast(type) {
192
- const messages = {
193
- success: 'Event triggered: Success!',
194
- error: 'Event triggered: Error occurred!',
195
- warning: 'Event triggered: Warning!',
196
- info: 'Event triggered: Info message'
197
- };
198
-
199
- const event = new CustomEvent('@snice/show-toast', {
200
- detail: {
201
- message: messages[type],
202
- options: { type, position: currentPosition }
203
- },
204
- bubbles: true,
205
- composed: true
206
- });
207
- document.body.dispatchEvent(event);
208
- }
209
-
210
- function setPosition(position) {
211
- currentPosition = position;
212
- document.querySelectorAll('.position-controls button').forEach(btn => {
213
- btn.classList.toggle('active', btn.textContent.includes(position));
214
- });
215
- }
216
-
217
- function showCustom() {
218
- const input = document.getElementById('custom-input');
219
- const message = input.value || 'Custom toast message';
220
- const closable = document.getElementById('closable').checked;
221
- const hasIcon = document.getElementById('has-icon').checked;
222
- const duration = parseInt(document.getElementById('duration').value) * 1000;
223
-
224
- Toast.info(message, {
225
- position: currentPosition,
226
- closable,
227
- icon: hasIcon,
228
- duration
229
- });
230
- }
231
-
232
- function showMultiple() {
233
- Toast.success('First toast message', { position: currentPosition });
234
- setTimeout(() => {
235
- Toast.info('Second toast message', { position: currentPosition });
236
- }, 500);
237
- setTimeout(() => {
238
- Toast.warning('Third toast message', { position: currentPosition });
239
- }, 1000);
240
- setTimeout(() => {
241
- Toast.error('Fourth toast message', { position: currentPosition });
242
- }, 1500);
243
- }
244
-
245
- function clearAll() {
246
- Toast.clear();
247
- }
248
-
249
- // Expose functions to window for onclick handlers
250
- window.showToast = showToast;
251
- window.showEventToast = showEventToast;
252
- window.setPosition = setPosition;
253
- window.showCustom = showCustom;
254
- window.showMultiple = showMultiple;
255
- window.clearAll = clearAll;
256
- </script>
257
- </head>
258
- <body>
259
- <div class="container">
260
- <h1>Snice Toast Component</h1>
261
-
262
- <div class="section">
263
- <h2>Basic Toasts</h2>
264
- <div class="button-group">
265
- <button class="success" onclick="showToast('success')">Success Toast</button>
266
- <button class="error" onclick="showToast('error')">Error Toast</button>
267
- <button class="warning" onclick="showToast('warning')">Warning Toast</button>
268
- <button class="info" onclick="showToast('info')">Info Toast</button>
269
- </div>
270
- </div>
271
-
272
- <div class="section">
273
- <h2>Position</h2>
274
- <div class="position-controls">
275
- <button onclick="setPosition('top-left')">↖ Top Left</button>
276
- <button onclick="setPosition('top-center')">↑ Top Center</button>
277
- <button onclick="setPosition('top-right')">↗ Top Right</button>
278
- <button onclick="setPosition('bottom-left')">↙ Bottom Left</button>
279
- <button onclick="setPosition('bottom-center')">↓ Bottom Center</button>
280
- <button class="active" onclick="setPosition('bottom-right')">↘ Bottom Right</button>
281
- </div>
282
- </div>
283
-
284
- <div class="section">
285
- <h2>Custom Toast</h2>
286
- <div class="custom-message">
287
- <input type="text" id="custom-input" placeholder="Enter custom message...">
288
- <button onclick="showCustom()">Show Custom</button>
289
- </div>
290
- <div class="options">
291
- <label>
292
- <input type="checkbox" id="closable" checked>
293
- Closable
294
- </label>
295
- <label>
296
- <input type="checkbox" id="has-icon" checked>
297
- Show Icon
298
- </label>
299
- <label>
300
- Duration (sec):
301
- <input type="number" id="duration" value="4" min="0" max="30" style="width: 60px;">
302
- </label>
303
- </div>
304
- </div>
305
-
306
- <div class="section">
307
- <h2>Event-Based Triggering</h2>
308
- <p style="font-size: var(--snice-font-size-sm); color: var(--snice-color-text-secondary); margin-bottom: var(--snice-spacing-md);">
309
- Toasts can be triggered via events that bubble up to the document
310
- </p>
311
- <div class="button-group">
312
- <button class="success" onclick="showEventToast('success')">Event Success</button>
313
- <button class="error" onclick="showEventToast('error')">Event Error</button>
314
- <button class="warning" onclick="showEventToast('warning')">Event Warning</button>
315
- <button class="info" onclick="showEventToast('info')">Event Info</button>
316
- </div>
317
- </div>
318
-
319
- <div class="section">
320
- <h2>Actions</h2>
321
- <div class="button-group">
322
- <button onclick="showMultiple()">Show Multiple</button>
323
- <button onclick="clearAll()">Clear All</button>
324
- </div>
325
- </div>
326
-
327
- </div>
328
- </body>
329
- </html>
package/components/toast/snice-toast-container.ts DELETED
@@ -1,256 +0,0 @@
1
- import { element, property, ready, dispose } from 'snice';
2
- import { getSymbol } from '../symbols';
3
- import type { ToastPosition, ToastOptions, ToastEventDetail, ToastResponseEventDetail, SniceToastContainerElement } from './snice-toast.types';
4
- import './snice-toast';
5
-
6
- // Symbols for global state management
7
- const TOAST_CONTAINER = getSymbol('@snice/toast', 'container');
8
- const TOAST_LISTENER_INITIALIZED = getSymbol('@snice/toast', 'listener-initialized');
9
-
10
- // Namespaced events
11
- const TOAST_EVENT_SHOW = '@snice/show-toast';
12
- const TOAST_EVENT_RESPONSE = '@snice/toast-response';
13
-
14
- @element('snice-toast-container')
15
- export class SniceToastContainer extends HTMLElement implements SniceToastContainerElement {
16
- @property({ reflect: true })
17
- position: ToastPosition = 'bottom-center';
18
-
19
- private toastIdCounter = 1;
20
- private toasts: Map<string, HTMLElement> = new Map();
21
-
22
- html() {
23
- return /*html*/`
24
- <div class="toast-wrapper"></div>
25
- `;
26
- }
27
-
28
- css() {
29
- return /*css*/`
30
- :host {
31
- position: fixed;
32
- z-index: 10000;
33
- pointer-events: none;
34
- display: flex;
35
- flex-direction: column;
36
- gap: 12px;
37
- padding: 16px;
38
- }
39
-
40
- /* Position variants */
41
- :host([position="top-left"]) {
42
- top: 0;
43
- left: 0;
44
- align-items: flex-start;
45
- }
46
-
47
- :host([position="top-center"]) {
48
- top: 0;
49
- left: 50%;
50
- transform: translateX(-50%);
51
- align-items: center;
52
- }
53
-
54
- :host([position="top-right"]) {
55
- top: 0;
56
- right: 0;
57
- align-items: flex-end;
58
- }
59
-
60
- :host([position="bottom-left"]) {
61
- bottom: 0;
62
- left: 0;
63
- align-items: flex-start;
64
- }
65
-
66
- :host([position="bottom-center"]) {
67
- bottom: 0;
68
- left: 50%;
69
- transform: translateX(-50%);
70
- align-items: center;
71
- }
72
-
73
- :host([position="bottom-right"]) {
74
- bottom: 0;
75
- right: 0;
76
- align-items: flex-end;
77
- }
78
-
79
- .toast-wrapper {
80
- display: flex;
81
- flex-direction: column;
82
- gap: 8px;
83
- }
84
- `;
85
- }
86
-
87
- @ready()
88
- init() {
89
- // Register as global container if none exists
90
- if (!(globalThis as any)[TOAST_CONTAINER]) {
91
- (globalThis as any)[TOAST_CONTAINER] = this;
92
- }
93
- // Initialize event listener if not already done
94
- initializeGlobalEventListener();
95
- }
96
-
97
- @dispose()
98
- cleanup() {
99
- // Unregister as global container
100
- if ((globalThis as any)[TOAST_CONTAINER] === this) {
101
- (globalThis as any)[TOAST_CONTAINER] = null;
102
- }
103
-
104
- // Clean up all toasts
105
- this.toasts.clear();
106
- }
107
-
108
- show(message: string, options: ToastOptions = {}): string {
109
- const id = options.id || `toast-${this.toastIdCounter++}`;
110
- const type = options.type || 'info';
111
- const duration = options.duration !== undefined ? options.duration : 4000;
112
- const closable = options.closable !== undefined ? options.closable : true;
113
- const icon = options.icon !== undefined ? options.icon : true;
114
-
115
- // Create toast element
116
- const toast = document.createElement('snice-toast') as any;
117
- toast.setAttribute('toast-id', id);
118
- toast.type = type;
119
- toast.message = message;
120
- toast.closable = closable;
121
- toast.icon = icon;
122
-
123
- // Add to container
124
- const wrapper = this.shadowRoot?.querySelector('.toast-wrapper');
125
- if (wrapper) {
126
- // Add based on position (top positions prepend, bottom positions append)
127
- if (this.position.startsWith('bottom')) {
128
- wrapper.appendChild(toast);
129
- } else {
130
- wrapper.insertBefore(toast, wrapper.firstChild);
131
- }
132
- }
133
-
134
- // Store reference
135
- this.toasts.set(id, toast);
136
-
137
- // Set auto-dismiss timer if duration > 0
138
- if (duration > 0) {
139
- setTimeout(() => {
140
- this.hide(id);
141
- }, duration);
142
- }
143
-
144
- // Listen for close event from toast
145
- toast.addEventListener('close-toast', () => {
146
- this.hide(id);
147
- });
148
-
149
- return id;
150
- }
151
-
152
- hide(id: string): void {
153
- const toast = this.toasts.get(id);
154
- if (!toast) return;
155
-
156
- // Trigger hide animation on toast
157
- (toast as any).hide();
158
-
159
- // Remove after animation completes
160
- toast.addEventListener('animationend', () => {
161
- toast.remove();
162
- this.toasts.delete(id);
163
- }, { once: true });
164
- }
165
-
166
- clear(): void {
167
- this.toasts.forEach((_, id) => this.hide(id));
168
- }
169
- }
170
-
171
- // Static Toast API
172
- export class Toast {
173
- private static ensureContainer(position: ToastPosition = 'bottom-center'): SniceToastContainer {
174
- // Use existing global container if available
175
- const globalContainer = (globalThis as any)[TOAST_CONTAINER] as SniceToastContainer;
176
- if (globalContainer) {
177
- // Update position if different
178
- if (globalContainer.position !== position) {
179
- globalContainer.position = position;
180
- }
181
- return globalContainer;
182
- }
183
-
184
- // Create new container
185
- const container = document.createElement('snice-toast-container') as SniceToastContainer;
186
- container.position = position;
187
- document.body.appendChild(container);
188
- return container;
189
- }
190
-
191
- static show(message: string, options: ToastOptions = {}): string {
192
- const container = Toast.ensureContainer(options.position);
193
- return container.show(message, options);
194
- }
195
-
196
- static success(message: string, options: ToastOptions = {}): string {
197
- return Toast.show(message, { ...options, type: 'success' });
198
- }
199
-
200
- static error(message: string, options: ToastOptions = {}): string {
201
- return Toast.show(message, { ...options, type: 'error' });
202
- }
203
-
204
- static warning(message: string, options: ToastOptions = {}): string {
205
- return Toast.show(message, { ...options, type: 'warning' });
206
- }
207
-
208
- static info(message: string, options: ToastOptions = {}): string {
209
- return Toast.show(message, { ...options, type: 'info' });
210
- }
211
-
212
- static hide(id: string): void {
213
- const globalContainer = (globalThis as any)[TOAST_CONTAINER] as SniceToastContainer;
214
- if (globalContainer) {
215
- globalContainer.hide(id);
216
- }
217
- }
218
-
219
- static clear(): void {
220
- const globalContainer = (globalThis as any)[TOAST_CONTAINER] as SniceToastContainer;
221
- if (globalContainer) {
222
- globalContainer.clear();
223
- }
224
- }
225
- }
226
-
227
- // Global event listener for toast events
228
- function initializeGlobalEventListener() {
229
- if ((globalThis as any)[TOAST_LISTENER_INITIALIZED]) return;
230
-
231
- document.documentElement.addEventListener(TOAST_EVENT_SHOW, (event: Event) => {
232
- const customEvent = event as CustomEvent<ToastEventDetail>;
233
- const { message, options = {} } = customEvent.detail;
234
-
235
- // Show the toast
236
- const toastId = Toast.show(message, options);
237
-
238
- // Dispatch response event with toast ID if the original event requested it
239
- if (customEvent.detail.options?.id) {
240
- const responseEvent = new CustomEvent<ToastResponseEventDetail>(TOAST_EVENT_RESPONSE, {
241
- detail: { toastId },
242
- bubbles: true,
243
- composed: true
244
- });
245
- (customEvent.target as HTMLElement)?.dispatchEvent(responseEvent);
246
- }
247
- });
248
-
249
- (globalThis as any)[TOAST_LISTENER_INITIALIZED] = true;
250
- }
251
-
252
- // Initialize listener on module load
253
- initializeGlobalEventListener();
254
-
255
- // Export for convenience
256
- export default Toast;