@syncfusion/ej2-vue-dropdowns 18.2.44-4569 → 18.2.44-4571

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 (66) hide show
  1. package/CHANGELOG.md +206 -0
  2. package/dist/ej2-vue-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-vue-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-vue-dropdowns.es2015.js +9 -6
  5. package/dist/es6/ej2-vue-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-vue-dropdowns.es5.js +9 -6
  7. package/dist/es6/ej2-vue-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-vue-dropdowns.min.js +10 -0
  9. package/package.json +15 -16
  10. package/src/drop-down-tree/dropdowntree.component.d.ts +1 -0
  11. package/src/drop-down-tree/dropdowntree.component.js +4 -1
  12. package/src/list-box/listbox.component.d.ts +2 -2
  13. package/src/list-box/listbox.component.js +4 -4
  14. package/src/multi-select/multiselect.component.js +1 -1
  15. package/styles/auto-complete/bootstrap-dark.css +0 -1
  16. package/styles/auto-complete/bootstrap.css +0 -1
  17. package/styles/auto-complete/bootstrap4.css +0 -1
  18. package/styles/bootstrap-dark.css +806 -186
  19. package/styles/bootstrap.css +805 -185
  20. package/styles/bootstrap4.css +836 -193
  21. package/styles/combo-box/bootstrap-dark.css +0 -1
  22. package/styles/combo-box/bootstrap.css +0 -1
  23. package/styles/combo-box/bootstrap4.css +0 -1
  24. package/styles/drop-down-base/bootstrap4.css +2 -1
  25. package/styles/drop-down-list/bootstrap-dark.css +35 -2
  26. package/styles/drop-down-list/bootstrap.css +35 -2
  27. package/styles/drop-down-list/bootstrap4.css +37 -3
  28. package/styles/drop-down-list/fabric-dark.css +35 -1
  29. package/styles/drop-down-list/fabric.css +35 -1
  30. package/styles/drop-down-list/highcontrast-light.css +35 -1
  31. package/styles/drop-down-list/highcontrast.css +35 -1
  32. package/styles/drop-down-list/material-dark.css +35 -1
  33. package/styles/drop-down-list/material.css +44 -1
  34. package/styles/drop-down-tree/bootstrap-dark.css +97 -19
  35. package/styles/drop-down-tree/bootstrap.css +97 -19
  36. package/styles/drop-down-tree/bootstrap4.css +108 -24
  37. package/styles/drop-down-tree/fabric-dark.css +97 -19
  38. package/styles/drop-down-tree/fabric.css +97 -19
  39. package/styles/drop-down-tree/highcontrast-light.css +97 -19
  40. package/styles/drop-down-tree/highcontrast.css +97 -19
  41. package/styles/drop-down-tree/material-dark.css +98 -20
  42. package/styles/drop-down-tree/material.css +107 -20
  43. package/styles/fabric-dark.css +787 -174
  44. package/styles/fabric.css +786 -173
  45. package/styles/highcontrast-light.css +794 -175
  46. package/styles/highcontrast.css +796 -175
  47. package/styles/list-box/bootstrap-dark.css +291 -140
  48. package/styles/list-box/bootstrap.css +291 -140
  49. package/styles/list-box/bootstrap4.css +311 -147
  50. package/styles/list-box/fabric-dark.css +291 -140
  51. package/styles/list-box/fabric.css +291 -140
  52. package/styles/list-box/highcontrast-light.css +291 -140
  53. package/styles/list-box/highcontrast.css +291 -140
  54. package/styles/list-box/material-dark.css +295 -144
  55. package/styles/list-box/material.css +295 -144
  56. package/styles/material-dark.css +967 -194
  57. package/styles/material.css +1328 -207
  58. package/styles/multi-select/bootstrap-dark.css +383 -25
  59. package/styles/multi-select/bootstrap.css +382 -24
  60. package/styles/multi-select/bootstrap4.css +386 -22
  61. package/styles/multi-select/fabric-dark.css +364 -14
  62. package/styles/multi-select/fabric.css +363 -13
  63. package/styles/multi-select/highcontrast-light.css +371 -15
  64. package/styles/multi-select/highcontrast.css +373 -15
  65. package/styles/multi-select/material-dark.css +539 -29
  66. package/styles/multi-select/material.css +875 -35
