@syncfusion/ej2-dropdowns 32.2.9 → 33.1.44

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 (215) hide show
  1. package/dist/ej2-dropdowns.min.js +2 -2
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +407 -116
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +382 -91
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +8 -8
  12. package/src/combo-box/combo-box.js +3 -0
  13. package/src/common/virtual-scroll.d.ts +1 -0
  14. package/src/common/virtual-scroll.js +17 -1
  15. package/src/drop-down-base/drop-down-base.d.ts +2 -0
  16. package/src/drop-down-base/drop-down-base.js +42 -0
  17. package/src/drop-down-list/drop-down-list.js +84 -14
  18. package/src/drop-down-tree/drop-down-tree-model.d.ts +1 -1
  19. package/src/drop-down-tree/drop-down-tree.d.ts +1 -1
  20. package/src/mention/mention.js +8 -4
  21. package/src/multi-select/multi-select.d.ts +2 -0
  22. package/src/multi-select/multi-select.js +228 -72
  23. package/styles/bds-lite.css +17 -9
  24. package/styles/bds.css +29 -15
  25. package/styles/bootstrap-dark-lite.css +17 -9
  26. package/styles/bootstrap-dark.css +27 -14
  27. package/styles/bootstrap-lite.css +17 -9
  28. package/styles/bootstrap.css +27 -14
  29. package/styles/bootstrap4-lite.css +17 -9
  30. package/styles/bootstrap4.css +27 -14
  31. package/styles/bootstrap5-dark-lite.css +17 -9
  32. package/styles/bootstrap5-dark.css +27 -14
  33. package/styles/bootstrap5-lite.css +17 -9
  34. package/styles/bootstrap5.3-lite.css +19 -9
  35. package/styles/bootstrap5.3.css +29 -14
  36. package/styles/bootstrap5.css +27 -14
  37. package/styles/drop-down-base/_bds-definition.scss +2 -2
  38. package/styles/drop-down-base/_bigger.scss +3 -3
  39. package/styles/drop-down-base/_bootstrap-dark-definition.scss +3 -3
  40. package/styles/drop-down-base/_bootstrap-definition.scss +3 -3
  41. package/styles/drop-down-base/_bootstrap4-definition.scss +3 -3
  42. package/styles/drop-down-base/_bootstrap5-dark-definition.scss +3 -3
  43. package/styles/drop-down-base/_bootstrap5-definition.scss +3 -3
  44. package/styles/drop-down-base/_bootstrap5.3-definition.scss +6 -3
  45. package/styles/drop-down-base/_fabric-dark-definition.scss +3 -3
  46. package/styles/drop-down-base/_fabric-definition.scss +3 -3
  47. package/styles/drop-down-base/_fluent-dark-definition.scss +3 -3
  48. package/styles/drop-down-base/_fluent-definition.scss +3 -3
  49. package/styles/drop-down-base/_fluent2-definition.scss +8 -5
  50. package/styles/drop-down-base/_fusionnew-definition.scss +2 -2
  51. package/styles/drop-down-base/_highcontrast-definition.scss +3 -3
  52. package/styles/drop-down-base/_highcontrast-light-definition.scss +3 -3
  53. package/styles/drop-down-base/_layout.scss +12 -1
  54. package/styles/drop-down-base/_material-dark-definition.scss +2 -2
  55. package/styles/drop-down-base/_material-definition.scss +2 -2
  56. package/styles/drop-down-base/_material3-dark-definition.scss +6 -4
  57. package/styles/drop-down-base/_material3-definition.scss +6 -4
  58. package/styles/drop-down-base/_tailwind-dark-definition.scss +4 -4
  59. package/styles/drop-down-base/_tailwind-definition.scss +4 -4
  60. package/styles/drop-down-base/_tailwind3-definition.scss +5 -2
  61. package/styles/drop-down-base/_theme.scss +6 -0
  62. package/styles/drop-down-base/bds.css +21 -11
  63. package/styles/drop-down-base/bootstrap-dark.css +19 -10
  64. package/styles/drop-down-base/bootstrap.css +19 -10
  65. package/styles/drop-down-base/bootstrap4.css +19 -10
  66. package/styles/drop-down-base/bootstrap5-dark.css +19 -10
  67. package/styles/drop-down-base/bootstrap5.3.css +21 -10
  68. package/styles/drop-down-base/bootstrap5.css +19 -10
  69. package/styles/drop-down-base/fabric-dark.css +19 -10
  70. package/styles/drop-down-base/fabric.css +19 -10
  71. package/styles/drop-down-base/fluent-dark.css +19 -10
  72. package/styles/drop-down-base/fluent.css +19 -10
  73. package/styles/drop-down-base/fluent2.css +28 -12
  74. package/styles/drop-down-base/highcontrast-light.css +19 -10
  75. package/styles/drop-down-base/highcontrast.css +19 -10
  76. package/styles/drop-down-base/material-dark.css +17 -9
  77. package/styles/drop-down-base/material.css +17 -9
  78. package/styles/drop-down-base/material3-dark.css +19 -9
  79. package/styles/drop-down-base/material3.css +19 -9
  80. package/styles/drop-down-base/tailwind-dark.css +21 -11
  81. package/styles/drop-down-base/tailwind.css +21 -11
  82. package/styles/drop-down-base/tailwind3.css +19 -9
  83. package/styles/drop-down-list/bds.css +4 -2
  84. package/styles/drop-down-list/bootstrap-dark.css +4 -2
  85. package/styles/drop-down-list/bootstrap.css +4 -2
  86. package/styles/drop-down-list/bootstrap4.css +4 -2
  87. package/styles/drop-down-list/bootstrap5-dark.css +4 -2
  88. package/styles/drop-down-list/bootstrap5.3.css +4 -2
  89. package/styles/drop-down-list/bootstrap5.css +4 -2
  90. package/styles/drop-down-list/fabric-dark.css +4 -2
  91. package/styles/drop-down-list/fabric.css +4 -2
  92. package/styles/drop-down-list/fluent-dark.css +4 -2
  93. package/styles/drop-down-list/fluent.css +4 -2
  94. package/styles/drop-down-list/fluent2.css +4 -2
  95. package/styles/drop-down-list/highcontrast-light.css +4 -2
  96. package/styles/drop-down-list/highcontrast.css +4 -2
  97. package/styles/drop-down-list/material-dark.css +4 -2
  98. package/styles/drop-down-list/material.css +4 -2
  99. package/styles/drop-down-list/material3-dark.css +4 -2
  100. package/styles/drop-down-list/material3.css +4 -2
  101. package/styles/drop-down-list/tailwind-dark.css +4 -2
  102. package/styles/drop-down-list/tailwind.css +4 -2
  103. package/styles/drop-down-list/tailwind3.css +4 -2
  104. package/styles/drop-down-tree/bds.css +4 -2
  105. package/styles/drop-down-tree/bootstrap-dark.css +4 -2
  106. package/styles/drop-down-tree/bootstrap.css +4 -2
  107. package/styles/drop-down-tree/bootstrap4.css +4 -2
  108. package/styles/drop-down-tree/bootstrap5-dark.css +4 -2
  109. package/styles/drop-down-tree/bootstrap5.3.css +4 -2
  110. package/styles/drop-down-tree/bootstrap5.css +4 -2
  111. package/styles/drop-down-tree/fabric-dark.css +4 -2
  112. package/styles/drop-down-tree/fabric.css +4 -2
  113. package/styles/drop-down-tree/fluent-dark.css +4 -2
  114. package/styles/drop-down-tree/fluent.css +4 -2
  115. package/styles/drop-down-tree/fluent2.css +4 -2
  116. package/styles/drop-down-tree/highcontrast-light.css +4 -2
  117. package/styles/drop-down-tree/highcontrast.css +4 -2
  118. package/styles/drop-down-tree/material-dark.css +4 -2
  119. package/styles/drop-down-tree/material.css +4 -2
  120. package/styles/drop-down-tree/material3-dark.css +4 -2
  121. package/styles/drop-down-tree/material3.css +4 -2
  122. package/styles/drop-down-tree/tailwind-dark.css +4 -2
  123. package/styles/drop-down-tree/tailwind.css +4 -2
  124. package/styles/drop-down-tree/tailwind3.css +4 -2
  125. package/styles/fabric-dark-lite.css +17 -9
  126. package/styles/fabric-dark.css +27 -14
  127. package/styles/fabric-lite.css +17 -9
  128. package/styles/fabric.css +27 -14
  129. package/styles/fluent-dark-lite.css +17 -9
  130. package/styles/fluent-dark.css +27 -14
  131. package/styles/fluent-lite.css +17 -9
  132. package/styles/fluent.css +27 -14
  133. package/styles/fluent2-lite.css +24 -10
  134. package/styles/fluent2.css +36 -16
  135. package/styles/highcontrast-light-lite.css +17 -9
  136. package/styles/highcontrast-light.css +27 -14
  137. package/styles/highcontrast-lite.css +17 -9
  138. package/styles/highcontrast.css +27 -14
  139. package/styles/list-box/bds.css +4 -2
  140. package/styles/list-box/bootstrap-dark.css +4 -2
  141. package/styles/list-box/bootstrap.css +4 -2
  142. package/styles/list-box/bootstrap4.css +4 -2
  143. package/styles/list-box/bootstrap5-dark.css +4 -2
  144. package/styles/list-box/bootstrap5.3.css +4 -2
  145. package/styles/list-box/bootstrap5.css +4 -2
  146. package/styles/list-box/fabric-dark.css +4 -2
  147. package/styles/list-box/fabric.css +4 -2
  148. package/styles/list-box/fluent-dark.css +4 -2
  149. package/styles/list-box/fluent.css +4 -2
  150. package/styles/list-box/fluent2.css +4 -2
  151. package/styles/list-box/highcontrast-light.css +4 -2
  152. package/styles/list-box/highcontrast.css +4 -2
  153. package/styles/list-box/material-dark.css +4 -2
  154. package/styles/list-box/material.css +4 -2
  155. package/styles/list-box/material3-dark.css +4 -2
  156. package/styles/list-box/material3.css +4 -2
  157. package/styles/list-box/tailwind-dark.css +4 -2
  158. package/styles/list-box/tailwind.css +4 -2
  159. package/styles/list-box/tailwind3.css +4 -2
  160. package/styles/material-dark-lite.css +17 -9
  161. package/styles/material-dark.css +25 -13
  162. package/styles/material-lite.css +17 -9
  163. package/styles/material.css +25 -13
  164. package/styles/material3-dark-lite.css +19 -9
  165. package/styles/material3-dark.css +27 -13
  166. package/styles/material3-lite.css +19 -9
  167. package/styles/material3.css +27 -13
  168. package/styles/mention/bds.css +4 -2
  169. package/styles/mention/bootstrap-dark.css +4 -2
  170. package/styles/mention/bootstrap.css +4 -2
  171. package/styles/mention/bootstrap4.css +4 -2
  172. package/styles/mention/bootstrap5-dark.css +4 -2
  173. package/styles/mention/bootstrap5.3.css +4 -2
  174. package/styles/mention/bootstrap5.css +4 -2
  175. package/styles/mention/fabric-dark.css +4 -2
  176. package/styles/mention/fabric.css +4 -2
  177. package/styles/mention/fluent-dark.css +4 -2
  178. package/styles/mention/fluent.css +4 -2
  179. package/styles/mention/fluent2.css +4 -2
  180. package/styles/mention/highcontrast-light.css +4 -2
  181. package/styles/mention/highcontrast.css +4 -2
  182. package/styles/mention/material-dark.css +4 -2
  183. package/styles/mention/material.css +4 -2
  184. package/styles/mention/material3-dark.css +4 -2
  185. package/styles/mention/material3.css +4 -2
  186. package/styles/mention/tailwind-dark.css +4 -2
  187. package/styles/mention/tailwind.css +4 -2
  188. package/styles/mention/tailwind3.css +4 -2
  189. package/styles/multi-select/bds.css +12 -6
  190. package/styles/multi-select/bootstrap-dark.css +12 -6
  191. package/styles/multi-select/bootstrap.css +12 -6
  192. package/styles/multi-select/bootstrap4.css +12 -6
  193. package/styles/multi-select/bootstrap5-dark.css +12 -6
  194. package/styles/multi-select/bootstrap5.3.css +12 -6
  195. package/styles/multi-select/bootstrap5.css +12 -6
  196. package/styles/multi-select/fabric-dark.css +12 -6
  197. package/styles/multi-select/fabric.css +12 -6
  198. package/styles/multi-select/fluent-dark.css +12 -6
  199. package/styles/multi-select/fluent.css +12 -6
  200. package/styles/multi-select/fluent2.css +12 -6
  201. package/styles/multi-select/highcontrast-light.css +12 -6
  202. package/styles/multi-select/highcontrast.css +12 -6
  203. package/styles/multi-select/material-dark.css +12 -6
  204. package/styles/multi-select/material.css +12 -6
  205. package/styles/multi-select/material3-dark.css +12 -6
  206. package/styles/multi-select/material3.css +12 -6
  207. package/styles/multi-select/tailwind-dark.css +12 -6
  208. package/styles/multi-select/tailwind.css +12 -6
  209. package/styles/multi-select/tailwind3.css +12 -6
  210. package/styles/tailwind-dark-lite.css +17 -9
  211. package/styles/tailwind-dark.css +29 -15
  212. package/styles/tailwind-lite.css +17 -9
  213. package/styles/tailwind.css +29 -15
  214. package/styles/tailwind3-lite.css +19 -9
  215. package/styles/tailwind3.css +27 -13
