@syncfusion/ej2-dropdowns 20.1.61 → 20.2.36

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 (94) hide show
  1. package/CHANGELOG.md +0 -82
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +88 -89
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +51 -52
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/helpers/e2e/autocomplete.js +59 -43
  12. package/helpers/e2e/combobox.js +62 -46
  13. package/helpers/e2e/dropdownlist.js +71 -55
  14. package/helpers/e2e/index.js +11 -9
  15. package/helpers/e2e/listboxHelper.js +55 -38
  16. package/helpers/e2e/multiselect.js +104 -88
  17. package/package.json +11 -11
  18. package/src/common/incremental-search.js +1 -1
  19. package/src/drop-down-base/drop-down-base-model.d.ts +1 -1
  20. package/src/drop-down-base/drop-down-base.d.ts +5 -1
  21. package/src/drop-down-base/drop-down-base.js +3 -5
  22. package/src/drop-down-list/drop-down-list.js +7 -7
  23. package/src/drop-down-tree/drop-down-tree-model.d.ts +2 -2
  24. package/src/drop-down-tree/drop-down-tree.js +5 -5
  25. package/src/list-box/list-box.js +10 -11
  26. package/src/multi-select/multi-select-model.d.ts +1 -1
  27. package/src/multi-select/multi-select.d.ts +2 -1
  28. package/src/multi-select/multi-select.js +25 -23
  29. package/styles/auto-complete/_fusionnew-definition.scss +2 -0
  30. package/styles/auto-complete/_material3-definition.scss +2 -0
  31. package/styles/bootstrap-dark.css +38 -2
  32. package/styles/bootstrap.css +38 -2
  33. package/styles/bootstrap4.css +38 -2
  34. package/styles/bootstrap5-dark.css +38 -2
  35. package/styles/bootstrap5.css +38 -2
  36. package/styles/combo-box/_fusionnew-definition.scss +2 -0
  37. package/styles/combo-box/_material3-definition.scss +2 -0
  38. package/styles/drop-down-base/_fusionnew-definition.scss +111 -0
  39. package/styles/drop-down-base/_material3-definition.scss +111 -0
  40. package/styles/drop-down-list/_fusionnew-definition.scss +201 -0
  41. package/styles/drop-down-list/_material3-definition.scss +201 -0
  42. package/styles/drop-down-list/icons/_fusionnew.scss +14 -0
  43. package/styles/drop-down-list/icons/_material3.scss +14 -0
  44. package/styles/drop-down-tree/_fusionnew-definition.scss +60 -0
  45. package/styles/drop-down-tree/_material3-definition.scss +60 -0
  46. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -0
  47. package/styles/drop-down-tree/icons/_material3.scss +11 -0
  48. package/styles/fabric-dark.css +38 -2
  49. package/styles/fabric.css +38 -2
  50. package/styles/fluent-dark.css +38 -2
  51. package/styles/fluent.css +38 -2
  52. package/styles/highcontrast-light.css +38 -2
  53. package/styles/highcontrast.css +38 -2
  54. package/styles/list-box/_bootstrap-dark-definition.scss +5 -1
  55. package/styles/list-box/_bootstrap-definition.scss +5 -1
  56. package/styles/list-box/_bootstrap4-definition.scss +5 -1
  57. package/styles/list-box/_bootstrap5-definition.scss +7 -0
  58. package/styles/list-box/_fabric-dark-definition.scss +5 -1
  59. package/styles/list-box/_fabric-definition.scss +5 -1
  60. package/styles/list-box/_fluent-definition.scss +7 -0
  61. package/styles/list-box/_fusionnew-definition.scss +113 -0
  62. package/styles/list-box/_highcontrast-definition.scss +5 -1
  63. package/styles/list-box/_highcontrast-light-definition.scss +5 -1
  64. package/styles/list-box/_layout.scss +36 -1
  65. package/styles/list-box/_material-dark-definition.scss +6 -2
  66. package/styles/list-box/_material-definition.scss +6 -2
  67. package/styles/list-box/_material3-definition.scss +119 -0
  68. package/styles/list-box/_tailwind-definition.scss +6 -0
  69. package/styles/list-box/_theme.scss +19 -0
  70. package/styles/list-box/bootstrap-dark.css +28 -2
  71. package/styles/list-box/bootstrap.css +38 -2
  72. package/styles/list-box/bootstrap4.css +38 -2
  73. package/styles/list-box/bootstrap5-dark.css +38 -2
  74. package/styles/list-box/bootstrap5.css +38 -2
  75. package/styles/list-box/fabric-dark.css +28 -2
  76. package/styles/list-box/fabric.css +38 -2
  77. package/styles/list-box/fluent-dark.css +38 -2
  78. package/styles/list-box/fluent.css +38 -2
  79. package/styles/list-box/highcontrast-light.css +28 -2
  80. package/styles/list-box/highcontrast.css +38 -2
  81. package/styles/list-box/icons/_fusionnew.scss +25 -0
  82. package/styles/list-box/icons/_material3.scss +25 -0
  83. package/styles/list-box/material-dark.css +30 -4
  84. package/styles/list-box/material.css +40 -4
  85. package/styles/list-box/tailwind-dark.css +38 -2
  86. package/styles/list-box/tailwind.css +38 -2
  87. package/styles/material-dark.css +40 -4
  88. package/styles/material.css +40 -4
  89. package/styles/multi-select/_fusionnew-definition.scss +219 -0
  90. package/styles/multi-select/_material3-definition.scss +219 -0
  91. package/styles/multi-select/icons/_fusionnew.scss +27 -0
  92. package/styles/multi-select/icons/_material3.scss +27 -0
  93. package/styles/tailwind-dark.css +38 -2
  94. package/styles/tailwind.css +38 -2
