@syncfusion/ej2-dropdowns 18.1.57 → 18.2.44-4569

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 (183) hide show
  1. package/.eslintrc.json +244 -0
  2. package/CHANGELOG.md +1524 -1514
  3. package/README.md +118 -118
  4. package/dist/ej2-dropdowns.umd.min.js +1 -10
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +198 -126
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +290 -217
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +1 -10
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/global/index.d.ts +0 -9
  13. package/dist/ts/auto-complete/auto-complete.ts +527 -0
  14. package/dist/ts/combo-box/combo-box.ts +957 -0
  15. package/dist/ts/common/highlight-search.ts +47 -0
  16. package/dist/ts/common/incremental-search.ts +81 -0
  17. package/dist/ts/drop-down-base/drop-down-base.ts +1572 -0
  18. package/dist/ts/drop-down-list/drop-down-list.ts +2993 -0
  19. package/dist/ts/drop-down-tree/drop-down-tree.ts +3066 -0
  20. package/dist/ts/list-box/list-box.ts +2317 -0
  21. package/dist/ts/multi-select/checkbox-selection.ts +528 -0
  22. package/dist/ts/multi-select/float-label.ts +155 -0
  23. package/dist/ts/multi-select/interface.ts +66 -0
  24. package/dist/ts/multi-select/multi-select.ts +4216 -0
  25. package/helpers/e2e/index.js +3 -3
  26. package/license +2 -2
  27. package/package.json +77 -77
  28. package/src/auto-complete/auto-complete-model.d.ts +179 -179
  29. package/src/auto-complete/auto-complete.d.ts +12 -12
  30. package/src/auto-complete/auto-complete.js +21 -21
  31. package/src/combo-box/combo-box-model.d.ts +212 -212
  32. package/src/combo-box/combo-box.d.ts +27 -27
  33. package/src/combo-box/combo-box.js +29 -29
  34. package/src/common/incremental-search.d.ts +1 -1
  35. package/src/common/incremental-search.js +4 -2
  36. package/src/drop-down-base/drop-down-base-model.d.ts +191 -191
  37. package/src/drop-down-base/drop-down-base.d.ts +17 -17
  38. package/src/drop-down-base/drop-down-base.js +20 -20
  39. package/src/drop-down-list/drop-down-list-model.d.ts +222 -222
  40. package/src/drop-down-list/drop-down-list.d.ts +3 -2
  41. package/src/drop-down-list/drop-down-list.js +43 -30
  42. package/src/drop-down-tree/drop-down-tree-model.d.ts +344 -344
  43. package/src/drop-down-tree/drop-down-tree.js +32 -26
  44. package/src/list-box/index.d.ts +1 -0
  45. package/src/list-box/index.js +1 -0
  46. package/src/list-box/list-box-model.d.ts +156 -156
  47. package/src/list-box/list-box.d.ts +2 -2
  48. package/src/list-box/list-box.js +57 -59
  49. package/src/multi-select/index.d.ts +1 -0
  50. package/src/multi-select/index.js +1 -0
  51. package/src/multi-select/multi-select-model.d.ts +452 -452
  52. package/src/multi-select/multi-select.d.ts +2 -0
  53. package/src/multi-select/multi-select.js +98 -43
  54. package/styles/_all.scss +3 -3
  55. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  56. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  57. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  58. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  59. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  60. package/styles/bootstrap-dark.css +67 -61
  61. package/styles/bootstrap.css +69 -63
  62. package/styles/bootstrap4.css +81 -61
  63. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  64. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  65. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  66. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  67. package/styles/combo-box/_material-dark-definition.scss +2 -2
  68. package/styles/drop-down-base/_all.scss +2 -2
  69. package/styles/drop-down-base/_bootstrap-dark-definition.scss +64 -64
  70. package/styles/drop-down-base/_bootstrap-definition.scss +64 -64
  71. package/styles/drop-down-base/_bootstrap4-definition.scss +78 -78
  72. package/styles/drop-down-base/_definition.scss +23 -23
  73. package/styles/drop-down-base/_fabric-dark-definition.scss +68 -68
  74. package/styles/drop-down-base/_fabric-definition.scss +66 -66
  75. package/styles/drop-down-base/_highcontrast-definition.scss +82 -82
  76. package/styles/drop-down-base/_highcontrast-light-definition.scss +81 -81
  77. package/styles/drop-down-base/_layout.scss +108 -108
  78. package/styles/drop-down-base/_material-dark-definition.scss +67 -67
  79. package/styles/drop-down-base/_material-definition.scss +65 -65
  80. package/styles/drop-down-base/_theme.scss +242 -242
  81. package/styles/drop-down-list/_all.scss +2 -2
  82. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  83. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  84. package/styles/drop-down-list/_bootstrap4-definition.scss +184 -184
  85. package/styles/drop-down-list/_fabric-dark-definition.scss +127 -127
  86. package/styles/drop-down-list/_fabric-definition.scss +122 -122
  87. package/styles/drop-down-list/_highcontrast-definition.scss +131 -131
  88. package/styles/drop-down-list/_highcontrast-light-definition.scss +133 -133
  89. package/styles/drop-down-list/_layout.scss +218 -218
  90. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  91. package/styles/drop-down-list/_material-definition.scss +166 -166
  92. package/styles/drop-down-list/_theme.scss +10 -10
  93. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  94. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  95. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  96. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  97. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  98. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  99. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  100. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  101. package/styles/drop-down-list/icons/_material.scss +14 -14
  102. package/styles/drop-down-list/material.css +9 -0
  103. package/styles/drop-down-tree/_all.scss +2 -2
  104. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +62 -49
  105. package/styles/drop-down-tree/_bootstrap-definition.scss +62 -49
  106. package/styles/drop-down-tree/_bootstrap4-definition.scss +63 -50
  107. package/styles/drop-down-tree/_fabric-dark-definition.scss +63 -49
  108. package/styles/drop-down-tree/_fabric-definition.scss +63 -49
  109. package/styles/drop-down-tree/_highcontrast-definition.scss +63 -49
  110. package/styles/drop-down-tree/_highcontrast-light-definition.scss +63 -49
  111. package/styles/drop-down-tree/_layout.scss +437 -398
  112. package/styles/drop-down-tree/_material-dark-definition.scss +61 -54
  113. package/styles/drop-down-tree/_material-definition.scss +61 -54
  114. package/styles/drop-down-tree/_theme.scss +68 -63
  115. package/styles/drop-down-tree/bootstrap-dark.css +67 -61
  116. package/styles/drop-down-tree/bootstrap.css +69 -63
  117. package/styles/drop-down-tree/bootstrap4.css +81 -61
  118. package/styles/drop-down-tree/fabric-dark.css +71 -63
  119. package/styles/drop-down-tree/fabric.css +71 -63
  120. package/styles/drop-down-tree/highcontrast-light.css +71 -63
  121. package/styles/drop-down-tree/highcontrast.css +75 -63
  122. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  123. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  124. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  125. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  126. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  127. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  128. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  129. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  130. package/styles/drop-down-tree/icons/_material.scss +11 -11
  131. package/styles/drop-down-tree/material-dark.css +76 -85
  132. package/styles/drop-down-tree/material.css +93 -85
  133. package/styles/fabric-dark.css +71 -63
  134. package/styles/fabric.css +71 -63
  135. package/styles/highcontrast-light.css +71 -63
  136. package/styles/highcontrast.css +75 -63
  137. package/styles/list-box/_all.scss +2 -2
  138. package/styles/list-box/_bootstrap-dark-definition.scss +118 -118
  139. package/styles/list-box/_bootstrap-definition.scss +112 -112
  140. package/styles/list-box/_bootstrap4-definition.scss +118 -118
  141. package/styles/list-box/_fabric-dark-definition.scss +118 -118
  142. package/styles/list-box/_fabric-definition.scss +112 -112
  143. package/styles/list-box/_highcontrast-definition.scss +112 -112
  144. package/styles/list-box/_highcontrast-light-definition.scss +118 -118
  145. package/styles/list-box/_layout.scss +458 -458
  146. package/styles/list-box/_material-dark-definition.scss +118 -118
  147. package/styles/list-box/_material-definition.scss +112 -112
  148. package/styles/list-box/_theme.scss +273 -273
  149. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  150. package/styles/list-box/icons/_bootstrap.scss +25 -25
  151. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  152. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  153. package/styles/list-box/icons/_fabric.scss +25 -25
  154. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  155. package/styles/list-box/icons/_highcontrast.scss +25 -25
  156. package/styles/list-box/icons/_material-dark.scss +25 -25
  157. package/styles/list-box/icons/_material.scss +25 -25
  158. package/styles/list-box/material-dark.css +4 -4
  159. package/styles/list-box/material.css +4 -4
  160. package/styles/material-dark.css +80 -89
  161. package/styles/material.css +115 -89
  162. package/styles/multi-select/_all.scss +2 -2
  163. package/styles/multi-select/_bootstrap-dark-definition.scss +171 -171
  164. package/styles/multi-select/_bootstrap-definition.scss +166 -166
  165. package/styles/multi-select/_bootstrap4-definition.scss +233 -233
  166. package/styles/multi-select/_fabric-dark-definition.scss +170 -170
  167. package/styles/multi-select/_fabric-definition.scss +167 -167
  168. package/styles/multi-select/_highcontrast-definition.scss +257 -257
  169. package/styles/multi-select/_highcontrast-light-definition.scss +258 -258
  170. package/styles/multi-select/_layout.scss +1153 -1153
  171. package/styles/multi-select/_material-dark-definition.scss +186 -186
  172. package/styles/multi-select/_material-definition.scss +191 -191
  173. package/styles/multi-select/_theme.scss +384 -384
  174. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  175. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  176. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  177. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  178. package/styles/multi-select/icons/_fabric.scss +26 -26
  179. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  180. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  181. package/styles/multi-select/icons/_material-dark.scss +26 -26
  182. package/styles/multi-select/icons/_material.scss +324 -324
  183. package/styles/multi-select/material.css +9 -0
