@syncfusion/ej2-dropdowns 19.4.40 → 19.4.48

package/styles/drop-down-tree/_layout.scss

@@ -88,7 +88,7 @@
     &.e-show-chip {
 
       .e-chips-close {
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+        @if $ddt-skin-name != 'bootstrap5' {
           line-height: $ddt-chip-icon-line-height;
         }
         min-height: $ddt-chip-close-height;
@@ -847,14 +847,22 @@
             right: 33px;
           }
           @else if $ddt-skin-name == 'bootstrap5' {
-            bottom: 6px;
-            right: 33px;
+            bottom: auto;
+            right: 36px;
           }
           @else {
             right: $ddt-dd-icon-bigger-width;
           }
         }
 
+        @if $ddt-skin-name == 'bootstrap5' {
+          &.e-show-chip {
+            &.e-show-dd-icon .e-clear-icon {
+              bottom: 0;
+            }
+          }
+        }
+
         .e-ddt-icon {
           bottom: $ddt-dd-icon-bigger-bottom;
         }
@@ -867,7 +875,7 @@
       }
 
       .e-clear-icon {
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' {
           min-width: 0;
           padding: 6px;
         }

package/styles/drop-down-tree/_tailwind-definition.scss

@@ -21,6 +21,7 @@ $ddt-big-chip-content-padding: 0 8px 0 0 !default;
 $ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
 $ddt-chip-close-font: 16px !default;
 $ddt-chip-close-height: 16px !default;
+$ddt-chip-icon-line-height: 10px !default;
 $ddt-chip-close-width: 16px !default;
 $ddt-last-chip-right-margin: 45px !default;
 $ddt-last-chip-bigger-right-margin: 52px !default;

package/styles/drop-down-tree/bootstrap5-dark.css

@@ -402,8 +402,16 @@
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
-  bottom: 6px;
-  right: 33px;
+  bottom: auto;
+  right: 36px;
+}
+
+.e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon {
+  bottom: 0;
 }
 
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
@@ -417,8 +425,7 @@
 .e-bigger .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper .e-clear-icon {
-  min-width: 0;
-  padding: 6px;
+  min-height: 36px;
 }
 
 .e-bigger .e-ddt.e-show-chip .e-chips-close,

package/styles/drop-down-tree/bootstrap5.css

@@ -402,8 +402,16 @@
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
-  bottom: 6px;
-  right: 33px;
+  bottom: auto;
+  right: 36px;
+}
+
+.e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon {
+  bottom: 0;
 }
 
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
@@ -417,8 +425,7 @@
 .e-bigger .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper .e-clear-icon {
-  min-width: 0;
-  padding: 6px;
+  min-height: 36px;
 }
 
 .e-bigger .e-ddt.e-show-chip .e-chips-close,

package/styles/drop-down-tree/icons/_bootstrap5.scss

@@ -1,11 +1,11 @@
-@include export-module('dropdowntree-bootstrap5-icons') {
-  .e-ddt {
-    .e-ddt-icon::before {
-      content: '\e734';
-    }
-
-    .e-chips-close::before {
-      content: '\e7e7';
-    }
-  }
-}
+@include export-module('dropdowntree-bootstrap5-icons') {
+  .e-ddt {
+    .e-ddt-icon::before {
+      content: '\e734';
+    }
+
+    .e-chips-close::before {
+      content: '\e7e7';
+    }
+  }
+}

package/styles/drop-down-tree/icons/_fluent.scss

@@ -0,0 +1,11 @@
+@include export-module('dropdowntree-fluent-icons') {
+  .e-ddt {
+    .e-ddt-icon::before {
+      content: '\e734';
+    }
+
+    .e-chips-close::before {
+      content: '\e7e7';
+    }
+  }
+}

package/styles/drop-down-tree/icons/_tailwind-dark.scss

