@syncfusion/ej2-dropdowns 20.2.36 → 20.2.40

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 (50) hide show
  1. package/CHANGELOG.md +16 -0
  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 +40 -6
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +40 -6
  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/package.json +11 -11
  12. package/src/drop-down-list/drop-down-list.js +22 -1
  13. package/src/drop-down-tree/drop-down-tree.js +2 -1
  14. package/src/list-box/list-box.js +13 -1
  15. package/src/multi-select/multi-select.js +3 -3
  16. package/styles/bootstrap-dark.css +33 -11
  17. package/styles/bootstrap.css +33 -11
  18. package/styles/bootstrap4.css +33 -11
  19. package/styles/bootstrap5-dark.css +34 -12
  20. package/styles/bootstrap5.css +34 -12
  21. package/styles/fabric-dark.css +33 -11
  22. package/styles/fabric.css +33 -11
  23. package/styles/fluent-dark.css +37 -15
  24. package/styles/fluent.css +34 -12
  25. package/styles/highcontrast-light.css +33 -11
  26. package/styles/highcontrast.css +33 -11
  27. package/styles/list-box/_bootstrap5-definition.scss +0 -2
  28. package/styles/list-box/_fluent-definition.scss +0 -2
  29. package/styles/list-box/_layout.scss +9 -0
  30. package/styles/list-box/_tailwind-definition.scss +0 -2
  31. package/styles/list-box/_theme.scss +23 -10
  32. package/styles/list-box/bootstrap-dark.css +33 -11
  33. package/styles/list-box/bootstrap.css +33 -11
  34. package/styles/list-box/bootstrap4.css +33 -11
  35. package/styles/list-box/bootstrap5-dark.css +34 -12
  36. package/styles/list-box/bootstrap5.css +34 -12
  37. package/styles/list-box/fabric-dark.css +33 -11
  38. package/styles/list-box/fabric.css +33 -11
  39. package/styles/list-box/fluent-dark.css +37 -15
  40. package/styles/list-box/fluent.css +34 -12
  41. package/styles/list-box/highcontrast-light.css +33 -11
  42. package/styles/list-box/highcontrast.css +33 -11
  43. package/styles/list-box/material-dark.css +33 -11
  44. package/styles/list-box/material.css +33 -11
  45. package/styles/list-box/tailwind-dark.css +34 -12
  46. package/styles/list-box/tailwind.css +34 -12
  47. package/styles/material-dark.css +33 -11
  48. package/styles/material.css +33 -11
  49. package/styles/tailwind-dark.css +34 -12
  50. package/styles/tailwind.css +34 -12
package/styles/fabric.css CHANGED
@@ -2710,6 +2710,16 @@ ejs-listbox {
2710
2710
  top: 30%;
2711
2711
  }
2712
2712
 
2713
+ .e-listboxtool-container .e-left {
2714
+ -ms-flex-direction: row-reverse;
2715
+ flex-direction: row-reverse;
2716
+ }
2717
+
2718
+ .e-listboxtool-wrapper .e-left {
2719
+ -ms-flex-direction: column-reverse;
2720
+ flex-direction: column-reverse;
2721
+ }
2722
+
2713
2723
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2714
2724
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
2715
2725
  margin-right: 15px;
@@ -2812,16 +2822,30 @@ ejs-listbox {
2812
2822
  .e-listbox-container.e-bigger .e-list-header .e-text {
2813
2823
  font-size: 15px;
2814
2824
  }
2815
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2816
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
2825
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
2826
+ height: calc(100% - 51px);
2827
+ }
2828
+
2829
+ .e-listbox-container.e-filter-list .e-list-wrap {
2830
+ height: calc(100% - 51px) !important;
2831
+ }
2832
+
2833
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
2817
2834
  height: calc(100% - 45px);
2818
2835
  }
2819
2836
 
2820
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2821
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2837
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
2838
+ height: calc(100% - 45px) !important;
2839
+ }
2840
+
2841
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2822
2842
  height: calc(100% - 59px);
2823
2843
  }
2824
2844
 
2845
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2846
+ height: calc(100% - 59px) !important;
2847
+ }
2848
+
2825
2849
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2826
2850
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2827
2851
  height: calc(100% - 104px);
@@ -2832,11 +2856,14 @@ ejs-listbox {
2832
2856
  height: calc(100% - 45px);
2833
2857
  }
2834
2858
 
2835
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2836
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2859
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2837
2860
  height: calc(100% - 55px);
2838
2861
  }
2839
2862
 
2863
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2864
+ height: calc(100% - 55px) !important;
2865
+ }
2866
+
2840
2867
  .e-listbox-wrapper,
