@syncfusion/ej2-dropdowns 25.2.7 → 26.1.35

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 (266) hide show
  1. package/.eslintrc.json +3 -2
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +505 -224
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +498 -216
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +14 -13
  13. package/src/auto-complete/auto-complete.js +1 -1
  14. package/src/combo-box/combo-box.js +15 -0
  15. package/src/common/interface.js +0 -1
  16. package/src/common/virtual-scroll.js +1 -0
  17. package/src/drop-down-base/drop-down-base-model.d.ts +8 -1
  18. package/src/drop-down-base/drop-down-base.d.ts +28 -2
  19. package/src/drop-down-base/drop-down-base.js +64 -9
  20. package/src/drop-down-list/drop-down-list.d.ts +15 -2
  21. package/src/drop-down-list/drop-down-list.js +129 -13
  22. package/src/drop-down-tree/drop-down-tree-model.d.ts +15 -15
  23. package/src/drop-down-tree/drop-down-tree.d.ts +17 -13
  24. package/src/drop-down-tree/drop-down-tree.js +52 -38
  25. package/src/list-box/list-box.js +30 -9
  26. package/src/mention/mention.js +23 -8
  27. package/src/multi-select/interface.js +0 -1
  28. package/src/multi-select/multi-select.d.ts +15 -0
  29. package/src/multi-select/multi-select.js +135 -12
  30. package/styles/auto-complete/_bootstrap5.3-definition.scss +2 -0
  31. package/styles/auto-complete/_fluent2-definition.scss +2 -0
  32. package/styles/auto-complete/bootstrap-dark.css +5 -2
  33. package/styles/auto-complete/bootstrap.css +5 -2
  34. package/styles/auto-complete/bootstrap4.css +6 -2
  35. package/styles/auto-complete/bootstrap5-dark.css +6 -2
  36. package/styles/auto-complete/bootstrap5.css +6 -2
  37. package/styles/auto-complete/fabric-dark.css +3 -1
  38. package/styles/auto-complete/fabric.css +3 -1
  39. package/styles/auto-complete/fluent-dark.css +6 -2
  40. package/styles/auto-complete/fluent.css +6 -2
  41. package/styles/auto-complete/fluent2.css +1140 -0
  42. package/styles/auto-complete/fluent2.scss +4 -0
  43. package/styles/auto-complete/highcontrast-light.css +3 -1
  44. package/styles/auto-complete/highcontrast.css +3 -1
  45. package/styles/auto-complete/material-dark.css +16 -5
  46. package/styles/auto-complete/material.css +16 -5
  47. package/styles/auto-complete/material3-dark.css +17 -6
  48. package/styles/auto-complete/material3.css +17 -6
  49. package/styles/auto-complete/tailwind-dark.css +16 -5
  50. package/styles/auto-complete/tailwind.css +16 -5
  51. package/styles/bootstrap-dark.css +196 -228
  52. package/styles/bootstrap-dark.scss +28 -8
  53. package/styles/bootstrap.css +196 -228
  54. package/styles/bootstrap.scss +28 -8
  55. package/styles/bootstrap4.css +199 -229
  56. package/styles/bootstrap4.scss +28 -8
  57. package/styles/bootstrap5-dark.css +196 -221
  58. package/styles/bootstrap5-dark.scss +28 -8
  59. package/styles/bootstrap5.css +196 -221
  60. package/styles/bootstrap5.scss +28 -8
  61. package/styles/combo-box/_bootstrap5.3-definition.scss +2 -0
  62. package/styles/combo-box/_fluent2-definition.scss +2 -0
  63. package/styles/combo-box/bootstrap-dark.css +5 -2
  64. package/styles/combo-box/bootstrap.css +5 -2
  65. package/styles/combo-box/bootstrap4.css +6 -2
  66. package/styles/combo-box/bootstrap5-dark.css +6 -2
  67. package/styles/combo-box/bootstrap5.css +6 -2
  68. package/styles/combo-box/fabric-dark.css +3 -1
  69. package/styles/combo-box/fabric.css +3 -1
  70. package/styles/combo-box/fluent-dark.css +6 -2
  71. package/styles/combo-box/fluent.css +6 -2
  72. package/styles/combo-box/fluent2.css +1140 -0
  73. package/styles/combo-box/fluent2.scss +4 -0
  74. package/styles/combo-box/highcontrast-light.css +3 -1
  75. package/styles/combo-box/highcontrast.css +3 -1
  76. package/styles/combo-box/material-dark.css +16 -5
  77. package/styles/combo-box/material.css +16 -5
  78. package/styles/combo-box/material3-dark.css +17 -6
  79. package/styles/combo-box/material3.css +17 -6
  80. package/styles/combo-box/tailwind-dark.css +16 -5
  81. package/styles/combo-box/tailwind.css +16 -5
  82. package/styles/drop-down-base/_bds-definition.scss +2 -2
  83. package/styles/drop-down-base/_bootstrap5.3-definition.scss +117 -0
  84. package/styles/drop-down-base/_fluent2-definition.scss +134 -0
  85. package/styles/drop-down-base/_layout.scss +12 -2
  86. package/styles/drop-down-base/_material3-definition.scss +0 -11
  87. package/styles/drop-down-base/_theme.scss +2 -11
  88. package/styles/drop-down-base/bootstrap-dark.css +2 -1
  89. package/styles/drop-down-base/bootstrap.css +2 -1
  90. package/styles/drop-down-base/bootstrap4.css +2 -1
  91. package/styles/drop-down-base/bootstrap5-dark.css +2 -1
  92. package/styles/drop-down-base/bootstrap5.css +2 -1
  93. package/styles/drop-down-base/fabric-dark.css +2 -1
  94. package/styles/drop-down-base/fabric.css +2 -1
  95. package/styles/drop-down-base/fluent-dark.css +2 -1
  96. package/styles/drop-down-base/fluent.css +2 -1
  97. package/styles/drop-down-base/fluent2.css +1447 -0
  98. package/styles/drop-down-base/fluent2.scss +3 -0
  99. package/styles/drop-down-base/highcontrast-light.css +2 -1
  100. package/styles/drop-down-base/highcontrast.css +2 -1
  101. package/styles/drop-down-base/material-dark.css +2 -1
  102. package/styles/drop-down-base/material.css +2 -1
  103. package/styles/drop-down-base/material3-dark.css +9 -2
  104. package/styles/drop-down-base/material3.css +9 -2
  105. package/styles/drop-down-base/tailwind-dark.css +2 -1
  106. package/styles/drop-down-base/tailwind.css +2 -1
  107. package/styles/drop-down-list/_bootstrap5.3-definition.scss +201 -0
  108. package/styles/drop-down-list/_fluent2-definition.scss +134 -0
  109. package/styles/drop-down-list/_layout.scss +5 -3
  110. package/styles/drop-down-list/_material3-definition.scss +0 -8
  111. package/styles/drop-down-list/bootstrap-dark.css +38 -3
  112. package/styles/drop-down-list/bootstrap.css +38 -3
  113. package/styles/drop-down-list/bootstrap4.css +39 -3
  114. package/styles/drop-down-list/bootstrap5-dark.css +39 -3
  115. package/styles/drop-down-list/bootstrap5.css +39 -3
  116. package/styles/drop-down-list/fabric-dark.css +36 -2
  117. package/styles/drop-down-list/fabric.css +36 -2
  118. package/styles/drop-down-list/fluent-dark.css +39 -3
  119. package/styles/drop-down-list/fluent.css +39 -3
  120. package/styles/drop-down-list/fluent2.css +1684 -0
  121. package/styles/drop-down-list/fluent2.scss +9 -0
  122. package/styles/drop-down-list/highcontrast-light.css +36 -2
  123. package/styles/drop-down-list/highcontrast.css +36 -2
  124. package/styles/drop-down-list/icons/_bootstrap5.3.scss +14 -0
  125. package/styles/drop-down-list/icons/_fluent2.scss +14 -0
  126. package/styles/drop-down-list/material-dark.css +58 -7
  127. package/styles/drop-down-list/material.css +72 -9
  128. package/styles/drop-down-list/material3-dark.css +74 -10
  129. package/styles/drop-down-list/material3.css +74 -10
  130. package/styles/drop-down-list/tailwind-dark.css +49 -6
  131. package/styles/drop-down-list/tailwind.css +49 -6
  132. package/styles/drop-down-tree/_bds-definition.scss +5 -0
  133. package/styles/drop-down-tree/_bootstrap4-definition.scss +1 -0
  134. package/styles/drop-down-tree/_bootstrap5-definition.scss +5 -0
  135. package/styles/drop-down-tree/_bootstrap5.3-definition.scss +66 -0
  136. package/styles/drop-down-tree/_fluent-definition.scss +4 -0
  137. package/styles/drop-down-tree/_fluent2-definition.scss +75 -0
  138. package/styles/drop-down-tree/_layout.scss +289 -327
  139. package/styles/drop-down-tree/_material3-definition.scss +3 -5
  140. package/styles/drop-down-tree/_tailwind-definition.scss +7 -2
  141. package/styles/drop-down-tree/_theme.scss +24 -41
  142. package/styles/drop-down-tree/bootstrap-dark.css +63 -29
  143. package/styles/drop-down-tree/bootstrap.css +63 -29
  144. package/styles/drop-down-tree/bootstrap4.css +64 -30
  145. package/styles/drop-down-tree/bootstrap5-dark.css +63 -27
  146. package/styles/drop-down-tree/bootstrap5.css +63 -27
  147. package/styles/drop-down-tree/fabric-dark.css +63 -29
  148. package/styles/drop-down-tree/fabric.css +63 -29
  149. package/styles/drop-down-tree/fluent-dark.css +71 -35
  150. package/styles/drop-down-tree/fluent.css +71 -35
  151. package/styles/drop-down-tree/fluent2.css +1732 -0
  152. package/styles/drop-down-tree/fluent2.scss +9 -0
  153. package/styles/drop-down-tree/highcontrast-light.css +63 -29
  154. package/styles/drop-down-tree/highcontrast.css +63 -23
  155. package/styles/drop-down-tree/icons/_bootstrap5.3.scss +11 -0
  156. package/styles/drop-down-tree/icons/_fluent2.scss +14 -0
  157. package/styles/drop-down-tree/material-dark.css +80 -43
  158. package/styles/drop-down-tree/material.css +97 -51
  159. package/styles/drop-down-tree/material3-dark.css +85 -32
  160. package/styles/drop-down-tree/material3.css +85 -32
  161. package/styles/drop-down-tree/tailwind-dark.css +72 -28
  162. package/styles/drop-down-tree/tailwind.css +72 -28
  163. package/styles/fabric-dark.css +194 -227
  164. package/styles/fabric-dark.scss +28 -8
  165. package/styles/fabric.css +194 -227
  166. package/styles/fabric.scss +28 -8
  167. package/styles/fluent-dark.css +206 -236
  168. package/styles/fluent-dark.scss +28 -8
  169. package/styles/fluent.css +206 -236
  170. package/styles/fluent.scss +28 -8
  171. package/styles/fluent2.css +4771 -0
  172. package/styles/fluent2.scss +28 -0
  173. package/styles/highcontrast-light.css +197 -227
  174. package/styles/highcontrast-light.scss +28 -8
  175. package/styles/highcontrast.css +197 -221
  176. package/styles/highcontrast.scss +28 -8
  177. package/styles/list-box/_bootstrap-dark-definition.scss +0 -2
  178. package/styles/list-box/_bootstrap5.3-definition.scss +120 -0
  179. package/styles/list-box/_fabric-dark-definition.scss +0 -2
  180. package/styles/list-box/_fluent2-definition.scss +121 -0
  181. package/styles/list-box/_highcontrast-light-definition.scss +0 -2
  182. package/styles/list-box/_layout.scss +65 -44
  183. package/styles/list-box/_material-dark-definition.scss +0 -2
  184. package/styles/list-box/_tailwind-definition.scss +1 -1
  185. package/styles/list-box/_theme.scss +36 -65
  186. package/styles/list-box/bootstrap-dark.css +72 -112
  187. package/styles/list-box/bootstrap.css +72 -112
  188. package/styles/list-box/bootstrap4.css +72 -112
  189. package/styles/list-box/bootstrap5-dark.css +72 -106
  190. package/styles/list-box/bootstrap5.css +72 -106
  191. package/styles/list-box/fabric-dark.css +72 -112
  192. package/styles/list-box/fabric.css +72 -112
  193. package/styles/list-box/fluent-dark.css +72 -112
  194. package/styles/list-box/fluent.css +72 -112
  195. package/styles/list-box/fluent2.css +2029 -0
  196. package/styles/list-box/fluent2.scss +5 -0
  197. package/styles/list-box/highcontrast-light.css +72 -112
  198. package/styles/list-box/highcontrast.css +72 -112
  199. package/styles/list-box/icons/_bootstrap5.3.scss +25 -0
  200. package/styles/list-box/icons/_fluent2.scss +25 -0
  201. package/styles/list-box/material-dark.css +72 -112
  202. package/styles/list-box/material.css +72 -112
  203. package/styles/list-box/material3-dark.css +73 -113
  204. package/styles/list-box/material3.css +73 -113
  205. package/styles/list-box/tailwind-dark.css +74 -114
  206. package/styles/list-box/tailwind.css +74 -114
  207. package/styles/material-dark.css +236 -260
  208. package/styles/material-dark.scss +28 -8
  209. package/styles/material.css +253 -284
  210. package/styles/material.scss +28 -8
  211. package/styles/material3-dark.css +253 -266
  212. package/styles/material3-dark.scss +28 -8
  213. package/styles/material3.css +253 -266
  214. package/styles/material3.scss +28 -8
  215. package/styles/mention/_bootstrap5.3-definition.scss +1 -0
  216. package/styles/mention/_fluent2-definition.scss +1 -0
  217. package/styles/mention/bootstrap-dark.css +24 -0
  218. package/styles/mention/bootstrap.css +24 -0
  219. package/styles/mention/bootstrap4.css +24 -0
  220. package/styles/mention/bootstrap5-dark.css +24 -0
  221. package/styles/mention/bootstrap5.css +24 -0
  222. package/styles/mention/fabric-dark.css +24 -0
  223. package/styles/mention/fabric.css +24 -0
  224. package/styles/mention/fluent-dark.css +24 -0
  225. package/styles/mention/fluent.css +24 -0
  226. package/styles/mention/fluent2.css +1130 -0
  227. package/styles/mention/fluent2.scss +6 -0
  228. package/styles/mention/highcontrast-light.css +24 -0
  229. package/styles/mention/highcontrast.css +24 -0
  230. package/styles/mention/material-dark.css +24 -0
  231. package/styles/mention/material.css +24 -0
  232. package/styles/mention/material3-dark.css +25 -1
  233. package/styles/mention/material3.css +25 -1
  234. package/styles/mention/tailwind-dark.css +24 -0
  235. package/styles/mention/tailwind.css +24 -0
  236. package/styles/multi-select/_bootstrap5.3-definition.scss +230 -0
  237. package/styles/multi-select/_fluent2-definition.scss +236 -0
  238. package/styles/multi-select/_layout.scss +32 -38
  239. package/styles/multi-select/_material3-definition.scss +0 -15
  240. package/styles/multi-select/_theme.scss +0 -4
  241. package/styles/multi-select/bootstrap-dark.css +67 -28
  242. package/styles/multi-select/bootstrap.css +67 -28
  243. package/styles/multi-select/bootstrap4.css +70 -29
  244. package/styles/multi-select/bootstrap5-dark.css +67 -28
  245. package/styles/multi-select/bootstrap5.css +67 -28
  246. package/styles/multi-select/fabric-dark.css +67 -28
  247. package/styles/multi-select/fabric.css +67 -28
  248. package/styles/multi-select/fluent-dark.css +69 -29
  249. package/styles/multi-select/fluent.css +69 -29
  250. package/styles/multi-select/fluent2.css +2663 -0
  251. package/styles/multi-select/fluent2.scss +9 -0
  252. package/styles/multi-select/highcontrast-light.css +70 -28
  253. package/styles/multi-select/highcontrast.css +70 -28
  254. package/styles/multi-select/icons/_bootstrap5.3.scss +26 -0
  255. package/styles/multi-select/icons/_fluent2.scss +692 -0
  256. package/styles/multi-select/material-dark.css +88 -32
  257. package/styles/multi-select/material.css +102 -34
  258. package/styles/multi-select/material3-dark.css +109 -35
  259. package/styles/multi-select/material3.css +109 -35
  260. package/styles/multi-select/tailwind-dark.css +67 -28
  261. package/styles/multi-select/tailwind.css +67 -28
  262. package/styles/tailwind-dark.css +217 -233
  263. package/styles/tailwind-dark.scss +28 -8
  264. package/styles/tailwind.css +217 -233
  265. package/styles/tailwind.scss +28 -8
  266. package/CHANGELOG.md +0 -2200