@@ -1,11 +1,11 @@
-@include export-module('dropdowntree-tailwind-dark-icons') {
-  .e-ddt {
-    .e-ddt-icon::before {
-      content: '\e706';
-    }
-
-    .e-chips-close::before {
-      content: '\e771';
-    }
-  }
-}
+@include export-module('dropdowntree-tailwind-dark-icons') {
+  .e-ddt {
+    .e-ddt-icon::before {
+      content: '\e706';
+    }
+
+    .e-chips-close::before {
+      content: '\e771';
+    }
+  }
+}

package/styles/drop-down-tree/tailwind-dark.css

@@ -135,6 +135,7 @@
 }
 
 .e-ddt.e-show-chip .e-chips-close {
+  line-height: 10px;
   min-height: 16px;
   min-width: 16px;
   text-align: center;

package/styles/drop-down-tree/tailwind.css

@@ -135,6 +135,7 @@
 }
 
 .e-ddt.e-show-chip .e-chips-close {
+  line-height: 10px;
   min-height: 16px;
   min-width: 16px;
   text-align: center;

package/styles/fabric-dark.css

@@ -1306,11 +1306,13 @@ ejs-dropdownlist {
   padding: 9px 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
   width: 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
   height: 1px;
   min-height: 1px;
 }
@@ -1440,7 +1442,8 @@ ejs-dropdownlist {
   word-wrap: initial;
 }
 
-.e-multiselect.e-input-group .e-searcher .e-label-top {
+.e-multiselect.e-input-group .e-searcher .e-label-top,
+.e-multiselect.e-input-group .e-multi-searcher .e-label-top {
   top: 15px;
 }
 
@@ -2431,6 +2434,11 @@ ejs-multiselect {
   font-size: 10px;
 }
 
+.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
+  -webkit-text-fill-color: #6f6c6c;
+  color: #6f6c6c;
+}
+
 .e-listbox-tool .e-moveup::before {
   content: '\e651';
 }
@@ -3028,6 +3036,16 @@ ejs-listbox {
   height: calc(100% - 51px);
 }
 
+.e-listbox-wrapper.e-select-all .e-list-parent,
+.e-listbox-container.e-select-all .e-list-parent {
+  height: calc(100% - 36px);
+}
+
+.e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
+.e-listbox-container.e-filter-list.e-select-all .e-list-parent {
+  height: calc(100% - 87px);
+}
+
 .e-listbox-wrapper .e-icons,
 .e-listbox-container .e-icons {
   color: #dadada;

package/styles/fabric.css

@@ -1300,11 +1300,13 @@ ejs-dropdownlist {
   padding: 9px 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
   width: 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
   height: 1px;
   min-height: 1px;
 }
@@ -1434,7 +1436,8 @@ ejs-dropdownlist {
   word-wrap: initial;
 }
 
-.e-multiselect.e-input-group .e-searcher .e-label-top {
+.e-multiselect.e-input-group .e-searcher .e-label-top,
+.e-multiselect.e-input-group .e-multi-searcher .e-label-top {
   top: 15px;
 }
 
@@ -2425,6 +2428,11 @@ ejs-multiselect {
   font-size: 10px;
 }
 
+.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
+  -webkit-text-fill-color: #a6a6a6;
+  color: #a6a6a6;
+}
+
 .e-listbox-tool .e-moveup::before {
   content: '\e651';
 }
@@ -3022,6 +3030,16 @@ ejs-listbox {
   height: calc(100% - 51px);
 }
 
+.e-listbox-wrapper.e-select-all .e-list-parent,
+.e-listbox-container.e-select-all .e-list-parent {
+  height: calc(100% - 36px);
+}
+
+.e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
+.e-listbox-container.e-filter-list.e-select-all .e-list-parent {
+  height: calc(100% - 87px);
+}
+
 .e-listbox-wrapper .e-icons,
 .e-listbox-container .e-icons {
   color: #333;

package/styles/highcontrast-light.css

@@ -1434,11 +1434,13 @@ ejs-dropdownlist {
   padding: 9px 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
   width: 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
   height: 1px;
   min-height: 1px;
 }
@@ -1568,7 +1570,8 @@ ejs-dropdownlist {
   word-wrap: initial;
 }
 
-.e-multiselect.e-input-group .e-searcher .e-label-top {
+.e-multiselect.e-input-group .e-searcher .e-label-top,
+.e-multiselect.e-input-group .e-multi-searcher .e-label-top {
   top: 15px;
 }
 
@@ -2573,6 +2576,11 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   font-size: 10px;
 }
 
+.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
+  -webkit-text-fill-color: #757575;
+  color: #757575;
+}
+
 .e-listbox-tool .e-moveup::before {
   content: '\e651';
 }
@@ -3170,6 +3178,16 @@ ejs-listbox {
   height: calc(100% - 51px);
 }
 
+.e-listbox-wrapper.e-select-all .e-list-parent,
+.e-listbox-container.e-select-all .e-list-parent {
+  height: calc(100% - 36px);
+}
+
+.e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
+.e-listbox-container.e-filter-list.e-select-all .e-list-parent {
+  height: calc(100% - 87px);
+}
+
 .e-listbox-wrapper .e-icons,
 .e-listbox-container .e-icons {
   color: #000;

package/styles/highcontrast.css

@@ -1441,11 +1441,13 @@ ejs-dropdownlist {
   padding: 9px 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box),
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
   width: 0;
 }
 
-.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
+.e-multi-select-wrapper .e-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'],
+.e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) input[type='text'] {
   height: 1px;
   min-height: 1px;
 }
@@ -1575,7 +1577,8 @@ ejs-dropdownlist {
   word-wrap: initial;
 }
 
-.e-multiselect.e-input-group .e-searcher .e-label-top {
+.e-multiselect.e-input-group .e-searcher .e-label-top,
+.e-multiselect.e-input-group .e-multi-searcher .e-label-top {
   top: 15px;
 }
 
@@ -2580,6 +2583,11 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   font-size: 10px;
 }
 
+.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
+  -webkit-text-fill-color: #757575;
+  color: #757575;
+}
+
 .e-listbox-tool .e-moveup::before {
   content: '\e651';
 }
