@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
@@ -79,13 +79,13 @@
79
79
  outline: none;
80
80
  }
81
81
 
82
- .e-ddt.e-icon-anim .e-ddt-icon::before {
83
- transform: rotate(180deg);
82
+ .e-ddt .e-ddt-icon::before {
83
+ transform: rotate(0deg);
84
84
  transition: transform 300ms ease;
85
85
  }
86
86
 
87
- .e-ddt .e-ddt-icon::before {
88
- transform: rotate(0deg);
87
+ .e-ddt.e-icon-anim .e-ddt-icon::before {
88
+ transform: rotate(180deg);
89
89
  transition: transform 300ms ease;
90
90
  }
91
91
 
@@ -108,10 +108,6 @@
108
108
  display: none;
109
109
  }
110
110
 
111
- .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 {
112
- top: 14px;
113
- }
114
-
115
111
  .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 {
116
112
  bottom: 0;
117
113
  position: absolute;
@@ -140,27 +136,30 @@
140
136
  }
141
137
 
142
138
  .e-ddt .e-chips-wrapper .e-chips-close {
143
- line-height: 26px;
139
+ line-height: 21px;
144
140
  min-height: 26px;
145
- min-width: 26px;
141
+ min-width: 18px;
146
142
  text-align: center;
147
143
  }
148
144
 
149
145
  .e-ddt .e-chips-wrapper .e-chips-close::before {
150
146
  font-size: 10px;
147
+ vertical-align: middle;
151
148
  }
152
149
 
153
150
  .e-ddt .e-chips-wrapper .e-chips {
154
151
  -ms-flex-align: center;
155
152
  align-items: center;
153
+ border-radius: 0;
154
+ box-sizing: border-box;
156
155
  display: -ms-inline-flexbox;
157
156
  display: inline-flex;
158
157
  float: left;
159
158
  height: 26px;
160
159
  margin: 2px 1px;
161
- max-width: 100%;
160
+ max-width: calc(100% - 2px);
162
161
  overflow: hidden;
163
- padding: 0 0 0 8px;
162
+ padding: 0 4px 0 4px;
164
163
  text-overflow: ellipsis;
165
164
  white-space: nowrap;
166
165
  }
@@ -168,22 +167,26 @@
168
167
  .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
169
168
  max-width: 100%;
170
169
  overflow: hidden;
171
- padding: 0 8px 0 0;
170
+ padding: 0 4px 0 4px;
172
171
  text-indent: 0;
173
172
  text-overflow: ellipsis;
174
173
  white-space: nowrap;
174
+ line-height: 26px;
175
175
  }
176
176
 
177
- .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
178
- margin-right: 60px;
177
+ .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
178
+ margin-right: 30px;
179
+ max-width: calc(100% - 31px);
179
180
  }
180
181
 
181
- .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
182
+ .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
182
183
  margin-right: 30px;
184
+ max-width: calc(100% - 31px);
183
185
  }
184
186
 
185
- .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
186
- margin-right: 30px;
187
+ .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
188
+ margin-right: 60px;
189
+ max-width: calc(100% - 61px);
187
190
  }
188
191
 
189
192
  .e-ddt input[readonly],
@@ -199,9 +202,8 @@
199
202
  }
200
203
 
201
204
  .e-ddt.e-popup {
202
- border: 1px solid;
205
+ border: 1px solid #757575;
203
206
  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);
204
- margin-top: 2px;
205
207
  position: absolute;
206
208
  }
207
209
 
@@ -212,7 +214,7 @@
212
214
  line-height: 36px;
213
215
  overflow: hidden;
214
216
  position: relative;
215
- text-indent: 39px;
217
+ text-indent: 38px;
216
218
  white-space: nowrap;
217
219
  width: 100%;
218
220
  }
@@ -222,7 +224,6 @@
222
224
  }
223
225
 
224
226
  .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
225
- margin-right: 10px;
226
227
  position: relative;
227
228
  text-indent: 0;
228
229
  }
@@ -230,10 +231,28 @@
230
231
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
231
232
  font-family: inherit;