@@ -0,0 +1,9 @@
1
+ @import 'ej2-base/styles/definition/fluent2.scss';
2
+ @import 'ej2-inputs/styles/input/fluent2-definition.scss';
3
+ @import 'ej2-popups/styles/popup/fluent2-definition.scss';
4
+ @import 'ej2-popups/styles/spinner/fluent2-definition.scss';
5
+ @import 'ej2-notifications/styles/skeleton/fluent2-definition.scss';
6
+ @import '../drop-down-base/fluent2-definition.scss';
7
+ @import 'fluent2-definition.scss';
8
+ @import 'icons/fluent2.scss';
9
+ @import 'all.scss';
@@ -1,18 +1,42 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
2
  /* stylelint-disable property-no-vendor-prefix */
3
+ @-webkit-keyframes material-spinner-rotate {
4
+ 0% {
5
+ -webkit-transform: rotate(0);
6
+ transform: rotate(0);
7
+ }
8
+ 100% {
9
+ -webkit-transform: rotate(360deg);
10
+ transform: rotate(360deg);
11
+ }
12
+ }
3
13
  @keyframes material-spinner-rotate {
4
14
  0% {
15
+ -webkit-transform: rotate(0);
5
16
  transform: rotate(0);
6
17
  }
7
18
  100% {
19
+ -webkit-transform: rotate(360deg);
20
+ transform: rotate(360deg);
21
+ }
22
+ }
23
+ @-webkit-keyframes fabric-spinner-rotate {
24
+ 0% {
25
+ -webkit-transform: rotate(0);
26
+ transform: rotate(0);
27
+ }
28
+ 100% {
29
+ -webkit-transform: rotate(360deg);
8
30
  transform: rotate(360deg);
9
31
  }
10
32
  }