2841
2868
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2842
2869
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2856,11 +2883,6 @@ ejs-listbox {
2856
2883
  font-size: 14px;
2857
2884
  }
2858
2885
 
2859
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2860
- .e-listbox-container.e-filter-list .e-list-parent {
2861
- height: calc(100% - 51px);
2862
- }
2863
-
2864
2886
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2865
2887
  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2866
2888
  height: calc(100% - 87px);
@@ -2907,9 +2907,9 @@ ejs-listbox {
2907
2907
  -ms-flex-align: center;
2908
2908
  align-items: center;
2909
2909
  background-color: #0078d4;
2910
- border: 1px solid #fff;
2910
+ border: 1px solid #1b1a19;
2911
2911
  border-radius: 50%;
2912
- color: #fff;
2912
+ color: #1b1a19;
2913
2913
  display: -ms-flexbox;
2914
2914
  display: flex;
2915
2915
  font-size: 12px;
@@ -2969,6 +2969,16 @@ ejs-listbox {
2969
2969
  top: 30%;
2970
2970
  }
2971
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
+ }
2981
+
2972
2982
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2973
2983
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
2974
2984
  margin-right: 15px;
@@ -3071,14 +3081,28 @@ ejs-listbox {
3071
3081
  .e-listbox-container.e-bigger .e-list-header .e-text {
3072
3082
  font-size: 14px;
3073
3083
  }
3074
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3075
- .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 {
3076
3093
  height: calc(100% - 45px);
3077
3094
  }
3078
3095
 
3079
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3080
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3081
- 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;
3082
3106
  }
3083
3107
 
3084
3108
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -3091,11 +3115,14 @@ ejs-listbox {
3091
3115
  height: calc(100% - 48px);
3092
3116
  }
3093
3117
 
3094
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3095
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3118
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3096
3119
  height: calc(100% - 45px);
3097
3120
  }
3098
3121
 
3122
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3123
+ height: calc(100% - 45px) !important;
3124
+ }
3125
+
3099
3126
  .e-listbox-wrapper,
3100
3127
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
3101
3128
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -3115,11 +3142,6 @@ ejs-listbox {
3115
3142
  font-size: 12px;
3116
3143
  }
3117
3144
 
3118
- .e-listbox-wrapper.e-filter-list .e-list-parent,
3119
- .e-listbox-container.e-filter-list .e-list-parent {
3120
- height: calc(100% - 47px);
3121
- }
3122
-
3123
3145
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3124
3146
  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3125
3147
  height: calc(100% - 93px);
@@ -3177,7 +3199,7 @@ ejs-listbox {
3177
3199
  .e-listbox-container .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
3178
3200
  background-color: #0078d4;
3179
3201
  border-color: transparent;
3180
- color: #fff;
3202
+ color: #1b1a19;
3181
3203
  }
3182
3204
 
3183
3205
  .e-listbox-wrapper .e-list-group-item,
package/styles/fluent.css CHANGED
@@ -2969,6 +2969,16 @@ ejs-listbox {
2969
2969
  top: 30%;
2970
2970
  }
2971
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
+ }
2981
+
2972
2982
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2973
2983
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
2974
2984
  margin-right: 15px;
@@ -3071,14 +3081,28 @@ ejs-listbox {
3071
3081
  .e-listbox-container.e-bigger .e-list-header .e-text {
3072
3082
  font-size: 14px;
3073
3083
  }
3074
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3075
- .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 {
3076
3093
  height: calc(100% - 45px);
3077
3094
  }
3078
3095
 
3079
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3080
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3081
- 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;
3082
3106
  }
3083
3107
 
3084
3108
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -3091,11 +3115,14 @@ ejs-listbox {
3091
3115
  height: calc(100% - 48px);
3092
3116
  }
3093
3117
 
3094
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
3095
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
3118
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
3096
3119
  height: calc(100% - 45px);
3097
3120
  }
3098
3121
 
3122
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
3123
+ height: calc(100% - 45px) !important;
3124
+ }
3125
+
3099
3126
  .e-listbox-wrapper,
3100
3127
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
3101
3128
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -3115,11 +3142,6 @@ ejs-listbox {
3115
3142
  font-size: 12px;
3116
3143
  }
3117
3144
 
3118
- .e-listbox-wrapper.e-filter-list .e-list-parent,
3119
- .e-listbox-container.e-filter-list .e-list-parent {
3120
- height: calc(100% - 47px);
3121
- }
3122
-
3123
3145
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
3124
3146
  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
3125
3147
  height: calc(100% - 93px);
