@syncfusion/ej2-dropdowns 20.1.61 → 20.2.39

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 (95) hide show
  1. package/CHANGELOG.md +3 -77
  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 +95 -96
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +58 -59
  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 +8 -8
  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.d.ts +1 -1
  26. package/src/list-box/list-box.js +13 -14
  27. package/src/multi-select/multi-select-model.d.ts +1 -1
  28. package/src/multi-select/multi-select.d.ts +2 -1
  29. package/src/multi-select/multi-select.js +28 -26
  30. package/styles/auto-complete/_fusionnew-definition.scss +2 -0
  31. package/styles/auto-complete/_material3-definition.scss +2 -0
  32. package/styles/bootstrap-dark.css +69 -11
  33. package/styles/bootstrap.css +69 -11
  34. package/styles/bootstrap4.css +69 -11
  35. package/styles/bootstrap5-dark.css +70 -12
  36. package/styles/bootstrap5.css +70 -12
  37. package/styles/combo-box/_fusionnew-definition.scss +2 -0
  38. package/styles/combo-box/_material3-definition.scss +2 -0
  39. package/styles/drop-down-base/_fusionnew-definition.scss +111 -0
  40. package/styles/drop-down-base/_material3-definition.scss +111 -0
  41. package/styles/drop-down-list/_fusionnew-definition.scss +201 -0
  42. package/styles/drop-down-list/_material3-definition.scss +201 -0
  43. package/styles/drop-down-list/icons/_fusionnew.scss +14 -0
  44. package/styles/drop-down-list/icons/_material3.scss +14 -0
  45. package/styles/drop-down-tree/_fusionnew-definition.scss +60 -0
  46. package/styles/drop-down-tree/_material3-definition.scss +60 -0
  47. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -0
  48. package/styles/drop-down-tree/icons/_material3.scss +11 -0
  49. package/styles/fabric-dark.css +69 -11
  50. package/styles/fabric.css +69 -11
  51. package/styles/fluent-dark.css +73 -15
  52. package/styles/fluent.css +70 -12
  53. package/styles/highcontrast-light.css +69 -11
  54. package/styles/highcontrast.css +69 -11
  55. package/styles/list-box/_bootstrap-dark-definition.scss +5 -1
  56. package/styles/list-box/_bootstrap-definition.scss +5 -1
  57. package/styles/list-box/_bootstrap4-definition.scss +5 -1
  58. package/styles/list-box/_bootstrap5-definition.scss +7 -2
  59. package/styles/list-box/_fabric-dark-definition.scss +5 -1
  60. package/styles/list-box/_fabric-definition.scss +5 -1
  61. package/styles/list-box/_fluent-definition.scss +7 -2
  62. package/styles/list-box/_fusionnew-definition.scss +113 -0
  63. package/styles/list-box/_highcontrast-definition.scss +5 -1
  64. package/styles/list-box/_highcontrast-light-definition.scss +5 -1
  65. package/styles/list-box/_layout.scss +45 -1
  66. package/styles/list-box/_material-dark-definition.scss +6 -2
  67. package/styles/list-box/_material-definition.scss +6 -2
  68. package/styles/list-box/_material3-definition.scss +119 -0
  69. package/styles/list-box/_tailwind-definition.scss +6 -2
  70. package/styles/list-box/_theme.scss +40 -8
  71. package/styles/list-box/bootstrap-dark.css +59 -11
  72. package/styles/list-box/bootstrap.css +69 -11
  73. package/styles/list-box/bootstrap4.css +69 -11
  74. package/styles/list-box/bootstrap5-dark.css +70 -12
  75. package/styles/list-box/bootstrap5.css +70 -12
  76. package/styles/list-box/fabric-dark.css +59 -11
  77. package/styles/list-box/fabric.css +69 -11
  78. package/styles/list-box/fluent-dark.css +73 -15
  79. package/styles/list-box/fluent.css +70 -12
  80. package/styles/list-box/highcontrast-light.css +59 -11
  81. package/styles/list-box/highcontrast.css +69 -11
  82. package/styles/list-box/icons/_fusionnew.scss +25 -0
  83. package/styles/list-box/icons/_material3.scss +25 -0
  84. package/styles/list-box/material-dark.css +60 -12
  85. package/styles/list-box/material.css +70 -12
  86. package/styles/list-box/tailwind-dark.css +70 -12
  87. package/styles/list-box/tailwind.css +70 -12
  88. package/styles/material-dark.css +70 -12
  89. package/styles/material.css +70 -12
  90. package/styles/multi-select/_fusionnew-definition.scss +219 -0
  91. package/styles/multi-select/_material3-definition.scss +219 -0
  92. package/styles/multi-select/icons/_fusionnew.scss +27 -0
  93. package/styles/multi-select/icons/_material3.scss +27 -0
  94. package/styles/tailwind-dark.css +70 -12
  95. package/styles/tailwind.css +70 -12