11
33
  @keyframes fabric-spinner-rotate {
12
34
  0% {
35
+ -webkit-transform: rotate(0);
13
36
  transform: rotate(0);
14
37
  }
15
38
  100% {
39
+ -webkit-transform: rotate(360deg);
16
40
  transform: rotate(360deg);
17
41
  }
18
42
  }
@@ -53,7 +77,8 @@
53
77
 
54
78
  .e-ddl.e-popup {
55
79
  border: 0;
56
- box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
80
+ -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
81
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
57
82
  margin-top: 1px;
58
83
  }
59
84
  .e-ddl.e-popup .e-content.e-nodata {
@@ -63,6 +88,7 @@
63
88
  color: #23726c;
64
89
  }
65
90
  .e-ddl.e-popup .e-input-group {
91
+ display: -webkit-box;
66
92
  display: -ms-flexbox;
67
93
  display: flex;
68
94
  width: auto;
@@ -201,7 +227,8 @@
201
227
  .e-filter-parent {
202
228
  border: 1px solid #000;
203
229
  border-top-width: 0;
204
- box-shadow: none;
230
+ -webkit-box-shadow: none;
231
+ box-shadow: none;
205
232
  display: block;
206
233
  padding: 5px;
207
234
  }
@@ -276,6 +303,7 @@
276
303
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
277
304
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
278
305
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon {
306
+ display: -webkit-box;
279
307
  display: -ms-flexbox;
280
308
  display: flex;
281
309
  }
@@ -297,6 +325,7 @@
297
325
  .e-float-input.e-static-clear.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
298
326
  .e-float-input.e-static-clear.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
299
327
  cursor: pointer;
328
+ display: -webkit-box;
300
329
  display: -ms-flexbox;
301
330
  display: flex;
302
331
  }
