@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-1234

package/styles/multi-select/_layout.scss

@@ -1,4 +1,4 @@
-.e-multi-select-wrapper {
+.e-multi-select-wrapper {
   box-sizing: border-box;
   cursor: text;
   line-height: normal;
@@ -12,7 +12,8 @@
     #{if(&, '&', '*')} .e-searcher,
     #{if(&, '&', '*')} .e-multi-searcher {
       height: 27px;
-      vertical-align: middle;#{if(&, '&', '*')} .e-dropdownbase {
+      vertical-align: middle;
+      #{if(&, '&', '*')} .e-dropdownbase {
         height: 100%;
         min-height: 100%;
       }
@@ -51,14 +52,13 @@
   .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
     width: 0;
 
-    input[type='text'] {
+    input[type = 'text'] {
       height: 1px;
       min-height: 1px;
     }
-
   }
 
-  .e-chips.e-mob-chip>.e-chipcontent {
+  .e-chips.e-mob-chip > .e-chipcontent {
     max-width: 100%;
   }
 }
@@ -104,6 +104,9 @@
     display: none;
     flex-direction: row;
     margin-top: $ddl-clear-margin-top;
+    @if $ddl-multiselect-skin-name == 'tailwind' {
+      margin-top: -1.45em;
+    }
     outline: 0;
     padding: 0;
     position: absolute;
@@ -215,7 +218,7 @@
   margin: $ddl-chip-margin-bigger;
 }
 
-.e-multi-select-wrapper .e-chips>.e-chipcontent {
+.e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
   padding: $ddl-chip-content-padding;
@@ -234,12 +237,12 @@
   }
 }
 
-.e-multi-select-wrapper .e-mob-chip.e-chips>.e-chipcontent,
-.e-bigger .e-multi-select-wrapper .e-chips>.e-chipcontent {
+.e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
+.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
   padding: $ddl-chip-mobile-content-padding;
 }
 
-.e-bigger .e-multi-select-wrapper .e-chips>.e-chipcontent {
+.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
   @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' {
     padding: $ddl-chip-bigger-content-padding;
   }
@@ -260,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 {
@@ -275,8 +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,
@@ -389,6 +395,7 @@
   }
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-clear-icon-height;
+    margin-top: $ddl-clear-margin-top;
     width: $ddl-bigger-clear-icon-width;
   }
 }
@@ -404,26 +411,26 @@
   }
 }
 
-.e-multi-select-wrapper input[type='text'] {
+.e-multi-select-wrapper input[type = 'text'] {
   background: none;
   border: 0;
   font-family: $ddl-chip-font-family;
   font-size: $ddl-chip-font-size;
-  font-weight: 400;
+  font-weight: normal;
   height: $ddl-input-height;
   min-height: $ddl-input-height;
   outline: none;
-  padding: 0;
-  text-indent: $ddl-input-text-indent;
+  padding: $ddl-input-placeholder-padding;
+  text-indent: 0;
 }
 
-.e-multiselect.e-filled  .e-multi-select-wrapper input[type='text'] {
+.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
   background: none;
   border: 0;
   color: inherit;
   font-family: $ddl-chip-font-family;
   font-size: $ddl-delim-font-size;
-  font-weight: 400;
+  font-weight: normal;
   height: $ddl-input-height;
   min-height: $ddl-input-height;
   outline: none;
@@ -431,17 +438,17 @@
   text-indent: $ddl-input-text-indent;
 }
 
-.e-rtl.e-multiselect.e-filled  .e-multi-select-wrapper input[type='text'] {
+.e-rtl.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
   padding: 5px;
 }
 
-.e-bigger .e-multi-select-wrapper input[type='text'],
-.e-multi-select-wrapper.e-mob-wrapper input[type='text'] {
+.e-bigger .e-multi-select-wrapper input[type = 'text'],
+.e-multi-select-wrapper.e-mob-wrapper input[type = 'text'] {
   height: $ddl-input-height;
   min-height: $ddl-input-height;
 }
 
-.e-bigger .e-multi-select-wrapper input[type='text'] {
+.e-bigger .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'bootstrap4' {
     font-size: $ddl-chip-bigger-font-size;
   }
@@ -452,8 +459,8 @@
   min-height: $ddl-input-bigger-height;
 }
 
-// sass-lint:disable no-vendor-prefixes
-.e-multi-select-wrapper  input[type='text']::-ms-clear {
+/* stylelint-disable property-no-vendor-prefix */
+.e-multi-select-wrapper input[type = 'text']::-ms-clear {
   display: none;
 }
 
@@ -658,7 +665,7 @@
       .e-chipcontent {
         padding: $ddl-rtl-mob-sel-chip-content-padding;
       }
-  }
+    }
 
     .e-chips-close.e-close-hooker {
       left: $ddl-close-icon-left;
@@ -667,16 +674,15 @@
       @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'tailwind' {
         left: 0;
       }
-  }
+    }
 
     .e-close-hooker::before {
       left: $ddl-rtl-hooker-left;
-  }
+    }
 
     .e-delim-values .e-remain {
       padding-right: $ddl-remains-padding-left;
     }
