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/select/demo.html DELETED
@@ -1,511 +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>Select/Dropdown 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
- .select-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: flex-start;
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
- .form-row {
73
- margin-bottom: 16px;
74
- }
75
-
76
- .card {
77
- background: var(--snice-color-background-secondary);
78
- border: 1px solid var(--snice-color-border);
79
- border-radius: var(--snice-border-radius-lg);
80
- padding: 20px;
81
- margin-bottom: 20px;
82
- }
83
-
84
- snice-select {
85
- width: 250px;
86
- }
87
- </style>
88
- </head>
89
- <body>
90
- <h2>Select/Dropdown Component Demo</h2>
91
-
92
- <div class="section">
93
- <h3>Basic Select</h3>
94
- <div class="select-group">
95
- <snice-select
96
- id="basic-select"
97
- label="Choose an option"
98
- placeholder="Select an option">
99
- <snice-option value="option1">Option 1</snice-option>
100
- <snice-option value="option2">Option 2</snice-option>
101
- <snice-option value="option3">Option 3</snice-option>
102
- <snice-option value="option4" disabled>Option 4 (disabled)</snice-option>
103
- <snice-option value="option5">Option 5</snice-option>
104
- </snice-select>
105
-
106
- <snice-select
107
- id="pre-selected"
108
- label="Pre-selected value"
109
- value="option2">
110
- <snice-option value="option1">Option 1</snice-option>
111
- <snice-option value="option2">Option 2</snice-option>
112
- <snice-option value="option3">Option 3</snice-option>
113
- </snice-select>
114
-
115
- <snice-select
116
- label="Disabled select"
117
- value="option1"
118
- disabled>
119
- <snice-option value="option1">Option 1</snice-option>
120
- <snice-option value="option2">Option 2</snice-option>
121
- <snice-option value="option3">Option 3</snice-option>
122
- </snice-select>
123
- </div>
124
- </div>
125
-
126
- <div class="section">
127
- <h3>Sizes</h3>
128
- <div class="row">
129
- <snice-select
130
- size="small"
131
- label="Small select"
132
- placeholder="Small size">
133
- <snice-option value="1">First Option</snice-option>
134
- <snice-option value="2">Second Option</snice-option>
135
- <snice-option value="3">Third Option</snice-option>
136
- </snice-select>
137
-
138
- <snice-select
139
- size="medium"
140
- label="Medium select (default)"
141
- placeholder="Medium size">
142
- <snice-option value="1">First Option</snice-option>
143
- <snice-option value="2">Second Option</snice-option>
144
- <snice-option value="3">Third Option</snice-option>
145
- </snice-select>
146
-
147
- <snice-select
148
- size="large"
149
- label="Large select"
150
- placeholder="Large size">
151
- <snice-option value="1">First Option</snice-option>
152
- <snice-option value="2">Second Option</snice-option>
153
- <snice-option value="3">Third Option</snice-option>
154
- </snice-select>
155
- </div>
156
- </div>
157
-
158
- <div class="section">
159
- <h3>Features</h3>
160
- <div class="row">
161
- <snice-select
162
- id="searchable-select"
163
- label="Searchable"
164
- placeholder="Type to search..."
165
- searchable>
166
- <snice-option value="us" icon="https://flagcdn.com/w20/us.png">United States</snice-option>
167
- <snice-option value="uk" icon="https://flagcdn.com/w20/gb.png">United Kingdom</snice-option>
168
- <snice-option value="ca" icon="https://flagcdn.com/w20/ca.png">Canada</snice-option>
169
- <snice-option value="au" icon="https://flagcdn.com/w20/au.png">Australia</snice-option>
170
- <snice-option value="de" icon="https://flagcdn.com/w20/de.png">Germany</snice-option>
171
- <snice-option value="fr" icon="https://flagcdn.com/w20/fr.png">France</snice-option>
172
- <snice-option value="es" icon="https://flagcdn.com/w20/es.png">Spain</snice-option>
173
- <snice-option value="it" icon="https://flagcdn.com/w20/it.png">Italy</snice-option>
174
- <snice-option value="jp" icon="https://flagcdn.com/w20/jp.png">Japan</snice-option>
175
- <snice-option value="cn" icon="https://flagcdn.com/w20/cn.png">China</snice-option>
176
- <snice-option value="in" icon="https://flagcdn.com/w20/in.png">India</snice-option>
177
- <snice-option value="br" icon="https://flagcdn.com/w20/br.png">Brazil</snice-option>
178
- <snice-option value="mx" icon="https://flagcdn.com/w20/mx.png">Mexico</snice-option>
179
- </snice-select>
180
-
181
- <snice-select
182
- id="clearable-select"
183
- label="Clearable"
184
- placeholder="Can be cleared"
185
- clearable
186
- value="option2">
187
- <snice-option value="option1">Option 1</snice-option>
188
- <snice-option value="option2">Option 2</snice-option>
189
- <snice-option value="option3">Option 3</snice-option>
190
- </snice-select>
191
-
192
- <snice-select
193
- id="required-select"
194
- label="Required field"
195
- placeholder="This is required"
196
- required>
197
- <snice-option value="">Select one...</snice-option>
198
- <snice-option value="yes">Yes</snice-option>
199
- <snice-option value="no">No</snice-option>
200
- <snice-option value="maybe">Maybe</snice-option>
201
- </snice-select>
202
- </div>
203
- </div>
204
-
205
- <div class="section">
206
- <h3>Multiple Selection</h3>
207
- <snice-select
208
- id="multiple-select"
209
- label="Select multiple options"
210
- placeholder="Choose one or more..."
211
- multiple
212
- clearable>
213
- <snice-option value="electronics">Electronics</snice-option>
214
- <snice-option value="clothing">Clothing</snice-option>
215
- <snice-option value="books">Books</snice-option>
216
- <snice-option value="home">Home & Garden</snice-option>
217
- <snice-option value="sports">Sports & Outdoors</snice-option>
218
- <snice-option value="toys">Toys & Games</snice-option>
219
- </snice-select>
220
-
221
- <snice-select
222
- id="multiple-searchable"
223
- label="Multiple with search"
224
- placeholder="Search and select..."
225
- multiple
226
- searchable
227
- clearable
228
- style="width: 350px;">
229
- <snice-option value="html">HTML</snice-option>
230
- <snice-option value="css">CSS</snice-option>
231
- <snice-option value="js">JavaScript</snice-option>
232
- <snice-option value="react">React</snice-option>
233
- <snice-option value="vue">Vue.js</snice-option>
234
- <snice-option value="angular">Angular</snice-option>
235
- <snice-option value="node">Node.js</snice-option>
236
- <snice-option value="python">Python</snice-option>
237
- <snice-option value="django">Django</snice-option>
238
- <snice-option value="sql">SQL</snice-option>
239
- <snice-option value="mongodb">MongoDB</snice-option>
240
- <snice-option value="aws">AWS</snice-option>
241
- </snice-select>
242
- </div>
243
-
244
- <div class="section">
245
- <h3>Country Selector Example</h3>
246
- <div class="card">
247
- <snice-select
248
- id="country-select"
249
- label="Select your country"
250
- placeholder="Choose a country..."
251
- searchable
252
- clearable>
253
- <snice-option value="us" icon="https://flagcdn.com/w20/us.png">United States</snice-option>
254
- <snice-option value="uk" icon="https://flagcdn.com/w20/gb.png">United Kingdom</snice-option>
255
- <snice-option value="ca" icon="https://flagcdn.com/w20/ca.png">Canada</snice-option>
256
- <snice-option value="au" icon="https://flagcdn.com/w20/au.png">Australia</snice-option>
257
- <snice-option value="de" icon="https://flagcdn.com/w20/de.png">Germany</snice-option>
258
- <snice-option value="fr" icon="https://flagcdn.com/w20/fr.png">France</snice-option>
259
- <snice-option value="es" icon="https://flagcdn.com/w20/es.png">Spain</snice-option>
260
- <snice-option value="it" icon="https://flagcdn.com/w20/it.png">Italy</snice-option>
261
- <snice-option value="jp" icon="https://flagcdn.com/w20/jp.png">Japan</snice-option>
262
- <snice-option value="cn" icon="https://flagcdn.com/w20/cn.png">China</snice-option>
263
- <snice-option value="in" icon="https://flagcdn.com/w20/in.png">India</snice-option>
264
- <snice-option value="br" icon="https://flagcdn.com/w20/br.png">Brazil</snice-option>
265
- <snice-option value="mx" icon="https://flagcdn.com/w20/mx.png">Mexico</snice-option>
266
- <snice-option value="kr" icon="https://flagcdn.com/w20/kr.png">South Korea</snice-option>
267
- <snice-option value="nl" icon="https://flagcdn.com/w20/nl.png">Netherlands</snice-option>
268
- </snice-select>
269
- <div id="country-output" class="output">No country selected</div>
270
- </div>
271
- </div>
272
-
273
- <div class="section">
274
- <h3>Product Filter Example</h3>
275
- <div class="card">
276
- <div class="form-row">
277
- <snice-select
278
- id="category-select"
279
- label="Category"
280
- placeholder="All categories"
281
- clearable>
282
- <snice-option value="">All Categories</snice-option>
283
- <snice-option value="electronics">Electronics</snice-option>
284
- <snice-option value="clothing">Clothing</snice-option>
285
- <snice-option value="books">Books</snice-option>
286
- <snice-option value="home">Home & Garden</snice-option>
287
- <snice-option value="sports">Sports & Outdoors</snice-option>
288
- <snice-option value="toys">Toys & Games</snice-option>
289
- </snice-select>
290
- </div>
291
-
292
- <div class="form-row">
293
- <snice-select
294
- id="brand-select"
295
- label="Brands"
296
- placeholder="Select brands..."
297
- multiple
298
- searchable
299
- clearable>
300
- <snice-option value="apple">Apple</snice-option>
301
- <snice-option value="samsung">Samsung</snice-option>
302
- <snice-option value="sony">Sony</snice-option>
303
- <snice-option value="lg">LG</snice-option>
304
- <snice-option value="nike">Nike</snice-option>
305
- <snice-option value="adidas">Adidas</snice-option>
306
- <snice-option value="puma">Puma</snice-option>
307
- </snice-select>
308
- </div>
309
-
310
- <div class="form-row">
311
- <snice-select
312
- id="sort-select"
313
- label="Sort by"
314
- value="relevance">
315
- <snice-option value="relevance">Relevance</snice-option>
316
- <snice-option value="price-low">Price: Low to High</snice-option>
317
- <snice-option value="price-high">Price: High to Low</snice-option>
318
- <snice-option value="rating">Customer Rating</snice-option>
319
- <snice-option value="newest">Newest First</snice-option>
320
- </snice-select>
321
- </div>
322
-
323
- <button onclick="applyFilters()">Apply Filters</button>
324
- <div id="filter-output" class="output">No filters applied</div>
325
- </div>
326
- </div>
327
-
328
- <div class="section">
329
- <h3>States</h3>
330
- <div class="select-group">
331
- <snice-select
332
- label="Invalid state"
333
- placeholder="This has an error"
334
- invalid
335
- value="option1">
336
- <snice-option value="option1">Option 1</snice-option>
337
- <snice-option value="option2">Option 2</snice-option>
338
- <snice-option value="option3">Option 3</snice-option>
339
- </snice-select>
340
-
341
- <snice-select
342
- label="Read-only"
343
- value="option2"
344
- readonly>
345
- <snice-option value="option1">Option 1</snice-option>
346
- <snice-option value="option2">Option 2</snice-option>
347
- <snice-option value="option3">Option 3</snice-option>
348
- </snice-select>
349
-
350
- <snice-select
351
- label="Disabled with value"
352
- value="option3"
353
- disabled>
354
- <snice-option value="option1">Option 1</snice-option>
355
- <snice-option value="option2">Option 2</snice-option>
356
- <snice-option value="option3">Option 3</snice-option>
357
- </snice-select>
358
- </div>
359
- </div>
360
-
361
- <div class="section">
362
- <h3>Interactive Example</h3>
363
- <snice-select
364
- id="interactive-select"
365
- label="Programming Languages"
366
- placeholder="Select a language..."
367
- searchable
368
- clearable>
369
- <snice-option value="javascript">JavaScript</snice-option>
370
- <snice-option value="python">Python</snice-option>
371
- <snice-option value="java">Java</snice-option>
372
- <snice-option value="csharp">C#</snice-option>
373
- <snice-option value="cpp">C++</snice-option>
374
- <snice-option value="ruby">Ruby</snice-option>
375
- <snice-option value="go">Go</snice-option>
376
- <snice-option value="rust">Rust</snice-option>
377
- <snice-option value="typescript">TypeScript</snice-option>
378
- <snice-option value="swift">Swift</snice-option>
379
- <snice-option value="kotlin">Kotlin</snice-option>
380
- <snice-option value="php">PHP</snice-option>
381
- </snice-select>
382
-
383
- <div class="row" style="margin-top: 16px;">
384
- <button onclick="document.getElementById('interactive-select').openDropdown()">Open</button>
385
- <button onclick="document.getElementById('interactive-select').closeDropdown()">Close</button>
386
- <button onclick="document.getElementById('interactive-select').toggleDropdown()">Toggle</button>
387
- <button onclick="document.getElementById('interactive-select').selectOption('python')">Select Python</button>
388
- <button onclick="document.getElementById('interactive-select').clear()">Clear</button>
389
- <button onclick="document.getElementById('interactive-select').focus()">Focus</button>
390
- <button onclick="getValue('interactive-select')">Get Value</button>
391
- </div>
392
- <div id="interactive-output" class="output">Events will appear here...</div>
393
- </div>
394
-
395
- <div class="section">
396
- <h3>Form Example</h3>
397
- <form id="demo-form">
398
- <div class="form-row">
399
- <snice-select
400
- name="department"
401
- label="Department"
402
- placeholder="Select department"
403
- required>
404
- <snice-option value="">Choose...</snice-option>
405
- <snice-option value="engineering">Engineering</snice-option>
406
- <snice-option value="marketing">Marketing</snice-option>
407
- <snice-option value="sales">Sales</snice-option>
408
- <snice-option value="hr">Human Resources</snice-option>
409
- <snice-option value="finance">Finance</snice-option>
410
- <snice-option value="operations">Operations</snice-option>
411
- </snice-select>
412
- </div>
413
-
414
- <div class="form-row">
415
- <snice-select
416
- name="skills"
417
- label="Skills"
418
- placeholder="Select your skills..."
419
- multiple
420
- searchable>
421
- <snice-option value="html">HTML</snice-option>
422
- <snice-option value="css">CSS</snice-option>
423
- <snice-option value="js">JavaScript</snice-option>
424
- <snice-option value="react">React</snice-option>
425
- <snice-option value="vue">Vue.js</snice-option>
426
- <snice-option value="angular">Angular</snice-option>
427
- <snice-option value="node">Node.js</snice-option>
428
- <snice-option value="python">Python</snice-option>
429
- <snice-option value="django">Django</snice-option>
430
- <snice-option value="sql">SQL</snice-option>
431
- </snice-select>
432
- </div>
433
-
434
- <div class="form-row">
435
- <snice-select
436
- name="experience"
437
- label="Years of Experience"
438
- required>
439
- <snice-option value="">Select...</snice-option>
440
- <snice-option value="0-1">0-1 years</snice-option>
441
- <snice-option value="1-3">1-3 years</snice-option>
442
- <snice-option value="3-5">3-5 years</snice-option>
443
- <snice-option value="5-10">5-10 years</snice-option>
444
- <snice-option value="10+">10+ years</snice-option>
445
- </snice-select>
446
- </div>
447
-
448
- <button type="submit">Submit Form</button>
449
- </form>
450
- <div id="form-output" class="output">Form data will appear here...</div>
451
- </div>
452
-
453
- <script type="module">
454
- import './snice-select.ts';
455
- import './snice-option.ts';
456
-
457
- // Event listeners
458
- document.getElementById('country-select').addEventListener('@snice/select-change', (e) => {
459
- const selected = e.detail.option;
460
- document.getElementById('country-output').textContent =
461
- selected ? `Selected: ${selected.label} (${selected.value})` : 'No country selected';
462
- });
463
-
464
- // Product filter
465
- window.applyFilters = function() {
466
- const filters = {
467
- category: document.getElementById('category-select').value,
468
- brands: document.getElementById('brand-select').value.split(',').filter(v => v),
469
- sort: document.getElementById('sort-select').value
470
- };
471
- document.getElementById('filter-output').textContent =
472
- `Applied filters: ${JSON.stringify(filters, null, 2)}`;
473
- };
474
-
475
- // Interactive events
476
- const interactiveSelect = document.getElementById('interactive-select');
477
- const interactiveOutput = document.getElementById('interactive-output');
478
-
479
- interactiveSelect.addEventListener('@snice/select-change', (e) => {
480
- interactiveOutput.textContent = `Changed: value=${e.detail.value}, label=${e.detail.option?.label || 'cleared'}`;
481
- });
482
-
483
- interactiveSelect.addEventListener('@snice/select-open', () => {
484
- console.log('Dropdown opened');
485
- });
486
-
487
- interactiveSelect.addEventListener('@snice/select-close', () => {
488
- console.log('Dropdown closed');
489
- });
490
-
491
- window.getValue = function(id) {
492
- const select = document.getElementById(id);
493
- interactiveOutput.textContent = `Current value: ${select.value || 'none'}`;
494
- };
495
-
496
- // Form submission
497
- document.getElementById('demo-form').addEventListener('submit', (e) => {
498
- e.preventDefault();
499
- const data = {};
500
-
501
- // Get select values manually since custom elements might not work with FormData
502
- data.department = document.querySelector('[name="department"]').value;
503
- data.skills = document.querySelector('[name="skills"]').value.split(',').filter(v => v);
504
- data.experience = document.querySelector('[name="experience"]').value;
505
-
506
- document.getElementById('form-output').textContent =
507
- `Form data: ${JSON.stringify(data, null, 2)}`;
508
- });
509
- </script>
510
- </body>
511
- </html>
package/components/select/snice-option.ts DELETED
@@ -1,52 +0,0 @@
1
- import { element, property, ready } from 'snice';
2
- import type { SniceOptionElement } from './snice-option.types';
3
-
4
- @element('snice-option')
5
- export class SniceOption extends HTMLElement implements SniceOptionElement {
6
- @property({ reflect: true })
7
- value = '';
8
-
9
- @property({ reflect: true })
10
- label = '';
11
-
12
- @property({ type: Boolean, reflect: true })
13
- disabled = false;
14
-
15
- @property({ type: Boolean, reflect: true })
16
- selected = false;
17
-
18
- @property({ reflect: true })
19
- icon = '';
20
-
21
- html() {
22
- // Options are data-only elements, no shadow DOM needed
23
- return '';
24
- }
25
-
26
- @ready()
27
- init() {
28
- // Hide the option element itself as it's only used for data
29
- this.style.display = 'none';
30
-
31
- // If no label is provided, use the text content
32
- if (!this.label && this.textContent) {
33
- this.label = this.textContent.trim();
34
- }
35
-
36
- // If no value is provided, use the label
37
- if (!this.value && this.label) {
38
- this.value = this.label;
39
- }
40
- }
41
-
42
- // Getter for the option data
43
- get optionData() {
44
- return {
45
- value: this.value,
46
- label: this.label || this.textContent?.trim() || this.value,
47
- disabled: this.disabled,
48
- selected: this.selected,
49
- icon: this.icon
50
- };
51
- }
52
- }