@@ -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%;
@@ -2903,9 +2907,9 @@ ejs-listbox {
2903
2907
  -ms-flex-align: center;
2904
2908
  align-items: center;
2905
2909
  background-color: #0078d4;
2906
- border: 1px solid #fff;
2910
+ border: 1px solid #1b1a19;
2907
2911
  border-radius: 50%;
2908
- color: #fff;
2912
+ color: #1b1a19;
2909
2913
  display: -ms-flexbox;
2910
2914
  display: flex;
2911
2915
  font-size: 12px;
@@ -2958,6 +2962,22 @@ 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
+ }
2971
+
2972
+ .e-listboxtool-container .e-left {
2973
+ -ms-flex-direction: row-reverse;
2974
+ flex-direction: row-reverse;
2975
+ }
2976
+
2977
+ .e-listboxtool-wrapper .e-left {
2978
+ -ms-flex-direction: column-reverse;
2979
+ flex-direction: column-reverse;
2980
+ }
2961
2981
 
2962
2982
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2963
2983
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2968,6 +2988,12 @@ ejs-listbox {
2968
2988
  margin-left: 15px;
2969
2989
  }
2970
2990
 
2991
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2992
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2993
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2994
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2995
+ width: 80% !important;
2996
+ }
2971
2997
  .e-bigger .e-listbox-wrapper .e-list-item,
2972
2998
  .e-listbox-wrapper.e-bigger .e-list-item,
2973
2999
  .e-bigger .e-listbox-container .e-list-item,
@@ -3055,21 +3081,48 @@ ejs-listbox {
3055
3081
  .e-listbox-container.e-bigger .e-list-header .e-text {
3056
3082
  font-size: 14px;
3057
3083
  }
3058
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3059
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
3084
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
3085
+ height: calc(100% - 57px);
3086
+ }
3087
+
3088
+ .e-listbox-container.e-filter-list .e-list-wrap {
3089
+ height: calc(100% - 57px) !important;
3090
+ }
3091
+
3092
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
3060
3093
  height: calc(100% - 45px);
3061
3094
  }
3062
3095
 
3063
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3064
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3065
- height: calc(100% - 55px);
3096
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
3097
+ height: calc(100% - 45px) !important;
3098
+ }
3099
+
3100
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3101
+ height: calc(100% - 65px);
3102
+ }
3103
+
3104
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3105
+ height: calc(100% - 65px) !important;
3106
+ }
3107
+
3108
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3109
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3110
+ height: calc(100% - 113px);
3066
3111
  }
3067
3112
 
3068
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3069
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3113
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3114
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
3115
+ height: calc(100% - 48px);
3116
+ }
3117
+
3118
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3070
3119
  height: calc(100% - 45px);
3071
3120
  }
3072
3121
 
3122
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3123
+ height: calc(100% - 45px) !important;
3124
+ }
3125
+
3073
3126
  .e-listbox-wrapper,
3074
3127
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
3075
3128
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -3089,9 +3142,14 @@ ejs-listbox {
3089
3142
  font-size: 12px;
3090
3143
  }
3091
3144
 
3092
- .e-listbox-wrapper.e-filter-list .e-list-parent,
3093
- .e-listbox-container.e-filter-list .e-list-parent {
3094
- height: calc(100% - 47px);
3145
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3146
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3147
+ height: calc(100% - 93px);
3148
+ }
3149
+
3150
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3151
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3152
+ height: calc(100% - 36px);
3095
3153
  }
3096
3154
 
3097
3155
  .e-listbox-wrapper .e-icons,
@@ -3141,7 +3199,7 @@ ejs-listbox {
3141
3199
  .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3142
3200
  background-color: #0078d4;
3143
3201
  border-color: transparent;
3144
- color: #fff;
3202
+ color: #1b1a19;
3145
3203
  }
3146
3204
 