@@ -0,0 +1,60 @@
1
+ // sass-lint:disable-all
2
+ $ddt-skin-name: $skin-name !default;
3
+ $ddt-box-shadow: none !default;
4
+ $ddt-close-icon-bottom: 10px !default;
5
+ $ddt-dd-icon-bottom: 0 !default;
6
+ $ddt-dd-icon-width: 30px !default;
7
+ $ddt-close-icon-width: 20px !default;
8
+ $ddt-dd-icon-bigger-bottom: 0 !default;
9
+ $ddt-filter-border: 1px solid $border-light !default;
10
+ $ddt-filter-top-border: 0 !default;
11
+ $ddt-filter-padding: 4px !default;
12
+ $ddt-chip-margin: 3px 4px !default;
13
+ $ddt-chip-padding: 0 8px 0 8px !default;
14
+ $ddt-chip-radius: 4px !default;
15
+ $ddt-chip-height: 24px !default;
16
+ $ddt-chip-bigger-height: 30px !default;
17
+ $ddt-close-icon-bigger-min-height: 36px !default;
18
+ $ddt-chip-content-padding: 0 4px 0 0 !default;
19
+ $ddt-rtl-chip-content-padding: 0 0 0 4px !default;
20
+ $ddt-big-chip-content-padding: 0 8px 0 0 !default;
21
+ $ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
22
+ $ddt-chip-close-font: 10px !default;
23
+ $ddt-chip-close-height: 16px !default;
24
+ $ddt-chip-close-width: 16px !default;
25
+ $ddt-last-chip-right-margin: 48px !default;
26
+ $ddt-last-chip-bigger-right-margin: 52px !default;
27
+ $ddt-select-all-height: 34px !default;
28
+ $ddt-select-all-checkbox-margin: 0 8px !default;
29
+ $ddt-select-all-text-indent: 0 !default;
30
+ $ddt-select-all-bigger-text-indent: 0 !default;
31
+ $ddt-select-all-text-font-size: $text-sm !default;
32
+ $ddt-popup-reorder-border: $border-light !default;
33
+ $ddt-treeview-padding: 6px 8px !default;
34
+ $ddt-chip-width: calc(100% - 2px) !default;
35
+ $ddt-chip-ddi-width: calc(100% - 31px) !default;
36
+ $ddt-chip-ci-width: calc(100% - 31px) !default;
37
+ $ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
38
+ $ddt-big-chip-ddi-width: calc(100% - 37px) !default;
39
+ $ddt-big-chip-ci-width: calc(100% - 37px) !default;
40
+ $ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
41
+ $ddt-remains-padding: 0 0 0 8px !default;
42
+ $ddt-rtl-remains-padding: 0 8px 0 0 !default;
43
+ $ddt-chip-font-size: $text-sm !default;
44
+ $ddt-overflow-count-padding: 5px 4px !default;
45
+ $ddt-delim-padding : 0 8px !default;
46
+ $ddt-delim-bigger-padding: 0 12px !default;
47
+ $ddt-remains-count-padding-top: 0 !default;
48
+
49
+ // color variables
50
+ $ddt-chip-bg-color: $secondary-bg-color !default;
51
+ $ddt-popup-background-color: $flyout-bg-color !default;
52
+ $ddt-popup-border-color: $border-light !default;
53
+ $ddt-chip-close: $secondary-text-color !default;
54
+ $ddt-chip-font-color: $secondary-text-color !default;
55
+ $ddt-chip-hover-bg-color: $secondary-border-color-hover !default;;
56
+ $ddt-chip-hover-font-color: $secondary-text-color-hover !default;
57
+ $ddt-nodata-font-color: $content-text-color !default;
58
+ $ddt-select-all-font-color: $content-text-color !default;
59
+ $ddt-remains-font-color: $content-text-color-alt3 !default;
60
+ $ddt-readonly-input-bg-color: $content-bg-color !default;
@@ -0,0 +1,60 @@
1
+ // sass-lint:disable-all
2
+ $ddt-skin-name: $skin-name !default;
3
+ $ddt-box-shadow: none !default;
4
+ $ddt-close-icon-bottom: 10px !default;
5
+ $ddt-dd-icon-bottom: 0 !default;
6
+ $ddt-dd-icon-width: 30px !default;
7
+ $ddt-close-icon-width: 20px !default;
8
+ $ddt-dd-icon-bigger-bottom: 0 !default;
9
+ $ddt-filter-border: 1px solid $border-light !default;
10
+ $ddt-filter-top-border: 0 !default;
11
+ $ddt-filter-padding: 4px !default;
12
+ $ddt-chip-margin: 3px 4px !default;
13
+ $ddt-chip-padding: 0 8px 0 8px !default;
14
+ $ddt-chip-radius: 4px !default;
15
+ $ddt-chip-height: 24px !default;
16
+ $ddt-chip-bigger-height: 30px !default;
17
+ $ddt-close-icon-bigger-min-height: 36px !default;
18
+ $ddt-chip-content-padding: 0 4px 0 0 !default;
19
+ $ddt-rtl-chip-content-padding: 0 0 0 4px !default;
20
+ $ddt-big-chip-content-padding: 0 8px 0 0 !default;
21
+ $ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
22
+ $ddt-chip-close-font: 10px !default;
23
+ $ddt-chip-close-height: 16px !default;
24
+ $ddt-chip-close-width: 16px !default;
25
+ $ddt-last-chip-right-margin: 48px !default;
26
+ $ddt-last-chip-bigger-right-margin: 52px !default;
27
+ $ddt-select-all-height: 34px !default;
28
+ $ddt-select-all-checkbox-margin: 0 8px !default;
29
+ $ddt-select-all-text-indent: 0 !default;
30
+ $ddt-select-all-bigger-text-indent: 0 !default;
31
+ $ddt-select-all-text-font-size: $text-sm !default;
32
+ $ddt-popup-reorder-border: $border-light !default;
33
+ $ddt-treeview-padding: 6px 8px !default;
34
+ $ddt-chip-width: calc(100% - 2px) !default;
35
+ $ddt-chip-ddi-width: calc(100% - 31px) !default;
36
+ $ddt-chip-ci-width: calc(100% - 31px) !default;
37
+ $ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
38
+ $ddt-big-chip-ddi-width: calc(100% - 37px) !default;
39
+ $ddt-big-chip-ci-width: calc(100% - 37px) !default;
40
+ $ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
41
+ $ddt-remains-padding: 0 0 0 8px !default;
42
+ $ddt-rtl-remains-padding: 0 8px 0 0 !default;
43
+ $ddt-chip-font-size: $text-sm !default;
44
+ $ddt-overflow-count-padding: 5px 4px !default;
45
+ $ddt-delim-padding : 0 8px !default;
46
+ $ddt-delim-bigger-padding: 0 12px !default;
47
+ $ddt-remains-count-padding-top: 0 !default;
48
+
49
+ // color variables
50
+ $ddt-chip-bg-color: $secondary-bg-color !default;
51
+ $ddt-popup-background-color: $flyout-bg-color !default;
52
+ $ddt-popup-border-color: $border-light !default;
53
+ $ddt-chip-close: $secondary-text-color !default;
54
+ $ddt-chip-font-color: $secondary-text-color !default;
55
+ $ddt-chip-hover-bg-color: $secondary-border-color-hover !default;;
56
+ $ddt-chip-hover-font-color: $secondary-text-color-hover !default;
57
+ $ddt-nodata-font-color: $content-text-color !default;
58
+ $ddt-select-all-font-color: $content-text-color !default;
59
+ $ddt-remains-font-color: $content-text-color-alt3 !default;
60
+ $ddt-readonly-input-bg-color: $content-bg-color !default;
@@ -0,0 +1,11 @@
1
+ @include export-module('dropdowntree-fusionnew-icons') {
2
+ .e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e734';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e7e7';
9
+ }
10
+ }
11
+ }
@@ -0,0 +1,11 @@
1
+ @include export-module('dropdowntree-material3-icons') {
2
+ .e-ddt {
3
+ .e-ddt-icon::before {
4
+ content: '\e734';
5
+ }
6
+
7
+ .e-chips-close::before {
8
+ content: '\e7e7';
9
+ }
10
+ }
11
+ }
@@ -2355,6 +2355,10 @@ ejs-multiselect {
2355
2355
  .e-listbox-container * {
2356
2356
  box-sizing: border-box;
2357
2357
  }
2358
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2359
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2360
+ width: 86% !important;
2361
+ }
2358
2362
  .e-listbox-wrapper:focus,
