@syncfusion/ej2-dropdowns 32.2.8 → 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 (216) 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 +490 -139
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +467 -114
  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.d.ts +1 -0
  18. package/src/drop-down-list/drop-down-list.js +143 -30
  19. package/src/drop-down-tree/drop-down-tree-model.d.ts +1 -1
  20. package/src/drop-down-tree/drop-down-tree.d.ts +1 -1
  21. package/src/mention/mention.js +8 -4
  22. package/src/multi-select/multi-select.d.ts +2 -0
  23. package/src/multi-select/multi-select.js +254 -79
  24. package/styles/bds-lite.css +17 -9
  25. package/styles/bds.css +29 -15
  26. package/styles/bootstrap-dark-lite.css +17 -9
  27. package/styles/bootstrap-dark.css +27 -14
  28. package/styles/bootstrap-lite.css +17 -9
  29. package/styles/bootstrap.css +27 -14
  30. package/styles/bootstrap4-lite.css +17 -9
  31. package/styles/bootstrap4.css +27 -14
  32. package/styles/bootstrap5-dark-lite.css +17 -9
  33. package/styles/bootstrap5-dark.css +27 -14
  34. package/styles/bootstrap5-lite.css +17 -9
  35. package/styles/bootstrap5.3-lite.css +19 -9
  36. package/styles/bootstrap5.3.css +29 -14
  37. package/styles/bootstrap5.css +27 -14
  38. package/styles/drop-down-base/_bds-definition.scss +2 -2
  39. package/styles/drop-down-base/_bigger.scss +3 -3
  40. package/styles/drop-down-base/_bootstrap-dark-definition.scss +3 -3
  41. package/styles/drop-down-base/_bootstrap-definition.scss +3 -3
  42. package/styles/drop-down-base/_bootstrap4-definition.scss +3 -3
  43. package/styles/drop-down-base/_bootstrap5-dark-definition.scss +3 -3
  44. package/styles/drop-down-base/_bootstrap5-definition.scss +3 -3
  45. package/styles/drop-down-base/_bootstrap5.3-definition.scss +6 -3
  46. package/styles/drop-down-base/_fabric-dark-definition.scss +3 -3
  47. package/styles/drop-down-base/_fabric-definition.scss +3 -3
  48. package/styles/drop-down-base/_fluent-dark-definition.scss +3 -3
  49. package/styles/drop-down-base/_fluent-definition.scss +3 -3
  50. package/styles/drop-down-base/_fluent2-definition.scss +8 -5
  51. package/styles/drop-down-base/_fusionnew-definition.scss +2 -2
  52. package/styles/drop-down-base/_highcontrast-definition.scss +3 -3
  53. package/styles/drop-down-base/_highcontrast-light-definition.scss +3 -3
  54. package/styles/drop-down-base/_layout.scss +12 -1
  55. package/styles/drop-down-base/_material-dark-definition.scss +2 -2
  56. package/styles/drop-down-base/_material-definition.scss +2 -2
  57. package/styles/drop-down-base/_material3-dark-definition.scss +6 -4
  58. package/styles/drop-down-base/_material3-definition.scss +6 -4
  59. package/styles/drop-down-base/_tailwind-dark-definition.scss +4 -4
  60. package/styles/drop-down-base/_tailwind-definition.scss +4 -4
  61. package/styles/drop-down-base/_tailwind3-definition.scss +5 -2
  62. package/styles/drop-down-base/_theme.scss +6 -0
  63. package/styles/drop-down-base/bds.css +21 -11
  64. package/styles/drop-down-base/bootstrap-dark.css +19 -10
  65. package/styles/drop-down-base/bootstrap.css +19 -10
  66. package/styles/drop-down-base/bootstrap4.css +19 -10
  67. package/styles/drop-down-base/bootstrap5-dark.css +19 -10
  68. package/styles/drop-down-base/bootstrap5.3.css +21 -10
  69. package/styles/drop-down-base/bootstrap5.css +19 -10
  70. package/styles/drop-down-base/fabric-dark.css +19 -10
  71. package/styles/drop-down-base/fabric.css +19 -10
  72. package/styles/drop-down-base/fluent-dark.css +19 -10
  73. package/styles/drop-down-base/fluent.css +19 -10
  74. package/styles/drop-down-base/fluent2.css +28 -12
  75. package/styles/drop-down-base/highcontrast-light.css +19 -10
  76. package/styles/drop-down-base/highcontrast.css +19 -10
  77. package/styles/drop-down-base/material-dark.css +17 -9
  78. package/styles/drop-down-base/material.css +17 -9
  79. package/styles/drop-down-base/material3-dark.css +19 -9
  80. package/styles/drop-down-base/material3.css +19 -9
  81. package/styles/drop-down-base/tailwind-dark.css +21 -11
  82. package/styles/drop-down-base/tailwind.css +21 -11
  83. package/styles/drop-down-base/tailwind3.css +19 -9
  84. package/styles/drop-down-list/bds.css +4 -2
  85. package/styles/drop-down-list/bootstrap-dark.css +4 -2
  86. package/styles/drop-down-list/bootstrap.css +4 -2
  87. package/styles/drop-down-list/bootstrap4.css +4 -2
  88. package/styles/drop-down-list/bootstrap5-dark.css +4 -2
  89. package/styles/drop-down-list/bootstrap5.3.css +4 -2
  90. package/styles/drop-down-list/bootstrap5.css +4 -2
  91. package/styles/drop-down-list/fabric-dark.css +4 -2
  92. package/styles/drop-down-list/fabric.css +4 -2
  93. package/styles/drop-down-list/fluent-dark.css +4 -2
  94. package/styles/drop-down-list/fluent.css +4 -2
  95. package/styles/drop-down-list/fluent2.css +4 -2
  96. package/styles/drop-down-list/highcontrast-light.css +4 -2
  97. package/styles/drop-down-list/highcontrast.css +4 -2
  98. package/styles/drop-down-list/material-dark.css +4 -2
  99. package/styles/drop-down-list/material.css +4 -2
  100. package/styles/drop-down-list/material3-dark.css +4 -2
  101. package/styles/drop-down-list/material3.css +4 -2
  102. package/styles/drop-down-list/tailwind-dark.css +4 -2
  103. package/styles/drop-down-list/tailwind.css +4 -2
  104. package/styles/drop-down-list/tailwind3.css +4 -2
  105. package/styles/drop-down-tree/bds.css +4 -2
  106. package/styles/drop-down-tree/bootstrap-dark.css +4 -2
  107. package/styles/drop-down-tree/bootstrap.css +4 -2
  108. package/styles/drop-down-tree/bootstrap4.css +4 -2
  109. package/styles/drop-down-tree/bootstrap5-dark.css +4 -2
  110. package/styles/drop-down-tree/bootstrap5.3.css +4 -2
  111. package/styles/drop-down-tree/bootstrap5.css +4 -2
  112. package/styles/drop-down-tree/fabric-dark.css +4 -2
  113. package/styles/drop-down-tree/fabric.css +4 -2
  114. package/styles/drop-down-tree/fluent-dark.css +4 -2
  115. package/styles/drop-down-tree/fluent.css +4 -2
  116. package/styles/drop-down-tree/fluent2.css +4 -2
  117. package/styles/drop-down-tree/highcontrast-light.css +4 -2
  118. package/styles/drop-down-tree/highcontrast.css +4 -2
  119. package/styles/drop-down-tree/material-dark.css +4 -2
  120. package/styles/drop-down-tree/material.css +4 -2
  121. package/styles/drop-down-tree/material3-dark.css +4 -2
  122. package/styles/drop-down-tree/material3.css +4 -2
  123. package/styles/drop-down-tree/tailwind-dark.css +4 -2
  124. package/styles/drop-down-tree/tailwind.css +4 -2
  125. package/styles/drop-down-tree/tailwind3.css +4 -2
  126. package/styles/fabric-dark-lite.css +17 -9
  127. package/styles/fabric-dark.css +27 -14
  128. package/styles/fabric-lite.css +17 -9
  129. package/styles/fabric.css +27 -14
  130. package/styles/fluent-dark-lite.css +17 -9
  131. package/styles/fluent-dark.css +27 -14
  132. package/styles/fluent-lite.css +17 -9
  133. package/styles/fluent.css +27 -14
  134. package/styles/fluent2-lite.css +24 -10
  135. package/styles/fluent2.css +36 -16
  136. package/styles/highcontrast-light-lite.css +17 -9
  137. package/styles/highcontrast-light.css +27 -14
  138. package/styles/highcontrast-lite.css +17 -9
  139. package/styles/highcontrast.css +27 -14
  140. package/styles/list-box/bds.css +4 -2
  141. package/styles/list-box/bootstrap-dark.css +4 -2
  142. package/styles/list-box/bootstrap.css +4 -2
  143. package/styles/list-box/bootstrap4.css +4 -2
  144. package/styles/list-box/bootstrap5-dark.css +4 -2
  145. package/styles/list-box/bootstrap5.3.css +4 -2
  146. package/styles/list-box/bootstrap5.css +4 -2
  147. package/styles/list-box/fabric-dark.css +4 -2
  148. package/styles/list-box/fabric.css +4 -2
  149. package/styles/list-box/fluent-dark.css +4 -2
  150. package/styles/list-box/fluent.css +4 -2
  151. package/styles/list-box/fluent2.css +4 -2
  152. package/styles/list-box/highcontrast-light.css +4 -2
  153. package/styles/list-box/highcontrast.css +4 -2
  154. package/styles/list-box/material-dark.css +4 -2
  155. package/styles/list-box/material.css +4 -2
  156. package/styles/list-box/material3-dark.css +4 -2
  157. package/styles/list-box/material3.css +4 -2
  158. package/styles/list-box/tailwind-dark.css +4 -2
  159. package/styles/list-box/tailwind.css +4 -2
  160. package/styles/list-box/tailwind3.css +4 -2
  161. package/styles/material-dark-lite.css +17 -9
  162. package/styles/material-dark.css +25 -13
  163. package/styles/material-lite.css +17 -9
  164. package/styles/material.css +25 -13
  165. package/styles/material3-dark-lite.css +19 -9
  166. package/styles/material3-dark.css +27 -13
  167. package/styles/material3-lite.css +19 -9
  168. package/styles/material3.css +27 -13
  169. package/styles/mention/bds.css +4 -2
  170. package/styles/mention/bootstrap-dark.css +4 -2
  171. package/styles/mention/bootstrap.css +4 -2
  172. package/styles/mention/bootstrap4.css +4 -2
  173. package/styles/mention/bootstrap5-dark.css +4 -2
  174. package/styles/mention/bootstrap5.3.css +4 -2
  175. package/styles/mention/bootstrap5.css +4 -2
  176. package/styles/mention/fabric-dark.css +4 -2
  177. package/styles/mention/fabric.css +4 -2
  178. package/styles/mention/fluent-dark.css +4 -2
  179. package/styles/mention/fluent.css +4 -2
  180. package/styles/mention/fluent2.css +4 -2
  181. package/styles/mention/highcontrast-light.css +4 -2
  182. package/styles/mention/highcontrast.css +4 -2
  183. package/styles/mention/material-dark.css +4 -2
  184. package/styles/mention/material.css +4 -2
  185. package/styles/mention/material3-dark.css +4 -2
  186. package/styles/mention/material3.css +4 -2
  187. package/styles/mention/tailwind-dark.css +4 -2
  188. package/styles/mention/tailwind.css +4 -2
  189. package/styles/mention/tailwind3.css +4 -2
  190. package/styles/multi-select/bds.css +12 -6
  191. package/styles/multi-select/bootstrap-dark.css +12 -6
  192. package/styles/multi-select/bootstrap.css +12 -6
  193. package/styles/multi-select/bootstrap4.css +12 -6
  194. package/styles/multi-select/bootstrap5-dark.css +12 -6
  195. package/styles/multi-select/bootstrap5.3.css +12 -6
  196. package/styles/multi-select/bootstrap5.css +12 -6
  197. package/styles/multi-select/fabric-dark.css +12 -6
  198. package/styles/multi-select/fabric.css +12 -6
  199. package/styles/multi-select/fluent-dark.css +12 -6
  200. package/styles/multi-select/fluent.css +12 -6
  201. package/styles/multi-select/fluent2.css +12 -6
  202. package/styles/multi-select/highcontrast-light.css +12 -6
  203. package/styles/multi-select/highcontrast.css +12 -6
  204. package/styles/multi-select/material-dark.css +12 -6
  205. package/styles/multi-select/material.css +12 -6
  206. package/styles/multi-select/material3-dark.css +12 -6
  207. package/styles/multi-select/material3.css +12 -6
  208. package/styles/multi-select/tailwind-dark.css +12 -6
  209. package/styles/multi-select/tailwind.css +12 -6
  210. package/styles/multi-select/tailwind3.css +12 -6
  211. package/styles/tailwind-dark-lite.css +17 -9
  212. package/styles/tailwind-dark.css +29 -15
  213. package/styles/tailwind-lite.css +17 -9
  214. package/styles/tailwind.css +29 -15
  215. package/styles/tailwind3-lite.css +19 -9
  216. package/styles/tailwind3.css +27 -13
