@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/fluent-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 8px 0 0;
19
+ -webkit-padding-end: 8px;
20
+ padding-inline-end: 8px;
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 8px 0 0;
41
+ -webkit-padding-end: 8px;
42
+ padding-inline-end: 8px;
39
43
  }
40
44
 
41
45
  .e-dropdownbase {
@@ -91,11 +95,11 @@
91
95
 
92
96
  .e-mention.e-popup {
93
97
  background: #252423;
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 {
@@ -179,11 +183,13 @@
179
183
  }
180
184
 
181
185
  .e-dropdownbase .e-list-item .e-list-icon {
182
- padding: 0 8px 0 0;
186
+ -webkit-padding-end: 8px;
187
+ padding-inline-end: 8px;
183
188
  }
184
189
 
185
190
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
186
- padding: 0 8px 0 0;
191
+ -webkit-padding-end: 8px;
192
+ padding-inline-end: 8px;
187
193
  }
188
194
 
189
195
  .e-rtl .e-dropdownbase .e-list-item {
@@ -378,11 +384,13 @@
378
384
  }
379
385
 
380
386
  .e-dropdownbase .e-list-item .e-list-icon {
381
- padding: 0 8px 0 0;
387
+ -webkit-padding-end: 8px;
388
+ padding-inline-end: 8px;
382
389
  }
383
390
 
384
391
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
385
- padding: 0 8px 0 0;
392
+ -webkit-padding-end: 8px;
393
+ padding-inline-end: 8px;
386
394
  }
387
395
 
388
396
  .e-bigger .e-dropdownbase,
@@ -483,7 +491,8 @@
483
491
 
484
492
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
485
493
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
486
- padding: 0 12px 0 0;
494
+ -webkit-padding-end: 12px;
495
+ padding-inline-end: 12px;
487
496
  }
488
497
 
489
498
  /* stylelint-disable property-no-vendor-prefix */
@@ -1810,11 +1819,13 @@ ejs-dropdownlist {
1810
1819
  }
1811
1820
 
1812
1821
  .e-dropdownbase .e-list-item .e-list-icon {
1813
- padding: 0 8px 0 0;
1822
+ -webkit-padding-end: 8px;
1823
+ padding-inline-end: 8px;
1814
1824
  }
1815
1825
 
1816
1826
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1817
- padding: 0 8px 0 0;
1827
+ -webkit-padding-end: 8px;
1828
+ padding-inline-end: 8px;
1818
1829
  }
1819
1830
 
1820
1831
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
@@ -2898,11 +2909,13 @@ ejs-multiselect {
2898
2909
  }
2899
2910
 
2900
2911
  .e-dropdownbase .e-list-item .e-list-icon {
2901
- padding: 0 8px 0 0;
2912
+ -webkit-padding-end: 8px;
2913
+ padding-inline-end: 8px;
2902
2914
  }
2903
2915
 
2904
2916
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2905
- padding: 0 8px 0 0;
2917
+ -webkit-padding-end: 8px;
2918
+ padding-inline-end: 8px;
2906
2919
  }
2907
2920
 
2908
2921
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
package/styles/fluent-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 8px 0 0;
19
+ -webkit-padding-end: 8px;
20
+ padding-inline-end: 8px;
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 8px 0 0;
41
+ -webkit-padding-end: 8px;
42
+ padding-inline-end: 8px;
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 {
@@ -179,11 +183,13 @@
179
183
  }
180
184
 
181
185
  .e-dropdownbase .e-list-item .e-list-icon {
182
- padding: 0 8px 0 0;
186
+ -webkit-padding-end: 8px;
187
+ padding-inline-end: 8px;
183
188
  }
184
189
 
185
190
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
186
- padding: 0 8px 0 0;
191
+ -webkit-padding-end: 8px;
192
+ padding-inline-end: 8px;
187
193
  }
188
194
 
189
195
  .e-rtl .e-dropdownbase .e-list-item {
@@ -1379,11 +1385,13 @@ ejs-dropdownlist {
1379
1385
  }
1380
1386
 
1381
1387
  .e-dropdownbase .e-list-item .e-list-icon {
1382
- padding: 0 8px 0 0;
1388
+ -webkit-padding-end: 8px;
1389
+ padding-inline-end: 8px;
1383
1390
  }
1384
1391
 
1385
1392
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1386
- padding: 0 8px 0 0;
1393
+ -webkit-padding-end: 8px;
1394
+ padding-inline-end: 8px;
1387
1395
  }
1388
1396
 
1389
1397
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
package/styles/fluent.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 8px 0 0;
19
+ -webkit-padding-end: 8px;
20
+ padding-inline-end: 8px;
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 8px 0 0;
41
+ -webkit-padding-end: 8px;
42
+ padding-inline-end: 8px;
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 {
@@ -179,11 +183,13 @@
179
183
  }
