@syncfusion/ej2-dropdowns 25.2.7 → 26.1.38

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 (267) 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 +531 -224
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +524 -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 +67 -38
  25. package/src/list-box/list-box.d.ts +1 -0
  26. package/src/list-box/list-box.js +41 -9
  27. package/src/mention/mention.js +23 -8
  28. package/src/multi-select/interface.js +0 -1
  29. package/src/multi-select/multi-select.d.ts +15 -0
  30. package/src/multi-select/multi-select.js +135 -12
  31. package/styles/auto-complete/_bootstrap5.3-definition.scss +2 -0
  32. package/styles/auto-complete/_fluent2-definition.scss +2 -0
  33. package/styles/auto-complete/bootstrap-dark.css +5 -2
  34. package/styles/auto-complete/bootstrap.css +5 -2
  35. package/styles/auto-complete/bootstrap4.css +6 -2
  36. package/styles/auto-complete/bootstrap5-dark.css +6 -2
  37. package/styles/auto-complete/bootstrap5.css +6 -2
  38. package/styles/auto-complete/fabric-dark.css +3 -1
  39. package/styles/auto-complete/fabric.css +3 -1
  40. package/styles/auto-complete/fluent-dark.css +6 -2
  41. package/styles/auto-complete/fluent.css +6 -2
  42. package/styles/auto-complete/fluent2.css +1140 -0
  43. package/styles/auto-complete/fluent2.scss +4 -0
  44. package/styles/auto-complete/highcontrast-light.css +3 -1
  45. package/styles/auto-complete/highcontrast.css +3 -1
  46. package/styles/auto-complete/material-dark.css +16 -5
  47. package/styles/auto-complete/material.css +16 -5
  48. package/styles/auto-complete/material3-dark.css +17 -6
  49. package/styles/auto-complete/material3.css +17 -6
  50. package/styles/auto-complete/tailwind-dark.css +16 -5
  51. package/styles/auto-complete/tailwind.css +16 -5
  52. package/styles/bootstrap-dark.css +197 -228
  53. package/styles/bootstrap-dark.scss +28 -8
  54. package/styles/bootstrap.css +197 -228
  55. package/styles/bootstrap.scss +28 -8
  56. package/styles/bootstrap4.css +200 -229
  57. package/styles/bootstrap4.scss +28 -8
  58. package/styles/bootstrap5-dark.css +197 -221
  59. package/styles/bootstrap5-dark.scss +28 -8
  60. package/styles/bootstrap5.css +197 -221
  61. package/styles/bootstrap5.scss +28 -8
  62. package/styles/combo-box/_bootstrap5.3-definition.scss +2 -0
  63. package/styles/combo-box/_fluent2-definition.scss +2 -0
  64. package/styles/combo-box/bootstrap-dark.css +5 -2
  65. package/styles/combo-box/bootstrap.css +5 -2
  66. package/styles/combo-box/bootstrap4.css +6 -2
  67. package/styles/combo-box/bootstrap5-dark.css +6 -2
  68. package/styles/combo-box/bootstrap5.css +6 -2
  69. package/styles/combo-box/fabric-dark.css +3 -1
  70. package/styles/combo-box/fabric.css +3 -1
  71. package/styles/combo-box/fluent-dark.css +6 -2
  72. package/styles/combo-box/fluent.css +6 -2
  73. package/styles/combo-box/fluent2.css +1140 -0
  74. package/styles/combo-box/fluent2.scss +4 -0
  75. package/styles/combo-box/highcontrast-light.css +3 -1
  76. package/styles/combo-box/highcontrast.css +3 -1
  77. package/styles/combo-box/material-dark.css +16 -5
  78. package/styles/combo-box/material.css +16 -5
  79. package/styles/combo-box/material3-dark.css +17 -6
  80. package/styles/combo-box/material3.css +17 -6
  81. package/styles/combo-box/tailwind-dark.css +16 -5
  82. package/styles/combo-box/tailwind.css +16 -5
  83. package/styles/drop-down-base/_bds-definition.scss +2 -2
  84. package/styles/drop-down-base/_bootstrap5.3-definition.scss +117 -0
  85. package/styles/drop-down-base/_fluent2-definition.scss +134 -0
  86. package/styles/drop-down-base/_layout.scss +12 -2
  87. package/styles/drop-down-base/_material3-definition.scss +0 -11
  88. package/styles/drop-down-base/_theme.scss +2 -11
  89. package/styles/drop-down-base/bootstrap-dark.css +2 -1
  90. package/styles/drop-down-base/bootstrap.css +2 -1
  91. package/styles/drop-down-base/bootstrap4.css +2 -1
  92. package/styles/drop-down-base/bootstrap5-dark.css +2 -1
  93. package/styles/drop-down-base/bootstrap5.css +2 -1
  94. package/styles/drop-down-base/fabric-dark.css +2 -1
  95. package/styles/drop-down-base/fabric.css +2 -1
  96. package/styles/drop-down-base/fluent-dark.css +2 -1
  97. package/styles/drop-down-base/fluent.css +2 -1
  98. package/styles/drop-down-base/fluent2.css +1447 -0
  99. package/styles/drop-down-base/fluent2.scss +3 -0
  100. package/styles/drop-down-base/highcontrast-light.css +2 -1
  101. package/styles/drop-down-base/highcontrast.css +2 -1
  102. package/styles/drop-down-base/material-dark.css +2 -1
  103. package/styles/drop-down-base/material.css +2 -1
  104. package/styles/drop-down-base/material3-dark.css +9 -2
  105. package/styles/drop-down-base/material3.css +9 -2
  106. package/styles/drop-down-base/tailwind-dark.css +2 -1
  107. package/styles/drop-down-base/tailwind.css +2 -1
  108. package/styles/drop-down-list/_bootstrap5.3-definition.scss +201 -0
  109. package/styles/drop-down-list/_fluent2-definition.scss +134 -0
  110. package/styles/drop-down-list/_layout.scss +5 -3
  111. package/styles/drop-down-list/_material3-definition.scss +0 -8
  112. package/styles/drop-down-list/bootstrap-dark.css +38 -3
  113. package/styles/drop-down-list/bootstrap.css +38 -3
  114. package/styles/drop-down-list/bootstrap4.css +39 -3
  115. package/styles/drop-down-list/bootstrap5-dark.css +39 -3
  116. package/styles/drop-down-list/bootstrap5.css +39 -3
  117. package/styles/drop-down-list/fabric-dark.css +36 -2
  118. package/styles/drop-down-list/fabric.css +36 -2
  119. package/styles/drop-down-list/fluent-dark.css +39 -3
  120. package/styles/drop-down-list/fluent.css +39 -3
  121. package/styles/drop-down-list/fluent2.css +1684 -0
  122. package/styles/drop-down-list/fluent2.scss +9 -0
  123. package/styles/drop-down-list/highcontrast-light.css +36 -2
  124. package/styles/drop-down-list/highcontrast.css +36 -2
  125. package/styles/drop-down-list/icons/_bootstrap5.3.scss +14 -0
  126. package/styles/drop-down-list/icons/_fluent2.scss +14 -0
  127. package/styles/drop-down-list/material-dark.css +58 -7
  128. package/styles/drop-down-list/material.css +72 -9
  129. package/styles/drop-down-list/material3-dark.css +74 -10
  130. package/styles/drop-down-list/material3.css +74 -10
  131. package/styles/drop-down-list/tailwind-dark.css +49 -6
  132. package/styles/drop-down-list/tailwind.css +49 -6
  133. package/styles/drop-down-tree/_bds-definition.scss +5 -0
  134. package/styles/drop-down-tree/_bootstrap4-definition.scss +1 -0
  135. package/styles/drop-down-tree/_bootstrap5-definition.scss +5 -0
  136. package/styles/drop-down-tree/_bootstrap5.3-definition.scss +66 -0
  137. package/styles/drop-down-tree/_fluent-definition.scss +4 -0
  138. package/styles/drop-down-tree/_fluent2-definition.scss +75 -0
  139. package/styles/drop-down-tree/_layout.scss +290 -327
  140. package/styles/drop-down-tree/_material3-definition.scss +3 -5
  141. package/styles/drop-down-tree/_tailwind-definition.scss +7 -2
  142. package/styles/drop-down-tree/_theme.scss +24 -41
  143. package/styles/drop-down-tree/bootstrap-dark.css +64 -29
  144. package/styles/drop-down-tree/bootstrap.css +64 -29
  145. package/styles/drop-down-tree/bootstrap4.css +65 -30
  146. package/styles/drop-down-tree/bootstrap5-dark.css +64 -27
  147. package/styles/drop-down-tree/bootstrap5.css +64 -27
  148. package/styles/drop-down-tree/fabric-dark.css +64 -29
  149. package/styles/drop-down-tree/fabric.css +64 -29
  150. package/styles/drop-down-tree/fluent-dark.css +72 -35
  151. package/styles/drop-down-tree/fluent.css +72 -35
  152. package/styles/drop-down-tree/fluent2.css +1733 -0
  153. package/styles/drop-down-tree/fluent2.scss +9 -0
  154. package/styles/drop-down-tree/highcontrast-light.css +64 -29
  155. package/styles/drop-down-tree/highcontrast.css +64 -23
  156. package/styles/drop-down-tree/icons/_bootstrap5.3.scss +11 -0
  157. package/styles/drop-down-tree/icons/_fluent2.scss +14 -0
  158. package/styles/drop-down-tree/material-dark.css +81 -43
  159. package/styles/drop-down-tree/material.css +98 -51
  160. package/styles/drop-down-tree/material3-dark.css +86 -32
  161. package/styles/drop-down-tree/material3.css +86 -32
  162. package/styles/drop-down-tree/tailwind-dark.css +73 -28
  163. package/styles/drop-down-tree/tailwind.css +73 -28
  164. package/styles/fabric-dark.css +195 -227
  165. package/styles/fabric-dark.scss +28 -8
  166. package/styles/fabric.css +195 -227
  167. package/styles/fabric.scss +28 -8
  168. package/styles/fluent-dark.css +207 -236
  169. package/styles/fluent-dark.scss +28 -8
  170. package/styles/fluent.css +207 -236
  171. package/styles/fluent.scss +28 -8
  172. package/styles/fluent2.css +4772 -0
  173. package/styles/fluent2.scss +28 -0
  174. package/styles/highcontrast-light.css +198 -227
  175. package/styles/highcontrast-light.scss +28 -8
  176. package/styles/highcontrast.css +198 -221
  177. package/styles/highcontrast.scss +28 -8
  178. package/styles/list-box/_bootstrap-dark-definition.scss +0 -2
  179. package/styles/list-box/_bootstrap5.3-definition.scss +120 -0
  180. package/styles/list-box/_fabric-dark-definition.scss +0 -2
  181. package/styles/list-box/_fluent2-definition.scss +121 -0
  182. package/styles/list-box/_highcontrast-light-definition.scss +0 -2
  183. package/styles/list-box/_layout.scss +65 -44
  184. package/styles/list-box/_material-dark-definition.scss +0 -2
  185. package/styles/list-box/_tailwind-definition.scss +1 -1
  186. package/styles/list-box/_theme.scss +36 -65
  187. package/styles/list-box/bootstrap-dark.css +72 -112
  188. package/styles/list-box/bootstrap.css +72 -112
  189. package/styles/list-box/bootstrap4.css +72 -112
  190. package/styles/list-box/bootstrap5-dark.css +72 -106
  191. package/styles/list-box/bootstrap5.css +72 -106
  192. package/styles/list-box/fabric-dark.css +72 -112
  193. package/styles/list-box/fabric.css +72 -112
  194. package/styles/list-box/fluent-dark.css +72 -112
  195. package/styles/list-box/fluent.css +72 -112
  196. package/styles/list-box/fluent2.css +2029 -0
  197. package/styles/list-box/fluent2.scss +5 -0
  198. package/styles/list-box/highcontrast-light.css +72 -112
  199. package/styles/list-box/highcontrast.css +72 -112
  200. package/styles/list-box/icons/_bootstrap5.3.scss +25 -0
  201. package/styles/list-box/icons/_fluent2.scss +25 -0
  202. package/styles/list-box/material-dark.css +72 -112
  203. package/styles/list-box/material.css +72 -112
  204. package/styles/list-box/material3-dark.css +73 -113
  205. package/styles/list-box/material3.css +73 -113
  206. package/styles/list-box/tailwind-dark.css +74 -114
  207. package/styles/list-box/tailwind.css +74 -114
  208. package/styles/material-dark.css +237 -260
  209. package/styles/material-dark.scss +28 -8
  210. package/styles/material.css +254 -284
  211. package/styles/material.scss +28 -8
  212. package/styles/material3-dark.css +254 -266
  213. package/styles/material3-dark.scss +28 -8
  214. package/styles/material3.css +254 -266
  215. package/styles/material3.scss +28 -8
  216. package/styles/mention/_bootstrap5.3-definition.scss +1 -0
  217. package/styles/mention/_fluent2-definition.scss +1 -0
  218. package/styles/mention/bootstrap-dark.css +24 -0
  219. package/styles/mention/bootstrap.css +24 -0
  220. package/styles/mention/bootstrap4.css +24 -0
  221. package/styles/mention/bootstrap5-dark.css +24 -0
  222. package/styles/mention/bootstrap5.css +24 -0
  223. package/styles/mention/fabric-dark.css +24 -0
  224. package/styles/mention/fabric.css +24 -0
  225. package/styles/mention/fluent-dark.css +24 -0
  226. package/styles/mention/fluent.css +24 -0
  227. package/styles/mention/fluent2.css +1130 -0
  228. package/styles/mention/fluent2.scss +6 -0
  229. package/styles/mention/highcontrast-light.css +24 -0
  230. package/styles/mention/highcontrast.css +24 -0
  231. package/styles/mention/material-dark.css +24 -0
  232. package/styles/mention/material.css +24 -0
  233. package/styles/mention/material3-dark.css +25 -1
  234. package/styles/mention/material3.css +25 -1
  235. package/styles/mention/tailwind-dark.css +24 -0
  236. package/styles/mention/tailwind.css +24 -0
  237. package/styles/multi-select/_bootstrap5.3-definition.scss +230 -0
  238. package/styles/multi-select/_fluent2-definition.scss +236 -0
  239. package/styles/multi-select/_layout.scss +32 -38
  240. package/styles/multi-select/_material3-definition.scss +0 -15
  241. package/styles/multi-select/_theme.scss +0 -4
  242. package/styles/multi-select/bootstrap-dark.css +67 -28
  243. package/styles/multi-select/bootstrap.css +67 -28
  244. package/styles/multi-select/bootstrap4.css +70 -29
  245. package/styles/multi-select/bootstrap5-dark.css +67 -28
  246. package/styles/multi-select/bootstrap5.css +67 -28
  247. package/styles/multi-select/fabric-dark.css +67 -28
  248. package/styles/multi-select/fabric.css +67 -28
  249. package/styles/multi-select/fluent-dark.css +69 -29
  250. package/styles/multi-select/fluent.css +69 -29
  251. package/styles/multi-select/fluent2.css +2663 -0
  252. package/styles/multi-select/fluent2.scss +9 -0
  253. package/styles/multi-select/highcontrast-light.css +70 -28
  254. package/styles/multi-select/highcontrast.css +70 -28
  255. package/styles/multi-select/icons/_bootstrap5.3.scss +26 -0
  256. package/styles/multi-select/icons/_fluent2.scss +692 -0
  257. package/styles/multi-select/material-dark.css +88 -32
  258. package/styles/multi-select/material.css +102 -34
  259. package/styles/multi-select/material3-dark.css +109 -35
  260. package/styles/multi-select/material3.css +109 -35
  261. package/styles/multi-select/tailwind-dark.css +67 -28
  262. package/styles/multi-select/tailwind.css +67 -28
  263. package/styles/tailwind-dark.css +218 -233
  264. package/styles/tailwind-dark.scss +28 -8
  265. package/styles/tailwind.css +218 -233
  266. package/styles/tailwind.scss +28 -8
  267. 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-navigations/styles/treeview/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);
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
  }
