@syncfusion/ej2-dropdowns 25.2.7-130084 → 26.1.35-7502

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 (290) hide show
  1. package/.eslintrc.json +3 -2
  2. package/{ReadMe.md → README.md} +1 -1
  3. package/dist/ej2-dropdowns.min.js +10 -1
  4. package/dist/ej2-dropdowns.umd.min.js +10 -1
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +505 -215
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +498 -207
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +10 -1
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/global/index.d.ts +9 -0
  13. package/package.json +80 -79
  14. package/src/auto-complete/auto-complete-model.d.ts +10 -10
  15. package/src/auto-complete/auto-complete.d.ts +12 -12
  16. package/src/auto-complete/auto-complete.js +3 -3
  17. package/src/combo-box/combo-box-model.d.ts +17 -17
  18. package/src/combo-box/combo-box.d.ts +27 -27
  19. package/src/combo-box/combo-box.js +25 -10
  20. package/src/common/interface.js +0 -1
  21. package/src/common/virtual-scroll.js +1 -0
  22. package/src/drop-down-base/drop-down-base-model.d.ts +21 -14
  23. package/src/drop-down-base/drop-down-base.d.ts +43 -17
  24. package/src/drop-down-base/drop-down-base.js +65 -10
  25. package/src/drop-down-list/drop-down-list-model.d.ts +3 -3
  26. package/src/drop-down-list/drop-down-list.d.ts +19 -5
  27. package/src/drop-down-list/drop-down-list.js +130 -5
  28. package/src/drop-down-tree/drop-down-tree-model.d.ts +16 -16
  29. package/src/drop-down-tree/drop-down-tree.d.ts +18 -14
  30. package/src/drop-down-tree/drop-down-tree.js +52 -38
  31. package/src/list-box/list-box-model.d.ts +2 -2
  32. package/src/list-box/list-box.d.ts +2 -2
  33. package/src/list-box/list-box.js +30 -9
  34. package/src/mention/mention.js +23 -8
  35. package/src/multi-select/interface.js +0 -1
  36. package/src/multi-select/multi-select.d.ts +15 -0
  37. package/src/multi-select/multi-select.js +135 -12
  38. package/styles/auto-complete/_bootstrap5.3-definition.scss +2 -0
  39. package/styles/auto-complete/_fluent2-definition.scss +2 -0
  40. package/styles/auto-complete/bootstrap-dark.css +5 -2
  41. package/styles/auto-complete/bootstrap.css +5 -2
  42. package/styles/auto-complete/bootstrap4.css +6 -2
  43. package/styles/auto-complete/bootstrap5-dark.css +6 -2
  44. package/styles/auto-complete/bootstrap5.css +6 -2
  45. package/styles/auto-complete/fabric-dark.css +3 -1
  46. package/styles/auto-complete/fabric.css +3 -1
  47. package/styles/auto-complete/fluent-dark.css +6 -2
  48. package/styles/auto-complete/fluent.css +6 -2
  49. package/styles/auto-complete/fluent2.css +1140 -0
  50. package/styles/auto-complete/fluent2.scss +4 -0
  51. package/styles/auto-complete/highcontrast-light.css +3 -1
  52. package/styles/auto-complete/highcontrast.css +3 -1
  53. package/styles/auto-complete/material-dark.css +16 -5
  54. package/styles/auto-complete/material.css +16 -5
  55. package/styles/auto-complete/material3-dark.css +17 -6
  56. package/styles/auto-complete/material3-dark.scss +1 -1
  57. package/styles/auto-complete/material3.css +17 -6
  58. package/styles/auto-complete/material3.scss +1 -1
  59. package/styles/auto-complete/tailwind-dark.css +16 -5
  60. package/styles/auto-complete/tailwind.css +16 -5
  61. package/styles/bootstrap-dark.css +196 -228
  62. package/styles/bootstrap-dark.scss +28 -8
  63. package/styles/bootstrap.css +196 -228
  64. package/styles/bootstrap.scss +28 -8
  65. package/styles/bootstrap4.css +199 -229
  66. package/styles/bootstrap4.scss +28 -8
  67. package/styles/bootstrap5-dark.css +196 -221
  68. package/styles/bootstrap5-dark.scss +28 -8
  69. package/styles/bootstrap5.css +196 -221
  70. package/styles/bootstrap5.scss +28 -8
  71. package/styles/combo-box/_bootstrap5.3-definition.scss +2 -0
  72. package/styles/combo-box/_fluent2-definition.scss +2 -0
  73. package/styles/combo-box/bootstrap-dark.css +5 -2
  74. package/styles/combo-box/bootstrap.css +5 -2
  75. package/styles/combo-box/bootstrap4.css +6 -2
  76. package/styles/combo-box/bootstrap5-dark.css +6 -2
  77. package/styles/combo-box/bootstrap5.css +6 -2
  78. package/styles/combo-box/fabric-dark.css +3 -1
  79. package/styles/combo-box/fabric.css +3 -1
  80. package/styles/combo-box/fluent-dark.css +6 -2
  81. package/styles/combo-box/fluent.css +6 -2
  82. package/styles/combo-box/fluent2.css +1140 -0
  83. package/styles/combo-box/fluent2.scss +4 -0
  84. package/styles/combo-box/highcontrast-light.css +3 -1
  85. package/styles/combo-box/highcontrast.css +3 -1
  86. package/styles/combo-box/material-dark.css +16 -5
  87. package/styles/combo-box/material.css +16 -5
  88. package/styles/combo-box/material3-dark.css +17 -6
  89. package/styles/combo-box/material3-dark.scss +1 -1
  90. package/styles/combo-box/material3.css +17 -6
  91. package/styles/combo-box/material3.scss +1 -1
  92. package/styles/combo-box/tailwind-dark.css +16 -5
  93. package/styles/combo-box/tailwind.css +16 -5
  94. package/styles/drop-down-base/_bds-definition.scss +2 -2
  95. package/styles/drop-down-base/_bootstrap5.3-definition.scss +117 -0
  96. package/styles/drop-down-base/_fluent2-definition.scss +134 -0
  97. package/styles/drop-down-base/_layout.scss +12 -2
  98. package/styles/drop-down-base/_material3-definition.scss +0 -11
  99. package/styles/drop-down-base/_theme.scss +2 -11
  100. package/styles/drop-down-base/bootstrap-dark.css +2 -1
  101. package/styles/drop-down-base/bootstrap.css +2 -1
  102. package/styles/drop-down-base/bootstrap4.css +2 -1
  103. package/styles/drop-down-base/bootstrap5-dark.css +2 -1
  104. package/styles/drop-down-base/bootstrap5.css +2 -1
  105. package/styles/drop-down-base/fabric-dark.css +2 -1
  106. package/styles/drop-down-base/fabric.css +2 -1
  107. package/styles/drop-down-base/fluent-dark.css +2 -1
  108. package/styles/drop-down-base/fluent.css +2 -1
  109. package/styles/drop-down-base/fluent2.css +1447 -0
  110. package/styles/drop-down-base/fluent2.scss +3 -0
  111. package/styles/drop-down-base/highcontrast-light.css +2 -1
  112. package/styles/drop-down-base/highcontrast.css +2 -1
  113. package/styles/drop-down-base/material-dark.css +2 -1
  114. package/styles/drop-down-base/material.css +2 -1
  115. package/styles/drop-down-base/material3-dark.css +9 -2
  116. package/styles/drop-down-base/material3-dark.scss +1 -1
  117. package/styles/drop-down-base/material3.css +9 -2
  118. package/styles/drop-down-base/material3.scss +1 -1
  119. package/styles/drop-down-base/tailwind-dark.css +2 -1
  120. package/styles/drop-down-base/tailwind.css +2 -1
  121. package/styles/drop-down-list/_bootstrap5.3-definition.scss +201 -0
  122. package/styles/drop-down-list/_fluent2-definition.scss +134 -0
  123. package/styles/drop-down-list/_layout.scss +5 -3
  124. package/styles/drop-down-list/_material3-definition.scss +0 -8
  125. package/styles/drop-down-list/bootstrap-dark.css +38 -3
  126. package/styles/drop-down-list/bootstrap.css +38 -3
  127. package/styles/drop-down-list/bootstrap4.css +39 -3
  128. package/styles/drop-down-list/bootstrap5-dark.css +39 -3
  129. package/styles/drop-down-list/bootstrap5.css +39 -3
  130. package/styles/drop-down-list/fabric-dark.css +36 -2
  131. package/styles/drop-down-list/fabric.css +36 -2
  132. package/styles/drop-down-list/fluent-dark.css +39 -3
  133. package/styles/drop-down-list/fluent.css +39 -3
  134. package/styles/drop-down-list/fluent2.css +1684 -0
  135. package/styles/drop-down-list/fluent2.scss +9 -0
  136. package/styles/drop-down-list/highcontrast-light.css +36 -2
  137. package/styles/drop-down-list/highcontrast.css +36 -2
  138. package/styles/drop-down-list/icons/_bootstrap5.3.scss +14 -0
  139. package/styles/drop-down-list/icons/_fluent2.scss +14 -0
  140. package/styles/drop-down-list/material-dark.css +58 -7
  141. package/styles/drop-down-list/material.css +72 -9
  142. package/styles/drop-down-list/material3-dark.css +74 -10
  143. package/styles/drop-down-list/material3-dark.scss +1 -1
  144. package/styles/drop-down-list/material3.css +74 -10
  145. package/styles/drop-down-list/material3.scss +1 -1
  146. package/styles/drop-down-list/tailwind-dark.css +49 -6
  147. package/styles/drop-down-list/tailwind.css +49 -6
  148. package/styles/drop-down-tree/_bds-definition.scss +5 -0
  149. package/styles/drop-down-tree/_bootstrap4-definition.scss +1 -0
  150. package/styles/drop-down-tree/_bootstrap5-definition.scss +5 -0
  151. package/styles/drop-down-tree/_bootstrap5.3-definition.scss +66 -0
  152. package/styles/drop-down-tree/_fluent-definition.scss +4 -0
  153. package/styles/drop-down-tree/_fluent2-definition.scss +75 -0
  154. package/styles/drop-down-tree/_layout.scss +289 -327
  155. package/styles/drop-down-tree/_material3-definition.scss +3 -5
  156. package/styles/drop-down-tree/_tailwind-definition.scss +7 -2
  157. package/styles/drop-down-tree/_theme.scss +24 -41
  158. package/styles/drop-down-tree/bootstrap-dark.css +63 -29
  159. package/styles/drop-down-tree/bootstrap.css +63 -29
  160. package/styles/drop-down-tree/bootstrap4.css +64 -30
  161. package/styles/drop-down-tree/bootstrap5-dark.css +63 -27
  162. package/styles/drop-down-tree/bootstrap5.css +63 -27
  163. package/styles/drop-down-tree/fabric-dark.css +63 -29
  164. package/styles/drop-down-tree/fabric.css +63 -29
  165. package/styles/drop-down-tree/fluent-dark.css +71 -35
  166. package/styles/drop-down-tree/fluent.css +71 -35
  167. package/styles/drop-down-tree/fluent2.css +1732 -0
  168. package/styles/drop-down-tree/fluent2.scss +9 -0
  169. package/styles/drop-down-tree/highcontrast-light.css +63 -29
  170. package/styles/drop-down-tree/highcontrast.css +63 -23
  171. package/styles/drop-down-tree/icons/_bootstrap5.3.scss +11 -0
  172. package/styles/drop-down-tree/icons/_fluent2.scss +14 -0
  173. package/styles/drop-down-tree/material-dark.css +80 -43
  174. package/styles/drop-down-tree/material.css +97 -51
  175. package/styles/drop-down-tree/material3-dark.css +85 -32
  176. package/styles/drop-down-tree/material3-dark.scss +1 -1
  177. package/styles/drop-down-tree/material3.css +85 -32
  178. package/styles/drop-down-tree/material3.scss +1 -1
  179. package/styles/drop-down-tree/tailwind-dark.css +72 -28
  180. package/styles/drop-down-tree/tailwind.css +72 -28
  181. package/styles/fabric-dark.css +194 -227
  182. package/styles/fabric-dark.scss +28 -8
  183. package/styles/fabric.css +194 -227
  184. package/styles/fabric.scss +28 -8
  185. package/styles/fluent-dark.css +206 -236
  186. package/styles/fluent-dark.scss +28 -8
  187. package/styles/fluent.css +206 -236
  188. package/styles/fluent.scss +28 -8
  189. package/styles/fluent2.css +4771 -0
  190. package/styles/fluent2.scss +28 -0
  191. package/styles/highcontrast-light.css +197 -227
  192. package/styles/highcontrast-light.scss +28 -8
  193. package/styles/highcontrast.css +197 -221
  194. package/styles/highcontrast.scss +28 -8
  195. package/styles/list-box/_bootstrap-dark-definition.scss +0 -2
  196. package/styles/list-box/_bootstrap5.3-definition.scss +120 -0
  197. package/styles/list-box/_fabric-dark-definition.scss +0 -2
  198. package/styles/list-box/_fluent2-definition.scss +121 -0
  199. package/styles/list-box/_highcontrast-light-definition.scss +0 -2
  200. package/styles/list-box/_layout.scss +65 -44
  201. package/styles/list-box/_material-dark-definition.scss +0 -2
  202. package/styles/list-box/_tailwind-definition.scss +1 -1
  203. package/styles/list-box/_theme.scss +36 -65
  204. package/styles/list-box/bootstrap-dark.css +72 -112
  205. package/styles/list-box/bootstrap.css +72 -112
  206. package/styles/list-box/bootstrap4.css +72 -112
  207. package/styles/list-box/bootstrap5-dark.css +72 -106
  208. package/styles/list-box/bootstrap5.css +72 -106
  209. package/styles/list-box/fabric-dark.css +72 -112
  210. package/styles/list-box/fabric.css +72 -112
  211. package/styles/list-box/fluent-dark.css +72 -112
  212. package/styles/list-box/fluent.css +72 -112
  213. package/styles/list-box/fluent2.css +2029 -0
  214. package/styles/list-box/fluent2.scss +5 -0
  215. package/styles/list-box/highcontrast-light.css +72 -112
  216. package/styles/list-box/highcontrast.css +72 -112
  217. package/styles/list-box/icons/_bootstrap5.3.scss +25 -0
  218. package/styles/list-box/icons/_fluent2.scss +25 -0
  219. package/styles/list-box/material-dark.css +72 -112
  220. package/styles/list-box/material.css +72 -112
  221. package/styles/list-box/material3-dark.css +73 -113
  222. package/styles/list-box/material3-dark.scss +1 -1
  223. package/styles/list-box/material3.css +73 -113
  224. package/styles/list-box/material3.scss +1 -1
  225. package/styles/list-box/tailwind-dark.css +74 -114
  226. package/styles/list-box/tailwind.css +74 -114
  227. package/styles/material-dark.css +236 -260
  228. package/styles/material-dark.scss +28 -8
  229. package/styles/material.css +253 -284
  230. package/styles/material.scss +28 -8
  231. package/styles/material3-dark.css +253 -266
  232. package/styles/material3-dark.scss +29 -9
  233. package/styles/material3.css +253 -266
  234. package/styles/material3.scss +29 -9
  235. package/styles/mention/_bootstrap5.3-definition.scss +1 -0
  236. package/styles/mention/_fluent2-definition.scss +1 -0
  237. package/styles/mention/bootstrap-dark.css +24 -0
  238. package/styles/mention/bootstrap.css +24 -0
  239. package/styles/mention/bootstrap4.css +24 -0
  240. package/styles/mention/bootstrap5-dark.css +24 -0
  241. package/styles/mention/bootstrap5.css +24 -0
  242. package/styles/mention/fabric-dark.css +24 -0
  243. package/styles/mention/fabric.css +24 -0
  244. package/styles/mention/fluent-dark.css +24 -0
  245. package/styles/mention/fluent.css +24 -0
  246. package/styles/mention/fluent2.css +1130 -0
  247. package/styles/mention/fluent2.scss +6 -0
  248. package/styles/mention/highcontrast-light.css +24 -0
  249. package/styles/mention/highcontrast.css +24 -0
  250. package/styles/mention/material-dark.css +24 -0
  251. package/styles/mention/material.css +24 -0
  252. package/styles/mention/material3-dark.css +25 -1
  253. package/styles/mention/material3-dark.scss +1 -1
  254. package/styles/mention/material3.css +25 -1
  255. package/styles/mention/material3.scss +1 -1
  256. package/styles/mention/tailwind-dark.css +24 -0
  257. package/styles/mention/tailwind.css +24 -0
  258. package/styles/multi-select/_bootstrap5.3-definition.scss +230 -0
  259. package/styles/multi-select/_fluent2-definition.scss +236 -0
  260. package/styles/multi-select/_layout.scss +32 -38
  261. package/styles/multi-select/_material3-definition.scss +0 -15
  262. package/styles/multi-select/_theme.scss +0 -4
  263. package/styles/multi-select/bootstrap-dark.css +67 -28
  264. package/styles/multi-select/bootstrap.css +67 -28
  265. package/styles/multi-select/bootstrap4.css +70 -29
  266. package/styles/multi-select/bootstrap5-dark.css +67 -28
  267. package/styles/multi-select/bootstrap5.css +67 -28
  268. package/styles/multi-select/fabric-dark.css +67 -28
  269. package/styles/multi-select/fabric.css +67 -28
  270. package/styles/multi-select/fluent-dark.css +69 -29
  271. package/styles/multi-select/fluent.css +69 -29
  272. package/styles/multi-select/fluent2.css +2663 -0
  273. package/styles/multi-select/fluent2.scss +9 -0
  274. package/styles/multi-select/highcontrast-light.css +70 -28
  275. package/styles/multi-select/highcontrast.css +70 -28
  276. package/styles/multi-select/icons/_bootstrap5.3.scss +26 -0
  277. package/styles/multi-select/icons/_fluent2.scss +692 -0
  278. package/styles/multi-select/material-dark.css +88 -32
  279. package/styles/multi-select/material.css +102 -34
  280. package/styles/multi-select/material3-dark.css +109 -35
  281. package/styles/multi-select/material3-dark.scss +1 -1
  282. package/styles/multi-select/material3.css +109 -35
  283. package/styles/multi-select/material3.scss +1 -1
  284. package/styles/multi-select/tailwind-dark.css +67 -28
  285. package/styles/multi-select/tailwind.css +67 -28
  286. package/styles/tailwind-dark.css +217 -233
  287. package/styles/tailwind-dark.scss +28 -8
  288. package/styles/tailwind.css +217 -233
  289. package/styles/tailwind.scss +28 -8
  290. package/CHANGELOG.md +0 -2200