@@ -61,13 +61,13 @@
61
61
  outline: none;
62
62
  }
63
63
 
64
- .e-ddt.e-icon-anim .e-ddt-icon::before {
65
- transform: rotate(180deg);
64
+ .e-ddt .e-ddt-icon::before {
65
+ transform: rotate(0deg);
66
66
  transition: transform 300ms ease;
67
67
  }
68
68
 
69
- .e-ddt .e-ddt-icon::before {
70
- transform: rotate(0deg);
69
+ .e-ddt.e-icon-anim .e-ddt-icon::before {
70
+ transform: rotate(180deg);
71
71
  transition: transform 300ms ease;
72
72
  }
73
73
 
@@ -90,10 +90,6 @@
90
90
  display: none;
91
91
  }
92
92
 
93
- .e-ddt.e-input-group.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-ddt.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
94
- top: 16px;
95
- }
96
-
97
93
  .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
98
94
  bottom: 0;
99
95
  position: absolute;
@@ -122,27 +118,30 @@
122
118
  }
123
119
 
124
120
  .e-ddt .e-chips-wrapper .e-chips-close {
125
- line-height: 30px;
126
- min-height: 30px;
121
+ line-height: 24px;
122
+ min-height: 28px;
127
123
  min-width: 30px;
128
124
  text-align: center;
129
125
  }