package/styles/drop-down-base/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,5 +491,6 @@
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
  }
package/styles/drop-down-base/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,9 +864,11 @@
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
  }
package/styles/drop-down-base/highcontrast-light.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 {
@@ -364,7 +370,8 @@
364
370
  }
365
371
 
366
372
  .e-dropdownbase .e-list-item .e-list-icon {
367
- padding: 0 10px 0 0;
373
+ -webkit-padding-end: 10px;
374
+ padding-inline-end: 10px;
368
375
  }
369
376
 
370
377
  .e-dropdownbase .e-list-item:not(.e-active).e-hover {
@@ -384,7 +391,8 @@
384
391
  }
385
392
 
386
393
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
387
- padding: 0 8px 0 0;
394
+ -webkit-padding-end: 8px;
395
+ padding-inline-end: 8px;
388
396
  }
389
397
 
390
398
  .e-bigger .e-dropdownbase,
@@ -459,5 +467,6 @@
459
467
 
460
468
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
461
469
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
462
- padding: 0 12px 0 0;
470
+ -webkit-padding-end: 12px;
471
+ padding-inline-end: 12px;
463
472
  }
package/styles/drop-down-base/highcontrast.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 #fff;
@@ -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: #ffd939;
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 {
@@ -364,7 +370,8 @@
364
370
  }