@@ -316,6 +345,11 @@
316
345
  pointer-events: none;
317
346
  }
318
347
 
348
+ .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
349
+ opacity: 0.7;
350
+ pointer-events: none;
351
+ }
352
+
319
353
  ejs-autocomplete,
320
354
  ejs-combobox,
321
355
  ejs-dropdownlist {
@@ -1,18 +1,42 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
2
  /* stylelint-disable property-no-vendor-prefix */
3
+ @-webkit-keyframes material-spinner-rotate {
4
+ 0% {
5
+ -webkit-transform: rotate(0);
6
+ transform: rotate(0);
7
+ }
8
+ 100% {
9
+ -webkit-transform: rotate(360deg);
10
+ transform: rotate(360deg);
11
+ }
12
+ }
3
13
  @keyframes material-spinner-rotate {
4
14
  0% {
15
+ -webkit-transform: rotate(0);
5
16
  transform: rotate(0);
6
17
  }
7
18
  100% {
19
+ -webkit-transform: rotate(360deg);
20
+ transform: rotate(360deg);
21
+ }
22
+ }
23
+ @-webkit-keyframes fabric-spinner-rotate {
24
+ 0% {
25
+ -webkit-transform: rotate(0);
26
+ transform: rotate(0);
27
+ }
28
+ 100% {
29
+ -webkit-transform: rotate(360deg);
8
30
  transform: rotate(360deg);
9
31
  }
10
32
  }
11
33
  @keyframes fabric-spinner-rotate {
12
34
  0% {
35
+ -webkit-transform: rotate(0);
13
36
  transform: rotate(0);
14
37
  }
15
38
  100% {
39
+ -webkit-transform: rotate(360deg);
16
40
  transform: rotate(360deg);
17
41
  }
18
42
  }
@@ -53,7 +77,8 @@
53
77
 
54
78
  .e-ddl.e-popup {
55
79
  border: 0;
56
- box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
80
+ -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
81
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
57
82
  margin-top: 1px;
58
83
  }
59
84
  .e-ddl.e-popup .e-content.e-nodata {
@@ -63,6 +88,7 @@
63
88
  color: #ffd939;
64
89
  }
65
90
  .e-ddl.e-popup .e-input-group {
91
+ display: -webkit-box;
66
92
  display: -ms-flexbox;
67
93
  display: flex;
68
94
  width: auto;
@@ -201,7 +227,8 @@
201
227
  .e-filter-parent {
202
228
  border: 1px solid #fff;
203
229
  border-top-width: 0;
204
- box-shadow: none;
230
+ -webkit-box-shadow: none;
231
+ box-shadow: none;
205
232
  display: block;
206
233
  padding: 5px;
207
234
  }
@@ -276,6 +303,7 @@
276
303
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
277
304
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
278
305
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon {
306
+ display: -webkit-box;
279
307
  display: -ms-flexbox;
280
308
  display: flex;
281
309
  }
@@ -297,6 +325,7 @@
297
325
  .e-float-input.e-static-clear.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
298
326
  .e-float-input.e-static-clear.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
299
327
  cursor: pointer;
328
+ display: -webkit-box;
300
329
  display: -ms-flexbox;
301
330
  display: flex;
302
331
  }
@@ -316,6 +345,11 @@
316
345
  pointer-events: none;
317
346
  }