@@ -57,12 +81,20 @@
57
81
  outline: none;
58
82
  }
59
83
  .e-ddt .e-ddt-icon::before {
60
- transform: rotate(0deg);
84
+ -webkit-transform: rotate(0deg);
85
+ transform: rotate(0deg);
86
+ -webkit-transition: -webkit-transform 300ms ease;
87
+ transition: -webkit-transform 300ms ease;
61
88
  transition: transform 300ms ease;
89
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
62
90
  }
63
91
  .e-ddt.e-icon-anim .e-ddt-icon::before {
64
- transform: rotate(180deg);
92
+ -webkit-transform: rotate(180deg);
93
+ transform: rotate(180deg);
94
+ -webkit-transition: -webkit-transform 300ms ease;
95
+ transition: -webkit-transform 300ms ease;
65
96
  transition: transform 300ms ease;
97
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
66
98
  }
67
99
  .e-ddt .e-ddt-hidden {
68
100
  border: 0;
@@ -71,7 +103,8 @@
71
103
  width: 0;
72
104
  }
73
105
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
74
- box-sizing: content-box;
106
+ -webkit-box-sizing: content-box;
107
+ box-sizing: content-box;
75
108
  min-height: 30px;
76
109
  }
77
110
  .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
@@ -102,6 +135,7 @@
102
135
  padding-right: 0;
