@syncfusion/ej2-dropdowns 25.2.7 → 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 (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
@@ -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;
@@ -54,40 +54,82 @@
54
54
  }
55
55
 
56
56
  /* stylelint-disable property-no-vendor-prefix */
57
+ @-webkit-keyframes e-input-ripple {
58
+ 100% {
59
+ opacity: 0;
60
+ -webkit-transform: scale(4);
61
+ transform: scale(4);
62
+ }
63
+ }
57
64
  @keyframes e-input-ripple {
58
65
  100% {
59
66
  opacity: 0;
60
- transform: scale(4);
67
+ -webkit-transform: scale(4);
68
+ transform: scale(4);
69
+ }
70
+ }
71
+ @-webkit-keyframes slideTopUp {
72
+ from {
73
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
74
+ transform: translate3d(0, 0, 0) scale(1);
75
+ }
76
+ to {
77
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
78
+ transform: translate3d(0, 0, 0) scale(1);
61
79
  }
62
80
  }
63
81
  @keyframes slideTopUp {
64
82
  from {
65
- transform: translate3d(0, 0, 0) scale(1);
83
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
84
+ transform: translate3d(0, 0, 0) scale(1);
66
85
  }
67
86
  to {
68
- transform: translate3d(0, 0, 0) scale(1);
87
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
88
+ transform: translate3d(0, 0, 0) scale(1);
69
89
  }
70
90
  }
71
91
  /* stylelint-disable-line no-empty-source */
72
92
  /* stylelint-disable property-no-vendor-prefix */
93
+ @-webkit-keyframes material-spinner-rotate {
94
+ 0% {
95
+ -webkit-transform: rotate(0deg);
96
+ transform: rotate(0deg);
97
+ }
98
+ 100% {
99
+ -webkit-transform: rotate(360deg);
100
+ transform: rotate(360deg);
101
+ }
102
+ }
73
103
  @keyframes material-spinner-rotate {
74
104
  0% {
105
+ -webkit-transform: rotate(0deg);
106
+ transform: rotate(0deg);
107
+ }
108
+ 100% {
109
+ -webkit-transform: rotate(360deg);
110
+ transform: rotate(360deg);
111
+ }
112
+ }
113
+ @-webkit-keyframes fabric-spinner-rotate {
114
+ 0% {
115
+ -webkit-transform: rotate(0deg);
75
116
  transform: rotate(0deg);
76
117
  }
77
118
  100% {
119
+ -webkit-transform: rotate(360deg);
78
120
  transform: rotate(360deg);
79
121
  }
80
122
  }
81
123
  @keyframes fabric-spinner-rotate {
82
124
  0% {
125
+ -webkit-transform: rotate(0deg);
83
126
  transform: rotate(0deg);
84
127
  }
85
128
  100% {
129
+ -webkit-transform: rotate(360deg);
86
130
  transform: rotate(360deg);
87
131
  }
88
132
  }
89
- /*! TreeView's Material 3 theme wise override definitions and variables */
90
- /* stylelint-disable */
91
133
  .e-dropdownbase .e-list-item .e-list-icon {
92
134
  padding: 0 16px 0 0;
93
135
  }
@@ -100,7 +142,6 @@
100
142
  padding: 0 16px 0 0;
101
143
  }
102
144
 
103
- /* stylelint-disable */
104
145
  .e-ddt .e-ddt-icon::before {
105
146
  content: "\e70d";
106
147
  }
@@ -113,16 +154,24 @@
113
154
  outline: none;
114
155
  }
115
156
  .e-ddt .e-ddt-icon::before {
116
- transform: rotate(0deg);
157
+ -webkit-transform: rotate(0deg);
158
+ transform: rotate(0deg);
159
+ -webkit-transition: -webkit-transform 300ms ease;
160
+ transition: -webkit-transform 300ms ease;
117
161
  transition: transform 300ms ease;
162
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
118
163
  }
119
164
  .e-ddt.e-icon-anim .e-ddt-icon {
120
165
  background: rgba(28, 27, 31, 0.08);
121
166
  border-radius: 16px;
122
167
  }
123
168
  .e-ddt.e-icon-anim .e-ddt-icon::before {
124
- transform: rotate(180deg);
169
+ -webkit-transform: rotate(180deg);
170
+ transform: rotate(180deg);
171
+ -webkit-transition: -webkit-transform 300ms ease;
172
+ transition: -webkit-transform 300ms ease;
125
173
  transition: transform 300ms ease;
174
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
126
175
  }
127
176
  .e-ddt .e-ddt-hidden {
128
177
  border: 0;
@@ -131,7 +180,8 @@
131
180
  width: 0;
132
181
  }