-
   }
 }
 
@@ -977,7 +983,7 @@
   opacity: .7;
 }
 
-.e-multi-select-wrapper input[readonly='true'] {
+.e-multi-select-wrapper input[readonly = 'true'] {
   pointer-events: none;
 }
 
@@ -992,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;
   }
 }
 
@@ -1002,7 +1008,6 @@ ejs-multiselect {
   }
 }
 
-
 // small size
 .e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-small .e-multi-select-list-wrapper .e-selectall-parent {
@@ -1015,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 {
@@ -1043,7 +1048,7 @@ ejs-multiselect {
   }
 }
 
-.e-small .e-multi-select-wrapper input[type='text'] {
+.e-small .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     font-size: $ddl-chip-small-font-size;
   }
@@ -1066,7 +1071,7 @@ ejs-multiselect {
   }
 }
 
-.e-small .e-multi-select-wrapper .e-chips>.e-chipcontent {
+.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
   @if $ddl-multiselect-skin-name == 'bootstrap4' {
     padding: $ddl-chip-small-content-padding;
   }
@@ -1084,14 +1089,17 @@ 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 {
   min-height: $ddl-control-bigger-small-height;
 }
 
-.e-bigger.e-small .e-multi-select-wrapper input[type='text'] {
+.e-bigger.e-small .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     font-size: $ddl-chip-bigger-small-font-size;
   }
@@ -1120,7 +1128,7 @@ ejs-multiselect {
   }
 }
 
-.e-small.e-bigger .e-multi-select-wrapper .e-chips>.e-chipcontent {
+.e-small.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
   @if $ddl-multiselect-skin-name == 'bootstrap4' {
     padding: $ddl-chip-bigger-content-padding;
   }
@@ -1139,7 +1147,7 @@ ejs-multiselect {
 
 // Outline textbox configuration
 
-.e-multiselect.e-outline .e-multi-select-wrapper input[type='text'] {
+.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
   color: inherit;
   @if $ddl-multiselect-skin-name == 'material' {
     font-size: inherit;
@@ -1148,14 +1156,14 @@ ejs-multiselect {
   }
 }
 
-.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'] {
+.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     padding: 8px 12px 9px;
   }
 }
 
-.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type='text'],
-.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type='text'] {
+.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     font-size: inherit;
     min-height: $outline-multiselect-small-inner-input-height;
@@ -1163,17 +1171,17 @@ ejs-multiselect {
   }
 }
 
-.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'],
-.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'] {
+.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     padding: 7px 10px;
   }
 }
 
-.e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type='text'],
-.e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type='text'],
-.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type='text'],
-.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type='text'] {
+.e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
+.e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
+.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     font-size: inherit;
     min-height: $outline-multiselect-inner-input-height;
@@ -1181,17 +1189,17 @@ ejs-multiselect {
   }
 }
 
-.e-bigger.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'],
-.e-bigger.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'],
-.e-bigger .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'],
-.e-small .e-bigger.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type='text'] {
+.e-bigger.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
+.e-bigger.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
+.e-bigger .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-bigger.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     padding: 8px 12px 9px;
   }
 }
 
-.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type='text'],
-.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper input[type='text'] {
+.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
+.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     font-size: inherit;
     min-height: $outline-multiselect-bigger-inner-input-height;
@@ -1590,7 +1598,6 @@ ejs-multiselect {
   }
 }
 
-
 .e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
 .e-bigger.e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
 .e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
@@ -1604,7 +1611,6 @@ ejs-multiselect {
   }
 }
 
-
 // Filled theme specifications
 
 // Multiselect wrapper