103
136
  }
104
137
  .e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
138
+ display: -webkit-box;
105
139
  display: -ms-flexbox;
106
140
  display: flex;
107
141
  }
@@ -109,20 +143,25 @@
109
143
  width: 100%;
110
144
  }
111
145
  .e-ddt.e-show-chip .e-chips-close {
112
- line-height: 21px;
113
146
  min-height: 26px;
114
147
  min-width: 18px;
148
+ line-height: 21px;
115
149
  text-align: center;
116
150
  }
117
151
  .e-ddt.e-show-chip .e-chips-close::before {
118
152
  font-size: 10px;
153
+ }
154
+ .e-ddt.e-show-chip .e-chips-close::before {
119
155
  vertical-align: middle;
120
156
  }
121
157
  .e-ddt.e-show-chip .e-chips {
122
- -ms-flex-align: center;
123
- align-items: center;
158
+ -webkit-box-align: center;
159
+ -ms-flex-align: center;
160
+ align-items: center;
124
161
  border-radius: 0;
125
- box-sizing: border-box;
162
+ -webkit-box-sizing: border-box;
163
+ box-sizing: border-box;
164
+ display: -webkit-inline-box;
126
165
  display: -ms-inline-flexbox;
127
166
  display: inline-flex;
128
167
  float: left;
@@ -150,7 +189,8 @@
150
189
  padding: 6px 10px 0 10px;
151
190
  }