@@ -3177,6 +3185,16 @@ ejs-listbox {
   height: calc(100% - 51px);
 }
 
+.e-listbox-wrapper.e-select-all .e-list-parent,
+.e-listbox-container.e-select-all .e-list-parent {
+  height: calc(100% - 36px);
+}
+
+.e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
+.e-listbox-container.e-filter-list.e-select-all .e-list-parent {
+  height: calc(100% - 87px);
+}
+
 .e-listbox-wrapper .e-icons,
 .e-listbox-container .e-icons {
   color: #fff;

package/styles/list-box/_bootstrap-dark-definition.scss

@@ -118,3 +118,6 @@ $listbox-filter-height: calc(100% - 52px) !default;
 $listbox-filter-small-height: calc(100% - 46px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 54px) !default;
 $listbox-filter-bigger-height: calc(100% - 58px) !default;
+
+$listbox-select-all-height: calc(100% - 40px) !default;
+$listbox-filter-select-all-height: calc(100% - 92px) !default;

package/styles/list-box/_bootstrap-definition.scss

@@ -112,3 +112,6 @@ $listbox-filter-height: calc(100% - 52px) !default;
 $listbox-filter-small-height: calc(100% - 46px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 54px) !default;
 $listbox-filter-bigger-height: calc(100% - 58px) !default;
+
+$listbox-select-all-height: calc(100% - 40px) !default;
+$listbox-filter-select-all-height: calc(100% - 92px) !default;

package/styles/list-box/_bootstrap4-definition.scss

@@ -117,3 +117,6 @@ $listbox-filter-height: calc(100% - 39px) !default;
 $listbox-filter-small-height: calc(100% - 32px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 44px) !default;
 $listbox-filter-bigger-height: calc(100% - 46px) !default;
+
+$listbox-select-all-height: calc(100% - 40px) !default;
+$listbox-filter-select-all-height: calc(100% - 79px) !default;

package/styles/list-box/_bootstrap5-definition.scss

@@ -78,6 +78,9 @@ $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-height: calc(100% - 55px) !default;
 $listbox-item-height: 36px !default;
 
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 86px) !default;
+
 $listbox-border-color: $border-light;
 $badge-color: $primary-text-color !default;
 $badge-bgcolor: $primary !default;
