snice 1.14.2 → 2.1.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 (311) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/alert/demo.html +445 -0
  4. package/components/avatar/demo.html +598 -0
  5. package/components/badge/demo.html +523 -0
  6. package/components/breadcrumbs/demo.html +404 -0
  7. package/components/button/demo.html +42 -0
  8. package/components/card/demo.html +525 -0
  9. package/components/checkbox/demo.html +253 -0
  10. package/components/chip/demo.html +383 -0
  11. package/components/date-picker/demo.html +191 -0
  12. package/components/divider/demo.html +233 -0
  13. package/components/drawer/demo.html +328 -0
  14. package/components/input/demo.html +303 -0
  15. package/components/input/test.html +77 -0
  16. package/components/layout/demo.html +538 -0
  17. package/components/login/demo-auth-controller.ts +185 -0
  18. package/components/login/demo.html +470 -0
  19. package/components/login/snice-login.ts +2 -2
  20. package/components/modal/demo.html +291 -0
  21. package/components/pagination/demo.html +395 -0
  22. package/components/progress/demo.html +510 -0
  23. package/components/radio/demo.html +287 -0
  24. package/components/select/demo.html +511 -0
  25. package/components/skeleton/demo.html +514 -0
  26. package/components/switch/demo.html +284 -0
  27. package/components/table/demo-table-controller.ts +100 -0
  28. package/components/table/demo.html +480 -0
  29. package/components/table/snice-table.ts +2 -2
  30. package/components/tabs/demo.html +487 -0
  31. package/components/toast/demo.html +329 -0
  32. package/components/tooltip/demo.html +350 -0
  33. package/dist/index.cjs +441 -329
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.cjs.min.map +1 -1
  36. package/dist/index.esm.js +441 -329
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.esm.min.js +3 -3
  39. package/dist/index.esm.min.js.map +1 -1
  40. package/dist/index.iife.js +441 -329
  41. package/dist/index.iife.js.map +1 -1
  42. package/dist/index.iife.min.js +3 -3
  43. package/dist/index.iife.min.js.map +1 -1
  44. package/dist/symbols.esm.js +1 -1
  45. package/dist/transitions.esm.js +1 -1
  46. package/dist/types/controller.d.ts +1 -1
  47. package/dist/types/element.d.ts +10 -10
  48. package/dist/types/events.d.ts +2 -2
  49. package/dist/types/index.d.ts +1 -1
  50. package/dist/types/observe.d.ts +1 -1
  51. package/dist/types/request-response.d.ts +2 -3
  52. package/dist/types/router.d.ts +1 -1
  53. package/package.json +9 -10
  54. package/dist/components/accordion/snice-accordion-item.d.ts +0 -25
  55. package/dist/components/accordion/snice-accordion-item.js +0 -260
  56. package/dist/components/accordion/snice-accordion-item.js.map +0 -1
  57. package/dist/components/accordion/snice-accordion.d.ts +0 -28
  58. package/dist/components/accordion/snice-accordion.js +0 -221
  59. package/dist/components/accordion/snice-accordion.js.map +0 -1
  60. package/dist/components/accordion/snice-accordion.types.d.ts +0 -29
  61. package/dist/components/accordion/snice-accordion.types.js +0 -2
  62. package/dist/components/accordion/snice-accordion.types.js.map +0 -1
  63. package/dist/components/alert/snice-alert.d.ts +0 -26
  64. package/dist/components/alert/snice-alert.js +0 -191
  65. package/dist/components/alert/snice-alert.js.map +0 -1
  66. package/dist/components/alert/snice-alert.types.d.ts +0 -11
  67. package/dist/components/alert/snice-alert.types.js +0 -2
  68. package/dist/components/alert/snice-alert.types.js.map +0 -1
  69. package/dist/components/avatar/snice-avatar.d.ts +0 -24
  70. package/dist/components/avatar/snice-avatar.js +0 -177
  71. package/dist/components/avatar/snice-avatar.js.map +0 -1
  72. package/dist/components/avatar/snice-avatar.types.d.ts +0 -12
  73. package/dist/components/avatar/snice-avatar.types.js +0 -2
  74. package/dist/components/avatar/snice-avatar.types.js.map +0 -1
  75. package/dist/components/badge/snice-badge.d.ts +0 -25
  76. package/dist/components/badge/snice-badge.js +0 -157
  77. package/dist/components/badge/snice-badge.js.map +0 -1
  78. package/dist/components/badge/snice-badge.types.d.ts +0 -15
  79. package/dist/components/badge/snice-badge.types.js +0 -2
  80. package/dist/components/badge/snice-badge.types.js.map +0 -1
  81. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +0 -27
  82. package/dist/components/breadcrumbs/snice-breadcrumbs.js +0 -212
  83. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +0 -1
  84. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +0 -23
  85. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js +0 -2
  86. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js.map +0 -1
  87. package/dist/components/breadcrumbs/snice-crumb.d.ts +0 -9
  88. package/dist/components/breadcrumbs/snice-crumb.js +0 -50
  89. package/dist/components/breadcrumbs/snice-crumb.js.map +0 -1
  90. package/dist/components/button/snice-button.d.ts +0 -32
  91. package/dist/components/button/snice-button.js +0 -212
  92. package/dist/components/button/snice-button.js.map +0 -1
  93. package/dist/components/button/snice-button.types.d.ts +0 -23
  94. package/dist/components/button/snice-button.types.js +0 -2
  95. package/dist/components/button/snice-button.types.js.map +0 -1
  96. package/dist/components/card/snice-card.d.ts +0 -19
  97. package/dist/components/card/snice-card.js +0 -132
  98. package/dist/components/card/snice-card.js.map +0 -1
  99. package/dist/components/card/snice-card.types.d.ts +0 -9
  100. package/dist/components/card/snice-card.types.js +0 -2
  101. package/dist/components/card/snice-card.types.js.map +0 -1
  102. package/dist/components/checkbox/snice-checkbox.d.ts +0 -34
  103. package/dist/components/checkbox/snice-checkbox.js +0 -289
  104. package/dist/components/checkbox/snice-checkbox.js.map +0 -1
  105. package/dist/components/checkbox/snice-checkbox.types.d.ts +0 -20
  106. package/dist/components/checkbox/snice-checkbox.types.js +0 -2
  107. package/dist/components/checkbox/snice-checkbox.types.js.map +0 -1
  108. package/dist/components/chip/snice-chip.d.ts +0 -28
  109. package/dist/components/chip/snice-chip.js +0 -203
  110. package/dist/components/chip/snice-chip.js.map +0 -1
  111. package/dist/components/chip/snice-chip.types.d.ts +0 -14
  112. package/dist/components/chip/snice-chip.types.js +0 -2
  113. package/dist/components/chip/snice-chip.types.js.map +0 -1
  114. package/dist/components/date-picker/snice-date-picker.d.ts +0 -82
  115. package/dist/components/date-picker/snice-date-picker.js +0 -880
  116. package/dist/components/date-picker/snice-date-picker.js.map +0 -1
  117. package/dist/components/date-picker/snice-date-picker.types.d.ts +0 -71
  118. package/dist/components/date-picker/snice-date-picker.types.js +0 -2
  119. package/dist/components/date-picker/snice-date-picker.types.js.map +0 -1
  120. package/dist/components/divider/snice-divider.d.ts +0 -17
  121. package/dist/components/divider/snice-divider.js +0 -111
  122. package/dist/components/divider/snice-divider.js.map +0 -1
  123. package/dist/components/divider/snice-divider.types.d.ts +0 -14
  124. package/dist/components/divider/snice-divider.types.js +0 -2
  125. package/dist/components/divider/snice-divider.types.js.map +0 -1
  126. package/dist/components/drawer/snice-drawer.d.ts +0 -37
  127. package/dist/components/drawer/snice-drawer.js +0 -335
  128. package/dist/components/drawer/snice-drawer.js.map +0 -1
  129. package/dist/components/drawer/snice-drawer.types.d.ts +0 -16
  130. package/dist/components/drawer/snice-drawer.types.js +0 -2
  131. package/dist/components/drawer/snice-drawer.types.js.map +0 -1
  132. package/dist/components/input/snice-input.d.ts +0 -65
  133. package/dist/components/input/snice-input.js +0 -603
  134. package/dist/components/input/snice-input.js.map +0 -1
  135. package/dist/components/input/snice-input.types.d.ts +0 -53
  136. package/dist/components/input/snice-input.types.js +0 -2
  137. package/dist/components/input/snice-input.types.js.map +0 -1
  138. package/dist/components/layout/snice-layout-blog.d.ts +0 -4
  139. package/dist/components/layout/snice-layout-blog.js +0 -56
  140. package/dist/components/layout/snice-layout-blog.js.map +0 -1
  141. package/dist/components/layout/snice-layout-card.d.ts +0 -6
  142. package/dist/components/layout/snice-layout-card.js +0 -53
  143. package/dist/components/layout/snice-layout-card.js.map +0 -1
  144. package/dist/components/layout/snice-layout-centered.d.ts +0 -5
  145. package/dist/components/layout/snice-layout-centered.js +0 -38
  146. package/dist/components/layout/snice-layout-centered.js.map +0 -1
  147. package/dist/components/layout/snice-layout-dashboard.d.ts +0 -4
  148. package/dist/components/layout/snice-layout-dashboard.js +0 -53
  149. package/dist/components/layout/snice-layout-dashboard.js.map +0 -1
  150. package/dist/components/layout/snice-layout-fullscreen.d.ts +0 -5
  151. package/dist/components/layout/snice-layout-fullscreen.js +0 -50
  152. package/dist/components/layout/snice-layout-fullscreen.js.map +0 -1
  153. package/dist/components/layout/snice-layout-landing.d.ts +0 -4
  154. package/dist/components/layout/snice-layout-landing.js +0 -55
  155. package/dist/components/layout/snice-layout-landing.js.map +0 -1
  156. package/dist/components/layout/snice-layout-minimal.d.ts +0 -4
  157. package/dist/components/layout/snice-layout-minimal.js +0 -27
  158. package/dist/components/layout/snice-layout-minimal.js.map +0 -1
  159. package/dist/components/layout/snice-layout-sidebar.d.ts +0 -5
  160. package/dist/components/layout/snice-layout-sidebar.js +0 -64
  161. package/dist/components/layout/snice-layout-sidebar.js.map +0 -1
  162. package/dist/components/layout/snice-layout-split.d.ts +0 -6
  163. package/dist/components/layout/snice-layout-split.js +0 -47
  164. package/dist/components/layout/snice-layout-split.js.map +0 -1
  165. package/dist/components/layout/snice-layout.d.ts +0 -4
  166. package/dist/components/layout/snice-layout.js +0 -43
  167. package/dist/components/layout/snice-layout.js.map +0 -1
  168. package/dist/components/layout/snice-layout.types.d.ts +0 -3
  169. package/dist/components/layout/snice-layout.types.js +0 -2
  170. package/dist/components/layout/snice-layout.types.js.map +0 -1
  171. package/dist/components/login/snice-login.d.ts +0 -45
  172. package/dist/components/login/snice-login.js +0 -385
  173. package/dist/components/login/snice-login.js.map +0 -1
  174. package/dist/components/login/snice-login.types.d.ts +0 -31
  175. package/dist/components/login/snice-login.types.js +0 -2
  176. package/dist/components/login/snice-login.types.js.map +0 -1
  177. package/dist/components/modal/snice-modal.d.ts +0 -32
  178. package/dist/components/modal/snice-modal.js +0 -288
  179. package/dist/components/modal/snice-modal.js.map +0 -1
  180. package/dist/components/modal/snice-modal.types.d.ts +0 -18
  181. package/dist/components/modal/snice-modal.types.js +0 -2
  182. package/dist/components/modal/snice-modal.types.js.map +0 -1
  183. package/dist/components/pagination/snice-pagination.d.ts +0 -26
  184. package/dist/components/pagination/snice-pagination.js +0 -373
  185. package/dist/components/pagination/snice-pagination.js.map +0 -1
  186. package/dist/components/pagination/snice-pagination.types.d.ts +0 -18
  187. package/dist/components/pagination/snice-pagination.types.js +0 -2
  188. package/dist/components/pagination/snice-pagination.types.js.map +0 -1
  189. package/dist/components/progress/snice-progress.d.ts +0 -35
  190. package/dist/components/progress/snice-progress.js +0 -295
  191. package/dist/components/progress/snice-progress.js.map +0 -1
  192. package/dist/components/progress/snice-progress.types.d.ts +0 -18
  193. package/dist/components/progress/snice-progress.types.js +0 -2
  194. package/dist/components/progress/snice-progress.types.js.map +0 -1
  195. package/dist/components/radio/snice-radio.d.ts +0 -33
  196. package/dist/components/radio/snice-radio.js +0 -286
  197. package/dist/components/radio/snice-radio.js.map +0 -1
  198. package/dist/components/radio/snice-radio.types.d.ts +0 -19
  199. package/dist/components/radio/snice-radio.types.js +0 -2
  200. package/dist/components/radio/snice-radio.types.js.map +0 -1
  201. package/dist/components/select/snice-option.d.ts +0 -17
  202. package/dist/components/select/snice-option.js +0 -77
  203. package/dist/components/select/snice-option.js.map +0 -1
  204. package/dist/components/select/snice-option.types.d.ts +0 -14
  205. package/dist/components/select/snice-option.types.js +0 -2
  206. package/dist/components/select/snice-option.types.js.map +0 -1
  207. package/dist/components/select/snice-select.d.ts +0 -89
  208. package/dist/components/select/snice-select.js +0 -900
  209. package/dist/components/select/snice-select.js.map +0 -1
  210. package/dist/components/select/snice-select.types.d.ts +0 -49
  211. package/dist/components/select/snice-select.types.js +0 -2
  212. package/dist/components/select/snice-select.types.js.map +0 -1
  213. package/dist/components/skeleton/snice-skeleton.d.ts +0 -16
  214. package/dist/components/skeleton/snice-skeleton.js +0 -159
  215. package/dist/components/skeleton/snice-skeleton.js.map +0 -1
  216. package/dist/components/skeleton/snice-skeleton.types.d.ts +0 -10
  217. package/dist/components/skeleton/snice-skeleton.types.js +0 -2
  218. package/dist/components/skeleton/snice-skeleton.types.js.map +0 -1
  219. package/dist/components/switch/snice-switch.d.ts +0 -38
  220. package/dist/components/switch/snice-switch.js +0 -309
  221. package/dist/components/switch/snice-switch.js.map +0 -1
  222. package/dist/components/switch/snice-switch.types.d.ts +0 -21
  223. package/dist/components/switch/snice-switch.types.js +0 -2
  224. package/dist/components/switch/snice-switch.types.js.map +0 -1
  225. package/dist/components/symbols.d.ts +0 -1
  226. package/dist/components/symbols.js +0 -20
  227. package/dist/components/symbols.js.map +0 -1
  228. package/dist/components/table/snice-cell-boolean.d.ts +0 -21
  229. package/dist/components/table/snice-cell-boolean.js +0 -152
  230. package/dist/components/table/snice-cell-boolean.js.map +0 -1
  231. package/dist/components/table/snice-cell-date.d.ts +0 -24
  232. package/dist/components/table/snice-cell-date.js +0 -240
  233. package/dist/components/table/snice-cell-date.js.map +0 -1
  234. package/dist/components/table/snice-cell-duration.d.ts +0 -16
  235. package/dist/components/table/snice-cell-duration.js +0 -123
  236. package/dist/components/table/snice-cell-duration.js.map +0 -1
  237. package/dist/components/table/snice-cell-filesize.d.ts +0 -16
  238. package/dist/components/table/snice-cell-filesize.js +0 -119
  239. package/dist/components/table/snice-cell-filesize.js.map +0 -1
  240. package/dist/components/table/snice-cell-number.d.ts +0 -23
  241. package/dist/components/table/snice-cell-number.js +0 -202
  242. package/dist/components/table/snice-cell-number.js.map +0 -1
  243. package/dist/components/table/snice-cell-progress.d.ts +0 -17
  244. package/dist/components/table/snice-cell-progress.js +0 -114
  245. package/dist/components/table/snice-cell-progress.js.map +0 -1
  246. package/dist/components/table/snice-cell-rating.d.ts +0 -17
  247. package/dist/components/table/snice-cell-rating.js +0 -113
  248. package/dist/components/table/snice-cell-rating.js.map +0 -1
  249. package/dist/components/table/snice-cell-sparkline.d.ts +0 -29
  250. package/dist/components/table/snice-cell-sparkline.js +0 -290
  251. package/dist/components/table/snice-cell-sparkline.js.map +0 -1
  252. package/dist/components/table/snice-cell-text.d.ts +0 -19
  253. package/dist/components/table/snice-cell-text.js +0 -153
  254. package/dist/components/table/snice-cell-text.js.map +0 -1
  255. package/dist/components/table/snice-cell.d.ts +0 -32
  256. package/dist/components/table/snice-cell.js +0 -451
  257. package/dist/components/table/snice-cell.js.map +0 -1
  258. package/dist/components/table/snice-column.d.ts +0 -62
  259. package/dist/components/table/snice-column.js +0 -440
  260. package/dist/components/table/snice-column.js.map +0 -1
  261. package/dist/components/table/snice-header.d.ts +0 -33
  262. package/dist/components/table/snice-header.js +0 -303
  263. package/dist/components/table/snice-header.js.map +0 -1
  264. package/dist/components/table/snice-progress.d.ts +0 -10
  265. package/dist/components/table/snice-progress.js +0 -91
  266. package/dist/components/table/snice-progress.js.map +0 -1
  267. package/dist/components/table/snice-rating.d.ts +0 -9
  268. package/dist/components/table/snice-rating.js +0 -68
  269. package/dist/components/table/snice-rating.js.map +0 -1
  270. package/dist/components/table/snice-row.d.ts +0 -43
  271. package/dist/components/table/snice-row.js +0 -365
  272. package/dist/components/table/snice-row.js.map +0 -1
  273. package/dist/components/table/snice-table.d.ts +0 -69
  274. package/dist/components/table/snice-table.js +0 -814
  275. package/dist/components/table/snice-table.js.map +0 -1
  276. package/dist/components/table/snice-table.types.d.ts +0 -137
  277. package/dist/components/table/snice-table.types.js +0 -2
  278. package/dist/components/table/snice-table.types.js.map +0 -1
  279. package/dist/components/tabs/snice-tab-panel.d.ts +0 -12
  280. package/dist/components/tabs/snice-tab-panel.js +0 -78
  281. package/dist/components/tabs/snice-tab-panel.js.map +0 -1
  282. package/dist/components/tabs/snice-tab.d.ts +0 -13
  283. package/dist/components/tabs/snice-tab.js +0 -90
  284. package/dist/components/tabs/snice-tab.js.map +0 -1
  285. package/dist/components/tabs/snice-tabs.d.ts +0 -34
  286. package/dist/components/tabs/snice-tabs.js +0 -367
  287. package/dist/components/tabs/snice-tabs.js.map +0 -1
  288. package/dist/components/tabs/snice-tabs.types.d.ts +0 -23
  289. package/dist/components/tabs/snice-tabs.types.js +0 -2
  290. package/dist/components/tabs/snice-tabs.types.js.map +0 -1
  291. package/dist/components/toast/snice-toast-container.d.ts +0 -25
  292. package/dist/components/toast/snice-toast-container.js +0 -251
  293. package/dist/components/toast/snice-toast-container.js.map +0 -1
  294. package/dist/components/toast/snice-toast.d.ts +0 -23
  295. package/dist/components/toast/snice-toast.js +0 -316
  296. package/dist/components/toast/snice-toast.js.map +0 -1
  297. package/dist/components/toast/snice-toast.types.d.ts +0 -30
  298. package/dist/components/toast/snice-toast.types.js +0 -2
  299. package/dist/components/toast/snice-toast.types.js.map +0 -1
  300. package/dist/components/tooltip/snice-tooltip.d.ts +0 -50
  301. package/dist/components/tooltip/snice-tooltip.js +0 -656
  302. package/dist/components/tooltip/snice-tooltip.js.map +0 -1
  303. package/dist/components/tooltip/snice-tooltip.types.d.ts +0 -18
  304. package/dist/components/tooltip/snice-tooltip.types.js +0 -2
  305. package/dist/components/tooltip/snice-tooltip.types.js.map +0 -1
  306. package/dist/components/transitions.d.ts +0 -11
  307. package/dist/components/transitions.js +0 -69
  308. package/dist/components/transitions.js.map +0 -1
  309. package/dist/index.cjs.min +0 -15
  310. package/dist/symbols.cjs +0 -103
  311. package/dist/transitions.cjs +0 -219