318
347
 
348
+ .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
349
+ opacity: 0.7;
350
+ pointer-events: none;
351
+ }
352
+
319
353
  ejs-autocomplete,
320
354
  ejs-combobox,
321
355
  ejs-dropdownlist {
@@ -0,0 +1,14 @@
1
+ @include export-module('dropdownlist-bootstrap5-icons') {
2
+ .e-ddl .e-search-icon::before {
3
+ content: '\e754';
4
+ }
5
+
6
+ .e-ddl .e-back-icon::before {
7
+ content: '\e773';
8
+ }
9
+
10
+ .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
11
+ content: '\e729';
12
+ font-family: 'e-icons';
13
+ }
14
+ }
@@ -0,0 +1,14 @@
1
+ @include export-module('dropdownlist-fluent2-icons') {
2
+ .e-ddl .e-search-icon::before {
3
+ content: '\e754';
4
+ }
5
+
6
+ .e-ddl .e-back-icon::before {
7
+ content: '\e773';
8
+ }
9
+
10
+ .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
11
+ content: '\e729';
12
+ font-family: 'e-icons';
13
+ }
14
+ }
@@ -1,24 +1,56 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
+ @-webkit-keyframes e-input-ripple {
3
+ 100% {
4
+ opacity: 0;
5
+ -webkit-transform: scale(4);
6
+ transform: scale(4);
7
+ }
8
+ }
2
9
  @keyframes e-input-ripple {
3
10
  100% {
4
11
  opacity: 0;
5
- transform: scale(4);
12
+ -webkit-transform: scale(4);
13
+ transform: scale(4);
6
14
  }
7
15
  }
