@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
@@ -389,6 +389,10 @@
389
389
  color: #000;
390
390
  }
391
391
 
392
+ .e-selectall-parent.e-item-focus {
393
+ background-color: #ecf;
394
+ }
395
+
392
396
  /* stylelint-disable property-no-vendor-prefix */
393
397
  /* stylelint-disable property-no-vendor-prefix */
394
398
  @keyframes material-spinner-rotate {
@@ -1564,8 +1568,8 @@ ejs-dropdownlist {
1564
1568
  margin-top: -3.2em;
1565
1569
  position: absolute;
1566
1570
  right: 0;
1567
- top: 100%;
1568
1571
  width: 30px;
1572
+ top: 100%;
1569
1573
  }
1570
1574
 
1571
1575
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2532,7 +2536,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2532
2536
 
2533
2537
  /* stylelint-disable property-no-vendor-prefix */
2534
2538
  .e-listbox-wrapper,
2535
- .e-listbox-container {
2539
+ .e-listbox-container,
2540
+ .e-listboxtool-wrapper {
2536
2541
  -webkit-overflow-scrolling: touch;
2537
2542
  box-sizing: border-box;
2538
2543
  cursor: pointer;
@@ -2544,20 +2549,24 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2544
2549
  width: 100%;
2545
2550
  }
2546
2551
  .e-listbox-wrapper *,
2547
- .e-listbox-container * {
2552
+ .e-listbox-container *,
2553
+ .e-listboxtool-wrapper * {
2548
2554
  box-sizing: border-box;
2549
2555
  }
2550
2556
  .e-listbox-wrapper:focus,
2551
- .e-listbox-container:focus {
2557
+ .e-listbox-container:focus,
2558
+ .e-listboxtool-wrapper:focus {
2552
2559
  outline: none;
2553
2560
  }
2554
2561
  .e-listbox-wrapper.e-disabled,
2555
- .e-listbox-container.e-disabled {
2562
+ .e-listbox-container.e-disabled,
2563
+ .e-listboxtool-wrapper.e-disabled {
2556
2564
  cursor: default;
2557
2565
  pointer-events: none;
2558
2566
  }
2559
2567
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2560
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2568
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2569
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2561
2570
  text-align: center;
2562
2571
  }
2563
2572
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2565,53 +2574,66 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2565
2574
  .e-listbox-wrapper .e-selectall-parent,
2566
2575
  .e-listbox-container:not(.e-list-template) .e-list-item,
2567
2576
  .e-listbox-container .e-list-nrt,
2568
- .e-listbox-container .e-selectall-parent {
2577
+ .e-listbox-container .e-selectall-parent,
2578
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2579
+ .e-listboxtool-wrapper .e-list-nrt,
2580
+ .e-listboxtool-wrapper .e-selectall-parent {
2569
2581
  height: 36px;
2570
2582
  line-height: 1;
2571
2583
  padding: 9px 16px;
2572
2584
  position: relative;
2573
2585
  }
2574
2586
  .e-listbox-wrapper.e-filter-list,
2575
- .e-listbox-container.e-filter-list {
2587
+ .e-listbox-container.e-filter-list,
2588
+ .e-listboxtool-wrapper.e-filter-list {
2576
2589
  overflow: inherit;
2577
2590
  }
2578
2591
  .e-listbox-wrapper .e-list-parent,
2579
- .e-listbox-container .e-list-parent {
2592
+ .e-listbox-container .e-list-parent,
2593
+ .e-listboxtool-wrapper .e-list-parent {
2580
2594
  height: 100%;
2581
2595
  min-height: 36px;
2582
2596
  }
2583
2597
  .e-listbox-wrapper .e-list-item,
2584
- .e-listbox-container .e-list-item {
2598
+ .e-listbox-container .e-list-item,
2599
+ .e-listboxtool-wrapper .e-list-item {
2585
2600
  border-bottom: 0 solid;
2586
2601
  outline: none;
2587
2602
  }
2588
2603
  .e-listbox-wrapper .e-list-item.e-disabled,
2589
- .e-listbox-container .e-list-item.e-disabled {
2604
+ .e-listbox-container .e-list-item.e-disabled,
2605
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2590
2606
  pointer-events: none;
2591
2607
  }
2592
2608
  .e-listbox-wrapper .e-disable,
2593
- .e-listbox-container .e-disable {
2609
+ .e-listbox-container .e-disable,
2610
+ .e-listboxtool-wrapper .e-disable {
2594
2611
  opacity: 0.7;
2595
2612
  }
2596
2613
  .e-listbox-wrapper .e-list-parent,
2597
- .e-listbox-container .e-list-parent {
2614
+ .e-listbox-container .e-list-parent,
2615
+ .e-listboxtool-wrapper .e-list-parent {
2598
2616
  margin: 0;
2599
2617
  padding: 0;
2600
2618
  }
2601
2619
  .e-listbox-wrapper .e-list-header .e-text.header,
2602
- .e-listbox-container .e-list-header .e-text.header {
2620
+ .e-listbox-container .e-list-header .e-text.header,
2621
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2603
2622
  display: none;
2604
2623
  }
2605
2624
  .e-listbox-wrapper .e-icon-back,
2606
- .e-listbox-container .e-icon-back {
2625
+ .e-listbox-container .e-icon-back,
2626
+ .e-listboxtool-wrapper .e-icon-back {
2607
2627
  margin-top: 2px;
2608
2628
  }
2609
2629
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2610
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2630
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2631
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2611
2632
  display: none;
2612
2633
  }
2613
2634
  .e-listbox-wrapper .e-list-header,
2614
- .e-listbox-container .e-list-header {
2635
+ .e-listbox-container .e-list-header,
2636
+ .e-listboxtool-wrapper .e-list-header {
2615
2637
  -ms-flex-align: center;
2616
2638
  align-items: center;
2617
2639
  border-bottom: 1px solid;
@@ -2622,21 +2644,25 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2622
2644
  padding: 0 16px;
2623
2645
  }
2624
2646
  .e-listbox-wrapper .e-has-header > .e-view,
2625
- .e-listbox-container .e-has-header > .e-view {
2647
+ .e-listbox-container .e-has-header > .e-view,
2648
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2626
2649
  top: 45px;
2627
2650
  }
2628
2651
  .e-listbox-wrapper .e-but-back,
2629
- .e-listbox-container .e-but-back {
2652
+ .e-listbox-container .e-but-back,
2653
+ .e-listboxtool-wrapper .e-but-back {
2630
2654
  cursor: pointer;
2631
2655
  padding-right: 20px;
2632
2656
  }
2633
2657
  .e-listbox-wrapper .e-list-group-item:first-child,
2634
- .e-listbox-container .e-list-group-item:first-child {
2658
+ .e-listbox-container .e-list-group-item:first-child,
2659
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2635
2660
  border: 0;
2636
2661
  border-bottom: 0 solid transparent;
2637
2662
  }
2638
2663
  .e-listbox-wrapper .e-list-group-item,
2639
- .e-listbox-container .e-list-group-item {
2664
+ .e-listbox-container .e-list-group-item,
2665
+ .e-listboxtool-wrapper .e-list-group-item {
2640
2666
  border-bottom: 0 solid transparent;
2641
2667
  border-top: 1px solid;
2642
2668
  font-weight: 600;
@@ -2645,7 +2671,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2645
2671
  padding: 9px 16px;
2646
2672
  }
2647
2673
  .e-listbox-wrapper .e-icon-collapsible,
2648
- .e-listbox-container .e-icon-collapsible {
2674
+ .e-listbox-container .e-icon-collapsible,
2675
+ .e-listboxtool-wrapper .e-icon-collapsible {
2649
2676
  cursor: pointer;
2650
2677
  font-size: 12px;
2651
2678
  position: absolute;
@@ -2654,42 +2681,51 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2654
2681
  transform: translateY(-50%);
2655
2682
  }
2656
2683
  .e-listbox-wrapper .e-text-content,
2657
- .e-listbox-container .e-text-content {
2684
+ .e-listbox-container .e-text-content,
2685
+ .e-listboxtool-wrapper .e-text-content {
2658
2686
  height: 100%;
2659
2687
  position: relative;
2660
2688
  vertical-align: middle;
2661
2689
  }
2662
2690
  .e-listbox-wrapper .e-text-content *,
2663
- .e-listbox-container .e-text-content * {
2691
+ .e-listbox-container .e-text-content *,
2692
+ .e-listboxtool-wrapper .e-text-content * {
2664
2693
  display: inline-block;
2665
2694
  vertical-align: middle;
2666
2695
  }
2667
2696
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2668
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2697
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2698
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2669
2699
  width: calc(100% - 40px);
2670
2700
  }
2671
2701
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2672
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2702
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2703
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2673
2704
  width: calc(100% - 90px);
2674
2705
  }
2675
2706
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2676
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2707
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2708
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2677
2709
  width: calc(100% - 80px);
2678
2710
  }
2679
2711
  .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,
2680
- .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 {
2712
+ .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,
2713
+ .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 {
2681
2714
  width: calc(100% - 92px);
2682
2715
  }
2683
2716
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2684
- .e-listbox-container .e-checkbox .e-checkbox-left {
2717
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2718
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2685
2719
  margin: -2px 10px 0 0;
2686
2720
  }
2687
2721
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2688
- .e-listbox-container .e-checkbox .e-checkbox-right {
2722
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2723
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2689
2724
  margin: -2px 0 0 10px;
2690
2725
  }
2691
2726
  .e-listbox-wrapper .e-list-text,
2692
- .e-listbox-container .e-list-text {
2727
+ .e-listbox-container .e-list-text,
2728
+ .e-listboxtool-wrapper .e-list-text {
2693
2729
  cursor: pointer;
2694
2730
  display: inline-block;
2695
2731
  overflow: hidden;
@@ -2699,107 +2735,129 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2699
2735
  width: 100%;
2700
2736
  }
2701
2737
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2702
- .e-listbox-container .e-list-icon + .e-list-text {
2738
+ .e-listbox-container .e-list-icon + .e-list-text,
2739
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2703
2740
  width: calc(100% - 60px);
2704
2741
  }
2705
2742
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2706
- .e-listbox-container .e-icon-wrapper .e-list-text {
2743
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2744
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2707
2745
  width: calc(100% - 60px);
2708
2746
  }
2709
2747
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2710
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2748
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2749
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2711
2750
  width: calc(100% - 60px);
2712
2751
  }
2713
2752
  .e-listbox-wrapper .e-list-icon,
2714
- .e-listbox-container .e-list-icon {
2753
+ .e-listbox-container .e-list-icon,
2754
+ .e-listboxtool-wrapper .e-list-icon {
2715
2755
  height: 30px;
2716
2756
  margin-right: 16px;
2717
2757
  width: 30px;
2718
2758
  }
2719
2759
  .e-listbox-wrapper .e-content,
2720
- .e-listbox-container .e-content {
2760
+ .e-listbox-container .e-content,
2761
+ .e-listboxtool-wrapper .e-content {
2721
2762
  overflow: hidden;
2722
2763
  position: relative;
2723
2764
  }
2724
2765
  .e-listbox-wrapper .e-list-header .e-text,
2725
- .e-listbox-container .e-list-header .e-text {
2766
+ .e-listbox-container .e-list-header .e-text,
2767
+ .e-listboxtool-wrapper .e-list-header .e-text {
2726
2768
  cursor: pointer;
2727
2769
  text-indent: 0;
2728
2770
  }
2729
2771
  .e-listbox-wrapper .e-text .e-headertext,
2730
- .e-listbox-container .e-text .e-headertext {
2772
+ .e-listbox-container .e-text .e-headertext,
2773
+ .e-listboxtool-wrapper .e-text .e-headertext {
2731
2774
  display: inline-block;
2732
2775
  line-height: 0;
2733
2776
  }
2734
2777
  .e-listbox-wrapper.e-rtl,
2735
- .e-listbox-container.e-rtl {
2778
+ .e-listbox-container.e-rtl,
2779
+ .e-listboxtool-wrapper.e-rtl {
2736
2780
  direction: rtl;
2737
2781
  }
2738
2782
  .e-listbox-wrapper.e-rtl .e-list-icon,
2739
- .e-listbox-container.e-rtl .e-list-icon {
2783
+ .e-listbox-container.e-rtl .e-list-icon,
2784
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2740
2785
  margin-left: 16px;
2741
2786
  margin-right: 0;
2742
2787
  }
2743
2788
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2744
- .e-listbox-container.e-rtl .e-icon-collapsible {
2789
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2790
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2745
2791
  left: 0%;
2746
2792
  right: initial;
2747
2793
  top: 50%;
2748
2794
  transform: translateY(-50%) rotate(180deg);
2749
2795
  }
2750
2796
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2751
- .e-listbox-container.e-rtl .e-list-header .e-text {
2797
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2798
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2752
2799
  cursor: pointer;
2753
2800
  }
2754
2801
  .e-listbox-wrapper.e-rtl .e-but-back,
2755
- .e-listbox-container.e-rtl .e-but-back {
2802
+ .e-listbox-container.e-rtl .e-but-back,
2803
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2756
2804
  transform: rotate(180deg);
2757
2805
  }
2758
2806
  .e-listbox-wrapper.e-rtl .e-icon-back,
2759
- .e-listbox-container.e-rtl .e-icon-back {
2807
+ .e-listbox-container.e-rtl .e-icon-back,
2808
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2760
2809
  margin-top: 1px;
2761
2810
  }
2762
2811
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2763
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2812
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2813
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2764
2814
  margin: -2px 0 0 10px;
2765
2815
  }
2766
2816
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2767
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2817
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2818
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2768
2819
  margin: -2px 10px 0 0;
2769
2820
  }
2770
2821
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2771
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2822
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2823
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2772
2824
  margin: -2px 0 0 10px;
2773
2825
  }
2774
2826
  .e-listbox-wrapper .e-checkbox-wrapper,
2775
- .e-listbox-container .e-checkbox-wrapper {
2827
+ .e-listbox-container .e-checkbox-wrapper,
2828
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2776
2829
  margin: -2px 10px 0 0;
2777
2830
  text-indent: 0;
2778
2831
  vertical-align: middle;
2779
2832
  }
2780
2833
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2781
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2834
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2835
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2782
2836
  position: absolute;
2783
2837
  right: 0;
2784
2838
  top: 30%;
2785
2839
  }
2786
2840
  .e-listbox-wrapper .e-input-group,
2787
- .e-listbox-container .e-input-group {
2841
+ .e-listbox-container .e-input-group,
2842
+ .e-listboxtool-wrapper .e-input-group {
2788
2843
  padding: 4px 8px;
2789
2844
  }
2790
2845
  .e-listbox-wrapper .e-input-focus,
2791
- .e-listbox-container .e-input-focus {
2846
+ .e-listbox-container .e-input-focus,
2847
+ .e-listboxtool-wrapper .e-input-focus {
2792
2848
  padding: 4px 4px 4px 8px;
2793
2849
  }
2794
2850
  .e-listbox-wrapper .e-hidden-select,
2795
- .e-listbox-container .e-hidden-select {
2851
+ .e-listbox-container .e-hidden-select,
2852
+ .e-listboxtool-wrapper .e-hidden-select {
2796
2853
  height: 1px;
2797
2854
  opacity: 0;
2798
2855
  position: absolute;
2799
2856
  width: 100%;
2800
2857
  }
2801
2858
  .e-listbox-wrapper .e-placeholder,
2802
- .e-listbox-container .e-placeholder {
2859
+ .e-listbox-container .e-placeholder,
2860
+ .e-listboxtool-wrapper .e-placeholder {
2803
2861
  background-color: #400074;
2804
2862
  display: block;
2805
2863
  height: 1px;
@@ -2821,24 +2879,29 @@ ejs-listbox {
2821
2879
  }
2822
2880
 
2823
2881
  .e-listbox-wrapper.e-sortableclone,
2824
- .e-listbox-container.e-sortableclone {
2882
+ .e-listbox-container.e-sortableclone,
2883
+ .e-listboxtool-wrapper.e-sortableclone {
2825
2884
  border-width: 0;
2826
2885
  overflow: visible;
2827
2886
  }
2828
2887
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2829
- .e-listbox-container.e-sortableclone .e-list-item {
2888
+ .e-listbox-container.e-sortableclone .e-list-item,
2889
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2830
2890
  list-style-type: none;
2831
2891
  }
2832
2892
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2833
- .e-listbox-container.e-sortableclone .e-ripple {
2893
+ .e-listbox-container.e-sortableclone .e-ripple,
2894
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2834
2895
  overflow: visible;
2835
2896
  }
2836
2897
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2837
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
2898
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
2899
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2838
2900
  display: none;
2839
2901
  }
2840
2902
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2841
- .e-listbox-container.e-sortableclone .e-list-badge {
2903
+ .e-listbox-container.e-sortableclone .e-list-badge,
2904
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2842
2905
  -ms-flex-align: center;
2843
2906
  align-items: center;
2844
2907
  background-color: #400074;
@@ -2857,6 +2920,10 @@ ejs-listbox {
2857
2920
  width: 22px;
2858
2921
  }
2859
2922
 
2923
+ .e-listboxtool-wrapper.e-sortableclone {
2924
+ display: block;
2925
+ }
2926
+
2860
2927
  .e-listboxtool-wrapper,
2861
2928
  .e-listboxtool-container {
2862
2929
  cursor: pointer;
@@ -3032,12 +3099,14 @@ ejs-listbox {
3032
3099
  }
3033
3100
 
3034
3101
  .e-listbox-wrapper,
3035
- .e-listbox-container {
3102
+ .e-listbox-container,
3103
+ .e-listboxtool-wrapper {
3036
3104
  font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
3037
3105
  font-size: 13px;
3038
3106
  }
3039
3107
  .e-listbox-wrapper .e-list-header,
3040
- .e-listbox-container .e-list-header {
3108
+ .e-listbox-container .e-list-header,
3109
+ .e-listboxtool-wrapper .e-list-header {
3041
3110
  background-color: #ccc;
3042
3111
  border-color: #757575;
3043
3112
  color: #23726c;
@@ -3045,27 +3114,32 @@ ejs-listbox {
3045
3114
  }
3046
3115
 
3047
3116
  .e-listbox-wrapper.e-filter-list .e-list-parent,
3048
- .e-listbox-container.e-filter-list .e-list-parent {
3117
+ .e-listbox-container.e-filter-list .e-list-parent,
3118
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
3049
3119
  height: calc(100% - 51px);
3050
3120
  }
3051
3121
 
3052
3122
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3053
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3123
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3124
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
3054
3125
  height: calc(100% - 87px);
3055
3126
  }
3056
3127
 
3057
3128
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3058
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3129
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3130
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
3059
3131
  height: calc(100% - 36px);
3060
3132
  }
3061
3133
 
3062
3134
  .e-listbox-wrapper .e-icons,
3063
- .e-listbox-container .e-icons {
3135
+ .e-listbox-container .e-icons,
3136
+ .e-listboxtool-wrapper .e-icons {
3064
3137
  color: #000;
3065
3138
  }
3066
3139
 
3067
3140
  .e-listbox-wrapper .e-list-item,
3068
- .e-listbox-container .e-list-item {
3141
+ .e-listbox-container .e-list-item,
3142
+ .e-listboxtool-wrapper .e-list-item {
3069
3143
  background-color: #ccc;
3070
3144
  border-bottom: 2px solid transparent;
3071
3145
  border-left: 2px solid transparent;
@@ -3076,41 +3150,50 @@ ejs-listbox {
3076
3150
 
3077
3151
  .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),
3078
3152
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
3079
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3153
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3154
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3155
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3080
3156
  background-color: #ecf;
3081
3157
  border-color: #000;
3082
3158
  color: #000;
3083
3159
  }
3084
3160
 
3085
3161
  .e-listbox-wrapper .e-list-item.e-selected,
3086
- .e-listbox-container .e-list-item.e-selected {
3162
+ .e-listbox-container .e-list-item.e-selected,
3163
+ .e-listboxtool-wrapper .e-list-item.e-selected {
3087
3164
  background-color: #400074;
3088
3165
  color: #fff;
3089
3166
  }
3090
3167
 
3091
3168
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
3092
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3169
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3170
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3093
3171
  background-color: #ccc;
3094
3172
  color: #000;
3095
3173
  }
3096
3174
 
3097
3175
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3098
3176
  .e-listbox-container .e-list-item.e-focused,
3099
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3177
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3178
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3179
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3100
3180
  background-color: #400074;
3101
3181
  color: #fff;
3102
3182
  }
3103
3183
 
3104
3184
  .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,
3105
3185
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3106
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3186
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3187
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3188
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3107
3189
  background-color: #fff;
3108
3190
  border-color: #fff;
3109
3191
  color: #23726c;
3110
3192
  }
3111
3193
 
3112
3194
  .e-listbox-wrapper .e-list-group-item,
3113
- .e-listbox-container .e-list-group-item {
3195
+ .e-listbox-container .e-list-group-item,
3196
+ .e-listboxtool-wrapper .e-list-group-item {
3114
3197
  background-color: #ccc;
3115
3198
  border-color: #757575;
3116
3199
  color: #23726c;
@@ -3118,32 +3201,38 @@ ejs-listbox {
3118
3201
  }
3119
3202
 
3120
3203
  .e-listbox-wrapper .e-selectall-parent,
3121
- .e-listbox-container .e-selectall-parent {
3204
+ .e-listbox-container .e-selectall-parent,
3205
+ .e-listboxtool-wrapper .e-selectall-parent {
3122
3206
  background-color: #ccc;
3123
3207
  border-bottom: 1px solid #000;
3124
3208
  color: #000;
3125
3209
  }
3126
3210
 
3127
3211
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3128
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3212
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3213
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3129
3214
  background-color: transparent;
3130
3215
  }
3131
3216
 
3132
3217
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3133
- .e-listbox-container.e-list-template .e-list-wrapper {
3218
+ .e-listbox-container.e-list-template .e-list-wrapper,
3219
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3134
3220
  height: inherit;
3135
3221
  position: relative;
3136
3222
  }
3137
3223
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3138
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3224
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3225
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3139
3226
  padding: 0.6153em 0.923em;
3140
3227
  }
3141
3228
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3142
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3229
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3230
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3143
3231
  padding: 0.6153em 0.923em;
3144
3232
  }
3145
3233
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3146
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3234
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3235
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3147
3236
  color: #000;
3148
3237
  display: block;
3149
3238
  font-size: 13px;
@@ -3155,7 +3244,8 @@ ejs-listbox {
3155
3244
  white-space: nowrap;
3156
3245
  }
3157
3246
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3158
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3247
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3248
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3159
3249
  color: #000;
3160
3250
  display: block;
3161
3251
  font-size: 13px;
@@ -3164,13 +3254,15 @@ ejs-listbox {
3164
3254
  word-wrap: break-word;
3165
3255
  }
3166
3256
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3167
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3257
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3258
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3168
3259
  overflow: hidden;
3169
3260
  text-overflow: ellipsis;
3170
3261
  white-space: nowrap;
3171
3262
  }
3172
3263
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3173
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3264
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3265
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3174
3266
  height: 3.0769em;
3175
3267
  left: 0.923em;
3176
3268
  position: absolute;
@@ -3178,17 +3270,20 @@ ejs-listbox {
3178
3270
  width: 3.0769em;
3179
3271
  }
3180
3272
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3181
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3273
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3274
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3182
3275
  padding-left: 4.923em;
3183
3276
  padding-right: 0.923em;
3184
3277
  }
3185
3278
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3186
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3279
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3280
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3187
3281
  padding-left: 0.923em;
3188
3282
  padding-right: 4.923em;
3189
3283
  }
3190
3284
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3191
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3285
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3286
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3192
3287
  height: 3.0769em;
3193
3288
  position: absolute;
3194
3289
  right: 0.923em;
@@ -3196,15 +3291,18 @@ ejs-listbox {
3196
3291
  width: 3.0769em;
3197
3292
  }
3198
3293
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3199
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3294
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3295
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3200
3296
  top: 0.6153em;
3201
3297
  }
3202
3298
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3203
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3299
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3300
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3204
3301
  top: 0.6153em;
3205
3302
  }
3206
3303
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3207
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3304
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3305
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3208
3306
  font-size: 13px;
3209
3307
  height: 1.5384em;
3210
3308
  line-height: 1.3384em;
@@ -3216,17 +3314,20 @@ ejs-listbox {
3216
3314
  width: 1.5384em;
3217
3315
  }
3218
3316
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3219
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3317
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3318
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3220
3319
  padding-left: 4.923em;
3221
3320
  padding-right: 3.3846em;
3222
3321
  }
3223
3322
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3224
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3323
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3324
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3225
3325
  padding-left: 0.923em;
3226
3326
  padding-right: 3.3846em;
3227
3327
  }
3228
3328
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3229
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3329
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3330
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3230
3331
  display: block;
3231
3332
  margin: 0;
3232
3333
  overflow: hidden;
@@ -3235,53 +3336,64 @@ ejs-listbox {
3235
3336
  white-space: nowrap;
3236
3337
  }
3237
3338
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3238
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3339
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3340
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3239
3341
  color: #000;
3240
3342
  }
3241
3343
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3242
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3344
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3345
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3243
3346
  color: #000;
3244
3347
  }
3245
3348
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3246
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3349
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3350
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3247
3351
  color: #fff;
3248
3352
  }
3249
3353
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3250
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3354
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3355
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3251
3356
  color: #fff;
3252
3357
  }
3253
3358
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3254
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3359
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3360
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3255
3361
  left: inherit;
3256
3362
  right: 0.923em;
3257
3363
  }
3258
3364
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3259
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3365
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3366
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3260
3367
  padding-left: 0.923em;
3261
3368
  padding-right: 4.923em;
3262
3369
  }
3263
3370
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3264
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3371
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3372
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3265
3373
  padding-left: 4.923em;
3266
3374
  padding-right: 0.923em;
3267
3375
  }
3268
3376
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3269
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3377
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3378
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3270
3379
  left: 0.923em;
3271
3380
  right: inherit;
3272
3381
  }
3273
3382
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3274
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3383
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3384
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3275
3385
  left: 0.923em;
3276
3386
  right: inherit;
3277
3387
  }
3278
3388
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3279
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3389
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3390
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3280
3391
  padding-left: 3.3846em;
3281
3392
  padding-right: 4.923em;
3282
3393
  }
3283
3394
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3284
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3395
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3396
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3285
3397
  padding-left: 3.3846em;
3286
3398
  padding-right: 0.923em;
3287
3399
  }