180
184
 
181
185
  .e-dropdownbase .e-list-item .e-list-icon {
182
- padding: 0 8px 0 0;
186
+ -webkit-padding-end: 8px;
187
+ padding-inline-end: 8px;
183
188
  }
184
189
 
185
190
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
186
- padding: 0 8px 0 0;
191
+ -webkit-padding-end: 8px;
192
+ padding-inline-end: 8px;
187
193
  }
188
194
 
189
195
  .e-rtl .e-dropdownbase .e-list-item {
@@ -378,11 +384,13 @@
378
384
  }
379
385
 
380
386
  .e-dropdownbase .e-list-item .e-list-icon {
381
- padding: 0 8px 0 0;
387
+ -webkit-padding-end: 8px;
388
+ padding-inline-end: 8px;
382
389
  }
383
390
 
384
391
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
385
- padding: 0 8px 0 0;
392
+ -webkit-padding-end: 8px;
393
+ padding-inline-end: 8px;
386
394
  }
387
395
 
388
396
  .e-bigger .e-dropdownbase,
@@ -483,7 +491,8 @@
483
491
 
484
492
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
485
493
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
486
- padding: 0 12px 0 0;
494
+ -webkit-padding-end: 12px;
495
+ padding-inline-end: 12px;
487
496
  }
488
497
 
489
498
  /* stylelint-disable property-no-vendor-prefix */
@@ -1810,11 +1819,13 @@ ejs-dropdownlist {
1810
1819
  }
1811
1820
 
1812
1821
  .e-dropdownbase .e-list-item .e-list-icon {
1813
- padding: 0 8px 0 0;
1822
+ -webkit-padding-end: 8px;
1823
+ padding-inline-end: 8px;
1814
1824
  }
1815
1825
 
1816
1826
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1817
- padding: 0 8px 0 0;
1827
+ -webkit-padding-end: 8px;
1828
+ padding-inline-end: 8px;
1818
1829
  }
1819
1830
 
1820
1831
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
@@ -2898,11 +2909,13 @@ ejs-multiselect {
2898
2909
  }
2899
2910
 
2900
2911
  .e-dropdownbase .e-list-item .e-list-icon {
2901
- padding: 0 8px 0 0;
2912
+ -webkit-padding-end: 8px;
2913
+ padding-inline-end: 8px;
2902
2914
  }
2903
2915
 
2904
2916
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2905
- padding: 0 8px 0 0;
2917
+ -webkit-padding-end: 8px;
2918
+ padding-inline-end: 8px;
2906
2919
  }
2907
2920
 
2908
2921
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
package/styles/fluent2-lite.css CHANGED
@@ -103,11 +103,13 @@
103
103
  }
104
104
 
105
105
  .e-dropdownbase .e-list-item .e-list-icon {
106
- padding: 0 8px 0 0;
106
+ -webkit-padding-end: 8px;
107
+ padding-inline-end: 8px;
107
108
  }
108
109
 
109
110
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
110
- padding: 0 4px 0 0;
111
+ -webkit-padding-end: 4px;
112
+ padding-inline-end: 4px;
111
113
  }
112
114
 
113
115
  /* stylelint-disable */
@@ -220,11 +222,13 @@
220
222
  }
221
223
 
222
224
  .e-dropdownbase .e-list-item .e-list-icon {
223
- padding: 0 8px 0 0;
225
+ -webkit-padding-end: 8px;
226
+ padding-inline-end: 8px;
224
227
  }
225
228
 
226
229
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
227
- padding: 0 4px 0 0;
230
+ -webkit-padding-end: 4px;
231
+ padding-inline-end: 4px;
228
232
  }
229
233
 
230
234
  /* stylelint-disable */
@@ -284,12 +288,14 @@
284
288
  }
285
289
 
286
290
  .e-mention.e-popup {
287
- background: var(--color-sf-content-bg-color);
288
- border: 0;
291
+ background: var(--color-sf-flyout-bg-color);
289
292
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
290
293
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
291
294
  margin-top: 2px;
292
295
  position: absolute;
296
+ border: 1px solid var(--color-sf-flyout-border);
297
+ border-radius: calc(var(--e-radius) * 0.25);
298
+ padding: 4px;
293
299
  }
294
300
 
295
301
  .e-mention.e-popup .e-dropdownbase {
@@ -459,11 +465,13 @@
459
465
  }
460
466
 
461
467
  .e-dropdownbase .e-list-item .e-list-icon {
462
- padding: 0 8px 0 0;
468
+ -webkit-padding-end: 8px;
469
+ padding-inline-end: 8px;
463
470
  }
464
471
 
465
472
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
466
- padding: 0 4px 0 0;
473
+ -webkit-padding-end: 4px;
474
+ padding-inline-end: 4px;
467
475
  }