8
16
  /* stylelint-disable property-no-vendor-prefix */
17
+ @-webkit-keyframes material-spinner-rotate {
18
+ 0% {
19
+ -webkit-transform: rotate(0deg);
20
+ transform: rotate(0deg);
21
+ }
22
+ 100% {
23
+ -webkit-transform: rotate(360deg);
24
+ transform: rotate(360deg);
25
+ }
26
+ }
9
27
  @keyframes material-spinner-rotate {
10
28
  0% {
29
+ -webkit-transform: rotate(0deg);
11
30
  transform: rotate(0deg);
12
31
  }
13
32
  100% {
33
+ -webkit-transform: rotate(360deg);
34
+ transform: rotate(360deg);
35
+ }
36
+ }
37
+ @-webkit-keyframes fabric-spinner-rotate {
38
+ 0% {
39
+ -webkit-transform: rotate(0deg);
40
+ transform: rotate(0deg);
41
+ }
42
+ 100% {
43
+ -webkit-transform: rotate(360deg);
14
44
  transform: rotate(360deg);
15
45
  }
16
46
  }
17
47
  @keyframes fabric-spinner-rotate {
18
48
  0% {
49
+ -webkit-transform: rotate(0deg);
19
50
  transform: rotate(0deg);
20
51
  }
21
52
  100% {
53
+ -webkit-transform: rotate(360deg);
22
54
  transform: rotate(360deg);
23
55
  }
24
56
  }
