@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
@@ -385,6 +385,10 @@
385
385
  color: #212529;
386
386
  }
387
387
 
388
+ .e-selectall-parent.e-item-focus {
389
+ background-color: #f2f4f6;
390
+ }
391
+
388
392
  /* stylelint-disable property-no-vendor-prefix */
389
393
  /* stylelint-disable property-no-vendor-prefix */
390
394
  @keyframes material-spinner-rotate {
@@ -1628,8 +1632,8 @@ ejs-dropdownlist {
1628
1632
  margin-top: -2.9em;
1629
1633
  position: absolute;
1630
1634
  right: 0;
1631
- top: 100%;
1632
1635
  width: auto;
1636
+ top: 100%;
1633
1637
  }
1634
1638
 
1635
1639
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2615,7 +2619,8 @@ ejs-multiselect {
2615
2619
 
2616
2620
  /* stylelint-disable property-no-vendor-prefix */
2617
2621
  .e-listbox-wrapper,
2618
- .e-listbox-container {
2622
+ .e-listbox-container,
2623
+ .e-listboxtool-wrapper {
2619
2624
  -webkit-overflow-scrolling: touch;
2620
2625
  box-sizing: border-box;
2621
2626
  cursor: pointer;
@@ -2627,24 +2632,29 @@ ejs-multiselect {
2627
2632
  width: 100%;
2628
2633
  }
2629
2634
  .e-listbox-wrapper *,
2630
- .e-listbox-container * {
2635
+ .e-listbox-container *,
2636
+ .e-listboxtool-wrapper * {
2631
2637
  box-sizing: border-box;
2632
2638
  }
2633
2639
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2634
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
2640
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
2641
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
2635
2642
  width: 86% !important; /* stylelint-disable-line declaration-no-important */
2636
2643
  }
2637
2644
  .e-listbox-wrapper:focus,
2638
- .e-listbox-container:focus {
2645
+ .e-listbox-container:focus,
2646
+ .e-listboxtool-wrapper:focus {
2639
2647
  outline: none;
2640
2648
  }
2641
2649
  .e-listbox-wrapper.e-disabled,
2642
- .e-listbox-container.e-disabled {
2650
+ .e-listbox-container.e-disabled,
2651
+ .e-listboxtool-wrapper.e-disabled {
2643
2652
  cursor: default;
2644
2653
  pointer-events: none;
2645
2654
  }
2646
2655
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2647
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2656
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2657
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2648
2658
  text-align: center;
2649
2659
  }
2650
2660
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2652,53 +2662,66 @@ ejs-multiselect {
2652
2662
  .e-listbox-wrapper .e-selectall-parent,
2653
2663
  .e-listbox-container:not(.e-list-template) .e-list-item,
2654
2664
  .e-listbox-container .e-list-nrt,
2655
- .e-listbox-container .e-selectall-parent {
2665
+ .e-listbox-container .e-selectall-parent,
2666
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2667
+ .e-listboxtool-wrapper .e-list-nrt,
2668
+ .e-listboxtool-wrapper .e-selectall-parent {
2656
2669
  height: 40px;
2657
2670
  line-height: 1.5;
2658
2671
  padding: 10px 16px 10px 16px;
2659
2672
  position: relative;
2660
2673
  }
2661
2674
  .e-listbox-wrapper.e-filter-list,
2662
- .e-listbox-container.e-filter-list {
2675
+ .e-listbox-container.e-filter-list,
2676
+ .e-listboxtool-wrapper.e-filter-list {
2663
2677
  overflow: inherit;
2664
2678
  }
2665
2679
  .e-listbox-wrapper .e-list-parent,
2666
- .e-listbox-container .e-list-parent {
2680
+ .e-listbox-container .e-list-parent,
2681
+ .e-listboxtool-wrapper .e-list-parent {
2667
2682
  height: 100%;
2668
2683
  min-height: 40px;
2669
2684
  }
2670
2685
  .e-listbox-wrapper .e-list-item,
2671
- .e-listbox-container .e-list-item {
2686
+ .e-listbox-container .e-list-item,
2687
+ .e-listboxtool-wrapper .e-list-item {
2672
2688
  border-bottom: 1px solid;
2673
2689
  outline: none;
2674
2690
  }
2675
2691
  .e-listbox-wrapper .e-list-item.e-disabled,
2676
- .e-listbox-container .e-list-item.e-disabled {
2692
+ .e-listbox-container .e-list-item.e-disabled,
2693
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2677
2694
  pointer-events: none;
2678
2695
  }
2679
2696
  .e-listbox-wrapper .e-disable,
2680
- .e-listbox-container .e-disable {
2697
+ .e-listbox-container .e-disable,
2698
+ .e-listboxtool-wrapper .e-disable {
2681
2699
  opacity: 0.7;
2682
2700
  }
2683
2701
  .e-listbox-wrapper .e-list-parent,
2684
- .e-listbox-container .e-list-parent {
2702
+ .e-listbox-container .e-list-parent,
2703
+ .e-listboxtool-wrapper .e-list-parent {
2685
2704
  margin: 0;
2686
2705
  padding: 0;
2687
2706
  }
2688
2707
  .e-listbox-wrapper .e-list-header .e-text.header,
2689
- .e-listbox-container .e-list-header .e-text.header {
2708
+ .e-listbox-container .e-list-header .e-text.header,
2709
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2690
2710
  display: none;
2691
2711
  }
2692
2712
  .e-listbox-wrapper .e-icon-back,
2693
- .e-listbox-container .e-icon-back {
2713
+ .e-listbox-container .e-icon-back,
2714
+ .e-listboxtool-wrapper .e-icon-back {
2694
2715
  margin-top: 0;
2695
2716
  }
2696
2717
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2697
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2718
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2719
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2698
2720
  display: none;
2699
2721
  }
2700
2722
  .e-listbox-wrapper .e-list-header,
2701
- .e-listbox-container .e-list-header {
2723
+ .e-listbox-container .e-list-header,
2724
+ .e-listboxtool-wrapper .e-list-header {
2702
2725
  -ms-flex-align: center;
2703
2726
  align-items: center;
2704
2727
  border-bottom: 1px solid;
@@ -2709,21 +2732,25 @@ ejs-multiselect {
2709
2732
  padding: 0 16px;
2710
2733
  }
2711
2734
  .e-listbox-wrapper .e-has-header > .e-view,
2712
- .e-listbox-container .e-has-header > .e-view {
2735
+ .e-listbox-container .e-has-header > .e-view,
2736
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2713
2737
  top: 45px;
2714
2738
  }
2715
2739
  .e-listbox-wrapper .e-but-back,
2716
- .e-listbox-container .e-but-back {
2740
+ .e-listbox-container .e-but-back,
2741
+ .e-listboxtool-wrapper .e-but-back {
2717
2742
  cursor: pointer;
2718
2743
  padding-right: 10px;
2719
2744
  }
2720
2745
  .e-listbox-wrapper .e-list-group-item:first-child,
2721
- .e-listbox-container .e-list-group-item:first-child {
2746
+ .e-listbox-container .e-list-group-item:first-child,
2747
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2722
2748
  border: 0;
2723
2749
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
2724
2750
  }
2725
2751
  .e-listbox-wrapper .e-list-group-item,
2726
- .e-listbox-container .e-list-group-item {
2752
+ .e-listbox-container .e-list-group-item,
2753
+ .e-listboxtool-wrapper .e-list-group-item {
2727
2754
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
2728
2755
  border-top: 0 solid;
2729
2756
  font-weight: 600;
@@ -2732,7 +2759,8 @@ ejs-multiselect {
2732
2759
  padding: 10px 16px 10px 16px;
2733
2760
  }
2734
2761
  .e-listbox-wrapper .e-icon-collapsible,
2735
- .e-listbox-container .e-icon-collapsible {
2762
+ .e-listbox-container .e-icon-collapsible,
2763
+ .e-listboxtool-wrapper .e-icon-collapsible {
2736
2764
  cursor: pointer;
2737
2765
  font-size: 12px;
2738
2766
  position: absolute;
@@ -2741,42 +2769,51 @@ ejs-multiselect {
2741
2769
  transform: translateY(-50%);
2742
2770
  }
2743
2771
  .e-listbox-wrapper .e-text-content,
2744
- .e-listbox-container .e-text-content {
2772
+ .e-listbox-container .e-text-content,
2773
+ .e-listboxtool-wrapper .e-text-content {
2745
2774
  height: 100%;
2746
2775
  position: relative;
2747
2776
  vertical-align: middle;
2748
2777
  }
2749
2778
  .e-listbox-wrapper .e-text-content *,
2750
- .e-listbox-container .e-text-content * {
2779
+ .e-listbox-container .e-text-content *,
2780
+ .e-listboxtool-wrapper .e-text-content * {
2751
2781
  display: inline-block;
2752
2782
  vertical-align: middle;
2753
2783
  }
2754
2784
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2755
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2785
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2786
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2756
2787
  width: calc(100% - 40px);
2757
2788
  }
2758
2789
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2759
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2790
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2791
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2760
2792
  width: calc(100% - 90px);
2761
2793
  }
2762
2794
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2763
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2795
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2796
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2764
2797
  width: calc(100% - 80px);
2765
2798
  }
2766
2799
  .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,
2767
- .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 {
2800
+ .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,
2801
+ .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 {
2768
2802
  width: calc(100% - 92px);
2769
2803
  }
2770
2804
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2771
- .e-listbox-container .e-checkbox .e-checkbox-left {
2805
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2806
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2772
2807
  margin: 0 10px 0 0;
2773
2808
  }
2774
2809
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2775
- .e-listbox-container .e-checkbox .e-checkbox-right {
2810
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2811
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2776
2812
  margin: 0 0 0 10px;
2777
2813
  }
2778
2814
  .e-listbox-wrapper .e-list-text,
2779
- .e-listbox-container .e-list-text {
2815
+ .e-listbox-container .e-list-text,
2816
+ .e-listboxtool-wrapper .e-list-text {
2780
2817
  cursor: pointer;
2781
2818
  display: inline-block;
2782
2819
  overflow: hidden;
@@ -2786,107 +2823,129 @@ ejs-multiselect {
2786
2823
  width: 100%;
2787
2824
  }
2788
2825
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2789
- .e-listbox-container .e-list-icon + .e-list-text {
2826
+ .e-listbox-container .e-list-icon + .e-list-text,
2827
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2790
2828
  width: calc(100% - 60px);
2791
2829
  }
2792
2830
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2793
- .e-listbox-container .e-icon-wrapper .e-list-text {
2831
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2832
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2794
2833
  width: calc(100% - 60px);
2795
2834
  }
2796
2835
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2797
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2836
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2837
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2798
2838
  width: calc(100% - 60px);
2799
2839
  }
2800
2840
  .e-listbox-wrapper .e-list-icon,
2801
- .e-listbox-container .e-list-icon {
2841
+ .e-listbox-container .e-list-icon,
2842
+ .e-listboxtool-wrapper .e-list-icon {
2802
2843
  height: 30px;
2803
2844
  margin-right: 10px;
2804
2845
  width: 30px;
2805
2846
  }
2806
2847
  .e-listbox-wrapper .e-content,
2807
- .e-listbox-container .e-content {
2848
+ .e-listbox-container .e-content,
2849
+ .e-listboxtool-wrapper .e-content {
2808
2850
  overflow: hidden;
2809
2851
  position: relative;
2810
2852
  }
2811
2853
  .e-listbox-wrapper .e-list-header .e-text,
2812
- .e-listbox-container .e-list-header .e-text {
2854
+ .e-listbox-container .e-list-header .e-text,
2855
+ .e-listboxtool-wrapper .e-list-header .e-text {
2813
2856
  cursor: pointer;
2814
2857
  text-indent: 0;
2815
2858
  }
2816
2859
  .e-listbox-wrapper .e-text .e-headertext,
2817
- .e-listbox-container .e-text .e-headertext {
2860
+ .e-listbox-container .e-text .e-headertext,
2861
+ .e-listboxtool-wrapper .e-text .e-headertext {
2818
2862
  display: inline-block;
2819
2863
  line-height: 1.2;
2820
2864
  }
2821
2865
  .e-listbox-wrapper.e-rtl,
2822
- .e-listbox-container.e-rtl {
2866
+ .e-listbox-container.e-rtl,
2867
+ .e-listboxtool-wrapper.e-rtl {
2823
2868
  direction: rtl;
2824
2869
  }
2825
2870
  .e-listbox-wrapper.e-rtl .e-list-icon,
2826
- .e-listbox-container.e-rtl .e-list-icon {
2871
+ .e-listbox-container.e-rtl .e-list-icon,
2872
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2827
2873
  margin-left: 16px;
2828
2874
  margin-right: 0;
2829
2875
  }
2830
2876
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2831
- .e-listbox-container.e-rtl .e-icon-collapsible {
2877
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2878
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2832
2879
  left: 0%;
2833
2880
  right: initial;
2834
2881
  top: 50%;
2835
2882
  transform: translateY(-50%) rotate(180deg);
2836
2883
  }
2837
2884
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2838
- .e-listbox-container.e-rtl .e-list-header .e-text {
2885
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2886
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2839
2887
  cursor: pointer;
2840
2888
  }
2841
2889
  .e-listbox-wrapper.e-rtl .e-but-back,
2842
- .e-listbox-container.e-rtl .e-but-back {
2890
+ .e-listbox-container.e-rtl .e-but-back,
2891
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2843
2892
  transform: rotate(180deg);
2844
2893
  }
2845
2894
  .e-listbox-wrapper.e-rtl .e-icon-back,
2846
- .e-listbox-container.e-rtl .e-icon-back {
2895
+ .e-listbox-container.e-rtl .e-icon-back,
2896
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2847
2897
  margin-top: 0;
2848
2898
  }
2849
2899
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2850
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2900
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2901
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2851
2902
  margin: 0 0 0 10px;
2852
2903
  }
2853
2904
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2854
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2905
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2906
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2855
2907
  margin: 0 10px 0 0;
2856
2908
  }
2857
2909
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2858
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2910
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2911
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2859
2912
  margin: 0 0 0 10px;
2860
2913
  }
2861
2914
  .e-listbox-wrapper .e-checkbox-wrapper,
2862
- .e-listbox-container .e-checkbox-wrapper {
2915
+ .e-listbox-container .e-checkbox-wrapper,
2916
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2863
2917
  margin: 0 10px 0 0;
2864
2918
  text-indent: 0;
2865
2919
  vertical-align: middle;
2866
2920
  }
2867
2921
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2868
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2922
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2923
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2869
2924
  position: absolute;
2870
2925
  right: 0;
2871
2926
  top: 30%;
2872
2927
  }
2873
2928
  .e-listbox-wrapper .e-input-group,
2874
- .e-listbox-container .e-input-group {
2929
+ .e-listbox-container .e-input-group,
2930
+ .e-listboxtool-wrapper .e-input-group {
2875
2931
  padding: 4px 8px;
2876
2932
  }
2877
2933
  .e-listbox-wrapper .e-input-focus,
2878
- .e-listbox-container .e-input-focus {
2934
+ .e-listbox-container .e-input-focus,
2935
+ .e-listboxtool-wrapper .e-input-focus {
2879
2936
  padding: 4px 4px 4px 8px;
2880
2937
  }
2881
2938
  .e-listbox-wrapper .e-hidden-select,
2882
- .e-listbox-container .e-hidden-select {
2939
+ .e-listbox-container .e-hidden-select,
2940
+ .e-listboxtool-wrapper .e-hidden-select {
2883
2941
  height: 1px;
2884
2942
  opacity: 0;
2885
2943
  position: absolute;
2886
2944
  width: 100%;
2887
2945
  }
2888
2946
  .e-listbox-wrapper .e-placeholder,
2889
- .e-listbox-container .e-placeholder {
2947
+ .e-listbox-container .e-placeholder,
2948
+ .e-listboxtool-wrapper .e-placeholder {
2890
2949
  background-color: #007bff;
2891
2950
  display: block;
2892
2951
  height: 1px;
@@ -2908,24 +2967,29 @@ ejs-listbox {
2908
2967
  }
2909
2968
 
2910
2969
  .e-listbox-wrapper.e-sortableclone,
2911
- .e-listbox-container.e-sortableclone {
2970
+ .e-listbox-container.e-sortableclone,
2971
+ .e-listboxtool-wrapper.e-sortableclone {
2912
2972
  border-width: 0;
2913
2973
  overflow: visible;
2914
2974
  }
2915
2975
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2916
- .e-listbox-container.e-sortableclone .e-list-item {
2976
+ .e-listbox-container.e-sortableclone .e-list-item,
2977
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2917
2978
  list-style-type: none;
2918
2979
  }
2919
2980
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2920
- .e-listbox-container.e-sortableclone .e-ripple {
2981
+ .e-listbox-container.e-sortableclone .e-ripple,
2982
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2921
2983
  overflow: visible;
2922
2984
  }
2923
2985
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2924
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
2986
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
2987
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2925
2988
  display: none;
2926
2989
  }
2927
2990
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2928
- .e-listbox-container.e-sortableclone .e-list-badge {
2991
+ .e-listbox-container.e-sortableclone .e-list-badge,
2992
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2929
2993
  -ms-flex-align: center;
2930
2994
  align-items: center;
2931
2995
  background-color: #007bff;
@@ -2944,6 +3008,10 @@ ejs-listbox {
2944
3008
  width: 22px;
2945
3009
  }
2946
3010
 
3011
+ .e-listboxtool-wrapper.e-sortableclone {
3012
+ display: block;
3013
+ }
3014
+
2947
3015
  .e-listboxtool-wrapper,
2948
3016
  .e-listboxtool-container {
2949
3017
  cursor: pointer;
@@ -3169,12 +3237,14 @@ ejs-listbox {
3169
3237
  }
3170
3238
 
3171
3239
  .e-listbox-wrapper,
3172
- .e-listbox-container {
3240
+ .e-listbox-container,
3241
+ .e-listboxtool-wrapper {
3173
3242
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
3174
3243
  font-size: 14px;
3175
3244
  }
3176
3245
  .e-listbox-wrapper .e-list-header,
3177
- .e-listbox-container .e-list-header {
3246
+ .e-listbox-container .e-list-header,
3247
+ .e-listboxtool-wrapper .e-list-header {
3178
3248
  background-color: #fff;
3179
3249
  border-color: rgba(0, 0, 0, 0.13);
3180
3250
  color: #212529;
@@ -3182,27 +3252,32 @@ ejs-listbox {
3182
3252
  }
3183
3253
 
3184
3254
  .e-listbox-wrapper.e-filter-list .e-list-parent,
3185
- .e-listbox-container.e-filter-list .e-list-parent {
3255
+ .e-listbox-container.e-filter-list .e-list-parent,
3256
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
3186
3257
  height: calc(100% - 39px);
3187
3258
  }
3188
3259
 
3189
3260
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3190
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3261
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3262
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
3191
3263
  height: calc(100% - 79px);
3192
3264
  }
3193
3265
 
3194
3266
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3195
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3267
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3268
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
3196
3269
  height: calc(100% - 40px);
3197
3270
  }
3198
3271
 
3199
3272
  .e-listbox-wrapper .e-icons,
3200
- .e-listbox-container .e-icons {
3273
+ .e-listbox-container .e-icons,
3274
+ .e-listboxtool-wrapper .e-icons {
3201
3275
  color: #212529;
3202
3276
  }
3203
3277
 
3204
3278
  .e-listbox-wrapper .e-list-item,
3205
- .e-listbox-container .e-list-item {
3279
+ .e-listbox-container .e-list-item,
3280
+ .e-listboxtool-wrapper .e-list-item {
3206
3281
  background-color: #fff;
3207
3282
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
3208
3283
  border-left: 0 solid rgba(0, 0, 0, 0.13);
@@ -3213,41 +3288,50 @@ ejs-listbox {
3213
3288
 
3214
3289
  .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),
3215
3290
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
3216
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3291
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3292
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3293
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3217
3294
  background-color: #e9ecef;
3218
3295
  border-color: transparent;
3219
3296
  color: #212529;
3220
3297
  }
3221
3298
 
3222
3299
  .e-listbox-wrapper .e-list-item.e-selected,
3223
- .e-listbox-container .e-list-item.e-selected {
3300
+ .e-listbox-container .e-list-item.e-selected,
3301
+ .e-listboxtool-wrapper .e-list-item.e-selected {
3224
3302
  background-color: #007bff;
3225
3303
  color: #fff;
3226
3304
  }
3227
3305
 
3228
3306
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
3229
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3307
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3308
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3230
3309
  background-color: #fff;
3231
3310
  color: #212529;
3232
3311
  }
3233
3312
 
3234
3313
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3235
3314
  .e-listbox-container .e-list-item.e-focused,
3236
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3315
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3316
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3317
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3237
3318
  background-color: #007bff;
3238
3319
  color: #fff;
3239
3320
  }
3240
3321
 
3241
3322
  .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,
3242
3323
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3243
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3324
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3325
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3326
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3244
3327
  background-color: #fff;
3245
3328
  border-color: #fff;
3246
3329
  color: #000;
3247
3330
  }
3248
3331
 
3249
3332
  .e-listbox-wrapper .e-list-group-item,
3250
- .e-listbox-container .e-list-group-item {
3333
+ .e-listbox-container .e-list-group-item,
3334
+ .e-listboxtool-wrapper .e-list-group-item {
3251
3335
  background-color: #fff;
3252
3336
  border-color: rgba(0, 0, 0, 0.13);
3253
3337
  color: #6c757d;
@@ -3255,32 +3339,38 @@ ejs-listbox {
3255
3339
  }
3256
3340
 
3257
3341
  .e-listbox-wrapper .e-selectall-parent,
3258
- .e-listbox-container .e-selectall-parent {
3342
+ .e-listbox-container .e-selectall-parent,
3343
+ .e-listboxtool-wrapper .e-selectall-parent {
3259
3344
  background-color: #fff;
3260
3345
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
3261
3346
  color: #212529;
3262
3347
  }
3263
3348
 
3264
3349
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3265
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3350
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3351
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3266
3352
  background-color: transparent;
3267
3353
  }
3268
3354
 
3269
3355
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3270
- .e-listbox-container.e-list-template .e-list-wrapper {
3356
+ .e-listbox-container.e-list-template .e-list-wrapper,
3357
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3271
3358
  height: inherit;
3272
3359
  position: relative;
3273
3360
  }
3274
3361
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3275
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3362
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3363
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3276
3364
  padding: 0.7142em 1.0714em;
3277
3365
  }
3278
3366
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3279
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3367
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3368
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3280
3369
  padding: 0.7142em 1.0714em;
3281
3370
  }
3282
3371
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3283
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3372
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3373
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3284
3374
  color: #212529;
3285
3375
  display: block;
3286
3376
  font-size: 18px;
@@ -3292,7 +3382,8 @@ ejs-listbox {
3292
3382
  white-space: nowrap;
3293
3383
  }
3294
3384
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3295
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3385
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3386
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3296
3387
  color: #212529;
3297
3388
  display: block;
3298
3389
  font-size: 14px;
@@ -3301,13 +3392,15 @@ ejs-listbox {
3301
3392
  word-wrap: break-word;
3302
3393
  }
3303
3394
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3304
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3395
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3396
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3305
3397
  overflow: hidden;
3306
3398
  text-overflow: ellipsis;
3307
3399
  white-space: nowrap;
3308
3400
  }
3309
3401
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3310
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3402
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3403
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3311
3404
  height: 2.8571em;
3312
3405
  left: 1.0667em;
3313
3406
  position: absolute;
@@ -3315,17 +3408,20 @@ ejs-listbox {
3315
3408
  width: 2.8571em;
3316
3409
  }
3317
3410
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3318
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3411
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3412
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3319
3413
  padding-left: 4.6428em;
3320
3414
  padding-right: 1.0714em;
3321
3415
  }
3322
3416
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3323
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3417
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3418
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3324
3419
  padding-left: 1.0714em;
3325
3420
  padding-right: 4.6428em;
3326
3421
  }
3327
3422
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3328
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3423
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3424
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3329
3425
  height: 2.8571em;
3330
3426
  position: absolute;
3331
3427
  right: 1.0667em;
@@ -3333,15 +3429,18 @@ ejs-listbox {
3333
3429
  width: 2.8571em;
3334
3430
  }
3335
3431
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3336
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3432
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3433
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3337
3434
  top: 0.7142em;
3338
3435
  }
3339
3436
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3340
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3437
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3438
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3341
3439
  top: 0.7142em;
3342
3440
  }
3343
3441
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3344
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3442
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3443
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3345
3444
  font-size: 15px;
3346
3445
  height: 1.333em;
3347
3446
  line-height: 1.433em;
@@ -3353,17 +3452,20 @@ ejs-listbox {
3353
3452
  width: 2em;
3354
3453
  }
3355
3454
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3356
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3455
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3456
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3357
3457
  padding-left: 4.6428em;
3358
3458
  padding-right: 3.9285em;
3359
3459
  }
3360
3460
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3361
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3461
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3462
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3362
3463
  padding-left: 1.0714em;
3363
3464
  padding-right: 3.9285em;
3364
3465
  }
3365
3466
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3366
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3467
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3468
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3367
3469
  display: block;
3368
3470
  margin: 0;
3369
3471
  overflow: hidden;
@@ -3372,53 +3474,64 @@ ejs-listbox {
3372
3474
  white-space: nowrap;
3373
3475
  }
3374
3476
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3375
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3477
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3478
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3376
3479
  color: #212529;
3377
3480
  }
3378
3481
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3379
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3482
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3483
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3380
3484
  color: #212529;
3381
3485
  }
3382
3486
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3383
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3487
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3488
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3384
3489
  color: #fff;
3385
3490
  }
3386
3491
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3387
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3492
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3493
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3388
3494
  color: #fff;
3389
3495
  }
3390
3496
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3391
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3497
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3498
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3392
3499
  left: inherit;
3393
3500
  right: 1.0667em;
3394
3501
  }
3395
3502
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3396
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3503
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3504
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3397
3505
  padding-left: 1.0714em;
3398
3506
  padding-right: 4.6428em;
3399
3507
  }
3400
3508
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3401
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3509
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3510
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3402
3511
  padding-left: 4.6428em;
3403
3512
  padding-right: 1.0714em;
3404
3513
  }
3405
3514
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3406
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3515
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3516
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3407
3517
  left: 1.0667em;
3408
3518
  right: inherit;
3409
3519
  }
3410
3520
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3411
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3521
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3522
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3412
3523
  left: 1em;
3413
3524
  right: inherit;
3414
3525
  }
3415
3526
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3416
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3527
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3528
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3417
3529
  padding-left: 3.9285em;
3418
3530
  padding-right: 4.6428em;
3419
3531
  }
3420
3532
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3421
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3533
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3534
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3422
3535
  padding-left: 3.9285em;
3423
3536
  padding-right: 1.0714em;
3424
3537
  }