365
371
 
366
372
  .e-dropdownbase .e-list-item .e-list-icon {
367
- padding: 0 10px 0 0;
373
+ -webkit-padding-end: 10px;
374
+ padding-inline-end: 10px;
368
375
  }
369
376
 
370
377
  .e-dropdownbase .e-list-item:not(.e-active).e-hover {
@@ -384,7 +391,8 @@
384
391
  }
385
392
 
386
393
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
387
- padding: 0 8px 0 0;
394
+ -webkit-padding-end: 8px;
395
+ padding-inline-end: 8px;
388
396
  }
389
397
 
390
398
  .e-bigger .e-dropdownbase,
@@ -459,5 +467,6 @@
459
467
 
460
468
  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
461
469
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
462
- padding: 0 12px 0 0;
470
+ -webkit-padding-end: 12px;
471
+ padding-inline-end: 12px;
463
472
  }
package/styles/drop-down-base/material-dark.css CHANGED
@@ -1,17 +1,21 @@
1
1
  .e-dropdownbase .e-list-item .e-list-icon {
2
- padding: 0 16px 0 0;
2
+ -webkit-padding-end: 16px;
3
+ padding-inline-end: 16px;
3
4
  }
4
5
 
5
6
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
6
- padding: 0 12px 0 0;
7
+ -webkit-padding-end: 12px;
8
+ padding-inline-end: 12px;
7
9
  }
