snice 2.1.5 → 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 (364) 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 +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.esm.min.js +1 -1
  207. package/dist/index.iife.js +1 -1
  208. package/dist/index.iife.min.js +1 -1
  209. package/dist/symbols.esm.js +1 -1
  210. package/dist/transitions.esm.js +1 -1
  211. package/package.json +10 -6
  212. package/components/accordion/demo.html +0 -403
  213. package/components/accordion/snice-accordion-item.css +0 -85
  214. package/components/accordion/snice-accordion-item.ts +0 -226
  215. package/components/accordion/snice-accordion.css +0 -31
  216. package/components/accordion/snice-accordion.ts +0 -182
  217. package/components/accordion/snice-accordion.types.ts +0 -32
  218. package/components/alert/demo.html +0 -445
  219. package/components/alert/snice-alert.css +0 -195
  220. package/components/alert/snice-alert.ts +0 -141
  221. package/components/avatar/demo.html +0 -598
  222. package/components/avatar/snice-avatar.css +0 -131
  223. package/components/avatar/snice-avatar.ts +0 -136
  224. package/components/avatar/snice-avatar.types.ts +0 -13
  225. package/components/badge/demo.html +0 -523
  226. package/components/badge/snice-badge.css +0 -161
  227. package/components/badge/snice-badge.ts +0 -117
  228. package/components/breadcrumbs/demo.html +0 -404
  229. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  230. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  231. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  232. package/components/breadcrumbs/snice-crumb.ts +0 -26
  233. package/components/button/demo.html +0 -42
  234. package/components/button/snice-button.css +0 -230
  235. package/components/button/snice-button.ts +0 -169
  236. package/components/button/snice-button.types.ts +0 -25
  237. package/components/card/demo.html +0 -525
  238. package/components/card/snice-card.css +0 -140
  239. package/components/card/snice-card.ts +0 -102
  240. package/components/checkbox/demo.html +0 -253
  241. package/components/checkbox/snice-checkbox.css +0 -164
  242. package/components/checkbox/snice-checkbox.ts +0 -223
  243. package/components/checkbox/snice-checkbox.types.ts +0 -22
  244. package/components/chip/demo.html +0 -383
  245. package/components/chip/snice-chip.css +0 -195
  246. package/components/chip/snice-chip.ts +0 -139
  247. package/components/chip/snice-chip.types.ts +0 -15
  248. package/components/date-picker/README.md +0 -233
  249. package/components/date-picker/demo.html +0 -191
  250. package/components/date-picker/snice-date-picker.css +0 -330
  251. package/components/date-picker/snice-date-picker.ts +0 -777
  252. package/components/date-picker/snice-date-picker.types.ts +0 -83
  253. package/components/divider/demo.html +0 -233
  254. package/components/divider/snice-divider.css +0 -155
  255. package/components/divider/snice-divider.ts +0 -69
  256. package/components/drawer/demo.html +0 -328
  257. package/components/drawer/snice-drawer.css +0 -476
  258. package/components/drawer/snice-drawer.ts +0 -287
  259. package/components/drawer/snice-drawer.types.ts +0 -17
  260. package/components/global.d.ts +0 -14
  261. package/components/input/demo.html +0 -303
  262. package/components/input/snice-input.css +0 -257
  263. package/components/input/snice-input.ts +0 -442
  264. package/components/input/snice-input.types.ts +0 -59
  265. package/components/input/test.html +0 -77
  266. package/components/layout/README.md +0 -260
  267. package/components/layout/demo.html +0 -538
  268. package/components/layout/snice-layout-blog.css +0 -129
  269. package/components/layout/snice-layout-blog.ts +0 -48
  270. package/components/layout/snice-layout-card.css +0 -104
  271. package/components/layout/snice-layout-card.ts +0 -35
  272. package/components/layout/snice-layout-centered.css +0 -51
  273. package/components/layout/snice-layout-centered.ts +0 -22
  274. package/components/layout/snice-layout-dashboard.css +0 -98
  275. package/components/layout/snice-layout-dashboard.ts +0 -45
  276. package/components/layout/snice-layout-fullscreen.css +0 -72
  277. package/components/layout/snice-layout-fullscreen.ts +0 -34
  278. package/components/layout/snice-layout-landing.css +0 -92
  279. package/components/layout/snice-layout-landing.ts +0 -47
  280. package/components/layout/snice-layout-minimal.css +0 -16
  281. package/components/layout/snice-layout-minimal.ts +0 -19
  282. package/components/layout/snice-layout-sidebar.css +0 -117
  283. package/components/layout/snice-layout-sidebar.ts +0 -48
  284. package/components/layout/snice-layout-split.css +0 -103
  285. package/components/layout/snice-layout-split.ts +0 -29
  286. package/components/layout/snice-layout.css +0 -72
  287. package/components/layout/snice-layout.ts +0 -35
  288. package/components/login/demo-auth-controller.ts +0 -185
  289. package/components/login/demo.html +0 -470
  290. package/components/login/snice-login.css +0 -204
  291. package/components/login/snice-login.ts +0 -326
  292. package/components/login/snice-login.types.ts +0 -29
  293. package/components/modal/demo.html +0 -291
  294. package/components/modal/snice-modal.css +0 -203
  295. package/components/modal/snice-modal.ts +0 -233
  296. package/components/modal/snice-modal.types.ts +0 -21
  297. package/components/pagination/demo.html +0 -395
  298. package/components/pagination/snice-pagination.ts +0 -333
  299. package/components/pagination/snice-pagination.types.ts +0 -21
  300. package/components/progress/demo.html +0 -510
  301. package/components/progress/snice-progress.css +0 -267
  302. package/components/progress/snice-progress.ts +0 -247
  303. package/components/progress/snice-progress.types.ts +0 -19
  304. package/components/radio/demo.html +0 -287
  305. package/components/radio/snice-radio.css +0 -171
  306. package/components/radio/snice-radio.ts +0 -218
  307. package/components/radio/snice-radio.types.ts +0 -21
  308. package/components/select/demo.html +0 -511
  309. package/components/select/snice-option.ts +0 -52
  310. package/components/select/snice-select.css +0 -392
  311. package/components/select/snice-select.ts +0 -796
  312. package/components/select/snice-select.types.ts +0 -55
  313. package/components/skeleton/demo.html +0 -514
  314. package/components/skeleton/snice-skeleton.css +0 -109
  315. package/components/skeleton/snice-skeleton.ts +0 -126
  316. package/components/switch/demo.html +0 -284
  317. package/components/switch/snice-switch.css +0 -221
  318. package/components/switch/snice-switch.ts +0 -229
  319. package/components/switch/snice-switch.types.ts +0 -23
  320. package/components/symbols.ts +0 -23
  321. package/components/table/demo-table-controller.ts +0 -100
  322. package/components/table/demo.html +0 -480
  323. package/components/table/snice-cell-boolean.ts +0 -112
  324. package/components/table/snice-cell-date.ts +0 -210
  325. package/components/table/snice-cell-duration.ts +0 -91
  326. package/components/table/snice-cell-filesize.ts +0 -90
  327. package/components/table/snice-cell-number.ts +0 -165
  328. package/components/table/snice-cell-progress.ts +0 -83
  329. package/components/table/snice-cell-rating.ts +0 -82
  330. package/components/table/snice-cell-sparkline.ts +0 -253
  331. package/components/table/snice-cell-text.ts +0 -125
  332. package/components/table/snice-cell.css +0 -296
  333. package/components/table/snice-cell.ts +0 -473
  334. package/components/table/snice-column.ts +0 -353
  335. package/components/table/snice-header.css +0 -243
  336. package/components/table/snice-header.ts +0 -261
  337. package/components/table/snice-progress.ts +0 -66
  338. package/components/table/snice-rating.ts +0 -45
  339. package/components/table/snice-row.css +0 -255
  340. package/components/table/snice-row.ts +0 -331
  341. package/components/table/snice-table.css +0 -241
  342. package/components/table/snice-table.ts +0 -737
  343. package/components/table/snice-table.types.ts +0 -158
  344. package/components/tabs/demo.html +0 -487
  345. package/components/tabs/snice-tab-panel.css +0 -264
  346. package/components/tabs/snice-tab-panel.ts +0 -47
  347. package/components/tabs/snice-tab.css +0 -96
  348. package/components/tabs/snice-tab.ts +0 -65
  349. package/components/tabs/snice-tabs.css +0 -189
  350. package/components/tabs/snice-tabs.ts +0 -332
  351. package/components/tabs/snice-tabs.types.ts +0 -28
  352. package/components/theme/theme.css +0 -234
  353. package/components/toast/demo.html +0 -329
  354. package/components/toast/snice-toast-container.ts +0 -256
  355. package/components/toast/snice-toast.css +0 -213
  356. package/components/toast/snice-toast.ts +0 -276
  357. package/components/toast/snice-toast.types.ts +0 -35
  358. package/components/tooltip/demo.html +0 -350
  359. package/components/tooltip/snice-tooltip-portal.css +0 -79
  360. package/components/tooltip/snice-tooltip.css +0 -117
  361. package/components/tooltip/snice-tooltip.ts +0 -612
  362. package/components/tooltip/snice-tooltip.types.ts +0 -32
  363. package/components/transitions.ts +0 -94
  364. package/components/tsconfig.json +0 -18