@@ -78,6 +78,7 @@
78
78
  }
79
79
 
80
80
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
81
+ box-sizing: content-box;
81
82
  min-height: 32px;
82
83
  }
83
84
 
@@ -89,25 +90,27 @@
89
90
  display: none;
90
91
  }
91
92
 
92
- .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 {
93
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
93
94
  bottom: 0;
94
95
  position: absolute;
95
96
  right: 0;
96
97
  }
97
98
 
98
- .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon {
99
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
99
100
  right: 32px;
100
101
  }
101
102
 
102
- .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
103
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
103
104
  bottom: 0;
104
105
  position: absolute;
105
106
  right: 0;
106
107
  }
107
108
 
108
109
  .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-input-focus input.e-dropdowntree.e-chip-input,
109
- .e-ddt.e-input-group.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-input-focus input.e-dropdowntree.e-chip-input,
110
- .e-ddt.e-float-input.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input {
110
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-input-focus input.e-dropdowntree.e-chip-input,
111
+ .e-ddt.e-input-group.e-control-wrapper.e-show-text input.e-dropdowntree.e-chip-input, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-input-focus input.e-dropdowntree.e-chip-input,
112
+ .e-ddt.e-float-input.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-input-focus input.e-dropdowntree.e-chip-input,
113
+ .e-ddt.e-float-input.e-control-wrapper.e-show-text input.e-dropdowntree.e-chip-input {
111
114
  padding-left: 0;
112
115
  padding-right: 0;
113
116
  }
@@ -116,19 +119,19 @@
116
119
  width: 100%;
117
120
  }
118
121
 