232
233
  font-size: 14px;
234
+ margin: 10px;
235
+ }
236
+
237
+ .e-ddt.e-popup .e-filter-wrap .e-input,
238
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
239
+ padding: 0 12px;
240
+ }
241
+
242
+ .e-ddt.e-popup .e-filter-wrap {
243
+ border: 1px solid #000;
244
+ border-top-width: 0;
245
+ display: block;
246
+ padding: 5px;
247
+ }
248
+
249
+ .e-ddt.e-popup .e-filter-wrap {
250
+ border-left-width: 0;
251
+ border-right-width: 0;
233
252
  }
234
253
 
235
254
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
236
- padding: 0 10px;
255
+ margin-bottom: 0;
237
256
  }
238
257
 
239
258
  .e-ddt.e-popup .e-popup-content {
@@ -297,29 +316,26 @@
297
316
 
298
317
  .e-ddt.e-rtl .e-chips-wrapper .e-chips {
299
318
  float: right;
300
- padding: 0 8px 0 0;
301
319
  }
302
320
 
303
- .e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
304
- padding: 0 0 0 8px;
305
- }
306
-
307
- .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
308
- margin-left: 60px;
321
+ .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
322
+ margin-left: 30px;
309
323
  margin-right: 1px;
310
324
  }
311
325
 
312
- .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
326
+ .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
313
327
  margin-left: 30px;
314
328
  margin-right: 1px;
315
329
  }
316
330
 
317
- .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
318
- margin-left: 30px;
331
+ .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
332
+ margin-left: 60px;
319
333
  margin-right: 1px;
320
334
  }
321
335
 
322
- .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 {
336
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
337
+ .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,
338
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
323
339
  left: 0;
324
340
  right: auto;
325
341
  }
@@ -328,16 +344,6 @@
328
344
  left: 30px;
329
345
  }
330
346
 
331
- .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 {
332
- left: 0;
333
- right: auto;
334
- }
335
-
336
- .e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
337
- margin-left: 10px;
338
- margin-right: 0;
339
- }
340
-
341
347
  .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
342
348
  padding: 0 14px 0 0;
343
349
  }
@@ -365,24 +371,27 @@
365
371
  min-height: 38px;
366
372
  }
367
373
 
368
- .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
369
- .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
370
- margin-right: 76px;
374
+ .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
375
+ .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
376
+ margin-right: 38px;
377
+ max-width: calc(100% - 39px);
371
378
  }
372
379
 
373
- .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
374
- .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
380
+ .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
381
+ .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
375
382
  margin-right: 38px;
383
+ max-width: calc(100% - 39px);
376
384
  }
377
385
 
378
- .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
379
- .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
380
- margin-right: 38px;
386
+ .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
387
+ .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
388
+ margin-right: 76px;
389
+ max-width: calc(100% - 77px);
381
390
  }
382
391
 
383
392
  .e-bigger .e-ddt.e-popup .e-selectall-parent,
384
393
  .e-ddt.e-bigger.e-popup .e-selectall-parent {
385
- text-indent: 44px;
394
+ text-indent: 43px;
386
395
  }
387
396
 
388
397
  .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -390,21 +399,21 @@
390
399
  height: 48px;
391
400
  }
392
401
 
393
- .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
394
- .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
395
- margin-left: 76px;
402
+ .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
403
+ .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
404
+ margin-left: 38px;
396
405
  margin-right: 1px;
397
406
  }
398
407
 
399
- .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
400
- .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
408
+ .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
409
+ .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
401
410
  margin-left: 38px;
402
411
  margin-right: 1px;
403
412
  }
404
413
 
405
- .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
406
- .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
407
- margin-left: 38px;
414
+ .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
415
+ .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
416
+ margin-left: 76px;
408
417
  margin-right: 1px;
409
418
  }
410
419
 
@@ -416,7 +425,6 @@
416
425
 
417
426
  .e-ddt .e-chips {
418
427
  background-color: #3d3d3d;
419
- border-radius: 0;
420
428
  }
421
429
 
