@syncfusion/ej2-dropdowns 21.2.8 → 22.1.34

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 (162) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +35 -6
  3. package/README.md +201 -103
  4. package/dist/ej2-dropdowns.min.js +2 -2
  5. package/dist/ej2-dropdowns.umd.min.js +2 -2
  6. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es2015.js +158 -41
  8. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  9. package/dist/es6/ej2-dropdowns.es5.js +158 -41
  10. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  11. package/dist/global/ej2-dropdowns.min.js +2 -2
  12. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  13. package/dist/global/index.d.ts +1 -1
  14. package/package.json +11 -11
  15. package/src/auto-complete/auto-complete-model.d.ts +2 -1
  16. package/src/auto-complete/auto-complete.d.ts +2 -1
  17. package/src/auto-complete/auto-complete.js +1 -1
  18. package/src/combo-box/combo-box-model.d.ts +6 -3
  19. package/src/combo-box/combo-box.d.ts +6 -3
  20. package/src/drop-down-base/drop-down-base-model.d.ts +8 -4
  21. package/src/drop-down-base/drop-down-base.d.ts +8 -4
  22. package/src/drop-down-base/drop-down-base.js +21 -7
  23. package/src/drop-down-list/drop-down-list-model.d.ts +6 -3
  24. package/src/drop-down-list/drop-down-list.d.ts +6 -3
  25. package/src/drop-down-list/drop-down-list.js +23 -14
  26. package/src/drop-down-tree/drop-down-tree-model.d.ts +21 -6
  27. package/src/drop-down-tree/drop-down-tree.d.ts +55 -62
  28. package/src/drop-down-tree/drop-down-tree.js +1 -1
  29. package/src/list-box/list-box.d.ts +15 -0
  30. package/src/list-box/list-box.js +53 -3
  31. package/src/mention/mention-model.d.ts +4 -2
  32. package/src/mention/mention.d.ts +4 -2
  33. package/src/multi-select/multi-select-model.d.ts +15 -8
  34. package/src/multi-select/multi-select.d.ts +15 -7
  35. package/src/multi-select/multi-select.js +59 -15
  36. package/styles/auto-complete/_material3-dark-definition.scss +1 -0
  37. package/styles/auto-complete/_material3-definition.scss +2 -0
  38. package/styles/auto-complete/material3-dark.css +198 -0
  39. package/styles/auto-complete/material3-dark.scss +5 -0
  40. package/styles/auto-complete/material3.css +254 -0
  41. package/styles/auto-complete/material3.scss +5 -0
  42. package/styles/bootstrap-dark.css +212 -100
  43. package/styles/bootstrap.css +214 -101
  44. package/styles/bootstrap4.css +214 -101
  45. package/styles/bootstrap5-dark.css +212 -100
  46. package/styles/bootstrap5.css +212 -100
  47. package/styles/combo-box/_material3-dark-definition.scss +1 -0
  48. package/styles/combo-box/_material3-definition.scss +2 -0
  49. package/styles/combo-box/material3-dark.css +198 -0
  50. package/styles/combo-box/material3-dark.scss +5 -0
  51. package/styles/combo-box/material3.css +254 -0
  52. package/styles/combo-box/material3.scss +5 -0
  53. package/styles/drop-down-base/_layout.scss +3 -1
  54. package/styles/drop-down-base/_material3-dark-definition.scss +1 -0
  55. package/styles/drop-down-base/_material3-definition.scss +87 -0
  56. package/styles/drop-down-base/_theme.scss +10 -0
  57. package/styles/drop-down-base/bootstrap-dark.css +4 -0
  58. package/styles/drop-down-base/bootstrap.css +4 -0
  59. package/styles/drop-down-base/bootstrap4.css +4 -0
  60. package/styles/drop-down-base/bootstrap5-dark.css +4 -0
  61. package/styles/drop-down-base/bootstrap5.css +4 -0
  62. package/styles/drop-down-base/fabric-dark.css +4 -0
  63. package/styles/drop-down-base/fabric.css +4 -0
  64. package/styles/drop-down-base/fluent-dark.css +4 -0
  65. package/styles/drop-down-base/fluent.css +4 -0
  66. package/styles/drop-down-base/highcontrast-light.css +4 -0
  67. package/styles/drop-down-base/highcontrast.css +4 -0
  68. package/styles/drop-down-base/material-dark.css +4 -0
  69. package/styles/drop-down-base/material.css +4 -0
  70. package/styles/drop-down-base/material3-dark.css +439 -0
  71. package/styles/drop-down-base/material3-dark.scss +4 -0
  72. package/styles/drop-down-base/material3.css +495 -0
  73. package/styles/drop-down-base/material3.scss +4 -0
  74. package/styles/drop-down-base/tailwind-dark.css +4 -0
  75. package/styles/drop-down-base/tailwind.css +4 -0
  76. package/styles/drop-down-list/_layout.scss +15 -1
  77. package/styles/drop-down-list/_material3-dark-definition.scss +1 -0
  78. package/styles/drop-down-list/_material3-definition.scss +180 -0
  79. package/styles/drop-down-list/icons/_material3-dark.scss +1 -0
  80. package/styles/drop-down-list/material3-dark.css +503 -0
  81. package/styles/drop-down-list/material3-dark.scss +9 -0
  82. package/styles/drop-down-list/material3.css +559 -0
  83. package/styles/drop-down-list/material3.scss +9 -0
  84. package/styles/drop-down-tree/_layout.scss +13 -7
  85. package/styles/drop-down-tree/_material3-dark-definition.scss +1 -0
  86. package/styles/drop-down-tree/_material3-definition.scss +76 -0
  87. package/styles/drop-down-tree/_theme.scss +14 -2
  88. package/styles/drop-down-tree/icons/_material3-dark.scss +1 -0
  89. package/styles/drop-down-tree/icons/_material3.scss +1 -1
  90. package/styles/drop-down-tree/material3-dark.css +466 -0
  91. package/styles/drop-down-tree/material3-dark.scss +10 -0
  92. package/styles/drop-down-tree/material3.css +522 -0
  93. package/styles/drop-down-tree/material3.scss +10 -0
  94. package/styles/fabric-dark.css +212 -100
  95. package/styles/fabric.css +214 -101
  96. package/styles/fluent-dark.css +214 -101
  97. package/styles/fluent.css +214 -101
  98. package/styles/highcontrast-light.css +212 -100
  99. package/styles/highcontrast.css +214 -101
  100. package/styles/list-box/_layout.scss +17 -3
  101. package/styles/list-box/_material3-dark-definition.scss +1 -0
  102. package/styles/list-box/_material3-definition.scss +117 -0
  103. package/styles/list-box/_theme.scss +2 -1
  104. package/styles/list-box/bootstrap-dark.css +207 -99
  105. package/styles/list-box/bootstrap.css +209 -100
  106. package/styles/list-box/bootstrap4.css +209 -100
  107. package/styles/list-box/bootstrap5-dark.css +207 -99
  108. package/styles/list-box/bootstrap5.css +207 -99
  109. package/styles/list-box/fabric-dark.css +207 -99
  110. package/styles/list-box/fabric.css +209 -100
  111. package/styles/list-box/fluent-dark.css +209 -100
  112. package/styles/list-box/fluent.css +209 -100
  113. package/styles/list-box/highcontrast-light.css +207 -99
  114. package/styles/list-box/highcontrast.css +209 -100
  115. package/styles/list-box/icons/_material3-dark.scss +1 -0
  116. package/styles/list-box/material-dark.css +207 -99
  117. package/styles/list-box/material.css +209 -100
  118. package/styles/list-box/material3-dark.css +956 -0
  119. package/styles/list-box/material3-dark.scss +6 -0
  120. package/styles/list-box/material3.css +1012 -0
  121. package/styles/list-box/material3.scss +6 -0
  122. package/styles/list-box/tailwind-dark.css +209 -100
  123. package/styles/list-box/tailwind.css +209 -100
  124. package/styles/material-dark.css +212 -100
  125. package/styles/material.css +214 -101
  126. package/styles/material3-dark.css +4664 -0
  127. package/styles/material3-dark.scss +10 -0
  128. package/styles/material3.css +4720 -0
  129. package/styles/material3.scss +10 -0
  130. package/styles/mention/_material3-dark-definition.scss +1 -0
  131. package/styles/mention/_material3-definition.scss +1 -0
  132. package/styles/mention/material3-dark.css +87 -0
  133. package/styles/mention/material3-dark.scss +7 -0
  134. package/styles/mention/material3.css +143 -0
  135. package/styles/mention/material3.scss +7 -0
  136. package/styles/multi-select/_layout.scss +160 -7
  137. package/styles/multi-select/_material3-dark-definition.scss +1 -0
  138. package/styles/multi-select/_material3-definition.scss +246 -0
  139. package/styles/multi-select/_theme.scss +6 -0
  140. package/styles/multi-select/bootstrap-dark.css +1 -1
  141. package/styles/multi-select/bootstrap.css +1 -1
  142. package/styles/multi-select/bootstrap4.css +1 -1
  143. package/styles/multi-select/bootstrap5-dark.css +1 -1
  144. package/styles/multi-select/bootstrap5.css +1 -1
  145. package/styles/multi-select/fabric-dark.css +1 -1
  146. package/styles/multi-select/fabric.css +1 -1
  147. package/styles/multi-select/fluent-dark.css +1 -1
  148. package/styles/multi-select/fluent.css +1 -1
  149. package/styles/multi-select/highcontrast-light.css +1 -1
  150. package/styles/multi-select/highcontrast.css +1 -1
  151. package/styles/multi-select/icons/_material3-dark.scss +1 -0
  152. package/styles/multi-select/icons/_material3.scss +3 -4
  153. package/styles/multi-select/material-dark.css +1 -1
  154. package/styles/multi-select/material.css +1 -1
  155. package/styles/multi-select/material3-dark.css +2547 -0
  156. package/styles/multi-select/material3-dark.scss +10 -0
  157. package/styles/multi-select/material3.css +2603 -0
  158. package/styles/multi-select/material3.scss +10 -0
  159. package/styles/multi-select/tailwind-dark.css +1 -1
  160. package/styles/multi-select/tailwind.css +1 -1
  161. package/styles/tailwind-dark.css +214 -101
  162. package/styles/tailwind.css +214 -101
