@syncfusion/ej2-angular-dropdowns 20.2.40 → 20.2.43-3197

package/styles/mention/tailwind.css

@@ -0,0 +1,68 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes material-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.e-dropdownbase .e-list-item.e-active,
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  font-weight: 500;
+}
+
+.e-dropdownbase .e-list-group-item,
+.e-fixed-head {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.e-small .e-dropdownbase .e-list-group-item,
+.e-small .e-fixed-head,
+.e-small.e-dropdownbase .e-list-group-item,
+.e-small.e-fixed-head {
+  font-size: 10px;
+}
+
+.e-bigger .e-dropdownbase .e-list-group-item,
+.e-bigger .e-fixed-head,
+.e-bigger.e-dropdownbase .e-list-group-item,
+.e-bigger.e-fixed-head {
+  font-size: 14px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-group-item,
+.e-bigger.e-small .e-fixed-head,
+.e-bigger.e-small.e-dropdownbase .e-list-group-item,
+.e-bigger.e-small.e-fixed-head {
+  font-size: 12px;
+}
+
+.e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 8px 0 0;
+}
+
+.e-bigger .e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 12px 0 0;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 8px 0 0;
+}
+
+.e-small .e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 4px 0 0;
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/mention/tailwind.scss

@@ -0,0 +1,6 @@
+@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-popups/styles/popup/tailwind-definition.scss';
+@import 'ej2-popups/styles/spinner/tailwind-definition.scss';
+@import '../drop-down-base/tailwind-definition.scss';
+@import 'tailwind-definition.scss';
+@import 'all.scss';

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;
@@ -85,6 +88,7 @@ $ddl-sel-chip-close-mobile-left: 17px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 6px !default;
+$ddl-input-placeholder-padding: 0 0 0 12px !default;
 $ddl-rtl-chip-sel-close-left: -10px !default;
 $ddl-popup-active-focus-bg-color: $brand-primary !default;
 $ddl-popup-active-focus-font-color: $brand-primary-font !default;
@@ -136,12 +140,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 +155,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;
@@ -84,6 +87,7 @@ $ddl-sel-chip-close-mobile-left: 17px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 6px !default;
+$ddl-input-placeholder-padding: 0 0 0 12px !default;
 $ddl-rtl-chip-sel-close-left: -10px !default;
 $ddl-popup-active-focus-bg-color: $brand-primary !default;
 $ddl-popup-active-focus-font-color: $brand-primary-font !default;
@@ -134,12 +138,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 +153,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;
@@ -87,6 +90,7 @@ $ddl-sel-chip-close-mobile-left: 17px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 6px !default;
+$ddl-input-placeholder-padding: 0 0 0 8px !default;
 $ddl-rtl-chip-sel-close-left: -10px !default;
 $ddl-popup-active-focus-bg-color: $primary !default;
 $ddl-popup-active-focus-font-color: $primary-font !default;
@@ -126,6 +130,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 +149,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 +168,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 +206,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;
@@ -72,6 +75,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 8px !default;
+$ddl-input-placeholder-padding: 0 0 0 8px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-border-width: 0 !default;
 $ddl-popup-active-focus-shadow-item: none !default;
@@ -92,7 +96,7 @@ $ddl-check-right-margin: 8px !default;
 $ddl-bigger-check-right-margin: 12px !default;
 $ddl-selectall-font-size: 14px !default;
 $ddl-bigger-selectall-font-size: $text-base !default;
-$ddl-close-icon-left: 40px !default;
+$ddl-close-icon-left: 30px !default;
 $ddl-close-down-icon-left: 40px !default;
 $ddl-check-icon-top: 0 !default;
 $ddl-bigger-check-right: 16px !default;
@@ -122,12 +126,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 +146,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,12 +80,13 @@ $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;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 10px !default;
+$ddl-input-placeholder-padding: 0 0 0 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $neutral-quintenary !default;
 $ddl-popup-active-focus-font-color: $neutral-light-fontalt !default;
@@ -133,12 +137,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 +152,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,12 +79,13 @@ $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;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 10px !default;
+$ddl-input-placeholder-padding: 0 0 0 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $theme-lighter !default;
 $ddl-popup-active-focus-font-color: $neutral-light-font !default;
@@ -132,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
@@ -145,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/_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;
@@ -73,6 +76,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 8px !default;
+$ddl-input-placeholder-padding: 0 0 0 8px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-border-width: 0 !default;
 $ddl-popup-active-focus-shadow-item: none !default;
@@ -122,18 +126,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 +149,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 +157,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;
@@ -72,6 +75,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 8px !default;
+$ddl-input-placeholder-padding: 0 0 0 8px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-border-width: 0 !default;
 $ddl-popup-active-focus-shadow-item: none !default;
@@ -122,12 +126,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 +146,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,12 +79,13 @@ $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;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 10px !default;
+$ddl-input-placeholder-padding: 0 0 0 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $selection-bg !default;
 $ddl-popup-active-focus-font-color: $selection-font !default;
@@ -135,12 +139,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 +154,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;
@@ -82,6 +85,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 10px !default;
+$ddl-input-placeholder-padding: 0 0 0 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $selection-bg !default;
 $ddl-popup-active-focus-font-color: $selection-font !default;
@@ -135,12 +139,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 +154,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;