@@ -85,7 +88,7 @@ $badge-bgcolor: $primary !default;
 $select-all-border-color: $border-light !default;
 $listview-text-color: $content-text-color !default;
 $listview-text-disabled: $content-text-color-disabled !default;
-$listview-icon-color: $flyout-text-color-pressed !default;
+$listview-icon-color: $icon-color !default;
 $listview-icon-disabled: $icon-color-disabled !default;
 $listview-item-hover-bg: $content-bg-color-alt2 !default;
 $listview-background: $transparent !default;
@@ -107,7 +110,7 @@ $listview-header-border: rgba($black, .12) !default;
 $checkmark-bgcolor: $primary !default;
 $checkmark-border-color: transparent !default;
 $checkmark-color: $primary-text-color !default;
-$listview-groupheader-text-color: $content-text-color-alt3 !default;
+$listview-groupheader-text-color: $black !default;
 $listview-groupheader-bg: $content-bg-color-alt2 !default;
 $listview-groupheader-border: $black !default;
 $listview-groupheader-icon: $icon-color !default;

package/styles/list-box/_fabric-dark-definition.scss

@@ -118,3 +118,6 @@ $listbox-filter-height: calc(100% - 51px) !default;
 $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 55px) !default;
 $listbox-filter-bigger-height: calc(100% - 59px) !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 87px) !default;

package/styles/list-box/_fabric-definition.scss

@@ -112,3 +112,6 @@ $listbox-filter-height: calc(100% - 51px) !default;
 $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 55px) !default;
 $listbox-filter-bigger-height: calc(100% - 59px) !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 87px) !default;

package/styles/list-box/_fluent-definition.scss

@@ -0,0 +1,118 @@
+//layout variables
+$skin-name: 'FluentUI' !default;
+$listview-font-family: $font-family !default;
+$listview-icon-margin-right: 16px !default;
+$listview-icon-line-height: 34px !default;
+$listview-icon-back-margin: 2px !default;
+$listview-rtl-icon-back-margin: -2px !default;
+$listview-item-height: 0 !default;
+$listview-item-padding: 0 12px !default;
+$listbox-item-line-height: 1 !default;
+$listbox-item-padding: 10px 16px !default;
+$listview-bigger-item-padding: 8px 16px !default;
+$listview-header-text-padding: 12px !default;
+$listview-header-font-size: $text-xs !default;
+$listview-header-height: 18px !default;
+$listview-header-font-weight: $font-weight-medium !default;
+$listview-header-line-height: 18px !default;
+$listview-header-padding-bottom: 0 !default;
+$listview-touch-back-icon-padding: 0 !default;
+$listview-border-bottom: 0 !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-first-border-bottom: 0 !default;
+$listview-group-border-top: 1px !default;
+$listview-group-border-bottom: 0 !default;
+$listview-groupheader-item-height: 30px !default;
+$listview-groupheader-item-line-height: 30px !default;
+$listview-groupheader-font-size: $text-xs !default;
+$listview-border-size: 0 !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 8px !default;
+$listview-back-icon-height: 20px !default;
+$listview-back-icon-font-size: auto !default;
+$listview-touch-item-height: 48px !default;
+$listbox-touch-item-line-height: 1.6 !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 40px !default;
+$listview-touch-groupheader-line-height: 25px !default;
+$listview-touch-header-height: 22px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: -2px 8px 0 0 !default;
+$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+//ListView In-built template variables
+$listview-template-padding: 8px 16px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 18px !default;
+$listview-template-badge-width: 32px !default;
+$listview-template-badge-line-height: 16px !default;
+$listview-template-badge-font-size: $text-xxs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 4px !default;
+$listview-template-multiline-content-font-size: $text-sm !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listbox-filter-height: calc(100% - 47px) !default;
+$listbox-filter-small-height: calc(100% - 45px) !default;
+$listbox-filter-bigger-small-height: calc(100% - 45px) !default;
+$listbox-filter-bigger-height: calc(100% - 55px) !default;
+$listbox-item-height: 36px !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 83px) !default;
+
+$listbox-border-color: $border-light;
+$badge-color: $primary-text-color !default;
+$badge-bgcolor: $primary !default;
+
+$select-all-border-color: $border-light !default;
+$listview-text-color: $content-text-color !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: $icon-color !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-item-hover-bg: $content-bg-color-alt2 !default;
+$listview-background: $transparent !default;
+$listview-line-color: $border-light !default;
+$listview-hover-border-color: transparent !default;
+$listview-border-bottom-color: transparent !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-text-hover-color: $content-text-color !default;
+$listview-item-active-bg: $content-bg-color-alt2 !default;
+$listview-text-active-color: $content-text-color-selected !default;
+$listview-header-text-color: $content-text-color-alt2 !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: $content-bg-color-alt2 !default;
+$listview-header-icon-color: $icon-color !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: $border-light !default;
+$checkmark-bgcolor: $primary !default;
+$checkmark-border-color: transparent !default;
+$checkmark-color: $primary-text-color !default;
+$listview-groupheader-text-color: $primary-outline !default;
+$listview-groupheader-bg: $content-bg-color-alt2 !default;
+$listview-groupheader-border: $border-light !default;
+$listview-groupheader-icon: $icon-color !default;
+$listview-template-multiline-header-color: $content-text-color !default;
+$listview-template-multiline-content-color: $content-text-color-alt2 !default;