2359
2363
  .e-listbox-container:focus {
2360
2364
  outline: none;
@@ -2585,8 +2589,8 @@ ejs-multiselect {
2585
2589
  text-indent: 0;
2586
2590
  vertical-align: middle;
2587
2591
  }
2588
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2589
- .e-listbox-container.e-right .e-checkbox-wrapper {
2592
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2593
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2590
2594
  position: absolute;
2591
2595
  right: 0;
2592
2596
  top: 30%;
@@ -2705,6 +2709,12 @@ ejs-listbox {
2705
2709
  list-style-type: none;
2706
2710
  margin-bottom: 10px;
2707
2711
  }
2712
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2713
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2714
+ position: absolute;
2715
+ right: 0;
2716
+ top: 30%;
2717
+ }
2708
2718
 
2709
2719
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2710
2720
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2715,6 +2725,12 @@ ejs-listbox {
2715
2725
  margin-left: 15px;
2716
2726
  }
2717
2727
 
2728
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2729
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2730
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2731
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2732
+ width: 83% !important;
2733
+ }
2718
2734
  .e-bigger .e-listbox-wrapper .e-list-item,
2719
2735
  .e-listbox-wrapper.e-bigger .e-list-item,
2720
2736
  .e-bigger .e-listbox-container .e-list-item,