468
476
 
469
477
  /* stylelint-disable */
@@ -537,6 +545,10 @@
537
545
  background: var(--color-sf-flyout-bg-color-focus);
538
546
  }
539
547
 
548
+ .e-mention .e-dropdownbase .e-list-item {
549
+ margin-bottom: 0;
550
+ }
551
+
540
552
  .e-multi-column.e-ddl.e-popup.e-popup-open table {
541
553
  border-collapse: collapse;
542
554
  table-layout: fixed;
@@ -2476,11 +2488,13 @@ ejs-dropdownlist {
2476
2488
  }
2477
2489
 
2478
2490
  .e-dropdownbase .e-list-item .e-list-icon {
2479
- padding: 0 8px 0 0;
2491
+ -webkit-padding-end: 8px;
2492
+ padding-inline-end: 8px;
2480
2493
  }
2481
2494
 
2482
2495
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
2483
- padding: 0 4px 0 0;
2496
+ -webkit-padding-end: 4px;
2497
+ padding-inline-end: 4px;
2484
2498
  }
2485
2499
 
2486
2500
  /* stylelint-disable */
package/styles/fluent2.css CHANGED
@@ -103,11 +103,13 @@
103
103
  }
104
104
 
105
105
  .e-dropdownbase .e-list-item .e-list-icon {
106
- padding: 0 8px 0 0;
106
+ -webkit-padding-end: 8px;
107
+ padding-inline-end: 8px;
107
108
  }
108
109
 
109
110
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
110
- padding: 0 4px 0 0;
111
+ -webkit-padding-end: 4px;
112
+ padding-inline-end: 4px;
111
113
  }
112
114
 
113
115
  /* stylelint-disable */
@@ -220,11 +222,13 @@
220
222
  }
221
223
 
222
224
  .e-dropdownbase .e-list-item .e-list-icon {
223
- padding: 0 8px 0 0;
225
+ -webkit-padding-end: 8px;
226
+ padding-inline-end: 8px;
224
227
  }
225
228
 
226
229
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
227
- padding: 0 4px 0 0;
230
+ -webkit-padding-end: 4px;
231
+ padding-inline-end: 4px;
228
232
  }
229
233
 
230
234
  /* stylelint-disable */
@@ -284,12 +288,14 @@
284
288
  }
285
289
 
286
290
  .e-mention.e-popup {
287
- background: var(--color-sf-content-bg-color);
288
- border: 0;
291
+ background: var(--color-sf-flyout-bg-color);
289
292
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
290
293
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
291
294
  margin-top: 2px;
292
295
  position: absolute;
296
+ border: 1px solid var(--color-sf-flyout-border);
297
+ border-radius: calc(var(--e-radius) * 0.25);
298
+ padding: 4px;
293
299
  }
294
300
 
295
301
  .e-mention.e-popup .e-dropdownbase {
@@ -459,11 +465,13 @@
459
465
  }
460
466
 
461
467
  .e-dropdownbase .e-list-item .e-list-icon {
462
- padding: 0 8px 0 0;
468
+ -webkit-padding-end: 8px;
469
+ padding-inline-end: 8px;
463
470
  }
464
471
 
465
472
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
466
- padding: 0 4px 0 0;
473
+ -webkit-padding-end: 4px;
474
+ padding-inline-end: 4px;
467
475
  }
468
476
 
469
477
  /* stylelint-disable */
@@ -537,6 +545,10 @@
537
545
  background: var(--color-sf-flyout-bg-color-focus);
538
546
  }
539
547
 
548
+ .e-mention .e-dropdownbase .e-list-item {
549
+ margin-bottom: 0;
550
+ }
551
+
540
552
  .e-multi-column.e-ddl.e-popup.e-popup-open table {
541
553
  border-collapse: collapse;
542
554
  table-layout: fixed;
@@ -753,11 +765,13 @@
753
765
  }
754
766
 
755
767
  .e-dropdownbase .e-list-item .e-list-icon {
756
- padding: 0 8px 0 0;
768
+ -webkit-padding-end: 8px;
769
+ padding-inline-end: 8px;
757
770
  }
758
771
 
759
772
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
760
- padding: 0 4px 0 0;
773
+ -webkit-padding-end: 4px;
774
+ padding-inline-end: 4px;
761
775
  }
762
776
 
763
777
  /* stylelint-disable */
@@ -850,11 +864,13 @@
850
864
  }
851
865
 
852
866
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
853
- padding: 0 12px 0 0;
867
+ -webkit-padding-end: 12px;
868
+ padding-inline-end: 12px;
854
869
  }
855
870
 
856
871
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
857
- padding: 0 8px 0 0;
872
+ -webkit-padding-end: 8px;
873
+ padding-inline-end: 8px;
858
874
  }
859
875
 
