@syncfusion/ej2-dropdowns 21.2.8 → 22.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +35 -6
  3. package/README.md +201 -103
  4. package/dist/ej2-dropdowns.min.js +2 -2
  5. package/dist/ej2-dropdowns.umd.min.js +2 -2
  6. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es2015.js +158 -41
  8. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  9. package/dist/es6/ej2-dropdowns.es5.js +158 -41
  10. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  11. package/dist/global/ej2-dropdowns.min.js +2 -2
  12. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  13. package/dist/global/index.d.ts +1 -1
  14. package/package.json +11 -11
  15. package/src/auto-complete/auto-complete-model.d.ts +2 -1
  16. package/src/auto-complete/auto-complete.d.ts +2 -1
  17. package/src/auto-complete/auto-complete.js +1 -1
  18. package/src/combo-box/combo-box-model.d.ts +6 -3
  19. package/src/combo-box/combo-box.d.ts +6 -3
  20. package/src/drop-down-base/drop-down-base-model.d.ts +8 -4
  21. package/src/drop-down-base/drop-down-base.d.ts +8 -4
  22. package/src/drop-down-base/drop-down-base.js +21 -7
  23. package/src/drop-down-list/drop-down-list-model.d.ts +6 -3
  24. package/src/drop-down-list/drop-down-list.d.ts +6 -3
  25. package/src/drop-down-list/drop-down-list.js +23 -14
  26. package/src/drop-down-tree/drop-down-tree-model.d.ts +21 -6
  27. package/src/drop-down-tree/drop-down-tree.d.ts +55 -62
  28. package/src/drop-down-tree/drop-down-tree.js +1 -1
  29. package/src/list-box/list-box.d.ts +15 -0
  30. package/src/list-box/list-box.js +53 -3
  31. package/src/mention/mention-model.d.ts +4 -2
  32. package/src/mention/mention.d.ts +4 -2
  33. package/src/multi-select/multi-select-model.d.ts +15 -8
  34. package/src/multi-select/multi-select.d.ts +15 -7
  35. package/src/multi-select/multi-select.js +59 -15
  36. package/styles/auto-complete/_material3-dark-definition.scss +1 -0
  37. package/styles/auto-complete/_material3-definition.scss +2 -0
  38. package/styles/auto-complete/material3-dark.css +198 -0
  39. package/styles/auto-complete/material3-dark.scss +5 -0
  40. package/styles/auto-complete/material3.css +254 -0
  41. package/styles/auto-complete/material3.scss +5 -0
  42. package/styles/bootstrap-dark.css +212 -100
  43. package/styles/bootstrap.css +214 -101
  44. package/styles/bootstrap4.css +214 -101
  45. package/styles/bootstrap5-dark.css +212 -100
  46. package/styles/bootstrap5.css +212 -100
  47. package/styles/combo-box/_material3-dark-definition.scss +1 -0
  48. package/styles/combo-box/_material3-definition.scss +2 -0
  49. package/styles/combo-box/material3-dark.css +198 -0
  50. package/styles/combo-box/material3-dark.scss +5 -0
  51. package/styles/combo-box/material3.css +254 -0
  52. package/styles/combo-box/material3.scss +5 -0
  53. package/styles/drop-down-base/_layout.scss +3 -1
  54. package/styles/drop-down-base/_material3-dark-definition.scss +1 -0
  55. package/styles/drop-down-base/_material3-definition.scss +87 -0
  56. package/styles/drop-down-base/_theme.scss +10 -0
  57. package/styles/drop-down-base/bootstrap-dark.css +4 -0
  58. package/styles/drop-down-base/bootstrap.css +4 -0
  59. package/styles/drop-down-base/bootstrap4.css +4 -0
  60. package/styles/drop-down-base/bootstrap5-dark.css +4 -0
  61. package/styles/drop-down-base/bootstrap5.css +4 -0
  62. package/styles/drop-down-base/fabric-dark.css +4 -0
  63. package/styles/drop-down-base/fabric.css +4 -0
  64. package/styles/drop-down-base/fluent-dark.css +4 -0
  65. package/styles/drop-down-base/fluent.css +4 -0
  66. package/styles/drop-down-base/highcontrast-light.css +4 -0
  67. package/styles/drop-down-base/highcontrast.css +4 -0
  68. package/styles/drop-down-base/material-dark.css +4 -0
  69. package/styles/drop-down-base/material.css +4 -0
  70. package/styles/drop-down-base/material3-dark.css +439 -0
  71. package/styles/drop-down-base/material3-dark.scss +4 -0
  72. package/styles/drop-down-base/material3.css +495 -0
  73. package/styles/drop-down-base/material3.scss +4 -0
  74. package/styles/drop-down-base/tailwind-dark.css +4 -0
  75. package/styles/drop-down-base/tailwind.css +4 -0
  76. package/styles/drop-down-list/_layout.scss +15 -1
  77. package/styles/drop-down-list/_material3-dark-definition.scss +1 -0
  78. package/styles/drop-down-list/_material3-definition.scss +180 -0
  79. package/styles/drop-down-list/icons/_material3-dark.scss +1 -0
  80. package/styles/drop-down-list/material3-dark.css +503 -0
  81. package/styles/drop-down-list/material3-dark.scss +9 -0
  82. package/styles/drop-down-list/material3.css +559 -0
  83. package/styles/drop-down-list/material3.scss +9 -0
  84. package/styles/drop-down-tree/_layout.scss +13 -7
  85. package/styles/drop-down-tree/_material3-dark-definition.scss +1 -0
  86. package/styles/drop-down-tree/_material3-definition.scss +76 -0
  87. package/styles/drop-down-tree/_theme.scss +14 -2
  88. package/styles/drop-down-tree/icons/_material3-dark.scss +1 -0
  89. package/styles/drop-down-tree/icons/_material3.scss +1 -1
  90. package/styles/drop-down-tree/material3-dark.css +466 -0
  91. package/styles/drop-down-tree/material3-dark.scss +10 -0
  92. package/styles/drop-down-tree/material3.css +522 -0
  93. package/styles/drop-down-tree/material3.scss +10 -0
  94. package/styles/fabric-dark.css +212 -100
  95. package/styles/fabric.css +214 -101
  96. package/styles/fluent-dark.css +214 -101
  97. package/styles/fluent.css +214 -101
  98. package/styles/highcontrast-light.css +212 -100
  99. package/styles/highcontrast.css +214 -101
  100. package/styles/list-box/_layout.scss +17 -3
  101. package/styles/list-box/_material3-dark-definition.scss +1 -0
  102. package/styles/list-box/_material3-definition.scss +117 -0
  103. package/styles/list-box/_theme.scss +2 -1
  104. package/styles/list-box/bootstrap-dark.css +207 -99
  105. package/styles/list-box/bootstrap.css +209 -100
  106. package/styles/list-box/bootstrap4.css +209 -100
  107. package/styles/list-box/bootstrap5-dark.css +207 -99
  108. package/styles/list-box/bootstrap5.css +207 -99
  109. package/styles/list-box/fabric-dark.css +207 -99
  110. package/styles/list-box/fabric.css +209 -100
  111. package/styles/list-box/fluent-dark.css +209 -100
  112. package/styles/list-box/fluent.css +209 -100
  113. package/styles/list-box/highcontrast-light.css +207 -99
  114. package/styles/list-box/highcontrast.css +209 -100
  115. package/styles/list-box/icons/_material3-dark.scss +1 -0
  116. package/styles/list-box/material-dark.css +207 -99
  117. package/styles/list-box/material.css +209 -100
  118. package/styles/list-box/material3-dark.css +956 -0
  119. package/styles/list-box/material3-dark.scss +6 -0
  120. package/styles/list-box/material3.css +1012 -0
  121. package/styles/list-box/material3.scss +6 -0
  122. package/styles/list-box/tailwind-dark.css +209 -100
  123. package/styles/list-box/tailwind.css +209 -100
  124. package/styles/material-dark.css +212 -100
  125. package/styles/material.css +214 -101
  126. package/styles/material3-dark.css +4664 -0
  127. package/styles/material3-dark.scss +10 -0
  128. package/styles/material3.css +4720 -0
  129. package/styles/material3.scss +10 -0
  130. package/styles/mention/_material3-dark-definition.scss +1 -0
  131. package/styles/mention/_material3-definition.scss +1 -0
  132. package/styles/mention/material3-dark.css +87 -0
  133. package/styles/mention/material3-dark.scss +7 -0
  134. package/styles/mention/material3.css +143 -0
  135. package/styles/mention/material3.scss +7 -0
  136. package/styles/multi-select/_layout.scss +160 -7
  137. package/styles/multi-select/_material3-dark-definition.scss +1 -0
  138. package/styles/multi-select/_material3-definition.scss +246 -0
  139. package/styles/multi-select/_theme.scss +6 -0
  140. package/styles/multi-select/bootstrap-dark.css +1 -1
  141. package/styles/multi-select/bootstrap.css +1 -1
  142. package/styles/multi-select/bootstrap4.css +1 -1
  143. package/styles/multi-select/bootstrap5-dark.css +1 -1
  144. package/styles/multi-select/bootstrap5.css +1 -1
  145. package/styles/multi-select/fabric-dark.css +1 -1
  146. package/styles/multi-select/fabric.css +1 -1
  147. package/styles/multi-select/fluent-dark.css +1 -1
  148. package/styles/multi-select/fluent.css +1 -1
  149. package/styles/multi-select/highcontrast-light.css +1 -1
  150. package/styles/multi-select/highcontrast.css +1 -1
  151. package/styles/multi-select/icons/_material3-dark.scss +1 -0
  152. package/styles/multi-select/icons/_material3.scss +3 -4
  153. package/styles/multi-select/material-dark.css +1 -1
  154. package/styles/multi-select/material.css +1 -1
  155. package/styles/multi-select/material3-dark.css +2547 -0
  156. package/styles/multi-select/material3-dark.scss +10 -0
  157. package/styles/multi-select/material3.css +2603 -0
  158. package/styles/multi-select/material3.scss +10 -0
  159. package/styles/multi-select/tailwind-dark.css +1 -1
  160. package/styles/multi-select/tailwind.css +1 -1
  161. package/styles/tailwind-dark.css +214 -101
  162. package/styles/tailwind.css +214 -101
