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/demo.html DELETED
@@ -1,191 +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>Date Picker Test</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
11
- padding: var(--snice-spacing-xl, 2rem);
12
- background: var(--snice-color-background, #f9fafb);
13
- color: var(--snice-color-text, #374151);
14
- }
15
-
16
- .container {
17
- max-width: 600px;
18
- margin: 0 auto;
19
- background: var(--snice-color-background-element, white);
20
- padding: var(--snice-spacing-xl, 2rem);
21
- border-radius: var(--snice-border-radius-lg, 8px);
22
- box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
23
- }
24
-
25
- .test-section {
26
- margin-bottom: var(--snice-spacing-xl, 2rem);
27
- padding: var(--snice-spacing-lg, 1.5rem);
28
- border: 1px solid var(--snice-color-border, #e5e7eb);
29
- border-radius: var(--snice-border-radius-lg, 6px);
30
- background: var(--snice-color-background-secondary, #f9fafb);
31
- }
32
-
33
- .test-section h3 {
34
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
35
- color: var(--snice-color-text, #374151);
36
- font-weight: var(--snice-font-weight-semibold, 600);
37
- }
38
-
39
- .form-grid {
40
- display: grid;
41
- gap: var(--snice-spacing-md, 1rem);
42
- }
43
-
44
- .form-row {
45
- display: grid;
46
- grid-template-columns: 1fr 1fr;
47
- gap: var(--snice-spacing-md, 1rem);
48
- }
49
-
50
- @media (max-width: 640px) {
51
- .form-row {
52
- grid-template-columns: 1fr;
53
- }
54
- }
55
- </style>
56
- </head>
57
- <body>
58
- <div class="container">
59
- <h1>Snice Date Picker Component Test</h1>
60
-
61
- <div class="test-section">
62
- <h3>Basic Date Picker</h3>
63
- <div class="form-grid">
64
- <snice-date-picker
65
- label="Select Date"
66
- placeholder="Choose a date"
67
- clearable>
68
- </snice-date-picker>
69
- </div>
70
- </div>
71
-
72
- <div class="test-section">
73
- <h3>Different Formats</h3>
74
- <div class="form-grid">
75
- <snice-date-picker
76
- label="US Format (MM/DD/YYYY)"
77
- format="mm/dd/yyyy">
78
- </snice-date-picker>
79
-
80
- <snice-date-picker
81
- label="European Format (DD/MM/YYYY)"
82
- format="dd/mm/yyyy">
83
- </snice-date-picker>
84
-
85
- <snice-date-picker
86
- label="ISO Format (YYYY-MM-DD)"
87
- format="yyyy-mm-dd">
88
- </snice-date-picker>
89
-
90
- <snice-date-picker
91
- label="Long Format (Month DD, YYYY)"
92
- format="mmmm dd, yyyy">
93
- </snice-date-picker>
94
- </div>
95
- </div>
96
-
97
- <div class="test-section">
98
- <h3>Sizes and Variants</h3>
99
- <div class="form-grid">
100
- <div class="form-row">
101
- <snice-date-picker
102
- label="Small Outlined"
103
- size="small"
104
- variant="outlined">
105
- </snice-date-picker>
106
-
107
- <snice-date-picker
108
- label="Medium Filled"
109
- size="medium"
110
- variant="filled">
111
- </snice-date-picker>
112
- </div>
113
-
114
- <div class="form-row">
115
- <snice-date-picker
116
- label="Large Underlined"
117
- size="large"
118
- variant="underlined">
119
- </snice-date-picker>
120
- </div>
121
- </div>
122
- </div>
123
-
124
- <div class="test-section">
125
- <h3>With Constraints</h3>
126
- <div class="form-grid">
127
- <snice-date-picker
128
- label="Date Range (This Month Only)"
129
- min="2024-12-01"
130
- max="2024-12-31"
131
- helper-text="Only dates in December 2024 are allowed">
132
- </snice-date-picker>
133
- </div>
134
- </div>
135
-
136
- <div class="test-section">
137
- <h3>States</h3>
138
- <div class="form-grid">
139
- <div class="form-row">
140
- <snice-date-picker
141
- label="Required Field"
142
- required
143
- helper-text="This field is required">
144
- </snice-date-picker>
145
-
146
- <snice-date-picker
147
- label="With Error"
148
- invalid
149
- error-text="Please select a valid date">
150
- </snice-date-picker>
151
- </div>
152
-
153
- <div class="form-row">
154
- <snice-date-picker
155
- label="Disabled"
156
- disabled
157
- value="2024-12-25">
158
- </snice-date-picker>
159
-
160
- <snice-date-picker
161
- label="Read Only"
162
- readonly
163
- value="2024-12-25">
164
- </snice-date-picker>
165
- </div>
166
- </div>
167
- </div>
168
- </div>
169
-
170
- <script type="module">
171
- import './snice-date-picker.ts';
172
-
173
- // Event listeners for component interaction
174
- document.addEventListener('@snice/datepicker-change', (e) => {
175
- // Handle date changes
176
- });
177
-
178
- document.addEventListener('@snice/datepicker-select', (e) => {
179
- // Handle date selection
180
- });
181
-
182
- document.addEventListener('@snice/datepicker-open', (e) => {
183
- // Handle calendar open
184
- });
185
-
186
- document.addEventListener('@snice/datepicker-close', (e) => {
187
- // Handle calendar close
188
- });
189
- </script>
190
- </body>
191
- </html>
package/components/date-picker/snice-date-picker.css DELETED
@@ -1,330 +0,0 @@
1
- /* Date Picker Component Styles */
2
- :host {
3
- display: block;
4
- position: relative;
5
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
6
- font-size: var(--snice-font-size-sm, 14px);
7
- line-height: var(--snice-line-height-normal, 1.4);
8
- min-height: 40px;
9
- }
10
-
11
- /* Wrapper */
12
- .date-picker-wrapper {
13
- display: flex;
14
- flex-direction: column;
15
- gap: 0.5rem;
16
- }
17
-
18
- /* Label */
19
- .label {
20
- font-weight: var(--snice-font-weight-medium, 500);
21
- color: var(--snice-color-text, #374151);
22
- margin-bottom: var(--snice-spacing-2xs, 0.25rem);
23
- }
24
-
25
- .label--required::after {
26
- content: '*';
27
- color: var(--snice-color-danger, #ef4444);
28
- margin-left: var(--snice-spacing-2xs, 0.25rem);
29
- }
30
-
31
- /* Input Container */
32
- .input-container {
33
- position: relative;
34
- display: flex;
35
- align-items: center;
36
- }
37
-
38
- /* Input Styles */
39
- .input {
40
- width: 100%;
41
- border: 1px solid var(--snice-color-border, #d1d5db);
42
- border-radius: var(--snice-border-radius-lg, 6px);
43
- padding: var(--snice-spacing-xs, 0.5rem) 3rem var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-sm, 0.75rem);
44
- font-size: inherit;
45
- line-height: var(--snice-line-height-normal, 1.5);
46
- background: var(--snice-color-background, white);
47
- color: var(--snice-color-text, #374151);
48
- transition: border-color var(--snice-transition-fast, 0.15s) ease, box-shadow var(--snice-transition-fast, 0.15s) ease;
49
- }
50
-
51
- .input:focus {
52
- outline: none;
53
- border-color: var(--snice-color-border-focus, #2563eb);
54
- box-shadow: 0 0 0 var(--snice-focus-ring-width, 3px) var(--snice-focus-ring-color, rgba(37, 99, 235, 0.1));
55
- }
56
-
57
- .input--small {
58
- padding: 0.375rem 2.75rem 0.375rem 0.625rem;
59
- font-size: 0.875rem;
60
- }
61
-
62
- .input--large {
63
- padding: 0.75rem 3.5rem 0.75rem 1rem;
64
- font-size: 1rem;
65
- }
66
-
67
- .input--filled {
68
- background: var(--snice-color-background-secondary, #f9fafb);
69
- border: 1px solid transparent;
70
- }
71
-
72
- .input--underlined {
73
- border: none;
74
- border-bottom: 1px solid #d1d5db;
75
- border-radius: 0;
76
- background: transparent;
77
- padding-left: 0;
78
- }
79
-
80
- .input--invalid {
81
- border-color: #ef4444;
82
- }
83
-
84
- .input--invalid:focus {
85
- border-color: #ef4444;
86
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
87
- }
88
-
89
- .input:disabled {
90
- background: var(--snice-color-background-secondary, #f9fafb);
91
- color: var(--snice-color-text-tertiary, #9ca3af);
92
- cursor: not-allowed;
93
- }
94
-
95
- .input:not(:disabled):not([readonly]) {
96
- cursor: pointer;
97
- }
98
-
99
- /* Button Styles */
100
- .calendar-toggle,
101
- .clear-button {
102
- position: absolute;
103
- right: 0.5rem;
104
- padding: 0.25rem /* 4px */;
105
- border: none;
106
- background: transparent;
107
- color: #6b7280;
108
- cursor: pointer;
109
- border-radius: 4px;
110
- transition: color 0.15s ease, background-color 0.15s ease;
111
- }
112
-
113
- .calendar-toggle {
114
- right: 0.5rem;
115
- }
116
-
117
- .clear-button {
118
- right: 2.5rem;
119
- }
120
-
121
- .calendar-toggle:hover,
122
- .clear-button:hover {
123
- color: #374151;
124
- background: #f3f4f6;
125
- }
126
-
127
- .calendar-toggle:disabled,
128
- .clear-button:disabled {
129
- opacity: 0.5;
130
- cursor: not-allowed;
131
- }
132
-
133
- /* Calendar Popup */
134
- .calendar {
135
- position: absolute;
136
- top: 100%;
137
- left: 0;
138
- right: 0;
139
- z-index: var(--snice-z-index-dropdown, 1000);
140
- background: var(--snice-color-background-element, rgb(252, 251, 249));
141
- border: 1px solid var(--snice-color-border, #d1d5db);
142
- border-radius: var(--snice-border-radius-lg, 8px);
143
- box-shadow: var(--snice-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
144
- margin-top: var(--snice-spacing-3xs, 0.125rem);
145
- padding: var(--snice-spacing-md, 1rem);
146
- min-width: 280px;
147
- }
148
-
149
- .calendar[hidden] {
150
- display: none;
151
- }
152
-
153
- /* Calendar Header */
154
- .calendar-header {
155
- display: flex;
156
- align-items: center;
157
- justify-content: space-between;
158
- margin-bottom: 1rem;
159
- }
160
-
161
- .calendar-title {
162
- flex: 1;
163
- text-align: center;
164
- }
165
-
166
- .month-button {
167
- background: none;
168
- border: none;
169
- font-size: var(--snice-font-size-md, 1rem);
170
- font-weight: var(--snice-font-weight-semibold, 600);
171
- color: var(--snice-color-text, #374151);
172
- cursor: pointer;
173
- padding: var(--snice-spacing-2xs, 0.25rem) var(--snice-spacing-xs, 0.5rem);
174
- border-radius: var(--snice-border-radius-md, 4px);
175
- transition: background-color var(--snice-transition-fast, 0.15s) ease;
176
- }
177
-
178
- .month-button:hover {
179
- background: var(--snice-color-background-tertiary, #f3f4f6);
180
- }
181
-
182
- .nav-button {
183
- background: none;
184
- border: none;
185
- padding: 0.5rem;
186
- cursor: pointer;
187
- color: #6b7280;
188
- border-radius: 4px;
189
- transition: color 0.15s ease, background-color 0.15s ease;
190
- }
191
-
192
- .nav-button:hover {
193
- color: #374151;
194
- background: #f3f4f6;
195
- }
196
-
197
- /* Calendar Grid */
198
- .calendar-weekdays {
199
- display: grid;
200
- grid-template-columns: repeat(7, 1fr);
201
- gap: 0.25rem /* 4px */;
202
- margin-bottom: 0.5rem;
203
- }
204
-
205
- .weekday {
206
- text-align: center;
207
- font-size: 0.75rem;
208
- font-weight: 600;
209
- color: #6b7280;
210
- padding: 0.5rem 0.25rem;
211
- }
212
-
213
- .calendar-days {
214
- display: grid;
215
- grid-template-columns: repeat(7, 1fr);
216
- gap: 0.25rem /* 4px */;
217
- }
218
-
219
- .day {
220
- width: 32px;
221
- height: 32px;
222
- border: none;
223
- background: none;
224
- cursor: pointer;
225
- border-radius: var(--snice-border-radius-md, 4px);
226
- font-size: var(--snice-font-size-sm, 0.875rem);
227
- color: var(--snice-color-text, #374151);
228
- transition: background-color var(--snice-transition-fast, 0.15s) ease, color var(--snice-transition-fast, 0.15s) ease;
229
- display: flex;
230
- align-items: center;
231
- justify-content: center;
232
- }
233
-
234
- .day:hover:not(.day--disabled) {
235
- background: var(--snice-color-background-tertiary, #f3f4f6);
236
- }
237
-
238
- .day--today {
239
- background: var(--snice-color-primary-light, #dbeafe);
240
- color: var(--snice-color-primary, #2563eb);
241
- font-weight: var(--snice-font-weight-semibold, 600);
242
- }
243
-
244
- .day--selected {
245
- background: var(--snice-color-primary, #2563eb);
246
- color: var(--snice-color-text-inverse, white);
247
- font-weight: var(--snice-font-weight-semibold, 600);
248
- }
249
-
250
- .day--disabled {
251
- color: #d1d5db;
252
- cursor: not-allowed;
253
- }
254
-
255
- .day--empty {
256
- cursor: default;
257
- }
258
-
259
- /* Calendar Footer */
260
- .calendar-footer {
261
- margin-top: 1rem;
262
- padding-top: 1rem;
263
- border-top: 1px solid #f3f4f6;
264
- display: flex;
265
- justify-content: center;
266
- }
267
-
268
- .today-button {
269
- background: none;
270
- border: 1px solid #d1d5db;
271
- padding: 0.5rem 1rem;
272
- font-size: 0.875rem;
273
- color: #374151;
274
- cursor: pointer;
275
- border-radius: 4px;
276
- transition: background-color 0.15s ease, border-color 0.15s ease;
277
- }
278
-
279
- .today-button:hover {
280
- background: #f9fafb;
281
- border-color: #9ca3af;
282
- }
283
-
284
- /* Helper/Error Text */
285
- .helper-text,
286
- .error-text {
287
- font-size: var(--snice-font-size-sm, 0.875rem);
288
- margin-top: var(--snice-spacing-2xs, 0.25rem);
289
- }
290
-
291
- .helper-text {
292
- color: var(--snice-color-text-secondary, #6b7280);
293
- }
294
-
295
- .error-text {
296
- color: var(--snice-color-danger, #ef4444);
297
- }
298
-
299
- /* Size variants */
300
- :host([size="small"]) .calendar {
301
- min-width: 240px;
302
- padding: 0.75rem;
303
- }
304
-
305
- :host([size="small"]) .day {
306
- width: 28px;
307
- height: 28px;
308
- font-size: 0.8125rem;
309
- }
310
-
311
- :host([size="large"]) .calendar {
312
- min-width: 320px;
313
- padding: 1.25rem;
314
- }
315
-
316
- :host([size="large"]) .day {
317
- width: 36px;
318
- height: 36px;
319
- font-size: 0.9375rem;
320
- }
321
-
322
- /* Responsive */
323
- @media (max-width: 640px) {
324
- .calendar {
325
- left: 50%;
326
- right: auto;
327
- transform: translateX(-50%);
328
- min-width: 280px;
329
- }
330
- }