119
- .e-ddt .e-chips-wrapper .e-chips-close {
122
+ .e-ddt.e-show-chip .e-chips-close {
120
123
  line-height: 30px;
121
124
  min-height: 30px;
122
125
  min-width: 30px;
123
126
  text-align: center;
124
127
  }
125
128
 
126
- .e-ddt .e-chips-wrapper .e-chips-close::before {
129
+ .e-ddt.e-show-chip .e-chips-close::before {
127
130
  font-size: 10px;
128
131
  vertical-align: middle;
129
132
  }
130
133
 
131
- .e-ddt .e-chips-wrapper .e-chips {
134
+ .e-ddt.e-show-chip .e-chips {
132
135
  -ms-flex-align: center;
133
136
  align-items: center;
134
137
  border-radius: 4px;
@@ -145,7 +148,7 @@
145
148
  white-space: nowrap;
146
149
  }
147
150
 
148
- .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
151
+ .e-ddt.e-show-chip .e-chips > .e-chipcontent {
149
152
  max-width: 100%;
150
153
  overflow: hidden;
151
154
  padding: 0 10px 0 10px;
@@ -154,6 +157,44 @@
154
157
  white-space: nowrap;
155
158
  }
156
159
 
160
+ .e-ddt .e-overflow {
161
+ white-space: nowrap;
162
+ }
163
+
164
+ .e-ddt .e-overflow.e-show-text {
165
+ padding: 6px 12px 0 12px;
166
+ }
167
+
168
+ .e-ddt .e-overflow.e-total-count {
169
+ box-sizing: border-box;
170
+ display: inline-block;
171
+ overflow: hidden;
172
+ text-overflow: ellipsis;
173
+ }
174
+
175
+ .e-ddt .e-overflow.e-total-count .e-remain {
176
+ padding: 0 10px 0 0;
177
+ }
178
+
179
+ .e-ddt .e-overflow.e-wrap-count {
180
+ padding-top: 5.5px;
181
+ }
182
+
183
+ .e-ddt .e-overflow .e-remain {
184
+ cursor: pointer;
185
+ display: inline-block;
186
+ font-size: 15px;
187
+ padding: 0 0 0 10px;
188
+ }
189
+
190
+ .e-ddt .e-overflow .e-remain.e-wrap-count {
191
+ padding-top: 6px;
192
+ }
193
+
194
+ .e-ddt.e-show-chip .e-overflow.e-total-count .e-remain {
195
+ padding: 6px 12px 0 12px;
196
+ }
197
+
157
198
  .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
158
199
  margin-right: 32px;
159
200
  max-width: calc(100% - 33px);
@@ -292,10 +333,31 @@
292
333
  cursor: default;
293
334
  }
294
335
 
295
- .e-ddt.e-rtl .e-chips-wrapper .e-chips {
336
+ .e-ddt.e-rtl.e-show-chip .e-chips {
296
337
  float: right;
297
338
  }
298
339
 
340
+ .e-ddt.e-rtl.e-show-chip .e-overflow .e-remain, .e-ddt.e-rtl.e-show-text .e-overflow .e-remain {
341
+ padding: 0 10px 0 0;
342
+ }
343
+
344
+ .e-ddt.e-rtl.e-show-chip .e-overflow .e-remain.e-wrap-count, .e-ddt.e-rtl.e-show-text .e-overflow .e-remain.e-wrap-count {
345
+ padding-top: 5.5px;
346
+ }
347
+
348
+ .e-ddt.e-rtl.e-show-chip .e-overflow.e-wrap-count, .e-ddt.e-rtl.e-show-text .e-overflow.e-wrap-count {
349
+ position: absolute;
350
+ right: auto;
351
+ }
352
+
353
+ .e-ddt.e-rtl.e-show-text .e-overflow.e-total-count .e-remain {
354
+ padding: 0 0 0 10px;
355
+ }
356
+
357
+ .e-ddt.e-rtl.e-show-chip .e-overflow.e-total-count .e-remain {
358
+ padding: 6px 12px 0 12px;
359
+ }
360
+
299
361
  .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
300
362
  margin-left: 32px;
301
363
  margin-right: 1px;
@@ -312,13 +374,15 @@
312
374
  }
313
375
 
314
376
  .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
315
- .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,
316
- .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
377
+ .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,
378
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
379
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-text .e-clear-icon,
380
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
317
381
  left: 0;
318
382
  right: auto;
319
383
  }
320
384
 
321
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon {
385
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
322
386
  left: 32px;
323
387
  }
324
388
 
@@ -331,15 +395,19 @@
331
395
  height: 34px;
332
396
  }
333
397
 
334
- .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
398
+ .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
335
399
  .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
336
- .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon {
400
+ .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
401
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
402
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
337
403
  right: 38px;
338
404
  }
339
405
 
340
- .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon,
406
+ .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
341
407
  .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon,
342
- .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
408
+ .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon,
409
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon,
410
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
343
411
  bottom: 0;
344
412
  }
345
413
 
@@ -349,6 +417,11 @@
349
417
  min-height: 38px;
350
418
  }
351
419
 
420
+ .e-bigger .e-ddt .e-overflow.e-show-text,
421
+ .e-ddt.e-bigger .e-overflow.e-show-text {
422
+ padding: 7.5px 14px 0 14px;
423
+ }
424
+
352
425
  .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
353
426
  .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
354
427
  margin-right: 38px;
@@ -395,8 +468,9 @@
395
468
  margin-right: 1px;
396
469
  }
397
470
 
398
- .e-bigger .e-ddt.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
399
- .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon {
471
+ .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,
472
+ .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
473
+ .e-ddt.e-bigger.e-rtl.e-show-text.e-input-group.e-show-dd-icon .e-clear-icon {
400
474
  left: 38px;
401
475
  right: auto;
402
476
  }
@@ -421,6 +495,10 @@
421
495
  color: #f0f0f0;
422
496
  }
423
497
 
498
+ .e-ddt .e-overflow .e-remain {
499
+ color: #8d8d8d;
500
+ }
501
+
424
502
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
425
503
  background-color: #1a1a1a;