@@ -2812,6 +2828,16 @@ ejs-listbox {
2812
2828
  height: calc(100% - 59px);
2813
2829
  }
2814
2830
 
2831
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2832
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2833
+ height: calc(100% - 104px);
2834
+ }
2835
+
2836
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2837
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2838
+ height: calc(100% - 45px);
2839
+ }
2840
+
2815
2841
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2816
2842
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2817
2843
  height: calc(100% - 55px);
@@ -2841,6 +2867,16 @@ ejs-listbox {
2841
2867
  height: calc(100% - 51px);
2842
2868
  }
2843
2869
 
2870
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2871
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2872
+ height: calc(100% - 87px);
2873
+ }
2874
+
2875
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2876
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
2877
+ height: calc(100% - 36px);
2878
+ }
2879
+
2844
2880
  .e-listbox-wrapper .e-icons,
2845
2881
  .e-listbox-container .e-icons {
2846
2882
  color: #dadada;
package/styles/fabric.css CHANGED
@@ -2349,6 +2349,10 @@ ejs-multiselect {
2349
2349
  .e-listbox-container * {
2350
2350
  box-sizing: border-box;
2351
2351
  }
2352
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2353
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2354
+ width: 86% !important;
2355
+ }
2352
2356
  .e-listbox-wrapper:focus,
2353
2357
  .e-listbox-container:focus {
2354
2358
  outline: none;
@@ -2579,8 +2583,8 @@ ejs-multiselect {
2579
2583
  text-indent: 0;
2580
2584
  vertical-align: middle;
2581
2585
  }
2582
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2583
- .e-listbox-container.e-right .e-checkbox-wrapper {
2586
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2587
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2584
2588
  position: absolute;
2585
2589
  right: 0;
2586
2590
  top: 30%;
@@ -2699,6 +2703,12 @@ ejs-listbox {
2699
2703
  list-style-type: none;
2700
2704
  margin-bottom: 10px;
2701
2705
  }
2706
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2707
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2708
+ position: absolute;
2709
+ right: 0;
2710
+ top: 30%;
2711
+ }
2702
2712
 
2703
2713
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2704
2714
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2709,6 +2719,12 @@ ejs-listbox {
2709
2719
  margin-left: 15px;
2710
2720
  }
2711
2721
 
2722
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2723
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2724
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2725
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2726
+ width: 83% !important;
2727
+ }
2712
2728
  .e-bigger .e-listbox-wrapper .e-list-item,
2713
2729
  .e-listbox-wrapper.e-bigger .e-list-item,
2714
2730
  .e-bigger .e-listbox-container .e-list-item,
@@ -2806,6 +2822,16 @@ ejs-listbox {
2806
2822
  height: calc(100% - 59px);
2807
2823
  }
2808
2824
 
2825
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2826
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2827
+ height: calc(100% - 104px);
2828
+ }
2829
+
2830
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2831
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2832
+ height: calc(100% - 45px);
2833
+ }
2834
+
2809
2835
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2810
2836
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2811
2837
  height: calc(100% - 55px);