@@ -389,6 +389,10 @@
389
389
  color: #fff;
390
390
  }
391
391
 
392
+ .e-selectall-parent.e-item-focus {
393
+ background-color: #685708;
394
+ }
395
+
392
396
  /* stylelint-disable property-no-vendor-prefix */
393
397
  /* stylelint-disable property-no-vendor-prefix */
394
398
  @keyframes material-spinner-rotate {
@@ -1570,8 +1574,8 @@ ejs-dropdownlist {
1570
1574
  margin-top: -3em;
1571
1575
  position: absolute;
1572
1576
  right: 0;
1573
- top: 100%;
1574
1577
  width: auto;
1578
+ top: 100%;
1575
1579
  }
1576
1580
 
1577
1581
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2538,7 +2542,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2538
2542
 
2539
2543
  /* stylelint-disable property-no-vendor-prefix */
2540
2544
  .e-listbox-wrapper,
2541
- .e-listbox-container {
2545
+ .e-listbox-container,
2546
+ .e-listboxtool-wrapper {
2542
2547
  -webkit-overflow-scrolling: touch;
2543
2548
  box-sizing: border-box;
2544
2549
  cursor: pointer;
@@ -2550,24 +2555,29 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2550
2555
  width: 100%;
2551
2556
  }
2552
2557
  .e-listbox-wrapper *,
2553
- .e-listbox-container * {
2558
+ .e-listbox-container *,
2559
+ .e-listboxtool-wrapper * {
2554
2560
  box-sizing: border-box;
2555
2561
  }
2556
2562
  .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2557
- .e-listbox-container.e-listboxtool-container .e-list-wrap {
2563
+ .e-listbox-container.e-listboxtool-container .e-list-wrap,
2564
+ .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
2558
2565
  width: 87% !important; /* stylelint-disable-line declaration-no-important */
2559
2566
  }
2560
2567
  .e-listbox-wrapper:focus,
2561
- .e-listbox-container:focus {
2568
+ .e-listbox-container:focus,
2569
+ .e-listboxtool-wrapper:focus {
2562
2570
  outline: none;
2563
2571
  }
2564
2572
  .e-listbox-wrapper.e-disabled,
2565
- .e-listbox-container.e-disabled {
2573
+ .e-listbox-container.e-disabled,
2574
+ .e-listboxtool-wrapper.e-disabled {
2566
2575
  cursor: default;
2567
2576
  pointer-events: none;
2568
2577
  }
2569
2578
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2570
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2579
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2580
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2571
2581
  text-align: center;
2572
2582
  }
2573
2583
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2575,53 +2585,66 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2575
2585
  .e-listbox-wrapper .e-selectall-parent,
2576
2586
  .e-listbox-container:not(.e-list-template) .e-list-item,
2577
2587
  .e-listbox-container .e-list-nrt,
2578
- .e-listbox-container .e-selectall-parent {
2588
+ .e-listbox-container .e-selectall-parent,
2589
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2590
+ .e-listboxtool-wrapper .e-list-nrt,
2591
+ .e-listboxtool-wrapper .e-selectall-parent {
2579
2592
  height: 36px;
2580
2593
  line-height: 1;
2581
2594
  padding: 9px 16px;
2582
2595
  position: relative;
2583
2596
  }
2584
2597
  .e-listbox-wrapper.e-filter-list,
2585
- .e-listbox-container.e-filter-list {
2598
+ .e-listbox-container.e-filter-list,
2599
+ .e-listboxtool-wrapper.e-filter-list {
2586
2600
  overflow: inherit;
2587
2601
  }
2588
2602
  .e-listbox-wrapper .e-list-parent,
2589
- .e-listbox-container .e-list-parent {
2603
+ .e-listbox-container .e-list-parent,
2604
+ .e-listboxtool-wrapper .e-list-parent {
2590
2605
  height: 100%;
2591
2606
  min-height: 36px;
2592
2607
  }
2593
2608
  .e-listbox-wrapper .e-list-item,
2594
- .e-listbox-container .e-list-item {
2609
+ .e-listbox-container .e-list-item,
2610
+ .e-listboxtool-wrapper .e-list-item {
2595
2611
  border-bottom: 0 solid;
2596
2612
  outline: none;
2597
2613
  }
2598
2614
  .e-listbox-wrapper .e-list-item.e-disabled,
2599
- .e-listbox-container .e-list-item.e-disabled {
2615
+ .e-listbox-container .e-list-item.e-disabled,
2616
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2600
2617
  pointer-events: none;
2601
2618
  }
2602
2619
  .e-listbox-wrapper .e-disable,
2603
- .e-listbox-container .e-disable {
2620
+ .e-listbox-container .e-disable,
2621
+ .e-listboxtool-wrapper .e-disable {
2604
2622
  opacity: 0.7;
2605
2623
  }
2606
2624
  .e-listbox-wrapper .e-list-parent,
2607
- .e-listbox-container .e-list-parent {
2625
+ .e-listbox-container .e-list-parent,
2626
+ .e-listboxtool-wrapper .e-list-parent {
2608
2627
  margin: 0;
2609
2628
  padding: 0;
2610
2629
  }
2611
2630
  .e-listbox-wrapper .e-list-header .e-text.header,
2612
- .e-listbox-container .e-list-header .e-text.header {
2631
+ .e-listbox-container .e-list-header .e-text.header,
2632
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2613
2633
  display: none;
2614
2634
  }
2615
2635
  .e-listbox-wrapper .e-icon-back,
2616
- .e-listbox-container .e-icon-back {
2636
+ .e-listbox-container .e-icon-back,
2637
+ .e-listboxtool-wrapper .e-icon-back {
2617
2638
  margin-top: 2px;
2618
2639
  }
2619
2640
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2620
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2641
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2642
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2621
2643
  display: none;
2622
2644
  }
2623
2645
  .e-listbox-wrapper .e-list-header,
2624
- .e-listbox-container .e-list-header {
2646
+ .e-listbox-container .e-list-header,
2647
+ .e-listboxtool-wrapper .e-list-header {
2625
2648
  -ms-flex-align: center;
2626
2649
  align-items: center;
2627
2650
  border-bottom: 1px solid;
@@ -2632,21 +2655,25 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2632
2655
  padding: 0 16px;
2633
2656
  }
2634
2657
  .e-listbox-wrapper .e-has-header > .e-view,
2635
- .e-listbox-container .e-has-header > .e-view {
2658
+ .e-listbox-container .e-has-header > .e-view,
2659
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2636
2660
  top: 45px;
2637
2661
  }
2638
2662
  .e-listbox-wrapper .e-but-back,
2639
- .e-listbox-container .e-but-back {
2663
+ .e-listbox-container .e-but-back,
2664
+ .e-listboxtool-wrapper .e-but-back {
2640
2665
  cursor: pointer;
2641
2666
  padding-right: 20px;
2642
2667
  }
2643
2668
  .e-listbox-wrapper .e-list-group-item:first-child,
2644
- .e-listbox-container .e-list-group-item:first-child {
2669
+ .e-listbox-container .e-list-group-item:first-child,
2670
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2645
2671
  border: 0;
2646
2672
  border-bottom: 0 solid transparent;
2647
2673
  }
2648
2674
  .e-listbox-wrapper .e-list-group-item,
2649
- .e-listbox-container .e-list-group-item {
2675
+ .e-listbox-container .e-list-group-item,
2676
+ .e-listboxtool-wrapper .e-list-group-item {
2650
2677
  border-bottom: 0 solid transparent;
2651
2678
  border-top: 1px solid;
2652
2679
  font-weight: 600;
@@ -2655,7 +2682,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2655
2682
  padding: 9px 16px;
2656
2683
  }
2657
2684
  .e-listbox-wrapper .e-icon-collapsible,
2658
- .e-listbox-container .e-icon-collapsible {
2685
+ .e-listbox-container .e-icon-collapsible,
2686
+ .e-listboxtool-wrapper .e-icon-collapsible {
2659
2687
  cursor: pointer;
2660
2688
  font-size: 12px;
2661
2689
  position: absolute;
@@ -2664,42 +2692,51 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2664
2692
  transform: translateY(-50%);
2665
2693
  }
2666
2694
  .e-listbox-wrapper .e-text-content,
2667
- .e-listbox-container .e-text-content {
2695
+ .e-listbox-container .e-text-content,
2696
+ .e-listboxtool-wrapper .e-text-content {
2668
2697
  height: 100%;
2669
2698
  position: relative;
2670
2699
  vertical-align: middle;
2671
2700
  }
2672
2701
  .e-listbox-wrapper .e-text-content *,
2673
- .e-listbox-container .e-text-content * {
2702
+ .e-listbox-container .e-text-content *,
2703
+ .e-listboxtool-wrapper .e-text-content * {
2674
2704
  display: inline-block;
2675
2705
  vertical-align: middle;
2676
2706
  }
2677
2707
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2678
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2708
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2709
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2679
2710
  width: calc(100% - 40px);
2680
2711
  }
2681
2712
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2682
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2713
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2714
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2683
2715
  width: calc(100% - 90px);
2684
2716
  }
2685
2717
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2686
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2718
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2719
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2687
2720
  width: calc(100% - 80px);
2688
2721
  }
2689
2722
  .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,
2690
- .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 {
2723
+ .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,
2724
+ .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 {
2691
2725
  width: calc(100% - 92px);
2692
2726
  }
2693
2727
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2694
- .e-listbox-container .e-checkbox .e-checkbox-left {
2728
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2729
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2695
2730
  margin: -2px 10px 0 0;
2696
2731
  }
2697
2732
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2698
- .e-listbox-container .e-checkbox .e-checkbox-right {
2733
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2734
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2699
2735
  margin: -2px 0 0 10px;
2700
2736
  }
2701
2737
  .e-listbox-wrapper .e-list-text,
2702
- .e-listbox-container .e-list-text {
2738
+ .e-listbox-container .e-list-text,
2739
+ .e-listboxtool-wrapper .e-list-text {
2703
2740
  cursor: pointer;
2704
2741
  display: inline-block;
2705
2742
  overflow: hidden;
@@ -2709,107 +2746,129 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2709
2746
  width: 100%;
2710
2747
  }
2711
2748
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2712
- .e-listbox-container .e-list-icon + .e-list-text {
2749
+ .e-listbox-container .e-list-icon + .e-list-text,
2750
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2713
2751
  width: calc(100% - 60px);
2714
2752
  }
2715
2753
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2716
- .e-listbox-container .e-icon-wrapper .e-list-text {
2754
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2755
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2717
2756
  width: calc(100% - 60px);
2718
2757
  }
2719
2758
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2720
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2759
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2760
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2721
2761
  width: calc(100% - 60px);
2722
2762
  }
2723
2763
  .e-listbox-wrapper .e-list-icon,
2724
- .e-listbox-container .e-list-icon {
2764
+ .e-listbox-container .e-list-icon,
2765
+ .e-listboxtool-wrapper .e-list-icon {
2725
2766
  height: 30px;
2726
2767
  margin-right: 16px;
2727
2768
  width: 30px;
2728
2769
  }
2729
2770
  .e-listbox-wrapper .e-content,
2730
- .e-listbox-container .e-content {
2771
+ .e-listbox-container .e-content,
2772
+ .e-listboxtool-wrapper .e-content {
2731
2773
  overflow: hidden;
2732
2774
  position: relative;
2733
2775
  }
2734
2776
  .e-listbox-wrapper .e-list-header .e-text,
2735
- .e-listbox-container .e-list-header .e-text {
2777
+ .e-listbox-container .e-list-header .e-text,
2778
+ .e-listboxtool-wrapper .e-list-header .e-text {
2736
2779
  cursor: pointer;
2737
2780
  text-indent: 0;
2738
2781
  }
2739
2782
  .e-listbox-wrapper .e-text .e-headertext,
2740
- .e-listbox-container .e-text .e-headertext {
2783
+ .e-listbox-container .e-text .e-headertext,
2784
+ .e-listboxtool-wrapper .e-text .e-headertext {
2741
2785
  display: inline-block;
2742
2786
  line-height: 21px;
2743
2787
  }
2744
2788
  .e-listbox-wrapper.e-rtl,
2745
- .e-listbox-container.e-rtl {
2789
+ .e-listbox-container.e-rtl,
2790
+ .e-listboxtool-wrapper.e-rtl {
2746
2791
  direction: rtl;
2747
2792
  }
2748
2793
  .e-listbox-wrapper.e-rtl .e-list-icon,
2749
- .e-listbox-container.e-rtl .e-list-icon {
2794
+ .e-listbox-container.e-rtl .e-list-icon,
2795
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2750
2796
  margin-left: 16px;
2751
2797
  margin-right: 0;
2752
2798
  }
2753
2799
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2754
- .e-listbox-container.e-rtl .e-icon-collapsible {
2800
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2801
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2755
2802
  left: 0%;
2756
2803
  right: initial;
2757
2804
  top: 50%;
2758
2805
  transform: translateY(-50%) rotate(180deg);
2759
2806
  }
2760
2807
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2761
- .e-listbox-container.e-rtl .e-list-header .e-text {
2808
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2809
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2762
2810
  cursor: pointer;
2763
2811
  }
2764
2812
  .e-listbox-wrapper.e-rtl .e-but-back,
2765
- .e-listbox-container.e-rtl .e-but-back {
2813
+ .e-listbox-container.e-rtl .e-but-back,
2814
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2766
2815
  transform: rotate(180deg);
2767
2816
  }
2768
2817
  .e-listbox-wrapper.e-rtl .e-icon-back,
2769
- .e-listbox-container.e-rtl .e-icon-back {
2818
+ .e-listbox-container.e-rtl .e-icon-back,
2819
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2770
2820
  margin-top: 1px;
2771
2821
  }
2772
2822
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2773
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2823
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2824
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2774
2825
  margin: -2px 0 0 10px;
2775
2826
  }
2776
2827
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2777
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2828
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2829
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2778
2830
  margin: -2px 10px 0 0;
2779
2831
  }
2780
2832
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2781
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2833
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2834
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2782
2835
  margin: -2px 0 0 10px;
2783
2836
  }
2784
2837
  .e-listbox-wrapper .e-checkbox-wrapper,
2785
- .e-listbox-container .e-checkbox-wrapper {
2838
+ .e-listbox-container .e-checkbox-wrapper,
2839
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2786
2840
  margin: -2px 10px 0 0;
2787
2841
  text-indent: 0;
2788
2842
  vertical-align: middle;
2789
2843
  }
2790
2844
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2791
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2845
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2846
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2792
2847
  position: absolute;
2793
2848
  right: 0;
2794
2849
  top: 30%;
2795
2850
  }
2796
2851
  .e-listbox-wrapper .e-input-group,
2797
- .e-listbox-container .e-input-group {
2852
+ .e-listbox-container .e-input-group,
2853
+ .e-listboxtool-wrapper .e-input-group {
2798
2854
  padding: 4px 8px;
2799
2855
  }
2800
2856
  .e-listbox-wrapper .e-input-focus,
2801
- .e-listbox-container .e-input-focus {
2857
+ .e-listbox-container .e-input-focus,
2858
+ .e-listboxtool-wrapper .e-input-focus {
2802
2859
  padding: 4px 4px 4px 8px;
2803
2860
  }
2804
2861
  .e-listbox-wrapper .e-hidden-select,
2805
- .e-listbox-container .e-hidden-select {
2862
+ .e-listbox-container .e-hidden-select,
2863
+ .e-listboxtool-wrapper .e-hidden-select {
2806
2864
  height: 1px;
2807
2865
  opacity: 0;
2808
2866
  position: absolute;
2809
2867
  width: 100%;
2810
2868
  }
2811
2869
  .e-listbox-wrapper .e-placeholder,
2812
- .e-listbox-container .e-placeholder {
2870
+ .e-listbox-container .e-placeholder,
2871
+ .e-listboxtool-wrapper .e-placeholder {
2813
2872
  background-color: #ffd939;
2814
2873
  display: block;
2815
2874
  height: 1px;
@@ -2831,24 +2890,29 @@ ejs-listbox {
2831
2890
  }
2832
2891
 
2833
2892
  .e-listbox-wrapper.e-sortableclone,
2834
- .e-listbox-container.e-sortableclone {
2893
+ .e-listbox-container.e-sortableclone,
2894
+ .e-listboxtool-wrapper.e-sortableclone {
2835
2895
  border-width: 0;
2836
2896
  overflow: visible;
2837
2897
  }
2838
2898
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2839
- .e-listbox-container.e-sortableclone .e-list-item {
2899
+ .e-listbox-container.e-sortableclone .e-list-item,
2900
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2840
2901
  list-style-type: none;
2841
2902
  }
2842
2903
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2843
- .e-listbox-container.e-sortableclone .e-ripple {
2904
+ .e-listbox-container.e-sortableclone .e-ripple,
2905
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2844
2906
  overflow: visible;
2845
2907
  }
2846
2908
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2847
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
2909
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
2910
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2848
2911
  display: none;
2849
2912
  }
2850
2913
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2851
- .e-listbox-container.e-sortableclone .e-list-badge {
2914
+ .e-listbox-container.e-sortableclone .e-list-badge,
2915
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2852
2916
  -ms-flex-align: center;
2853
2917
  align-items: center;
2854
2918
  background-color: #ffd939;
@@ -2867,6 +2931,10 @@ ejs-listbox {
2867
2931
  width: 22px;
2868
2932
  }
2869
2933
 
2934
+ .e-listboxtool-wrapper.e-sortableclone {
2935
+ display: block;
2936
+ }
2937
+
2870
2938
  .e-listboxtool-wrapper,
2871
2939
  .e-listboxtool-container {
2872
2940
  cursor: pointer;
@@ -3048,12 +3116,14 @@ ejs-listbox {
3048
3116
  }
3049
3117
 
3050
3118
  .e-listbox-wrapper,
3051
- .e-listbox-container {
3119
+ .e-listbox-container,
3120
+ .e-listboxtool-wrapper {
3052
3121
  font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
3053
3122
  font-size: 13px;
3054
3123
  }
3055
3124
  .e-listbox-wrapper .e-list-header,
3056
- .e-listbox-container .e-list-header {
3125
+ .e-listbox-container .e-list-header,
3126
+ .e-listboxtool-wrapper .e-list-header {
3057
3127
  background-color: #000;
3058
3128
  border-color: #969696;
3059
3129
  color: #ffd939;
@@ -3061,27 +3131,32 @@ ejs-listbox {
3061
3131
  }
3062
3132
 
3063
3133
  .e-listbox-wrapper.e-filter-list .e-list-parent,
3064
- .e-listbox-container.e-filter-list .e-list-parent {
3134
+ .e-listbox-container.e-filter-list .e-list-parent,
3135
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
3065
3136
  height: calc(100% - 51px);
3066
3137
  }
3067
3138
 
3068
3139
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3069
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3140
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3141
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
3070
3142
  height: calc(100% - 87px);
3071
3143
  }
3072
3144
 
3073
3145
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3074
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3146
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3147
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
3075
3148
  height: calc(100% - 36px);
3076
3149
  }
3077
3150
 
3078
3151
  .e-listbox-wrapper .e-icons,
3079
- .e-listbox-container .e-icons {
3152
+ .e-listbox-container .e-icons,
3153
+ .e-listboxtool-wrapper .e-icons {
3080
3154
  color: #fff;
3081
3155
  }
3082
3156
 
3083
3157
  .e-listbox-wrapper .e-list-item,
3084
- .e-listbox-container .e-list-item {
3158
+ .e-listbox-container .e-list-item,
3159
+ .e-listboxtool-wrapper .e-list-item {
3085
3160
  background-color: #000;
3086
3161
  border-bottom: 2px solid transparent;
3087
3162
  border-left: 2px solid transparent;
@@ -3092,41 +3167,50 @@ ejs-listbox {
3092
3167
 
3093
3168
  .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),
3094
3169
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
3095
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3170
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3171
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3172
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3096
3173
  background-color: #685708;
3097
3174
  border-color: #fff;
3098
3175
  color: #fff;
3099
3176
  }
3100
3177
 
3101
3178
  .e-listbox-wrapper .e-list-item.e-selected,
3102
- .e-listbox-container .e-list-item.e-selected {
3179
+ .e-listbox-container .e-list-item.e-selected,
3180
+ .e-listboxtool-wrapper .e-list-item.e-selected {
3103
3181
  background-color: #ffd939;
3104
3182
  color: #000;
3105
3183
  }
3106
3184
 
3107
3185
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
3108
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3186
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3187
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3109
3188
  background-color: #000;
3110
3189
  color: #fff;
3111
3190
  }
3112
3191
 
3113
3192
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3114
3193
  .e-listbox-container .e-list-item.e-focused,
3115
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3194
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3195
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3196
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3116
3197
  background-color: #ffd939;
3117
3198
  color: #000;
3118
3199
  }
3119
3200
 
3120
3201
  .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,
3121
3202
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3122
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3203
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3204
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3205
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3123
3206
  background-color: #000;
3124
3207
  border-color: #000;
3125
3208
  color: #ffd939;
3126
3209
  }
3127
3210
 
3128
3211
  .e-listbox-wrapper .e-list-group-item,
3129
- .e-listbox-container .e-list-group-item {
3212
+ .e-listbox-container .e-list-group-item,
3213
+ .e-listboxtool-wrapper .e-list-group-item {
3130
3214
  background-color: #000;
3131
3215
  border-color: #969696;
3132
3216
  color: #ffd939;
@@ -3134,32 +3218,38 @@ ejs-listbox {
3134
3218
  }
3135
3219
 
3136
3220
  .e-listbox-wrapper .e-selectall-parent,
3137
- .e-listbox-container .e-selectall-parent {
3221
+ .e-listbox-container .e-selectall-parent,
3222
+ .e-listboxtool-wrapper .e-selectall-parent {
3138
3223
  background-color: #000;
3139
3224
  border-bottom: 1px solid #fff;
3140
3225
  color: #fff;
3141
3226
  }
3142
3227
 
3143
3228
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3144
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3229
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3230
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3145
3231
  background-color: transparent;
3146
3232
  }
3147
3233
 
3148
3234
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3149
- .e-listbox-container.e-list-template .e-list-wrapper {
3235
+ .e-listbox-container.e-list-template .e-list-wrapper,
3236
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3150
3237
  height: inherit;
3151
3238
  position: relative;
3152
3239
  }
3153
3240
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3154
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3241
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3242
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3155
3243
  padding: 0.6153em 0.923em;
3156
3244
  }
3157
3245
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3158
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3246
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3247
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3159
3248
  padding: 0.6153em 0.923em;
3160
3249
  }
3161
3250
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3162
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3251
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3252
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3163
3253
  color: #fff;
3164
3254
  display: block;
3165
3255
  font-size: 13px;
@@ -3171,7 +3261,8 @@ ejs-listbox {
3171
3261
  white-space: nowrap;
3172
3262
  }
3173
3263
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3174
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3264
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3265
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3175
3266
  color: #fff;
3176
3267
  display: block;
3177
3268
  font-size: 13px;
@@ -3180,13 +3271,15 @@ ejs-listbox {
3180
3271
  word-wrap: break-word;
3181
3272
  }
3182
3273
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3183
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3274
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3275
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3184
3276
  overflow: hidden;
3185
3277
  text-overflow: ellipsis;
3186
3278
  white-space: nowrap;
3187
3279
  }
3188
3280
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3189
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3281
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3282
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3190
3283
  height: 3.0769em;
3191
3284
  left: 0.923em;
3192
3285
  position: absolute;
@@ -3194,17 +3287,20 @@ ejs-listbox {
3194
3287
  width: 3.0769em;
3195
3288
  }
3196
3289
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3197
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3290
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3291
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3198
3292
  padding-left: 4.923em;
3199
3293
  padding-right: 0.923em;
3200
3294
  }
3201
3295
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3202
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3296
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3297
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3203
3298
  padding-left: 0.923em;
3204
3299
  padding-right: 4.923em;
3205
3300
  }
3206
3301
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3207
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3302
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3303
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3208
3304
  height: 3.0769em;
3209
3305
  position: absolute;
3210
3306
  right: 0.923em;
@@ -3212,15 +3308,18 @@ ejs-listbox {
3212
3308
  width: 3.0769em;
3213
3309
  }
3214
3310
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3215
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3311
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3312
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3216
3313
  top: 0.6153em;
3217
3314
  }
3218
3315
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3219
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3316
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3317
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3220
3318
  top: 0.6153em;
3221
3319
  }
3222
3320
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3223
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3321
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3322
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3224
3323
  font-size: 13px;
3225
3324
  height: 1.5384em;
3226
3325
  line-height: 1.3384em;
@@ -3232,17 +3331,20 @@ ejs-listbox {
3232
3331
  width: 1.5384em;
3233
3332
  }
3234
3333
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3235
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3334
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3335
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3236
3336
  padding-left: 4.923em;
3237
3337
  padding-right: 3.3846em;
3238
3338
  }
3239
3339
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3240
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3340
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3341
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3241
3342
  padding-left: 0.923em;
3242
3343
  padding-right: 3.3846em;
3243
3344
  }
3244
3345
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3245
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3346
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3347
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3246
3348
  display: block;
3247
3349
  margin: 0;
3248
3350
  overflow: hidden;
@@ -3251,53 +3353,64 @@ ejs-listbox {
3251
3353
  white-space: nowrap;
3252
3354
  }
3253
3355
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3254
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3356
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3357
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3255
3358
  color: #fff;
3256
3359
  }
3257
3360
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3258
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3361
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3362
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3259
3363
  color: #fff;
3260
3364
  }
3261
3365
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3262
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3366
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3367
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3263
3368
  color: #000;
3264
3369
  }
3265
3370
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3266
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3371
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3372
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3267
3373
  color: #000;
3268
3374
  }
3269
3375
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3270
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3376
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3377
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3271
3378
  left: inherit;
3272
3379
  right: 0.923em;
3273
3380
  }
3274
3381
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3275
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3382
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3383
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3276
3384
  padding-left: 0.923em;
3277
3385
  padding-right: 4.923em;
3278
3386
  }
3279
3387
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3280
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3388
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3389
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3281
3390
  padding-left: 4.923em;
3282
3391
  padding-right: 0.923em;
3283
3392
  }
3284
3393
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3285
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3394
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3395
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3286
3396
  left: 0.923em;
3287
3397
  right: inherit;
3288
3398
  }
3289
3399
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3290
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3400
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3401
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3291
3402
  left: 0.923em;
3292
3403
  right: inherit;
3293
3404
  }
3294
3405
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3295
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3406
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3407
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3296
3408
  padding-left: 3.3846em;
3297
3409
  padding-right: 4.923em;
3298
3410
  }
3299
3411
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3300
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3412
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3413
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3301
3414
  padding-left: 3.3846em;
3302
3415
  padding-right: 0.923em;
3303
3416
  }