snice 2.1.5 → 2.2.1

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 (367) 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-C9N6yGxQ.js +4 -0
  123. package/dist/components/snice-cell-C9N6yGxQ.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.iife.js +1 -1
  207. package/dist/symbols.esm.js +1 -1
  208. package/dist/transitions.esm.js +1 -1
  209. package/package.json +10 -6
  210. package/components/accordion/demo.html +0 -403
  211. package/components/accordion/snice-accordion-item.css +0 -85
  212. package/components/accordion/snice-accordion-item.ts +0 -226
  213. package/components/accordion/snice-accordion.css +0 -31
  214. package/components/accordion/snice-accordion.ts +0 -182
  215. package/components/accordion/snice-accordion.types.ts +0 -32
  216. package/components/alert/demo.html +0 -445
  217. package/components/alert/snice-alert.css +0 -195
  218. package/components/alert/snice-alert.ts +0 -141
  219. package/components/avatar/demo.html +0 -598
  220. package/components/avatar/snice-avatar.css +0 -131
  221. package/components/avatar/snice-avatar.ts +0 -136
  222. package/components/avatar/snice-avatar.types.ts +0 -13
  223. package/components/badge/demo.html +0 -523
  224. package/components/badge/snice-badge.css +0 -161
  225. package/components/badge/snice-badge.ts +0 -117
  226. package/components/breadcrumbs/demo.html +0 -404
  227. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  228. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  229. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  230. package/components/breadcrumbs/snice-crumb.ts +0 -26
  231. package/components/button/demo.html +0 -42
  232. package/components/button/snice-button.css +0 -230
  233. package/components/button/snice-button.ts +0 -169
  234. package/components/button/snice-button.types.ts +0 -25
  235. package/components/card/demo.html +0 -525
  236. package/components/card/snice-card.css +0 -140
  237. package/components/card/snice-card.ts +0 -102
  238. package/components/checkbox/demo.html +0 -253
  239. package/components/checkbox/snice-checkbox.css +0 -164
  240. package/components/checkbox/snice-checkbox.ts +0 -223
  241. package/components/checkbox/snice-checkbox.types.ts +0 -22
  242. package/components/chip/demo.html +0 -383
  243. package/components/chip/snice-chip.css +0 -195
  244. package/components/chip/snice-chip.ts +0 -139
  245. package/components/chip/snice-chip.types.ts +0 -15
  246. package/components/date-picker/README.md +0 -233
  247. package/components/date-picker/demo.html +0 -191
  248. package/components/date-picker/snice-date-picker.css +0 -330
  249. package/components/date-picker/snice-date-picker.ts +0 -777
  250. package/components/date-picker/snice-date-picker.types.ts +0 -83
  251. package/components/divider/demo.html +0 -233
  252. package/components/divider/snice-divider.css +0 -155
  253. package/components/divider/snice-divider.ts +0 -69
  254. package/components/drawer/demo.html +0 -328
  255. package/components/drawer/snice-drawer.css +0 -476
  256. package/components/drawer/snice-drawer.ts +0 -287
  257. package/components/drawer/snice-drawer.types.ts +0 -17
  258. package/components/global.d.ts +0 -14
  259. package/components/input/demo.html +0 -303
  260. package/components/input/snice-input.css +0 -257
  261. package/components/input/snice-input.ts +0 -442
  262. package/components/input/snice-input.types.ts +0 -59
  263. package/components/input/test.html +0 -77
  264. package/components/layout/README.md +0 -260
  265. package/components/layout/demo.html +0 -538
  266. package/components/layout/snice-layout-blog.css +0 -129
  267. package/components/layout/snice-layout-blog.ts +0 -48
  268. package/components/layout/snice-layout-card.css +0 -104
  269. package/components/layout/snice-layout-card.ts +0 -35
  270. package/components/layout/snice-layout-centered.css +0 -51
  271. package/components/layout/snice-layout-centered.ts +0 -22
  272. package/components/layout/snice-layout-dashboard.css +0 -98
  273. package/components/layout/snice-layout-dashboard.ts +0 -45
  274. package/components/layout/snice-layout-fullscreen.css +0 -72
  275. package/components/layout/snice-layout-fullscreen.ts +0 -34
  276. package/components/layout/snice-layout-landing.css +0 -92
  277. package/components/layout/snice-layout-landing.ts +0 -47
  278. package/components/layout/snice-layout-minimal.css +0 -16
  279. package/components/layout/snice-layout-minimal.ts +0 -19
  280. package/components/layout/snice-layout-sidebar.css +0 -117
  281. package/components/layout/snice-layout-sidebar.ts +0 -48
  282. package/components/layout/snice-layout-split.css +0 -103
  283. package/components/layout/snice-layout-split.ts +0 -29
  284. package/components/layout/snice-layout.css +0 -72
  285. package/components/layout/snice-layout.ts +0 -35
  286. package/components/login/demo-auth-controller.ts +0 -185
  287. package/components/login/demo.html +0 -470
  288. package/components/login/snice-login.css +0 -204
  289. package/components/login/snice-login.ts +0 -326
  290. package/components/login/snice-login.types.ts +0 -29
  291. package/components/modal/demo.html +0 -291
  292. package/components/modal/snice-modal.css +0 -203
  293. package/components/modal/snice-modal.ts +0 -233
  294. package/components/modal/snice-modal.types.ts +0 -21
  295. package/components/pagination/demo.html +0 -395
  296. package/components/pagination/snice-pagination.ts +0 -333
  297. package/components/pagination/snice-pagination.types.ts +0 -21
  298. package/components/progress/demo.html +0 -510
  299. package/components/progress/snice-progress.css +0 -267
  300. package/components/progress/snice-progress.ts +0 -247
  301. package/components/progress/snice-progress.types.ts +0 -19
  302. package/components/radio/demo.html +0 -287
  303. package/components/radio/snice-radio.css +0 -171
  304. package/components/radio/snice-radio.ts +0 -218
  305. package/components/radio/snice-radio.types.ts +0 -21
  306. package/components/select/demo.html +0 -511
  307. package/components/select/snice-option.ts +0 -52
  308. package/components/select/snice-select.css +0 -392
  309. package/components/select/snice-select.ts +0 -796
  310. package/components/select/snice-select.types.ts +0 -55
  311. package/components/skeleton/demo.html +0 -514
  312. package/components/skeleton/snice-skeleton.css +0 -109
  313. package/components/skeleton/snice-skeleton.ts +0 -126
  314. package/components/switch/demo.html +0 -284
  315. package/components/switch/snice-switch.css +0 -221
  316. package/components/switch/snice-switch.ts +0 -229
  317. package/components/switch/snice-switch.types.ts +0 -23
  318. package/components/symbols.ts +0 -23
  319. package/components/table/demo-table-controller.ts +0 -100
  320. package/components/table/demo.html +0 -480
  321. package/components/table/snice-cell-boolean.ts +0 -112
  322. package/components/table/snice-cell-date.ts +0 -210
  323. package/components/table/snice-cell-duration.ts +0 -91
  324. package/components/table/snice-cell-filesize.ts +0 -90
  325. package/components/table/snice-cell-number.ts +0 -165
  326. package/components/table/snice-cell-progress.ts +0 -83
  327. package/components/table/snice-cell-rating.ts +0 -82
  328. package/components/table/snice-cell-sparkline.ts +0 -253
  329. package/components/table/snice-cell-text.ts +0 -125
  330. package/components/table/snice-cell.css +0 -296
  331. package/components/table/snice-cell.ts +0 -473
  332. package/components/table/snice-column.ts +0 -353
  333. package/components/table/snice-header.css +0 -243
  334. package/components/table/snice-header.ts +0 -261
  335. package/components/table/snice-progress.ts +0 -66
  336. package/components/table/snice-rating.ts +0 -45
  337. package/components/table/snice-row.css +0 -255
  338. package/components/table/snice-row.ts +0 -331
  339. package/components/table/snice-table.css +0 -241
  340. package/components/table/snice-table.ts +0 -737
  341. package/components/table/snice-table.types.ts +0 -158
  342. package/components/tabs/demo.html +0 -487
  343. package/components/tabs/snice-tab-panel.css +0 -264
  344. package/components/tabs/snice-tab-panel.ts +0 -47
  345. package/components/tabs/snice-tab.css +0 -96
  346. package/components/tabs/snice-tab.ts +0 -65
  347. package/components/tabs/snice-tabs.css +0 -189
  348. package/components/tabs/snice-tabs.ts +0 -332
  349. package/components/tabs/snice-tabs.types.ts +0 -28
  350. package/components/theme/theme.css +0 -234
  351. package/components/toast/demo.html +0 -329
  352. package/components/toast/snice-toast-container.ts +0 -256
  353. package/components/toast/snice-toast.css +0 -213
  354. package/components/toast/snice-toast.ts +0 -276
  355. package/components/toast/snice-toast.types.ts +0 -35
  356. package/components/tooltip/demo.html +0 -350
  357. package/components/tooltip/snice-tooltip-portal.css +0 -79
  358. package/components/tooltip/snice-tooltip.css +0 -117
  359. package/components/tooltip/snice-tooltip.ts +0 -612
  360. package/components/tooltip/snice-tooltip.types.ts +0 -32
  361. package/components/transitions.ts +0 -94
  362. package/components/tsconfig.json +0 -18
  363. package/dist/index.cjs.min.map +0 -1
  364. package/dist/index.esm.min.js +0 -14
  365. package/dist/index.esm.min.js.map +0 -1
  366. package/dist/index.iife.min.js +0 -15
  367. package/dist/index.iife.min.js.map +0 -1
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
- }