package/styles/bootstrap5-dark.css CHANGED
@@ -11,11 +11,13 @@
11
11
  }
12
12
 
13
13
  .e-dropdownbase .e-list-item .e-list-icon {
14
- padding: 0 8px 0 0;
14
+ -webkit-padding-end: 8px;
15
+ padding-inline-end: 8px;
15
16
  }
16
17
 
17
18
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
18
- padding: 0 6px 0 0;
19
+ -webkit-padding-end: 6px;
20
+ padding-inline-end: 6px;
19
21
  }
20
22
 
21
23
  .e-dropdownbase .e-list-group-item,
@@ -31,11 +33,13 @@
31
33
  }
32
34
 
33
35
  .e-dropdownbase .e-list-item .e-list-icon {
34
- padding: 0 8px 0 0;
36
+ -webkit-padding-end: 8px;
37
+ padding-inline-end: 8px;
35
38
  }
36
39
 
37
40
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
38
- padding: 0 6px 0 0;
41
+ -webkit-padding-end: 6px;
42
+ padding-inline-end: 6px;
39
43
  }
40
44
 
41
45
  .e-dropdownbase {
@@ -91,11 +95,11 @@
91
95
 
92
96
  .e-mention.e-popup {
93
97
  background: #212529;
94
- border: 0;
95
98
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
96
99
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
97
100
  margin-top: 2px;
98
101
  position: absolute;
102
+ border: 0;
99
103
  }
100
104
 
101
105
  .e-mention.e-popup .e-dropdownbase {
@@ -174,11 +178,13 @@
174
178
  }
175
179
 
176
180
  .e-dropdownbase .e-list-item .e-list-icon {
177
- padding: 0 8px 0 0;
181
+ -webkit-padding-end: 8px;
182
+ padding-inline-end: 8px;
178
183
  }
179
184
 
180
185
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
181
- padding: 0 6px 0 0;
186
+ -webkit-padding-end: 6px;
187
+ padding-inline-end: 6px;
182
188
  }