@@ -0,0 +1,6 @@
1
+ @import 'ej2-base/styles/definition/fluent2.scss';
2
+ @import 'ej2-popups/styles/popup/fluent2-definition.scss';
3
+ @import 'ej2-popups/styles/spinner/fluent2-definition.scss';
4
+ @import '../drop-down-base/fluent2-definition.scss';
5
+ @import 'fluent2-definition.scss';
6
+ @import 'all.scss';
@@ -1,17 +1,41 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
+ @-webkit-keyframes material-spinner-rotate {
3
+ 0% {
4
+ -webkit-transform: rotate(0);
5
+ transform: rotate(0);
6
+ }
7
+ 100% {
8
+ -webkit-transform: rotate(360deg);
9
+ transform: rotate(360deg);
10
+ }
11
+ }
2
12
  @keyframes material-spinner-rotate {
3
13
  0% {
14
+ -webkit-transform: rotate(0);
15
+ transform: rotate(0);
16
+ }
17
+ 100% {
18
+ -webkit-transform: rotate(360deg);
19
+ transform: rotate(360deg);
20
+ }
21
+ }
22
+ @-webkit-keyframes fabric-spinner-rotate {
23
+ 0% {
24
+ -webkit-transform: rotate(0);
4
25
  transform: rotate(0);
5
26
  }
6
27
  100% {
28
+ -webkit-transform: rotate(360deg);
7
29
  transform: rotate(360deg);
8
30
  }
9
31
  }
