@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
@@ -375,6 +375,10 @@
375
375
  color: #f0f0f0;
376
376
  }
377
377
 
378
+ .e-selectall-parent.e-item-focus {
379
+ background-color: #414141;
380
+ }
381
+
378
382
  /* stylelint-disable property-no-vendor-prefix */
379
383
  /* stylelint-disable property-no-vendor-prefix */
380
384
  @keyframes material-spinner-rotate {
@@ -1494,8 +1498,8 @@ ejs-dropdownlist {
1494
1498
  margin-top: -4em;
1495
1499
  position: absolute;
1496
1500
  right: 0;
1497
- top: 100%;
1498
1501
  width: 40px;
1502
+ top: 100%;
1499
1503
  }
1500
1504
 
1501
1505
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -2439,7 +2443,8 @@ ejs-multiselect {
2439
2443
 
2440
2444
  /* stylelint-disable property-no-vendor-prefix */
2441
2445
  .e-listbox-wrapper,
2442
- .e-listbox-container {
2446
+ .e-listbox-container,
2447
+ .e-listboxtool-wrapper {
2443
2448
  -webkit-overflow-scrolling: touch;
2444
2449
  box-sizing: border-box;
2445
2450
  cursor: pointer;
@@ -2451,20 +2456,24 @@ ejs-multiselect {
2451
2456
  width: 100%;
2452
2457
  }
2453
2458
  .e-listbox-wrapper *,
2454
- .e-listbox-container * {
2459
+ .e-listbox-container *,
2460
+ .e-listboxtool-wrapper * {
2455
2461
  box-sizing: border-box;
2456
2462
  }
2457
2463
  .e-listbox-wrapper:focus,
2458
- .e-listbox-container:focus {
2464
+ .e-listbox-container:focus,
2465
+ .e-listboxtool-wrapper:focus {
2459
2466
  outline: none;
2460
2467
  }
2461
2468
  .e-listbox-wrapper.e-disabled,
2462
- .e-listbox-container.e-disabled {
2469
+ .e-listbox-container.e-disabled,
2470
+ .e-listboxtool-wrapper.e-disabled {
2463
2471
  cursor: default;
2464
2472
  pointer-events: none;
2465
2473
  }
2466
2474
  .e-listbox-wrapper:not(.e-list-template) .e-list-nrt,
2467
- .e-listbox-container:not(.e-list-template) .e-list-nrt {
2475
+ .e-listbox-container:not(.e-list-template) .e-list-nrt,
2476
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
2468
2477
  text-align: center;
2469
2478
  }
2470
2479
  .e-listbox-wrapper:not(.e-list-template) .e-list-item,
@@ -2472,53 +2481,66 @@ ejs-multiselect {
2472
2481
  .e-listbox-wrapper .e-selectall-parent,
2473
2482
  .e-listbox-container:not(.e-list-template) .e-list-item,
2474
2483
  .e-listbox-container .e-list-nrt,
2475
- .e-listbox-container .e-selectall-parent {
2484
+ .e-listbox-container .e-selectall-parent,
2485
+ .e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
2486
+ .e-listboxtool-wrapper .e-list-nrt,
2487
+ .e-listboxtool-wrapper .e-selectall-parent {
2476
2488
  height: 40px;
2477
2489
  line-height: 1;
2478
2490
  padding: 13px 16px;
2479
2491
  position: relative;
2480
2492
  }
2481
2493
  .e-listbox-wrapper.e-filter-list,
2482
- .e-listbox-container.e-filter-list {
2494
+ .e-listbox-container.e-filter-list,
2495
+ .e-listboxtool-wrapper.e-filter-list {
2483
2496
  overflow: inherit;
2484
2497
  }
2485
2498
  .e-listbox-wrapper .e-list-parent,
2486
- .e-listbox-container .e-list-parent {
2499
+ .e-listbox-container .e-list-parent,
2500
+ .e-listboxtool-wrapper .e-list-parent {
2487
2501
  height: 100%;
2488
2502
  min-height: 40px;
2489
2503
  }
2490
2504
  .e-listbox-wrapper .e-list-item,
2491
- .e-listbox-container .e-list-item {
2505
+ .e-listbox-container .e-list-item,
2506
+ .e-listboxtool-wrapper .e-list-item {
2492
2507
  border-bottom: 0 solid;
2493
2508
  outline: none;
2494
2509
  }
2495
2510
  .e-listbox-wrapper .e-list-item.e-disabled,
2496
- .e-listbox-container .e-list-item.e-disabled {
2511
+ .e-listbox-container .e-list-item.e-disabled,
2512
+ .e-listboxtool-wrapper .e-list-item.e-disabled {
2497
2513
  pointer-events: none;
2498
2514
  }
2499
2515
  .e-listbox-wrapper .e-disable,
2500
- .e-listbox-container .e-disable {
2516
+ .e-listbox-container .e-disable,
2517
+ .e-listboxtool-wrapper .e-disable {
2501
2518
  opacity: 0.7;
2502
2519
  }
2503
2520
  .e-listbox-wrapper .e-list-parent,
2504
- .e-listbox-container .e-list-parent {
2521
+ .e-listbox-container .e-list-parent,
2522
+ .e-listboxtool-wrapper .e-list-parent {
2505
2523
  margin: 0;
2506
2524
  padding: 0;
2507
2525
  }
2508
2526
  .e-listbox-wrapper .e-list-header .e-text.header,
2509
- .e-listbox-container .e-list-header .e-text.header {
2527
+ .e-listbox-container .e-list-header .e-text.header,
2528
+ .e-listboxtool-wrapper .e-list-header .e-text.header {
2510
2529
  display: none;
2511
2530
  }
2512
2531
  .e-listbox-wrapper .e-icon-back,
2513
- .e-listbox-container .e-icon-back {
2532
+ .e-listbox-container .e-icon-back,
2533
+ .e-listboxtool-wrapper .e-icon-back {
2514
2534
  margin-top: -2px;
2515
2535
  }
2516
2536
  .e-listbox-wrapper .e-list-header .e-headertemplate-text.nested-header,
2517
- .e-listbox-container .e-list-header .e-headertemplate-text.nested-header {
2537
+ .e-listbox-container .e-list-header .e-headertemplate-text.nested-header,
2538
+ .e-listboxtool-wrapper .e-list-header .e-headertemplate-text.nested-header {
2518
2539
  display: none;
2519
2540
  }
2520
2541
  .e-listbox-wrapper .e-list-header,
2521
- .e-listbox-container .e-list-header {
2542
+ .e-listbox-container .e-list-header,
2543
+ .e-listboxtool-wrapper .e-list-header {
2522
2544
  -ms-flex-align: center;
2523
2545
  align-items: center;
2524
2546
  border-bottom: 1px solid;
@@ -2529,21 +2551,25 @@ ejs-multiselect {
2529
2551
  padding: 0 20px;
2530
2552
  }
2531
2553
  .e-listbox-wrapper .e-has-header > .e-view,
2532
- .e-listbox-container .e-has-header > .e-view {
2554
+ .e-listbox-container .e-has-header > .e-view,
2555
+ .e-listboxtool-wrapper .e-has-header > .e-view {
2533
2556
  top: 45px;
2534
2557
  }
2535
2558
  .e-listbox-wrapper .e-but-back,
2536
- .e-listbox-container .e-but-back {
2559
+ .e-listbox-container .e-but-back,
2560
+ .e-listboxtool-wrapper .e-but-back {
2537
2561
  cursor: pointer;
2538
2562
  padding-right: 10px;
2539
2563
  }
2540
2564
  .e-listbox-wrapper .e-list-group-item:first-child,
2541
- .e-listbox-container .e-list-group-item:first-child {
2565
+ .e-listbox-container .e-list-group-item:first-child,
2566
+ .e-listboxtool-wrapper .e-list-group-item:first-child {
2542
2567
  border: 0;
2543
2568
  border-bottom: 1px solid #414141;
2544
2569
  }
2545
2570
  .e-listbox-wrapper .e-list-group-item,
2546
- .e-listbox-container .e-list-group-item {
2571
+ .e-listbox-container .e-list-group-item,
2572
+ .e-listboxtool-wrapper .e-list-group-item {
2547
2573
  border-bottom: 1px solid #414141;
2548
2574
  border-top: 0 solid;
2549
2575
  font-weight: 600;
@@ -2552,7 +2578,8 @@ ejs-multiselect {
2552
2578
  padding: 13px 16px;
2553
2579
  }
2554
2580
  .e-listbox-wrapper .e-icon-collapsible,
2555
- .e-listbox-container .e-icon-collapsible {
2581
+ .e-listbox-container .e-icon-collapsible,
2582
+ .e-listboxtool-wrapper .e-icon-collapsible {
2556
2583
  cursor: pointer;
2557
2584
  font-size: 12px;
2558
2585
  position: absolute;
@@ -2561,42 +2588,51 @@ ejs-multiselect {
2561
2588
  transform: translateY(-50%);
2562
2589
  }
2563
2590
  .e-listbox-wrapper .e-text-content,
2564
- .e-listbox-container .e-text-content {
2591
+ .e-listbox-container .e-text-content,
2592
+ .e-listboxtool-wrapper .e-text-content {
2565
2593
  height: 100%;
2566
2594
  position: relative;
2567
2595
  vertical-align: middle;
2568
2596
  }
2569
2597
  .e-listbox-wrapper .e-text-content *,
2570
- .e-listbox-container .e-text-content * {
2598
+ .e-listbox-container .e-text-content *,
2599
+ .e-listboxtool-wrapper .e-text-content * {
2571
2600
  display: inline-block;
2572
2601
  vertical-align: middle;
2573
2602
  }
2574
2603
  .e-listbox-wrapper .e-text-content.e-checkbox .e-list-text,
2575
- .e-listbox-container .e-text-content.e-checkbox .e-list-text {
2604
+ .e-listbox-container .e-text-content.e-checkbox .e-list-text,
2605
+ .e-listboxtool-wrapper .e-text-content.e-checkbox .e-list-text {
2576
2606
  width: calc(100% - 40px);
2577
2607
  }
2578
2608
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2579
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2609
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text,
2610
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
2580
2611
  width: calc(100% - 90px);
2581
2612
  }
2582
2613
  .e-listbox-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2583
- .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2614
+ .e-listbox-container .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text,
2615
+ .e-listboxtool-wrapper .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
2584
2616
  width: calc(100% - 80px);
2585
2617
  }
2586
2618
  .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,
2587
- .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 {
2619
+ .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,
2620
+ .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 {
2588
2621
  width: calc(100% - 92px);
2589
2622
  }
2590
2623
  .e-listbox-wrapper .e-checkbox .e-checkbox-left,
2591
- .e-listbox-container .e-checkbox .e-checkbox-left {
2624
+ .e-listbox-container .e-checkbox .e-checkbox-left,
2625
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-left {
2592
2626
  margin: -4px 10px 0 0;
2593
2627
  }
2594
2628
  .e-listbox-wrapper .e-checkbox .e-checkbox-right,
2595
- .e-listbox-container .e-checkbox .e-checkbox-right {
2629
+ .e-listbox-container .e-checkbox .e-checkbox-right,
2630
+ .e-listboxtool-wrapper .e-checkbox .e-checkbox-right {
2596
2631
  margin: -4px 0 0 10px;
2597
2632
  }
2598
2633
  .e-listbox-wrapper .e-list-text,
2599
- .e-listbox-container .e-list-text {
2634
+ .e-listbox-container .e-list-text,
2635
+ .e-listboxtool-wrapper .e-list-text {
2600
2636
  cursor: pointer;
2601
2637
  display: inline-block;
2602
2638
  overflow: hidden;
@@ -2606,107 +2642,129 @@ ejs-multiselect {
2606
2642
  width: 100%;
2607
2643
  }
2608
2644
  .e-listbox-wrapper .e-list-icon + .e-list-text,
2609
- .e-listbox-container .e-list-icon + .e-list-text {
2645
+ .e-listbox-container .e-list-icon + .e-list-text,
2646
+ .e-listboxtool-wrapper .e-list-icon + .e-list-text {
2610
2647
  width: calc(100% - 60px);
2611
2648
  }
2612
2649
  .e-listbox-wrapper .e-icon-wrapper .e-list-text,
2613
- .e-listbox-container .e-icon-wrapper .e-list-text {
2650
+ .e-listbox-container .e-icon-wrapper .e-list-text,
2651
+ .e-listboxtool-wrapper .e-icon-wrapper .e-list-text {
2614
2652
  width: calc(100% - 60px);
2615
2653
  }
2616
2654
  .e-listbox-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2617
- .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2655
+ .e-listbox-container .e-icon-wrapper.e-text-content.e-checkbox .e-list-text,
2656
+ .e-listboxtool-wrapper .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
2618
2657
  width: calc(100% - 60px);
2619
2658
  }
2620
2659
  .e-listbox-wrapper .e-list-icon,
2621
- .e-listbox-container .e-list-icon {
2660
+ .e-listbox-container .e-list-icon,
2661
+ .e-listboxtool-wrapper .e-list-icon {
2622
2662
  height: 30px;
2623
2663
  margin-right: 10px;
2624
2664
  width: 30px;
2625
2665
  }
2626
2666
  .e-listbox-wrapper .e-content,
2627
- .e-listbox-container .e-content {
2667
+ .e-listbox-container .e-content,
2668
+ .e-listboxtool-wrapper .e-content {
2628
2669
  overflow: hidden;
2629
2670
  position: relative;
2630
2671
  }
2631
2672
  .e-listbox-wrapper .e-list-header .e-text,
2632
- .e-listbox-container .e-list-header .e-text {
2673
+ .e-listbox-container .e-list-header .e-text,
2674
+ .e-listboxtool-wrapper .e-list-header .e-text {
2633
2675
  cursor: pointer;
2634
2676
  text-indent: 0;
2635
2677
  }
2636
2678
  .e-listbox-wrapper .e-text .e-headertext,
2637
- .e-listbox-container .e-text .e-headertext {
2679
+ .e-listbox-container .e-text .e-headertext,
2680
+ .e-listboxtool-wrapper .e-text .e-headertext {
2638
2681
  display: inline-block;
2639
2682
  line-height: 1px;
2640
2683
  }
2641
2684
  .e-listbox-wrapper.e-rtl,
2642
- .e-listbox-container.e-rtl {
2685
+ .e-listbox-container.e-rtl,
2686
+ .e-listboxtool-wrapper.e-rtl {
2643
2687
  direction: rtl;
2644
2688
  }
2645
2689
  .e-listbox-wrapper.e-rtl .e-list-icon,
2646
- .e-listbox-container.e-rtl .e-list-icon {
2690
+ .e-listbox-container.e-rtl .e-list-icon,
2691
+ .e-listboxtool-wrapper.e-rtl .e-list-icon {
2647
2692
  margin-left: 16px;
2648
2693
  margin-right: 0;
2649
2694
  }
2650
2695
  .e-listbox-wrapper.e-rtl .e-icon-collapsible,
2651
- .e-listbox-container.e-rtl .e-icon-collapsible {
2696
+ .e-listbox-container.e-rtl .e-icon-collapsible,
2697
+ .e-listboxtool-wrapper.e-rtl .e-icon-collapsible {
2652
2698
  left: 0%;
2653
2699
  right: initial;
2654
2700
  top: 50%;
2655
2701
  transform: translateY(-50%) rotate(180deg);
2656
2702
  }
2657
2703
  .e-listbox-wrapper.e-rtl .e-list-header .e-text,
2658
- .e-listbox-container.e-rtl .e-list-header .e-text {
2704
+ .e-listbox-container.e-rtl .e-list-header .e-text,
2705
+ .e-listboxtool-wrapper.e-rtl .e-list-header .e-text {
2659
2706
  cursor: pointer;
2660
2707
  }
2661
2708
  .e-listbox-wrapper.e-rtl .e-but-back,
2662
- .e-listbox-container.e-rtl .e-but-back {
2709
+ .e-listbox-container.e-rtl .e-but-back,
2710
+ .e-listboxtool-wrapper.e-rtl .e-but-back {
2663
2711
  transform: rotate(180deg);
2664
2712
  }
2665
2713
  .e-listbox-wrapper.e-rtl .e-icon-back,
2666
- .e-listbox-container.e-rtl .e-icon-back {
2714
+ .e-listbox-container.e-rtl .e-icon-back,
2715
+ .e-listboxtool-wrapper.e-rtl .e-icon-back {
2667
2716
  margin-top: -1px;
2668
2717
  }
2669
2718
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-left,
2670
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left {
2719
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-left,
2720
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-left {
2671
2721
  margin: -4px 0 0 10px;
2672
2722
  }
2673
2723
  .e-listbox-wrapper.e-rtl .e-checkbox .e-checkbox-right,
2674
- .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right {
2724
+ .e-listbox-container.e-rtl .e-checkbox .e-checkbox-right,
2725
+ .e-listboxtool-wrapper.e-rtl .e-checkbox .e-checkbox-right {
2675
2726
  margin: -4px 10px 0 0;
2676
2727
  }
2677
2728
  .e-listbox-wrapper.e-rtl .e-checkbox-wrapper,
2678
- .e-listbox-container.e-rtl .e-checkbox-wrapper {
2729
+ .e-listbox-container.e-rtl .e-checkbox-wrapper,
2730
+ .e-listboxtool-wrapper.e-rtl .e-checkbox-wrapper {
2679
2731
  margin: -4px 0 0 10px;
2680
2732
  }
2681
2733
  .e-listbox-wrapper .e-checkbox-wrapper,
2682
- .e-listbox-container .e-checkbox-wrapper {
2734
+ .e-listbox-container .e-checkbox-wrapper,
2735
+ .e-listboxtool-wrapper .e-checkbox-wrapper {
2683
2736
  margin: -4px 10px 0 0;
2684
2737
  text-indent: 0;
2685
2738
  vertical-align: middle;
2686
2739
  }
2687
2740
  .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2688
- .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2741
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper,
2742
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper {
2689
2743
  position: absolute;
2690
2744
  right: 0;
2691
2745
  top: 30%;
2692
2746
  }
2693
2747
  .e-listbox-wrapper .e-input-group,
2694
- .e-listbox-container .e-input-group {
2748
+ .e-listbox-container .e-input-group,
2749
+ .e-listboxtool-wrapper .e-input-group {
2695
2750
  padding: 4px 8px;
2696
2751
  }
2697
2752
  .e-listbox-wrapper .e-input-focus,
2698
- .e-listbox-container .e-input-focus {
2753
+ .e-listbox-container .e-input-focus,
2754
+ .e-listboxtool-wrapper .e-input-focus {
2699
2755
  padding: 4px 4px 4px 8px;
2700
2756
  }
2701
2757
  .e-listbox-wrapper .e-hidden-select,
2702
- .e-listbox-container .e-hidden-select {
2758
+ .e-listbox-container .e-hidden-select,
2759
+ .e-listboxtool-wrapper .e-hidden-select {
2703
2760
  height: 1px;
2704
2761
  opacity: 0;
2705
2762
  position: absolute;
2706
2763
  width: 100%;
2707
2764
  }
2708
2765
  .e-listbox-wrapper .e-placeholder,
2709
- .e-listbox-container .e-placeholder {
2766
+ .e-listbox-container .e-placeholder,
2767
+ .e-listboxtool-wrapper .e-placeholder {
2710
2768
  background-color: #0070f0;
2711
2769
  display: block;
2712
2770
  height: 1px;
@@ -2728,24 +2786,29 @@ ejs-listbox {
2728
2786
  }
2729
2787
 
2730
2788
  .e-listbox-wrapper.e-sortableclone,
2731
- .e-listbox-container.e-sortableclone {
2789
+ .e-listbox-container.e-sortableclone,
2790
+ .e-listboxtool-wrapper.e-sortableclone {
2732
2791
  border-width: 0;
2733
2792
  overflow: visible;
2734
2793
  }
2735
2794
  .e-listbox-wrapper.e-sortableclone .e-list-item,
2736
- .e-listbox-container.e-sortableclone .e-list-item {
2795
+ .e-listbox-container.e-sortableclone .e-list-item,
2796
+ .e-listboxtool-wrapper.e-sortableclone .e-list-item {
2737
2797
  list-style-type: none;
2738
2798
  }
2739
2799
  .e-listbox-wrapper.e-sortableclone .e-ripple,
2740
- .e-listbox-container.e-sortableclone .e-ripple {
2800
+ .e-listbox-container.e-sortableclone .e-ripple,
2801
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple {
2741
2802
  overflow: visible;
2742
2803
  }
2743
2804
  .e-listbox-wrapper.e-sortableclone .e-ripple .e-ripple-element,
2744
- .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element {
2805
+ .e-listbox-container.e-sortableclone .e-ripple .e-ripple-element,
2806
+ .e-listboxtool-wrapper.e-sortableclone .e-ripple .e-ripple-element {
2745
2807
  display: none;
2746
2808
  }
2747
2809
  .e-listbox-wrapper.e-sortableclone .e-list-badge,
2748
- .e-listbox-container.e-sortableclone .e-list-badge {
2810
+ .e-listbox-container.e-sortableclone .e-list-badge,
2811
+ .e-listboxtool-wrapper.e-sortableclone .e-list-badge {
2749
2812
  -ms-flex-align: center;
2750
2813
  align-items: center;
2751
2814
  background-color: #0070f0;
@@ -2764,6 +2827,10 @@ ejs-listbox {
2764
2827
  width: 22px;
2765
2828
  }
2766
2829
 
2830
+ .e-listboxtool-wrapper.e-sortableclone {
2831
+ display: block;
2832
+ }
2833
+
2767
2834
  .e-listboxtool-wrapper,
2768
2835
  .e-listboxtool-container {
2769
2836
  cursor: pointer;
@@ -2939,12 +3006,14 @@ ejs-listbox {
2939
3006
  }
2940
3007
 
2941
3008
  .e-listbox-wrapper,
2942
- .e-listbox-container {
3009
+ .e-listbox-container,
3010
+ .e-listboxtool-wrapper {
2943
3011
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
2944
3012
  font-size: 14px;
2945
3013
  }
2946
3014
  .e-listbox-wrapper .e-list-header,
2947
- .e-listbox-container .e-list-header {
3015
+ .e-listbox-container .e-list-header,
3016
+ .e-listboxtool-wrapper .e-list-header {
2948
3017
  background-color: #6e6e6e;
2949
3018
  border-color: #414141;
2950
3019
  color: rgba(255, 255, 255, 0.95);
@@ -2952,27 +3021,32 @@ ejs-listbox {
2952
3021
  }
2953
3022
 
2954
3023
  .e-listbox-wrapper.e-filter-list .e-list-parent,
2955
- .e-listbox-container.e-filter-list .e-list-parent {
3024
+ .e-listbox-container.e-filter-list .e-list-parent,
3025
+ .e-listboxtool-wrapper.e-filter-list .e-list-parent {
2956
3026
  height: calc(100% - 52px);
2957
3027
  }
2958
3028
 
2959
3029
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2960
- .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3030
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
3031
+ .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
2961
3032
  height: calc(100% - 92px);
2962
3033
  }
2963
3034
 
2964
3035
  .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2965
- .e-listbox-container .e-selectall-parent + .e-list-parent {
3036
+ .e-listbox-container .e-selectall-parent + .e-list-parent,
3037
+ .e-listboxtool-wrapper .e-selectall-parent + .e-list-parent {
2966
3038
  height: calc(100% - 40px);
2967
3039
  }
2968
3040
 
2969
3041
  .e-listbox-wrapper .e-icons,
2970
- .e-listbox-container .e-icons {
3042
+ .e-listbox-container .e-icons,
3043
+ .e-listboxtool-wrapper .e-icons {
2971
3044
  color: #f0f0f0;
2972
3045
  }
2973
3046
 
2974
3047
  .e-listbox-wrapper .e-list-item,
2975
- .e-listbox-container .e-list-item {
3048
+ .e-listbox-container .e-list-item,
3049
+ .e-listboxtool-wrapper .e-list-item {
2976
3050
  background-color: #1a1a1a;
2977
3051
  border-bottom: 1px solid #414141;
2978
3052
  border-left: 0 solid transparent;
@@ -2983,41 +3057,50 @@ ejs-listbox {
2983
3057
 
2984
3058
  .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),
2985
3059
  .e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled),
2986
- .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
3060
+ .e-listbox-container .e-list-item:hover.e-selected.e-checklist:not(.e-disabled),
3061
+ .e-listboxtool-wrapper .e-list-item:hover:not(.e-selected):not(.e-disabled),
3062
+ .e-listboxtool-wrapper .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
2987
3063
  background-color: #313131;
2988
3064
  border-color: transparent;
2989
3065
  color: rgba(255, 255, 255, 0.87);
2990
3066
  }
2991
3067
 
2992
3068
  .e-listbox-wrapper .e-list-item.e-selected,
2993
- .e-listbox-container .e-list-item.e-selected {
3069
+ .e-listbox-container .e-list-item.e-selected,
3070
+ .e-listboxtool-wrapper .e-list-item.e-selected {
2994
3071
  background-color: #414141;
2995
3072
  color: rgba(255, 255, 255, 0.87);
2996
3073
  }
2997
3074
 
2998
3075
  .e-listbox-wrapper .e-list-item.e-selected.e-checklist,
2999
- .e-listbox-container .e-list-item.e-selected.e-checklist {
3076
+ .e-listbox-container .e-list-item.e-selected.e-checklist,
3077
+ .e-listboxtool-wrapper .e-list-item.e-selected.e-checklist {
3000
3078
  background-color: #1a1a1a;
3001
3079
  color: #f0f0f0;
3002
3080
  }
3003
3081
 
3004
3082
  .e-listbox-wrapper .e-list-item.e-focused, .e-listbox-wrapper .e-list-item.e-focused.e-selected.e-checklist,
3005
3083
  .e-listbox-container .e-list-item.e-focused,
3006
- .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist {
3084
+ .e-listbox-container .e-list-item.e-focused.e-selected.e-checklist,
3085
+ .e-listboxtool-wrapper .e-list-item.e-focused,
3086
+ .e-listboxtool-wrapper .e-list-item.e-focused.e-selected.e-checklist {
3007
3087
  background-color: #414141;
3008
3088
  color: rgba(255, 255, 255, 0.87);
3009
3089
  }
3010
3090
 
3011
3091
  .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,
3012
3092
  .e-listbox-container .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3013
- .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3093
+ .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check,
3094
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
3095
+ .e-listboxtool-wrapper .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3014
3096
  background-color: #1a1a1a;
3015
3097
  border-color: #f0f0f0;
3016
3098
  color: #f0f0f0;
3017
3099
  }
3018
3100
 
3019
3101
  .e-listbox-wrapper .e-list-group-item,
3020
- .e-listbox-container .e-list-group-item {
3102
+ .e-listbox-container .e-list-group-item,
3103
+ .e-listboxtool-wrapper .e-list-group-item {
3021
3104
  background-color: #1a1a1a;
3022
3105
  border-color: #414141;
3023
3106
  color: #3e98ff;
@@ -3025,32 +3108,38 @@ ejs-listbox {
3025
3108
  }
3026
3109
 
3027
3110
  .e-listbox-wrapper .e-selectall-parent,
3028
- .e-listbox-container .e-selectall-parent {
3111
+ .e-listbox-container .e-selectall-parent,
3112
+ .e-listboxtool-wrapper .e-selectall-parent {
3029
3113
  background-color: #1a1a1a;
3030
3114
  border-bottom: 1px solid #484848;
3031
3115
  color: #f0f0f0;
3032
3116
  }
3033
3117
 
3034
3118
  .e-listbox-wrapper .e-sortableclone.e-ripple .e-ripple-element,
3035
- .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element {
3119
+ .e-listbox-container .e-sortableclone.e-ripple .e-ripple-element,
3120
+ .e-listboxtool-wrapper .e-sortableclone.e-ripple .e-ripple-element {
3036
3121
  background-color: transparent;
3037
3122
  }
3038
3123
 
3039
3124
  .e-listbox-wrapper.e-list-template .e-list-wrapper,
3040
- .e-listbox-container.e-list-template .e-list-wrapper {
3125
+ .e-listbox-container.e-list-template .e-list-wrapper,
3126
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper {
3041
3127
  height: inherit;
3042
3128
  position: relative;
3043
3129
  }
3044
3130
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3045
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3131
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line),
3132
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
3046
3133
  padding: 0.7142em 1.0714em;
3047
3134
  }
3048
3135
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line,
3049
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line {
3136
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line,
3137
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line {
3050
3138
  padding: 0.7142em 1.0714em;
3051
3139
  }
3052
3140
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3053
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3141
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
3142
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
3054
3143
  color: #fff;
3055
3144
  display: block;
3056
3145
  font-size: 18px;
@@ -3062,7 +3151,8 @@ ejs-listbox {
3062
3151
  white-space: nowrap;
3063
3152
  }
3064
3153
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3065
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3154
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
3155
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
3066
3156
  color: #393939;
3067
3157
  display: block;
3068
3158
  font-size: 14px;
@@ -3071,13 +3161,15 @@ ejs-listbox {
3071
3161
  word-wrap: break-word;
3072
3162
  }
3073
3163
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3074
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3164
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow),
3165
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
3075
3166
  overflow: hidden;
3076
3167
  text-overflow: ellipsis;
3077
3168
  white-space: nowrap;
3078
3169
  }
3079
3170
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3080
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3171
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3172
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3081
3173
  height: 2.8571em;
3082
3174
  left: 1.0667em;
3083
3175
  position: absolute;
@@ -3085,17 +3177,20 @@ ejs-listbox {
3085
3177
  width: 2.8571em;
3086
3178
  }
3087
3179
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3088
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3180
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3181
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3089
3182
  padding-left: 4.6428em;
3090
3183
  padding-right: 1.0714em;
3091
3184
  }
3092
3185
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3093
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3186
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3187
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3094
3188
  padding-left: 1.0714em;
3095
3189
  padding-right: 4.6428em;
3096
3190
  }
3097
3191
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3098
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3192
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3193
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3099
3194
  height: 2.8571em;
3100
3195
  position: absolute;
3101
3196
  right: 1.0667em;
@@ -3103,15 +3198,18 @@ ejs-listbox {
3103
3198
  width: 2.8571em;
3104
3199
  }
3105
3200
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3106
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3201
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
3202
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
3107
3203
  top: 0.7142em;
3108
3204
  }
3109
3205
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3110
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3206
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3207
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3111
3208
  top: 0.7142em;
3112
3209
  }
3113
3210
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3114
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3211
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3212
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3115
3213
  font-size: 15px;
3116
3214
  height: 1.333em;
3117
3215
  line-height: 1.433em;
@@ -3123,17 +3221,20 @@ ejs-listbox {
3123
3221
  width: 2em;
3124
3222
  }
3125
3223
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3126
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3224
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3225
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3127
3226
  padding-left: 4.6428em;
3128
3227
  padding-right: 3.9285em;
3129
3228
  }
3130
3229
  .e-listbox-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3131
- .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3230
+ .e-listbox-container.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3231
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3132
3232
  padding-left: 1.0714em;
3133
3233
  padding-right: 3.9285em;
3134
3234
  }
3135
3235
  .e-listbox-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3136
- .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3236
+ .e-listbox-container.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
3237
+ .e-listboxtool-wrapper.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
3137
3238
  display: block;
3138
3239
  margin: 0;
3139
3240
  overflow: hidden;
@@ -3142,53 +3243,64 @@ ejs-listbox {
3142
3243
  white-space: nowrap;
3143
3244
  }
3144
3245
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3145
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3246
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-item-header,
3247
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-item-header {
3146
3248
  color: rgba(255, 255, 255, 0.87);
3147
3249
  }
3148
3250
  .e-listbox-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3149
- .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3251
+ .e-listbox-container.e-list-template .e-list-item.e-list-item:hover .e-list-content,
3252
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-list-item:hover .e-list-content {
3150
3253
  color: rgba(255, 255, 255, 0.87);
3151
3254
  }
3152
3255
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header,
3153
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header {
3256
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-item-header,
3257
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-item-header {
3154
3258
  color: rgba(255, 255, 255, 0.87);
3155
3259
  }
3156
3260
  .e-listbox-wrapper.e-list-template .e-list-item.e-selected .e-list-content,
3157
- .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content {
3261
+ .e-listbox-container.e-list-template .e-list-item.e-selected .e-list-content,
3262
+ .e-listboxtool-wrapper.e-list-template .e-list-item.e-selected .e-list-content {
3158
3263
  color: rgba(255, 255, 255, 0.87);
3159
3264
  }
3160
3265
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3161
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3266
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
3267
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
3162
3268
  left: inherit;
3163
3269
  right: 1.0667em;
3164
3270
  }
3165
3271
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3166
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3272
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
3273
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
3167
3274
  padding-left: 1.0714em;
3168
3275
  padding-right: 4.6428em;
3169
3276
  }
3170
3277
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3171
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3278
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge),
3279
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
3172
3280
  padding-left: 4.6428em;
3173
3281
  padding-right: 1.0714em;
3174
3282
  }
3175
3283
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3176
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3284
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar,
3285
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
3177
3286
  left: 1.0667em;
3178
3287
  right: inherit;
3179
3288
  }
3180
3289
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge,
3181
- .e-listbox-container.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,
3291
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
3182
3292
  left: 1em;
3183
3293
  right: inherit;
3184
3294
  }
3185
3295
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3186
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3296
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar,
3297
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
3187
3298
  padding-left: 3.9285em;
3188
3299
  padding-right: 4.6428em;
3189
3300
  }
3190
3301
  .e-listbox-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3191
- .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3302
+ .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar),
3303
+ .e-listboxtool-wrapper.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
3192
3304
  padding-left: 3.9285em;
3193
3305
  padding-right: 1.0714em;
3194
3306
  }