152
191
  .e-ddt .e-overflow.e-total-count {
153
- box-sizing: border-box;
192
+ -webkit-box-sizing: border-box;
193
+ box-sizing: border-box;
154
194
  display: inline-block;
155
195
  overflow: hidden;
156
196
  text-overflow: ellipsis;
@@ -194,10 +234,12 @@
194
234
  .e-ddt .e-dropdowntree.e-chip-input,
195
235
  .e-ddt input[readonly].e-input.e-chip-input {
196
236
  width: 0;
237
+ display: none;
197
238
  }
198
239
  .e-ddt.e-popup {
199
240
  border: 1px solid #757575;
200
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
241
+ -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
242
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
201
243
  position: absolute;
202
244
  }
203
245
  .e-ddt.e-popup .e-selectall-parent {
@@ -223,19 +265,18 @@
223
265
  font-size: 14px;
224
266
  margin: 10px;
225
267
  }
226
- .e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
227
- padding: 0 12px;
228
- }
229
268
  .e-ddt.e-popup .e-filter-wrap {
230
- border: 1px solid #000;
231
269
  border-top-width: 0;
232
270
  display: block;
233
271
  padding: 5px;
234
- }
235
- .e-ddt.e-popup .e-filter-wrap {
272
+ border: 1px solid #000;
236
273
  border-left-width: 0;
237
274
  border-right-width: 0;
238
275
  }