183
189
 
184
190
  .e-rtl .e-dropdownbase .e-list-item {
@@ -374,11 +380,13 @@
374
380
  }
375
381
 
376
382
  .e-dropdownbase .e-list-item .e-list-icon {
377
- padding: 0 8px 0 0;
383
+ -webkit-padding-end: 8px;
384
+ padding-inline-end: 8px;
378
385
  }
379
386
 
380
387
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
381
- padding: 0 6px 0 0;
388
+ -webkit-padding-end: 6px;
389
+ padding-inline-end: 6px;
382
390
  }
383
391
 
384
392
  .e-bigger .e-dropdownbase,
@@ -467,7 +475,8 @@
467
475
 
468
476
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
469
477
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
470
- padding: 0 12px 0 0;
478
+ -webkit-padding-end: 12px;
479
+ padding-inline-end: 12px;
471
480
  }
472
481
 
473
482
  /* stylelint-disable property-no-vendor-prefix */
@@ -1836,11 +1845,13 @@ ejs-dropdownlist {
1836
1845
  }
1837
1846
 
1838
1847
  .e-dropdownbase .e-list-item .e-list-icon {
1839
- padding: 0 8px 0 0;
1848
+ -webkit-padding-end: 8px;
1849
+ padding-inline-end: 8px;
1840
1850
  }