10
32
  @keyframes fabric-spinner-rotate {
11
33
  0% {
34
+ -webkit-transform: rotate(0);
12
35
  transform: rotate(0);
13
36
  }
14
37
  100% {
38
+ -webkit-transform: rotate(360deg);
15
39
  transform: rotate(360deg);
16
40
  }
17
41
  }
@@ -1,17 +1,41 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
+ @-webkit-keyframes material-spinner-rotate {
3
+ 0% {
4
+ -webkit-transform: rotate(0);
5
+ transform: rotate(0);
6
+ }
7
+ 100% {
8
+ -webkit-transform: rotate(360deg);
9
+ transform: rotate(360deg);
10
+ }
11
+ }
2
12
  @keyframes material-spinner-rotate {
3
13
  0% {
14
+ -webkit-transform: rotate(0);
15
+ transform: rotate(0);
16
+ }
17
+ 100% {
18
+ -webkit-transform: rotate(360deg);
19
+ transform: rotate(360deg);
20
+ }
21
+ }
22
+ @-webkit-keyframes fabric-spinner-rotate {
23
+ 0% {
24
+ -webkit-transform: rotate(0);
4
25
  transform: rotate(0);
5
26
  }
6
27
  100% {
28
+ -webkit-transform: rotate(360deg);
7
29
  transform: rotate(360deg);
8
30
  }
9
31
  }
