@syncfusion/ej2-dropdowns 21.2.8 → 21.2.10

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 (52) hide show
  1. package/CHANGELOG.md +32 -6
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +37 -11
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +37 -11
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +11 -11
  13. package/src/drop-down-base/drop-down-base.js +3 -0
  14. package/src/drop-down-list/drop-down-list.js +5 -5
  15. package/src/list-box/list-box.d.ts +1 -0
  16. package/src/list-box/list-box.js +20 -0
  17. package/src/multi-select/multi-select-model.d.ts +1 -1
  18. package/src/multi-select/multi-select.js +9 -6
  19. package/styles/bootstrap-dark.css +207 -99
  20. package/styles/bootstrap.css +209 -100
  21. package/styles/bootstrap4.css +209 -100
  22. package/styles/bootstrap5-dark.css +207 -99
  23. package/styles/bootstrap5.css +207 -99
  24. package/styles/fabric-dark.css +207 -99
  25. package/styles/fabric.css +209 -100
  26. package/styles/fluent-dark.css +209 -100
  27. package/styles/fluent.css +209 -100
  28. package/styles/highcontrast-light.css +207 -99
  29. package/styles/highcontrast.css +209 -100
  30. package/styles/list-box/_layout.scss +8 -2
  31. package/styles/list-box/_theme.scss +2 -1
  32. package/styles/list-box/bootstrap-dark.css +207 -99
  33. package/styles/list-box/bootstrap.css +209 -100
  34. package/styles/list-box/bootstrap4.css +209 -100
  35. package/styles/list-box/bootstrap5-dark.css +207 -99
  36. package/styles/list-box/bootstrap5.css +207 -99
  37. package/styles/list-box/fabric-dark.css +207 -99
  38. package/styles/list-box/fabric.css +209 -100
  39. package/styles/list-box/fluent-dark.css +209 -100
  40. package/styles/list-box/fluent.css +209 -100
  41. package/styles/list-box/highcontrast-light.css +207 -99
  42. package/styles/list-box/highcontrast.css +209 -100
  43. package/styles/list-box/material-dark.css +207 -99
  44. package/styles/list-box/material.css +209 -100
  45. package/styles/list-box/tailwind-dark.css +209 -100
  46. package/styles/list-box/tailwind.css +209 -100
  47. package/styles/material-dark.css +207 -99
  48. package/styles/material.css +209 -100
  49. package/styles/tailwind-dark.css +209 -100
  50. package/styles/tailwind.css +209 -100
  51. package/.eslintrc.json +0 -259
  52. package/tslint.json +0 -111
@@ -37,7 +37,8 @@
37
37
 
38
38
  /* stylelint-disable property-no-vendor-prefix */
39
39
  .e-listbox-wrapper,