@@ -375,6 +375,10 @@
375
375
  color: #333;
376
376
  }
377
377
 
378
+ .e-selectall-parent.e-item-focus {
379
+ background-color: #f5f5f5;
380
+ }
381
+
378
382
  /* stylelint-disable property-no-vendor-prefix */
379
383
  /* stylelint-disable property-no-vendor-prefix */
380
384
  @keyframes material-spinner-rotate {
@@ -1493,8 +1497,8 @@ ejs-dropdownlist {
1493
1497
  margin-top: -4em;
1494
1498
  position: absolute;
1495
1499
  right: 0;
1496
- top: 100%;
1497
1500
  width: 40px;
1501
+ top: 100%;
1498
1502
  }
1499
1503
 
1500
1504
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2438,7 +2442,8 @@ ejs-multiselect {
2438
2442
 
2439
2443
  /* stylelint-disable property-no-vendor-prefix */
2440
2444
  .e-listbox-wrapper,
2441
- .e-listbox-container {
2445
+ .e-listbox-container,
2446
+ .e-listboxtool-wrapper {
2442
2447
  -webkit-overflow-scrolling: touch;
2443
2448
  box-sizing: border-box;
2444
2449
  cursor: pointer;
@@ -2450,24 +2455,29 @@ ejs-multiselect {
2450
2455
  width: 100%;
2451
2456
  }
2452
2457
  .e-listbox-wrapper *,
2453
- .e-listbox-container * {
2458
+ .e-listbox-container *,
2459
+ .e-listboxtool-wrapper * {
2454
2460
  box-sizing: border-box;
2455
2461
  }
2456
2462
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2457
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
2463
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
2464
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
2458
2465
  width: 86% !important; /* stylelint-disable-line declaration-no-important */
2459
2466
  }
2460
2467
  .e-listbox-wrapper:focus,
2461
- .e-listbox-container:focus {
2468
+ .e-listbox-container:focus,
2469
+ .e-listboxtool-wrapper:focus {
2462
2470
  outline: none;
2463
2471
  }
2464
2472
  .e-listbox-wrapper.e-disabled,
2465
- .e-listbox-container.e-disabled {
2473
+ .e-listbox-container.e-disabled,
2474
+ .e-listboxtool-wrapper.e-disabled {
2466
2475
  cursor: default;
2467
2476
  pointer-events: none;
2468
2477
  }
2469
2478
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2470
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2479
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2480
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2471
2481
  text-align: center;
2472
2482
  }
2473
2483
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2475,53 +2485,66 @@ ejs-multiselect {
2475
2485
  .e-listbox-wrapper .e-selectall-parent,
2476
2486
  .e-listbox-container:not(.e-list-template) .e-list-item,
2477
2487
  .e-listbox-container .e-list-nrt,
2478
- .e-listbox-container .e-selectall-parent {
2488
+ .e-listbox-container .e-selectall-parent,
2489
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2490
+ .e-listboxtool-wrapper .e-list-nrt,
2491
+ .e-listboxtool-wrapper .e-selectall-parent {
2479
2492
  height: 40px;
2480
2493
  line-height: 1;
2481
2494
  padding: 13px 16px;
2482
2495
  position: relative;
2483
2496
  }
2484
2497
  .e-listbox-wrapper.e-filter-list,
2485
- .e-listbox-container.e-filter-list {
2498
+ .e-listbox-container.e-filter-list,
2499
+ .e-listboxtool-wrapper.e-filter-list {
2486
2500
  overflow: inherit;
2487
2501
  }
2488
2502
  .e-listbox-wrapper .e-list-parent,
2489
- .e-listbox-container .e-list-parent {
2503
+ .e-listbox-container .e-list-parent,
2504
+ .e-listboxtool-wrapper .e-list-parent {
2490
2505
  height: 100%;
2491
2506
  min-height: 40px;
2492
2507
  }
2493
2508
  .e-listbox-wrapper .e-list-item,
2494
- .e-listbox-container .e-list-item {
2509
+ .e-listbox-container .e-list-item,
2510
+ .e-listboxtool-wrapper .e-list-item {
2495
2511
  border-bottom: 0 solid;
2496
2512
  outline: none;
2497
2513
  }
2498
2514
  .e-listbox-wrapper .e-list-item.e-disabled,
2499
- .e-listbox-container .e-list-item.e-disabled {
2515
+ .e-listbox-container .e-list-item.e-disabled,
2516
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2500
2517
  pointer-events: none;
2501
2518
  }
2502
2519
  .e-listbox-wrapper .e-disable,
2503
- .e-listbox-container .e-disable {
2520
+ .e-listbox-container .e-disable,
2521
+ .e-listboxtool-wrapper .e-disable {
2504
2522
  opacity: 0.7;
2505
2523
  }
2506
2524
  .e-listbox-wrapper .e-list-parent,
2507
- .e-listbox-container .e-list-parent {
2525
+ .e-listbox-container .e-list-parent,
2526
+ .e-listboxtool-wrapper .e-list-parent {
2508
2527
  margin: 0;
2509
2528
  padding: 0;
2510
2529
  }
2511
2530
  .e-listbox-wrapper .e-list-header .e-text.header,
2512
- .e-listbox-container .e-list-header .e-text.header {
2531
+ .e-listbox-container .e-list-header .e-text.header,
2532
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2513
2533
  display: none;
2514
2534
  }
2515
2535
  .e-listbox-wrapper .e-icon-back,
2516
- .e-listbox-container .e-icon-back {
2536
+ .e-listbox-container .e-icon-back,
2537
+ .e-listboxtool-wrapper .e-icon-back {
2517
2538
  margin-top: -2px;
2518
2539
  }
2519
2540
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2520
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2541
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2542
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2521
2543
  display: none;
2522
2544
  }
2523
2545
  .e-listbox-wrapper .e-list-header,
2524
- .e-listbox-container .e-list-header {
2546
+ .e-listbox-container .e-list-header,
2547
+ .e-listboxtool-wrapper .e-list-header {
2525
2548
  -ms-flex-align: center;
2526
2549
  align-items: center;
2527
2550
  border-bottom: 1px solid;
@@ -2532,21 +2555,25 @@ ejs-multiselect {
2532
2555
  padding: 0 20px;
2533
2556
  }
2534
2557
  .e-listbox-wrapper .e-has-header > .e-view,
2535
- .e-listbox-container .e-has-header > .e-view {
2558
+ .e-listbox-container .e-has-header > .e-view,
2559
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2536
2560
  top: 45px;
2537
2561
  }
2538
2562
  .e-listbox-wrapper .e-but-back,
2539
- .e-listbox-container .e-but-back {
2563
+ .e-listbox-container .e-but-back,
2564
+ .e-listboxtool-wrapper .e-but-back {
2540
2565
  cursor: pointer;
2541
2566
  padding-right: 10px;
2542
2567
  }
2543
2568
  .e-listbox-wrapper .e-list-group-item:first-child,
2544
- .e-listbox-container .e-list-group-item:first-child {
2569
+ .e-listbox-container .e-list-group-item:first-child,
2570
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2545
2571
  border: 0;
2546
2572
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2547
2573
  }
2548
2574
  .e-listbox-wrapper .e-list-group-item,
2549
- .e-listbox-container .e-list-group-item {
2575
+ .e-listbox-container .e-list-group-item,
2576
+ .e-listboxtool-wrapper .e-list-group-item {
2550
2577
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2551
2578
  border-top: 0 solid;
2552
2579
  font-weight: 600;
@@ -2555,7 +2582,8 @@ ejs-multiselect {
2555
2582
  padding: 13px 16px;
2556
2583
  }
2557
2584
  .e-listbox-wrapper .e-icon-collapsible,
2558
- .e-listbox-container .e-icon-collapsible {
2585
+ .e-listbox-container .e-icon-collapsible,
2586
+ .e-listboxtool-wrapper .e-icon-collapsible {
2559
2587
  cursor: pointer;
2560
2588
  font-size: 12px;
2561
2589
  position: absolute;
@@ -2564,42 +2592,51 @@ ejs-multiselect {
2564
2592
  transform: translateY(-50%);
2565
2593
  }
2566
2594
  .e-listbox-wrapper .e-text-content,
2567
- .e-listbox-container .e-text-content {
2595
+ .e-listbox-container .e-text-content,
2596
+ .e-listboxtool-wrapper .e-text-content {
2568
2597
  height: 100%;
2569
2598
  position: relative;
2570
2599
  vertical-align: middle;
2571
2600
  }
2572
2601
  .e-listbox-wrapper .e-text-content *,
2573
- .e-listbox-container .e-text-content * {
2602
+ .e-listbox-container .e-text-content *,
2603
+ .e-listboxtool-wrapper .e-text-content * {
2574
2604
  display: inline-block;
2575
2605
  vertical-align: middle;
2576
2606
  }
2577
2607
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2578
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2608
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2609
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2579
2610
  width: calc(100% - 40px);
2580
2611
  }
2581
2612
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2582
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2613
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2614
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2583
2615
  width: calc(100% - 90px);
2584
2616
  }
2585
2617
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2586
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2618
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2619
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2587
2620
  width: calc(100% - 80px);
2588
2621
  }
2589
2622
  .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,
2590
- .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 {
2623
+ .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,
2624
+ .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 {
2591
2625
  width: calc(100% - 92px);
2592
2626
  }
2593
2627
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2594
- .e-listbox-container .e-checkbox .e-checkbox-left {
2628
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2629
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2595
2630
  margin: -4px 10px 0 0;
2596
2631
  }
2597
2632
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2598
- .e-listbox-container .e-checkbox .e-checkbox-right {
2633
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2634
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2599
2635
  margin: -4px 0 0 10px;
2600
2636
  }
2601
2637
  .e-listbox-wrapper .e-list-text,
2602
- .e-listbox-container .e-list-text {
2638
+ .e-listbox-container .e-list-text,
2639
+ .e-listboxtool-wrapper .e-list-text {
2603
2640
  cursor: pointer;
2604
2641
  display: inline-block;
2605
2642
  overflow: hidden;
@@ -2609,107 +2646,129 @@ ejs-multiselect {
2609
2646
  width: 100%;
2610
2647
  }
2611
2648
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2612
- .e-listbox-container .e-list-icon + .e-list-text {
2649
+ .e-listbox-container .e-list-icon + .e-list-text,
2650
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2613
2651
  width: calc(100% - 60px);
2614
2652
  }
2615
2653
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2616
- .e-listbox-container .e-icon-wrapper .e-list-text {
2654
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2655
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2617
2656
  width: calc(100% - 60px);
2618
2657
  }
2619
2658
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2620
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2659
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2660
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2621
2661
  width: calc(100% - 60px);
2622
2662
  }
2623
2663
  .e-listbox-wrapper .e-list-icon,
2624
- .e-listbox-container .e-list-icon {
2664
+ .e-listbox-container .e-list-icon,
2665
+ .e-listboxtool-wrapper .e-list-icon {
2625
2666
  height: 30px;
2626
2667
  margin-right: 10px;
2627
2668
  width: 30px;
2628
2669
  }
2629
2670
  .e-listbox-wrapper .e-content,
2630
- .e-listbox-container .e-content {
2671
+ .e-listbox-container .e-content,
2672
+ .e-listboxtool-wrapper .e-content {
2631
2673
  overflow: hidden;
2632
2674
  position: relative;
2633
2675
  }
2634
2676
  .e-listbox-wrapper .e-list-header .e-text,
2635
- .e-listbox-container .e-list-header .e-text {
2677
+ .e-listbox-container .e-list-header .e-text,
2678
+ .e-listboxtool-wrapper .e-list-header .e-text {
2636
2679
  cursor: pointer;
2637
2680
  text-indent: 0;
2638
2681
  }
2639
2682
  .e-listbox-wrapper .e-text .e-headertext,
2640
- .e-listbox-container .e-text .e-headertext {
2683
+ .e-listbox-container .e-text .e-headertext,
2684
+ .e-listboxtool-wrapper .e-text .e-headertext {
2641
2685
  display: inline-block;
2642
2686
  line-height: inherit;
2643
2687
  }
2644
2688
  .e-listbox-wrapper.e-rtl,
2645
- .e-listbox-container.e-rtl {
2689
+ .e-listbox-container.e-rtl,
2690
+ .e-listboxtool-wrapper.e-rtl {
2646
2691
  direction: rtl;
2647
2692
  }
2648
2693
  .e-listbox-wrapper.e-rtl .e-list-icon,
2649
- .e-listbox-container.e-rtl .e-list-icon {
2694
+ .e-listbox-container.e-rtl .e-list-icon,
2695
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2650
2696
  margin-left: 16px;
2651
2697
  margin-right: 0;
2652
2698
  }
2653
2699
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2654
- .e-listbox-container.e-rtl .e-icon-collapsible {
2700
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2701
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2655
2702
  left: 0%;
2656
2703
  right: initial;
2657
2704
  top: 50%;
2658
2705
  transform: translateY(-50%) rotate(180deg);
2659
2706
  }
2660
2707
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2661
- .e-listbox-container.e-rtl .e-list-header .e-text {
2708
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2709
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2662
2710
  cursor: pointer;
2663
2711
  }
2664
2712
  .e-listbox-wrapper.e-rtl .e-but-back,
2665
- .e-listbox-container.e-rtl .e-but-back {
2713
+ .e-listbox-container.e-rtl .e-but-back,
2714
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2666
2715
  transform: rotate(180deg);
2667
2716
  }
2668
2717
  .e-listbox-wrapper.e-rtl .e-icon-back,
2669
- .e-listbox-container.e-rtl .e-icon-back {
2718
+ .e-listbox-container.e-rtl .e-icon-back,
2719
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2670
2720
  margin-top: -1px;
2671
2721
  }
2672
2722
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2673
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2723
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2724
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2674
2725
  margin: -4px 0 0 10px;
2675
2726
  }
2676
2727
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2677
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2728
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2729
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2678
2730
  margin: -4px 10px 0 0;
2679
2731
  }
2680
2732
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2681
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2733
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2734
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2682
2735
  margin: -4px 0 0 10px;
2683
2736
  }
2684
2737
  .e-listbox-wrapper .e-checkbox-wrapper,
2685
- .e-listbox-container .e-checkbox-wrapper {
2738
+ .e-listbox-container .e-checkbox-wrapper,
2739
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2686
2740
  margin: -4px 10px 0 0;
2687
2741
  text-indent: 0;
2688
2742
  vertical-align: middle;
2689
2743
  }
2690
2744
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2691
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2745
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2746
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2692
2747
  position: absolute;
2693
2748
  right: 0;
2694
2749
  top: 30%;
2695
2750
  }
2696
2751
  .e-listbox-wrapper .e-input-group,
2697
- .e-listbox-container .e-input-group {
2752
+ .e-listbox-container .e-input-group,
2753
+ .e-listboxtool-wrapper .e-input-group {
2698
2754
  padding: 4px 8px;
2699
2755
  }
2700
2756
  .e-listbox-wrapper .e-input-focus,
2701
- .e-listbox-container .e-input-focus {
2757
+ .e-listbox-container .e-input-focus,
2758
+ .e-listboxtool-wrapper .e-input-focus {
2702
2759
  padding: 4px 4px 4px 8px;
2703
2760
  }
2704
2761
  .e-listbox-wrapper .e-hidden-select,
2705
- .e-listbox-container .e-hidden-select {
2762
+ .e-listbox-container .e-hidden-select,
2763
+ .e-listboxtool-wrapper .e-hidden-select {
2706
2764
  height: 1px;
2707
2765
  opacity: 0;
2708
2766
  position: absolute;
2709
2767
  width: 100%;
2710
2768
  }
2711
2769
  .e-listbox-wrapper .e-placeholder,
2712
- .e-listbox-container .e-placeholder {
2770
+ .e-listbox-container .e-placeholder,
2771
+ .e-listboxtool-wrapper .e-placeholder {
2713
2772
  background-color: #317ab9;
2714
2773
  display: block;
2715
2774
  height: 1px;
@@ -2731,24 +2790,29 @@ ejs-listbox {
2731
2790
  }
2732
2791
 
2733
2792
  .e-listbox-wrapper.e-sortableclone,
2734
- .e-listbox-container.e-sortableclone {
2793
+ .e-listbox-container.e-sortableclone,
2794
+ .e-listboxtool-wrapper.e-sortableclone {
2735
2795
  border-width: 0;
2736
2796
  overflow: visible;
2737
2797
  }
2738
2798
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2739
- .e-listbox-container.e-sortableclone .e-list-item {
2799
+ .e-listbox-container.e-sortableclone .e-list-item,
2800
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2740
2801
  list-style-type: none;
2741
2802
  }
2742
2803
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2743
- .e-listbox-container.e-sortableclone .e-ripple {
2804
+ .e-listbox-container.e-sortableclone .e-ripple,
2805
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2744
2806
  overflow: visible;
2745
2807
  }
2746
2808
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2747
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
2809
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
2810
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2748
2811
  display: none;
2749
2812
  }
2750
2813
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2751
- .e-listbox-container.e-sortableclone .e-list-badge {
2814
+ .e-listbox-container.e-sortableclone .e-list-badge,
2815
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2752
2816
  -ms-flex-align: center;
2753
2817
  align-items: center;
2754
2818
  background-color: #317ab9;
@@ -2767,6 +2831,10 @@ ejs-listbox {
2767
2831
  width: 22px;
2768
2832
  }
2769
2833
 
2834
+ .e-listboxtool-wrapper.e-sortableclone {
2835
+ display: block;
2836
+ }
2837
+
2770
2838
  .e-listboxtool-wrapper,
2771
2839
  .e-listboxtool-container {
2772
2840
  cursor: pointer;
@@ -2948,12 +3016,14 @@ ejs-listbox {
2948
3016
  }
2949
3017
 
2950
3018
  .e-listbox-wrapper,
2951
- .e-listbox-container {
3019
+ .e-listbox-container,
3020
+ .e-listboxtool-wrapper {
2952
3021
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
2953
3022
  font-size: 14px;
2954
3023
  }
2955
3024
  .e-listbox-wrapper .e-list-header,
2956
- .e-listbox-container .e-list-header {
3025
+ .e-listbox-container .e-list-header,
3026
+ .e-listboxtool-wrapper .e-list-header {
2957
3027
  background-color: #fff;
2958
3028
  border-color: rgba(0, 0, 0, 0.12);
2959
3029
  color: rgba(51, 51, 51, 0.95);
@@ -2961,27 +3031,32 @@ ejs-listbox {
2961
3031
  }
2962
3032
 
2963
3033
  .e-listbox-wrapper.e-filter-list .e-list-parent,
2964
- .e-listbox-container.e-filter-list .e-list-parent {
3034
+ .e-listbox-container.e-filter-list .e-list-parent,
3035
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
2965
3036
  height: calc(100% - 52px);
2966
3037
  }
2967
3038
 
2968
3039
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2969
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3040
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3041
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
2970
3042
  height: calc(100% - 92px);
2971
3043
  }
2972
3044
 
2973
3045
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2974
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3046
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3047
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
2975
3048
  height: calc(100% - 40px);
2976
3049
  }
2977
3050
 
2978
3051
  .e-listbox-wrapper .e-icons,
2979
- .e-listbox-container .e-icons {
3052
+ .e-listbox-container .e-icons,
3053
+ .e-listboxtool-wrapper .e-icons {
2980
3054
  color: rgba(0, 0, 0, 0.75);
2981
3055
  }
2982
3056
 
2983
3057
  .e-listbox-wrapper .e-list-item,
2984
- .e-listbox-container .e-list-item {
3058
+ .e-listbox-container .e-list-item,
3059
+ .e-listboxtool-wrapper .e-list-item {
2985
3060
  background-color: #fff;
2986
3061
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2987
3062
  border-left: 0 solid transparent;
@@ -2992,41 +3067,50 @@ ejs-listbox {
2992
3067
 
2993
3068
  .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),
2994
3069
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
2995
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3070
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3071
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3072
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
2996
3073
  background-color: #f5f5f5;
2997
3074
  border-color: transparent;
2998
3075
  color: rgba(51, 51, 51, 0.87);
2999
3076
  }
3000
3077
 
3001
3078
  .e-listbox-wrapper .e-list-item.e-selected,
3002
- .e-listbox-container .e-list-item.e-selected {
3079
+ .e-listbox-container .e-list-item.e-selected,
3080
+ .e-listboxtool-wrapper .e-list-item.e-selected {
3003
3081
  background-color: #e6e6e6;
3004
3082
  color: rgba(51, 51, 51, 0.87);
3005
3083
  }
3006
3084
 
3007
3085
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
3008
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3086
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3087
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3009
3088
  background-color: #fff;
3010
3089
  color: #333333;
3011
3090
  }
3012
3091
 
3013
3092
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3014
3093
  .e-listbox-container .e-list-item.e-focused,
3015
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3094
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3095
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3096
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3016
3097
  background-color: #e6e6e6;
3017
3098
  color: rgba(51, 51, 51, 0.87);
3018
3099
  }
3019
3100
 
3020
3101
  .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,
3021
3102
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3022
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3103
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3104
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3105
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3023
3106
  background-color: #fff;
3024
3107
  border-color: #ccc;
3025
3108
  color: #555;
3026
3109
  }
3027
3110
 
3028
3111
  .e-listbox-wrapper .e-list-group-item,
3029
- .e-listbox-container .e-list-group-item {
3112
+ .e-listbox-container .e-list-group-item,
3113
+ .e-listboxtool-wrapper .e-list-group-item {
3030
3114
  background-color: #fff;
3031
3115
  border-color: rgba(0, 0, 0, 0.12);
3032
3116
  color: #333;
@@ -3034,32 +3118,38 @@ ejs-listbox {
3034
3118
  }
3035
3119
 
3036
3120
  .e-listbox-wrapper .e-selectall-parent,
3037
- .e-listbox-container .e-selectall-parent {
3121
+ .e-listbox-container .e-selectall-parent,
3122
+ .e-listboxtool-wrapper .e-selectall-parent {
3038
3123
  background-color: #fff;
3039
3124
  border-bottom: 1px solid #e6e6e6;
3040
3125
  color: #333333;
3041
3126
  }
3042
3127
 
3043
3128
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3044
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3129
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3130
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3045
3131
  background-color: transparent;
3046
3132
  }
3047
3133
 
3048
3134
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3049
- .e-listbox-container.e-list-template .e-list-wrapper {
3135
+ .e-listbox-container.e-list-template .e-list-wrapper,
3136
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3050
3137
  height: inherit;
3051
3138
  position: relative;
3052
3139
  }
3053
3140
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3054
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3141
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3142
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3055
3143
  padding: 0.7142em 1.0714em;
3056
3144
  }
3057
3145
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3058
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3146
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3147
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3059
3148
  padding: 0.7142em 1.0714em;
3060
3149
  }
3061
3150
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3062
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3151
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3152
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3063
3153
  color: #333;
3064
3154
  display: block;
3065
3155
  font-size: 18px;
@@ -3071,7 +3161,8 @@ ejs-listbox {
3071
3161
  white-space: nowrap;
3072
3162
  }
3073
3163
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3074
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3164
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3165
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3075
3166
  color: #777;
3076
3167
  display: block;
3077
3168
  font-size: 14px;
@@ -3080,13 +3171,15 @@ ejs-listbox {
3080
3171
  word-wrap: break-word;
3081
3172
  }
3082
3173
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3083
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3174
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3175
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3084
3176
  overflow: hidden;
3085
3177
  text-overflow: ellipsis;
3086
3178
  white-space: nowrap;
3087
3179
  }
3088
3180
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3089
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3181
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3182
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3090
3183
  height: 2.8571em;
3091
3184
  left: 1.0667em;
3092
3185
  position: absolute;
@@ -3094,17 +3187,20 @@ ejs-listbox {
3094
3187
  width: 2.8571em;
3095
3188
  }
3096
3189
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3097
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3190
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3191
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3098
3192
  padding-left: 4.6428em;
3099
3193
  padding-right: 1.0714em;
3100
3194
  }
3101
3195
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3102
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3196
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3197
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3103
3198
  padding-left: 1.0714em;
3104
3199
  padding-right: 4.6428em;
3105
3200
  }
3106
3201
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3107
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3202
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3203
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3108
3204
  height: 2.8571em;
3109
3205
  position: absolute;
3110
3206
  right: 1.0667em;
@@ -3112,15 +3208,18 @@ ejs-listbox {
3112
3208
  width: 2.8571em;
3113
3209
  }
3114
3210
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3115
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3211
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3212
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3116
3213
  top: 0.7142em;
3117
3214
  }
3118
3215
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3119
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3216
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3217
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3120
3218
  top: 0.7142em;
3121
3219
  }
3122
3220
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3123
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3221
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3222
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3124
3223
  font-size: 15px;
3125
3224
  height: 1.333em;
3126
3225
  line-height: 1.433em;
@@ -3132,17 +3231,20 @@ ejs-listbox {
3132
3231
  width: 2em;
3133
3232
  }
3134
3233
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3135
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3234
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3235
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3136
3236
  padding-left: 4.6428em;
3137
3237
  padding-right: 3.9285em;
3138
3238
  }
3139
3239
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3140
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3240
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3241
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3141
3242
  padding-left: 1.0714em;
3142
3243
  padding-right: 3.9285em;
3143
3244
  }
3144
3245
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3145
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3246
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3247
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3146
3248
  display: block;
3147
3249
  margin: 0;
3148
3250
  overflow: hidden;
@@ -3151,53 +3253,64 @@ ejs-listbox {
3151
3253
  white-space: nowrap;
3152
3254
  }
3153
3255
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3154
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3256
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3257
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3155
3258
  color: rgba(51, 51, 51, 0.87);
3156
3259
  }
3157
3260
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3158
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3261
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3262
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3159
3263
  color: rgba(51, 51, 51, 0.87);
3160
3264
  }
3161
3265
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3162
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3266
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3267
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3163
3268
  color: rgba(51, 51, 51, 0.87);
3164
3269
  }
3165
3270
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3166
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3271
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3272
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3167
3273
  color: rgba(51, 51, 51, 0.87);
3168
3274
  }
3169
3275
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3170
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3276
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3277
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3171
3278
  left: inherit;
3172
3279
  right: 1.0667em;
3173
3280
  }
3174
3281
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3175
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3282
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3283
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3176
3284
  padding-left: 1.0714em;
3177
3285
  padding-right: 4.6428em;
3178
3286
  }
3179
3287
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3180
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3288
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3289
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3181
3290
  padding-left: 4.6428em;
3182
3291
  padding-right: 1.0714em;
3183
3292
  }
3184
3293
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3185
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3294
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3295
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3186
3296
  left: 1.0667em;
3187
3297
  right: inherit;
3188
3298
  }
3189
3299
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3190
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3300
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3301
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3191
3302
  left: 1em;
3192
3303
  right: inherit;
3193
3304
  }
3194
3305
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3195
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3306
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3307
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3196
3308
  padding-left: 3.9285em;
3197
3309
  padding-right: 4.6428em;
3198
3310
  }
3199
3311
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3200
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3312
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3313
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3201
3314
  padding-left: 3.9285em;
3202
3315
  padding-right: 1.0714em;
3203
3316
  }