10
32
  @keyframes fabric-spinner-rotate {
11
33
  0% {
34
+ -webkit-transform: rotate(0);
12
35
  transform: rotate(0);
13
36
  }
14
37
  100% {
38
+ -webkit-transform: rotate(360deg);
15
39
  transform: rotate(360deg);
16
40
  }
17
41
  }
@@ -1,17 +1,41 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
+ @-webkit-keyframes material-spinner-rotate {
3
+ 0% {
4
+ -webkit-transform: rotate(0deg);
5
+ transform: rotate(0deg);
6
+ }
7
+ 100% {
8
+ -webkit-transform: rotate(360deg);
9
+ transform: rotate(360deg);
10
+ }
11
+ }
2
12
  @keyframes material-spinner-rotate {
3
13
  0% {
14
+ -webkit-transform: rotate(0deg);
15
+ transform: rotate(0deg);
16
+ }
17
+ 100% {
18
+ -webkit-transform: rotate(360deg);
19
+ transform: rotate(360deg);
20
+ }
21
+ }
22
+ @-webkit-keyframes fabric-spinner-rotate {
23
+ 0% {
24
+ -webkit-transform: rotate(0deg);
4
25
  transform: rotate(0deg);
5
26
  }
6
27
  100% {
28
+ -webkit-transform: rotate(360deg);
7
29
  transform: rotate(360deg);
8
30
  }
9
31
  }