8
10
 
9
11
  .e-dropdownbase .e-list-item .e-list-icon {
10
- padding: 0 16px 0 0;
12
+ -webkit-padding-end: 16px;
13
+ padding-inline-end: 16px;
11
14
  }
12
15
 
13
16
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
14
- padding: 0 12px 0 0;
17
+ -webkit-padding-end: 12px;
18
+ padding-inline-end: 12px;
15
19
  }
16
20
 
17
21
  .e-dropdownbase {
@@ -67,11 +71,11 @@
67
71
 
68
72
  .e-mention.e-popup {
69
73
  background: rgba(0, 0, 0, 0.9);
70
- border: 0;
71
74
  -webkit-box-shadow: 0 2px 3px 1px 0 2px 3px 1px rgba(0, 0, 0, 0.21);
72
75
  box-shadow: 0 2px 3px 1px 0 2px 3px 1px rgba(0, 0, 0, 0.21);
73
76
  margin-top: 2px;
74
77
  position: absolute;
78
+ border: 0;
75
79
  }
76
80
 
77
81
  .e-mention.e-popup .e-dropdownbase {
@@ -137,11 +141,13 @@
137
141
  }
138
142
 
139
143
  .e-dropdownbase .e-list-item .e-list-icon {
140
- padding: 0 16px 0 0;
144
+ -webkit-padding-end: 16px;
145
+ padding-inline-end: 16px;
141
146
  }
142
147
 
143
148
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
144
- padding: 0 12px 0 0;
149
+ -webkit-padding-end: 12px;
150
+ padding-inline-end: 12px;
145
151
  }