422
430
  .e-ddt .e-chips .e-chips-close::before {
@@ -449,7 +457,7 @@
449
457
  }
450
458
 
451
459
  .e-ddt.e-popup .e-selectall-parent {
452
- border-bottom: 1px solid #ecf;
460
+ border-bottom-color: #757575;
453
461
  }
454
462
 
455
463
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
@@ -80,13 +80,13 @@
80
80
  outline: none;
81
81
  }
82
82
 
83
- .e-ddt.e-icon-anim .e-ddt-icon::before {
84
- transform: rotate(180deg);
83
+ .e-ddt .e-ddt-icon::before {
84
+ transform: rotate(0deg);
85
85
  transition: transform 300ms ease;
86
86
  }
87
87
 
88
- .e-ddt .e-ddt-icon::before {
89
- transform: rotate(0deg);
88
+ .e-ddt.e-icon-anim .e-ddt-icon::before {
89
+ transform: rotate(180deg);
90
90
  transition: transform 300ms ease;
91
91
  }
92
92
 
@@ -109,10 +109,6 @@
109
109
  display: none;
110
110
  }
111
111
 
112
- .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 {
113
- top: 14px;
114
- }
115
-
116
112
  .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 {
117
113
  bottom: 0;
118
114
  position: absolute;
@@ -141,27 +137,30 @@
141
137
  }
142
138
 
143
139
  .e-ddt .e-chips-wrapper .e-chips-close {
144
- line-height: 26px;
140
+ line-height: 21px;
145
141
  min-height: 26px;
146
- min-width: 26px;
142
+ min-width: 18px;
147
143
  text-align: center;
148
144
  }
149
145
 
150
146
  .e-ddt .e-chips-wrapper .e-chips-close::before {
151
147
  font-size: 10px;
148
+ vertical-align: middle;
152
149
  }
153
150
 
154
151
  .e-ddt .e-chips-wrapper .e-chips {
155
152
  -ms-flex-align: center;
156
153
  align-items: center;
154
+ border-radius: 0;
155
+ box-sizing: border-box;
157
156
  display: -ms-inline-flexbox;
158
157
  display: inline-flex;
159
158
  float: left;
160
159
  height: 26px;
161
160
  margin: 2px 1px;
162
- max-width: 100%;
161
+ max-width: calc(100% - 2px);
163
162
  overflow: hidden;
164
- padding: 0 0 0 8px;
163
+ padding: 0 4px 0 4px;
165
164
  text-overflow: ellipsis;
166
165
  white-space: nowrap;
167
166
  }
@@ -169,22 +168,26 @@
169
168
  .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
170
169
  max-width: 100%;
171
170
  overflow: hidden;
172
- padding: 0 8px 0 0;
171
+ padding: 0 4px 0 4px;
173
172
  text-indent: 0;
174
173
  text-overflow: ellipsis;
175
174
  white-space: nowrap;
175
+ line-height: 26px;
176
176
  }
177
177
 
178
- .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
179
- margin-right: 60px;
178
+ .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
179
+ margin-right: 30px;
180
+ max-width: calc(100% - 31px);
180
181
  }
181
182
 
182
- .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
183
+ .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child {
183
184
  margin-right: 30px;
185
+ max-width: calc(100% - 31px);
184
186
  }
185
187
 
186
- .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
187
- margin-right: 30px;
188
+ .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
189
+ margin-right: 60px;
190
+ max-width: calc(100% - 61px);
188
191
  }
189
192
 
190
193
  .e-ddt input[readonly],
@@ -200,9 +203,8 @@
200
203
  }
201
204
 
202
205
  .e-ddt.e-popup {
203
- border: 1px solid;
206
+ border: 1px solid #969696;
204
207
  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);
205
- margin-top: 2px;
206
208
  position: absolute;
207
209
  }
208
210
 
@@ -213,7 +215,7 @@
213
215
  line-height: 36px;
214
216
  overflow: hidden;
215
217
  position: relative;
216
- text-indent: 39px;
218
+ text-indent: 38px;
217
219
  white-space: nowrap;