@@ -2820,6 +2820,16 @@ ejs-listbox {
2820
2820
  top: 30%;
2821
2821
  }
2822
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
+ }
2832
+
2823
2833
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2824
2834
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
2825
2835
  margin-right: 15px;
@@ -2922,16 +2932,30 @@ ejs-listbox {
2922
2932
  .e-listbox-container.e-bigger .e-list-header .e-text {
2923
2933
  font-size: 15px;
2924
2934
  }
2925
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2926
- .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 {
2927
2944
  height: calc(100% - 45px);
2928
2945
  }
2929
2946
 
2930
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2931
- .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 {
2932
2952
  height: calc(100% - 59px);
2933
2953
  }
2934
2954
 
2955
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2956
+ height: calc(100% - 59px) !important;
2957
+ }
2958
+
2935
2959
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2936
2960
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2937
2961
  height: calc(100% - 104px);
@@ -2942,11 +2966,14 @@ ejs-listbox {
2942
2966
  height: calc(100% - 45px);
2943
2967
  }
2944
2968
 
2945
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2946
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2969
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2947
2970
  height: calc(100% - 55px);
2948
2971
  }
2949
2972
 
2973
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2974
+ height: calc(100% - 55px) !important;
2975
+ }
2976
+
2950
2977
  .e-listbox-wrapper,
2951
2978
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2952
2979
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2966,11 +2993,6 @@ ejs-listbox {
2966
2993
  font-size: 14px;
2967
2994
  }
2968
2995
 
2969
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2970
- .e-listbox-container.e-filter-list .e-list-parent {
2971
- height: calc(100% - 51px);
2972
- }
2973
-
2974
2996
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2975
2997
  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2976
2998
  height: calc(100% - 87px);
@@ -2826,6 +2826,16 @@ ejs-listbox {
2826
2826
  top: 30%;
2827
2827
  }
2828
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
+ }
2838
+
2829
2839
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
2830
2840
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
2831
2841
  margin-right: 15px;
@@ -2928,16 +2938,30 @@ ejs-listbox {
2928
2938
  .e-listbox-container.e-bigger .e-list-header .e-text {
2929
2939
  font-size: 15px;
2930
2940
  }
2931
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
2932
- .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 {
2933
2950
  height: calc(100% - 45px);
2934
2951
  }
2935
2952
 
2936
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2937
- .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 {
2938
2958
  height: calc(100% - 59px);
2939
2959
  }
2940
2960
 
2961
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2962
+ height: calc(100% - 59px) !important;
2963
+ }
2964
+
2941
2965
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2942
2966
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2943
2967
  height: calc(100% - 104px);
@@ -2948,11 +2972,14 @@ ejs-listbox {
2948
2972
  height: calc(100% - 45px);
2949
2973
  }
2950
2974
 
2951
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
2952
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
2975
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
2953
2976
  height: calc(100% - 55px);
2954
2977
  }
2955
2978
 
2979
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
2980
+ height: calc(100% - 55px) !important;
2981
+ }
2982
+
2956
2983
  .e-listbox-wrapper,
2957
2984
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
2958
2985
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -2972,11 +2999,6 @@ ejs-listbox {
2972
2999
  font-size: 14px;
2973
3000
  }
2974
3001
 
2975
- .e-listbox-wrapper.e-filter-list .e-list-parent,
2976
- .e-listbox-container.e-filter-list .e-list-parent {
2977
- height: calc(100% - 51px);
2978
- }
2979
-
2980
3002
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
2981
3003
  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
2982
3004
  height: calc(100% - 87px);
@@ -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;
@@ -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;
@@ -398,6 +398,15 @@
398
398
  }
399
399
  }
400
400
 
401
+ // Blazor listbox class
402
+ .e-listboxtool-container .e-left {
403
+ flex-direction: row-reverse;
404
+ }
405
+
406
+ .e-listboxtool-wrapper .e-left {
407
+ flex-direction: column-reverse;
408
+ }
409
+
401
410
  .e-rtl.e-listboxtool-wrapper,