130
126
 
131
127
  .e-ddt .e-chips-wrapper .e-chips-close::before {
132
128
  font-size: 10px;
129
+ vertical-align: middle;
133
130
  }
134
131
 
135
132
  .e-ddt .e-chips-wrapper .e-chips {
136
133
  -ms-flex-align: center;
137
134
  align-items: center;
135
+ border-radius: 4px;
136
+ box-sizing: border-box;
138
137
  display: -ms-inline-flexbox;
139
138
  display: inline-flex;
140
139
  float: left;
141
140
  height: 28px;
142
141
  margin: 2px 1px;
143
- max-width: 100%;
142
+ max-width: calc(100% - 2px);
144
143
  overflow: hidden;
145
- padding: 0 0 0 10px;
144
+ padding: 0;
146
145
  text-overflow: ellipsis;
147
146
  white-space: nowrap;
148
147
  }
@@ -150,22 +149,25 @@
150
149
  .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
151
150
  max-width: 100%;
152
151
  overflow: hidden;
153
- padding: 0 10px 0 0;
152
+ padding: 0 10px 0 10px;
154
153
  text-indent: 0;
155
154
  text-overflow: ellipsis;
156
155
  white-space: nowrap;
157
156
  }
158
157
 
159
- .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
160
- margin-right: 64px;
158
+ .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
159
+ margin-right: 32px;
160
+ max-width: calc(100% - 33px);
161
161
  }