133
182
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
134
- box-sizing: content-box;
183
+ -webkit-box-sizing: content-box;
184
+ box-sizing: content-box;
135
185
  margin: 0;
136
186
  }
137
187
  .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 {
@@ -166,6 +216,7 @@
166
216
  padding-right: 0;
167
217
  }
168
218
  .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 {
219
+ display: -webkit-box;
169
220
  display: -ms-flexbox;
170
221
  display: flex;
171
222
  }
@@ -181,10 +232,13 @@
181
232
  font-size: 10px;
182
233
  }
183
234
  .e-ddt.e-show-chip .e-chips {
184
- -ms-flex-align: center;
185
- align-items: center;
235
+ -webkit-box-align: center;
236
+ -ms-flex-align: center;
237
+ align-items: center;
186
238
  border-radius: 4px;
187
- box-sizing: border-box;
239
+ -webkit-box-sizing: border-box;
240
+ box-sizing: border-box;
241
+ display: -webkit-inline-box;
188
242
  display: -ms-inline-flexbox;
189
243
  display: inline-flex;
190
244
  float: left;
@@ -211,7 +265,8 @@
211
265
  padding: 0 8px;
212
266
  }
213
267
  .e-ddt .e-overflow.e-total-count {
214
- box-sizing: border-box;
268
+ -webkit-box-sizing: border-box;
269
+ box-sizing: border-box;
215
270
  display: inline-block;
216
271
  overflow: hidden;
217
272
  text-overflow: ellipsis;
@@ -257,9 +312,10 @@
257
312
  width: 0;
258
313
  }
259
314
  .e-ddt.e-popup {
260
- border-radius: 4px;
261
315
  margin-top: 2px;
262
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
316
+ border-radius: 4px;
317
+ -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
318
+ box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
263
319
  position: absolute;
264
320
  }
265
321
  .e-ddt.e-popup .e-selectall-parent {
@@ -286,14 +342,15 @@
286
342
  font-size: 14px;
287
343
  margin: 0 12px;
288
344
  }
289
- .e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
290
- padding: 8px 16px 8px;
291
- }
292
345
  .e-ddt.e-popup .e-filter-wrap {
293
- border: 1px solid rgba(var(--color-sf-outline-variant));
294
346
  border-top-width: 0;
295
347
  display: block;
296
348
  padding: 0;
349
+ border: 1px solid rgba(var(--color-sf-outline-variant));
350
+ }
351
+ .e-ddt.e-popup .e-filter-wrap .e-input,
352
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
353
+ padding: 8px 16px 8px;
297
354
  }
298
355
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
299
356
  margin-bottom: 0;
@@ -309,8 +366,8 @@
309
366
  cursor: default;
310
367
  font-family: inherit;
311
368
  font-size: 14px;
312
- padding: 14px 16px;
313
369
  text-align: center;
370
+ padding: 14px 16px;
314
371
  }
315
372
  .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
316
373
  display: none;
@@ -356,16 +413,16 @@
356
413
  padding: 0 8px;
357
414
  }
358
415
  .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
359
- margin-left: 30px;
360
416
  margin-right: 1px;
417
+ margin-left: 30px;
361
418
  }
362
419
  .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
363
- margin-left: 20px;
364
420
  margin-right: 1px;
421
+ margin-left: 20px;
365
422
  }
366
423
  .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
367
- margin-left: 48px;
368
424
  margin-right: 1px;
425
+ margin-left: 48px;
369
426
  }
370
427
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
371
428
  .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,
@@ -425,8 +482,8 @@
425
482
  }
426
483
  .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
427
484
  .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
428
- margin-left: 52px;
429
- margin-right: 1px;
485
+ margin-right: 52px;
486
+ margin-left: 1px;
430
487
  }
431
488
  .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,
432
489
  .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
@@ -435,6 +492,7 @@
435
492
  }
436
493
 
437
494
  .e-ddt .e-chips {
495
+ background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
438
496
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
439
497
  border-color: rgba(var(--color-sf-outline));
440
498
  border: 1px solid;
@@ -445,16 +503,11 @@
445
503
  .e-ddt .e-chips > .e-chipcontent {
446
504
  color: rgba(var(--color-sf-on-surface));
447
505
  }
448
- .e-ddt .e-chips:hover {
449
- background: rgba(var(--color-sf-on-surface), 0.05);
450
- }
451
- .e-ddt .e-chips:hover > .e-chipcontent {
452
- color: rgba(var(--color-sf-on-surface));
453
- }
454
506
  .e-ddt .e-overflow .e-remain {
455
507
  color: #757575;
456
508
  }
457
509
  .e-ddt.e-popup {
510
+ background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
458
511
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
459
512
  border-color: rgba(var(--color-sf-outline-variant));
460
513
  }
@@ -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;
@@ -110,40 +110,82 @@
110
110
  }
