@syncfusion/blazor-themes 20.3.48 → 20.3.49

package/SCSS-Themes/dropdowns/multi-select/material-dark.scss

@@ -41,8 +41,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 16px !default;
+$ddl-chip-close-width: 16px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 16px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 28px !default;
@@ -141,12 +144,14 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 14px !default;
+$ddl-small-chip-close-width: 14px !default;
 $ddl-small-chip-close-font: 14px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2.5em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-chip-close-hooker-small-bigger-left: 6px !default;
 $ddl-delimviewheight-small: 26px !default;
 
 // Touch Small size
@@ -154,6 +159,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 24px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 16px !default;
+$ddl-bigger-small-chip-close-width: 16px !default;
 $ddl-bigger-small-chip-close-font: 16px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 34px !default;
@@ -491,7 +497,11 @@ $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -506,7 +516,7 @@ $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1222,7 +1232,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
 
@@ -1244,7 +1254,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -1313,7 +1323,10 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2536,6 +2549,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
+
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/material.scss

@@ -40,8 +40,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 16px !default;
+$ddl-chip-close-width: 16px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 16px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 28px !default;
@@ -144,12 +147,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 14px !default;
+$ddl-small-chip-close-width: 14px !default;
 $ddl-small-chip-close-font: 14px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2.5em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-chip-close-hooker-small-bigger-left: 6px !default;
 $ddl-delimviewheight-small: 26px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -166,6 +171,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 22px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 16px !default;
+$ddl-bigger-small-chip-close-width: 16px !default;
 $ddl-bigger-small-chip-close-font: 16px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 28px !default;
@@ -484,7 +490,11 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -499,7 +509,7 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1215,7 +1225,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
 
@@ -1237,7 +1247,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -1306,7 +1316,10 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2529,6 +2542,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
+
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss

@@ -25,8 +25,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: $text-base !default;
+$ddl-chip-close-width: $text-base !default;
 $ddl-chip-hooker-square: 28px !default;
+$ddl-chip-hooker-width: 28px !default;
 $ddl-chip-close-font: $text-base !default;
 $ddl-chip-height: 22px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -133,6 +136,7 @@ $ddl-small-clear-icon-width: 28px !default;
 $ddl-bigger-small-clear-icon-height: 32px !default;
 $ddl-bigger-small-clear-icon-width: 32px !default;
 $ddl-bigger-chip-close-square: $text-xl !default;
+$ddl-bigger-chip-close-width: $text-xl !default;
 $ddl-bigger-chip-close-font: $text-xl !default;
 
 // Small size
@@ -140,12 +144,14 @@ $ddl-select-all-height-small: 24px !default;
 $ddl-small-chip-height: 18px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: $text-sm !default;
+$ddl-small-chip-close-width: $text-sm !default;
 $ddl-small-chip-close-font: $text-sm !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -1.65em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-chip-close-hooker-small-bigger-left: 6px !default;
 $ddl-delimviewheight-small: 24px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -161,6 +167,7 @@ $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-select-all-height-bigger-small: 32px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-bigger-small-chip-close-square: $text-lg !default;
+$ddl-bigger-small-chip-close-width: $text-lg !default;
 $ddl-bigger-small-chip-close-font: $text-lg !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
@@ -494,7 +501,11 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -509,7 +520,7 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1225,7 +1236,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
 
@@ -1247,7 +1258,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -1316,7 +1327,10 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2539,6 +2553,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
+
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/tailwind.scss

@@ -25,8 +25,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: $text-base !default;
+$ddl-chip-close-width: $text-base !default;
 $ddl-chip-hooker-square: 28px !default;
+$ddl-chip-hooker-width: 28px !default;
 $ddl-chip-close-font: $text-base !default;
 $ddl-chip-height: 22px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -133,6 +136,7 @@ $ddl-small-clear-icon-width: 28px !default;
 $ddl-bigger-small-clear-icon-height: 32px !default;
 $ddl-bigger-small-clear-icon-width: 32px !default;
 $ddl-bigger-chip-close-square: $text-xl !default;
+$ddl-bigger-chip-close-width: $text-xl !default;
 $ddl-bigger-chip-close-font: $text-xl !default;
 
 // Small size
@@ -140,12 +144,14 @@ $ddl-select-all-height-small: 24px !default;
 $ddl-small-chip-height: 18px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: $text-sm !default;
