@syncfusion/ej2-dropdowns 25.2.4 → 25.2.5-30068

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 (417) hide show
  1. package/CHANGELOG.md +2186 -2164
  2. package/{README.md → ReadMe.md} +217 -217
  3. package/dist/ej2-dropdowns.umd.min.js +1 -10
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +113 -80
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +270 -237
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/helpers/e2e/autocomplete.js +13 -13
  10. package/helpers/e2e/combobox.js +13 -13
  11. package/helpers/e2e/dropdownlist.js +13 -13
  12. package/helpers/e2e/index.js +3 -3
  13. package/helpers/e2e/listboxHelper.js +13 -13
  14. package/helpers/e2e/multiselect.js +13 -13
  15. package/license +2 -2
  16. package/package.json +80 -80
  17. package/src/auto-complete/auto-complete-model.d.ts +190 -190
  18. package/src/auto-complete/auto-complete.d.ts +12 -12
  19. package/src/auto-complete/auto-complete.js +21 -21
  20. package/src/combo-box/combo-box-model.d.ts +233 -233
  21. package/src/combo-box/combo-box.d.ts +27 -27
  22. package/src/combo-box/combo-box.js +29 -29
  23. package/src/common/virtual-scroll.js +46 -46
  24. package/src/drop-down-base/drop-down-base-model.d.ts +200 -200
  25. package/src/drop-down-base/drop-down-base.d.ts +17 -18
  26. package/src/drop-down-base/drop-down-base.js +42 -32
  27. package/src/drop-down-list/drop-down-list-model.d.ts +209 -209
  28. package/src/drop-down-list/drop-down-list.d.ts +5 -5
  29. package/src/drop-down-list/drop-down-list.js +51 -29
  30. package/src/drop-down-tree/drop-down-tree-model.d.ts +473 -473
  31. package/src/drop-down-tree/drop-down-tree.d.ts +1 -1
  32. package/src/drop-down-tree/drop-down-tree.js +21 -21
  33. package/src/list-box/list-box-model.d.ts +237 -237
  34. package/src/list-box/list-box.d.ts +2 -2
  35. package/src/list-box/list-box.js +19 -19
  36. package/src/mention/mention-model.d.ts +261 -261
  37. package/src/mention/mention.js +19 -19
  38. package/src/multi-select/float-label.js +1 -0
  39. package/src/multi-select/multi-select-model.d.ts +526 -526
  40. package/src/multi-select/multi-select.js +20 -20
  41. package/styles/auto-complete/_all.scss +1 -1
  42. package/styles/auto-complete/_bds-definition.scss +2 -2
  43. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  44. package/styles/auto-complete/_bootstrap-definition.scss +2 -2
  45. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  46. package/styles/auto-complete/_bootstrap5-definition.scss +2 -2
  47. package/styles/auto-complete/_bootstrap5.3-definition.scss +2 -0
  48. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  49. package/styles/auto-complete/_fabric-definition.scss +2 -2
  50. package/styles/auto-complete/_fluent-definition.scss +2 -2
  51. package/styles/auto-complete/_fluent2-definition.scss +2 -0
  52. package/styles/auto-complete/_fusionnew-definition.scss +2 -2
  53. package/styles/auto-complete/_highcontrast-definition.scss +2 -2
  54. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  55. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  56. package/styles/auto-complete/_material-definition.scss +2 -2
  57. package/styles/auto-complete/_material3-definition.scss +2 -2
  58. package/styles/auto-complete/_tailwind-definition.scss +2 -2
  59. package/styles/auto-complete/fluent2.css +1129 -0
  60. package/styles/auto-complete/fluent2.scss +4 -0
  61. package/styles/auto-complete/material3-dark.css +1 -1
  62. package/styles/auto-complete/material3-dark.scss +1 -1
  63. package/styles/auto-complete/material3.css +1 -1
  64. package/styles/auto-complete/material3.scss +1 -1
  65. package/styles/bootstrap-dark.css +72 -300
  66. package/styles/bootstrap-dark.scss +28 -8
  67. package/styles/bootstrap.css +72 -306
  68. package/styles/bootstrap.scss +28 -8
  69. package/styles/bootstrap4.css +72 -350
  70. package/styles/bootstrap4.scss +28 -8
  71. package/styles/bootstrap5-dark.css +72 -301
  72. package/styles/bootstrap5-dark.scss +28 -8
  73. package/styles/bootstrap5.css +72 -301
  74. package/styles/bootstrap5.scss +28 -8
  75. package/styles/combo-box/_all.scss +1 -1
  76. package/styles/combo-box/_bds-definition.scss +2 -2
  77. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  78. package/styles/combo-box/_bootstrap-definition.scss +2 -2
  79. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  80. package/styles/combo-box/_bootstrap5-definition.scss +2 -2
  81. package/styles/combo-box/_bootstrap5.3-definition.scss +2 -0
  82. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  83. package/styles/combo-box/_fabric-definition.scss +2 -2
  84. package/styles/combo-box/_fluent-definition.scss +2 -2
  85. package/styles/combo-box/_fluent2-definition.scss +2 -0
  86. package/styles/combo-box/_fusionnew-definition.scss +2 -2
  87. package/styles/combo-box/_highcontrast-definition.scss +2 -2
  88. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  89. package/styles/combo-box/_material-dark-definition.scss +2 -2
  90. package/styles/combo-box/_material-definition.scss +2 -2
  91. package/styles/combo-box/_material3-definition.scss +2 -2
  92. package/styles/combo-box/_tailwind-definition.scss +2 -2
  93. package/styles/combo-box/fluent2.css +1129 -0
  94. package/styles/combo-box/fluent2.scss +4 -0
  95. package/styles/combo-box/material3-dark.css +1 -1
  96. package/styles/combo-box/material3-dark.scss +1 -1
  97. package/styles/combo-box/material3.css +1 -1
  98. package/styles/combo-box/material3.scss +1 -1
  99. package/styles/drop-down-base/_all.scss +2 -2
  100. package/styles/drop-down-base/_bds-definition.scss +134 -134
  101. package/styles/drop-down-base/_bootstrap-dark-definition.scss +83 -83
  102. package/styles/drop-down-base/_bootstrap-definition.scss +83 -83
  103. package/styles/drop-down-base/_bootstrap4-definition.scss +90 -90
  104. package/styles/drop-down-base/_bootstrap5-definition.scss +117 -117
  105. package/styles/drop-down-base/_bootstrap5.3-definition.scss +117 -0
  106. package/styles/drop-down-base/_definition.scss +23 -23
  107. package/styles/drop-down-base/_fabric-dark-definition.scss +86 -86
  108. package/styles/drop-down-base/_fabric-definition.scss +84 -84
  109. package/styles/drop-down-base/_fluent-definition.scss +121 -121
  110. package/styles/drop-down-base/_fluent2-definition.scss +134 -0
  111. package/styles/drop-down-base/_fusionnew-definition.scss +117 -117
  112. package/styles/drop-down-base/_highcontrast-definition.scss +105 -105
  113. package/styles/drop-down-base/_highcontrast-light-definition.scss +105 -105
  114. package/styles/drop-down-base/_layout.scss +197 -187
  115. package/styles/drop-down-base/_material-dark-definition.scss +86 -86
  116. package/styles/drop-down-base/_material-definition.scss +85 -85
  117. package/styles/drop-down-base/_material3-definition.scss +76 -87
  118. package/styles/drop-down-base/_tailwind-definition.scss +129 -129
  119. package/styles/drop-down-base/_theme.scss +382 -391
  120. package/styles/drop-down-base/fluent2.css +1446 -0
  121. package/styles/drop-down-base/fluent2.scss +3 -0
  122. package/styles/drop-down-base/material3-dark.css +1 -1
  123. package/styles/drop-down-base/material3-dark.scss +1 -1
  124. package/styles/drop-down-base/material3.css +1 -1
  125. package/styles/drop-down-base/material3.scss +1 -1
  126. package/styles/drop-down-list/_all.scss +3 -3
  127. package/styles/drop-down-list/_bds-definition.scss +134 -134
  128. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  129. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  130. package/styles/drop-down-list/_bootstrap4-definition.scss +202 -202
  131. package/styles/drop-down-list/_bootstrap5-definition.scss +201 -201
  132. package/styles/drop-down-list/_bootstrap5.3-definition.scss +201 -0
  133. package/styles/drop-down-list/_fabric-dark-definition.scss +128 -128
  134. package/styles/drop-down-list/_fabric-definition.scss +124 -124
  135. package/styles/drop-down-list/_fluent-definition.scss +185 -185
  136. package/styles/drop-down-list/_fluent2-definition.scss +134 -0
  137. package/styles/drop-down-list/_fusionnew-definition.scss +201 -201
  138. package/styles/drop-down-list/_highcontrast-definition.scss +142 -142
  139. package/styles/drop-down-list/_highcontrast-light-definition.scss +144 -144
  140. package/styles/drop-down-list/_layout.scss +317 -315
  141. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  142. package/styles/drop-down-list/_material-definition.scss +167 -167
  143. package/styles/drop-down-list/_material3-definition.scss +172 -180
  144. package/styles/drop-down-list/_tailwind-definition.scss +134 -134
  145. package/styles/drop-down-list/_theme.scss +10 -10
  146. package/styles/drop-down-list/bootstrap-dark.css +5 -0
  147. package/styles/drop-down-list/bootstrap.css +5 -0
  148. package/styles/drop-down-list/bootstrap4.css +5 -0
  149. package/styles/drop-down-list/bootstrap5-dark.css +5 -0
  150. package/styles/drop-down-list/bootstrap5.css +5 -0
  151. package/styles/drop-down-list/fabric-dark.css +5 -0
  152. package/styles/drop-down-list/fabric.css +5 -0
  153. package/styles/drop-down-list/fluent-dark.css +5 -0
  154. package/styles/drop-down-list/fluent.css +5 -0
  155. package/styles/drop-down-list/fluent2.css +1617 -0
  156. package/styles/drop-down-list/fluent2.scss +9 -0
  157. package/styles/drop-down-list/highcontrast-light.css +5 -0
  158. package/styles/drop-down-list/highcontrast.css +5 -0
  159. package/styles/drop-down-list/icons/_bds.scss +14 -14
  160. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  161. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  162. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  163. package/styles/drop-down-list/icons/_bootstrap5.3.scss +14 -0
  164. package/styles/drop-down-list/icons/_bootstrap5.scss +14 -14
  165. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  166. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  167. package/styles/drop-down-list/icons/_fluent.scss +14 -14
  168. package/styles/drop-down-list/icons/_fluent2.scss +14 -0
  169. package/styles/drop-down-list/icons/_fusionnew.scss +14 -14
  170. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  171. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  172. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  173. package/styles/drop-down-list/icons/_material.scss +14 -14
  174. package/styles/drop-down-list/icons/_material3.scss +14 -14
  175. package/styles/drop-down-list/icons/_tailwind.scss +14 -14
  176. package/styles/drop-down-list/material-dark.css +5 -0
  177. package/styles/drop-down-list/material.css +5 -0
  178. package/styles/drop-down-list/material3-dark.css +6 -1
  179. package/styles/drop-down-list/material3-dark.scss +1 -1
  180. package/styles/drop-down-list/material3.css +6 -1
  181. package/styles/drop-down-list/material3.scss +1 -1
  182. package/styles/drop-down-list/tailwind-dark.css +5 -0
  183. package/styles/drop-down-list/tailwind.css +5 -0
  184. package/styles/drop-down-tree/_all.scss +2 -2
  185. package/styles/drop-down-tree/_bds-definition.scss +67 -61
  186. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +73 -72
  187. package/styles/drop-down-tree/_bootstrap-definition.scss +72 -71
  188. package/styles/drop-down-tree/_bootstrap4-definition.scss +74 -72
  189. package/styles/drop-down-tree/_bootstrap5-definition.scss +66 -60
  190. package/styles/drop-down-tree/_bootstrap5.3-definition.scss +66 -0
  191. package/styles/drop-down-tree/_fabric-dark-definition.scss +73 -72
  192. package/styles/drop-down-tree/_fabric-definition.scss +73 -72
  193. package/styles/drop-down-tree/_fluent-definition.scss +71 -66
  194. package/styles/drop-down-tree/_fluent2-definition.scss +76 -0
  195. package/styles/drop-down-tree/_fusionnew-definition.scss +61 -60
  196. package/styles/drop-down-tree/_highcontrast-definition.scss +73 -72
  197. package/styles/drop-down-tree/_highcontrast-light-definition.scss +73 -72
  198. package/styles/drop-down-tree/_layout.scss +1389 -1423
  199. package/styles/drop-down-tree/_material-dark-definition.scss +74 -73
  200. package/styles/drop-down-tree/_material-definition.scss +74 -73
  201. package/styles/drop-down-tree/_material3-definition.scss +75 -76
  202. package/styles/drop-down-tree/_tailwind-definition.scss +67 -61
  203. package/styles/drop-down-tree/_theme.scss +130 -132
  204. package/styles/drop-down-tree/bootstrap-dark.css +20 -21
  205. package/styles/drop-down-tree/bootstrap.css +20 -21
  206. package/styles/drop-down-tree/bootstrap4.css +21 -22
  207. package/styles/drop-down-tree/bootstrap5-dark.css +20 -19
  208. package/styles/drop-down-tree/bootstrap5.css +20 -19
  209. package/styles/drop-down-tree/fabric-dark.css +20 -21
  210. package/styles/drop-down-tree/fabric.css +20 -21
  211. package/styles/drop-down-tree/fluent-dark.css +28 -27
  212. package/styles/drop-down-tree/fluent.css +28 -27
  213. package/styles/drop-down-tree/fluent2.css +1671 -0
  214. package/styles/drop-down-tree/fluent2.scss +9 -0
  215. package/styles/drop-down-tree/highcontrast-light.css +20 -21
  216. package/styles/drop-down-tree/highcontrast.css +20 -15
  217. package/styles/drop-down-tree/icons/_bds.scss +11 -11
  218. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  219. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  220. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  221. package/styles/drop-down-tree/icons/_bootstrap5.3.scss +11 -0
  222. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  223. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  224. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  225. package/styles/drop-down-tree/icons/_fluent.scss +11 -11
  226. package/styles/drop-down-tree/icons/_fluent2.scss +14 -0
  227. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -11
  228. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  229. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  230. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  231. package/styles/drop-down-tree/icons/_material.scss +11 -11
  232. package/styles/drop-down-tree/icons/_material3.scss +11 -11
  233. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  234. package/styles/drop-down-tree/icons/_tailwind.scss +11 -11
  235. package/styles/drop-down-tree/material-dark.css +28 -34
  236. package/styles/drop-down-tree/material.css +31 -40
  237. package/styles/drop-down-tree/material3-dark.css +17 -21
  238. package/styles/drop-down-tree/material3-dark.scss +1 -1
  239. package/styles/drop-down-tree/material3.css +17 -21
  240. package/styles/drop-down-tree/material3.scss +1 -1
  241. package/styles/drop-down-tree/tailwind-dark.css +29 -20
  242. package/styles/drop-down-tree/tailwind.css +29 -20
  243. package/styles/fabric-dark.css +72 -300
  244. package/styles/fabric-dark.scss +28 -8
  245. package/styles/fabric.css +72 -306
  246. package/styles/fabric.scss +28 -8
  247. package/styles/fluent-dark.css +80 -315
  248. package/styles/fluent-dark.scss +28 -8
  249. package/styles/fluent.css +80 -315
  250. package/styles/fluent.scss +28 -8
  251. package/styles/fluent2.css +4541 -0
  252. package/styles/fluent2.scss +28 -0
  253. package/styles/highcontrast-light.css +72 -300
  254. package/styles/highcontrast-light.scss +28 -8
  255. package/styles/highcontrast.css +72 -300
  256. package/styles/highcontrast.scss +28 -8
  257. package/styles/list-box/_all.scss +2 -2
  258. package/styles/list-box/_bds-definition.scss +136 -136
  259. package/styles/list-box/_bigger.scss +164 -0
  260. package/styles/list-box/_bootstrap-dark-definition.scss +124 -126
  261. package/styles/list-box/_bootstrap-definition.scss +119 -119
  262. package/styles/list-box/_bootstrap4-definition.scss +124 -124
  263. package/styles/list-box/_bootstrap5-definition.scss +121 -120
  264. package/styles/list-box/_bootstrap5.3-definition.scss +121 -0
  265. package/styles/list-box/_fabric-dark-definition.scss +124 -126
  266. package/styles/list-box/_fabric-definition.scss +119 -119
  267. package/styles/list-box/_fluent-definition.scss +120 -120
  268. package/styles/list-box/_fluent2-definition.scss +119 -0
  269. package/styles/list-box/_fusionnew-definition.scss +111 -111
  270. package/styles/list-box/_highcontrast-definition.scss +119 -119
  271. package/styles/list-box/_highcontrast-light-definition.scss +124 -126
  272. package/styles/list-box/_layout.scss +455 -546
  273. package/styles/list-box/_material-dark-definition.scss +124 -126
  274. package/styles/list-box/_material-definition.scss +119 -119
  275. package/styles/list-box/_material3-definition.scss +119 -119
  276. package/styles/list-box/_tailwind-definition.scss +119 -119
  277. package/styles/list-box/_theme.scss +314 -382
  278. package/styles/list-box/bootstrap-dark.css +43 -215
  279. package/styles/list-box/bootstrap.css +43 -221
  280. package/styles/list-box/bootstrap4.css +42 -264
  281. package/styles/list-box/bootstrap5-dark.css +43 -215
  282. package/styles/list-box/bootstrap5.css +43 -215
  283. package/styles/list-box/fabric-dark.css +43 -215
  284. package/styles/list-box/fabric.css +43 -221
  285. package/styles/list-box/fluent-dark.css +43 -221
  286. package/styles/list-box/fluent.css +43 -221
  287. package/styles/list-box/fluent2.css +1896 -0
  288. package/styles/list-box/fluent2.scss +5 -0
  289. package/styles/list-box/highcontrast-light.css +43 -215
  290. package/styles/list-box/highcontrast.css +43 -221
  291. package/styles/list-box/icons/_bds.scss +25 -25
  292. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  293. package/styles/list-box/icons/_bootstrap.scss +25 -25
  294. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  295. package/styles/list-box/icons/_bootstrap5.3.scss +25 -0
  296. package/styles/list-box/icons/_bootstrap5.scss +25 -25
  297. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  298. package/styles/list-box/icons/_fabric.scss +25 -25
  299. package/styles/list-box/icons/_fluent.scss +25 -25
  300. package/styles/list-box/icons/_fluent2.scss +25 -0
  301. package/styles/list-box/icons/_fusionnew.scss +25 -25
  302. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  303. package/styles/list-box/icons/_highcontrast.scss +25 -25
  304. package/styles/list-box/icons/_material-dark.scss +25 -25
  305. package/styles/list-box/icons/_material.scss +25 -25
  306. package/styles/list-box/icons/_material3.scss +25 -25
  307. package/styles/list-box/icons/_tailwind-dark.scss +25 -25
  308. package/styles/list-box/icons/_tailwind.scss +25 -25
  309. package/styles/list-box/material-dark.css +43 -215
  310. package/styles/list-box/material.css +43 -221
  311. package/styles/list-box/material3-dark.css +44 -216
  312. package/styles/list-box/material3-dark.scss +1 -1
  313. package/styles/list-box/material3.css +44 -216
  314. package/styles/list-box/material3.scss +1 -1
  315. package/styles/list-box/tailwind-dark.css +45 -233
  316. package/styles/list-box/tailwind.css +45 -233
  317. package/styles/material-dark.css +80 -325
  318. package/styles/material-dark.scss +28 -8
  319. package/styles/material.css +84 -354
  320. package/styles/material.scss +28 -8
  321. package/styles/material3-dark.css +79 -337
  322. package/styles/material3-dark.scss +28 -8
  323. package/styles/material3.css +79 -337
  324. package/styles/material3.scss +28 -8
  325. package/styles/mention/_all.scss +1 -1
  326. package/styles/mention/_bds-definition.scss +1 -1
  327. package/styles/mention/_bootstrap-dark-definition.scss +3 -3
  328. package/styles/mention/_bootstrap-definition.scss +3 -3
  329. package/styles/mention/_bootstrap4-definition.scss +3 -3
  330. package/styles/mention/_bootstrap5-definition.scss +1 -1
  331. package/styles/mention/_bootstrap5.3-definition.scss +1 -0
  332. package/styles/mention/_fabric-dark-definition.scss +2 -2
  333. package/styles/mention/_fabric-definition.scss +3 -3
  334. package/styles/mention/_fluent-definition.scss +1 -1
  335. package/styles/mention/_fluent2-definition.scss +1 -0
  336. package/styles/mention/_fusionnew-definition.scss +1 -1
  337. package/styles/mention/_highcontrast-definition.scss +3 -3
  338. package/styles/mention/_highcontrast-light-definition.scss +3 -3
  339. package/styles/mention/_layout.scss +6 -6
  340. package/styles/mention/_material-dark-definition.scss +3 -3
  341. package/styles/mention/_material-definition.scss +3 -3
  342. package/styles/mention/_material3-definition.scss +1 -1
  343. package/styles/mention/_tailwind-definition.scss +1 -1
  344. package/styles/mention/fluent2.css +1106 -0
  345. package/styles/mention/fluent2.scss +6 -0
  346. package/styles/mention/material3-dark.css +1 -1
  347. package/styles/mention/material3-dark.scss +1 -1
  348. package/styles/mention/material3.css +1 -1
  349. package/styles/mention/material3.scss +1 -1
  350. package/styles/multi-select/_all.scss +2 -2
  351. package/styles/multi-select/_bds-definition.scss +235 -235
  352. package/styles/multi-select/_bootstrap-dark-definition.scss +207 -207
  353. package/styles/multi-select/_bootstrap-definition.scss +196 -196
  354. package/styles/multi-select/_bootstrap4-definition.scss +278 -278
  355. package/styles/multi-select/_bootstrap5-definition.scss +230 -230
  356. package/styles/multi-select/_bootstrap5.3-definition.scss +230 -0
  357. package/styles/multi-select/_fabric-dark-definition.scss +192 -192
  358. package/styles/multi-select/_fabric-definition.scss +183 -183
  359. package/styles/multi-select/_fluent-definition.scss +246 -246
  360. package/styles/multi-select/_fluent2-definition.scss +237 -0
  361. package/styles/multi-select/_fusionnew-definition.scss +227 -227
  362. package/styles/multi-select/_highcontrast-definition.scss +303 -303
  363. package/styles/multi-select/_highcontrast-light-definition.scss +297 -297
  364. package/styles/multi-select/_layout.scss +2200 -2206
  365. package/styles/multi-select/_material-dark-definition.scss +241 -241
  366. package/styles/multi-select/_material-definition.scss +234 -234
  367. package/styles/multi-select/_material3-definition.scss +231 -246
  368. package/styles/multi-select/_tailwind-definition.scss +235 -235
  369. package/styles/multi-select/_theme.scss +585 -586
  370. package/styles/multi-select/bootstrap-dark.css +4 -10
  371. package/styles/multi-select/bootstrap.css +4 -10
  372. package/styles/multi-select/bootstrap4.css +4 -10
  373. package/styles/multi-select/bootstrap5-dark.css +4 -11
  374. package/styles/multi-select/bootstrap5.css +4 -11
  375. package/styles/multi-select/fabric-dark.css +4 -10
  376. package/styles/multi-select/fabric.css +4 -10
  377. package/styles/multi-select/fluent-dark.css +4 -11
  378. package/styles/multi-select/fluent.css +4 -11
  379. package/styles/multi-select/fluent2.css +2590 -0
  380. package/styles/multi-select/fluent2.scss +9 -0
  381. package/styles/multi-select/highcontrast-light.css +4 -10
  382. package/styles/multi-select/highcontrast.css +4 -10
  383. package/styles/multi-select/icons/_bds.scss +26 -26
  384. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  385. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  386. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  387. package/styles/multi-select/icons/_bootstrap5.3.scss +26 -0
  388. package/styles/multi-select/icons/_bootstrap5.scss +26 -26
  389. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  390. package/styles/multi-select/icons/_fabric.scss +26 -26
  391. package/styles/multi-select/icons/_fluent.scss +55 -55
  392. package/styles/multi-select/icons/_fluent2.scss +692 -0
  393. package/styles/multi-select/icons/_fusionnew.scss +26 -26
  394. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  395. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  396. package/styles/multi-select/icons/_material-dark.scss +693 -693
  397. package/styles/multi-select/icons/_material.scss +693 -693
  398. package/styles/multi-select/icons/_material3.scss +695 -692
  399. package/styles/multi-select/icons/_tailwind.scss +26 -26
  400. package/styles/multi-select/material-dark.css +4 -10
  401. package/styles/multi-select/material.css +5 -11
  402. package/styles/multi-select/material3-dark.css +15 -18
  403. package/styles/multi-select/material3-dark.scss +1 -1
  404. package/styles/multi-select/material3.css +15 -18
  405. package/styles/multi-select/material3.scss +1 -1
  406. package/styles/multi-select/tailwind-dark.css +4 -10
  407. package/styles/multi-select/tailwind.css +4 -10
  408. package/styles/tailwind-dark.css +83 -319
  409. package/styles/tailwind-dark.scss +28 -8
  410. package/styles/tailwind.css +83 -319
  411. package/styles/tailwind.scss +28 -8
  412. package/.eslintrc.json +0 -260
  413. package/dist/ej2-dropdowns.min.js +0 -10
  414. package/dist/global/ej2-dropdowns.min.js +0 -11
  415. package/dist/global/ej2-dropdowns.min.js.map +0 -1
  416. package/dist/global/index.d.ts +0 -14
  417. package/tslint.json +0 -111