111
111
 
112
112
  /* stylelint-disable property-no-vendor-prefix */
113
+ @-webkit-keyframes e-input-ripple {
114
+ 100% {
115
+ opacity: 0;
116
+ -webkit-transform: scale(4);
117
+ transform: scale(4);
118
+ }
119
+ }
113
120
  @keyframes e-input-ripple {
114
121
  100% {
115
122
  opacity: 0;
116
- transform: scale(4);
123
+ -webkit-transform: scale(4);
124
+ transform: scale(4);
125
+ }
126
+ }
127
+ @-webkit-keyframes slideTopUp {
128
+ from {
129
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
130
+ transform: translate3d(0, 0, 0) scale(1);
131
+ }
132
+ to {
133
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
134
+ transform: translate3d(0, 0, 0) scale(1);
117
135
  }
118
136
  }
119
137
  @keyframes slideTopUp {
120
138
  from {
121
- transform: translate3d(0, 0, 0) scale(1);
139
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
140
+ transform: translate3d(0, 0, 0) scale(1);
122
141
  }
123
142
  to {
124
- transform: translate3d(0, 0, 0) scale(1);
143
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
144
+ transform: translate3d(0, 0, 0) scale(1);
125
145
  }
126
146
  }
127
147
  /* stylelint-disable-line no-empty-source */
128
148
  /* stylelint-disable property-no-vendor-prefix */
149
+ @-webkit-keyframes material-spinner-rotate {
150
+ 0% {
151
+ -webkit-transform: rotate(0deg);
152
+ transform: rotate(0deg);
153
+ }
154
+ 100% {
155
+ -webkit-transform: rotate(360deg);
156
+ transform: rotate(360deg);
157
+ }
158
+ }
129
159
  @keyframes material-spinner-rotate {
130
160
  0% {
161
+ -webkit-transform: rotate(0deg);
162
+ transform: rotate(0deg);
163
+ }
164
+ 100% {
165
+ -webkit-transform: rotate(360deg);
166
+ transform: rotate(360deg);
167
+ }
168
+ }
169
+ @-webkit-keyframes fabric-spinner-rotate {
170
+ 0% {
171
+ -webkit-transform: rotate(0deg);
131
172
  transform: rotate(0deg);
132
173
  }
133
174
  100% {
175
+ -webkit-transform: rotate(360deg);
134
176
  transform: rotate(360deg);
135
177
  }
136
178
  }
137
179
  @keyframes fabric-spinner-rotate {
138
180
  0% {
181
+ -webkit-transform: rotate(0deg);
139
182
  transform: rotate(0deg);
140
183
  }
141
184
  100% {
185
+ -webkit-transform: rotate(360deg);
142
186
  transform: rotate(360deg);
143
187
  }
144
188
  }
145
- /*! TreeView's Material 3 theme wise override definitions and variables */
146
- /* stylelint-disable */
147
189
  .e-dropdownbase .e-list-item .e-list-icon {
148
190
  padding: 0 16px 0 0;
149
191
  }
@@ -156,7 +198,6 @@
156
198
  padding: 0 16px 0 0;
157
199
  }
158
200
 
159
- /* stylelint-disable */
160
201
  .e-ddt .e-ddt-icon::before {
161
202
  content: "\e70d";
162
203
  }
@@ -169,16 +210,24 @@
169
210
  outline: none;
170
211
  }
171
212
  .e-ddt .e-ddt-icon::before {
172
- transform: rotate(0deg);
213
+ -webkit-transform: rotate(0deg);
214
+ transform: rotate(0deg);
215
+ -webkit-transition: -webkit-transform 300ms ease;
216
+ transition: -webkit-transform 300ms ease;
173
217
  transition: transform 300ms ease;
218
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
174
219
  }
175
220
  .e-ddt.e-icon-anim .e-ddt-icon {
176
221
  background: rgba(28, 27, 31, 0.08);
177
222
  border-radius: 16px;
178
223
  }
179
224
  .e-ddt.e-icon-anim .e-ddt-icon::before {
180
- transform: rotate(180deg);
225
+ -webkit-transform: rotate(180deg);
226
+ transform: rotate(180deg);
227
+ -webkit-transition: -webkit-transform 300ms ease;
228
+ transition: -webkit-transform 300ms ease;
181
229
  transition: transform 300ms ease;
230
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
182
231
  }
183
232
  .e-ddt .e-ddt-hidden {
184
233
  border: 0;
@@ -187,7 +236,8 @@
187
236
  width: 0;
188
237
  }