276
+ .e-ddt.e-popup .e-filter-wrap .e-input,
277
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
278
+ padding: 0 12px;
279
+ }
239
280
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
240
281
  margin-bottom: 0;
241
282
  }
@@ -250,8 +291,8 @@
250
291
  cursor: default;
251
292
  font-family: inherit;
252
293
  font-size: 14px;
253
- padding: 14px 16px;
254
294
  text-align: center;
295
+ padding: 14px 16px;
255
296
  }
256
297
  .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
257
298
  display: none;
@@ -306,16 +347,16 @@
306
347
  padding: 6px 10px 0 10px;
307
348
  }
308
349
  .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
309
- margin-left: 30px;
310
350
  margin-right: 1px;
351
+ margin-left: 30px;
311
352
  }
312
353
  .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
313
- margin-left: 30px;
314
354
  margin-right: 1px;
355
+ margin-left: 30px;
315
356
  }
316
357
  .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
317
- margin-left: 60px;
318
358
  margin-right: 1px;
359
+ margin-left: 60px;
319
360
  }
320
361
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
321
362
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-clear-icon,
@@ -388,18 +429,18 @@
388
429
  }
389
430
  .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
390
431
  .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
391
- margin-left: 38px;
392
432
  margin-right: 1px;
433
+ margin-left: 38px;
393
434
  }