@@ -2835,6 +2861,16 @@ ejs-listbox {
2835
2861
  height: calc(100% - 51px);
2836
2862
  }
2837
2863
 
2864
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2865
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2866
+ height: calc(100% - 87px);
2867
+ }
2868
+
2869
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2870
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
2871
+ height: calc(100% - 36px);
2872
+ }
2873
+
2838
2874
  .e-listbox-wrapper .e-icons,
2839
2875
  .e-listbox-container .e-icons {
2840
2876
  color: #333;
@@ -2608,6 +2608,10 @@ ejs-multiselect {
2608
2608
  .e-listbox-container * {
2609
2609
  box-sizing: border-box;
2610
2610
  }
2611
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2612
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2613
+ width: 84% !important;
2614
+ }
2611
2615
  .e-listbox-wrapper:focus,
2612
2616
  .e-listbox-container:focus {
2613
2617
  outline: none;
@@ -2838,8 +2842,8 @@ ejs-multiselect {
2838
2842
  text-indent: 0;
2839
2843
  vertical-align: middle;
2840
2844
  }
2841
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2842
- .e-listbox-container.e-right .e-checkbox-wrapper {
2845
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2846
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2843
2847
  position: absolute;
2844
2848
  right: 0;
2845
2849
  top: 30%;
@@ -2958,6 +2962,12 @@ ejs-listbox {
2958
2962
  list-style-type: none;
2959
2963
  margin-bottom: 10px;
2960
2964
  }
2965
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2966
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2967
+ position: absolute;
2968
+ right: 0;
2969
+ top: 30%;
2970
+ }
2961
2971
 
2962
2972
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2963
2973
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2968,6 +2978,12 @@ ejs-listbox {
2968
2978
  margin-left: 15px;
2969
2979
  }
2970
2980
 
2981
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2982
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2983
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2984
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2985
+ width: 80% !important;
2986
+ }
2971
2987
  .e-bigger .e-listbox-wrapper .e-list-item,
2972
2988
  .e-listbox-wrapper.e-bigger .e-list-item,
2973
2989
  .e-bigger .e-listbox-container .e-list-item,
@@ -3065,6 +3081,16 @@ ejs-listbox {
3065
3081
  height: calc(100% - 55px);
3066
3082
  }
3067
3083
 
3084
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3085
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3086
+ height: calc(100% - 113px);
3087
+ }
3088
+
3089
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3090
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
3091
+ height: calc(100% - 48px);
3092
+ }
3093
+
3068
3094
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3069
3095
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3070
3096
  height: calc(100% - 45px);
