snice 2.1.5 → 2.2.0

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