@syncfusion/ej2-dropdowns 20.3.47 → 20.3.49

package/styles/highcontrast.css

@@ -1289,7 +1289,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-chips .e-chips-close::before {
   content: "\e7a7";
   cursor: pointer;
-  left: 8px;
+  left: 0;
   position: relative;
   top: 8px;
 }
@@ -1297,7 +1297,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper .e-close-hooker::before {
   content: "\e7a7";
   cursor: pointer;
-  left: 10px;
+  left: 0;
   position: relative;
   top: 10px;
 }
@@ -1544,8 +1544,12 @@ ejs-dropdownlist {
   float: right;
   font-family: "e-icons";
   height: 26px;
-  margin: 0;
-  width: 26px;
+  margin: 10px 10px 10px 0;
+  width: auto;
+}
+
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 8px 0 8px 20px;
 }
 
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -1560,7 +1564,7 @@ ejs-dropdownlist {
   position: absolute;
   right: 0;
   top: 100%;
-  width: 30px;
+  width: auto;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1981,7 +1985,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: 22px;
-  width: 22px;
+  width: auto;
 }
 
 .e-small .e-multi-select-wrapper {
@@ -2000,7 +2004,7 @@ ejs-multiselect {
 
 .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -2.9em;
+  margin-top: -3.2em;
 }
 
 .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
@@ -2010,7 +2014,7 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: 26px;
-  width: 26px;
+  width: auto;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2029,7 +2033,7 @@ ejs-multiselect {
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -3.2em;
+  margin-top: -3.4em;
   right: 0;
 }
 
@@ -2466,6 +2470,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: 7px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: -35px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }

package/styles/material-dark.css

@@ -2347,6 +2347,10 @@ ejs-dropdownlist {
   width: 16px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 3px 0 0;
 }
@@ -3739,6 +3743,10 @@ ejs-multiselect {
   left: 6px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 6px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 24px;
 }

package/styles/material.css

@@ -2404,6 +2404,10 @@ ejs-dropdownlist {
   width: 16px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 3px 0 0;
 }
@@ -3796,6 +3800,10 @@ ejs-multiselect {
   left: 6px;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 6px;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 22px;
 }

package/styles/multi-select/_bootstrap-dark-definition.scss

@@ -38,7 +38,9 @@ $ddl-closer-margin-top-bigger: -4em !default;
 $ddl-chip-close-top: 9px !default;
 $ddl-chip-close-left: 10px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 30px !default;
+$ddl-chip-close-width: 30px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 28px !default;
 $ddl-chip-mobile-height: 32px !default;
@@ -53,6 +55,7 @@ $ddl-delimviewheight: 32px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-closer-hooker-color: $grey-dark-font !default;
 $ddl-chip-hooker-square: 40px !default;
+$ddl-chip-hooker-width: 40px !default;
 $ddl-sel-hover-chip-bg-color: $grey-99 !default;
 $ddl-sel-chip-hover-font-color: $grey-dark-font !default;
 $ddl-chip-hooker-right: 0 !default;
@@ -136,12 +139,14 @@ $ddl-select-all-height-small: 22px !default;
 $ddl-small-chip-height: 22px !default;
 $ddl-chip-small-font-size: 13px !default;
 $ddl-small-chip-close-square: 24px !default;
+$ddl-small-chip-close-width: 24px !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 13px !default;
 $ddl-small-closer-margin-top: -3.5em !default;
 $ddl-chip-close-hooker-small-left: 8px !default;
+$ddl-chip-close-hooker-small-bigger-left: 8px !default;
 $ddl-delimviewheight-small: 26px !default;
 
 // Touch Small size
@@ -149,6 +154,7 @@ $ddl-select-all-height-bigger-small: 34px !default;
 $ddl-bigger-small-chip-height: 28px !default;
 $ddl-chip-bigger-small-font-size: 15px !default;
 $ddl-bigger-small-chip-close-square: 30px !default;
+$ddl-bigger-small-chip-close-width: 30px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 30px !default;
 $ddl-bigger-small-input-height: 34px !default;

package/styles/multi-select/_bootstrap-definition.scss

@@ -37,7 +37,9 @@ $ddl-closer-margin-top-bigger: -4em !default;
 $ddl-chip-close-top: 9px !default;
 $ddl-chip-close-left: 10px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 30px !default;