@@ -1,217 +1,217 @@
1
- # JavaScript DropDown Controls
2
-
3
- Superset of HTML select box contains specific features such as data binding, grouping, sorting, filtering, and templates.
4
-
5
- ## What's Included in the JavaScript DropDown Package
6
-
7
- The JavaScript DropDown package includes the following list of components.
8
-
9
- ### JavaScript DropDownList
10
-
11
- The [JavaScript DropdownList](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a quick replacement of the HTML select tags. It has a rich appearance and allows users to select a single value that is non-editable from a list of predefined values.
12
-
13
- <p align="center">
14
- <a href="https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
15
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-list/default.html">Online demos</a> .
16
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
17
- </p>
18
-
19
- <p align="center">
20
- <img alt="JavaScript DropDownList Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-dropdownlist.png">
21
- </p>
22
-
23
- #### Key features
24
-
25
- * [Data binding](https://ej2.syncfusion.com/demos/#/material/drop-down-list/data-binding.html) - Binds and accesses the list of items from the local or server-side data source.
26
- * [Grouping](https://ej2.syncfusion.com/demos/#/material/drop-down-list/grouping-icon.html) - Groups the logically related items under a single or specific category.
27
- * [Sorting](https://ej2.syncfusion.com/documentation/api/drop-down-list#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
28
- * [Filtering](https://ej2.syncfusion.com/demos/#/material/drop-down-list/filtering.html) - Filters the list items based on a character typed in the search box.
29
- * [Templates](https://ej2.syncfusion.com/demos/#/material/drop-down-list/template.html) - Customizes the list items, selected value, header, footer, category group header, and no records content.
30
- * [Accessibility](https://ej2.syncfusion.com/documentation/drop-down-list/accessibility) - Provided with built-in accessibility support used to access all the DropDownList component features using keyboard, screen readers, or other assistive technology devices.
31
-
32
- ### JavaScript DropDownTree
33
-
34
- The [JavaScript DropdownTree](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a textbox control that allows the user to select single or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, UI customization, accessibility, and preselected values.
35
-
36
- <p align="center">
37
- <a href="https://ej2.syncfusion.com/documentation/drop-down-tree/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-dropdown-npm">Getting Started</a> .
38
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/default.html">Online demos</a> .
39
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree?utm_source=npm&utm_medium=listing&utm_campaign=vue-dropdown-npm">Learn more</a>
40
- </p>
41
-
42
- <p align="center">
43
- <img alt="JavaScript DropDownTree Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-dropdowntree.png">
44
- </p>
45
-
46
- #### Key features
47
-
48
- * [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/local-data.html) - Binds and accesses the list of items from the local or remote data source.
49
- * [Checkbox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/checkbox.html) - Built-in support for checkboxes, allowing users to select single or multiple items.
50
- * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/template.html) - To change the appearance of the selection pop-up for tree items, plus the header and footer of the pop-up tree.
51
- * [Filtering](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/filtering.html) - Filters the list items based on a character typed in the search box.
52
-
53
- ### JavaScript Mention
54
-
55
- The JavaScript Mention control is an autocomplete-like control to tag or select a user/group from the suggestion list. The control opens the suggestion list when a user starts typing with the character ‘@’ in popular social media sites such as Facebook, Twitter, and more. It supports several out-of-the-box features: Data binding, grouping, UI customization, accessibility, and more.
56
-
57
- <p align="center">
58
- <a href="https://ej2.syncfusion.com/documentation/mention/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
59
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/mention/default.html">Online demos</a> .
60
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-mention?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
61
- </p>
62
-
63
- <p align="center">
64
- <img alt="JavaScript Mention Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-mention.png">
65
- </p>
66
-
67
- #### Key features
68
-
69
- * [Sorting](https://ej2.syncfusion.com/documentation/mention/sorting/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) - Sorts the list items in alphabetical order (either ascending or descending).
70
- * [Filtering](https://ej2.syncfusion.com/documentation/mention/filtering-data/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) - Filters the list items based on a character typed in the search box.
71
-
72
- ### JavaScript ComboBox
73
-
74
- The [JavaScript ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-combobox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a drop-down list with editable textbox that also allows users to choose an option from a predefined pop-up list.
75
-
76
- <p align="center">
77
- <a href="https://ej2.syncfusion.com/documentation/combo-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
78
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/combo-box/default.html">Online demos</a> .
79
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-combobox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
80
- </p>
81
-
82
- <p align="center">
83
- <img alt="JavaScript ComboBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-combobox.png">
84
- </p>
85
-
86
- #### Key features
87
-
88
- * [Data binding](https://ej2.syncfusion.com/demos/#/material/combo-box/data-binding.html) - Binds and accesses the list of items from local or server-side data source.
89
- * [Custom values](https://ej2.syncfusion.com/demos/#/material/combo-box/custom-value.html) - Sets user-defined values that is not in the pop-up list.
90
- * [Grouping](https://ej2.syncfusion.com/demos/#/material/combo-box/grouping-icon.html) - Groups the logically related items under a single or specific category.
91
- * [Sorting](https://ej2.syncfusion.com/documentation/api/combo-box#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
92
- * [Filtering](https://ej2.syncfusion.com/demos/#/material/combo-box/filtering.html) - Filters the list items based on a character typed in the component.
93
- * [Templates](https://ej2.syncfusion.com/demos/#/material/combo-box/template.html) - Customizes the list items, selected value, header, footer, category group header, and no records content.
94
- * [Accessibility](https://ej2.syncfusion.com/documentation/combo-box/accessibility) - Provided with built-in accessibility support that helps to access all the ComboBox component features using the keyboard, screen readers, or other assistive technology devices.
95
-
96
- ### JavaScript AutoComplete
97
-
98
- The [JavaScript AutoComplete](https://www.syncfusion.com/javascript-ui-controls/js-autocomplete?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a textbox control that provides a list of suggestions to select from as the user types. It has several out-of-the-box features such as data binding, filtering, grouping, UI customization, accessibility, and more.
99
-
100
- <p align="center">
101
- <a href="https://ej2.syncfusion.com/documentation/auto-complete/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a>.
102
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/auto-complete/default.html">Online demos</a>.
103
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-autocomplete?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>.
104
- </p>
105
-
106
- <p align="center">
107
- <img alt="JavaScript AutoComplete Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-autocomplete.png">
108
- </p>
109
-
110
- #### Key features
111
-
112
- * [Data binding](https://ej2.syncfusion.com/demos/#/material/auto-complete/data-binding.html) - Binds and accesses the list of items from local or server-side data source.
113
- * [Grouping](https://ej2.syncfusion.com/demos/#/material/auto-complete/grouping-icon.html) - Groups the logically related items under a single or specific category.
114
- * [Sorting](https://ej2.syncfusion.com/documentation/api/auto-complete#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
115
- * [Highlight search](https://ej2.syncfusion.com/demos/#/material/auto-complete/highlight.html) - Highlights the typed text in the suggestion list.
116
- * [Templates](https://ej2.syncfusion.com/demos/#/material/auto-complete/template.html) - Customizes the list item, header, footer, category group header, no records, and action failure content.
117
- * [Accessibility](https://ej2.syncfusion.com/documentation/auto-complete/accessibility) - Provided with built-in accessibility support that helps to access all the AutoComplete component features using keyboard, on-screen readers, or other assistive technology devices.
118
-
119
- ### JavaScript MultiSelect
120
-
121
- The [JavaScript MultiSelect Dropdown](https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a quick replacement for the HTML select tag for selecting multiple values. HTML MultiSelect Dropdown is a textbox control that allows the user to type or select multiple values from a list of predefined options.
122
-
123
- <p align="center">
124
- <a href="https://ej2.syncfusion.com/documentation/multi-select/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
125
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/multi-select/default.html">Online demos</a> .
126
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
127
- </p>
128
-
129
- <p align="center">
130
- <img alt="JavaScript MultiSelect Dropdown Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-multiselect.png">
131
- </p>
132
-
133
- #### Key features
134
-
135
- * [Data binding](https://ej2.syncfusion.com/demos/#/material/multi-select/data-binding.html) - Binds and accesses the list of items from local or server-side data source.
136
- * [Grouping](https://ej2.syncfusion.com/demos/#/material/multi-select/grouping-icon.html) - Groups the logically related items under a single or specific category.
137
- * [Templates](https://ej2.syncfusion.com/demos/#/material/multi-select/template.html) - Customizes the list items, selected value, header, footer, category group header, and no records content.
138
- * [Sorting](https://ej2.syncfusion.com/documentation/api/multi-select#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
139
- * [Filtering](https://ej2.syncfusion.com/demos/#/material/multi-select/filtering.html) - Filters the list items based on a character typed in the search box.
140
- * [Custom value](https://ej2.syncfusion.com/demos/#/material/multi-select/custom-value.html) - Allows users to select a new custom value.
141
- * [Accessibility](https://ej2.syncfusion.com/documentation/multi-select/accessibility) - Provided with built-in accessibility support that helps to access all the DropDownList component features using the keyboard, screen readers, or other assistive technology devices.
142
-
143
- ### JavaScript ListBox
144
-
145
- The [JavaScript ListBox](https://www.syncfusion.com/javascript-ui-controls/js-listbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a graphical user interface for displaying a list of items with multi-selection options. It has a rich appearance and allows users to select one or more items from the list using checkboxes or keyboard interactions.
146
-
147
- <p align="center">
148
- <a href="https://ej2.syncfusion.com/documentation/list-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
149
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/default.html">Online demos</a> .
150
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-listbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
151
- </p>
152
-
153
- <p align="center">
154
- <img alt="JavaScript ListBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-listbox.png">
155
- </p>
156
-
157
- #### Key features
158
-
159
- * [Data binding](https://ej2.syncfusion.com/documentation/list-box/data-binding/) - Binds and accesses the list of items from local or server-side data source.
160
- * [Dual listbox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/dual-list-box.html) - Allows transferring and reordering the list item between two ListBoxes.
161
- * [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/drag-and-drop.html) - Allows drag and drop the list item with the same/multiple ListBox.
162
- * [Grouping](https://ej2.syncfusion.com/documentation/list-box/sorting-and-grouping/#grouping) - Groups the logically related items under a single or specific category.
163
- * [Templates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/template.html) - Customizes the list items.
164
- * [Sorting](https://ej2.syncfusion.com/documentation/list-box/sorting-and-grouping/) - Sorts the list items in alphabetical order (either ascending or descending).
165
- * [Accessibility](https://ej2.syncfusion.com/documentation/list-box/accessibility/) - Provided with built-in accessibility support that helps to access all the ListBox component features using the keyboard, screen readers, or other assistive technology devices.
166
-
167
- <p align="center">
168
- Trusted by the world's leading companies
169
- <a href="https://www.syncfusion.com/">
170
- <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
171
- </a>
172
- </p>
173
-
174
- ## Setup
175
-
176
- To install `dropdowns` and its dependent packages, use the following command,
177
-
178
- ```
179
- npm install @syncfusion/ej2-dropdowns
180
- ```
181
-
182
- ## Supported frameworks
183
-
184
- DropDown controls are also offered to following list of frameworks.
185
-
186
- | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
187
- | :-----: | :-----: | :-----: | :-----: | :-----: |
188
-
189
- ## Showcase samples
190
-
191
- * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-showcase-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=dropdown#/dashboard)
192
- * Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=dropdwonlist#/default)
193
- * Web Mail - [Source](https://github.com/syncfusion/ej2-showcase-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/#/home)
194
-
195
- ## Support
196
-
197
- Product support is available through following mediums.
198
-
199
- * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
200
- * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm)
201
- * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
202
- * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm)
203
- * Live chat
204
-
205
- ## Change log
206
-
207
- Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/dropdowns/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
208
-
209
- ## License and copyright
210
-
211
- > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
212
-
213
- > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
214
-
215
- See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=dropdown) for more info.
216
-
217
- © Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
1
+ # JavaScript DropDown Controls
2
+
3
+ Superset of HTML select box contains specific features such as data binding, grouping, sorting, filtering, and templates.
4
+
5
+ ## What's Included in the JavaScript DropDown Package
6
+
7
+ The JavaScript DropDown package includes the following list of components.
8
+
9
+ ### JavaScript DropDownList
10
+
11
+ The [JavaScript DropdownList](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a quick replacement of the HTML select tags. It has a rich appearance and allows users to select a single value that is non-editable from a list of predefined values.
12
+
13
+ <p align="center">
14
+ <a href="https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
15
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-list/default.html">Online demos</a> .
16
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
17
+ </p>
18
+
19
+ <p align="center">
20
+ <img alt="JavaScript DropDownList Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-dropdownlist.png">
21
+ </p>
22
+
23
+ #### Key features
24
+
25
+ * [Data binding](https://ej2.syncfusion.com/demos/#/material/drop-down-list/data-binding.html) - Binds and accesses the list of items from the local or server-side data source.
26
+ * [Grouping](https://ej2.syncfusion.com/demos/#/material/drop-down-list/grouping-icon.html) - Groups the logically related items under a single or specific category.
27
+ * [Sorting](https://ej2.syncfusion.com/documentation/api/drop-down-list#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
28
+ * [Filtering](https://ej2.syncfusion.com/demos/#/material/drop-down-list/filtering.html) - Filters the list items based on a character typed in the search box.
29
+ * [Templates](https://ej2.syncfusion.com/demos/#/material/drop-down-list/template.html) - Customizes the list items, selected value, header, footer, category group header, and no records content.
30
+ * [Accessibility](https://ej2.syncfusion.com/documentation/drop-down-list/accessibility) - Provided with built-in accessibility support used to access all the DropDownList component features using keyboard, screen readers, or other assistive technology devices.
31
+
32
+ ### JavaScript DropDownTree
33
+
34
+ The [JavaScript DropdownTree](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a textbox control that allows the user to select single or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, UI customization, accessibility, and preselected values.
35
+
36
+ <p align="center">
37
+ <a href="https://ej2.syncfusion.com/documentation/drop-down-tree/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-dropdown-npm">Getting Started</a> .
38
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/default.html">Online demos</a> .
39
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree?utm_source=npm&utm_medium=listing&utm_campaign=vue-dropdown-npm">Learn more</a>
40
+ </p>
41
+
42
+ <p align="center">
43
+ <img alt="JavaScript DropDownTree Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-dropdowntree.png">
44
+ </p>
45
+
46
+ #### Key features
47
+
48
+ * [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/local-data.html) - Binds and accesses the list of items from the local or remote data source.
49
+ * [Checkbox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/checkbox.html) - Built-in support for checkboxes, allowing users to select single or multiple items.
50
+ * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/template.html) - To change the appearance of the selection pop-up for tree items, plus the header and footer of the pop-up tree.
51
+ * [Filtering](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/drop-down-tree/filtering.html) - Filters the list items based on a character typed in the search box.
52
+
53
+ ### JavaScript Mention
54
+
55
+ The JavaScript Mention control is an autocomplete-like control to tag or select a user/group from the suggestion list. The control opens the suggestion list when a user starts typing with the character ‘@’ in popular social media sites such as Facebook, Twitter, and more. It supports several out-of-the-box features: Data binding, grouping, UI customization, accessibility, and more.
56
+
57
+ <p align="center">
58
+ <a href="https://ej2.syncfusion.com/documentation/mention/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
59
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/mention/default.html">Online demos</a> .
60
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-mention?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
61
+ </p>
62
+
63
+ <p align="center">
64
+ <img alt="JavaScript Mention Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-mention.png">
65
+ </p>
66
+
67
+ #### Key features
68
+
69
+ * [Sorting](https://ej2.syncfusion.com/documentation/mention/sorting/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) - Sorts the list items in alphabetical order (either ascending or descending).
70
+ * [Filtering](https://ej2.syncfusion.com/documentation/mention/filtering-data/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) - Filters the list items based on a character typed in the search box.
71
+
72
+ ### JavaScript ComboBox
73
+
74
+ The [JavaScript ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-combobox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a drop-down list with editable textbox that also allows users to choose an option from a predefined pop-up list.
75
+
76
+ <p align="center">
77
+ <a href="https://ej2.syncfusion.com/documentation/combo-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
78
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/combo-box/default.html">Online demos</a> .
79
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-combobox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
80
+ </p>
81
+
82
+ <p align="center">
83
+ <img alt="JavaScript ComboBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-combobox.png">
84
+ </p>
85
+
86
+ #### Key features
87
+
88
+ * [Data binding](https://ej2.syncfusion.com/demos/#/material/combo-box/data-binding.html) - Binds and accesses the list of items from local or server-side data source.
89
+ * [Custom values](https://ej2.syncfusion.com/demos/#/material/combo-box/custom-value.html) - Sets user-defined values that is not in the pop-up list.
90
+ * [Grouping](https://ej2.syncfusion.com/demos/#/material/combo-box/grouping-icon.html) - Groups the logically related items under a single or specific category.
91
+ * [Sorting](https://ej2.syncfusion.com/documentation/api/combo-box#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
92
+ * [Filtering](https://ej2.syncfusion.com/demos/#/material/combo-box/filtering.html) - Filters the list items based on a character typed in the component.
93
+ * [Templates](https://ej2.syncfusion.com/demos/#/material/combo-box/template.html) - Customizes the list items, selected value, header, footer, category group header, and no records content.
94
+ * [Accessibility](https://ej2.syncfusion.com/documentation/combo-box/accessibility) - Provided with built-in accessibility support that helps to access all the ComboBox component features using the keyboard, screen readers, or other assistive technology devices.
95
+
96
+ ### JavaScript AutoComplete
97
+
98
+ The [JavaScript AutoComplete](https://www.syncfusion.com/javascript-ui-controls/js-autocomplete?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a textbox control that provides a list of suggestions to select from as the user types. It has several out-of-the-box features such as data binding, filtering, grouping, UI customization, accessibility, and more.
99
+
100
+ <p align="center">
101
+ <a href="https://ej2.syncfusion.com/documentation/auto-complete/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a>.
102
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/auto-complete/default.html">Online demos</a>.
103
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-autocomplete?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>.
104
+ </p>
105
+
106
+ <p align="center">
107
+ <img alt="JavaScript AutoComplete Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-autocomplete.png">
108
+ </p>
109
+
110
+ #### Key features
111
+
112
+ * [Data binding](https://ej2.syncfusion.com/demos/#/material/auto-complete/data-binding.html) - Binds and accesses the list of items from local or server-side data source.
113
+ * [Grouping](https://ej2.syncfusion.com/demos/#/material/auto-complete/grouping-icon.html) - Groups the logically related items under a single or specific category.
114
+ * [Sorting](https://ej2.syncfusion.com/documentation/api/auto-complete#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
115
+ * [Highlight search](https://ej2.syncfusion.com/demos/#/material/auto-complete/highlight.html) - Highlights the typed text in the suggestion list.
116
+ * [Templates](https://ej2.syncfusion.com/demos/#/material/auto-complete/template.html) - Customizes the list item, header, footer, category group header, no records, and action failure content.
117
+ * [Accessibility](https://ej2.syncfusion.com/documentation/auto-complete/accessibility) - Provided with built-in accessibility support that helps to access all the AutoComplete component features using keyboard, on-screen readers, or other assistive technology devices.
118
+
119
+ ### JavaScript MultiSelect
120
+
121
+ The [JavaScript MultiSelect Dropdown](https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a quick replacement for the HTML select tag for selecting multiple values. HTML MultiSelect Dropdown is a textbox control that allows the user to type or select multiple values from a list of predefined options.
122
+
123
+ <p align="center">
124
+ <a href="https://ej2.syncfusion.com/documentation/multi-select/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
125
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/multi-select/default.html">Online demos</a> .
126
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
127
+ </p>
128
+
129
+ <p align="center">
130
+ <img alt="JavaScript MultiSelect Dropdown Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-multiselect.png">
131
+ </p>
132
+
133
+ #### Key features
134
+
135
+ * [Data binding](https://ej2.syncfusion.com/demos/#/material/multi-select/data-binding.html) - Binds and accesses the list of items from local or server-side data source.
136
+ * [Grouping](https://ej2.syncfusion.com/demos/#/material/multi-select/grouping-icon.html) - Groups the logically related items under a single or specific category.
137
+ * [Templates](https://ej2.syncfusion.com/demos/#/material/multi-select/template.html) - Customizes the list items, selected value, header, footer, category group header, and no records content.
138
+ * [Sorting](https://ej2.syncfusion.com/documentation/api/multi-select#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
139
+ * [Filtering](https://ej2.syncfusion.com/demos/#/material/multi-select/filtering.html) - Filters the list items based on a character typed in the search box.
140
+ * [Custom value](https://ej2.syncfusion.com/demos/#/material/multi-select/custom-value.html) - Allows users to select a new custom value.
141
+ * [Accessibility](https://ej2.syncfusion.com/documentation/multi-select/accessibility) - Provided with built-in accessibility support that helps to access all the DropDownList component features using the keyboard, screen readers, or other assistive technology devices.
142
+
143
+ ### JavaScript ListBox
144
+
145
+ The [JavaScript ListBox](https://www.syncfusion.com/javascript-ui-controls/js-listbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm) control is a graphical user interface for displaying a list of items with multi-selection options. It has a rich appearance and allows users to select one or more items from the list using checkboxes or keyboard interactions.
146
+
147
+ <p align="center">
148
+ <a href="https://ej2.syncfusion.com/documentation/list-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Getting Started</a> .
149
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/default.html">Online demos</a> .
150
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-listbox?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm">Learn more</a>
151
+ </p>
152
+
153
+ <p align="center">
154
+ <img alt="JavaScript ListBox Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-listbox.png">
155
+ </p>
156
+
157
+ #### Key features
158
+
159
+ * [Data binding](https://ej2.syncfusion.com/documentation/list-box/data-binding/) - Binds and accesses the list of items from local or server-side data source.
160
+ * [Dual listbox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/dual-list-box.html) - Allows transferring and reordering the list item between two ListBoxes.
161
+ * [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/drag-and-drop.html) - Allows drag and drop the list item with the same/multiple ListBox.
162
+ * [Grouping](https://ej2.syncfusion.com/documentation/list-box/sorting-and-grouping/#grouping) - Groups the logically related items under a single or specific category.
163
+ * [Templates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm#/material/list-box/template.html) - Customizes the list items.
164
+ * [Sorting](https://ej2.syncfusion.com/documentation/list-box/sorting-and-grouping/) - Sorts the list items in alphabetical order (either ascending or descending).
165
+ * [Accessibility](https://ej2.syncfusion.com/documentation/list-box/accessibility/) - Provided with built-in accessibility support that helps to access all the ListBox component features using the keyboard, screen readers, or other assistive technology devices.
166
+
167
+ <p align="center">
168
+ Trusted by the world's leading companies
169
+ <a href="https://www.syncfusion.com/">
170
+ <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
171
+ </a>
172
+ </p>
173
+
174
+ ## Setup
175
+
176
+ To install `dropdowns` and its dependent packages, use the following command,
177
+
178
+ ```
179
+ npm install @syncfusion/ej2-dropdowns
180
+ ```
181
+
182
+ ## Supported frameworks
183
+
184
+ DropDown controls are also offered to following list of frameworks.
185
+
186
+ | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
187
+ | :-----: | :-----: | :-----: | :-----: | :-----: |
188
+
189
+ ## Showcase samples
190
+
191
+ * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-showcase-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=dropdown#/dashboard)
192
+ * Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=dropdwonlist#/default)
193
+ * Web Mail - [Source](https://github.com/syncfusion/ej2-showcase-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/#/home)
194
+
195
+ ## Support
196
+
197
+ Product support is available through following mediums.
198
+
199
+ * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
200
+ * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm)
201
+ * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
202
+ * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-dropdown-npm)
203
+ * Live chat
204
+
205
+ ## Change log
206
+
207
+ Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/dropdowns/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
208
+
209
+ ## License and copyright
210
+
211
+ > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
212
+
213
+ > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
214
+
215
+ See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=dropdown) for more info.
216
+
217
+ &copy; Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.