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