162
162
 
163
- .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
163
+ .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
164
164
  margin-right: 32px;
165
+ max-width: calc(100% - 33px);
165
166
  }
166
167
 
167
- .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
168
- margin-right: 32px;
168
+ .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
169
+ margin-right: 64px;
170
+ max-width: calc(100% - 65px);
169
171
  }
170
172
 
171
173
  .e-ddt input[readonly],
@@ -181,9 +183,8 @@
181
183
  }
182
184
 
183
185
  .e-ddt.e-popup {
184
- border: 1px solid;
186
+ border: 1px solid #ccc;
185
187
  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);
186
- margin-top: 2px;
187
188
  position: absolute;
188
189
  }
189
190
 
@@ -194,7 +195,7 @@
194
195
  line-height: 36px;
195
196
  overflow: hidden;
196
197
  position: relative;
197
- text-indent: 39px;
198
+ text-indent: 38px;
198
199
  white-space: nowrap;
199
200
  width: 100%;
200
201
  }
@@ -204,7 +205,6 @@
204
205
  }
205
206
 
206
207
  .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
207
- margin-right: 10px;
208
208
  position: relative;
209
209
  text-indent: 0;
210
210
  }
@@ -212,10 +212,27 @@
212
212
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
213
213
  font-family: inherit;
214
214
  font-size: 14px;
215
+ margin: 10px;
216
+ }
217
+
218
+ .e-ddt.e-popup .e-filter-wrap .e-input,
219
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
220
+ padding: 0 12px;
221
+ }
222
+
223
+ .e-ddt.e-popup .e-filter-wrap {
224
+ border: none;
225
+ border-top-width: 0;
226
+ display: block;
227
+ padding: 5px 8px;
228
+ }
229
+
230
+ .e-ddt.e-popup .e-filter-wrap {
231
+ border-bottom: 1px solid #ccc;
215
232
  }
216
233
 
217
234
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
218
- padding: 0 10px;
235
+ margin-bottom: 0;
219
236
  }
220
237
 
221
238
  .e-ddt.e-popup .e-popup-content {
@@ -278,29 +295,26 @@
278
295
 
279
296
  .e-ddt.e-rtl .e-chips-wrapper .e-chips {
280
297
  float: right;
281
- padding: 0 10px 0 0;
282
- }
283
-
284
- .e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
285
- padding: 0 0 0 10px;
286
298
  }
287
299
 
288
- .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
289
- margin-left: 64px;
300
+ .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
301
+ margin-left: 32px;
290
302
  margin-right: 1px;
291
303
  }
292
304
 
293
- .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
305
+ .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
294
306
  margin-left: 32px;
295
307
  margin-right: 1px;
296
308
  }
297
309
 