394
435
  .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
395
436
  .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
396
- margin-left: 38px;
397
437
  margin-right: 1px;
438
+ margin-left: 38px;
398
439
  }
399
440
  .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
400
441
  .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
401
- margin-left: 76px;
402
- margin-right: 1px;
442
+ margin-right: 76px;
443
+ margin-left: 1px;
403
444
  }
404
445
  .e-bigger .e-ddt.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-rtl.e-show-text.e-input-group.e-show-dd-icon .e-clear-icon,
405
446
  .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
@@ -417,12 +458,6 @@
417
458
  .e-ddt .e-chips > .e-chipcontent {
418
459
  color: #fff;
419
460
  }
420
- .e-ddt .e-chips:hover {
421
- background-color: #ecf;
422
- }
423
- .e-ddt .e-chips:hover > .e-chipcontent {
424
- color: #000;
425
- }
426
461
  .e-ddt .e-overflow .e-remain {
427
462
  color: #000;
428
463
  }
@@ -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
  }
@@ -58,12 +82,20 @@
58
82
  outline: none;
59
83
  }
60
84
  .e-ddt .e-ddt-icon::before {
61
- transform: rotate(0deg);
85
+ -webkit-transform: rotate(0deg);
86
+ transform: rotate(0deg);
87
+ -webkit-transition: -webkit-transform 300ms ease;
88
+ transition: -webkit-transform 300ms ease;
62
89
  transition: transform 300ms ease;
90
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
63
91
  }
64
92
  .e-ddt.e-icon-anim .e-ddt-icon::before {
65
- transform: rotate(180deg);
93
+ -webkit-transform: rotate(180deg);
94
+ transform: rotate(180deg);
95
+ -webkit-transition: -webkit-transform 300ms ease;
96
+ transition: -webkit-transform 300ms ease;
66
97
  transition: transform 300ms ease;
98
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
67
99
  }
68
100
  .e-ddt .e-ddt-hidden {
69
101
  border: 0;
@@ -72,7 +104,8 @@
72
104
  width: 0;
73
105
  }
74
106
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
75
- box-sizing: content-box;
107
+ -webkit-box-sizing: content-box;
108
+ box-sizing: content-box;
76
109
  min-height: 30px;
77
110
  }
78
111
  .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
@@ -103,6 +136,7 @@
103
136
  padding-right: 0;
104
137
  }
105
138
  .e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
139
+ display: -webkit-box;
106
140
  display: -ms-flexbox;
107
141
  display: flex;
108
142
  }
@@ -110,20 +144,25 @@
110
144
  width: 100%;
111
145
  }
112
146
  .e-ddt.e-show-chip .e-chips-close {
113
- line-height: 21px;
114
147
  min-height: 26px;
115
148
  min-width: 18px;
149
+ line-height: 21px;
116
150
  text-align: center;
117
151
  }
118
152
  .e-ddt.e-show-chip .e-chips-close::before {
119
153
  font-size: 10px;
154
+ }
155
+ .e-ddt.e-show-chip .e-chips-close::before {
120
156
  vertical-align: middle;
121
157
  }
