@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
@@ -407,6 +407,10 @@
407
407
  color: #212529;
408
408
  }
409
409
 
410
+ .e-selectall-parent.e-item-focus {
411
+ background-color: #e9ecef;
412
+ }
413
+
410
414
  /* stylelint-disable property-no-vendor-prefix */
411
415
  /* stylelint-disable-line no-empty-source */
412
416
  /* stylelint-disable property-no-vendor-prefix */
@@ -1623,8 +1627,8 @@ ejs-dropdownlist {
1623
1627
  margin-top: -2em;
1624
1628
  position: absolute;
1625
1629
  right: 5px;
1626
- top: 100%;
1627
1630
  width: 24px;
1631
+ top: 100%;
1628
1632
  }
1629
1633
 
1630
1634
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2607,7 +2611,8 @@ ejs-multiselect {
2607
2611
 
2608
2612
  /* stylelint-disable property-no-vendor-prefix */
2609
2613
  .e-listbox-wrapper,
2610
- .e-listbox-container {
2614
+ .e-listbox-container,
2615
+ .e-listboxtool-wrapper {
2611
2616
  -webkit-overflow-scrolling: touch;
2612
2617
  box-sizing: border-box;
2613
2618
  cursor: pointer;
@@ -2619,24 +2624,29 @@ ejs-multiselect {
2619
2624
  width: 100%;
2620
2625
  }
2621
2626
  .e-listbox-wrapper *,
2622
- .e-listbox-container * {
2627
+ .e-listbox-container *,
2628
+ .e-listboxtool-wrapper * {
2623
2629
  box-sizing: border-box;
2624
2630
  }
2625
2631
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2626
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
2632
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
2633
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
2627
2634
  width: 84% !important; /* stylelint-disable-line declaration-no-important */
2628
2635
  }
2629
2636
  .e-listbox-wrapper:focus,
2630
- .e-listbox-container:focus {
2637
+ .e-listbox-container:focus,
2638
+ .e-listboxtool-wrapper:focus {
2631
2639
  outline: none;
2632
2640
  }
2633
2641
  .e-listbox-wrapper.e-disabled,
2634
- .e-listbox-container.e-disabled {
2642
+ .e-listbox-container.e-disabled,
2643
+ .e-listboxtool-wrapper.e-disabled {
2635
2644
  cursor: default;
2636
2645
  pointer-events: none;
2637
2646
  }
2638
2647
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2639
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2648
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2649
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2640
2650
  text-align: center;
2641
2651
  }
2642
2652
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2644,53 +2654,66 @@ ejs-multiselect {
2644
2654
  .e-listbox-wrapper .e-selectall-parent,
2645
2655
  .e-listbox-container:not(.e-list-template) .e-list-item,
2646
2656
  .e-listbox-container .e-list-nrt,
2647
- .e-listbox-container .e-selectall-parent {
2657
+ .e-listbox-container .e-selectall-parent,
2658
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2659
+ .e-listboxtool-wrapper .e-list-nrt,
2660
+ .e-listboxtool-wrapper .e-selectall-parent {
2648
2661
  height: 36px;
2649
2662
  line-height: 1;
2650
2663
  padding: 10px 12px;
2651
2664
  position: relative;
2652
2665
  }
2653
2666
  .e-listbox-wrapper.e-filter-list,
2654
- .e-listbox-container.e-filter-list {
2667
+ .e-listbox-container.e-filter-list,
2668
+ .e-listboxtool-wrapper.e-filter-list {
2655
2669
  overflow: inherit;
2656
2670
  }
2657
2671
  .e-listbox-wrapper .e-list-parent,
2658
- .e-listbox-container .e-list-parent {
2672
+ .e-listbox-container .e-list-parent,
2673
+ .e-listboxtool-wrapper .e-list-parent {
2659
2674
  height: 100%;
2660
2675
  min-height: 36px;
2661
2676
  }
2662
2677
  .e-listbox-wrapper .e-list-item,
2663
- .e-listbox-container .e-list-item {
2678
+ .e-listbox-container .e-list-item,
2679
+ .e-listboxtool-wrapper .e-list-item {
2664
2680
  border-bottom: 0 solid;
2665
2681
  outline: none;
2666
2682
  }
2667
2683
  .e-listbox-wrapper .e-list-item.e-disabled,
2668
- .e-listbox-container .e-list-item.e-disabled {
2684
+ .e-listbox-container .e-list-item.e-disabled,
2685
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2669
2686
  pointer-events: none;
2670
2687
  }
2671
2688
  .e-listbox-wrapper .e-disable,
2672
- .e-listbox-container .e-disable {
2689
+ .e-listbox-container .e-disable,
2690
+ .e-listboxtool-wrapper .e-disable {
2673
2691
  opacity: 0.7;
2674
2692
  }
2675
2693
  .e-listbox-wrapper .e-list-parent,
2676
- .e-listbox-container .e-list-parent {
2694
+ .e-listbox-container .e-list-parent,
2695
+ .e-listboxtool-wrapper .e-list-parent {
2677
2696
  margin: 0;
2678
2697
  padding: 0;
2679
2698
  }
2680
2699
  .e-listbox-wrapper .e-list-header .e-text.header,
2681
- .e-listbox-container .e-list-header .e-text.header {
2700
+ .e-listbox-container .e-list-header .e-text.header,
2701
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2682
2702
  display: none;
2683
2703
  }
2684
2704
  .e-listbox-wrapper .e-icon-back,
2685
- .e-listbox-container .e-icon-back {
2705
+ .e-listbox-container .e-icon-back,
2706
+ .e-listboxtool-wrapper .e-icon-back {
2686
2707
  margin-top: 2px;
2687
2708
  }
2688
2709
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2689
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2710
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2711
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2690
2712
  display: none;
2691
2713
  }
2692
2714
  .e-listbox-wrapper .e-list-header,
2693
- .e-listbox-container .e-list-header {
2715
+ .e-listbox-container .e-list-header,
2716
+ .e-listboxtool-wrapper .e-list-header {
2694
2717
  -ms-flex-align: center;
2695
2718
  align-items: center;
2696
2719
  border-bottom: 1px solid;
@@ -2701,21 +2724,25 @@ ejs-multiselect {
2701
2724
  padding: 0 12px;
2702
2725
  }
2703
2726
  .e-listbox-wrapper .e-has-header > .e-view,
2704
- .e-listbox-container .e-has-header > .e-view {
2727
+ .e-listbox-container .e-has-header > .e-view,
2728
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2705
2729
  top: 45px;
2706
2730
  }
2707
2731
  .e-listbox-wrapper .e-but-back,
2708
- .e-listbox-container .e-but-back {
2732
+ .e-listbox-container .e-but-back,
2733
+ .e-listboxtool-wrapper .e-but-back {
2709
2734
  cursor: pointer;
2710
2735
  padding-right: 8px;
2711
2736
  }
2712
2737
  .e-listbox-wrapper .e-list-group-item:first-child,
2713
- .e-listbox-container .e-list-group-item:first-child {
2738
+ .e-listbox-container .e-list-group-item:first-child,
2739
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2714
2740
  border: 0;
2715
2741
  border-bottom: 0 solid transparent;
2716
2742
  }
2717
2743
  .e-listbox-wrapper .e-list-group-item,
2718
- .e-listbox-container .e-list-group-item {
2744
+ .e-listbox-container .e-list-group-item,
2745
+ .e-listboxtool-wrapper .e-list-group-item {
2719
2746
  border-bottom: 0 solid transparent;
2720
2747
  border-top: 1px solid;
2721
2748
  font-weight: 600;
@@ -2724,7 +2751,8 @@ ejs-multiselect {
2724
2751
  padding: 10px 12px;
2725
2752
  }
2726
2753
  .e-listbox-wrapper .e-icon-collapsible,
2727
- .e-listbox-container .e-icon-collapsible {
2754
+ .e-listbox-container .e-icon-collapsible,
2755
+ .e-listboxtool-wrapper .e-icon-collapsible {
2728
2756
  cursor: pointer;
2729
2757
  font-size: 12px;
2730
2758
  position: absolute;
@@ -2733,42 +2761,51 @@ ejs-multiselect {
2733
2761
  transform: translateY(-50%);
2734
2762
  }
2735
2763
  .e-listbox-wrapper .e-text-content,
2736
- .e-listbox-container .e-text-content {
2764
+ .e-listbox-container .e-text-content,
2765
+ .e-listboxtool-wrapper .e-text-content {
2737
2766
  height: 100%;
2738
2767
  position: relative;
2739
2768
  vertical-align: middle;
2740
2769
  }
2741
2770
  .e-listbox-wrapper .e-text-content *,
2742
- .e-listbox-container .e-text-content * {
2771
+ .e-listbox-container .e-text-content *,
2772
+ .e-listboxtool-wrapper .e-text-content * {
2743
2773
  display: inline-block;
2744
2774
  vertical-align: middle;
2745
2775
  }
2746
2776
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2747
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2777
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2778
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2748
2779
  width: calc(100% - 40px);
2749
2780
  }
2750
2781
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2751
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2782
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2783
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2752
2784
  width: calc(100% - 90px);
2753
2785
  }
2754
2786
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2755
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2787
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2788
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2756
2789
  width: calc(100% - 80px);
2757
2790
  }
2758
2791
  .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,
2759
- .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 {
2792
+ .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,
2793
+ .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 {
2760
2794
  width: calc(100% - 92px);
2761
2795
  }
2762
2796
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2763
- .e-listbox-container .e-checkbox .e-checkbox-left {
2797
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2798
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2764
2799
  margin: -2px 8px 0 0;
2765
2800
  }
2766
2801
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2767
- .e-listbox-container .e-checkbox .e-checkbox-right {
2802
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2803
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2768
2804
  margin: -2px 0 0 8px;
2769
2805
  }
2770
2806
  .e-listbox-wrapper .e-list-text,
2771
- .e-listbox-container .e-list-text {
2807
+ .e-listbox-container .e-list-text,
2808
+ .e-listboxtool-wrapper .e-list-text {
2772
2809
  cursor: pointer;
2773
2810
  display: inline-block;
2774
2811
  overflow: hidden;
@@ -2778,107 +2815,129 @@ ejs-multiselect {
2778
2815
  width: 100%;
2779
2816
  }
2780
2817
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2781
- .e-listbox-container .e-list-icon + .e-list-text {
2818
+ .e-listbox-container .e-list-icon + .e-list-text,
2819
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2782
2820
  width: calc(100% - 60px);
2783
2821
  }
2784
2822
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2785
- .e-listbox-container .e-icon-wrapper .e-list-text {
2823
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2824
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2786
2825
  width: calc(100% - 60px);
2787
2826
  }
2788
2827
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2789
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2828
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2829
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2790
2830
  width: calc(100% - 60px);
2791
2831
  }
2792
2832
  .e-listbox-wrapper .e-list-icon,
2793
- .e-listbox-container .e-list-icon {
2833
+ .e-listbox-container .e-list-icon,
2834
+ .e-listboxtool-wrapper .e-list-icon {
2794
2835
  height: 30px;
2795
2836
  margin-right: 16px;
2796
2837
  width: 30px;
2797
2838
  }
2798
2839
  .e-listbox-wrapper .e-content,
2799
- .e-listbox-container .e-content {
2840
+ .e-listbox-container .e-content,
2841
+ .e-listboxtool-wrapper .e-content {
2800
2842
  overflow: hidden;
2801
2843
  position: relative;
2802
2844
  }
2803
2845
  .e-listbox-wrapper .e-list-header .e-text,
2804
- .e-listbox-container .e-list-header .e-text {
2846
+ .e-listbox-container .e-list-header .e-text,
2847
+ .e-listboxtool-wrapper .e-list-header .e-text {
2805
2848
  cursor: pointer;
2806
2849
  text-indent: 0;
2807
2850
  }
2808
2851
  .e-listbox-wrapper .e-text .e-headertext,
2809
- .e-listbox-container .e-text .e-headertext {
2852
+ .e-listbox-container .e-text .e-headertext,
2853
+ .e-listboxtool-wrapper .e-text .e-headertext {
2810
2854
  display: inline-block;
2811
2855
  line-height: 18px;
2812
2856
  }
2813
2857
  .e-listbox-wrapper.e-rtl,
2814
- .e-listbox-container.e-rtl {
2858
+ .e-listbox-container.e-rtl,
2859
+ .e-listboxtool-wrapper.e-rtl {
2815
2860
  direction: rtl;
2816
2861
  }
2817
2862
  .e-listbox-wrapper.e-rtl .e-list-icon,
2818
- .e-listbox-container.e-rtl .e-list-icon {
2863
+ .e-listbox-container.e-rtl .e-list-icon,
2864
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2819
2865
  margin-left: 16px;
2820
2866
  margin-right: 0;
2821
2867
  }
2822
2868
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2823
- .e-listbox-container.e-rtl .e-icon-collapsible {
2869
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2870
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2824
2871
  left: 0%;
2825
2872
  right: initial;
2826
2873
  top: 50%;
2827
2874
  transform: translateY(-50%) rotate(180deg);
2828
2875
  }
2829
2876
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2830
- .e-listbox-container.e-rtl .e-list-header .e-text {
2877
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2878
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2831
2879
  cursor: pointer;
2832
2880
  }
2833
2881
  .e-listbox-wrapper.e-rtl .e-but-back,
2834
- .e-listbox-container.e-rtl .e-but-back {
2882
+ .e-listbox-container.e-rtl .e-but-back,
2883
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2835
2884
  transform: rotate(180deg);
2836
2885
  }
2837
2886
  .e-listbox-wrapper.e-rtl .e-icon-back,
2838
- .e-listbox-container.e-rtl .e-icon-back {
2887
+ .e-listbox-container.e-rtl .e-icon-back,
2888
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2839
2889
  margin-top: -2px;
2840
2890
  }
2841
2891
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2842
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2892
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2893
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2843
2894
  margin: -2px 0 0 8px;
2844
2895
  }
2845
2896
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2846
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2897
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2898
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2847
2899
  margin: -2px 8px 0 0;
2848
2900
  }
2849
2901
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2850
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2902
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2903
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2851
2904
  margin: -2px 0 0 8px;
2852
2905
  }
2853
2906
  .e-listbox-wrapper .e-checkbox-wrapper,
2854
- .e-listbox-container .e-checkbox-wrapper {
2907
+ .e-listbox-container .e-checkbox-wrapper,
2908
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2855
2909
  margin: -2px 8px 0 0;
2856
2910
  text-indent: 0;
2857
2911
  vertical-align: middle;
2858
2912
  }
2859
2913
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2860
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2914
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2915
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2861
2916
  position: absolute;
2862
2917
  right: 0;
2863
2918
  top: 30%;
2864
2919
  }
2865
2920
  .e-listbox-wrapper .e-input-group,
2866
- .e-listbox-container .e-input-group {
2921
+ .e-listbox-container .e-input-group,
2922
+ .e-listboxtool-wrapper .e-input-group {
2867
2923
  padding: 4px 8px;
2868
2924
  }
2869
2925
  .e-listbox-wrapper .e-input-focus,
2870
- .e-listbox-container .e-input-focus {
2926
+ .e-listbox-container .e-input-focus,
2927
+ .e-listboxtool-wrapper .e-input-focus {
2871
2928
  padding: 4px 4px 4px 8px;
2872
2929
  }
2873
2930
  .e-listbox-wrapper .e-hidden-select,
2874
- .e-listbox-container .e-hidden-select {
2931
+ .e-listbox-container .e-hidden-select,
2932
+ .e-listboxtool-wrapper .e-hidden-select {
2875
2933
  height: 1px;
2876
2934
  opacity: 0;
2877
2935
  position: absolute;
2878
2936
  width: 100%;
2879
2937
  }
2880
2938
  .e-listbox-wrapper .e-placeholder,
2881
- .e-listbox-container .e-placeholder {
2939
+ .e-listbox-container .e-placeholder,
2940
+ .e-listboxtool-wrapper .e-placeholder {
2882
2941
  background-color: #0d6efd;
2883
2942
  display: block;
2884
2943
  height: 1px;
@@ -2900,24 +2959,29 @@ ejs-listbox {
2900
2959
  }
2901
2960
 
2902
2961
  .e-listbox-wrapper.e-sortableclone,
2903
- .e-listbox-container.e-sortableclone {
2962
+ .e-listbox-container.e-sortableclone,
2963
+ .e-listboxtool-wrapper.e-sortableclone {
2904
2964
  border-width: 0;
2905
2965
  overflow: visible;
2906
2966
  }
2907
2967
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2908
- .e-listbox-container.e-sortableclone .e-list-item {
2968
+ .e-listbox-container.e-sortableclone .e-list-item,
2969
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2909
2970
  list-style-type: none;
2910
2971
  }
2911
2972
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2912
- .e-listbox-container.e-sortableclone .e-ripple {
2973
+ .e-listbox-container.e-sortableclone .e-ripple,
2974
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2913
2975
  overflow: visible;
2914
2976
  }
2915
2977
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2916
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
2978
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
2979
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2917
2980
  display: none;
2918
2981
  }
2919
2982
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2920
- .e-listbox-container.e-sortableclone .e-list-badge {
2983
+ .e-listbox-container.e-sortableclone .e-list-badge,
2984
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2921
2985
  -ms-flex-align: center;
2922
2986
  align-items: center;
2923
2987
  background-color: #0d6efd;
@@ -2936,6 +3000,10 @@ ejs-listbox {
2936
3000
  width: 22px;
2937
3001
  }
2938
3002
 
3003
+ .e-listboxtool-wrapper.e-sortableclone {
3004
+ display: block;
3005
+ }
3006
+
2939
3007
  .e-listboxtool-wrapper,
2940
3008
  .e-listboxtool-container {
2941
3009
  cursor: pointer;
@@ -3117,12 +3185,14 @@ ejs-listbox {
3117
3185
  }
3118
3186
 
3119
3187
  .e-listbox-wrapper,
3120
- .e-listbox-container {
3188
+ .e-listbox-container,
3189
+ .e-listboxtool-wrapper {
3121
3190
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3122
3191
  font-size: 14px;
3123
3192
  }
3124
3193
  .e-listbox-wrapper .e-list-header,
3125
- .e-listbox-container .e-list-header {
3194
+ .e-listbox-container .e-list-header,
3195
+ .e-listboxtool-wrapper .e-list-header {
3126
3196
  background-color: #e9ecef;
3127
3197
  border-color: rgba(0, 0, 0, 0.12);
3128
3198
  color: #495057;
@@ -3130,22 +3200,26 @@ ejs-listbox {
3130
3200
  }
3131
3201
 
3132
3202
  .e-listbox-wrapper.e-filter-list .e-list-parent,
3133
- .e-listbox-container.e-filter-list .e-list-parent {
3203
+ .e-listbox-container.e-filter-list .e-list-parent,
3204
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
3134
3205
  height: calc(100% - 47px);
3135
3206
  }
3136
3207
 
3137
3208
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3138
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3209
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3210
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
3139
3211
  height: calc(100% - 86px);
3140
3212
  }
3141
3213
 
3142
3214
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3143
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3215
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3216
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
3144
3217
  height: calc(100% - 36px);
3145
3218
  }
3146
3219
 
3147
3220
  .e-listbox-wrapper .e-list-item,
3148
- .e-listbox-container .e-list-item {
3221
+ .e-listbox-container .e-list-item,
3222
+ .e-listboxtool-wrapper .e-list-item {
3149
3223
  background-color: transparent;
3150
3224
  border-bottom: 0 solid transparent;
3151
3225
  border-left: 0 solid transparent;
@@ -3156,41 +3230,50 @@ ejs-listbox {
3156
3230
 
3157
3231
  .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),
3158
3232
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
3159
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3233
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3234
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3235
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3160
3236
  background-color: #e9ecef;
3161
3237
  border-color: transparent;
3162
3238
  color: #212529;
3163
3239
  }
3164
3240
 
3165
3241
  .e-listbox-wrapper .e-list-item.e-selected,
3166
- .e-listbox-container .e-list-item.e-selected {
3242
+ .e-listbox-container .e-list-item.e-selected,
3243
+ .e-listboxtool-wrapper .e-list-item.e-selected {
3167
3244
  background-color: #e9ecef;
3168
3245
  color: rgba(33, 37, 41, 0.87);
3169
3246
  }
3170
3247
 
3171
3248
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
3172
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3249
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3250
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3173
3251
  background-color: transparent;
3174
3252
  color: #212529;
3175
3253
  }
3176
3254
 
3177
3255
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3178
3256
  .e-listbox-container .e-list-item.e-focused,
3179
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3257
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3258
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3259
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3180
3260
  background-color: #e9ecef;
3181
3261
  color: rgba(33, 37, 41, 0.87);
3182
3262
  }
3183
3263
 
3184
3264
  .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,
3185
3265
  .e-listbox-container .e-list-item.e-focused .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 {
3266
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3267
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3268
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3187
3269
  background-color: #0d6efd;
3188
3270
  border-color: transparent;
3189
3271
  color: #fff;
3190
3272
  }
3191
3273
 
3192
3274
  .e-listbox-wrapper .e-list-group-item,
3193
- .e-listbox-container .e-list-group-item {
3275
+ .e-listbox-container .e-list-group-item,
3276
+ .e-listboxtool-wrapper .e-list-group-item {
3194
3277
  background-color: #e9ecef;
3195
3278
  border-color: rgba(0, 0, 0, 0.12);
3196
3279
  color: #000;
@@ -3198,32 +3281,38 @@ ejs-listbox {
3198
3281
  }
3199
3282
 
3200
3283
  .e-listbox-wrapper .e-selectall-parent,
3201
- .e-listbox-container .e-selectall-parent {
3284
+ .e-listbox-container .e-selectall-parent,
3285
+ .e-listboxtool-wrapper .e-selectall-parent {
3202
3286
  background-color: transparent;
3203
3287
  border-bottom: 1px solid #dee2e6;
3204
3288
  color: #212529;
3205
3289
  }
3206
3290
 
3207
3291
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3208
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3292
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3293
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3209
3294
  background-color: transparent;
3210
3295
  }
3211
3296
 
3212
3297
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3213
- .e-listbox-container.e-list-template .e-list-wrapper {
3298
+ .e-listbox-container.e-list-template .e-list-wrapper,
3299
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3214
3300
  height: inherit;
3215
3301
  position: relative;
3216
3302
  }
3217
3303
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3218
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3304
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3305
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3219
3306
  padding: 8px 16px;
3220
3307
  }
3221
3308
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3222
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3309
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3310
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3223
3311
  padding: 4px;
3224
3312
  }
3225
3313
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3226
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3314
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3315
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3227
3316
  color: #212529;
3228
3317
  display: block;
3229
3318
  font-size: 14px;
@@ -3235,7 +3324,8 @@ ejs-listbox {
3235
3324
  white-space: nowrap;
3236
3325
  }
3237
3326
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3238
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3327
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3328
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3239
3329
  color: #495057;
3240
3330
  display: block;
3241
3331
  font-size: 14px;
@@ -3244,13 +3334,15 @@ ejs-listbox {
3244
3334
  word-wrap: break-word;
3245
3335
  }
3246
3336
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3247
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3337
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3338
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3248
3339
  overflow: hidden;
3249
3340
  text-overflow: ellipsis;
3250
3341
  white-space: nowrap;
3251
3342
  }
3252
3343
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3253
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3344
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3345
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3254
3346
  height: 40px;
3255
3347
  left: 0;
3256
3348
  position: absolute;
@@ -3258,17 +3350,20 @@ ejs-listbox {
3258
3350
  width: 40px;
3259
3351
  }
3260
3352
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3261
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3353
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3354
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3262
3355
  padding-left: 68px;
3263
3356
  padding-right: 16px;
3264
3357
  }
3265
3358
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3266
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3359
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3360
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3267
3361
  padding-left: 16px;
3268
3362
  padding-right: 68px;
3269
3363
  }
3270
3364
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3271
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3365
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3366
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3272
3367
  height: 40px;
3273
3368
  position: absolute;
3274
3369
  right: 0;
@@ -3276,15 +3371,18 @@ ejs-listbox {
3276
3371
  width: 40px;
3277
3372
  }
3278
3373
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3279
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3374
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3375
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3280
3376
  top: 0;
3281
3377
  }
3282
3378
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3283
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3379
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3380
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3284
3381
  top: 0;
3285
3382
  }
3286
3383
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3287
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3384
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3385
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3288
3386
  font-size: 10px;
3289
3387
  height: 18px;
3290
3388
  line-height: 16px;
@@ -3296,17 +3394,20 @@ ejs-listbox {
3296
3394
  width: 32px;
3297
3395
  }
3298
3396
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3299
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3397
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3398
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3300
3399
  padding-left: 68px;
3301
3400
  padding-right: 10px;
3302
3401
  }
3303
3402
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3304
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3403
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3404
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3305
3405
  padding-left: 16px;
3306
3406
  padding-right: 10px;
3307
3407
  }
3308
3408
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3309
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3409
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3410
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3310
3411
  display: block;
3311
3412
  margin: 0;
3312
3413
  overflow: hidden;
@@ -3315,53 +3416,64 @@ ejs-listbox {
3315
3416
  white-space: nowrap;
3316
3417
  }
3317
3418
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3318
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3419
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3420
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3319
3421
  color: #212529;
3320
3422
  }
3321
3423
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3322
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3424
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3425
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3323
3426
  color: #212529;
3324
3427
  }
3325
3428
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3326
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3429
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3430
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3327
3431
  color: rgba(33, 37, 41, 0.87);
3328
3432
  }
3329
3433
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3330
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3434
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3435
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3331
3436
  color: rgba(33, 37, 41, 0.87);
3332
3437
  }
3333
3438
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3334
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3439
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3440
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3335
3441
  left: inherit;
3336
3442
  right: 0;
3337
3443
  }
3338
3444
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3339
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3445
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3446
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3340
3447
  padding-left: 16px;
3341
3448
  padding-right: 68px;
3342
3449
  }
3343
3450
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3344
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3451
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3452
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3345
3453
  padding-left: 68px;
3346
3454
  padding-right: 16px;
3347
3455
  }
3348
3456
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3349
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3457
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3458
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3350
3459
  left: 0;
3351
3460
  right: inherit;
3352
3461
  }
3353
3462
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3354
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3463
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3464
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3355
3465
  left: 12px;
3356
3466
  right: inherit;
3357
3467
  }
3358
3468
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3359
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3469
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3470
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3360
3471
  padding-left: 10px;
3361
3472
  padding-right: 68px;
3362
3473
  }
3363
3474
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3364
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3475
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3476
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3365
3477
  padding-left: 10px;
3366
3478
  padding-right: 16px;
3367
3479
  }