+$ddl-chip-close-width: 30px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 28px !default;
 $ddl-chip-mobile-height: 32px !default;
@@ -52,6 +54,7 @@ $ddl-delimviewheight: 32px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-closer-hooker-color: $grey-light-font !default;
 $ddl-chip-hooker-square: 40px !default;
+$ddl-chip-hooker-width: 40px !default;
 $ddl-sel-hover-chip-bg-color: $grey-dd !default;
 $ddl-sel-chip-hover-font-color: $grey-light-font !default;
 $ddl-chip-hooker-right: 0 !default;
@@ -134,12 +137,14 @@ $ddl-select-all-height-small: 22px !default;
 $ddl-small-chip-height: 22px !default;
 $ddl-chip-small-font-size: 13px !default;
 $ddl-small-chip-close-square: 24px !default;
+$ddl-small-chip-close-width: 24px !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 13px !default;
 $ddl-small-closer-margin-top: -3.5em !default;
 $ddl-chip-close-hooker-small-left: 8px !default;
+$ddl-chip-close-hooker-small-bigger-left: 8px !default;
 $ddl-delimviewheight-small: 26px !default;
 
 // Touch Small size
@@ -147,6 +152,7 @@ $ddl-select-all-height-bigger-small: 34px !default;
 $ddl-bigger-small-chip-height: 28px !default;
 $ddl-chip-bigger-small-font-size: 15px !default;
 $ddl-bigger-small-chip-close-square: 30px !default;
+$ddl-bigger-small-chip-close-width: 30px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 30px !default;
 $ddl-bigger-small-input-height: 34px !default;

package/styles/multi-select/_bootstrap4-definition.scss

@@ -35,9 +35,11 @@ $ddl-icon-margin-top-bigger: -2.25em !default;
 $ddl-clear-margin-top: -2.9em !default;
 $ddl-closer-margin-top-bigger: -3.5em !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 10px !default;
-$ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 10px 10px 10px 0 !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-close-square: 24px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-close-font: 8px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 28px !default;
@@ -52,6 +54,7 @@ $ddl-delimviewheight: 29px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-closer-hooker-font-bigger: 12px !default;
 $ddl-chip-hooker-square: 29px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-sel-hover-chip-bg-color: $gray-600 !default;
 $ddl-sel-chip-hover-font-color: $white !default;
 $ddl-chip-hooker-right: 0 !default;
@@ -74,7 +77,7 @@ $ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
 $ddl-rtl-chip-padding: 0 8px 0 0 !default;
 $ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
 $ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-overall-close-top: 10px !default;
 
 //$ddl-overall-bigger-close-top: 15px !default;
@@ -126,6 +129,7 @@ $ddl-chip-close-rtl-left: -15px !default;
 $ddl-close-icon-color: $gray-700 !default;
 $ddl-bigger-chip-close-font: 10px !default;
 $ddl-bigger-chip-close-square: 30px !default;
+$ddl-bigger-chip-close-width: auto !default;
 $ddl-bigger-close-top: 9px !default;
 $ddl-multi-checkbox-bgcolor: $primary-font !default;
 $ddl-multi-checkbox-border-color: $primary-font !default;
@@ -144,15 +148,17 @@ $ddl-select-all-height-small: 22px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 18px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 22px !default;
 $ddl-small-input-height: 22px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2.4em !default;
 $ddl-chip-small-content-padding: 0 8px 0 8px !default;
-$ddl-chip-close-small-left: 6px !default;
+$ddl-chip-close-small-left: 0 !default;
 $ddl-chip-close-small-top: 5px !default;
 $ddl-chip-close-hooker-small-left: 4px !default;
+$ddl-chip-close-hooker-small-bigger-left: 4px !default;
 $ddl-chip-close-hooker-small-top: 7px !default;
 $ddl-delimviewheight-small: 22px !default;
 
@@ -161,15 +167,16 @@ $ddl-select-all-height-bigger-small: 34px !default;
 $ddl-bigger-small-chip-height: 30px !default;
 $ddl-chip-bigger-small-font-size: 15px !default;
 $ddl-bigger-small-chip-close-square: 24px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 30px !default;
 $ddl-bigger-small-input-height: 34px !default;
 $ddl-delim-bigger-small-font-size: 14px !default;