package/components/switch/demo.html ADDED
@@ -0,0 +1,284 @@
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>Toggle/Switch Demo</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
+ max-width: 800px;
15
+ margin: 0 auto;
16
+ }
17
+
18
+ .section {
19
+ margin-bottom: 40px;
20
+ }
21
+
22
+ h2 {
23
+ color: var(--snice-color-text);
24
+ margin-bottom: 20px;
25
+ font-size: var(--snice-font-size-2xl);
26
+ }
27
+
28
+ h3 {
29
+ color: var(--snice-color-text-secondary);
30
+ margin-bottom: 16px;
31
+ font-size: var(--snice-font-size-lg);
32
+ }
33
+
34
+ .switch-group {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: 16px;
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .row {
42
+ display: flex;
43
+ gap: 20px;
44
+ align-items: center;
45
+ flex-wrap: wrap;
46
+ }
47
+
48
+ .output {
49
+ padding: 10px;
50
+ background: var(--snice-color-background-secondary);
51
+ border-radius: var(--snice-border-radius-md);
52
+ font-family: monospace;
53
+ font-size: var(--snice-font-size-sm);
54
+ margin-top: 10px;
55
+ }
56
+
57
+ button {
58
+ padding: 8px 16px;
59
+ background: var(--snice-color-primary);
60
+ color: white;
61
+ border: none;
62
+ border-radius: var(--snice-border-radius-md);
63
+ cursor: pointer;
64
+ font-size: var(--snice-font-size-md);
65
+ margin-right: 8px;
66
+ }
67
+
68
+ button:hover {
69
+ background: var(--snice-color-primary-hover);
70
+ }
71
+
72
+ .settings-card {
73
+ background: var(--snice-color-background-secondary);
74
+ border: 1px solid var(--snice-color-border);
75
+ border-radius: var(--snice-border-radius-lg);
76
+ padding: 20px;
77
+ margin-bottom: 20px;
78
+ }
79
+
80
+ .settings-card h4 {
81
+ margin-top: 0;
82
+ margin-bottom: 16px;
83
+ font-size: var(--snice-font-size-lg);
84
+ }
85
+
86
+ .setting-row {
87
+ display: flex;
88
+ justify-content: space-between;
89
+ align-items: center;
90
+ padding: 12px 0;
91
+ border-bottom: 1px solid var(--snice-color-border);
92
+ }
93
+
94
+ .setting-row:last-child {
95
+ border-bottom: none;
96
+ }
97
+
98
+ .setting-info {
99
+ flex: 1;
100
+ margin-right: 16px;
101
+ }
102
+
103
+ .setting-title {
104
+ font-weight: 500;
105
+ margin-bottom: 4px;
106
+ }
107
+
108
+ .setting-description {
109
+ font-size: var(--snice-font-size-sm);
110
+ color: var(--snice-color-text-secondary);
111
+ }
112
+ </style>
113
+ </head>
114
+ <body>
115
+ <h2>Toggle/Switch Component Demo</h2>
116
+
117
+ <div class="section">
118
+ <h3>Basic Toggles</h3>
119
+ <div class="switch-group">
120
+ <snice-switch label="Default switch"></snice-switch>
121
+ <snice-switch label="Pre-checked" checked></snice-switch>
122
+ <snice-switch label="Without label"></snice-switch>
123
+ <snice-switch label="Disabled" disabled></snice-switch>
124
+ <snice-switch label="Disabled checked" disabled checked></snice-switch>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="section">
129
+ <h3>Sizes</h3>
130
+ <div class="switch-group">
131
+ <snice-switch size="small" label="Small switch"></snice-switch>
132
+ <snice-switch size="medium" label="Medium switch (default)"></snice-switch>
133
+ <snice-switch size="large" label="Large switch"></snice-switch>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="section">
138
+ <h3>With State Labels</h3>
139
+ <div class="switch-group">
140
+ <snice-switch size="medium" label="Medium with labels" label-on="ON" label-off="OFF"></snice-switch>
141
+ <snice-switch size="large" label="Large with labels" label-on="YES" label-off="NO" checked></snice-switch>
142
+ <snice-switch size="large" label="Enabled/Disabled" label-on="✓" label-off="✗"></snice-switch>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="section">
147
+ <h3>States</h3>
148
+ <div class="switch-group">
149
+ <snice-switch label="Required field" required></snice-switch>
150
+ <snice-switch label="Invalid state" invalid></snice-switch>
151
+ <snice-switch label="Invalid and checked" invalid checked></snice-switch>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="section">
156
+ <h3>Settings Panel Example</h3>
157
+ <div class="settings-card">
158
+ <h4>Notification Settings</h4>
159
+
160
+ <div class="setting-row">
161
+ <div class="setting-info">
162
+ <div class="setting-title">Email Notifications</div>
163
+ <div class="setting-description">Receive email updates about your account</div>
164
+ </div>
165
+ <snice-switch id="email-notifications" checked></snice-switch>
166
+ </div>
167
+
168
+ <div class="setting-row">
169
+ <div class="setting-info">
170
+ <div class="setting-title">Push Notifications</div>
171
+ <div class="setting-description">Get push notifications on your device</div>
172
+ </div>
173
+ <snice-switch id="push-notifications"></snice-switch>
174
+ </div>
175
+
176
+ <div class="setting-row">
177
+ <div class="setting-info">
178
+ <div class="setting-title">Marketing Emails</div>
179
+ <div class="setting-description">Receive promotional content and updates</div>
180
+ </div>
181
+ <snice-switch id="marketing-emails"></snice-switch>
182
+ </div>
183
+
184
+ <div class="setting-row">
185
+ <div class="setting-info">
186
+ <div class="setting-title">Dark Mode</div>
187
+ <div class="setting-description">Use dark theme across the application</div>
188
+ </div>
189
+ <snice-switch id="dark-mode" size="large" label-on="🌙" label-off="☀️"></snice-switch>
190
+ </div>
191
+ </div>
192
+ <button onclick="getSettings()">Get Current Settings</button>
193
+ <div id="settings-output" class="output">Click button to see current settings</div>
194
+ </div>
195
+
196
+ <div class="section">
197
+ <h3>Feature Flags</h3>
198
+ <div class="switch-group">
199
+ <snice-switch id="feature-beta" label="Enable Beta Features" label-on="BETA" label-off=""></snice-switch>
200
+ <snice-switch id="feature-experimental" label="Experimental Mode" label-on="EXP" label-off=""></snice-switch>
201
+ <snice-switch id="feature-debug" label="Debug Mode" label-on="DBG" label-off=""></snice-switch>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="section">
206
+ <h3>Interactive Example</h3>
207
+ <div class="switch-group">
208
+ <snice-switch
209
+ id="interactive-switch"
210
+ label="Interactive Toggle"
211
+ size="large"
212
+ label-on="ON"
213
+ label-off="OFF">
214
+ </snice-switch>
215
+ </div>
216
+ <div class="row">
217
+ <button onclick="document.getElementById('interactive-switch').toggle()">Toggle</button>
218
+ <button onclick="document.getElementById('interactive-switch').focus()">Focus</button>
219
+ <button onclick="document.getElementById('interactive-switch').checked = true">Turn On</button>
220
+ <button onclick="document.getElementById('interactive-switch').checked = false">Turn Off</button>
221
+ </div>
222
+ <div id="event-output" class="output">Events will appear here...</div>
223
+ </div>
224
+
225
+ <div class="section">
226
+ <h3>Form Example</h3>
227
+ <form id="demo-form">
228
+ <div class="switch-group">
229
+ <snice-switch name="terms" label="I accept the terms and conditions" required></snice-switch>
230
+ <snice-switch name="newsletter" label="Subscribe to newsletter"></snice-switch>
231
+ <snice-switch name="privacy" label="I accept the privacy policy" required></snice-switch>
232
+ </div>
233
+ <button type="submit">Submit</button>
234
+ </form>
235
+ <div id="form-output" class="output">Form data will appear here...</div>
236
+ </div>
237
+
238
+ <script type="module">
239
+ import './snice-switch.ts';
240
+
241
+ // Settings panel
242
+ window.getSettings = function() {
243
+ const settings = {
244
+ emailNotifications: document.getElementById('email-notifications').checked,
245
+ pushNotifications: document.getElementById('push-notifications').checked,
246
+ marketingEmails: document.getElementById('marketing-emails').checked,
247
+ darkMode: document.getElementById('dark-mode').checked
248
+ };
249
+ document.getElementById('settings-output').textContent =
250
+ `Settings: ${JSON.stringify(settings, null, 2)}`;
251
+ };
252
+
253
+ // Interactive switch events
254
+ const interactiveToggle = document.getElementById('interactive-switch');
255
+ const eventOutput = document.getElementById('event-output');
256
+
257
+ interactiveToggle.addEventListener('@snice/switch-change', (e) => {
258
+ eventOutput.textContent = `Changed: checked=${e.detail.checked}`;
259
+ });
260
+
261
+ // Feature flags
262
+ const featureToggles = document.querySelectorAll('[id^="feature-"]');
263
+ featureToggles.forEach(_switch => {
264
+ _switch.addEventListener('@snice/switch-change', (e) => {
265
+ console.log(`Feature ${_switch.id}: ${e.detail.checked ? 'enabled' : 'disabled'}`);
266
+ });
267
+ });
268
+
269
+ // Form submission
270
+ document.getElementById('demo-form').addEventListener('submit', (e) => {
271
+ e.preventDefault();
272
+ const data = {};
273
+ const switches = e.target.querySelectorAll('snice-switch');
274
+ switches.forEach(_switch => {
275
+ if (_switch.name) {
276
+ data[_switch.name] = _switch.checked;
277
+ }
278
+ });
279
+ document.getElementById('form-output').textContent =
280
+ `Form data: ${JSON.stringify(data, null, 2)}`;
281
+ });
282
+ </script>
283
+ </body>
284
+ </html>
package/components/table/demo-table-controller.ts ADDED
@@ -0,0 +1,100 @@
1
+ import { controller, respond, IController } from 'snice';
2
+
3
+ console.log('Loading demo table controller...');
4
+
5
+ @controller('demo-table-controller')
6
+ export class DemoTableController implements IController {
7
+ element: HTMLElement | null = null;
8
+
9
+ async attach(element: HTMLElement) {
10
+ this.element = element;
11
+ console.log('Demo table controller attached');
12
+ }
13
+
14
+ async detach(_element: HTMLElement) {
15
+ console.log('Demo table controller detached');
16
+ }
17
+
18
+ private sampleData = [
19
+ { id: 1, name: 'John Doe', email: 'john.doe@example.com', role: 'Developer', salary: 75000, joinDate: '2023-01-15', active: true },
20
+ { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', role: 'Designer', salary: 68000, joinDate: '2023-03-20', active: true },
21
+ { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', role: 'Manager', salary: 95000, joinDate: '2022-11-10', active: false },
22
+ { id: 4, name: 'Alice Brown', email: 'alice.brown@example.com', role: 'Developer', salary: 72000, joinDate: '2023-06-05', active: true },
23
+ { id: 5, name: 'Charlie Wilson', email: 'charlie.wilson@example.com', role: 'QA Engineer', salary: 65000, joinDate: '2023-02-28', active: true },
24
+ { id: 6, name: 'David Lee', email: 'david.lee@example.com', role: 'Developer', salary: 78000, joinDate: '2023-04-12', active: true },
25
+ { id: 7, name: 'Emily Davis', email: 'emily.davis@example.com', role: 'Designer', salary: 70000, joinDate: '2023-05-18', active: false },
26
+ { id: 8, name: 'Frank Miller', email: 'frank.miller@example.com', role: 'Manager', salary: 98000, joinDate: '2022-08-22', active: true }
27
+ ];
28
+
29
+ @respond('@snice/table/config')
30
+ async getTableConfig() {
31
+ // Return table configuration
32
+ return {
33
+ columns: [
34
+ { key: 'id', label: 'ID', type: 'number', align: 'right' },
35
+ { key: 'name', label: 'Full Name', type: 'text' },
36
+ { key: 'email', label: 'Email', type: 'text' },
37
+ { key: 'role', label: 'Role', type: 'text', align: 'center' },
38
+ { key: 'salary', label: 'Salary', type: 'currency', prefix: '$', thousandsSeparator: true, decimals: 0 },
39
+ { key: 'joinDate', label: 'Join Date', type: 'date', dateFormat: 'short' },
40
+ { key: 'active', label: 'Status', type: 'boolean', useSymbols: true, trueSymbol: '✅', falseSymbol: '❌' }
41
+ ],
42
+ selectorOptions: [
43
+ { value: 'Developer', label: 'Developer' },
44
+ { value: 'Designer', label: 'Designer' },
45
+ { value: 'Manager', label: 'Manager' },
46
+ { value: 'QA Engineer', label: 'QA Engineer' }
47
+ ]
48
+ };
49
+ }
50
+
51
+ @respond('@snice/table/data')
52
+ async getTableData(params: any) {
53
+ // Add fake delay to see loading skeleton
54
+ await new Promise(resolve => setTimeout(resolve, 1500));
55
+
56
+ let filteredData = [...this.sampleData];
57
+
58
+ // Apply search filter
59
+ if (params.search) {
60
+ const searchLower = params.search.toLowerCase();
61
+ filteredData = filteredData.filter(row =>
62
+ Object.values(row).some(val =>
63
+ String(val).toLowerCase().includes(searchLower)
64
+ )
65
+ );
66
+ }
67
+
68
+ // Apply selector filter
69
+ if (params.selector) {
70
+ const selectedRoles = params.selector.split(',');
71
+ filteredData = filteredData.filter(row =>
72
+ selectedRoles.includes(row.role)
73
+ );
74
+ }
75
+
76
+ // Apply sorting
77
+ if (params.sort && params.sort.length > 0) {
78
+ filteredData.sort((a: any, b: any) => {
79
+ for (const sortItem of params.sort) {
80
+ const aVal = a[sortItem.column];
81
+ const bVal = b[sortItem.column];
82
+
83
+ let comparison = 0;
84
+ if (aVal < bVal) comparison = -1;
85
+ else if (aVal > bVal) comparison = 1;
86
+
87
+ if (comparison !== 0) {
88
+ return sortItem.direction === 'desc' ? -comparison : comparison;
89
+ }
90
+ }
91
+ return 0;
92
+ });
93
+ }
94
+
95
+ return {
96
+ data: filteredData,
97
+ total: filteredData.length
98
+ };
99
+ }
100
+ }