218
220
  width: 100%;
219
221
  }
@@ -223,7 +225,6 @@
223
225
  }
224
226
 
225
227
  .e-ddt.e-popup .e-selectall-parent .e-checkbox-wrapper {
226
- margin-right: 10px;
227
228
  position: relative;
228
229
  text-indent: 0;
229
230
  }
@@ -231,10 +232,28 @@
231
232
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
232
233
  font-family: inherit;
233
234
  font-size: 14px;
235
+ margin: 10px;
236
+ }
237
+
238
+ .e-ddt.e-popup .e-filter-wrap .e-input,
239
+ .e-ddt.e-popup .e-filter-wrap .e-input:focus {
240
+ padding: 0 12px;
241
+ }
242
+
243
+ .e-ddt.e-popup .e-filter-wrap {
244
+ border: 1px solid #fff;
245
+ border-top-width: 0;
246
+ display: block;
247
+ padding: 5px;
248
+ }
249
+
250
+ .e-ddt.e-popup .e-filter-wrap {
251
+ border-left-width: 0;
252
+ border-right-width: 0;
234
253
  }
235
254
 
236
255
  .e-ddt.e-popup .e-filter-wrap .e-input-group {
237
- padding: 0 10px;
256
+ margin-bottom: 0;
238
257
  }
239
258
 
240
259
  .e-ddt.e-popup .e-popup-content {
@@ -298,29 +317,26 @@
298
317
 
299
318
  .e-ddt.e-rtl .e-chips-wrapper .e-chips {
300
319
  float: right;
301
- padding: 0 8px 0 0;
302
- }
303
-
304
- .e-ddt.e-rtl .e-chips-wrapper .e-chips > .e-chipcontent {
305
- padding: 0 0 0 8px;
306
320
  }
307
321
 
308
- .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
309
- margin-left: 60px;
322
+ .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
323
+ margin-left: 30px;
310
324
  margin-right: 1px;
311
325
  }
312
326
 
313
- .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
327
+ .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
314
328
  margin-left: 30px;
315
329
  margin-right: 1px;
316
330
  }
317
331
 
318
- .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
319
- margin-left: 30px;
332
+ .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
333
+ margin-left: 60px;
320
334
  margin-right: 1px;
321
335
  }
322
336
 
323
- .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 {
337
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
338
+ .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,
339
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
324
340
  left: 0;
325
341
  right: auto;
326
342
  }
@@ -329,16 +345,6 @@
329
345
  left: 30px;
330
346
  }
331
347
 
332
- .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 {
333
- left: 0;
334
- right: auto;
335
- }
336
-
337
- .e-ddt.e-rtl.e-popup .e-selectall-parent .e-checkbox-wrapper {
338
- margin-left: 10px;
339
- margin-right: 0;
340
- }
341
-
342
348
  .e-ddt.e-rtl.e-popup .e-treeview .e-list-item .e-ul {
343
349
  padding: 0 14px 0 0;
344
350
  }
@@ -366,24 +372,27 @@
366
372
  min-height: 38px;
367
373
  }
368
374
 
369
- .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
370
- .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
371
- margin-right: 76px;
375
+ .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
376
+ .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
377
+ margin-right: 38px;
378
+ max-width: calc(100% - 39px);
372
379
  }
373
380
 
374
- .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
375
- .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
381
+ .e-bigger .e-ddt.e-show-clear .e-chips-wrapper .e-chips:last-child,
382
+ .e-ddt.e-bigger.e-show-clear .e-chips-wrapper .e-chips:last-child {
376
383
  margin-right: 38px;
384
+ max-width: calc(100% - 39px);
377
385
  }
378
386
 
379
- .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
380
- .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
381
- margin-right: 38px;
387
+ .e-bigger .e-ddt.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
388
+ .e-ddt.e-bigger.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
389
+ margin-right: 76px;
390
+ max-width: calc(100% - 77px);
382
391
  }
383
392
 
384
393
  .e-bigger .e-ddt.e-popup .e-selectall-parent,