1841
1851
 
1842
1852
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1843
- padding: 0 6px 0 0;
1853
+ -webkit-padding-end: 6px;
1854
+ padding-inline-end: 6px;
1844
1855
  }
1845
1856
 
1846
1857
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
@@ -2901,11 +2912,13 @@ ejs-multiselect {
2901
2912
  }
2902
2913
 
2903
2914
  .e-dropdownbase .e-list-item .e-list-icon {
2904
- padding: 0 8px 0 0;
2915
+ -webkit-padding-end: 8px;
2916
+ padding-inline-end: 8px;
2905
2917
  }
2906
2918
 
2907
2919
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2908
- padding: 0 6px 0 0;
2920
+ -webkit-padding-end: 6px;
2921
+ padding-inline-end: 6px;
2909
2922
  }
2910
2923
 
2911
2924
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
package/styles/bootstrap5-lite.css CHANGED
@@ -11,11 +11,13 @@
11
11
  }
12
12
 
13
13
  .e-dropdownbase .e-list-item .e-list-icon {
14
- padding: 0 8px 0 0;
14
+ -webkit-padding-end: 8px;
15
+ padding-inline-end: 8px;
15
16
  }
16
17
 
17
18
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
18
- padding: 0 6px 0 0;
19
+ -webkit-padding-end: 6px;
20
+ padding-inline-end: 6px;
19
21
  }
20
22
 
21
23
  .e-dropdownbase .e-list-group-item,
@@ -31,11 +33,13 @@
31
33
  }
32
34
 
33
35
  .e-dropdownbase .e-list-item .e-list-icon {
34
- padding: 0 8px 0 0;
36
+ -webkit-padding-end: 8px;
37
+ padding-inline-end: 8px;
35
38
  }
36
39
 
37
40
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
38
- padding: 0 6px 0 0;
41
+ -webkit-padding-end: 6px;
42
+ padding-inline-end: 6px;
39
43
  }
40
44
 
41
45
  .e-dropdownbase {
@@ -91,11 +95,11 @@
91
95
 
92
96
  .e-mention.e-popup {
93
97
  background: #fff;
94
- border: 0;
95
98
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
96
99
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
97
100
  margin-top: 2px;
98
101
  position: absolute;
102
+ border: 0;
99
103
  }
100
104
 
101
105
  .e-mention.e-popup .e-dropdownbase {
@@ -174,11 +178,13 @@
174
178
  }
175
179
 
176
180
  .e-dropdownbase .e-list-item .e-list-icon {
177
- padding: 0 8px 0 0;
181
+ -webkit-padding-end: 8px;
182
+ padding-inline-end: 8px;
178
183
  }
179
184
 
180
185
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
181
- padding: 0 6px 0 0;
186
+ -webkit-padding-end: 6px;
187
+ padding-inline-end: 6px;
182
188
  }