860
876
  /* stylelint-disable property-no-vendor-prefix */
@@ -3118,11 +3134,13 @@ ejs-dropdownlist {
3118
3134
  }
3119
3135
 
3120
3136
  .e-dropdownbase .e-list-item .e-list-icon {
3121
- padding: 0 8px 0 0;
3137
+ -webkit-padding-end: 8px;
3138
+ padding-inline-end: 8px;
3122
3139
  }
3123
3140
 
3124
3141
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
3125
- padding: 0 4px 0 0;
3142
+ -webkit-padding-end: 4px;
3143
+ padding-inline-end: 4px;
3126
3144
  }
3127
3145
 
3128
3146
  /* stylelint-disable */
@@ -4592,11 +4610,13 @@ ejs-multiselect {
4592
4610
  }
4593
4611
 
4594
4612
  .e-dropdownbase .e-list-item .e-list-icon {
4595
- padding: 0 8px 0 0;
4613
+ -webkit-padding-end: 8px;
4614
+ padding-inline-end: 8px;
4596
4615
  }
4597
4616
 
4598
4617
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
4599
- padding: 0 4px 0 0;
4618
+ -webkit-padding-end: 4px;
4619
+ padding-inline-end: 4px;
4600
4620
  }
4601
4621
 
4602
4622
  /* stylelint-disable */
package/styles/highcontrast-light-lite.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .e-dropdownbase .e-list-item .e-list-icon {
2
- padding: 0 10px 0 0;
2
+ -webkit-padding-end: 10px;
3
+ padding-inline-end: 10px;
3
4
  }
4
5
  .e-dropdownbase .e-list-item:not(.e-active).e-hover {
5
6
  border: 2px solid #000;
@@ -15,11 +16,13 @@
15
16
  }
16
17
 
17
18
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
18
- padding: 0 8px 0 0;
19
+ -webkit-padding-end: 8px;
20
+ padding-inline-end: 8px;
19
21
  }
20
22
 
21
23
  .e-dropdownbase .e-list-item .e-list-icon {
22
- padding: 0 10px 0 0;
24
+ -webkit-padding-end: 10px;
25
+ padding-inline-end: 10px;
23
26
  }
24
27
 
25
28
  .e-dropdownbase .e-list-item:not(.e-active).e-hover {
@@ -39,7 +42,8 @@
39
42
  }
40
43
 
41
44
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
42
- padding: 0 8px 0 0;
45
+ -webkit-padding-end: 8px;
46
+ padding-inline-end: 8px;
43
47
  }
44
48
 
45
49
  .e-dropdownbase {
@@ -95,11 +99,11 @@
95
99
 
96
100
  .e-mention.e-popup {
97
101
  background: #400074;
98
- border: 0;
99
102
  -webkit-box-shadow: 0 2px 3px 1px 0 0 5px 0 rgba(0, 0, 0, 0.4);
100
103
  box-shadow: 0 2px 3px 1px 0 0 5px 0 rgba(0, 0, 0, 0.4);
101
104
  margin-top: 2px;
102
105
  position: absolute;
106
+ border: 0;
103
107
  }
104
108
 
105
109
  .e-mention.e-popup .e-dropdownbase {
@@ -165,7 +169,8 @@
165
169
  }
166
170
 
167
171
  .e-dropdownbase .e-list-item .e-list-icon {
168
- padding: 0 10px 0 0;
172
+ -webkit-padding-end: 10px;
173
+ padding-inline-end: 10px;
169
174
  }
170
175
 
171
176
  .e-dropdownbase .e-list-item:not(.e-active).e-hover {
@@ -185,7 +190,8 @@
185
190
  }
186
191
 
187
192
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
188
- padding: 0 8px 0 0;
193
+ -webkit-padding-end: 8px;
194
+ padding-inline-end: 8px;
189
195
  }
190
196
 
191
197
  .e-rtl .e-dropdownbase .e-list-item {
@@ -1289,7 +1295,8 @@ ejs-dropdownlist {
1289
1295
  }
1290
1296
 
1291
1297
  .e-dropdownbase .e-list-item .e-list-icon {
1292
- padding: 0 10px 0 0;
1298
+ -webkit-padding-end: 10px;
1299
+ padding-inline-end: 10px;
1293
1300
  }
1294
1301
 
1295
1302
  .e-dropdownbase .e-list-item:not(.e-active).e-hover {
@@ -1309,7 +1316,8 @@ ejs-dropdownlist {
1309
1316
  }
1310
1317
 
1311
1318
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
1312
- padding: 0 8px 0 0;
1319
+ -webkit-padding-end: 8px;
1320
+ padding-inline-end: 8px;
1313
1321
  }
1314
1322
 
1315
1323
  .e-multi-select-wrapper .e-chips-close.e-close-hooker::before {