298
- .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
299
- margin-left: 32px;
310
+ .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
311
+ margin-left: 64px;
300
312
  margin-right: 1px;
301
313
  }
302
314
 
303
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
315
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
316
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
317
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
304
318
  left: 0;
305
319
  right: auto;
306
320
  }
@@ -309,16 +323,6 @@
309
323
  left: 32px;
310
324
  }
311
325
 
312
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
313
- left: 0;
314
- right: auto;
315
- }
316
-
317
- .e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
318
- margin-left: 10px;
319
- margin-right: 0;
320
- }
321
-
322
326
  .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
323
327
  padding: 0 14px 0 0;
324
328
  }
@@ -346,24 +350,27 @@
346
350
  min-height: 38px;
347
351
  }
348
352
 
349
- .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
350
- .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
351
- margin-right: 76px;
353
+ .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
354
+ .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
355
+ margin-right: 38px;
356
+ max-width: calc(100% - 39px);
352
357
  }
353
358
 
354
- .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
355
- .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
359
+ .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
360
+ .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
356
361
  margin-right: 38px;
362
+ max-width: calc(100% - 39px);
357
363
  }
358
364
 
359
- .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
360
- .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
361
- margin-right: 38px;
365
+ .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
366
+ .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
367
+ margin-right: 76px;
368
+ max-width: calc(100% - 77px);
362
369
  }
363
370
 
364
371
  .e-bigger .e-ddt.e-popup .e-selectall-parent,
365
372
  .e-ddt.e-bigger.e-popup .e-selectall-parent {
366
- text-indent: 44px;
373
+ text-indent: 43px;
367
374
  }
368
375
 
369
376
  .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -371,21 +378,21 @@
371
378
  height: 44px;
372
379
  }
373
380
 
374
- .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
375
- .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
376
- margin-left: 76px;
381
+ .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
382
+ .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
383
+ margin-left: 38px;
377
384
  margin-right: 1px;
378
385
  }
379
386
 
380
- .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
381
- .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
387
+ .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
388
+ .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
382
389
  margin-left: 38px;
383
390
  margin-right: 1px;
384
391
  }
385
392
 
386
- .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
387
- .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
388
- margin-left: 38px;
393
+ .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
394
+ .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
395
+ margin-left: 76px;
389
396
  margin-right: 1px;
390
397
  }
391
398
 
@@ -397,7 +404,6 @@
397
404
 
398
405
  .e-ddt .e-chips {
399
406
  background-color: #e6e6e6;
400
- border-radius: 4px;
401
407
  }
402
408
 
403
409
  .e-ddt .e-chips .e-chips-close::before {
@@ -430,7 +436,7 @@
430
436
  }
431
437
 
432
438
  .e-ddt.e-popup .e-selectall-parent {
433
- border-bottom: 1px solid #e6e6e6;
439
+ border-bottom-color: #e6e6e6;
434
440
  }
435
441
 
436
442
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
@@ -77,13 +77,13 @@
77
77
  outline: none;
78
78
  }
79
79
 
80
- .e-ddt.e-icon-anim .e-ddt-icon::before {
81
- transform: rotate(180deg);
80
+ .e-ddt .e-ddt-icon::before {
81
+ transform: rotate(0deg);
82
82
  transition: transform 300ms ease;
83
83
  }
84
84
 
85
- .e-ddt .e-ddt-icon::before {
86
- transform: rotate(0deg);
85
+ .e-ddt.e-icon-anim .e-ddt-icon::before {
86
+ transform: rotate(180deg);
87
87
  transition: transform 300ms ease;
88
88
  }
89
89
 
@@ -107,10 +107,6 @@
107
107
  display: none;
108
108
  }
109
109
 
110
- .e-ddt.e-input-group.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-ddt.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
111
- top: 14px;
112
- }
113
-
114
110
  .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
115
111
  bottom: 0;
116
112
  position: absolute;
@@ -147,19 +143,22 @@
147
143
 