3147
3205
  .e-listbox-wrapper .e-list-group-item,
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,22 @@ 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
+ }
2971
+
2972
+ .e-listboxtool-container .e-left {
2973
+ -ms-flex-direction: row-reverse;
2974
+ flex-direction: row-reverse;
2975
+ }
2976
+
2977
+ .e-listboxtool-wrapper .e-left {
2978
+ -ms-flex-direction: column-reverse;
2979
+ flex-direction: column-reverse;
2980
+ }
2961
2981
 
2962
2982
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2963
2983
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2968,6 +2988,12 @@ ejs-listbox {
2968
2988
  margin-left: 15px;
2969
2989
  }
2970
2990
 
2991
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2992
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2993
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2994
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2995
+ width: 80% !important;
2996
+ }
2971
2997
  .e-bigger .e-listbox-wrapper .e-list-item,
2972
2998
  .e-listbox-wrapper.e-bigger .e-list-item,
2973
2999
  .e-bigger .e-listbox-container .e-list-item,
@@ -3055,21 +3081,48 @@ ejs-listbox {
3055
3081
  .e-listbox-container.e-bigger .e-list-header .e-text {
3056
3082
  font-size: 14px;
3057
3083
  }
3058
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3059
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
3084
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
3085
+ height: calc(100% - 57px);
3086
+ }
3087
+
3088
+ .e-listbox-container.e-filter-list .e-list-wrap {
3089
+ height: calc(100% - 57px) !important;
3090
+ }
3091
+
3092
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
3060
3093
  height: calc(100% - 45px);
3061
3094
  }
3062
3095
 
3063
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3064
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3065
- height: calc(100% - 55px);
3096
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
3097
+ height: calc(100% - 45px) !important;
3098
+ }
3099
+
3100
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3101
+ height: calc(100% - 65px);
3102
+ }
3103
+
3104
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3105
+ height: calc(100% - 65px) !important;
3106
+ }
3107
+
3108
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3109
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3110
+ height: calc(100% - 113px);
3066
3111
  }
3067
3112
 
3068
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3069
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3113
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3114
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
3115
+ height: calc(100% - 48px);
3116
+ }
3117
+
3118
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3070
3119
  height: calc(100% - 45px);
3071
3120
  }
3072
3121
 
3122
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3123
+ height: calc(100% - 45px) !important;
3124
+ }
3125
+
3073
3126
  .e-listbox-wrapper,
3074
3127
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
3075
3128
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -3089,9 +3142,14 @@ ejs-listbox {
3089
3142
  font-size: 12px;
3090
3143
  }
3091
3144
 
3092
- .e-listbox-wrapper.e-filter-list .e-list-parent,
3093
- .e-listbox-container.e-filter-list .e-list-parent {
3094
- height: calc(100% - 47px);
3145
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3146
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3147
+ height: calc(100% - 93px);
3148
+ }
3149
+
3150
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3151
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3152
+ height: calc(100% - 36px);
3095
3153
  }
3096
3154
 
3097
3155
  .e-listbox-wrapper .e-icons,
@@ -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,22 @@ 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
+ }
2822
+
2823
+ .e-listboxtool-container .e-left {
2824
+ -ms-flex-direction: row-reverse;
2825
+ flex-direction: row-reverse;
2826
+ }
2827
+
2828
+ .e-listboxtool-wrapper .e-left {
2829
+ -ms-flex-direction: column-reverse;
2830
+ flex-direction: column-reverse;
2831
+ }
2812
2832
 
2813
2833
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2814
2834
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2819,6 +2839,12 @@ ejs-listbox {
2819
2839
  margin-left: 15px;
2820
2840
  }
2821
2841
 
2842
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2843
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2844
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2845
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2846
+ width: 83% !important;
2847
+ }
2822
2848
  .e-bigger .e-listbox-wrapper .e-list-item,
2823
2849
  .e-listbox-wrapper.e-bigger .e-list-item,
2824
2850
  .e-bigger .e-listbox-container .e-list-item,
@@ -2906,21 +2932,48 @@ ejs-listbox {
2906
2932
  .e-listbox-container.e-bigger .e-list-header .e-text {
2907
2933
  font-size: 15px;
2908
2934
  }
2909
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2910
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
2935
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
2936
+ height: calc(100% - 51px);
2937
+ }
2938
+
2939
+ .e-listbox-container.e-filter-list .e-list-wrap {
2940
+ height: calc(100% - 51px) !important;
2941
+ }
2942
+
2943
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
2911
2944
  height: calc(100% - 45px);
2912
2945
  }
2913
2946
 
2914
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2915
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2947
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
2948
+ height: calc(100% - 45px) !important;
2949
+ }
2950
+
2951
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2916
2952
  height: calc(100% - 59px);