10
32
  @keyframes fabric-spinner-rotate {
11
33
  0% {
34
+ -webkit-transform: rotate(0deg);
12
35
  transform: rotate(0deg);
13
36
  }
14
37
  100% {
38
+ -webkit-transform: rotate(360deg);
15
39
  transform: rotate(360deg);
16
40
  }
17
41
  }
@@ -1,17 +1,41 @@
1
1
  /* stylelint-disable property-no-vendor-prefix */
2
+ @-webkit-keyframes material-spinner-rotate {
3
+ 0% {
4
+ -webkit-transform: rotate(0deg);
5
+ transform: rotate(0deg);
6
+ }
7
+ 100% {
8
+ -webkit-transform: rotate(360deg);
9
+ transform: rotate(360deg);
10
+ }
11
+ }
2
12
  @keyframes material-spinner-rotate {
3
13
  0% {
14
+ -webkit-transform: rotate(0deg);
15
+ transform: rotate(0deg);
16
+ }
17
+ 100% {
18
+ -webkit-transform: rotate(360deg);
19
+ transform: rotate(360deg);
20
+ }
21
+ }
22
+ @-webkit-keyframes fabric-spinner-rotate {
23
+ 0% {
24
+ -webkit-transform: rotate(0deg);
4
25
  transform: rotate(0deg);
5
26
  }
6
27
  100% {
28
+ -webkit-transform: rotate(360deg);
7
29
  transform: rotate(360deg);
8
30
  }
9
31
  }
10
32
  @keyframes fabric-spinner-rotate {
11
33
  0% {
34
+ -webkit-transform: rotate(0deg);
12
35
  transform: rotate(0deg);
13
36
  }
14
37
  100% {
38
+ -webkit-transform: rotate(360deg);
15
39
  transform: rotate(360deg);
16
40
  }
17
41
  }
@@ -44,7 +44,7 @@
44
44
  --color-sf-on-warning: 99, 52, 0;
45
45
  --color-sf-on-warning-container: 255, 220, 193;
46
46
  --color-sf-spreadsheet-gridline: 231, 224, 236;
47
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
47
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
48
48
  --color-sf-success-text: 0, 0, 0;
49
49
  --color-sf-warning-text: 0, 0, 0;
50
50
  --color-sf-info-text: 0, 0, 0;
@@ -55,19 +55,43 @@
55
55
 
56
56
  /* stylelint-disable-line no-empty-source */
57
57
  /* stylelint-disable property-no-vendor-prefix */
58
+ @-webkit-keyframes material-spinner-rotate {
59
+ 0% {
60
+ -webkit-transform: rotate(0deg);
61
+ transform: rotate(0deg);
62
+ }
63
+ 100% {
64
+ -webkit-transform: rotate(360deg);
65
+ transform: rotate(360deg);
66
+ }
67
+ }
58
68
  @keyframes material-spinner-rotate {
59
69
  0% {
70
+ -webkit-transform: rotate(0deg);
71
+ transform: rotate(0deg);
72
+ }
73
+ 100% {
74
+ -webkit-transform: rotate(360deg);
75
+ transform: rotate(360deg);
76
+ }
77
+ }
78
+ @-webkit-keyframes fabric-spinner-rotate {
79
+ 0% {
80
+ -webkit-transform: rotate(0deg);
60
81
  transform: rotate(0deg);
61
82
  }
62
83
  100% {
84
+ -webkit-transform: rotate(360deg);
63
85
  transform: rotate(360deg);
64
86
  }
65
87
  }
66
88
  @keyframes fabric-spinner-rotate {
67
89
  0% {
90
+ -webkit-transform: rotate(0deg);
68
91
  transform: rotate(0deg);
69
92
  }
70
93
  100% {
94
+ -webkit-transform: rotate(360deg);
71
95
  transform: rotate(360deg);
72
96
  }
73
97
  }
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/definition/material3-dark.scss';
1
+
2
2
 