402
411
  .e-rtl.e-listboxtool-container {
403
412
  &.e-right {
@@ -71,10 +71,8 @@ $listbox-template-multiline-header-font-size: $text-sm !default;
71
71
  $listbox-template-multiline-padding: 4px !default;
72
72
  $listbox-template-multiline-content-font-size: $text-sm !default;
73
73
  $listbox-template-multiline-avatar-top: 0 !default;
74
- $listbox-filter-height: calc(100% - 47px) !default;
75
74
  $listbox-filter-small-height: calc(100% - 45px) !default;
76
75
  $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
77
- $listbox-filter-bigger-height: calc(100% - 55px) !default;
78
76
 
79
77
  $listbox-border-color: $border-light;
80
78
  $badge-color: $primary-text-color !default;
@@ -1,14 +1,28 @@
1
1
  @include export-module('listbox-theme') {
2
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
3
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
2
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
3
+ height: $listbox-filter-height;
4
+ }
5
+
6
+ .e-listbox-container.e-filter-list .e-list-wrap {
7
+ height: $listbox-filter-height !important; // sass-lint:disable-line no-important
8
+ }
9
+
10
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
4
11
  height: $listbox-filter-small-height;
5
12
  }
6
13
 
7
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
8
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
14
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
15
+ height: $listbox-filter-small-height !important; // sass-lint:disable-line no-important
16
+ }
17
+
18
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
9
19
  height: $listbox-filter-bigger-height;
10
20
  }
11
21
 
22
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
23
+ height: $listbox-filter-bigger-height !important; // sass-lint:disable-line no-important
24
+ }
25
+
12
26
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
13
27
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
14
28
  height: $listbox-filterselect-bigger-height;
@@ -19,11 +33,14 @@
19
33
  height: $listbox-select-bigger-height;
20
34
  }
21
35
 
22
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
23
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
36
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
24
37
  height: $listbox-filter-bigger-small-height;
25
38
  }
26
39
 
40
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
41
+ height: $listbox-filter-bigger-small-height !important; // sass-lint:disable-line no-important
42
+ }
43
+
27
44
  .e-listbox-wrapper,
28
45
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
29
46
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -57,10 +74,6 @@
57
74
  font-size: $listbox-header-font-size;
58
75
  }
59
76
 
60
- &.e-filter-list .e-list-parent {
61
- height: $listbox-filter-height;
62
- }
63
-
64
77
  &.e-filter-list .e-selectall-parent + .e-list-parent {
65
78
  height: $listbox-filterselect-height;
66
79
  }
@@ -408,6 +408,16 @@ ejs-listbox {
408
408
  top: 30%;
409
409
  }
410
410
 
411
+ .e-listboxtool-container .e-left {
412
+ -ms-flex-direction: row-reverse;
413
+ flex-direction: row-reverse;
414
+ }
415
+
416
+ .e-listboxtool-wrapper .e-left {
417
+ -ms-flex-direction: column-reverse;
418
+ flex-direction: column-reverse;
419
+ }
420
+
411
421
  .e-rtl.e-listboxtool-wrapper.e-right .e-listbox-tool,
412
422
  .e-rtl.e-listboxtool-container.e-right .e-listbox-tool {
413
423
  margin-right: 15px;
@@ -504,16 +514,30 @@ ejs-listbox {
504
514
  .e-listbox-container.e-bigger .e-list-header .e-text {
505
515
  font-size: 15px;
506
516
  }
507
- .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
508
- .e-small .e-listbox-container.e-filter-list .e-list-parent {
517
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
518
+ height: calc(100% - 52px);
519
+ }
520
+
521
+ .e-listbox-container.e-filter-list .e-list-wrap {
522
+ height: calc(100% - 52px) !important;
523
+ }
524
+
525
+ .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
509
526
  height: calc(100% - 46px);
510
527
  }
511
528
 
512
- .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
513
- .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
529
+ .e-small .e-listbox-container.e-filter-list .e-list-wrap {
530
+ height: calc(100% - 46px) !important;
531
+ }
532
+
533
+ .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
514
534
  height: calc(100% - 58px);
515
535
  }
516
536
 
537
+ .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
538
+ height: calc(100% - 58px) !important;
539
+ }
540
+
517
541
  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
518
542
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
519
543
  height: calc(100% - 106px);
@@ -524,11 +548,14 @@ ejs-listbox {
524
548
  height: calc(100% - 48px);
525
549
  }
526
550
 
527
- .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
528
- .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
551
+ .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
529
552
  height: calc(100% - 54px);
530
553
  }
531
554
 
555
+ .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
556
+ height: calc(100% - 54px) !important;
557
+ }
558
+
532
559
  .e-listbox-wrapper,
533
560
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
534
561
  .e-listboxtool-container.e-listbox-container .e-ul {
@@ -548,11 +575,6 @@ ejs-listbox {
548
575
  font-size: 14px;
549
576
  }
550
577
 
551
- .e-listbox-wrapper.e-filter-list .e-list-parent,
552
- .e-listbox-container.e-filter-list .e-list-parent {
553
- height: calc(100% - 52px);
554
- }
555
-
556
578
  .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
557
579
  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
558
580
  height: calc(100% - 92px);