package/components/date-picker/snice-date-picker.types.ts DELETED
@@ -1,83 +0,0 @@
1
- export type DatePickerSize = 'small' | 'medium' | 'large';
2
- export type DatePickerVariant = 'outlined' | 'filled' | 'underlined';
3
- export type DateFormat = 'yyyy-mm-dd' | 'mm/dd/yyyy' | 'dd/mm/yyyy' | 'yyyy/mm/dd' | 'dd-mm-yyyy' | 'mm-dd-yyyy' | 'mmmm dd, yyyy';
4
-
5
- export interface DatePickerValue {
6
- date: Date | null;
7
- formatted: string;
8
- iso: string;
9
- }
10
-
11
- export interface SniceDatePickerElement extends HTMLElement {
12
- size: DatePickerSize;
13
- variant: DatePickerVariant;
14
- value: string;
15
- format: DateFormat;
16
- placeholder: string;
17
- label: string;
18
- helperText: string;
19
- errorText: string;
20
- disabled: boolean;
21
- readonly: boolean;
22
- required: boolean;
23
- invalid: boolean;
24
- clearable: boolean;
25
- min: string;
26
- max: string;
27
- name: string;
28
- showCalendar: boolean;
29
- firstDayOfWeek: number; // 0 = Sunday, 1 = Monday, etc.
30
-
31
- // Methods
32
- focus(): void;
33
- blur(): void;
34
- clear(): void;
35
- open(): void;
36
- close(): void;
37
- selectDate(date: Date): void;
38
- goToMonth(year: number, month: number): void;
39
- goToToday(): void;
40
- checkValidity(): boolean;
41
- reportValidity(): boolean;
42
- setCustomValidity(message: string): void;
43
- }
44
-
45
- export interface DatePickerChangeDetail {
46
- value: string;
47
- date: Date | null;
48
- formatted: string;
49
- iso: string;
50
- datePicker: SniceDatePickerElement;
51
- }
52
-
53
- export interface DatePickerInputDetail {
54
- value: string;
55
- datePicker: SniceDatePickerElement;
56
- }
57
-
58
- export interface DatePickerFocusDetail {
59
- datePicker: SniceDatePickerElement;
60
- }
61
-
62
- export interface DatePickerBlurDetail {
63
- datePicker: SniceDatePickerElement;
64
- }
65
-
66
- export interface DatePickerOpenDetail {
67
- datePicker: SniceDatePickerElement;
68
- }
69
-
70
- export interface DatePickerCloseDetail {
71
- datePicker: SniceDatePickerElement;
72
- }
73
-
74
- export interface DatePickerClearDetail {
75
- datePicker: SniceDatePickerElement;
76
- }
77
-
78
- export interface DatePickerSelectDetail {
79
- date: Date;
80
- formatted: string;
81
- iso: string;
82
- datePicker: SniceDatePickerElement;
83
- }
package/components/divider/demo.html DELETED
@@ -1,233 +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 Divider Demo</title>
7
- <style>
8
- body {
9
- font-family: system-ui, -apple-system, sans-serif;
10
- padding: 40px;
11
- line-height: 1.6;
12
- background: #f5f5f5;
13
- }
14
-
15
- .container {
16
- max-width: 900px;
17
- margin: 0 auto;
18
- background: white;
19
- padding: 40px;
20
- border-radius: 8px;
21
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
22
- }
23
-
24
- h1 {
25
- color: #333;
26
- border-bottom: 2px solid #e0e0e0;
27
- padding-bottom: 10px;
28
- }
29
-
30
- h2 {
31
- color: #555;
32
- margin-top: 30px;
33
- }
34
-
35
- .demo-section {
36
- margin: 30px 0;
37
- padding: 20px;
38
- background: #fafafa;
39
- border-radius: 4px;
40
- }
41
-
42
- .demo-label {
43
- display: block;
44
- margin-bottom: 8px;
45
- font-weight: 500;
46
- color: #666;
47
- font-size: 14px;
48
- }
49
-
50
- .vertical-demo {
51
- display: flex;
52
- align-items: center;
53
- height: 100px;
54
- gap: 20px;
55
- }
56
-
57
- .content-block {
58
- padding: 20px;
59
- background: #f0f0f0;
60
- border-radius: 4px;
61
- margin: 10px 0;
62
- }
63
-
64
- .flex-container {
65
- display: flex;
66
- align-items: center;
67
- gap: 20px;
68
- }
69
-
70
- .box {
71
- width: 100px;
72
- height: 100px;
73
- background: #3b82f6;
74
- color: white;
75
- display: flex;
76
- align-items: center;
77
- justify-content: center;
78
- border-radius: 4px;
79
- }
80
-
81
- code {
82
- background: #f0f0f0;
83
- padding: 2px 6px;
84
- border-radius: 3px;
85
- font-size: 0.9em;
86
- }
87
- </style>
88
- </head>
89
- <body>
90
- <div class="container">
91
- <h1>Snice Divider Component Demo</h1>
92
-
93
- <div class="demo-section">
94
- <h2>Basic Dividers</h2>
95
-
96
- <div>
97
- <span class="demo-label">Default Horizontal Divider</span>
98
- <snice-divider></snice-divider>
99
- </div>
100
-
101
- <div>
102
- <span class="demo-label">Horizontal with No Spacing</span>
103
- <snice-divider spacing="none"></snice-divider>
104
- </div>
105
-
106
- <div>
107
- <span class="demo-label">Horizontal with Large Spacing</span>
108
- <snice-divider spacing="large"></snice-divider>
109
- </div>
110
- </div>
111
-
112
- <div class="demo-section">
113
- <h2>Variants</h2>
114
-
115
- <div>
116
- <span class="demo-label">Solid (Default)</span>
117
- <snice-divider variant="solid"></snice-divider>
118
- </div>
119
-
120
- <div>
121
- <span class="demo-label">Dashed</span>
122
- <snice-divider variant="dashed"></snice-divider>
123
- </div>
124
-
125
- <div>
126
- <span class="demo-label">Dotted</span>
127
- <snice-divider variant="dotted"></snice-divider>
128
- </div>
129
- </div>
130
-
131
- <div class="demo-section">
132
- <h2>Text Dividers</h2>
133
-
134
- <div>
135
- <span class="demo-label">Center Aligned Text</span>
136
- <snice-divider text="OR" align="center"></snice-divider>
137
- </div>
138
-
139
- <div>
140
- <span class="demo-label">Start Aligned Text</span>
141
- <snice-divider text="Section Title" align="start"></snice-divider>
142
- </div>
143
-
144
- <div>
145
- <span class="demo-label">End Aligned Text</span>
146
- <snice-divider text="End of Section" align="end"></snice-divider>
147
- </div>
148
-
149
- <div>
150
- <span class="demo-label">Dashed with Text</span>
151
- <snice-divider text="Choose One" variant="dashed"></snice-divider>
152
- </div>
153
-
154
- <div>
155
- <span class="demo-label">Dotted with Text</span>
156
- <snice-divider text="Continue" variant="dotted"></snice-divider>
157
- </div>
158
- </div>
159
-
160
- <div class="demo-section">
161
- <h2>Vertical Dividers</h2>
162
-
163
- <div class="vertical-demo">
164
- <div class="box">Item 1</div>
165
- <snice-divider orientation="vertical"></snice-divider>
166
- <div class="box">Item 2</div>
167
- <snice-divider orientation="vertical" variant="dashed"></snice-divider>
168
- <div class="box">Item 3</div>
169
- <snice-divider orientation="vertical" variant="dotted"></snice-divider>
170
- <div class="box">Item 4</div>
171
- </div>
172
- </div>
173
-
174
- <div class="demo-section">
175
- <h2>In Context</h2>
176
-
177
- <div class="content-block">
178
- <h3>Article Title</h3>
179
- <p>This is the first paragraph of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
180
- <snice-divider spacing="large"></snice-divider>
181
- <p>This is the second paragraph after a divider. Sed do eiusmod tempor incididunt ut labore.</p>
182
- </div>
183
-
184
- <div class="content-block">
185
- <h3>Login Form</h3>
186
- <p>Username: user@example.com</p>
187
- <p>Password: ********</p>
188
- <snice-divider text="OR" spacing="large"></snice-divider>
189
- <p>Sign in with Google</p>
190
- <p>Sign in with GitHub</p>
191
- </div>
192
-
193
- <div class="content-block">
194
- <h3>Navigation Menu</h3>
195
- <div class="flex-container">
196
- <span>Home</span>
197
- <snice-divider orientation="vertical" spacing="small"></snice-divider>
198
- <span>About</span>
199
- <snice-divider orientation="vertical" spacing="small"></snice-divider>
200
- <span>Services</span>
201
- <snice-divider orientation="vertical" spacing="small"></snice-divider>
202
- <span>Contact</span>
203
- </div>
204
- </div>
205
- </div>
206
-
207
- <div class="demo-section">
208
- <h2>Custom Styling</h2>
209
-
210
- <div>
211
- <span class="demo-label">Custom Color (via CSS variable)</span>
212
- <snice-divider style="--divider-color: #ef4444;"></snice-divider>
213
- </div>
214
-
215
- <div>
216
- <span class="demo-label">Thick Divider</span>
217
- <snice-divider style="--divider-thickness: 3px;"></snice-divider>
218
- </div>
219
-
220
- <div>
221
- <span class="demo-label">Custom Text Background</span>
222
- <div style="background: linear-gradient(to right, #fce7f3, #ddd6fe); padding: 20px;">
223
- <snice-divider text="Gradient Background" text-background="transparent"></snice-divider>
224
- </div>
225
- </div>
226
- </div>
227
- </div>
228
-
229
- <script type="module">
230
- import './snice-divider.ts';
231
- </script>
232
- </body>
233
- </html>
package/components/divider/snice-divider.css DELETED
@@ -1,155 +0,0 @@
1
- :host {
2
- display: block;
3
- --divider-color: #e5e7eb;
4
- --divider-thickness: 1px;
5
- --divider-text-bg: transparent;
6
- --divider-text-padding: 0 1rem; /* 0 16px */
7
- --divider-text-gap: 1rem; /* 16px */
8
- }
9
-
10
- :host([orientation="vertical"]) {
11
- display: inline-block;
12
- height: 100%;
13
- }
14
-
15
- .divider {
16
- background: var(--divider-color);
17
- width: 100%;
18
- height: var(--divider-thickness);
19
- }
20
-
21
- /* Container for text dividers */
22
- .divider-container {
23
- display: flex;
24
- align-items: center;
25
- width: 100%;
26
- position: relative;
27
- }
28
-
29
- .divider-text {
30
- flex-shrink: 0;
31
- padding: var(--divider-text-padding);
32
- background: var(--divider-text-bg);
33
- color: #6b7280;
34
- font-size: 0.875rem; /* 14px */
35
- font-weight: 500;
36
- white-space: nowrap;
37
- margin: 0 var(--divider-text-gap);
38
- }
39
-
40
- .divider--before,
41
- .divider--after {
42
- flex: 1;
43
- height: var(--divider-thickness);
44
- background: var(--divider-color);
45
- }
46
-
47
- /* Align text */
48
- :host([align="start"]) .divider--before {
49
- flex: 0 0 2rem; /* 32px */
50
- }
51
-
52
- :host([align="end"]) .divider--after {
53
- flex: 0 0 2rem; /* 32px */
54
- }
55
-
56
- /* Vertical override */
57
- :host([orientation="vertical"]) .divider {
58
- width: var(--divider-thickness);
59
- height: 100%;
60
- }
61
-
62
- /* Capped ends */
63
- :host([capped]) .divider {
64
- border-radius: var(--divider-thickness);
65
- }
66
-
67
- :host([capped]) .divider--before,
68
- :host([capped]) .divider--after {
69
- border-radius: var(--divider-thickness);
70
- }
71
-
72
- /* Variants */
73
- :host([variant="solid"]) .divider {
74
- background: var(--divider-color);
75
- }
76
-
77
- :host([variant="dashed"]) .divider {
78
- background: linear-gradient(to right, var(--divider-color) 50%, transparent 50%);
79
- background-size: 8px var(--divider-thickness);
80
- }
81
-
82
- :host([variant="dashed"][orientation="vertical"]) .divider {
83
- background: linear-gradient(to bottom, var(--divider-color) 50%, transparent 50%);
84
- background-size: var(--divider-thickness) 8px;
85
- }
86
-
87
- :host([variant="dotted"]) .divider {
88
- background: none;
89
- background-image: radial-gradient(circle, var(--divider-color) 25%, transparent 25%);
90
- background-size: 4px 4px;
91
- background-position: 0 center;
92
- background-repeat: repeat-x;
93
- }
94
-
95
- :host([variant="dotted"][orientation="vertical"]) .divider {
96
- background-image: radial-gradient(circle, var(--divider-color) 25%, transparent 25%);
97
- background-size: 4px 4px;
98
- background-position: center 0;
99
- background-repeat: repeat-y;
100
- width: var(--divider-thickness);
101
- }
102
-
103
- /* Spacing */
104
- :host([spacing="none"]) {
105
- margin: 0;
106
- }
107
-
108
- :host([spacing="small"]) {
109
- margin: 0.5rem 0; /* 8px 0 */
110
- }
111
-
112
- :host([spacing="medium"]) {
113
- margin: 1rem 0; /* 16px 0 */
114
- }
115
-
116
- :host([spacing="large"]) {
117
- margin: 1.5rem 0; /* 24px 0 */
118
- }
119
-
120
- :host([orientation="vertical"][spacing="none"]) {
121
- margin: 0;
122
- }
123
-
124
- :host([orientation="vertical"][spacing="small"]) {
125
- margin: 0 0.5rem; /* 0 8px */
126
- }
127
-
128
- :host([orientation="vertical"][spacing="medium"]) {
129
- margin: 0 1rem; /* 0 16px */
130
- }
131
-
132
- :host([orientation="vertical"][spacing="large"]) {
133
- margin: 0 1.5rem; /* 0 24px */
134
- }
135
-
136
- /* Text divider variants */
137
- .divider-container .divider--before,
138
- .divider-container .divider--after {
139
- background: var(--divider-color);
140
- }
141
-
142
- :host([variant="dashed"]) .divider-container .divider--before,
143
- :host([variant="dashed"]) .divider-container .divider--after {
144
- background: linear-gradient(to right, var(--divider-color) 50%, transparent 50%);
145
- background-size: 8px var(--divider-thickness);
146
- }
147
-
148
- :host([variant="dotted"]) .divider-container .divider--before,
149
- :host([variant="dotted"]) .divider-container .divider--after {
150
- background: none;
151
- background-image: radial-gradient(circle, var(--divider-color) 25%, transparent 25%);
152
- background-size: 4px 4px;
153
- background-position: 0 center;
154
- background-repeat: repeat-x;
155
- }
package/components/divider/snice-divider.ts DELETED
@@ -1,69 +0,0 @@
1
- import { element, property, watch, query } from 'snice';
2
- import css from './snice-divider.css?inline';
3
- import type { DividerOrientation, DividerVariant, DividerAlign, DividerSpacing, SniceDividerElement } from './snice-divider.types';
4
-
5
- @element('snice-divider')
6
- export class SniceDivider extends HTMLElement implements SniceDividerElement {
7
- @property({ reflect: true })
8
- orientation: DividerOrientation = 'horizontal';
9
-
10
- @property({ reflect: true })
11
- variant: DividerVariant = 'solid';
12
-
13
- @property({ reflect: true })
14
- spacing: DividerSpacing = 'medium';
15
-
16
- @property({ reflect: true })
17
- align: DividerAlign = 'center';
18
-
19
- @property({ reflect: true })
20
- text = '';
21
-
22
- @property({ attribute: 'text-background', reflect: true })
23
- textBackground = '';
24
-
25
- @property({ reflect: true })
26
- color = '';
27
-
28
- @property({ type: Boolean, reflect: true })
29
- capped = false;
30
-
31
- @query('.divider-text')
32
- textElement?: HTMLElement;
33
-
34
- html() {
35
- if (this.text && this.orientation === 'horizontal') {
36
- return /*html*/`
37
- <div class="divider-container" role="separator" aria-orientation="${this.orientation}">
38
- <div class="divider divider--before"></div>
39
- <span class="divider-text">${this.text}</span>
40
- <div class="divider divider--after"></div>
41
- </div>
42
- `;
43
- }
44
- return /*html*/`<div class="divider" role="separator" aria-orientation="${this.orientation}"></div>`;
45
- }
46
-
47
- css() {
48
- return css;
49
- }
50
-
51
- @watch('text')
52
- updateText() {
53
- if (this.textElement) {
54
- this.textElement.textContent = this.text;
55
- }
56
- }
57
-
58
- @watch('textBackground')
59
- updateTextBackground() {
60
- this.style.setProperty('--divider-text-bg', this.textBackground);
61
- }
62
-
63
- @watch('color')
64
- updateColor() {
65
- if (this.color) {
66
- this.style.setProperty('--divider-color', this.color);
67
- }
68
- }
69
- }