@@ -35,8 +67,12 @@
35
67
  }
36
68
 
37
69
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
38
- transform: rotate(0deg);
70
+ -webkit-transform: rotate(0deg);
71
+ transform: rotate(0deg);
72
+ -webkit-transition: -webkit-transform 300ms ease;
73
+ transition: -webkit-transform 300ms ease;
39
74
  transition: transform 300ms ease;
75
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
40
76
  }
41
77
 
42
78
  .e-popup.e-ddl .e-dropdownbase {
@@ -44,8 +80,12 @@
44
80
  }
45
81
 
46
82
  .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
47
- transform: rotate(180deg);
83
+ -webkit-transform: rotate(180deg);
84
+ transform: rotate(180deg);
85
+ -webkit-transition: -webkit-transform 300ms ease;
86
+ transition: -webkit-transform 300ms ease;
48
87
  transition: transform 300ms ease;
88
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
49
89
  }
50
90
 
51
91
  .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -62,12 +102,14 @@
62
102
  }
63
103
 
64
104
  .e-input-group .e-ddl-icon:not(:active)::after {
65
- animation: none;
105
+ -webkit-animation: none;
106
+ animation: none;
66
107
  }
67
108
 
68
109
  .e-ddl.e-popup {
69
110
  border: 0;
70
- box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
111
+ -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
112
+ box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
71
113
  margin-top: 2px;
72
114
  }
73
115
 
@@ -83,7 +125,8 @@
83
125
  .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
84
126
  background: #f5f5f5;
85
127
  border-width: 0;
86
- box-shadow: none;
128
+ -webkit-box-shadow: none;
129
+ box-shadow: none;
87
130
  margin-bottom: 0;
88
131
  }
89
132
 
@@ -220,7 +263,8 @@
220
263
  .e-filter-parent {
221
264
  border: 0;
222
265
  border-top-width: 0;
223
- box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
266
+ -webkit-box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
267
+ box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
224
268
  display: block;
225
269
  padding: 0;
226
270
  }
@@ -295,6 +339,7 @@
295
339
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
296
340
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
297
341
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon {
342
+ display: -webkit-box;
298
343
  display: -ms-flexbox;
299
344
  display: flex;
300
345
  }
@@ -316,6 +361,7 @@
316
361
  .e-float-input.e-static-clear.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
317
362
  .e-float-input.e-static-clear.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
318
363
  cursor: pointer;
364
+ display: -webkit-box;
319
365
  display: -ms-flexbox;
320
366
  display: flex;
321
367
  }
@@ -335,6 +381,11 @@
335
381
  pointer-events: none;
336
382
  }
337
383
 
384
+ .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
385
+ opacity: 0.7;
386
+ pointer-events: none;
387
+ }
388
+
338
389
  ejs-autocomplete,
339
390
  ejs-combobox,
