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/input/snice-input.types.ts DELETED
@@ -1,59 +0,0 @@
1
- export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
2
- export type InputSize = 'small' | 'medium' | 'large';
3
- export type InputVariant = 'outlined' | 'filled' | 'underlined';
4
-
5
- export interface SniceInputElement extends HTMLElement {
6
- type: InputType;
7
- size: InputSize;
8
- variant: InputVariant;
9
- value: string;
10
- placeholder: string;
11
- label: string;
12
- helperText: string;
13
- errorText: string;
14
- disabled: boolean;
15
- readonly: boolean;
16
- required: boolean;
17
- invalid: boolean;
18
- clearable: boolean;
19
- password: boolean;
20
- min: string;
21
- max: string;
22
- step: string;
23
- pattern: string;
24
- maxlength: number;
25
- minlength: number;
26
- autocomplete: string;
27
- name: string;
28
- prefixIcon: string;
29
- suffixIcon: string;
30
- focus(): void;
31
- blur(): void;
32
- select(): void;
33
- clear(): void;
34
- checkValidity(): boolean;
35
- reportValidity(): boolean;
36
- setCustomValidity(message: string): void;
37
- }
38
-
39
- export interface InputChangeDetail {
40
- value: string;
41
- input: SniceInputElement;
42
- }
43
-
44
- export interface InputInputDetail {
45
- value: string;
46
- input: SniceInputElement;
47
- }
48
-
49
- export interface InputFocusDetail {
50
- input: SniceInputElement;
51
- }
52
-
53
- export interface InputBlurDetail {
54
- input: SniceInputElement;
55
- }
56
-
57
- export interface InputClearDetail {
58
- input: SniceInputElement;
59
- }
package/components/input/test.html DELETED
@@ -1,77 +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>Input Test</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- padding: 40px;
11
- font-family: var(--snice-font-family);
12
- background: var(--snice-color-background);
13
- color: var(--snice-color-text);
14
- }
15
- .test-group {
16
- margin-bottom: 30px;
17
- padding: 20px;
18
- background: var(--snice-color-background-secondary);
19
- border-radius: 8px;
20
- }
21
- </style>
22
- </head>
23
- <body>
24
- <h2>Input Component Test</h2>
25
-
26
- <div class="test-group">
27
- <h3>Test 1: Basic with Label</h3>
28
- <snice-input label="Test Label" placeholder="Enter text..."></snice-input>
29
- </div>
30
-
31
- <div class="test-group">
32
- <h3>Test 2: Number with Max/Min</h3>
33
- <snice-input
34
- type="number"
35
- label="Number Input (0-100)"
36
- min="0"
37
- max="100"
38
- step="5"
39
- placeholder="0-100">
40
- </snice-input>
41
- </div>
42
-
43
- <div class="test-group">
44
- <h3>Test 3: Required Field</h3>
45
- <snice-input
46
- label="Required Field"
47
- placeholder="This is required"
48
- required>
49
- </snice-input>
50
- </div>
51
-
52
- <div class="test-group">
53
- <h3>Test 4: Max Length</h3>
54
- <snice-input
55
- label="Max 10 Characters"
56
- maxlength="10"
57
- placeholder="Max 10 chars">
58
- </snice-input>
59
- </div>
60
-
61
- <script type="module">
62
- import './snice-input.ts';
63
-
64
- // Test that we can access the element and its properties
65
- setTimeout(() => {
66
- const inputs = document.querySelectorAll('snice-input');
67
- inputs.forEach(input => {
68
- console.log('Input label:', input.label);
69
- console.log('Shadow root:', input.shadowRoot);
70
- const labelEl = input.shadowRoot?.querySelector('.label');
71
- console.log('Label element:', labelEl);
72
- console.log('Label text:', labelEl?.textContent);
73
- });
74
- }, 1000);
75
- </script>
76
- </body>
77
- </html>
package/components/layout/README.md DELETED
@@ -1,260 +0,0 @@
1
- # Layout Components
2
-
3
- A collection of layout components for structuring web applications.
4
-
5
- ## Components
6
-
7
- ### snice-layout
8
- Basic layout with header, main content, and footer areas.
9
-
10
- ```html
11
- <snice-layout>
12
- <div slot="brand"><h1>My App</h1></div>
13
- <nav slot="nav">
14
- <a href="/">Home</a>
15
- <a href="/about">About</a>
16
- </nav>
17
-
18
- <!-- Main content -->
19
- <div>
20
- <h1>Welcome</h1>
21
- <p>This is the main content area.</p>
22
- </div>
23
-
24
- <div slot="footer">
25
- <p>&copy; 2024 My Company</p>
26
- </div>
27
- </snice-layout>
28
- ```
29
-
30
- ### snice-layout-sidebar
31
- Layout with collapsible sidebar navigation.
32
-
33
- ```html
34
- <snice-layout-sidebar>
35
- <div slot="brand"><h2>Dashboard</h2></div>
36
- <nav slot="nav">
37
- <a href="/dashboard">Overview</a>
38
- <a href="/users">Users</a>
39
- <a href="/settings">Settings</a>
40
- </nav>
41
- <div slot="header">
42
- <h1>Page Title</h1>
43
- </div>
44
-
45
- <!-- Main content -->
46
- <div>
47
- <p>Dashboard content goes here</p>
48
- </div>
49
- </snice-layout-sidebar>
50
- ```
51
-
52
- ### snice-layout-minimal
53
- Clean layout with just content area.
54
-
55
- ```html
56
- <snice-layout-minimal>
57
- <div>
58
- <h1>Simple Page</h1>
59
- <p>Minimal layout for focused content.</p>
60
- </div>
61
- </snice-layout-minimal>
62
- ```
63
-
64
- ### snice-layout-centered
65
- Centered container perfect for forms, authentication pages.
66
-
67
- ```html
68
- <snice-layout-centered width="md">
69
- <form>
70
- <h2>Sign In</h2>
71
- <input type="email" placeholder="Email">
72
- <input type="password" placeholder="Password">
73
- <button type="submit">Sign In</button>
74
- </form>
75
- </snice-layout-centered>
76
- ```
77
-
78
- #### Properties
79
- - `width`: Container width - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
80
-
81
- ### snice-layout-landing
82
- Marketing/landing page layout with hero section.
83
-
84
- ```html
85
- <snice-layout-landing>
86
- <div slot="brand"><h1>Company</h1></div>
87
- <nav slot="nav">
88
- <a href="#features">Features</a>
89
- <a href="#pricing">Pricing</a>
90
- </nav>
91
- <button slot="cta">Get Started</button>
92
-
93
- <div slot="hero">
94
- <h1>Amazing Product</h1>
95
- <p>Transform your business today</p>
96
- </div>
97
-
98
- <!-- Main content sections -->
99
- <section>
100
- <h2>Features</h2>
101
- <p>Feature content...</p>
102
- </section>
103
- </snice-layout-landing>
104
- ```
105
-
106
- ### snice-layout-split
107
- Two-panel layout with configurable split ratios.
108
-
109
- ```html
110
- <snice-layout-split direction="horizontal" ratio="60-40">
111
- <div slot="left">
112
- <h2>Left Panel</h2>
113
- <p>Content for left side</p>
114
- </div>
115
- <div slot="right">
116
- <h2>Right Panel</h2>
117
- <p>Content for right side</p>
118
- </div>
119
- </snice-layout-split>
120
- ```
121
-
122
- #### Properties
123
- - `direction`: Split direction - `"horizontal"` | `"vertical"` (default: `"horizontal"`)
124
- - `ratio`: Panel size ratio - `"50-50"` | `"60-40"` | `"70-30"` | `"33-67"` | `"67-33"` (default: `"50-50"`)
125
-
126
- ### snice-layout-card
127
- Grid layout optimized for card-based content.
128
-
129
- ```html
130
- <snice-layout-card columns="3" gap="lg">
131
- <div slot="header">
132
- <h1>Product Gallery</h1>
133
- </div>
134
-
135
- <!-- Cards go in main slot -->
136
- <div class="card">Product 1</div>
137
- <div class="card">Product 2</div>
138
- <div class="card">Product 3</div>
139
- </snice-layout-card>
140
- ```
141
-
142
- #### Properties
143
- - `columns`: Number of columns - `"1"` | `"2"` | `"3"` | `"4"` | `"6"` (default: `"3"`)
144
- - `gap`: Grid gap size - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
145
-
146
- ### snice-layout-blog
147
- Article layout with sidebar for additional content.
148
-
149
- ```html
150
- <snice-layout-blog>
151
- <div slot="brand"><h1>My Blog</h1></div>
152
- <nav slot="nav">
153
- <a href="/">Home</a>
154
- <a href="/archive">Archive</a>
155
- </nav>
156
-
157
- <!-- Article content -->
158
- <article>
159
- <h1>Blog Post Title</h1>
160
- <p>Article content goes here...</p>
161
- </article>
162
-
163
- <div slot="sidebar">
164
- <h3>Recent Posts</h3>
165
- <ul>
166
- <li><a href="/post1">Post 1</a></li>
167
- <li><a href="/post2">Post 2</a></li>
168
- </ul>
169
- </div>
170
- </snice-layout-blog>
171
- ```
172
-
173
- ### snice-layout-dashboard
174
- Complex dashboard layout with multiple content areas.
175
-
176
- ```html
177
- <snice-layout-dashboard>
178
- <div slot="brand"><h1>Analytics</h1></div>
179
- <input slot="search" type="search" placeholder="Search...">
180
- <div slot="user">Welcome, John!</div>
181
-
182
- <nav slot="nav">
183
- <a href="/dashboard">Overview</a>
184
- <a href="/analytics">Analytics</a>
185
- </nav>
186
-
187
- <div slot="sidebar">
188
- <h3>Quick Actions</h3>
189
- <button>New Report</button>
190
- </div>
191
-
192
- <!-- Main dashboard content -->
193
- <div>
194
- <h2>Dashboard Overview</h2>
195
- <div class="metrics">...</div>
196
- </div>
197
-
198
- <div slot="right-sidebar">
199
- <h3>Recent Activity</h3>
200
- <ul>...</ul>
201
- </div>
202
- </snice-layout-dashboard>
203
- ```
204
-
205
- ### snice-layout-fullscreen
206
- Immersive fullscreen layout for presentations, media viewers.
207
-
208
- ```html
209
- <snice-layout-fullscreen overlay>
210
- <img slot="background" src="background.jpg" alt="Background">
211
-
212
- <div slot="overlay">
213
- <h1>Overlay Content</h1>
214
- </div>
215
-
216
- <!-- Main fullscreen content -->
217
- <div>
218
- <h2>Centered Content</h2>
219
- </div>
220
-
221
- <div slot="controls">
222
- <button>Play</button>
223
- <button>Pause</button>
224
- <button>Fullscreen</button>
225
- </div>
226
- </snice-layout-fullscreen>
227
- ```
228
-
229
- #### Properties
230
- - `overlay`: Show overlay background - `boolean` (default: `false`)
231
-
232
- ## Styling
233
-
234
- All layout components use the Snice design system CSS custom properties for consistent theming. You can override these variables to customize the appearance:
235
-
236
- ```css
237
- :root {
238
- --snice-color-primary: #your-primary-color;
239
- --snice-color-background: #your-background-color;
240
- --snice-spacing-md: your-spacing-value;
241
- /* ... other theme variables */
242
- }
243
- ```
244
-
245
- ## Responsive Design
246
-
247
- All layouts include responsive breakpoints and will adapt to mobile devices automatically. Most layouts stack vertically on small screens for optimal mobile experience.
248
-
249
- ## Events
250
-
251
- Layout components are structural and don't emit custom events. However, you can listen for standard DOM events on slotted content:
252
-
253
- ```javascript
254
- document.querySelector('snice-layout-sidebar')
255
- .addEventListener('click', (e) => {
256
- if (e.target.matches('.sidebar-toggle')) {
257
- // Handle sidebar toggle
258
- }
259
- });
260
- ```