183
189
 
184
190
  .e-rtl .e-dropdownbase .e-list-item {
@@ -1399,11 +1405,13 @@ ejs-dropdownlist {
1399
1405
  }
1400
1406
 
1401
1407
  .e-dropdownbase .e-list-item .e-list-icon {
1402
- padding: 0 8px 0 0;
1408
+ -webkit-padding-end: 8px;
1409
+ padding-inline-end: 8px;
1403
1410
  }
1404
1411
 
1405
1412
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1406
- padding: 0 6px 0 0;
1413
+ -webkit-padding-end: 6px;
1414
+ padding-inline-end: 6px;
1407
1415
  }
1408
1416
 
1409
1417
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
package/styles/bootstrap5.3-lite.css CHANGED
@@ -95,11 +95,13 @@
95
95
  }
96
96
 
97
97
  .e-dropdownbase .e-list-item .e-list-icon {
98
- padding: 0 8px 0 0;
98
+ -webkit-padding-end: 8px;
99
+ padding-inline-end: 8px;
99
100
  }
100
101
 
101
102
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
102
- padding: 0 6px 0 0;
103
+ -webkit-padding-end: 6px;
104
+ padding-inline-end: 6px;
103
105
  }
104
106
 
105
107
 
@@ -199,11 +201,13 @@
199
201
  }
200
202
 
201
203
  .e-dropdownbase .e-list-item .e-list-icon {
202
- padding: 0 8px 0 0;
204
+ -webkit-padding-end: 8px;
205
+ padding-inline-end: 8px;
203
206
  }
204
207
 
205
208
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
206
- padding: 0 6px 0 0;
209
+ -webkit-padding-end: 6px;
210
+ padding-inline-end: 6px;
207
211
  }
208
212
 
209
213
  .e-dropdownbase {
@@ -259,11 +263,13 @@
259
263
 
260
264
  .e-mention.e-popup {
261
265
  background: var(--color-sf-content-bg-color);
262
- border: 0;
263
266
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
264
267
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
265
268
  margin-top: 2px;
266
269
  position: absolute;
270
+ border: 1px solid var(--color-sf-flyout-border);
271
+ border-radius: calc(var(--e-radius) * 0.25);
272
+ padding: 4px 0;
267
273
  }
268
274
 
269
275
  .e-mention.e-popup .e-dropdownbase {
@@ -426,11 +432,13 @@
426
432
  }
427
433
 
428
434
  .e-dropdownbase .e-list-item .e-list-icon {
429
- padding: 0 8px 0 0;
435
+ -webkit-padding-end: 8px;
436
+ padding-inline-end: 8px;
430
437
  }
431
438
 
432
439
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
433
- padding: 0 6px 0 0;
440
+ -webkit-padding-end: 6px;
441
+ padding-inline-end: 6px;
434
442
  }
435
443
 
436
444
  .e-rtl .e-dropdownbase .e-list-item {
@@ -2054,11 +2062,13 @@ ejs-dropdownlist {
2054
2062
  }
2055
2063
 
2056
2064
  .e-dropdownbase .e-list-item .e-list-icon {
2057
- padding: 0 8px 0 0;
2065
+ -webkit-padding-end: 8px;
2066
+ padding-inline-end: 8px;
2058
2067
  }
2059
2068
 
2060
2069
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2061
- padding: 0 6px 0 0;
2070
+ -webkit-padding-end: 6px;
2071
+ padding-inline-end: 6px;
2062
2072
  }
2063
2073
 
2064
2074
 
package/styles/bootstrap5.3.css CHANGED
@@ -95,11 +95,13 @@
95
95
  }
96
96
 
97
97
  .e-dropdownbase .e-list-item .e-list-icon {
98
- padding: 0 8px 0 0;
98
+ -webkit-padding-end: 8px;
99
+ padding-inline-end: 8px;
99
100
  }
100
101
 
101
102
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
102
- padding: 0 6px 0 0;
103
+ -webkit-padding-end: 6px;
104
+ padding-inline-end: 6px;
103
105
  }
104
106
 
105
107
 
@@ -199,11 +201,13 @@
199
201
  }
200
202
 
201
203
  .e-dropdownbase .e-list-item .e-list-icon {
202
- padding: 0 8px 0 0;
204
+ -webkit-padding-end: 8px;
205
+ padding-inline-end: 8px;
203
206
  }
204
207
 
205
208
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
206
- padding: 0 6px 0 0;
209
+ -webkit-padding-end: 6px;
210
+ padding-inline-end: 6px;
207
211
  }
208
212
 