426
504
  }
@@ -79,6 +79,7 @@
79
79
  }
80
80
 
81
81
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
82
+ box-sizing: content-box;
82
83
  min-height: 32px;
83
84
  }
84
85
 
@@ -90,25 +91,27 @@
90
91
  display: none;
91
92
  }
92
93
 
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 {
94
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
94
95
  bottom: 0;
95
96
  position: absolute;
96
97
  right: 0;
97
98
  }
98
99
 
99
- .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon {
100
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
100
101
  right: 32px;
101
102
  }
102
103
 
103
- .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
104
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
104
105
  bottom: 0;
105
106
  position: absolute;
106
107
  right: 0;
107
108
  }
108
109
 
109
110
  .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-input-focus input.e-dropdowntree.e-chip-input,
110
- .e-ddt.e-input-group.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-input-focus input.e-dropdowntree.e-chip-input,
111
- .e-ddt.e-float-input.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input {
111
+ .e-ddt.e-input-group.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-input-focus input.e-dropdowntree.e-chip-input,
112
+ .e-ddt.e-input-group.e-control-wrapper.e-show-text input.e-dropdowntree.e-chip-input, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-input-focus input.e-dropdowntree.e-chip-input,
113
+ .e-ddt.e-float-input.e-control-wrapper.e-show-chip input.e-dropdowntree.e-chip-input, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-input-focus input.e-dropdowntree.e-chip-input,
114
+ .e-ddt.e-float-input.e-control-wrapper.e-show-text input.e-dropdowntree.e-chip-input {
112
115
  padding-left: 0;
113
116
  padding-right: 0;
114
117
  }
@@ -117,19 +120,19 @@
117
120
  width: 100%;
118
121
  }
119
122
 