3
3
  @import 'ej2-popups/styles/popup/material3-dark-definition.scss';
4
4
  @import 'ej2-popups/styles/spinner/material3-dark-definition.scss';
@@ -100,7 +100,7 @@
100
100
  --color-sf-on-warning: 99, 52, 0;
101
101
  --color-sf-on-warning-container: 255, 220, 193;
102
102
  --color-sf-spreadsheet-gridline: 231, 224, 236;
103
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
103
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
104
104
  --color-sf-success-text: 0, 0, 0;
105
105
  --color-sf-warning-text: 0, 0, 0;
106
106
  --color-sf-info-text: 0, 0, 0;
@@ -111,19 +111,43 @@
111
111
 
112
112
  /* stylelint-disable-line no-empty-source */
113
113
  /* stylelint-disable property-no-vendor-prefix */
114
+ @-webkit-keyframes material-spinner-rotate {
115
+ 0% {
116
+ -webkit-transform: rotate(0deg);
117
+ transform: rotate(0deg);
118
+ }
119
+ 100% {
120
+ -webkit-transform: rotate(360deg);
121
+ transform: rotate(360deg);
122
+ }
123
+ }
114
124
  @keyframes material-spinner-rotate {
115
125
  0% {
126
+ -webkit-transform: rotate(0deg);
127
+ transform: rotate(0deg);
128
+ }
129
+ 100% {
130
+ -webkit-transform: rotate(360deg);
131
+ transform: rotate(360deg);
132
+ }
133
+ }
134
+ @-webkit-keyframes fabric-spinner-rotate {
135
+ 0% {
136
+ -webkit-transform: rotate(0deg);
116
137
  transform: rotate(0deg);
117
138
  }
118
139
  100% {
140
+ -webkit-transform: rotate(360deg);
119
141
  transform: rotate(360deg);
120
142
  }
121
143
  }
122
144
  @keyframes fabric-spinner-rotate {
123
145
  0% {
146
+ -webkit-transform: rotate(0deg);
124
147
  transform: rotate(0deg);
125
148
  }
126
149
  100% {
150
+ -webkit-transform: rotate(360deg);
127
151
  transform: rotate(360deg);
128
152
  }
129
153
  }
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/definition/material3.scss';
1
+
2
2
 
3
3
  @import 'ej2-popups/styles/popup/material3-definition.scss';
4
4
  @import 'ej2-popups/styles/spinner/material3-definition.scss';
@@ -1,18 +1,42 @@
1
1
  /* stylelint-disable-line no-empty-source */
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);
16
+ transform: rotate(0);
17
+ }
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);
5
26
  transform: rotate(0);
6
27
  }
7
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
  }
@@ -1,18 +1,42 @@
1
1
  /* stylelint-disable-line no-empty-source */
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);
16
+ transform: rotate(0);
17
+ }
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);
5
26
  transform: rotate(0);
6
27
  }
7
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
  }