209
213
  .e-dropdownbase {
@@ -259,11 +263,13 @@
259
263
 
260
264
  .e-mention.e-popup {
261
265
  background: var(--color-sf-content-bg-color);
262
- border: 0;
263
266
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
264
267
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
265
268
  margin-top: 2px;
266
269
  position: absolute;
270
+ border: 1px solid var(--color-sf-flyout-border);
271
+ border-radius: calc(var(--e-radius) * 0.25);
272
+ padding: 4px 0;
267
273
  }
268
274
 
269
275
  .e-mention.e-popup .e-dropdownbase {
@@ -426,11 +432,13 @@
426
432
  }
427
433
 
428
434
  .e-dropdownbase .e-list-item .e-list-icon {
429
- padding: 0 8px 0 0;
435
+ -webkit-padding-end: 8px;
436
+ padding-inline-end: 8px;
430
437
  }
431
438
 
432
439
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
433
- padding: 0 6px 0 0;
440
+ -webkit-padding-end: 6px;
441
+ padding-inline-end: 6px;
434
442
  }
435
443
 
436
444
  .e-rtl .e-dropdownbase .e-list-item {
@@ -710,11 +718,13 @@
710
718
  }
711
719
 
712
720
  .e-dropdownbase .e-list-item .e-list-icon {
713
- padding: 0 8px 0 0;
721
+ -webkit-padding-end: 8px;
722
+ padding-inline-end: 8px;
714
723
  }
715
724
 
716
725
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
717
- padding: 0 6px 0 0;
726
+ -webkit-padding-end: 6px;
727
+ padding-inline-end: 6px;
718
728
  }
719
729
 
720
730
  .e-bigger .e-dropdownbase,
@@ -803,7 +813,8 @@
803
813
 
804
814
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
805
815
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
806
- padding: 0 12px 0 0;
816
+ -webkit-padding-end: 12px;
817
+ padding-inline-end: 12px;
807
818
  }
808
819
 
809
820
  /* stylelint-disable property-no-vendor-prefix */
@@ -2692,11 +2703,13 @@ ejs-dropdownlist {
2692
2703
  }
2693
2704
 
2694
2705
  .e-dropdownbase .e-list-item .e-list-icon {
2695
- padding: 0 8px 0 0;
2706
+ -webkit-padding-end: 8px;
2707
+ padding-inline-end: 8px;
2696
2708
  }
2697
2709
 
2698
2710
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2699
- padding: 0 6px 0 0;
2711
+ -webkit-padding-end: 6px;
2712
+ padding-inline-end: 6px;
2700
2713
  }
2701
2714
 
2702
2715
 
@@ -4009,11 +4022,13 @@ ejs-multiselect {
4009
4022
  }
4010
4023
 
4011
4024
  .e-dropdownbase .e-list-item .e-list-icon {
4012
- padding: 0 8px 0 0;
4025
+ -webkit-padding-end: 8px;
4026
+ padding-inline-end: 8px;
4013
4027
  }
4014
4028
 
4015
4029
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
4016
- padding: 0 6px 0 0;
4030
+ -webkit-padding-end: 6px;
4031
+ padding-inline-end: 6px;
4017
4032
  }
4018
4033
 
4019
4034
 
package/styles/bootstrap5.css CHANGED
@@ -11,11 +11,13 @@
11
11
  }
12
12
 
13
13
  .e-dropdownbase .e-list-item .e-list-icon {
14
- padding: 0 8px 0 0;
14
+ -webkit-padding-end: 8px;
15
+ padding-inline-end: 8px;
15
16
  }
16
17
 
17
18
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
18
- padding: 0 6px 0 0;
19
+ -webkit-padding-end: 6px;
20
+ padding-inline-end: 6px;
19
21
  }
20
22
 
21
23
  .e-dropdownbase .e-list-group-item,
@@ -31,11 +33,13 @@
31
33
  }
32
34
 
33
35
  .e-dropdownbase .e-list-item .e-list-icon {
34
- padding: 0 8px 0 0;
36
+ -webkit-padding-end: 8px;
37
+ padding-inline-end: 8px;
35
38
  }
36
39
 
37
40
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
38
- padding: 0 6px 0 0;
41
+ -webkit-padding-end: 6px;
42
+ padding-inline-end: 6px;
39
43
  }
40
44
 
41
45
  .e-dropdownbase {
@@ -91,11 +95,11 @@
91
95
 
92
96
  .e-mention.e-popup {
93
97
  background: #fff;
94
- border: 0;
95
98
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
96
99
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
97
100
  margin-top: 2px;
98
101
  position: absolute;
102
+ border: 0;
99
103
  }
100
104
 
101
105
  .e-mention.e-popup .e-dropdownbase {
@@ -174,11 +178,13 @@
174
178
  }
175
179
 
176
180
  .e-dropdownbase .e-list-item .e-list-icon {
177
- padding: 0 8px 0 0;
181
+ -webkit-padding-end: 8px;
182
+ padding-inline-end: 8px;
178
183
  }
179
184
 
180
185
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
181
- padding: 0 6px 0 0;
186
+ -webkit-padding-end: 6px;
187
+ padding-inline-end: 6px;
182
188
  }
183
189
 
184
190
  .e-rtl .e-dropdownbase .e-list-item {
@@ -374,11 +380,13 @@
374
380
  }
375
381
 