189
238
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
190
- box-sizing: content-box;
239
+ -webkit-box-sizing: content-box;
240
+ box-sizing: content-box;
191
241
  margin: 0;
192
242
  }
193
243
  .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 {
@@ -222,6 +272,7 @@
222
272
  padding-right: 0;
223
273
  }
224
274
  .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 {
275
+ display: -webkit-box;
225
276
  display: -ms-flexbox;
226
277
  display: flex;
227
278
  }
@@ -237,10 +288,13 @@
237
288
  font-size: 10px;
238
289
  }
239
290
  .e-ddt.e-show-chip .e-chips {
240
- -ms-flex-align: center;
241
- align-items: center;
291
+ -webkit-box-align: center;
292
+ -ms-flex-align: center;
293
+ align-items: center;
242
294
  border-radius: 4px;
243
- box-sizing: border-box;
295
+ -webkit-box-sizing: border-box;
296
+ box-sizing: border-box;
297
+ display: -webkit-inline-box;
244
298
  display: -ms-inline-flexbox;
245
299
  display: inline-flex;
246
300
  float: left;
@@ -267,7 +321,8 @@
267
321
  padding: 0 8px;
268
322
  }
269
323
  .e-ddt .e-overflow.e-total-count {
270
- box-sizing: border-box;
324
+ -webkit-box-sizing: border-box;
325
+ box-sizing: border-box;
271
326
  display: inline-block;
272
327
  overflow: hidden;
273
328
  text-overflow: ellipsis;
@@ -313,9 +368,10 @@
313
368
  width: 0;
314
369
  }
315
370
  .e-ddt.e-popup {
316
- border-radius: 4px;
317
371
  margin-top: 2px;
318
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
372
+ border-radius: 4px;
373
+ -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
374
+ box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
319
375
  position: absolute;
320
376
  }
321
377
  .e-ddt.e-popup .e-selectall-parent {
@@ -342,14 +398,15 @@
342
398
  font-size: 14px;
343
399
  margin: 0 12px;
344
400
  }
345
- .e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
346
- padding: 8px 16px 8px;
347
- }
348
401
  .e-ddt.e-popup .e-filter-wrap {
349
- border: 1px solid rgba(var(--color-sf-outline-variant));
350
402
  border-top-width: 0;
351
403
  display: block;
352
404
  padding: 0;
405
+ border: 1px solid rgba(var(--color-sf-outline-variant));
406
+ }
407
+ .e-ddt.e-popup .e-filter-wrap .e-input,
408
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
409
+ padding: 8px 16px 8px;
353
410
  }
354
411
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
355
412
  margin-bottom: 0;
@@ -365,8 +422,8 @@
365
422
  cursor: default;
366
423
  font-family: inherit;
367
424
  font-size: 14px;
368
- padding: 14px 16px;
369
425
  text-align: center;
426
+ padding: 14px 16px;
370
427
  }
371
428
  .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
372
429
  display: none;
@@ -412,16 +469,16 @@
412
469
  padding: 0 8px;
413
470
  }
414
471
  .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
415
- margin-left: 30px;
416
472
  margin-right: 1px;
473
+ margin-left: 30px;
417
474
  }
418
475
  .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
419
- margin-left: 20px;
420
476
  margin-right: 1px;
477
+ margin-left: 20px;
421
478
  }
422
479
  .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
423
- margin-left: 48px;
424
480
  margin-right: 1px;
481
+ margin-left: 48px;
425
482
  }
426
483
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
427
484
  .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,
@@ -481,8 +538,8 @@
481
538
  }
482
539
  .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
483
540
  .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
484
- margin-left: 52px;
485
- margin-right: 1px;
541
+ margin-right: 52px;
542
+ margin-left: 1px;
486
543
  }
487
544
  .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,
488
545
  .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
@@ -491,6 +548,7 @@
491
548
  }
492
549
 
493
550
  .e-ddt .e-chips {
551
+ background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
494
552
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
495
553
  border-color: rgba(var(--color-sf-outline));
496
554
  border: 1px solid;
@@ -501,16 +559,11 @@
501
559
  .e-ddt .e-chips > .e-chipcontent {
502
560
  color: rgba(var(--color-sf-on-surface));
503
561
  }
504
- .e-ddt .e-chips:hover {
505
- background: rgba(var(--color-sf-on-surface), 0.05);
506
- }
507
- .e-ddt .e-chips:hover > .e-chipcontent {
508
- color: rgba(var(--color-sf-on-surface));
509
- }
510
562
  .e-ddt .e-overflow .e-remain {
511
563
  color: #757575;
512
564
  }
513
565
  .e-ddt.e-popup {
566
+ background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
514
567
  background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
515
568
  border-color: rgba(var(--color-sf-outline-variant));
516
569
  }