40
- .e-listbox-container {
40
+ .e-listbox-container,
41
+ .e-listboxtool-wrapper {
41
42
  -webkit-overflow-scrolling: touch;
42
43
  box-sizing: border-box;
43
44
  cursor: pointer;
@@ -49,24 +50,29 @@
49
50
  width: 100%;
50
51
  }
51
52
  .e-listbox-wrapper *,
52
- .e-listbox-container * {
53
+ .e-listbox-container *,
54
+ .e-listboxtool-wrapper * {
53
55
  box-sizing: border-box;
54
56
  }
55
57
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
56
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
58
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
59
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
57
60
  width: 86% !important; /* stylelint-disable-line declaration-no-important */
58
61
  }
59
62
  .e-listbox-wrapper:focus,
60
- .e-listbox-container:focus {
63
+ .e-listbox-container:focus,
64
+ .e-listboxtool-wrapper:focus {
61
65
  outline: none;
62
66
  }
63
67
  .e-listbox-wrapper.e-disabled,
64
- .e-listbox-container.e-disabled {
68
+ .e-listbox-container.e-disabled,
69
+ .e-listboxtool-wrapper.e-disabled {
65
70
  cursor: default;
66
71
  pointer-events: none;
67
72
  }
68
73
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
69
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
74
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
75
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
70
76
  text-align: center;
71
77
  }
72
78
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -74,53 +80,66 @@
74
80
  .e-listbox-wrapper .e-selectall-parent,
75
81
  .e-listbox-container:not(.e-list-template) .e-list-item,
76
82
  .e-listbox-container .e-list-nrt,
77
- .e-listbox-container .e-selectall-parent {
83
+ .e-listbox-container .e-selectall-parent,
84
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
85
+ .e-listboxtool-wrapper .e-list-nrt,
86
+ .e-listboxtool-wrapper .e-selectall-parent {
78
87
  height: 40px;
79
88
  line-height: 1;
80
89
  padding: 13px 16px;
81
90
  position: relative;
82
91
  }
83
92
  .e-listbox-wrapper.e-filter-list,
84
- .e-listbox-container.e-filter-list {
93
+ .e-listbox-container.e-filter-list,
94
+ .e-listboxtool-wrapper.e-filter-list {
85
95
  overflow: inherit;
86
96
  }
87
97
  .e-listbox-wrapper .e-list-parent,
88
- .e-listbox-container .e-list-parent {
98
+ .e-listbox-container .e-list-parent,
99
+ .e-listboxtool-wrapper .e-list-parent {
89
100
  height: 100%;
90
101
  min-height: 40px;
91
102
  }
92
103
  .e-listbox-wrapper .e-list-item,
93
- .e-listbox-container .e-list-item {
104
+ .e-listbox-container .e-list-item,
105
+ .e-listboxtool-wrapper .e-list-item {
94
106
  border-bottom: 0 solid;
95
107
  outline: none;
96
108
  }
97
109
  .e-listbox-wrapper .e-list-item.e-disabled,
98
- .e-listbox-container .e-list-item.e-disabled {
110
+ .e-listbox-container .e-list-item.e-disabled,
111
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
99
112
  pointer-events: none;
100
113
  }
101
114
  .e-listbox-wrapper .e-disable,
102
- .e-listbox-container .e-disable {
115
+ .e-listbox-container .e-disable,
116
+ .e-listboxtool-wrapper .e-disable {
103
117
  opacity: 0.7;
104
118
  }
105
119
  .e-listbox-wrapper .e-list-parent,
106
- .e-listbox-container .e-list-parent {
120
+ .e-listbox-container .e-list-parent,
121
+ .e-listboxtool-wrapper .e-list-parent {
107
122
  margin: 0;
108
123
  padding: 0;
109
124
  }
110
125
  .e-listbox-wrapper .e-list-header .e-text.header,
111
- .e-listbox-container .e-list-header .e-text.header {
126
+ .e-listbox-container .e-list-header .e-text.header,
127
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
112
128
  display: none;
113
129
  }
114
130
  .e-listbox-wrapper .e-icon-back,
115
- .e-listbox-container .e-icon-back {
131
+ .e-listbox-container .e-icon-back,
132
+ .e-listboxtool-wrapper .e-icon-back {
116
133
  margin-top: -2px;
117
134
  }
118
135
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
119
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
136
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
137
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
120
138
  display: none;
121
139
  }
122
140
  .e-listbox-wrapper .e-list-header,
123
- .e-listbox-container .e-list-header {
141
+ .e-listbox-container .e-list-header,
142
+ .e-listboxtool-wrapper .e-list-header {
124
143
  -ms-flex-align: center;
125
144
  align-items: center;
126
145
  border-bottom: 1px solid;
@@ -131,21 +150,25 @@
131
150
  padding: 0 20px;
132
151
  }
133
152
  .e-listbox-wrapper .e-has-header > .e-view,
134
- .e-listbox-container .e-has-header > .e-view {
153
+ .e-listbox-container .e-has-header > .e-view,
154
+ .e-listboxtool-wrapper .e-has-header > .e-view {
135
155
  top: 45px;
136
156
  }
137
157
  .e-listbox-wrapper .e-but-back,
138
- .e-listbox-container .e-but-back {
158
+ .e-listbox-container .e-but-back,
159
+ .e-listboxtool-wrapper .e-but-back {
139
160
  cursor: pointer;
140
161
  padding-right: 10px;
141
162
  }
142
163
  .e-listbox-wrapper .e-list-group-item:first-child,
143
- .e-listbox-container .e-list-group-item:first-child {
164
+ .e-listbox-container .e-list-group-item:first-child,
165
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
144
166
  border: 0;
145
167
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
146
168
  }
147
169
  .e-listbox-wrapper .e-list-group-item,
148
- .e-listbox-container .e-list-group-item {
170
+ .e-listbox-container .e-list-group-item,
171
+ .e-listboxtool-wrapper .e-list-group-item {
149
172
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
150
173
  border-top: 0 solid;
151
174
  font-weight: 600;
@@ -154,7 +177,8 @@
154
177
  padding: 13px 16px;
155
178
  }
156
179
  .e-listbox-wrapper .e-icon-collapsible,
157
- .e-listbox-container .e-icon-collapsible {
180
+ .e-listbox-container .e-icon-collapsible,
181
+ .e-listboxtool-wrapper .e-icon-collapsible {
158
182
  cursor: pointer;
159
183
  font-size: 12px;
160
184
  position: absolute;
@@ -163,42 +187,51 @@
163
187
  transform: translateY(-50%);
164
188
  }
165
189
  .e-listbox-wrapper .e-text-content,
166
- .e-listbox-container .e-text-content {
190
+ .e-listbox-container .e-text-content,
191
+ .e-listboxtool-wrapper .e-text-content {
167
192
  height: 100%;
168
193
  position: relative;
169
194
  vertical-align: middle;
170
195
  }
171
196
  .e-listbox-wrapper .e-text-content *,
172
- .e-listbox-container .e-text-content * {
197
+ .e-listbox-container .e-text-content *,
198
+ .e-listboxtool-wrapper .e-text-content * {
173
199
  display: inline-block;
174
200
  vertical-align: middle;
175
201
  }
176
202
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
177
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
203
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
204
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
178
205
  width: calc(100% - 40px);
179
206
  }
180
207
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
181
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
208
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
209
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
182
210
  width: calc(100% - 90px);
183
211
  }
184
212
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
185
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
213
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
214
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
186
215
  width: calc(100% - 80px);
187
216
  }
188
217
  .e-listbox-wrapper .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
189
- .e-listbox-container .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
218
+ .e-listbox-container .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
219
+ .e-listboxtool-wrapper .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
190
220
  width: calc(100% - 92px);
191
221
  }
192
222
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
193
- .e-listbox-container .e-checkbox .e-checkbox-left {
223
+ .e-listbox-container .e-checkbox .e-checkbox-left,
224
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
194
225
  margin: -4px 10px 0 0;
195
226
  }
196
227
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
197
- .e-listbox-container .e-checkbox .e-checkbox-right {
228
+ .e-listbox-container .e-checkbox .e-checkbox-right,
229
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
198
230
  margin: -4px 0 0 10px;
199
231
  }
200
232
  .e-listbox-wrapper .e-list-text,
201
- .e-listbox-container .e-list-text {
233
+ .e-listbox-container .e-list-text,
234
+ .e-listboxtool-wrapper .e-list-text {
202
235
  cursor: pointer;
203
236
  display: inline-block;
204
237
  overflow: hidden;
@@ -208,107 +241,129 @@
208
241
  width: 100%;
209
242
  }
210
243
  .e-listbox-wrapper .e-list-icon + .e-list-text,
211
- .e-listbox-container .e-list-icon + .e-list-text {
244
+ .e-listbox-container .e-list-icon + .e-list-text,
245
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
212
246
  width: calc(100% - 60px);
213
247
  }
214
248
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
215
- .e-listbox-container .e-icon-wrapper .e-list-text {
249
+ .e-listbox-container .e-icon-wrapper .e-list-text,
250
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
216
251
  width: calc(100% - 60px);
217
252
  }
218
253
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
219
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
254
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
255
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
220
256
  width: calc(100% - 60px);
221
257
  }
222
258
  .e-listbox-wrapper .e-list-icon,
223
- .e-listbox-container .e-list-icon {
259
+ .e-listbox-container .e-list-icon,
260
+ .e-listboxtool-wrapper .e-list-icon {
224
261
  height: 30px;
225
262
  margin-right: 10px;
226
263
  width: 30px;
227
264
  }
228
265
  .e-listbox-wrapper .e-content,
229
- .e-listbox-container .e-content {
266
+ .e-listbox-container .e-content,
267
+ .e-listboxtool-wrapper .e-content {
230
268
  overflow: hidden;
231
269
  position: relative;
232
270
  }
233
271
  .e-listbox-wrapper .e-list-header .e-text,
234
- .e-listbox-container .e-list-header .e-text {
272
+ .e-listbox-container .e-list-header .e-text,
273
+ .e-listboxtool-wrapper .e-list-header .e-text {
235
274
  cursor: pointer;
236
275
  text-indent: 0;
237
276
  }
238
277
  .e-listbox-wrapper .e-text .e-headertext,
239
- .e-listbox-container .e-text .e-headertext {
278
+ .e-listbox-container .e-text .e-headertext,
279
+ .e-listboxtool-wrapper .e-text .e-headertext {
240
280
  display: inline-block;
241
281
  line-height: inherit;
242
282
  }
243
283
  .e-listbox-wrapper.e-rtl,
244
- .e-listbox-container.e-rtl {
284
+ .e-listbox-container.e-rtl,
285
+ .e-listboxtool-wrapper.e-rtl {
245
286
  direction: rtl;
246
287
  }
247
288
  .e-listbox-wrapper.e-rtl .e-list-icon,
248
- .e-listbox-container.e-rtl .e-list-icon {
289
+ .e-listbox-container.e-rtl .e-list-icon,
290
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
249
291
  margin-left: 16px;
250
292
  margin-right: 0;
251
293
  }
252
294
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
253
- .e-listbox-container.e-rtl .e-icon-collapsible {
295
+ .e-listbox-container.e-rtl .e-icon-collapsible,
296
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
254
297
  left: 0%;
255
298
  right: initial;
256
299
  top: 50%;
257
300
  transform: translateY(-50%) rotate(180deg);
258
301
  }
259
302
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
260
- .e-listbox-container.e-rtl .e-list-header .e-text {
303
+ .e-listbox-container.e-rtl .e-list-header .e-text,
304
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
261
305
  cursor: pointer;
262
306
  }
263
307
  .e-listbox-wrapper.e-rtl .e-but-back,
264
- .e-listbox-container.e-rtl .e-but-back {
308
+ .e-listbox-container.e-rtl .e-but-back,
309
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
265
310
  transform: rotate(180deg);
266
311
  }
267
312
  .e-listbox-wrapper.e-rtl .e-icon-back,
268
- .e-listbox-container.e-rtl .e-icon-back {
313
+ .e-listbox-container.e-rtl .e-icon-back,
314
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
269
315
  margin-top: -1px;
270
316
  }
271
317
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
272
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
318
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
319
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
273
320
  margin: -4px 0 0 10px;
274
321
  }
275
322
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
276
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
323
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
324
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
277
325
  margin: -4px 10px 0 0;
278
326
  }
279
327
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
280
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
328
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
329
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
281
330
  margin: -4px 0 0 10px;
282
331
  }
283
332
  .e-listbox-wrapper .e-checkbox-wrapper,
284
- .e-listbox-container .e-checkbox-wrapper {
333
+ .e-listbox-container .e-checkbox-wrapper,
334
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
285
335
  margin: -4px 10px 0 0;
286
336
  text-indent: 0;
287
337
  vertical-align: middle;
288
338
  }
289
339
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
290
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
340
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
341
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
291
342
  position: absolute;
292
343
  right: 0;
293
344
  top: 30%;
294
345
  }
295
346
  .e-listbox-wrapper .e-input-group,
296
- .e-listbox-container .e-input-group {
347
+ .e-listbox-container .e-input-group,
348
+ .e-listboxtool-wrapper .e-input-group {
297
349
  padding: 4px 8px;
298
350
  }
299
351
  .e-listbox-wrapper .e-input-focus,
300
- .e-listbox-container .e-input-focus {
352
+ .e-listbox-container .e-input-focus,
353
+ .e-listboxtool-wrapper .e-input-focus {
301
354
  padding: 4px 4px 4px 8px;
302
355
  }
303
356
  .e-listbox-wrapper .e-hidden-select,
304
- .e-listbox-container .e-hidden-select {
357
+ .e-listbox-container .e-hidden-select,
358
+ .e-listboxtool-wrapper .e-hidden-select {
305
359
  height: 1px;
306
360
  opacity: 0;
307
361
  position: absolute;
308
362
  width: 100%;
309
363
  }
310
364
  .e-listbox-wrapper .e-placeholder,
311
- .e-listbox-container .e-placeholder {
365
+ .e-listbox-container .e-placeholder,
366
+ .e-listboxtool-wrapper .e-placeholder {
312
367
  background-color: #317ab9;
313
368
  display: block;
314
369
  height: 1px;
@@ -330,24 +385,29 @@ ejs-listbox {
330
385
  }
331
386
 
332
387
  .e-listbox-wrapper.e-sortableclone,
333
- .e-listbox-container.e-sortableclone {
388
+ .e-listbox-container.e-sortableclone,
389
+ .e-listboxtool-wrapper.e-sortableclone {
334
390
  border-width: 0;
335
391
  overflow: visible;
336
392
  }
337
393
  .e-listbox-wrapper.e-sortableclone .e-list-item,
338
- .e-listbox-container.e-sortableclone .e-list-item {
394
+ .e-listbox-container.e-sortableclone .e-list-item,
395
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
339
396
  list-style-type: none;
340
397
  }
341
398
  .e-listbox-wrapper.e-sortableclone .e-ripple,
342
- .e-listbox-container.e-sortableclone .e-ripple {
399
+ .e-listbox-container.e-sortableclone .e-ripple,
400
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
343
401
  overflow: visible;
344
402
  }
345
403
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
346
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
404
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
405
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
347
406
  display: none;
348
407
  }
349
408
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
350
- .e-listbox-container.e-sortableclone .e-list-badge {
409
+ .e-listbox-container.e-sortableclone .e-list-badge,
410
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
351
411
  -ms-flex-align: center;
352
412
  align-items: center;
353
413
  background-color: #317ab9;
@@ -366,6 +426,10 @@ ejs-listbox {
366
426
  width: 22px;
367
427
  }
368
428
 
429
+ .e-listboxtool-wrapper.e-sortableclone {
430
+ display: block;
431
+ }
432
+
369
433
  .e-listboxtool-wrapper,
370
434
  .e-listboxtool-container {
371
435
  cursor: pointer;
@@ -547,12 +611,14 @@ ejs-listbox {
547
611
  }
548
612
 
549
613
  .e-listbox-wrapper,
550
- .e-listbox-container {
614
+ .e-listbox-container,
615
+ .e-listboxtool-wrapper {
551
616
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
552
617
  font-size: 14px;
553
618
  }
554
619
  .e-listbox-wrapper .e-list-header,
555
- .e-listbox-container .e-list-header {
620
+ .e-listbox-container .e-list-header,
621
+ .e-listboxtool-wrapper .e-list-header {
556
622
  background-color: #fff;
557
623
  border-color: rgba(0, 0, 0, 0.12);
558
624
  color: rgba(51, 51, 51, 0.95);
@@ -560,27 +626,32 @@ ejs-listbox {
560
626
  }
561
627
 
562
628
  .e-listbox-wrapper.e-filter-list .e-list-parent,
563
- .e-listbox-container.e-filter-list .e-list-parent {
629
+ .e-listbox-container.e-filter-list .e-list-parent,
630
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
564
631
  height: calc(100% - 52px);
565
632
  }
566
633
 
567
634
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
568
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
635
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
636
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
569
637
  height: calc(100% - 92px);
570
638
  }
571
639
 
572
640
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
573
- .e-listbox-container .e-selectall-parent + .e-list-parent {
641
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
642
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
574
643
  height: calc(100% - 40px);
575
644
  }
576
645
 
577
646
  .e-listbox-wrapper .e-icons,
578
- .e-listbox-container .e-icons {
647
+ .e-listbox-container .e-icons,
648
+ .e-listboxtool-wrapper .e-icons {
579
649
  color: rgba(0, 0, 0, 0.75);
580
650
  }
581
651
 
582
652
  .e-listbox-wrapper .e-list-item,
583
- .e-listbox-container .e-list-item {
653
+ .e-listbox-container .e-list-item,
654
+ .e-listboxtool-wrapper .e-list-item {
584
655
  background-color: #fff;
585
656
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
586
657
  border-left: 0 solid transparent;
@@ -591,41 +662,50 @@ ejs-listbox {
591
662
 
592
663
  .e-listbox-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled), .e-listbox-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
593
664
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
594
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
665
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
666
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
667
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
595
668
  background-color: #f5f5f5;
596
669
  border-color: transparent;
597
670
  color: rgba(51, 51, 51, 0.87);
598
671
  }
599
672
 
600
673
  .e-listbox-wrapper .e-list-item.e-selected,
601
- .e-listbox-container .e-list-item.e-selected {
674
+ .e-listbox-container .e-list-item.e-selected,
675
+ .e-listboxtool-wrapper .e-list-item.e-selected {
602
676
  background-color: #e6e6e6;
603
677
  color: rgba(51, 51, 51, 0.87);
604
678
  }
605
679
 
606
680
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
607
- .e-listbox-container .e-list-item.e-selected.e-checklist {
681
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
682
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
608
683
  background-color: #fff;
609
684
  color: #333333;
610
685
  }
611
686
 
612
687
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
613
688
  .e-listbox-container .e-list-item.e-focused,
614
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
689
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
690
+ .e-listboxtool-wrapper .e-list-item.e-focused,
691
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
615
692
  background-color: #e6e6e6;
616
693
  color: rgba(51, 51, 51, 0.87);
617
694
  }
618
695
 
619
696
  .e-listbox-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listbox-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
620
697
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
621
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
698
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
699
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
700
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
622
701
  background-color: #fff;
623
702
  border-color: #ccc;
624
703
  color: #555;
625
704
  }
626
705
 
627
706
  .e-listbox-wrapper .e-list-group-item,
628
- .e-listbox-container .e-list-group-item {
707
+ .e-listbox-container .e-list-group-item,
708
+ .e-listboxtool-wrapper .e-list-group-item {
629
709
  background-color: #fff;
630
710
  border-color: rgba(0, 0, 0, 0.12);
631
711
  color: #333;
@@ -633,32 +713,38 @@ ejs-listbox {
633
713
  }
634
714
 
635
715
  .e-listbox-wrapper .e-selectall-parent,
636
- .e-listbox-container .e-selectall-parent {
716
+ .e-listbox-container .e-selectall-parent,
717
+ .e-listboxtool-wrapper .e-selectall-parent {
637
718
  background-color: #fff;
638
719
  border-bottom: 1px solid #e6e6e6;
639
720
  color: #333333;
640
721
  }
641
722
 
642
723
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
643
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
724
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
725
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
644
726
  background-color: transparent;
645
727
  }
646
728
 
647
729
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
648
- .e-listbox-container.e-list-template .e-list-wrapper {
730
+ .e-listbox-container.e-list-template .e-list-wrapper,
731
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
649
732
  height: inherit;
650
733
  position: relative;
651
734
  }
652
735
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
653
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
736
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
737
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
654
738
  padding: 0.7142em 1.0714em;
655
739
  }
656
740
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
657
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
741
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
742
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
658
743
  padding: 0.7142em 1.0714em;
659
744
  }
660
745
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
661
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
746
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
747
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
662
748
  color: #333;
663
749
  display: block;
664
750
  font-size: 18px;
@@ -670,7 +756,8 @@ ejs-listbox {
670
756
  white-space: nowrap;
671
757
  }
672
758
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
673
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
759
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
760
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
674
761
  color: #777;
675
762
  display: block;
676
763
  font-size: 14px;
@@ -679,13 +766,15 @@ ejs-listbox {
679
766
  word-wrap: break-word;
680
767
  }
681
768
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
682
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
769
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
770
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
683
771
  overflow: hidden;
684
772
  text-overflow: ellipsis;
685
773
  white-space: nowrap;
686
774
  }
687
775
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
688
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
776
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
777
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
689
778
  height: 2.8571em;
690
779
  left: 1.0667em;
691
780
  position: absolute;
@@ -693,17 +782,20 @@ ejs-listbox {
693
782
  width: 2.8571em;
694
783
  }
695
784
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
696
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
785
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
786
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
697
787
  padding-left: 4.6428em;
698
788
  padding-right: 1.0714em;
699
789
  }
700
790
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
701
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
791
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
792
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
702
793
  padding-left: 1.0714em;
703
794
  padding-right: 4.6428em;
704
795
  }
705
796
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
706
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
797
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
798
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
707
799
  height: 2.8571em;
708
800
  position: absolute;
709
801
  right: 1.0667em;
@@ -711,15 +803,18 @@ ejs-listbox {
711
803
  width: 2.8571em;
712
804
  }
713
805
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
714
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
806
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
807
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
715
808
  top: 0.7142em;
716
809
  }
717
810
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
718
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
811
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
812
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
719
813
  top: 0.7142em;
720
814
  }
721
815
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
722
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
816
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
817
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
723
818
  font-size: 15px;
724
819
  height: 1.333em;
725
820
  line-height: 1.433em;
@@ -731,17 +826,20 @@ ejs-listbox {
731
826
  width: 2em;
732
827
  }
733
828
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
734
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
829
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
830
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
735
831
  padding-left: 4.6428em;
736
832
  padding-right: 3.9285em;
737
833
  }
738
834
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
739
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
835
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
836
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
740
837
  padding-left: 1.0714em;
741
838
  padding-right: 3.9285em;
742
839
  }
743
840
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
744
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
841
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
842
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
745
843
  display: block;
746
844
  margin: 0;
747
845
  overflow: hidden;
@@ -750,53 +848,64 @@ ejs-listbox {
750
848
  white-space: nowrap;
751
849
  }
752
850
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
753
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
851
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
852
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
754
853
  color: rgba(51, 51, 51, 0.87);
755
854
  }
756
855
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
757
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
856
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
857
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
758
858
  color: rgba(51, 51, 51, 0.87);
759
859
  }
760
860
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
761
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
861
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
862
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
762
863
  color: rgba(51, 51, 51, 0.87);
763
864
  }
764
865
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
765
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
866
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
867
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
766
868
  color: rgba(51, 51, 51, 0.87);
767
869
  }
768
870
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
769
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
871
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
872
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
770
873
  left: inherit;
771
874
  right: 1.0667em;
772
875
  }
773
876
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
774
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
877
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
878
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
775
879
  padding-left: 1.0714em;
776
880
  padding-right: 4.6428em;
777
881
  }
778
882
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
779
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
883
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
884
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
780
885
  padding-left: 4.6428em;
781
886
  padding-right: 1.0714em;
782
887
  }
783
888
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
784
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
889
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
890
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
785
891
  left: 1.0667em;
786
892
  right: inherit;
787
893
  }
788
894
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
789
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
895
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
896
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
790
897
  left: 1em;
791
898
  right: inherit;
792
899
  }
793
900
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
794
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
901
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
902
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
795
903
  padding-left: 3.9285em;
796
904
  padding-right: 4.6428em;
797
905
  }
798
906
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
799
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
907
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
908
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
800
909
  padding-left: 3.9285em;
801
910
  padding-right: 1.0714em;
802
911
  }