@@ -3094,6 +3120,16 @@ ejs-listbox {
3094
3120
  height: calc(100% - 47px);
3095
3121
  }
3096
3122
 
3123
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3124
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3125
+ height: calc(100% - 93px);
3126
+ }
3127
+
3128
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3129
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3130
+ height: calc(100% - 36px);
3131
+ }
3132
+
3097
3133
  .e-listbox-wrapper .e-icons,
3098
3134
  .e-listbox-container .e-icons {
3099
3135
  color: #a19f9d;
package/styles/fluent.css CHANGED
@@ -2608,6 +2608,10 @@ ejs-multiselect {
2608
2608
  .e-listbox-container * {
2609
2609
  box-sizing: border-box;
2610
2610
  }
2611
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2612
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2613
+ width: 84% !important;
2614
+ }
2611
2615
  .e-listbox-wrapper:focus,
2612
2616
  .e-listbox-container:focus {
2613
2617
  outline: none;
@@ -2838,8 +2842,8 @@ ejs-multiselect {
2838
2842
  text-indent: 0;
2839
2843
  vertical-align: middle;
2840
2844
  }
2841
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2842
- .e-listbox-container.e-right .e-checkbox-wrapper {
2845
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2846
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2843
2847
  position: absolute;
2844
2848
  right: 0;
2845
2849
  top: 30%;
@@ -2958,6 +2962,12 @@ ejs-listbox {
2958
2962
  list-style-type: none;
2959
2963
  margin-bottom: 10px;
2960
2964
  }
2965
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2966
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2967
+ position: absolute;
2968
+ right: 0;
2969
+ top: 30%;
2970
+ }
2961
2971
 
2962
2972
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2963
2973
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2968,6 +2978,12 @@ ejs-listbox {
2968
2978
  margin-left: 15px;
2969
2979
  }
2970
2980
 
2981
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2982
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2983
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2984
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2985
+ width: 80% !important;
2986
+ }
2971
2987
  .e-bigger .e-listbox-wrapper .e-list-item,
2972
2988
  .e-listbox-wrapper.e-bigger .e-list-item,
2973
2989
  .e-bigger .e-listbox-container .e-list-item,
@@ -3065,6 +3081,16 @@ ejs-listbox {
3065
3081
  height: calc(100% - 55px);
3066
3082
  }
3067
3083
 
3084
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3085
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3086
+ height: calc(100% - 113px);
3087
+ }
3088
+
3089
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3090
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
3091
+ height: calc(100% - 48px);
3092
+ }
3093
+
3068
3094
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3069
3095
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3070
3096
  height: calc(100% - 45px);
@@ -3094,6 +3120,16 @@ ejs-listbox {
3094
3120
  height: calc(100% - 47px);
3095
3121
  }
3096
3122
 
3123
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3124
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3125
+ height: calc(100% - 93px);
3126
+ }
3127
+
3128
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3129
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3130
+ height: calc(100% - 36px);
3131
+ }
3132
+
3097
3133
  .e-listbox-wrapper .e-icons,
3098
3134
  .e-listbox-container .e-icons {
3099
3135
  color: #605e5c;
@@ -2459,6 +2459,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2459
2459
  .e-listbox-container * {
2460
2460
  box-sizing: border-box;
2461
2461
  }
2462
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2463
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2464
+ width: 87% !important;
2465
+ }
2462
2466
  .e-listbox-wrapper:focus,
2463
2467
  .e-listbox-container:focus {
2464
2468
  outline: none;
@@ -2689,8 +2693,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2689
2693
  text-indent: 0;
2690
2694
  vertical-align: middle;
2691
2695
  }