146
152
 
147
153
  .e-rtl .e-dropdownbase .e-list-item {
@@ -320,11 +326,13 @@
320
326
  }
321
327
 
322
328
  .e-dropdownbase .e-list-item .e-list-icon {
323
- padding: 0 16px 0 0;
329
+ -webkit-padding-end: 16px;
330
+ padding-inline-end: 16px;
324
331
  }
325
332
 
326
333
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
327
- padding: 0 12px 0 0;
334
+ -webkit-padding-end: 12px;
335
+ padding-inline-end: 12px;
328
336
  }
329
337
 
330
338
  .e-bigger .e-dropdownbase,
package/styles/drop-down-base/material.css CHANGED
@@ -1,17 +1,21 @@
1
1
  .e-dropdownbase .e-list-item .e-list-icon {
2
- padding: 0 16px 0 0;
2
+ -webkit-padding-end: 16px;
3
+ padding-inline-end: 16px;
3
4
  }
4
5
 
5
6
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
6
- padding: 0 12px 0 0;
7
+ -webkit-padding-end: 12px;
8
+ padding-inline-end: 12px;
7
9
  }
8
10
 
9
11
  .e-dropdownbase .e-list-item .e-list-icon {
10
- padding: 0 16px 0 0;
12
+ -webkit-padding-end: 16px;
13
+ padding-inline-end: 16px;
11
14
  }
12
15
 
13
16
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
14
- padding: 0 12px 0 0;
17
+ -webkit-padding-end: 12px;
18
+ padding-inline-end: 12px;
15
19
  }
16
20
 
17
21
  .e-dropdownbase {
@@ -67,11 +71,11 @@
67
71
 
68
72
  .e-mention.e-popup {
69
73
  background: #fff;
70
- border: 0;
71
74
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
72
75
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
73
76
  margin-top: 2px;
74
77
  position: absolute;
78
+ border: 0;
75
79
  }
76
80
 
77
81
  .e-mention.e-popup .e-dropdownbase {
@@ -137,11 +141,13 @@
137
141
  }
138
142
 
139
143
  .e-dropdownbase .e-list-item .e-list-icon {
140
- padding: 0 16px 0 0;
144
+ -webkit-padding-end: 16px;
145
+ padding-inline-end: 16px;
141
146
  }
142
147
 
143
148
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
144
- padding: 0 12px 0 0;
149
+ -webkit-padding-end: 12px;
150
+ padding-inline-end: 12px;
145
151
  }
146
152
 
147
153
  .e-rtl .e-dropdownbase .e-list-item {
@@ -320,11 +326,13 @@
320
326
  }
321
327
 
322
328
  .e-dropdownbase .e-list-item .e-list-icon {
323
- padding: 0 16px 0 0;
329
+ -webkit-padding-end: 16px;
330
+ padding-inline-end: 16px;
324
331
  }
325
332
 
326
333
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
327
- padding: 0 12px 0 0;
334
+ -webkit-padding-end: 12px;
335
+ padding-inline-end: 12px;
328
336
  }
329
337
 
330
338
  .e-bigger .e-dropdownbase,
package/styles/drop-down-base/material3-dark.css CHANGED
@@ -81,11 +81,13 @@
81
81
  /* 15px */
82
82
  /* 16px */
83
83
  .e-dropdownbase .e-list-item .e-list-icon {
84
- padding: 0 16px 0 0;
84
+ -webkit-padding-end: 16px;
85
+ padding-inline-end: 16px;
85
86
  }
86
87
 
87
88
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
88
- padding: 0 12px 0 0;
89
+ -webkit-padding-end: 12px;
90
+ padding-inline-end: 12px;
89
91
  }
90
92
 
91
93
 
@@ -171,11 +173,13 @@
171
173
  /* 15px */
172
174
  /* 16px */
173
175
  .e-dropdownbase .e-list-item .e-list-icon {
174
- padding: 0 16px 0 0;
176
+ -webkit-padding-end: 16px;
177
+ padding-inline-end: 16px;
175
178
  }
176
179
 
177
180
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
178
- padding: 0 12px 0 0;
181
+ -webkit-padding-end: 12px;
182
+ padding-inline-end: 12px;
179
183
  }