-$ddl-chip-close-bigger-left: 13px !default;
+$ddl-chip-close-bigger-left: 0 !default;
 $ddl-chip-close-bigger-top: 11px !default;
 $ddl-chip-bigger-content-padding: 7px 8px 7px 12px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
-$ddl-closer-margin-top-bigger-small: -2.9em !default;
+$ddl-closer-margin-top-bigger-small: -2.5em !default;
 $multiselect-closer-bigger-height: 36px !default;
 $multiselect-closer--bigger-margin-top: -3em !default;
 $multiselect-closer-bigger-width: 0 !default;
@@ -198,7 +205,7 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
 
   .e-bigger .e-multi-select-wrapper .e-chips-close {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 
   .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus.e-hover {

package/styles/multi-select/_bootstrap5-definition.scss

@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 6px 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: 14px !default;
+$ddl-chip-close-width: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 14px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -122,12 +125,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: 12px !default;
+$ddl-small-chip-close-width: 12px !default;
 $ddl-small-chip-close-font: 12px !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: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
+$ddl-chip-close-hooker-small-bigger-left: 0 !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;
@@ -140,12 +145,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-close-width: 14px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
+$ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 14px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;

package/styles/multi-select/_fabric-dark-definition.scss

@@ -32,11 +32,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;
@@ -77,7 +80,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;
@@ -133,12 +136,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
@@ -146,6 +151,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;

package/styles/multi-select/_fabric-definition.scss

@@ -31,11 +31,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;
@@ -76,7 +79,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;
@@ -132,12 +135,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
@@ -145,6 +150,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;

package/styles/multi-select/_fluent-definition.scss

@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 8px 0 4px !default;
 $ddl-chip-close-top: 3px !default;
 $ddl-chip-close-left: 6px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 14px !default;
+$ddl-chip-close-width: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -122,18 +125,20 @@ $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: 12px !default;
+$ddl-small-chip-close-width: 12px !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: 12px !default;
 $ddl-small-closer-margin-top: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
+$ddl-chip-close-hooker-small-bigger-left: 0 !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;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
 $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
-$ddl-chip-close-small-left: 6px !default;
+$ddl-chip-close-small-left: 0 !default;
 $ddl-chip-close-small-top: 2px !default;
 $ddl-small-down-icon-left: -2px !default;
 
@@ -143,6 +148,7 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-close-width: 14px !default;
 $ddl-bigger-chip-down-icon-font: 14px !default;
 
 // Touch Small size
@@ -150,6 +156,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
+$ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;

package/styles/multi-select/_fusionnew-definition.scss

@@ -20,8 +20,11 @@ $ddl-chip-padding: 0 6px 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: 14px !default;
+$ddl-chip-close-width: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 14px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -122,12 +125,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: 12px !default;
+$ddl-small-chip-close-width: 12px !default;
 $ddl-small-chip-close-font: 12px !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: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
+$ddl-chip-close-hooker-small-bigger-left: 0 !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;
@@ -140,12 +145,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-close-width: 14px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
+$ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 14px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;

package/styles/multi-select/_highcontrast-definition.scss

@@ -31,11 +31,14 @@ $ddl-chip-mobile-content-padding: 6px 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: 10px 10px 10px 0 !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;
@@ -76,7 +79,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;
@@ -135,12 +138,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.9em !default;
+$ddl-small-closer-margin-top: -3.2em !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
@@ -148,12 +153,13 @@ $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;
 $ddl-delim-bigger-small-font-size: 14px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
-$ddl-closer-margin-top-bigger-small: -3.2em !default;
+$ddl-closer-margin-top-bigger-small: -3.4em !default;
 
 @include export-module('multiselect-highcontrast') {
   .e-multi-select-wrapper {

package/styles/multi-select/_highcontrast-light-definition.scss

@@ -33,9 +33,12 @@ $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-rtl-margin: 0 !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: 26px !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: 30px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -135,12 +138,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: 22px !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.9em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: 7px !default;
 $ddl-delimviewheight-small: 24px !default;
 
 // Touch Small size
@@ -148,6 +153,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: 26px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;

package/styles/multi-select/_layout.scss

@@ -263,7 +263,11 @@
   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 {
@@ -278,7 +282,7 @@
   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,
@@ -994,7 +998,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;
   }
 }
 
@@ -1016,7 +1020,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 {
@@ -1085,7 +1089,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 {