2692
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2693
- .e-listbox-container.e-right .e-checkbox-wrapper {
2696
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2697
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2694
2698
  position: absolute;
2695
2699
  right: 0;
2696
2700
  top: 30%;
@@ -2809,6 +2813,12 @@ ejs-listbox {
2809
2813
  list-style-type: none;
2810
2814
  margin-bottom: 10px;
2811
2815
  }
2816
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2817
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2818
+ position: absolute;
2819
+ right: 0;
2820
+ top: 30%;
2821
+ }
2812
2822
 
2813
2823
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2814
2824
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2819,6 +2829,12 @@ ejs-listbox {
2819
2829
  margin-left: 15px;
2820
2830
  }
2821
2831
 
2832
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2833
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2834
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2835
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2836
+ width: 83% !important;
2837
+ }
2822
2838
  .e-bigger .e-listbox-wrapper .e-list-item,
2823
2839
  .e-listbox-wrapper.e-bigger .e-list-item,
2824
2840
  .e-bigger .e-listbox-container .e-list-item,
@@ -2916,6 +2932,16 @@ ejs-listbox {
2916
2932
  height: calc(100% - 59px);
2917
2933
  }
2918
2934
 
2935
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2936
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2937
+ height: calc(100% - 104px);
2938
+ }
2939
+
2940
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2941
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2942
+ height: calc(100% - 45px);
2943
+ }
2944
+
2919
2945
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2920
2946
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2921
2947
  height: calc(100% - 55px);
@@ -2945,6 +2971,16 @@ ejs-listbox {
2945
2971
  height: calc(100% - 51px);
2946
2972
  }
2947
2973
 
2974
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2975
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2976
+ height: calc(100% - 87px);
2977
+ }
2978
+
2979
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2980
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
2981
+ height: calc(100% - 36px);
2982
+ }
2983
+
2948
2984
  .e-listbox-wrapper .e-icons,
2949
2985
  .e-listbox-container .e-icons {
2950
2986
  color: #000;
@@ -2465,6 +2465,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2465
2465
  .e-listbox-container * {
2466
2466
  box-sizing: border-box;
2467
2467
  }
2468
+ .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2469
+ .e-listbox-container.e-listboxtool-container .e-list-wrap {
2470
+ width: 87% !important;
2471
+ }
2468
2472
  .e-listbox-wrapper:focus,
2469
2473
  .e-listbox-container:focus {
2470
2474
  outline: none;
@@ -2695,8 +2699,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2695
2699
  text-indent: 0;
2696
2700
  vertical-align: middle;
2697
2701
  }
2698
- .e-listbox-wrapper.e-right .e-checkbox-wrapper,
2699
- .e-listbox-container.e-right .e-checkbox-wrapper {
2702
+ .e-listbox-wrapper.e-checkbox-right .e-checkbox-wrapper,
2703
+ .e-listbox-container.e-checkbox-right .e-checkbox-wrapper {
2700
2704
  position: absolute;
2701
2705
  right: 0;
2702
2706
  top: 30%;
@@ -2815,6 +2819,12 @@ ejs-listbox {
2815
2819
  list-style-type: none;
2816
2820
  margin-bottom: 10px;
2817
2821
  }
2822
+ .e-listboxtool-wrapper.e-checkbox-right .e-checkbox-wrapper,
2823
+ .e-listboxtool-container.e-checkbox-right .e-checkbox-wrapper {
2824
+ position: absolute;
2825
+ right: 0;
2826
+ top: 30%;
2827
+ }
2818
2828
 
2819
2829
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2820
2830
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2825,6 +2835,12 @@ ejs-listbox {
2825
2835
  margin-left: 15px;
2826
2836
  }
2827
2837
 
2838
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2839
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2840
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2841
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2842
+ width: 83% !important;
2843
+ }
2828
2844
  .e-bigger .e-listbox-wrapper .e-list-item,
2829
2845
  .e-listbox-wrapper.e-bigger .e-list-item,
2830
2846
  .e-bigger .e-listbox-container .e-list-item,
@@ -2922,6 +2938,16 @@ ejs-listbox {
2922
2938
  height: calc(100% - 59px);
2923
2939
  }
2924
2940
 
2941
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2942
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2943
+ height: calc(100% - 104px);
2944
+ }
2945
+
2946
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2947
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2948
+ height: calc(100% - 45px);
2949
+ }
2950
+
2925
2951
  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2926