package/styles/list-box/_highcontrast-definition.scss

@@ -112,3 +112,6 @@ $listbox-filter-height: calc(100% - 51px) !default;
 $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 55px) !default;
 $listbox-filter-bigger-height: calc(100% - 59px) !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 87px) !default;

package/styles/list-box/_highcontrast-light-definition.scss

@@ -118,3 +118,6 @@ $listbox-filter-height: calc(100% - 51px) !default;
 $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 55px) !default;
 $listbox-filter-bigger-height: calc(100% - 59px) !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 87px) !default;

package/styles/list-box/_layout.scss

@@ -424,12 +424,7 @@
 
     .e-list-group-item {
       height: $listview-touch-groupheader-height;
-      @if ($skin-name == 'tailwind') {
-        line-height: 14px;
-      }
-      @else {
-        line-height: $listview-touch-groupheader-line-height;
-      }
+      line-height: $listview-touch-groupheader-line-height;
       @if ($skin-name == 'bootstrap4') {
         font-size: 16px;
         padding: 12px 20px;

package/styles/list-box/_material-dark-definition.scss

@@ -118,3 +118,6 @@ $listbox-filter-height: calc(100% - 47px) !default;
 $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-height: calc(100% - 55px) !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 79px) !default;

package/styles/list-box/_material-definition.scss

@@ -112,3 +112,6 @@ $listbox-filter-height: calc(100% - 47px) !default;
 $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-height: calc(100% - 55px) !default;
+
+$listbox-select-all-height: calc(100% - 36px) !default;
+$listbox-filter-select-all-height: calc(100% - 79px) !default;

package/styles/list-box/_tailwind-definition.scss

@@ -77,6 +77,9 @@ $listbox-filter-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-small-height: calc(100% - 45px) !default;
 $listbox-filter-bigger-height: calc(100% - 55px) !default;
 
+$listbox-select-all-height: calc(100% - 38px) !default;
+$listbox-filter-select-all-height: calc(100% - 76px) !default;
+
 $listbox-border-color: $border-light;
 $badge-color: $primary-text-color !default;
 $badge-bgcolor: $primary !default;