@@ -1654,26 +1660,26 @@ ejs-multiselect {
 
 // Searchable input
 
-.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'],
-.e-bigger.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'],
-.e-bigger.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'],
-.e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'],
-.e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'] {
+.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
+.e-bigger.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
+.e-bigger.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
+.e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     min-height: $ddl-multiselect-filled-input-min-height;
     padding-right: 10px;
   }
 }
 
-.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'],
-.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'] {
+.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     min-height: $ddl-multiselect-filled-input-min-height-small;
   }
 }
 
-.e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type='text'],
-.e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type='text'] {
+.e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
+.e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     height: $ddl-multiselect-filled-float-input-min-height-small;
     min-height: $ddl-multiselect-filled-float-input-min-height-small;
@@ -1681,15 +1687,15 @@ ejs-multiselect {
   }
 }
 
-.e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'],
-.e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type='text'] {
+.e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
+.e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     min-height: $ddl-multiselect-filled-input-min-height-bigger;
   }
 }
 
-.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type='text'],
-.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type='text'] {
+.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
+.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
   @if $ddl-multiselect-skin-name == 'material' {
     min-height: $ddl-multiselect-filled-float-input-min-height-bigger;
   }
@@ -1730,16 +1736,15 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
-.e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher
-.e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
+.e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
 .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
   @if $ddl-multiselect-skin-name == 'material' {
     height: $ddl-multiselect-filled-float-input-min-height;
   }
 }
 
-.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type='text'],
-.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type='text'] {
+.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'],
+.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'] {
   padding: 5px 0;
 }
 
@@ -1811,7 +1816,6 @@ ejs-multiselect {
   }
 }
 
-
 // Chip specifications
 
 .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
@@ -1829,7 +1833,6 @@ ejs-multiselect {
   height: 24px;
 }
 
-
 .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
 .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
   height: 32px;
@@ -1979,10 +1982,6 @@ ejs-multiselect {
   padding-right: 8px;
 }
 
-
-
-
-
 // Clear icon styles
 
 .e-filled.e-multi-select-wrapper .e-chips-close.e-close-hooker,
@@ -2001,3 +2000,17 @@ ejs-multiselect {
 .e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon {
   display: none;
 }
+
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
+  cursor: not-allowed;
+}
+
+.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon,
+.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon .e-multi-searcher .e-dropdownbase.e-control.e-multiselect.e-lib {
+  cursor: pointer;
+}

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: 'material' !default;
 $ddl-delim-font-size: 14px !default;
@@ -35,8 +35,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;
@@ -84,6 +87,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: 0 !default;
+$ddl-input-placeholder-padding: 4px 0 4px 0 !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $grey-800 !default;
 $ddl-popup-active-focus-font-color: $accent !default;
@@ -135,12 +139,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
@@ -148,12 +154,14 @@ $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;
 $ddl-delim-bigger-small-font-size: 13px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
 $ddl-closer-margin-top-bigger-small: -2.5em !default;
+
 //enddefault
 
 $ddl-outline-multiselect-height: 34px !default;
@@ -211,6 +219,7 @@ $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;
+
 // Touch
 $ddl-multiselect-filled-input-min-height-bigger: 52px !default;
 $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;

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

@@ -34,8 +34,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;
@@ -83,6 +86,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: 0 !default;
+$ddl-input-placeholder-padding: 4px 0 4px 0 !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $grey-300 !default;
 $ddl-popup-active-focus-font-color: $accent !default;
@@ -132,17 +136,20 @@ $ddl-multiselect-filled-input-min-height: 39px !default;
 $ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
 $ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
 $multiselect-disable-font-color: rgba($grey-light-font, .42) !default;
+
 // Small size
 $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;
@@ -159,6 +166,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;

package/styles/multi-select/_material3-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;
@@ -116,17 +119,20 @@ $ddl-multiselect-filled-input-min-height: 39px !default;
 $ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
 $ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
 $multiselect-disable-font-color: $content-text-color-alt1 !default;
+
 // Small size
 $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;
@@ -139,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;
@@ -207,7 +215,7 @@ $ddl-close-down-icon-left: 35px !default;
     width: $ddl-chip-hooker-square;
   }
 
-  .e-multi-select-wrapper .e-searcher input[type='text'] {
+  .e-multi-select-wrapper .e-searcher input[type = 'text'] {
     color: $content-text-color;
     height: 100%;
   }
@@ -216,4 +224,3 @@ $ddl-close-down-icon-left: 35px !default;
     border-left-width: 0;
   }
 }
-