180
184
 
181
185
  .e-dropdownbase {
@@ -231,11 +235,13 @@
231
235
 
232
236
  .e-mention.e-popup {
233
237
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
234
- border: 0;
235
238
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
236
239
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
237
240
  margin-top: 2px;
238
241
  position: absolute;
242
+ border: 0;
243
+ border-radius: calc(var(--e-radius) * 0.25);
244
+ padding: 4px 0;
239
245
  }
240
246
 
241
247
  .e-mention.e-popup .e-dropdownbase {
@@ -382,11 +388,13 @@
382
388
  /* 15px */
383
389
  /* 16px */
384
390
  .e-dropdownbase .e-list-item .e-list-icon {
385
- padding: 0 16px 0 0;
391
+ -webkit-padding-end: 16px;
392
+ padding-inline-end: 16px;
386
393
  }
387
394
 
388
395
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
389
- padding: 0 12px 0 0;
396
+ -webkit-padding-end: 12px;
397
+ padding-inline-end: 12px;
390
398
  }
391
399
 
392
400
  .e-rtl .e-dropdownbase .e-list-item {
@@ -652,11 +660,13 @@
652
660
  /* 15px */
653
661
  /* 16px */
654
662
  .e-dropdownbase .e-list-item .e-list-icon {
655
- padding: 0 16px 0 0;
663
+ -webkit-padding-end: 16px;
664
+ padding-inline-end: 16px;
656
665
  }
657
666
 
658
667
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
659
- padding: 0 12px 0 0;
668
+ -webkit-padding-end: 12px;
669
+ padding-inline-end: 12px;
660
670
  }
661
671
 
662
672
  .e-bigger .e-dropdownbase,
package/styles/drop-down-base/material3.css CHANGED
@@ -83,11 +83,13 @@
83
83
 
84
84
 
85
85
  .e-dropdownbase .e-list-item .e-list-icon {
86
- padding: 0 16px 0 0;
86
+ -webkit-padding-end: 16px;
87
+ padding-inline-end: 16px;
87
88
  }
88
89
 
89
90
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
90
- padding: 0 12px 0 0;
91
+ -webkit-padding-end: 12px;
92
+ padding-inline-end: 12px;
91
93
  }
92
94
 
93
95
 
@@ -175,11 +177,13 @@
175
177
 
176
178
 
177
179
  .e-dropdownbase .e-list-item .e-list-icon {
178
- padding: 0 16px 0 0;
180
+ -webkit-padding-end: 16px;
181
+ padding-inline-end: 16px;
179
182
  }
180
183
 
181
184
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
182
- padding: 0 12px 0 0;
185
+ -webkit-padding-end: 12px;
186
+ padding-inline-end: 12px;
183
187
  }
184
188
 
185
189
  .e-dropdownbase {
@@ -235,11 +239,13 @@
235
239
 
236
240
  .e-mention.e-popup {
237
241
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
238
- border: 0;
239
242
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
240
243
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
241
244
  margin-top: 2px;
242
245
  position: absolute;
246
+ border: 0;
247
+ border-radius: calc(var(--e-radius) * 0.25);
248
+ padding: 4px 0;
243
249
  }
244
250
 
245
251
  .e-mention.e-popup .e-dropdownbase {
@@ -388,11 +394,13 @@
388
394
 
389
395
 
390
396
  .e-dropdownbase .e-list-item .e-list-icon {
391
- padding: 0 16px 0 0;
397
+ -webkit-padding-end: 16px;
398
+ padding-inline-end: 16px;
392
399
  }
393
400
 
394
401
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
395
- padding: 0 12px 0 0;
402
+ -webkit-padding-end: 12px;
403
+ padding-inline-end: 12px;
396
404
  }
397
405
 
398
406
  .e-rtl .e-dropdownbase .e-list-item {
@@ -660,11 +668,13 @@
660
668
 
661
669
 
662
670
  .e-dropdownbase .e-list-item .e-list-icon {
663
- padding: 0 16px 0 0;
671
+ -webkit-padding-end: 16px;
672
+ padding-inline-end: 16px;
664
673
  }
665
674
 
666
675
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
667
- padding: 0 12px 0 0;
676
+ -webkit-padding-end: 12px;
677
+ padding-inline-end: 12px;
668
678
  }
669
679
 
670
680
  .e-bigger .e-dropdownbase,