2917
2953
  }
2918
2954
 
2919
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2920
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2955
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2956
+ height: calc(100% - 59px) !important;
2957
+ }
2958
+
2959
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2960
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2961
+ height: calc(100% - 104px);
2962
+ }
2963
+
2964
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2965
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2966
+ height: calc(100% - 45px);
2967
+ }
2968
+
2969
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2921
2970
  height: calc(100% - 55px);
2922
2971
  }
2923
2972
 
2973
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2974
+ height: calc(100% - 55px) !important;
2975
+ }
2976
+
2924
2977
  .e-listbox-wrapper,
2925
2978
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2926
2979
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2940,9 +2993,14 @@ ejs-listbox {
2940
2993
  font-size: 14px;
2941
2994
  }
2942
2995
 
2943
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2944
- .e-listbox-container.e-filter-list .e-list-parent {
2945
- height: calc(100% - 51px);
2996
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2997
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2998
+ height: calc(100% - 87px);
2999
+ }
3000
+
3001
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3002
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3003
+ height: calc(100% - 36px);
2946
3004
  }
2947
3005
 
2948
3006
  .e-listbox-wrapper .e-icons,
@@ -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,22 @@ 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
+ }
2828
+
2829
+ .e-listboxtool-container .e-left {
2830
+ -ms-flex-direction: row-reverse;
2831
+ flex-direction: row-reverse;
2832
+ }
2833
+
2834
+ .e-listboxtool-wrapper .e-left {
2835
+ -ms-flex-direction: column-reverse;
2836
+ flex-direction: column-reverse;
2837
+ }
2818
2838
 
2819
2839
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2820
2840
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
@@ -2825,6 +2845,12 @@ ejs-listbox {
2825
2845
  margin-left: 15px;
2826
2846
  }
2827
2847
 
2848
+ .e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
2849
+ .e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
2850
+ .e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
2851
+ .e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
2852
+ width: 83% !important;
2853
+ }
2828
2854
  .e-bigger .e-listbox-wrapper .e-list-item,
2829
2855
  .e-listbox-wrapper.e-bigger .e-list-item,
2830
2856
  .e-bigger .e-listbox-container .e-list-item,
@@ -2912,21 +2938,48 @@ ejs-listbox {
2912
2938
  .e-listbox-container.e-bigger .e-list-header .e-text {
2913
2939
  font-size: 15px;
2914
2940
  }
2915
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2916
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
2941
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
2942
+ height: calc(100% - 51px);
2943
+ }
2944
+
2945
+ .e-listbox-container.e-filter-list .e-list-wrap {
2946
+ height: calc(100% - 51px) !important;
2947
+ }
2948
+
2949
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
2917
2950
  height: calc(100% - 45px);
2918
2951
  }
2919
2952
 
2920
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2921
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2953
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
2954
+ height: calc(100% - 45px) !important;
2955
+ }
2956
+
2957
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2922
2958
  height: calc(100% - 59px);
2923
2959
  }
2924
2960
 
2925
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2926
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2961
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2962
+ height: calc(100% - 59px) !important;
2963
+ }
2964
+
2965
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2966
+ .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2967
+ height: calc(100% - 104px);
2968
+ }
2969
+
2970
+ .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
2971
+ .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
2972
+ height: calc(100% - 45px);
2973
+ }
2974
+
2975
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2927
2976
  height: calc(100% - 55px);
2928
2977
  }
2929
2978
 
2979
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2980
+ height: calc(100% - 55px) !important;
2981
+ }
2982
+
2930
2983
  .e-listbox-wrapper,
2931
2984
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2932
2985
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2946,9 +2999,14 @@ ejs-listbox {
2946
2999
  font-size: 14px;
2947
3000
  }
2948
3001
 
2949
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2950
- .e-listbox-container.e-filter-list .e-list-parent {
2951
- height: calc(100% - 51px);
3002
+ .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3003
+ .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3004
+ height: calc(100% - 87px);
3005
+ }
3006
+
3007
+ .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
3008
+ .e-listbox-container .e-selectall-parent + .e-list-parent {
3009
+ height: calc(100% - 36px);
2952
3010
  }
2953
3011
 
2954
3012
  .e-listbox-wrapper .e-icons,
@@ -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;
@@ -70,10 +70,8 @@ $listbox-template-multiline-header-font-size: $text-sm !default;
70
70
  $listbox-template-multiline-padding: 4px !default;
71
71
  $listbox-template-multiline-content-font-size: $text-sm !default;