148
144
  .e-ddt .e-chips-wrapper .e-chips-close::before {
149
145
  font-size: 8px;
146
+ vertical-align: middle;
150
147
  }
151
148
 
152
149
  .e-ddt .e-chips-wrapper .e-chips {
153
150
  -ms-flex-align: center;
154
151
  align-items: center;
152
+ border-radius: 4px;
153
+ box-sizing: border-box;
155
154
  display: -ms-inline-flexbox;
156
155
  display: inline-flex;
157
156
  float: left;
158
157
  height: 25px;
159
158
  margin: 2px 1px;
160
- max-width: 100%;
159
+ max-width: calc(100% - 2px);
161
160
  overflow: hidden;
162
- padding: 0 0 0 8px;
161
+ padding: 0;
163
162
  text-overflow: ellipsis;
164
163
  white-space: nowrap;
165
164
  }
@@ -167,22 +166,25 @@
167
166
  .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
168
167
  max-width: 100%;
169
168
  overflow: hidden;
170
- padding: 0 8px 0 0;
169
+ padding: 0 8px 0 8px;
171
170
  text-indent: 0;
172
171
  text-overflow: ellipsis;
173
172
  white-space: nowrap;
174
173
  }
175
174
 
176
- .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
177
- margin-right: 48px;
175
+ .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
176
+ margin-right: 23px;
177
+ max-width: calc(100% - 24px);
178
178
  }
179
179
 
180
- .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
180
+ .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
181
181
  margin-right: 24px;
182
+ max-width: calc(100% - 25px);
182
183
  }
183
184
 
184
- .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
185
- margin-right: 23px;
185
+ .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
186
+ margin-right: 48px;
187
+ max-width: calc(100% - 48px);
186
188
  }
187
189
 
188
190
  .e-ddt input[readonly],
@@ -198,9 +200,9 @@
198
200
  }
199
201
 
200
202
  .e-ddt.e-popup {
201
- border: 1px solid;
203
+ border: 1px solid rgba(0, 0, 0, 0.15);
204
+ border-radius: 4px;
202
205
  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);
203
- margin-top: 2px;
204
206
  position: absolute;
205
207
  }
206
208
 
@@ -211,7 +213,7 @@
211
213
  line-height: 36px;
212
214
  overflow: hidden;
213
215
  position: relative;
214
- text-indent: 39px;
216
+ text-indent: 38px;
215
217
  white-space: nowrap;
216
218
  width: 100%;
217
219
  }
@@ -221,7 +223,6 @@
221
223
  }
222
224
 
223
225
  .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
224
- margin-right: 10px;
225
226
  position: relative;
226
227
  text-indent: 0;
227
228
  }
@@ -229,10 +230,28 @@
229
230
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
230
231
  font-family: inherit;
231
232
  font-size: 14px;
233
+ margin: 10px;
234
+ }
235
+
236
+ .e-ddt.e-popup .e-filter-wrap .e-input,
237
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
238
+ padding: 0 20px;
239
+ }
240
+
241
+ .e-ddt.e-popup .e-filter-wrap {
242
+ border: rgba(0, 0, 0, 0.12);
243
+ border-top-width: 0;
244
+ display: block;
245
+ padding: 0;
246
+ }
247
+
248
+ .e-ddt.e-popup .e-filter-wrap {
249
+ background: rgba(0, 0, 0, 0.03);
232
250
  }
233
251
 
234
252
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
235
- padding: 0 10px;
253
+ margin-bottom: 0;
254
+ background: rgba(0, 0, 0, 0.03);
236
255
  }
237
256
 
238
257
  .e-ddt.e-popup .e-popup-content {
@@ -295,29 +314,26 @@
295
314
 
296
315
  .e-ddt.e-rtl .e-chips-wrapper .e-chips {
297
316
  float: right;
298
- padding: 0 8px 0 0;
299
- }
300
-
301
- .e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
302
- padding: 0 0 0 8px;
303
317
  }