120
- .e-ddt .e-chips-wrapper .e-chips-close {
123
+ .e-ddt.e-show-chip .e-chips-close {
121
124
  line-height: 24px;
122
125
  min-height: 28px;
123
126
  min-width: 30px;
124
127
  text-align: center;
125
128
  }
126
129
 
127
- .e-ddt .e-chips-wrapper .e-chips-close::before {
130
+ .e-ddt.e-show-chip .e-chips-close::before {
128
131
  font-size: 10px;
129
132
  vertical-align: middle;
130
133
  }
131
134
 
132
- .e-ddt .e-chips-wrapper .e-chips {
135
+ .e-ddt.e-show-chip .e-chips {
133
136
  -ms-flex-align: center;
134
137
  align-items: center;
135
138
  border-radius: 4px;
@@ -146,7 +149,7 @@
146
149
  white-space: nowrap;
147
150
  }
148
151
 
149
- .e-ddt .e-chips-wrapper .e-chips > .e-chipcontent {
152
+ .e-ddt.e-show-chip .e-chips > .e-chipcontent {
150
153
  max-width: 100%;
151
154
  overflow: hidden;
152
155
  padding: 0 10px 0 10px;
@@ -155,6 +158,44 @@
155
158
  white-space: nowrap;
156
159
  }
157
160
 
161
+ .e-ddt .e-overflow {
162
+ white-space: nowrap;
163
+ }
164
+
165
+ .e-ddt .e-overflow.e-show-text {
166
+ padding: 6px 12px 0 12px;
167
+ }
168
+
169
+ .e-ddt .e-overflow.e-total-count {
170
+ box-sizing: border-box;
171
+ display: inline-block;
172
+ overflow: hidden;
173
+ text-overflow: ellipsis;
174
+ }
175
+
176
+ .e-ddt .e-overflow.e-total-count .e-remain {
177
+ padding: 0 10px 0 0;
178
+ }
179
+
180
+ .e-ddt .e-overflow.e-wrap-count {
181
+ padding-top: 5.5px;
182
+ }
183
+
184
+ .e-ddt .e-overflow .e-remain {
185
+ cursor: pointer;
186
+ display: inline-block;
187
+ font-size: 15px;
188
+ padding: 0 0 0 10px;
189
+ }
190
+
191
+ .e-ddt .e-overflow .e-remain.e-wrap-count {
192
+ padding-top: 6px;
193
+ }
194
+
195
+ .e-ddt.e-show-chip .e-overflow.e-total-count .e-remain {
196
+ padding: 6px 12px 0 12px;
197
+ }
198
+
158
199
  .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
159
200
  margin-right: 32px;
160
201
  max-width: calc(100% - 33px);
@@ -293,10 +334,31 @@
293
334
  cursor: default;
294
335
  }
295
336
 
296
- .e-ddt.e-rtl .e-chips-wrapper .e-chips {
337
+ .e-ddt.e-rtl.e-show-chip .e-chips {
297
338
  float: right;
298
339
  }
299
340
 
341
+ .e-ddt.e-rtl.e-show-chip .e-overflow .e-remain, .e-ddt.e-rtl.e-show-text .e-overflow .e-remain {
342
+ padding: 0 10px 0 0;
343
+ }
344
+
345
+ .e-ddt.e-rtl.e-show-chip .e-overflow .e-remain.e-wrap-count, .e-ddt.e-rtl.e-show-text .e-overflow .e-remain.e-wrap-count {
346
+ padding-top: 5.5px;
347
+ }
348
+
349
+ .e-ddt.e-rtl.e-show-chip .e-overflow.e-wrap-count, .e-ddt.e-rtl.e-show-text .e-overflow.e-wrap-count {
350
+ position: absolute;
351
+ right: auto;
352
+ }
353
+
354
+ .e-ddt.e-rtl.e-show-text .e-overflow.e-total-count .e-remain {
355
+ padding: 0 0 0 10px;
356
+ }
357
+
358
+ .e-ddt.e-rtl.e-show-chip .e-overflow.e-total-count .e-remain {
359
+ padding: 6px 12px 0 12px;
360
+ }
361
+
300
362
  .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
301
363
  margin-left: 32px;
302
364
  margin-right: 1px;
@@ -313,13 +375,15 @@
313
375
  }
314
376
 
315
377
  .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 {
378
+ .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,
379
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
380
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-text .e-clear-icon,
381
+ .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
318
382
  left: 0;
319
383
  right: auto;
320
384
  }
321
385
 
322
- .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon {
386
+ .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-rtl.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
323
387
  left: 32px;
324
388
  }
325
389
 
@@ -332,15 +396,19 @@
332
396
  height: 34px;
333
397
  }
334
398
 
335
- .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
399
+ .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
336
400
  .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
337
- .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon {
401
+ .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
402
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
403
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
338
404
  right: 38px;
339
405
  }
340
406
 
341
- .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon,
407
+ .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
342
408
  .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon,
343
- .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon {
409
+ .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon,
410
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon,
411
+ .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
344
412
  bottom: 0;
345
413
  }
346
414
 
@@ -350,6 +418,11 @@
350
418
  min-height: 38px;
351
419
  }
352
420
 
421
+ .e-bigger .e-ddt .e-overflow.e-show-text,
422
+ .e-ddt.e-bigger .e-overflow.e-show-text {
423
+ padding: 7.5px 14px 0 14px;
424
+ }
425
+
353
426
  .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
354
427
  .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
355
428
  margin-right: 38px;
@@ -396,8 +469,9 @@
396
469
  margin-right: 1px;
397
470
  }
398
471
 
399
- .e-bigger .e-ddt.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
400
- .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon {
472
+ .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,
473
+ .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,
474
+ .e-ddt.e-bigger.e-rtl.e-show-text.e-input-group.e-show-dd-icon .e-clear-icon {
401
475
  left: 38px;
402
476
  right: auto;
403
477
  }
@@ -422,6 +496,10 @@
422
496
  color: #333;
423
497
  }
424
498
 
499
+ .e-ddt .e-overflow .e-remain {
500
+ color: #888;
501
+ }
502
+
425
503
  .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
426
504
  background-color: #fff;
427
505
  }