122
158
  .e-ddt.e-show-chip .e-chips {
123
- -ms-flex-align: center;
124
- align-items: center;
159
+ -webkit-box-align: center;
160
+ -ms-flex-align: center;
161
+ align-items: center;
125
162
  border-radius: 0;
126
- box-sizing: border-box;
163
+ -webkit-box-sizing: border-box;
164
+ box-sizing: border-box;
165
+ display: -webkit-inline-box;
127
166
  display: -ms-inline-flexbox;
128
167
  display: inline-flex;
129
168
  float: left;
@@ -151,7 +190,8 @@
151
190
  padding: 6px 10px 0 10px;
152
191
  }
153
192
  .e-ddt .e-overflow.e-total-count {
154
- box-sizing: border-box;
193
+ -webkit-box-sizing: border-box;
194
+ box-sizing: border-box;
155
195
  display: inline-block;
156
196
  overflow: hidden;
157
197
  text-overflow: ellipsis;
@@ -195,10 +235,12 @@
195
235
  .e-ddt .e-dropdowntree.e-chip-input,
196
236
  .e-ddt input[readonly].e-input.e-chip-input {
197
237
  width: 0;
238
+ display: none;
198
239
  }
199
240
  .e-ddt.e-popup {
200
241
  border: 1px solid #969696;
201
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
242
+ -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
243
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
202
244
  position: absolute;
203
245
  }
204
246
  .e-ddt.e-popup .e-selectall-parent {
@@ -224,19 +266,18 @@
224
266
  font-size: 14px;
225
267
  margin: 10px;
226
268
  }
227
- .e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
228
- padding: 0 12px;
229
- }
230
269
  .e-ddt.e-popup .e-filter-wrap {
231
- border: 1px solid #fff;
232
270
  border-top-width: 0;
233
271
  display: block;
234
272
  padding: 5px;
235
- }
236
- .e-ddt.e-popup .e-filter-wrap {
273
+ border: 1px solid #fff;
237
274
  border-left-width: 0;
238
275
  border-right-width: 0;
239
276
  }
277
+ .e-ddt.e-popup .e-filter-wrap .e-input,
278
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
279
+ padding: 0 12px;
280
+ }
240
281
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
241
282
  margin-bottom: 0;
242
283
  }
@@ -251,8 +292,8 @@
251
292
  cursor: default;
252
293
  font-family: inherit;
253
294
  font-size: 14px;
254
- padding: 14px 16px;
255
295
  text-align: center;
296
+ padding: 14px 16px;
256
297
  }
257
298
  .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
258
299
  display: none;
@@ -307,16 +348,16 @@
307
348
  padding: 6px 10px 0 10px;
308
349
  }
309
350
  .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
310
- margin-left: 30px;
311
351
  margin-right: 1px;
352
+ margin-left: 30px;
312
353
  }
313
354
  .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
314
- margin-left: 30px;
315
355
  margin-right: 1px;
356
+ margin-left: 30px;
316
357
  }
317
358
  .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
318
- margin-left: 60px;
319
359
  margin-right: 1px;
360
+ margin-left: 60px;
320
361
  }
321
362
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
322
363
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-clear-icon,
@@ -389,18 +430,18 @@
389
430
  }
390
431
  .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
391
432
  .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
392
- margin-left: 38px;
393
433
  margin-right: 1px;
434
+ margin-left: 38px;
394
435
  }
395
436
  .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
396
437
  .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
397
- margin-left: 38px;
398
438
  margin-right: 1px;
439
+ margin-left: 38px;
399
440
  }
400
441
  .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
401
442
  .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
402
- margin-left: 76px;
403
- margin-right: 1px;
443
+ margin-right: 76px;
444
+ margin-left: 1px;
404
445
  }
405
446
  .e-bigger .e-ddt.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-rtl.e-show-text.e-input-group.e-show-dd-icon .e-clear-icon,
406
447
  .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
@@ -0,0 +1,11 @@
1
+ @include export-module('dropdowntree-bootstrap5-icons') {
2
+ .e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e734';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e7e7';
9
+ }
10
+ }
11
+ }
@@ -0,0 +1,14 @@
1
+ @include export-module('dropdowntree-fluent2-icons') {
2
+ .e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e729';
5
+ padding: 3px;
6
+ }
7
+
8
+ .e-chips-close::before,
9
+ .e-clear-icon::before {
10
+ content: '\e7e7';
11
+ font-family: 'e-icons';
12
+ }
13
+ }
14
+ }