+$ddl-small-chip-close-width: $text-sm !default;
 $ddl-small-chip-close-font: $text-sm !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -1.65em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-chip-close-hooker-small-bigger-left: 6px !default;
 $ddl-delimviewheight-small: 24px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -161,6 +167,7 @@ $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-select-all-height-bigger-small: 32px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-bigger-small-chip-close-square: $text-lg !default;
+$ddl-bigger-small-chip-close-width: $text-lg !default;
 $ddl-bigger-small-chip-close-font: $text-lg !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
@@ -494,7 +501,11 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -509,7 +520,7 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1225,7 +1236,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
 
@@ -1247,7 +1258,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -1316,7 +1327,10 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2539,6 +2553,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
+
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/fabric-dark.scss

@@ -58096,11 +58096,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
 $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
 $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 8px !default;
-$ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 8px 8px 8px 8px !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -58141,7 +58144,7 @@ $ddl-rtl-hooker-left: -4px !default;
 $ddl-chip-close-mob-top: 0 !default;
 $ddl-control-placholder-padding: 0 32px 0 2px !default;
 $ddl-overall-close-top: 10px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -58197,12 +58200,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 22px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 13px !default;
-$ddl-small-closer-margin-top: -2.8em !default;
+$ddl-small-closer-margin-top: -3em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: -35px !default;
 $ddl-delimviewheight-small: 24px !default;
 
 // Touch Small size
@@ -58210,6 +58215,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;
@@ -58506,7 +58512,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -58521,7 +58531,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -59237,7 +59247,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
 
@@ -59259,7 +59269,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -59328,7 +59338,10 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -60551,6 +60564,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
+
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;
@@ -76302,7 +76319,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
 #{&}.e-grid-min-height {
   .e-rowcell {
-    line-height: 0;
+    line-height: normal;
     padding-bottom: 0;
     padding-top: 0;
   }
@@ -76385,7 +76402,7 @@ $grid-dropitems-count-margin-left: -8px !default;
   .e-rowcell,
   .e-rowcell:first-child,
   .e-rowcell:last-child {
-    line-height: 0;
+    line-height: normal;
     padding-bottom: 0;
     padding-top: 0;
   }
@@ -103138,7 +103155,6 @@ $pivotpager-single-size-title-padding: 4px !default;
 
     .e-valuescontent {
       padding-right: 8px;
-      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -104440,10 +104456,6 @@ $pivotpager-single-size-title-padding: 4px !default;
         margin-right: 7px;
       }
 
-      .e-valuescontent {
-        text-align: left;
-      }
-
       .e-group-values,
       .e-group-columns,
       .e-group-filters,

package/SCSS-Themes/fabric.scss

@@ -57869,11 +57869,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
 $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
 $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 8px !default;
-$ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 8px 8px 8px 8px !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -57914,7 +57917,7 @@ $ddl-rtl-hooker-left: -4px !default;
 $ddl-chip-close-mob-top: 0 !default;
 $ddl-control-placholder-padding: 0 32px 0 2px !default;
 $ddl-overall-close-top: 10px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -57970,12 +57973,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 22px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 13px !default;
-$ddl-small-closer-margin-top: -2.8em !default;
+$ddl-small-closer-margin-top: -3em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: -35px !default;
 $ddl-delimviewheight-small: 24px !default;
 
 // Touch Small size
@@ -57983,6 +57988,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;
@@ -58276,7 +58282,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -58291,7 +58301,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -59007,7 +59017,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
 
@@ -59029,7 +59039,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -59098,7 +59108,10 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -60321,6 +60334,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
+
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;
@@ -76065,7 +76082,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
 #{&}.e-grid-min-height {
   .e-rowcell {
-    line-height: 0;
+    line-height: normal;
     padding-bottom: 0;
     padding-top: 0;
   }
@@ -76148,7 +76165,7 @@ $grid-dropitems-count-margin-left: -8px !default;
   .e-rowcell,
   .e-rowcell:first-child,
   .e-rowcell:last-child {
-    line-height: 0;
+    line-height: normal;
     padding-bottom: 0;
     padding-top: 0;
   }
@@ -102892,7 +102909,6 @@ $pivotpager-single-size-title-padding: 4px !default;
 
     .e-valuescontent {
       padding-right: 8px;
-      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -104194,10 +104210,6 @@ $pivotpager-single-size-title-padding: 4px !default;
         margin-right: 7px;
       }
 
-      .e-valuescontent {
-        text-align: left;
-      }
-
       .e-group-values,
       .e-group-columns,
       .e-group-filters,