2952
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2927
2953
  height: calc(100% - 55px);
@@ -2951,6 +2977,16 @@ ejs-listbox {
2951
2977
  height: calc(100% - 51px);
2952
2978
  }
2953
2979
 
2980
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2981
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2982
+ height: calc(100% - 87px);
2983
+ }
2984
+
2985
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2986
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
2987
+ height: calc(100% - 36px);
2988
+ }
2989
+
2954
2990
  .e-listbox-wrapper .e-icons,
2955
2991
  .e-listbox-container .e-icons {
2956
2992
  color: #fff;
@@ -113,7 +113,11 @@ $badge-bgcolor: $brand-primary !default;
113
113
 
114
114
  $select-all-border-color: $grey-88 !default;
115
115
 
116
- $listbox-filter-height: calc(100% - 52px) !default;
117
116
  $listbox-filter-small-height: calc(100% - 46px) !default;
118
117
  $listbox-filter-bigger-small-height: calc(100% - 54px) !default;
118
+ $listbox-select-height: calc(100% - 40px) !default;
119
+ $listbox-select-bigger-height: calc(100% - 48px) !default;
120
+ $listbox-filterselect-height: calc(100% - 92px) !default;
121
+ $listbox-filterselect-bigger-height: calc(100% - 106px) !default;
122
+ $listbox-filter-height: calc(100% - 52px) !default;
119
123
  $listbox-filter-bigger-height: calc(100% - 58px) !default;
@@ -107,7 +107,11 @@ $badge-bgcolor: $brand-primary !default;
107
107
 
108
108
  $select-all-border-color: $grey-e6 !default;
109
109
 
110
- $listbox-filter-height: calc(100% - 52px) !default;
111
110
  $listbox-filter-small-height: calc(100% - 46px) !default;
112
111
  $listbox-filter-bigger-small-height: calc(100% - 54px) !default;
112
+ $listbox-select-height: calc(100% - 40px) !default;
113
+ $listbox-select-bigger-height: calc(100% - 48px) !default;
114
+ $listbox-filterselect-height: calc(100% - 92px) !default;
115
+ $listbox-filterselect-bigger-height: calc(100% - 106px) !default;
116
+ $listbox-filter-height: calc(100% - 52px) !default;
113
117
  $listbox-filter-bigger-height: calc(100% - 58px) !default;
@@ -112,7 +112,11 @@ $badge-bgcolor: $primary !default;
112
112
 
113
113
  $select-all-border-color: rgba($black, .15);
114
114
 
115
- $listbox-filter-height: calc(100% - 39px) !default;
116
115
  $listbox-filter-small-height: calc(100% - 32px) !default;
117
116
  $listbox-filter-bigger-small-height: calc(100% - 44px) !default;
117
+ $listbox-select-height: calc(100% - 40px) !default;
118
+ $listbox-select-bigger-height: calc(100% - 50px) !default;
119
+ $listbox-filterselect-height: calc(100% - 79px) !default;
120
+ $listbox-filterselect-bigger-height: calc(100% - 96px) !default;
121
+ $listbox-filter-height: calc(100% - 39px) !default;
118
122
  $listbox-filter-bigger-height: calc(100% - 46px) !default;
@@ -111,3 +111,10 @@ $listbox-groupheader-border: $black !default;
111
111
  $listbox-groupheader-icon: $icon-color !default;
112
112
  $listbox-template-multiline-header-color: $content-text-color !default;
113
113
  $listbox-template-multiline-content-color: $content-text-color-alt2 !default;
114
+
115
+ $listbox-select-height: calc(100% - 36px) !default;
116
+ $listbox-select-bigger-height: calc(100% - 40px) !default;
117
+ $listbox-filterselect-height: calc(100% - 86px) !default;
118
+ $listbox-filterselect-bigger-height: calc(100% - 96px) !default;
119
+ $listbox-filter-height: calc(100% - 50px) !default;
120
+ $listbox-filter-bigger-height: calc(100% - 56px) !default;