385
394
  .e-ddt.e-bigger.e-popup .e-selectall-parent {
386
- text-indent: 44px;
395
+ text-indent: 43px;
387
396
  }
388
397
 
389
398
  .e-bigger .e-ddt.e-popup .e-treeview .e-fullrow,
@@ -391,21 +400,21 @@
391
400
  height: 48px;
392
401
  }
393
402
 
394
- .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
395
- .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
396
- margin-left: 76px;
403
+ .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
404
+ .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
405
+ margin-left: 38px;
397
406
  margin-right: 1px;
398
407
  }
399
408
 
400
- .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child,
401
- .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips-collection .e-chips:last-child {
409
+ .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
410
+ .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
402
411
  margin-left: 38px;
403
412
  margin-right: 1px;
404
413
  }
405
414
 
406
- .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child,
407
- .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips-collection .e-chips:last-child {
408
- margin-left: 38px;
415
+ .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
416
+ .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
417
+ margin-left: 76px;
409
418
  margin-right: 1px;
410
419
  }
411
420
 
@@ -417,7 +426,6 @@
417
426
 
418
427
  .e-ddt .e-chips {
419
428
  background-color: #bfbfbf;
420
- border-radius: 0;
421
429
  }
422
430
 
423
431
  .e-ddt .e-chips .e-chips-close::before {
@@ -432,6 +440,10 @@
432
440
  background-color: #685708;
433
441
  }
434
442
 
443
+ .e-ddt .e-chips:hover .e-chips-close::before {
444
+ color: #fff;
445
+ }
446
+
435
447
  .e-ddt .e-chips:hover > .e-chipcontent {
436
448
  color: #fff;
437
449
  }
@@ -450,7 +462,7 @@
450
462
  }
451
463
 
452
464
  .e-ddt.e-popup .e-selectall-parent {
453
- border-bottom: 1px solid #685708;
465
+ border-bottom-color: #fff;
454
466
  }
455
467
 
456
468
  .e-ddt.e-popup .e-selectall-parent .e-all-text {
@@ -1,11 +1,11 @@
1
- @include export-module('dropdowntree-bootstrap-dark-icons') {
2
- #{&}.e-ddt {
3
- .e-ddt-icon::before {
4
- content: '\e969';
5
- }
6
-
7
- .e-chips-close::before {
8
- content: '\e842';
9
- }
10
- }
11
- }
1
+ @include export-module('dropdowntree-bootstrap-dark-icons') {
2
+ #{&}.e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e969';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e842';
9
+ }
10
+ }
11
+ }
@@ -1,12 +1,12 @@
1
- @include export-module('dropdowntree-bootstrap-icons') {
2
- #{&}.e-ddt {
3
- .e-ddt-icon::before {
4
- content: '\e969';
5
- }
6
-
7
- .e-chips-close::before {
8
- content: '\e842';
9
- }
10
- }
11
- }
1
+ @include export-module('dropdowntree-bootstrap-icons') {
2
+ #{&}.e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e969';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e842';
9
+ }
10
+ }
11
+ }
12
12
 
@@ -1,12 +1,12 @@
1
- @include export-module('dropdowntree-bootstrap4-icons') {
2
- #{&}.e-ddt {
3
- .e-ddt-icon::before {
4
- content: '\e744';
5
- }
6
-
7
- .e-chips-close::before {
8
- content: '\e745';
9
- }
10
- }
11
- }
1
+ @include export-module('dropdowntree-bootstrap4-icons') {
2
+ #{&}.e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e744';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e745';
9
+ }
10
+ }
11
+ }
12
12
 
@@ -1,11 +1,11 @@
1
- @include export-module('dropdowntree-fabric-dark-icons') {
2
- .e-ddt {
3
- .e-ddt-icon::before {
4
- content: '\e966';
5
- }
6
-
7
- .e-chips-close::before {
8
- content: '\e7a7';
9
- }
10
- }
11
- }
1
+ @include export-module('dropdowntree-fabric-dark-icons') {
2
+ .e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e966';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e7a7';
9
+ }
10
+ }
11
+ }