376
382
  .e-dropdownbase .e-list-item .e-list-icon {
377
- padding: 0 8px 0 0;
383
+ -webkit-padding-end: 8px;
384
+ padding-inline-end: 8px;
378
385
  }
379
386
 
380
387
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
381
- padding: 0 6px 0 0;
388
+ -webkit-padding-end: 6px;
389
+ padding-inline-end: 6px;
382
390
  }
383
391
 
384
392
  .e-bigger .e-dropdownbase,
@@ -467,7 +475,8 @@
467
475
 
468
476
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
469
477
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
470
- padding: 0 12px 0 0;
478
+ -webkit-padding-end: 12px;
479
+ padding-inline-end: 12px;
471
480
  }
472
481
 
473
482
  /* stylelint-disable property-no-vendor-prefix */
@@ -1836,11 +1845,13 @@ ejs-dropdownlist {
1836
1845
  }
1837
1846
 
1838
1847
  .e-dropdownbase .e-list-item .e-list-icon {
1839
- padding: 0 8px 0 0;
1848
+ -webkit-padding-end: 8px;
1849
+ padding-inline-end: 8px;
1840
1850
  }
1841
1851
 
1842
1852
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1843
- padding: 0 6px 0 0;
1853
+ -webkit-padding-end: 6px;
1854
+ padding-inline-end: 6px;
1844
1855
  }
1845
1856
 
1846
1857
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
@@ -2901,11 +2912,13 @@ ejs-multiselect {
2901
2912
  }
2902
2913
 
2903
2914
  .e-dropdownbase .e-list-item .e-list-icon {
2904
- padding: 0 8px 0 0;
2915
+ -webkit-padding-end: 8px;
2916
+ padding-inline-end: 8px;
2905
2917
  }
2906
2918
 
2907
2919
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2908
- padding: 0 6px 0 0;
2920
+ -webkit-padding-end: 6px;
2921
+ padding-inline-end: 6px;
2909
2922
  }
2910
2923
 
2911
2924
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
package/styles/drop-down-base/_bds-definition.scss CHANGED
@@ -123,11 +123,11 @@ $ddl-group-list-item-text-intent: 0 !default;
123
123
  }
124
124
 
125
125
  .e-dropdownbase .e-list-item .e-list-icon {
126
- padding: 0 8px 0 0;
126
+ padding-inline-end: 8px;
127
127
  }
128
128
 
129
129
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
130
- padding: 0 4px 0 0;
130
+ padding-inline-end: 4px;
131
131
  }
132
132
 
133
133
  /* stylelint-disable */
package/styles/drop-down-base/_bigger.scss CHANGED
@@ -163,20 +163,20 @@
163
163
 
164
164
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
165
165
  @if $skin-name == 'tailwind' or $skin-name == 'fluent2' {
166
- padding: $ddl-bgr-dropbase-list-icon-padding;
166
+ padding-inline-end: $ddl-bgr-dropbase-list-icon-padding;
167
167
  }
168
168
  }
169
169
 
170
170
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
171
171
  @if $skin-name == 'tailwind' or $skin-name == 'fluent2' {
172
- padding: $ddl-bgr-small-dropbase-list-icon-padding;
172
+ padding-inline-end: $ddl-bgr-small-dropbase-list-icon-padding;
173
173
  }
174
174
  }
175
175
 
176
176
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
177
177
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
178
178
  @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
179
- padding: $ddl-bgr-dropbase-list-icon-item-padding;
179
+ padding-inline-end: $ddl-bgr-dropbase-list-icon-item-padding;
180
180
  }
181
181
  }
182
182
 
package/styles/drop-down-base/_bootstrap-dark-definition.scss CHANGED
@@ -88,14 +88,14 @@ $ddl-zero-spacing: 0 !default;
88
88
  $ddl-auto-height: auto !default;
89
89
  $ddl-full-height: 100% !default;
90
90
  $ddl-full-width: 100% !default;
91
- $ddl-bgr-dropbase-list-icon-item-padding: 0 12px 0 0 !default;
91
+ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
92
92
 
93
93
  @include export-module('dropdownbase-bootstrap-dark') {
94
94
  .e-dropdownbase .e-list-item .e-list-icon {
95
- padding: 0 10px 0 0;
95
+ padding-inline-end: 10px;
96
96
  }
97
97
 
98
98
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
99
- padding: 0 8px 0 0;
99
+ padding-inline-end: 8px;
100
100
  }
101
101
  }
package/styles/drop-down-base/_bootstrap-definition.scss CHANGED
@@ -86,14 +86,14 @@ $ddl-zero-spacing: 0 !default;
86
86
  $ddl-auto-height: auto !default;
87
87
  $ddl-full-height: 100% !default;
88
88
  $ddl-full-width: 100% !default;
89
- $ddl-bgr-dropbase-list-icon-item-padding: 0 12px 0 0 !default;
89
+ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
90
90
 