@@ -0,0 +1,230 @@
1
+ $ddl-chip-mobile-close-font: 16px !default;
2
+ $ddl-multiselect-skin-name: $skin-name !default;
3
+ $ddl-delim-font-size: $text-sm !default;
4
+ $ddl-rtl-wrapper: 0 2px 0 32px !default;
5
+ $ddl-chip-mobile-bg: $primary !default;
6
+ $ddl-search-wrapper-width: calc(100% - 32px) !default;
7
+ $ddl-bigger-search-wrapper-width: calc(100% - 38px) !default;
8
+ $ddl-bigger-small-search-wrapper-width: calc(100% - 32px) !default;
9
+ $ddl-small-search-wrapper-width: calc(100% - 30px) !default;
10
+ $ddl-popup-shadow-value: $shadow-lg !default;
11
+ $ddl-remains-padding-left: 8px !default;
12
+ $ddl-chip-margin: 3px !default;
13
+ $ddl-chip-margin-bigger: 3px !default;
14
+ $ddl-chip-radius: 4px !default;
15
+ $ddl-chip-content-padding: 0 6px 1px 0 !default;
16
+ $ddl-chip-mobile-content-padding: 8px 4px 8px 0 !default;
17
+ $ddl-chip-bigger-content-padding: 7px 8px 7px 4px !default;
18
+ $ddl-rtl-chip-mobile-content-padding: 8px 0 8px 4px !default;
19
+ $ddl-chip-padding: 0 6px 0 8px !default;
20
+ $ddl-chip-close-top: 0 !default;
21
+ $ddl-chip-close-left: 0 !default;
22
+ $ddl-chip-close-margin: 0 0 0 !default;
23
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
24
+ $ddl-chip-close-square: 14px !default;
25
+ $ddl-chip-close-width: 14px !default;
26
+ $ddl-chip-hooker-square: 24px !default;
27
+ $ddl-chip-hooker-width: 24px !default;
28
+ $ddl-chip-close-font: 14px !default;
29
+ $ddl-chip-height: 24px !default;
30
+ $ddl-chip-mobile-height: 30px !default;
31
+ $ddl-chip-collection-top: 0 !default;
32
+ $ddl-input-height: 30px !default;
33
+ $ddl-input-bigger-height: 36px !default;
34
+ $ddl-input-mob-height: 30px !default;
35
+ $ddl-control-height: 30px !default;
36
+ $ddl-control-bigger-height: 36px !default;
37
+ $ddl-delimviewheight: 28px !default;
38
+ $ddl-delimviewheight-bigger: 36px !default;
39
+ $ddl-delimview-bigger-padding-left: 12px !default;
40
+ $ddl-closer-hooker-font: $text-sm !default;
41
+ $ddl-chip-font-family: $font-family !default;
42
+ $ddl-closer-margin-top: -2em !default;
43
+ $ddl-closer-margin-top-bigger: -2.25em !default;
44
+ $ddl-icon-margin-top: -2.1em !default;
45
+ $ddl-clear-margin-top: -2em !default;
46
+ $ddl-icon-margin-top-bigger: -2.25em !default;
47
+ $ddl-small-ddl-icon-top: -2em !default;
48
+ $ddl-bigger-small-ddl-icon-top: -2.65em !default;
49
+ $ddl-chip-mobile-radius: 2px !default;
50
+ $ddl-chip-sel-mobile-height: 40px !default;
51
+ $ddl-chip-selected-padding: 12px 4px 11px 0 !default;
52
+ $ddl-chip-mobile-close-margin: 3px 0 0 !default;
53
+ $ddl-chip-close-mob-margin: 8px 0 0 !default;
54
+ $ddl-closer-hooker-top: 100% !default;
55
+ $ddl-chip-hooker-right: 5px !default;
56
+ $ddl-chip-mob-left: 0 !default;
57
+ $ddl-chip-mob-padding: 0 0 0 16px !default;
58
+ $ddl-chip-font-size: $text-sm !default;
59
+ $ddl-chip-bigger-font-size: $text-base !default;
60
+ $ddl-chip-small-font-size: $text-xs !default;
61
+ $ddl-rtl-chip-close-left: 0 !default;
62
+ $ddl-rtl-chip-content-padding: 5px 4px !default;
63
+ $ddl-rtl-mob-chip-content-padding: 8px 4px !default;
64
+ $ddl-rtl-mob-chip-content-margin: 4px !default;
65
+ $ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
66
+ $ddl-rtl-chip-padding: 0 8px 0 4px !default;
67
+ $ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
68
+ $ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
69
+ $ddl-rtl-hooker-left: -4px !default;
70
+ $ddl-chip-close-mob-top: 0 !default;
71
+ $ddl-chip-close-mobile-top: 0 !default;
72
+ $ddl-control-placholder-padding: 0 32px 0 0 !default;
73
+ $ddl-overall-close-top: 6px !default;
74
+ $ddl-overall-close-left: 6px !default;
75
+ $ddl-sel-chip-close-mobile-top: 0 !default;
76
+ $ddl-sel-chip-close-mobile-left: 12px !default;
77
+ $ddl-chip-sel-mobile-close-height: 40px !default;
78
+ $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
79
+ $ddl-input-text-indent: 8px !default;
80
+ $ddl-input-placeholder-padding: 0 0 0 8px !default;
81
+ $ddl-rtl-chip-sel-close-left: -12px !default;
82
+ $ddl-popup-active-focus-border-width: 0 !default;
83
+ $ddl-popup-active-focus-shadow-item: none !default;
84
+ $ddl-popup-active-border-width: 0 !default;
85
+ $ddl-delim-text-indent: 8px !default;
86
+ $ddl-popup-normal-border-width: 0 !default;
87
+ $ddl-check-right: 12px !default;
88
+ $ddl-check-left: 12px !default;
89
+ $ddl-bigger-select-all-height: 48px !default;
90
+ $ddl-select-all-height: 36px !default;
91
+ $ddl-back-icon-margin: 2.5px 10px 0 -52px !default;
92
+ $ddl-back-icon-padding: 0 8px !default;
93
+ $ddl-filterbar-padding: 0 !default;
94
+ $ddl-bigger-filterbar-padding: 0 !default;
95
+ $ddl-delimviewheight-check-bigger: 34px !default;
96
+ $ddl-popup-reorder-border: $border-light !default;
97
+ $ddl-check-right-margin: 8px !default;
98
+ $ddl-bigger-check-right-margin: 12px !default;
99
+ $ddl-selectall-font-size: $text-sm !default;
100
+ $ddl-bigger-selectall-font-size: $text-base !default;
101
+ $ddl-close-icon-left: 30px !default;
102
+ $ddl-close-down-icon-left: 40px !default;
103
+ $ddl-check-icon-top: 0 !default;
104
+ $ddl-bigger-check-right: 16px !default;
105
+ $ddl-delim-text-padding-right: 6px !default;
106
+ $ddl-list-rtl-padding-right: 15px !default;
107
+ $ddl-close-rtl-icon-left: 19px !default;
108
+ $ddl-chip-close-rtl-small-left: 20px !default;
109
+ $ddl-chip-close-rtl-bigger-left: 32px !default;
110
+ $ddl-chip-close-rtl-small-bigger-left: 25px !default;
111
+ $ddl-chip-close-rtl-left: 25px !default;
112
+ $ddl-multiselect-group-list-item-rtl-padding-right: 25px !default;
113
+ $ddl-bigger-multiselect-group-list-item-rtl-padding-right: 25px !default;
114
+ $ddl-multiselect-group-list-group-item-padding-left: 16px !default;
115
+ $ddl-multiselect-group-checkbox-wrapper-padding-left: 0 !default;
116
+ $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left: $ddl-multiselect-group-checkbox-wrapper-padding-left !default;
117
+ $ddl-multiselect-group-list-group-item-rtl-padding-right: 16px !default;
118
+ $ddl-multiselect-label-position: 15px !default;
119
+ $ddl-multiselect-filled-floatlabel-fontsize: 14px !default;
120
+ $ddl-multiselect-filled-float-input-min-height: 28px !default;
121
+ $ddl-multiselect-filled-input-min-height: 39px !default;
122
+ $ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
123
+ $ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
124
+ $multiselect-disable-font-color: $content-text-color-alt1 !default;
125
+
126
+ // Small size
127
+ $ddl-select-all-height-small: 26px !default;
128
+ $ddl-small-chip-height: 20px !default;
129
+ $ddl-chip-small-font-size: $text-xs !default;
130
+ $ddl-small-chip-close-square: 12px !default;
131
+ $ddl-small-chip-close-width: 12px !default;
132
+ $ddl-small-chip-close-font: 12px !default;
133
+ $ddl-control-small-height: 24px !default;
134
+ $ddl-small-input-height: 24px !default;
135
+ $ddl-delim-small-font-size: $text-xs !default;
136
+ $ddl-small-closer-margin-top: -2em !default;
137
+ $ddl-chip-close-hooker-small-left: 0 !default;
138
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
139
+ $ddl-delimviewheight-small: 24px !default;
140
+ $ddl-multiselect-filled-input-min-height-small: 32px !default;
141
+ $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
142
+ $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
143
+ $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
144
+
145
+ // Touch
146
+ $ddl-multiselect-filled-input-min-height-bigger: 52px !default;
147
+ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
148
+ $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
149
+ $ddl-bigger-chip-close-font: 14px !default;
150
+ $ddl-bigger-chip-close-square: 14px !default;
151
+ $ddl-bigger-chip-close-width: 14px !default;
152
+
153
+ // Touch Small size
154
+ $ddl-select-all-height-bigger-small: 40px !default;
155
+ $ddl-bigger-small-chip-height: 26px !default;
156
+ $ddl-chip-bigger-small-font-size: $text-xs !default;
157
+ $ddl-bigger-small-chip-close-square: 14px !default;
158
+ $ddl-bigger-small-chip-close-width: 14px !default;
159
+ $ddl-bigger-small-chip-close-font: 14px !default;
160
+ $ddl-control-bigger-small-height: 28px !default;
161
+ $ddl-bigger-small-input-height: 32px !default;
162
+ $ddl-delim-bigger-small-font-size: $text-xs !default;
163
+ $ddl-delimviewheight-bigger-small: 28px !default;
164
+ $ddl-closer-margin-top-bigger-small: -2em !default;
165
+
166
+ // color
167
+
168
+ $ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
169
+ $ddl-chip-selected-shadow-value: 0 2px 3px 1px $ddl-list-box-shadow-color !default;
170
+ $ddl-chip-mobile-font: $content-text-color !default;
171
+ $ddl-chip-bg-color: $secondary-bg-color !default;
172
+ $ddl-chip-hover-bg-color: $secondary-bg-color-hover !default;
173
+ $ddl-chip-hover-font-color: $secondary-text-color !default;
174
+ $ddl-sel-hover-chip-bg-color: $secondary-bg-color-pressed !default;
175
+ $ddl-sel-chip-hover-font-color: $secondary-text-color !default;
176
+ $ddl-chip-font-color: $secondary-text-color !default;
177
+ $ddl-chip-close: $secondary-text-color !default;
178
+ $ddl-sel-chip-font-color: $content-text-color !default;
179
+ $ddl-sel-chip-close: $content-text-color !default;
180
+ $ddl-sel-chip-color: $content-text-color !default;
181
+ $ddl-sel-chip-bg-color: $content-bg-color-alt5 !default;
182
+ $ddl-remains-font-color: $content-text-color !default;
183
+ $ddl-popup-active-focus-bg-color: $content-bg-color-selected !default;
184
+ $ddl-popup-active-focus-font-color: $content-text-color-selected !default;
185
+ $ddl-popup-active-focus-border-color: transparent !default;
186
+ $ddl-input-placeholder: $placeholder-text-color !default;
187
+ $ddl-popup-active-border-color: $border-selected !default;
188
+ $ddl-multi-list-default-font-color: $content-text-color !default;
189
+ $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
190
+ $ddl-delim-font-color: $content-text-color !default;
191
+ $ddl-close-icon-color: $content-text-color !default;
192
+ $ddl-close-down-icon-left: 35px !default;
193
+
194
+ @include export-module('multiselect-bootstrap5') {
195
+ .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
196
+ line-height: 30px;
197
+ top: 0;
198
+ }
199
+
200
+ .e-multiselect .e-input-group-icon.e-ddl-icon {
201
+ border-radius: 0 2px 2px 0;
202
+ border-right-width: 0;
203
+ }
204
+
205
+ .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
206
+ border-left-width: 0;
207
+ border-radius: 4px 0 0 4px;
208
+ border-right-width: 1px;
209
+ }
210
+
211
+ .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
212
+ height: 32px;
213
+ width: 32px;
214
+ }
215
+
216
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
217
+ height: $ddl-chip-hooker-square;
218
+ width: $ddl-chip-hooker-square;
219
+ }
220
+
221
+ .e-multi-select-wrapper .e-searcher input[type = 'text'],
222
+ .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
223
+ color: $content-text-color;
224
+ height: 100%;
225
+ }
226
+
227
+ .e-multiselect .e-input-group-icon.e-ddl-icon {
228
+ border-left-width: 0;
229
+ }
230
+ }