304
318
 
305
- .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
306
- margin-left: 48px;
319
+ .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
320
+ margin-left: 23px;
307
321
  margin-right: 1px;
308
322
  }
309
323
 
310
- .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
324
+ .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
311
325
  margin-left: 24px;
312
326
  margin-right: 1px;
313
327
  }
314
328
 
315
- .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
316
- margin-left: 23px;
329
+ .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
330
+ margin-left: 48px;
317
331
  margin-right: 1px;
318
332
  }
319
333
 
320
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon {
334
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
335
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
336
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
321
337
  left: 0;
322
338
  right: auto;
323
339
  }
@@ -326,16 +342,6 @@
326
342
  left: 23px;
327
343
  }
328
344
 
329
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
330
- left: 0;
331
- right: auto;
332
- }
333
-
334
- .e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
335
- margin-left: 10px;
336
- margin-right: 0;
337
- }
338
-
339
345
  .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
340
346
  padding: 0 14px 0 0;
341
347
  }
@@ -369,24 +375,39 @@
369
375
  min-height: 36px;
370
376
  }
371
377
 
372
- .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
373
- .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
374
- margin-right: 68px;
378
+ .e-bigger .e-ddt .e-chips-wrapper .e-chips-close,
379
+ .e-ddt.e-bigger .e-chips-wrapper .e-chips-close {
380
+ line-height: 27px;
381
+ min-height: 30px;
382
+ min-width: 30px;
375
383
  }
376
384
 
377
- .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
378
- .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
379
- margin-right: 35px;
385
+ .e-bigger .e-ddt .e-chips-wrapper .e-chips-close::before,
386
+ .e-ddt.e-bigger .e-chips-wrapper .e-chips-close::before {
387
+ font-size: 10px;
380
388
  }
381
389
 
382
- .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
383
- .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
390
+ .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
391
+ .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
384
392
  margin-right: 32px;
393
+ max-width: calc(100% - 34px);
394
+ }
395
+
396
+ .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
397
+ .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
398
+ margin-right: 35px;
399
+ max-width: calc(100% - 35px);
400
+ }
401
+
402
+ .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
403
+ .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
404
+ margin-right: 68px;
405
+ max-width: calc(100% - 68px);
385
406
  }
386
407
 
387
408
  .e-bigger .e-ddt.e-popup .e-selectall-parent,
388
409
  .e-ddt.e-bigger.e-popup .e-selectall-parent {
389
- text-indent: 44px;
410
+ text-indent: 43px;
390
411
  }
391
412
 
392
413
  .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -394,21 +415,21 @@
394
415
  height: 44px;
395
416
  }
396
417
 
397
- .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
398
- .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
399
- margin-left: 68px;
418
+ .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
419
+ .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
420
+ margin-left: 32px;
400
421
  margin-right: 1px;
401
422
  }
402
423
 
403
- .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
404
- .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
424
+ .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
425
+ .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
405
426
  margin-left: 35px;
406
427
  margin-right: 1px;
407
428
  }
408
429
 
409
- .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
410
- .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
411
- margin-left: 32px;
430
+ .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
431
+ .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
432
+ margin-left: 68px;
412
433
  margin-right: 1px;
413
434
  }
414
435
 
@@ -420,7 +441,6 @@
420
441
 
421
442
  .e-ddt .e-chips {
422
443
  background-color: #6c757d;
423
- border-radius: 4px;
424
444
  }
425
445
 
426
446
  .e-ddt .e-chips .e-chips-close::before {
@@ -458,7 +478,7 @@
458
478
  }
459
479
 
460
480
  .e-ddt.e-popup .e-selectall-parent {
461
- border-bottom: 1px solid #212529;
481
+ border-bottom-color: rgba(0, 0, 0, 0.15);
462
482
  }
463
483
 
464
484
  .e-ddt.e-popup .e-selectall-parent .e-all-text {