340
391
  ejs-dropdownlist {
@@ -1,32 +1,76 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
+ @-webkit-keyframes e-input-ripple {
3
+ 100% {
4
+ opacity: 0;
5
+ -webkit-transform: scale(4);
6
+ transform: scale(4);
7
+ }
8
+ }
2
9
  @keyframes e-input-ripple {
3
10
  100% {
4
11
  opacity: 0;
5
- transform: scale(4);
12
+ -webkit-transform: scale(4);
13
+ transform: scale(4);
14
+ }
15
+ }
16
+ @-webkit-keyframes slideTopUp {
17
+ from {
18
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
19
+ transform: translate3d(0, 0, 0) scale(1);
20
+ }
21
+ to {
22
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
23
+ transform: translate3d(0, 0, 0) scale(1);
6
24
  }
7
25
  }
8
26
  @keyframes slideTopUp {
9
27
  from {
10
- transform: translate3d(0, 0, 0) scale(1);
28
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
29
+ transform: translate3d(0, 0, 0) scale(1);
11
30
  }
12
31
  to {
13
- transform: translate3d(0, 0, 0) scale(1);
32
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
33
+ transform: translate3d(0, 0, 0) scale(1);
14
34
  }
15
35
  }
16
36
  /* stylelint-disable property-no-vendor-prefix */
37
+ @-webkit-keyframes material-spinner-rotate {
38
+ 0% {
39
+ -webkit-transform: rotate(0deg);
40
+ transform: rotate(0deg);
41
+ }
42
+ 100% {
43
+ -webkit-transform: rotate(360deg);
44
+ transform: rotate(360deg);
45
+ }
46
+ }
17
47
  @keyframes material-spinner-rotate {
18
48
  0% {
49
+ -webkit-transform: rotate(0deg);
19
50
  transform: rotate(0deg);
20
51
  }
21
52
  100% {
53
+ -webkit-transform: rotate(360deg);
54
+ transform: rotate(360deg);
55
+ }
56
+ }
57
+ @-webkit-keyframes fabric-spinner-rotate {
58
+ 0% {
59
+ -webkit-transform: rotate(0deg);
60
+ transform: rotate(0deg);
61
+ }
62
+ 100% {
63
+ -webkit-transform: rotate(360deg);
22
64
  transform: rotate(360deg);
23
65
  }
24
66
  }
25
67
  @keyframes fabric-spinner-rotate {
26
68
  0% {
69
+ -webkit-transform: rotate(0deg);
27
70
  transform: rotate(0deg);
28
71
  }
29
72
  100% {
73
+ -webkit-transform: rotate(360deg);
30
74
  transform: rotate(360deg);
31
75
  }
32
76
  }
@@ -43,13 +87,21 @@
43
87
  }
44
88
 
45
89
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
46
- transform: rotate(0deg);
90
+ -webkit-transform: rotate(0deg);
91
+ transform: rotate(0deg);
92
+ -webkit-transition: -webkit-transform 300ms ease;
93
+ transition: -webkit-transform 300ms ease;
47
94
  transition: transform 300ms ease;
95
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
48
96
  }
49
97
 
50
98
  .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
51
- transform: rotate(180deg);
99
+ -webkit-transform: rotate(180deg);
100
+ transform: rotate(180deg);
101
+ -webkit-transition: -webkit-transform 300ms ease;
102
+ transition: -webkit-transform 300ms ease;
52
103
  transition: transform 300ms ease;
104
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
53
105
  }
54
106
 
55
107
  .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -66,12 +118,14 @@
66
118
  }
67
119
 
68
120
  .e-input-group .e-ddl-icon:not(:active)::after {
69
- animation: none;
121
+ -webkit-animation: none;
122
+ animation: none;
70
123
  }
71
124
 
72
125
  .e-ddl.e-popup {
73
126
  border: 0;
74
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
127
+ -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
128
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
75
129
  margin-top: 2px;
76
130
  }
77
131
 
@@ -91,7 +145,8 @@
91
145
  .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
92
146
  background: #f5f5f5;
93
147
  border-width: 0;
94
- box-shadow: none;
148
+ -webkit-box-shadow: none;
149
+ box-shadow: none;
95
150
  margin-bottom: 0;
96
151
  }
97
152
 
@@ -253,7 +308,8 @@
253
308
  .e-filter-parent {
254
309
  border: 0;
255
310
  border-top-width: 0;
256
- box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
311
+ -webkit-box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
312
+ box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
257
313
  display: block;
258
314
  padding: 0;
259
315
  }
@@ -327,6 +383,7 @@
327
383
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
328
384
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
329
385
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon {
386
+ display: -webkit-box;
330
387
  display: -ms-flexbox;
331
388
  display: flex;
332
389
  }
@@ -348,6 +405,7 @@
348
405
  .e-float-input.e-static-clear.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
349
406
  .e-float-input.e-static-clear.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
350
407
  cursor: pointer;
408
+ display: -webkit-box;
351
409
  display: -ms-flexbox;
352
410
  display: flex;
353
411
  }
@@ -367,6 +425,11 @@
367
425
  pointer-events: none;
368
426
  }
369
427
 
428
+ .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
429
+ opacity: 0.7;
430
+ pointer-events: none;
431
+ }
432
+
370
433
  ejs-autocomplete,
371
434
  ejs-combobox,
372
435
  ejs-dropdownlist {