@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
@@ -423,6 +423,10 @@
423
423
  color: #a19f9d;
424
424
  }
425
425
 
426
+ .e-selectall-parent.e-item-focus {
427
+ background-color: #323130;
428
+ }
429
+
426
430
  /* stylelint-disable property-no-vendor-prefix */
427
431
  /* stylelint-disable-line no-empty-source */
428
432
  /* stylelint-disable property-no-vendor-prefix */
@@ -1645,8 +1649,8 @@ ejs-dropdownlist {
1645
1649
  margin-top: -2.4em;
1646
1650
  position: absolute;
1647
1651
  right: 6px;
1648
- top: 100%;
1649
1652
  width: 24px;
1653
+ top: 100%;
1650
1654
  }
1651
1655
 
1652
1656
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2674,7 +2678,8 @@ ejs-multiselect {
2674
2678
 
2675
2679
  /* stylelint-disable property-no-vendor-prefix */
2676
2680
  .e-listbox-wrapper,
2677
- .e-listbox-container {
2681
+ .e-listbox-container,
2682
+ .e-listboxtool-wrapper {
2678
2683
  -webkit-overflow-scrolling: touch;
2679
2684
  box-sizing: border-box;
2680
2685
  cursor: pointer;
@@ -2686,24 +2691,29 @@ ejs-multiselect {
2686
2691
  width: 100%;
2687
2692
  }
2688
2693
  .e-listbox-wrapper *,
2689
- .e-listbox-container * {
2694
+ .e-listbox-container *,
2695
+ .e-listboxtool-wrapper * {
2690
2696
  box-sizing: border-box;
2691
2697
  }
2692
2698
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2693
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
2699
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
2700
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
2694
2701
  width: 84% !important; /* stylelint-disable-line declaration-no-important */
2695
2702
  }
2696
2703
  .e-listbox-wrapper:focus,
2697
- .e-listbox-container:focus {
2704
+ .e-listbox-container:focus,
2705
+ .e-listboxtool-wrapper:focus {
2698
2706
  outline: none;
2699
2707
  }
2700
2708
  .e-listbox-wrapper.e-disabled,
2701
- .e-listbox-container.e-disabled {
2709
+ .e-listbox-container.e-disabled,
2710
+ .e-listboxtool-wrapper.e-disabled {
2702
2711
  cursor: default;
2703
2712
  pointer-events: none;
2704
2713
  }
2705
2714
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2706
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2715
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2716
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2707
2717
  text-align: center;
2708
2718
  }
2709
2719
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2711,53 +2721,66 @@ ejs-multiselect {
2711
2721
  .e-listbox-wrapper .e-selectall-parent,
2712
2722
  .e-listbox-container:not(.e-list-template) .e-list-item,
2713
2723
  .e-listbox-container .e-list-nrt,
2714
- .e-listbox-container .e-selectall-parent {
2724
+ .e-listbox-container .e-selectall-parent,
2725
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2726
+ .e-listboxtool-wrapper .e-list-nrt,
2727
+ .e-listboxtool-wrapper .e-selectall-parent {
2715
2728
  height: 36px;
2716
2729
  line-height: 1;
2717
2730
  padding: 10px 12px;
2718
2731
  position: relative;
2719
2732
  }
2720
2733
  .e-listbox-wrapper.e-filter-list,
2721
- .e-listbox-container.e-filter-list {
2734
+ .e-listbox-container.e-filter-list,
2735
+ .e-listboxtool-wrapper.e-filter-list {
2722
2736
  overflow: inherit;
2723
2737
  }
2724
2738
  .e-listbox-wrapper .e-list-parent,
2725
- .e-listbox-container .e-list-parent {
2739
+ .e-listbox-container .e-list-parent,
2740
+ .e-listboxtool-wrapper .e-list-parent {
2726
2741
  height: 100%;
2727
2742
  min-height: 36px;
2728
2743
  }
2729
2744
  .e-listbox-wrapper .e-list-item,
2730
- .e-listbox-container .e-list-item {
2745
+ .e-listbox-container .e-list-item,
2746
+ .e-listboxtool-wrapper .e-list-item {
2731
2747
  border-bottom: 0 solid;
2732
2748
  outline: none;
2733
2749
  }
2734
2750
  .e-listbox-wrapper .e-list-item.e-disabled,
2735
- .e-listbox-container .e-list-item.e-disabled {
2751
+ .e-listbox-container .e-list-item.e-disabled,
2752
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2736
2753
  pointer-events: none;
2737
2754
  }
2738
2755
  .e-listbox-wrapper .e-disable,
2739
- .e-listbox-container .e-disable {
2756
+ .e-listbox-container .e-disable,
2757
+ .e-listboxtool-wrapper .e-disable {
2740
2758
  opacity: 0.7;
2741
2759
  }
2742
2760
  .e-listbox-wrapper .e-list-parent,
2743
- .e-listbox-container .e-list-parent {
2761
+ .e-listbox-container .e-list-parent,
2762
+ .e-listboxtool-wrapper .e-list-parent {
2744
2763
  margin: 0;
2745
2764
  padding: 0;
2746
2765
  }
2747
2766
  .e-listbox-wrapper .e-list-header .e-text.header,
2748
- .e-listbox-container .e-list-header .e-text.header {
2767
+ .e-listbox-container .e-list-header .e-text.header,
2768
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2749
2769
  display: none;
2750
2770
  }
2751
2771
  .e-listbox-wrapper .e-icon-back,
2752
- .e-listbox-container .e-icon-back {
2772
+ .e-listbox-container .e-icon-back,
2773
+ .e-listboxtool-wrapper .e-icon-back {
2753
2774
  margin-top: 2px;
2754
2775
  }
2755
2776
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2756
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2777
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2778
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2757
2779
  display: none;
2758
2780
  }
2759
2781
  .e-listbox-wrapper .e-list-header,
2760
- .e-listbox-container .e-list-header {
2782
+ .e-listbox-container .e-list-header,
2783
+ .e-listboxtool-wrapper .e-list-header {
2761
2784
  -ms-flex-align: center;
2762
2785
  align-items: center;
2763
2786
  border-bottom: 1px solid;
@@ -2768,21 +2791,25 @@ ejs-multiselect {
2768
2791
  padding: 0 12px;
2769
2792
  }
2770
2793
  .e-listbox-wrapper .e-has-header > .e-view,
2771
- .e-listbox-container .e-has-header > .e-view {
2794
+ .e-listbox-container .e-has-header > .e-view,
2795
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2772
2796
  top: 45px;
2773
2797
  }
2774
2798
  .e-listbox-wrapper .e-but-back,
2775
- .e-listbox-container .e-but-back {
2799
+ .e-listbox-container .e-but-back,
2800
+ .e-listboxtool-wrapper .e-but-back {
2776
2801
  cursor: pointer;
2777
2802
  padding-right: 8px;
2778
2803
  }
2779
2804
  .e-listbox-wrapper .e-list-group-item:first-child,
2780
- .e-listbox-container .e-list-group-item:first-child {
2805
+ .e-listbox-container .e-list-group-item:first-child,
2806
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2781
2807
  border: 0;
2782
2808
  border-bottom: 0 solid transparent;
2783
2809
  }
2784
2810
  .e-listbox-wrapper .e-list-group-item,
2785
- .e-listbox-container .e-list-group-item {
2811
+ .e-listbox-container .e-list-group-item,
2812
+ .e-listboxtool-wrapper .e-list-group-item {
2786
2813
  border-bottom: 0 solid transparent;
2787
2814
  border-top: 1px solid;
2788
2815
  font-weight: 600;
@@ -2791,7 +2818,8 @@ ejs-multiselect {
2791
2818
  padding: 10px 12px;
2792
2819
  }
2793
2820
  .e-listbox-wrapper .e-icon-collapsible,
2794
- .e-listbox-container .e-icon-collapsible {
2821
+ .e-listbox-container .e-icon-collapsible,
2822
+ .e-listboxtool-wrapper .e-icon-collapsible {
2795
2823
  cursor: pointer;
2796
2824
  font-size: 12px;
2797
2825
  position: absolute;
@@ -2800,42 +2828,51 @@ ejs-multiselect {
2800
2828
  transform: translateY(-50%);
2801
2829
  }
2802
2830
  .e-listbox-wrapper .e-text-content,
2803
- .e-listbox-container .e-text-content {
2831
+ .e-listbox-container .e-text-content,
2832
+ .e-listboxtool-wrapper .e-text-content {
2804
2833
  height: 100%;
2805
2834
  position: relative;
2806
2835
  vertical-align: middle;
2807
2836
  }
2808
2837
  .e-listbox-wrapper .e-text-content *,
2809
- .e-listbox-container .e-text-content * {
2838
+ .e-listbox-container .e-text-content *,
2839
+ .e-listboxtool-wrapper .e-text-content * {
2810
2840
  display: inline-block;
2811
2841
  vertical-align: middle;
2812
2842
  }
2813
2843
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2814
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2844
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2845
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2815
2846
  width: calc(100% - 40px);
2816
2847
  }
2817
2848
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2818
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2849
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2850
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2819
2851
  width: calc(100% - 90px);
2820
2852
  }
2821
2853
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2822
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2854
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2855
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2823
2856
  width: calc(100% - 80px);
2824
2857
  }
2825
2858
  .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,
2826
- .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 {
2859
+ .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,
2860
+ .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 {
2827
2861
  width: calc(100% - 92px);
2828
2862
  }
2829
2863
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2830
- .e-listbox-container .e-checkbox .e-checkbox-left {
2864
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2865
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2831
2866
  margin: -2px 8px 0 0;
2832
2867
  }
2833
2868
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2834
- .e-listbox-container .e-checkbox .e-checkbox-right {
2869
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2870
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2835
2871
  margin: -2px 0 0 8px;
2836
2872
  }
2837
2873
  .e-listbox-wrapper .e-list-text,
2838
- .e-listbox-container .e-list-text {
2874
+ .e-listbox-container .e-list-text,
2875
+ .e-listboxtool-wrapper .e-list-text {
2839
2876
  cursor: pointer;
2840
2877
  display: inline-block;
2841
2878
  overflow: hidden;
@@ -2845,107 +2882,129 @@ ejs-multiselect {
2845
2882
  width: 100%;
2846
2883
  }
2847
2884
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2848
- .e-listbox-container .e-list-icon + .e-list-text {
2885
+ .e-listbox-container .e-list-icon + .e-list-text,
2886
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2849
2887
  width: calc(100% - 60px);
2850
2888
  }
2851
2889
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2852
- .e-listbox-container .e-icon-wrapper .e-list-text {
2890
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2891
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2853
2892
  width: calc(100% - 60px);
2854
2893
  }
2855
2894
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2856
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2895
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2896
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2857
2897
  width: calc(100% - 60px);
2858
2898
  }
2859
2899
  .e-listbox-wrapper .e-list-icon,
2860
- .e-listbox-container .e-list-icon {
2900
+ .e-listbox-container .e-list-icon,
2901
+ .e-listboxtool-wrapper .e-list-icon {
2861
2902
  height: 30px;
2862
2903
  margin-right: 16px;
2863
2904
  width: 30px;
2864
2905
  }
2865
2906
  .e-listbox-wrapper .e-content,
2866
- .e-listbox-container .e-content {
2907
+ .e-listbox-container .e-content,
2908
+ .e-listboxtool-wrapper .e-content {
2867
2909
  overflow: hidden;
2868
2910
  position: relative;
2869
2911
  }
2870
2912
  .e-listbox-wrapper .e-list-header .e-text,
2871
- .e-listbox-container .e-list-header .e-text {
2913
+ .e-listbox-container .e-list-header .e-text,
2914
+ .e-listboxtool-wrapper .e-list-header .e-text {
2872
2915
  cursor: pointer;
2873
2916
  text-indent: 0;
2874
2917
  }
2875
2918
  .e-listbox-wrapper .e-text .e-headertext,
2876
- .e-listbox-container .e-text .e-headertext {
2919
+ .e-listbox-container .e-text .e-headertext,
2920
+ .e-listboxtool-wrapper .e-text .e-headertext {
2877
2921
  display: inline-block;
2878
2922
  line-height: 18px;
2879
2923
  }
2880
2924
  .e-listbox-wrapper.e-rtl,
2881
- .e-listbox-container.e-rtl {
2925
+ .e-listbox-container.e-rtl,
2926
+ .e-listboxtool-wrapper.e-rtl {
2882
2927
  direction: rtl;
2883
2928
  }
2884
2929
  .e-listbox-wrapper.e-rtl .e-list-icon,
2885
- .e-listbox-container.e-rtl .e-list-icon {
2930
+ .e-listbox-container.e-rtl .e-list-icon,
2931
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2886
2932
  margin-left: 16px;
2887
2933
  margin-right: 0;
2888
2934
  }
2889
2935
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2890
- .e-listbox-container.e-rtl .e-icon-collapsible {
2936
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2937
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2891
2938
  left: 0%;
2892
2939
  right: initial;
2893
2940
  top: 50%;
2894
2941
  transform: translateY(-50%) rotate(180deg);
2895
2942
  }
2896
2943
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2897
- .e-listbox-container.e-rtl .e-list-header .e-text {
2944
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2945
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2898
2946
  cursor: pointer;
2899
2947
  }
2900
2948
  .e-listbox-wrapper.e-rtl .e-but-back,
2901
- .e-listbox-container.e-rtl .e-but-back {
2949
+ .e-listbox-container.e-rtl .e-but-back,
2950
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2902
2951
  transform: rotate(180deg);
2903
2952
  }
2904
2953
  .e-listbox-wrapper.e-rtl .e-icon-back,
2905
- .e-listbox-container.e-rtl .e-icon-back {
2954
+ .e-listbox-container.e-rtl .e-icon-back,
2955
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2906
2956
  margin-top: -2px;
2907
2957
  }
2908
2958
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2909
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2959
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2960
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2910
2961
  margin: -2px 0 0 8px;
2911
2962
  }
2912
2963
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2913
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2964
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2965
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2914
2966
  margin: -2px 8px 0 0;
2915
2967
  }
2916
2968
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2917
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2969
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2970
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2918
2971
  margin: -2px 0 0 8px;
2919
2972
  }
2920
2973
  .e-listbox-wrapper .e-checkbox-wrapper,
2921
- .e-listbox-container .e-checkbox-wrapper {
2974
+ .e-listbox-container .e-checkbox-wrapper,
2975
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2922
2976
  margin: -2px 8px 0 0;
2923
2977
  text-indent: 0;
2924
2978
  vertical-align: middle;
2925
2979
  }
2926
2980
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2927
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2981
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2982
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2928
2983
  position: absolute;
2929
2984
  right: 0;
2930
2985
  top: 30%;
2931
2986
  }
2932
2987
  .e-listbox-wrapper .e-input-group,
2933
- .e-listbox-container .e-input-group {
2988
+ .e-listbox-container .e-input-group,
2989
+ .e-listboxtool-wrapper .e-input-group {
2934
2990
  padding: 4px 8px;
2935
2991
  }
2936
2992
  .e-listbox-wrapper .e-input-focus,
2937
- .e-listbox-container .e-input-focus {
2993
+ .e-listbox-container .e-input-focus,
2994
+ .e-listboxtool-wrapper .e-input-focus {
2938
2995
  padding: 4px 4px 4px 8px;
2939
2996
  }
2940
2997
  .e-listbox-wrapper .e-hidden-select,
2941
- .e-listbox-container .e-hidden-select {
2998
+ .e-listbox-container .e-hidden-select,
2999
+ .e-listboxtool-wrapper .e-hidden-select {
2942
3000
  height: 1px;
2943
3001
  opacity: 0;
2944
3002
  position: absolute;
2945
3003
  width: 100%;
2946
3004
  }
2947
3005
  .e-listbox-wrapper .e-placeholder,
2948
- .e-listbox-container .e-placeholder {
3006
+ .e-listbox-container .e-placeholder,
3007
+ .e-listboxtool-wrapper .e-placeholder {
2949
3008
  background-color: #0078d4;
2950
3009
  display: block;
2951
3010
  height: 1px;
@@ -2967,24 +3026,29 @@ ejs-listbox {
2967
3026
  }
2968
3027
 
2969
3028
  .e-listbox-wrapper.e-sortableclone,
2970
- .e-listbox-container.e-sortableclone {
3029
+ .e-listbox-container.e-sortableclone,
3030
+ .e-listboxtool-wrapper.e-sortableclone {
2971
3031
  border-width: 0;
2972
3032
  overflow: visible;
2973
3033
  }
2974
3034
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2975
- .e-listbox-container.e-sortableclone .e-list-item {
3035
+ .e-listbox-container.e-sortableclone .e-list-item,
3036
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2976
3037
  list-style-type: none;
2977
3038
  }
2978
3039
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2979
- .e-listbox-container.e-sortableclone .e-ripple {
3040
+ .e-listbox-container.e-sortableclone .e-ripple,
3041
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2980
3042
  overflow: visible;
2981
3043
  }
2982
3044
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2983
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
3045
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
3046
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2984
3047
  display: none;
2985
3048
  }
2986
3049
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2987
- .e-listbox-container.e-sortableclone .e-list-badge {
3050
+ .e-listbox-container.e-sortableclone .e-list-badge,
3051
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2988
3052
  -ms-flex-align: center;
2989
3053
  align-items: center;
2990
3054
  background-color: #0078d4;
@@ -3003,6 +3067,10 @@ ejs-listbox {
3003
3067
  width: 22px;
3004
3068
  }
3005
3069
 
3070
+ .e-listboxtool-wrapper.e-sortableclone {
3071
+ display: block;
3072
+ }
3073
+
3006
3074
  .e-listboxtool-wrapper,
3007
3075
  .e-listboxtool-container {
3008
3076
  cursor: pointer;
@@ -3184,12 +3252,14 @@ ejs-listbox {
3184
3252
  }
3185
3253
 
3186
3254
  .e-listbox-wrapper,
3187
- .e-listbox-container {
3255
+ .e-listbox-container,
3256
+ .e-listboxtool-wrapper {
3188
3257
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
3189
3258
  font-size: 14px;
3190
3259
  }
3191
3260
  .e-listbox-wrapper .e-list-header,
3192
- .e-listbox-container .e-list-header {
3261
+ .e-listbox-container .e-list-header,
3262
+ .e-listboxtool-wrapper .e-list-header {
3193
3263
  background-color: #252423;
3194
3264
  border-color: #292827;
3195
3265
  color: #c8c6c4;
@@ -3197,27 +3267,32 @@ ejs-listbox {
3197
3267
  }
3198
3268
 
3199
3269
  .e-listbox-wrapper.e-filter-list .e-list-parent,
3200
- .e-listbox-container.e-filter-list .e-list-parent {
3270
+ .e-listbox-container.e-filter-list .e-list-parent,
3271
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
3201
3272
  height: calc(100% - 47px);
3202
3273
  }
3203
3274
 
3204
3275
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3205
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3276
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3277
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
3206
3278
  height: calc(100% - 93px);
3207
3279
  }
3208
3280
 
3209
3281
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3210
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3282
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3283
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
3211
3284
  height: calc(100% - 36px);
3212
3285
  }
3213
3286
 
3214
3287
  .e-listbox-wrapper .e-icons,
3215
- .e-listbox-container .e-icons {
3288
+ .e-listbox-container .e-icons,
3289
+ .e-listboxtool-wrapper .e-icons {
3216
3290
  color: #a19f9d;
3217
3291
  }
3218
3292
 
3219
3293
  .e-listbox-wrapper .e-list-item,
3220
- .e-listbox-container .e-list-item {
3294
+ .e-listbox-container .e-list-item,
3295
+ .e-listboxtool-wrapper .e-list-item {
3221
3296
  background-color: transparent;
3222
3297
  border-bottom: 0 solid transparent;
3223
3298
  border-left: 0 solid transparent;
@@ -3228,41 +3303,50 @@ ejs-listbox {
3228
3303
 
3229
3304
  .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),
3230
3305
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
3231
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3306
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3307
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3308
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3232
3309
  background-color: #252423;
3233
3310
  border-color: transparent;
3234
3311
  color: #f3f2f1;
3235
3312
  }
3236
3313
 
3237
3314
  .e-listbox-wrapper .e-list-item.e-selected,
3238
- .e-listbox-container .e-list-item.e-selected {
3315
+ .e-listbox-container .e-list-item.e-selected,
3316
+ .e-listboxtool-wrapper .e-list-item.e-selected {
3239
3317
  background-color: #292827;
3240
3318
  color: #f3f2f1;
3241
3319
  }
3242
3320
 
3243
3321
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
3244
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3322
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3323
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3245
3324
  background-color: transparent;
3246
3325
  color: #f3f2f1;
3247
3326
  }
3248
3327
 
3249
3328
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3250
3329
  .e-listbox-container .e-list-item.e-focused,
3251
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3330
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3331
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3332
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3252
3333
  background-color: #292827;
3253
3334
  color: #f3f2f1;
3254
3335
  }
3255
3336
 
3256
3337
  .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,
3257
3338
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3258
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3339
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3340
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3341
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3259
3342
  background-color: #0078d4;
3260
3343
  border-color: transparent;
3261
3344
  color: #1b1a19;
3262
3345
  }
3263
3346
 
3264
3347
  .e-listbox-wrapper .e-list-group-item,
3265
- .e-listbox-container .e-list-group-item {
3348
+ .e-listbox-container .e-list-group-item,
3349
+ .e-listboxtool-wrapper .e-list-group-item {
3266
3350
  background-color: transparent;
3267
3351
  border-color: #292827;
3268
3352
  color: #0078d4;
@@ -3270,32 +3354,38 @@ ejs-listbox {
3270
3354
  }
3271
3355
 
3272
3356
  .e-listbox-wrapper .e-selectall-parent,
3273
- .e-listbox-container .e-selectall-parent {
3357
+ .e-listbox-container .e-selectall-parent,
3358
+ .e-listboxtool-wrapper .e-selectall-parent {
3274
3359
  background-color: transparent;
3275
3360
  border-bottom: 1px solid #292827;
3276
3361
  color: #f3f2f1;
3277
3362
  }
3278
3363
 
3279
3364
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3280
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3365
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3366
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3281
3367
  background-color: transparent;
3282
3368
  }
3283
3369
 
3284
3370
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3285
- .e-listbox-container.e-list-template .e-list-wrapper {
3371
+ .e-listbox-container.e-list-template .e-list-wrapper,
3372
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3286
3373
  height: inherit;
3287
3374
  position: relative;
3288
3375
  }
3289
3376
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3290
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3377
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3378
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3291
3379
  padding: 8px 16px;
3292
3380
  }
3293
3381
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3294
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3382
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3383
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3295
3384
  padding: 4px;
3296
3385
  }
3297
3386
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3298
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3387
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3388
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3299
3389
  color: #f3f2f1;
3300
3390
  display: block;
3301
3391
  font-size: 14px;
@@ -3307,7 +3397,8 @@ ejs-listbox {
3307
3397
  white-space: nowrap;
3308
3398
  }
3309
3399
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3310
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3400
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3401
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3311
3402
  color: #c8c6c4;
3312
3403
  display: block;
3313
3404
  font-size: 14px;
@@ -3316,13 +3407,15 @@ ejs-listbox {
3316
3407
  word-wrap: break-word;
3317
3408
  }
3318
3409
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3319
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3410
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3411
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3320
3412
  overflow: hidden;
3321
3413
  text-overflow: ellipsis;
3322
3414
  white-space: nowrap;
3323
3415
  }
3324
3416
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3325
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3417
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3418
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3326
3419
  height: 40px;
3327
3420
  left: 0;
3328
3421
  position: absolute;
@@ -3330,17 +3423,20 @@ ejs-listbox {
3330
3423
  width: 40px;
3331
3424
  }
3332
3425
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3333
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3426
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3427
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3334
3428
  padding-left: 68px;
3335
3429
  padding-right: 16px;
3336
3430
  }
3337
3431
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3338
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3432
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3433
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3339
3434
  padding-left: 16px;
3340
3435
  padding-right: 68px;
3341
3436
  }
3342
3437
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3343
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3438
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3439
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3344
3440
  height: 40px;
3345
3441
  position: absolute;
3346
3442
  right: 0;
@@ -3348,15 +3444,18 @@ ejs-listbox {
3348
3444
  width: 40px;
3349
3445
  }
3350
3446
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3351
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3447
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3448
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3352
3449
  top: 0;
3353
3450
  }
3354
3451
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3355
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3452
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3453
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3356
3454
  top: 0;
3357
3455
  }
3358
3456
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3359
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3457
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3458
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3360
3459
  font-size: 10px;
3361
3460
  height: 18px;
3362
3461
  line-height: 16px;
@@ -3368,17 +3467,20 @@ ejs-listbox {
3368
3467
  width: 32px;
3369
3468
  }
3370
3469
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3371
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3470
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3471
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3372
3472
  padding-left: 68px;
3373
3473
  padding-right: 10px;
3374
3474
  }
3375
3475
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3376
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3476
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3477
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3377
3478
  padding-left: 16px;
3378
3479
  padding-right: 10px;
3379
3480
  }
3380
3481
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3381
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3482
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3483
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3382
3484
  display: block;
3383
3485
  margin: 0;
3384
3486
  overflow: hidden;
@@ -3387,53 +3489,64 @@ ejs-listbox {
3387
3489
  white-space: nowrap;
3388
3490
  }
3389
3491
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3390
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3492
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3493
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3391
3494
  color: #f3f2f1;
3392
3495
  }
3393
3496
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3394
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3497
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3498
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3395
3499
  color: #f3f2f1;
3396
3500
  }
3397
3501
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3398
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3502
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3503
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3399
3504
  color: #f3f2f1;
3400
3505
  }
3401
3506
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3402
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3507
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3508
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3403
3509
  color: #f3f2f1;
3404
3510
  }
3405
3511
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3406
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3512
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3513
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3407
3514
  left: inherit;
3408
3515
  right: 0;
3409
3516
  }
3410
3517
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3411
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3518
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3519
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3412
3520
  padding-left: 16px;
3413
3521
  padding-right: 68px;
3414
3522
  }
3415
3523
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3416
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3524
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3525
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3417
3526
  padding-left: 68px;
3418
3527
  padding-right: 16px;
3419
3528
  }
3420
3529
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3421
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3530
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3531
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3422
3532
  left: 0;
3423
3533
  right: inherit;
3424
3534
  }
3425
3535
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3426
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3536
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3537
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3427
3538
  left: 12px;
3428
3539
  right: inherit;
3429
3540
  }
3430
3541
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3431
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3542
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3543
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3432
3544
  padding-left: 10px;
3433
3545
  padding-right: 68px;
3434
3546
  }
3435
3547
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3436
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3548
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3549
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3437
3550
  padding-left: 10px;
3438
3551
  padding-right: 16px;
3439
3552
  }