72
72
  $listbox-template-multiline-avatar-top: 0 !default;
73
- $listbox-filter-height: calc(100% - 47px) !default;
74
73
  $listbox-filter-small-height: calc(100% - 45px) !default;
75
74
  $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
76
- $listbox-filter-bigger-height: calc(100% - 55px) !default;
77
75
  $listbox-item-height: 36px !default;
78
76
 
79
77
  $listbox-border-color: $border-light;
@@ -111,3 +109,10 @@ $listbox-groupheader-border: $black !default;
111
109
  $listbox-groupheader-icon: $icon-color !default;
112
110
  $listbox-template-multiline-header-color: $content-text-color !default;
113
111
  $listbox-template-multiline-content-color: $content-text-color-alt2 !default;
112
+
113
+ $listbox-select-height: calc(100% - 36px) !default;
114
+ $listbox-select-bigger-height: calc(100% - 40px) !default;
115
+ $listbox-filterselect-height: calc(100% - 86px) !default;
116
+ $listbox-filterselect-bigger-height: calc(100% - 96px) !default;
117
+ $listbox-filter-height: calc(100% - 50px) !default;
118
+ $listbox-filter-bigger-height: calc(100% - 56px) !default;
@@ -113,7 +113,11 @@ $badge-bgcolor: $theme-primary !default;
113
113
 
114
114
  $select-all-border-color: $neutral-light !default;
115
115
 
116
- $listbox-filter-height: calc(100% - 51px) !default;
117
116
  $listbox-filter-small-height: calc(100% - 45px) !default;
118
117
  $listbox-filter-bigger-small-height: calc(100% - 55px) !default;
118
+ $listbox-select-height: calc(100% - 36px) !default;
119
+ $listbox-select-bigger-height: calc(100% - 45px) !default;
120
+ $listbox-filterselect-height: calc(100% - 87px) !default;
121
+ $listbox-filterselect-bigger-height: calc(100% - 104px) !default;
122
+ $listbox-filter-height: calc(100% - 51px) !default;
119
123
  $listbox-filter-bigger-height: calc(100% - 59px) !default;
@@ -107,7 +107,11 @@ $badge-bgcolor: $theme-primary !default;
107
107
 
108
108
  $select-all-border-color: $neutral-light !default;
109
109
 
110
- $listbox-filter-height: calc(100% - 51px) !default;
111
110
  $listbox-filter-small-height: calc(100% - 45px) !default;
112
111
  $listbox-filter-bigger-small-height: calc(100% - 55px) !default;
112
+ $listbox-select-height: calc(100% - 36px) !default;
113
+ $listbox-select-bigger-height: calc(100% - 45px) !default;
114
+ $listbox-filterselect-height: calc(100% - 87px) !default;
115
+ $listbox-filterselect-bigger-height: calc(100% - 104px) !default;
116
+ $listbox-filter-height: calc(100% - 51px) !default;
113
117
  $listbox-filter-bigger-height: calc(100% - 59px) !default;
@@ -70,10 +70,8 @@ $listbox-template-multiline-header-font-size: $text-sm !default;
70
70
  $listbox-template-multiline-padding: 4px !default;
71
71
  $listbox-template-multiline-content-font-size: $text-sm !default;
72
72
  $listbox-template-multiline-avatar-top: 0 !default;
73
- $listbox-filter-height: calc(100% - 47px) !default;
74
73
  $listbox-filter-small-height: calc(100% - 45px) !default;
75
74
  $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
76
- $listbox-filter-bigger-height: calc(100% - 55px) !default;
77
75
  $listbox-item-height: 36px !default;
78
76
 
79
77
  $listbox-border-color: $border-light;
@@ -111,3 +109,10 @@ $listbox-groupheader-border: $border-light !default;
111
109
  $listbox-groupheader-icon: $icon-color !default;
112
110
  $listbox-template-multiline-header-color: $content-text-color !default;
113
111
  $listbox-template-multiline-content-color: $content-text-color-alt2 !default;
112
+
113
+ $listbox-select-height: calc(100% - 36px) !default;
114
+ $listbox-select-bigger-height: calc(100% - 48px) !default;
115
+ $listbox-filterselect-height: calc(100% - 93px) !default;
116
+ $listbox-filterselect-bigger-height: calc(100% - 113px) !default;
117
+ $listbox-filter-height: calc(100% - 57px) !default;
118
+ $listbox-filter-bigger-height: calc(100% - 65px) !default;