91
91
  @include export-module('dropdownbase-bootstrap') {
92
92
  .e-dropdownbase .e-list-item .e-list-icon {
93
- padding: 0 10px 0 0;
93
+ padding-inline-end: 10px;
94
94
  }
95
95
 
96
96
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
97
- padding: 0 8px 0 0;
97
+ padding-inline-end: 8px;
98
98
  }
99
99
  }
package/styles/drop-down-base/_bootstrap4-definition.scss CHANGED
@@ -85,15 +85,15 @@ $ddl-zero-spacing: 0 !default;
85
85
  $ddl-auto-height: auto !default;
86
86
  $ddl-full-height: 100% !default;
87
87
  $ddl-full-width: 100% !default;
88
- $ddl-bgr-dropbase-list-icon-item-padding: 0 12px 0 0 !default;
88
+ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
89
89
 
90
90
  @include export-module('dropdownbase-bootstrap4') {
91
91
  .e-dropdownbase .e-list-item .e-list-icon {
92
- padding: 0 8px 0 0;
92
+ padding-inline-end: 8px;
93
93
  }
94
94
 
95
95
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
96
- padding: 0 8px 0 0;
96
+ padding-inline-end: 8px;
97
97
  }
98
98
 
99
99
  .e-input-group.e-ddl .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
package/styles/drop-down-base/_bootstrap5-dark-definition.scss CHANGED
@@ -88,7 +88,7 @@ $ddl-auto-height: auto !default;
88
88
  $ddl-full-height: 100% !default;
89
89
  $ddl-full-width: 100% !default;
90
90
  $popup-multi-select-font-size: 500;
91
- $ddl-bgr-dropbase-list-icon-item-padding: 0 12px 0 0 !default;
91
+ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
92
92
 
93
93
  // Small Size color
94
94
  $ddl-small-list-font-color: $content-text-color !default;
@@ -111,10 +111,10 @@ $ddl-bigger-small-list-font-color: $content-text-color !default;
111
111
  }
112
112
 
113
113
  .e-dropdownbase .e-list-item .e-list-icon {
114
- padding: 0 8px 0 0;
114
+ padding-inline-end: 8px;
115
115
  }
116
116
 
117
117
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
118
- padding: 0 6px 0 0;
118
+ padding-inline-end: 6px;
119
119
  }
120
120
  }
package/styles/drop-down-base/_bootstrap5-definition.scss CHANGED
@@ -88,7 +88,7 @@ $ddl-auto-height: auto !default;
88
88
  $ddl-full-height: 100% !default;
89
89
  $ddl-full-width: 100% !default;
90
90
  $popup-multi-select-font-size: 500;
91
- $ddl-bgr-dropbase-list-icon-item-padding: 0 12px 0 0 !default;
91
+ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
92
92
 
93
93
  // Small Size color
94
94
  $ddl-small-list-font-color: $content-text-color !default;
@@ -111,10 +111,10 @@ $ddl-bigger-small-list-font-color: $content-text-color !default;
111
111
  }
112
112
 
113
113
  .e-dropdownbase .e-list-item .e-list-icon {
114
- padding: 0 8px 0 0;
114
+ padding-inline-end: 8px;
115
115
  }
116
116
 
117
117
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
118
- padding: 0 6px 0 0;
118
+ padding-inline-end: 6px;
119
119
  }
120
120
  }
package/styles/drop-down-base/_bootstrap5.3-definition.scss CHANGED
@@ -63,6 +63,9 @@ $ddl-nodata-font-color: $content-text-color !default;
63
63
  $ddl-list-default-font-color: $content-text-color !default;
64
64
  $ddl-list-active-border-color: $content-bg-color !default;
65
65
  $mention-popup-bg-color: $content-bg-color !default;
66
+ $mention-popup-border: 1px solid $flyout-border !default;
67
+ $mention-popup-border-radius: $radius-4;
68
+ $mention-popup-padding: 4px 0;
66
69
  $ddl-list-active-font-color: $content-text-color-selected !default;
67
70
  $mention-active-font-color: $primary !default;
68
71
  $ddl-list-active-bg-color: $content-bg-color-selected !default;
@@ -88,7 +91,7 @@ $ddl-auto-height: auto !default;
88
91
  $ddl-full-height: 100% !default;
89
92
  $ddl-full-width: 100% !default;
90
93
  $popup-multi-select-font-size: 500;
91
- $ddl-bgr-dropbase-list-icon-item-padding: 0 12px 0 0 !default;
94
+ $ddl-bgr-dropbase-list-icon-item-padding: 12px !default;
92
95
 
93
96
  // Small Size color
94
97
  $ddl-small-list-font-color: $content-text-color !default;
@@ -111,10 +114,10 @@ $ddl-bigger-small-list-font-color: $content-text-color !default;
111
114
  }
112
115
 
113
116
  .e-dropdownbase .e-list-item .e-list-icon {
114
- padding: 0 8px 0 0;
117
+ padding-inline-end: 8px;
115
118
  }
116
119
 
117
120
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
118
- padding: 0 6px 0 0;
121
+ padding-inline-end: 6px;
119
122
  }
120
123
  }