@syncfusion/ej2-dropdowns 20.4.53 → 20.4.54-54740

package/styles/multi-select/highcontrast-light.css

@@ -314,7 +314,8 @@
   padding: 0 0 0 48px;
 }
 
-.e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+.e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon,
+.e-bigger.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
   margin-top: -2.8em;
 }
 
@@ -382,6 +383,13 @@
   white-space: nowrap;
 }
 
+.e-small .e-multi-select-wrapper .e-chips {
+  margin: none;
+}
+.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
+  padding: none;
+}
+
 .e-multi-select-wrapper.e-delimiter .e-searcher {
   display: inline-block;
   float: none;
@@ -424,8 +432,8 @@
   margin-top: -3.2em;
   position: absolute;
   right: 0;
-  top: 100%;
   width: 30px;
+  top: 100%;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -868,11 +876,21 @@ ejs-multiselect {
   margin-top: -2.9em;
 }
 
+.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
+.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  margin-top: -2.5em;
+}
+
 .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 40px;
 }
 
+.e-bigger.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
+.e-bigger.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  margin-top: -2.85em;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: 26px;
   width: 26px;

package/styles/multi-select/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'ej2-inputs/styles/input/highcontrast-light-definition.scss';
 @import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
 @import 'ej2-popups/styles/spinner/highcontrast-light-definition.scss';

package/styles/multi-select/highcontrast.css

@@ -144,6 +144,11 @@
   width: 30px;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e966";
   font-family: "e-icons";
@@ -286,7 +291,7 @@
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
   margin-right: 0;
-  margin-top: -2.8em;
+  margin-top: -2.5em;
   right: 0;
 }
 .e-multiselect.e-control-container .e-multi-select-wrapper.e-delimiter,
@@ -316,8 +321,9 @@
   padding: 0 0 0 48px;
 }
 
-.e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
-  margin-top: -2.8em;
+.e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon,
+.e-bigger.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  margin-top: -3.1em;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-disabled,
@@ -363,7 +369,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
-  margin: 1.5px 2px 2px 0;
+  margin: 2px 2px 2px 0;
   max-width: 100%;
   overflow: hidden;
   padding: 0 0 0 8px;
@@ -378,12 +384,19 @@
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 3px 8px 4.2px 0;
+  padding: 3px 8px 5.5px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.e-small .e-multi-select-wrapper .e-chips {
+  margin: 1.5px 2px 2px 0;
+}
+.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
+  padding: 3px 8px 4.2px 0;
+}
+
 .e-multi-select-wrapper.e-delimiter .e-searcher {
   display: inline-block;
   float: none;
@@ -391,7 +404,7 @@
 
 .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
 .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  padding: 6px 8px 6px 0;
+  padding: 6px 8px 7.5px 0;
 }
 
 .e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
@@ -423,11 +436,11 @@
   cursor: default;
   font-size: 10px;
   height: 30px;
-  margin-top: -3.2em;
+  margin-top: -3em;
   position: absolute;
   right: 0;
-  top: 100%;
   width: auto;
+  top: 100%;
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -870,11 +883,21 @@ ejs-multiselect {
   margin-top: -3.2em;
 }
 
+.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
+.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  margin-top: -2.5em;
+}
+
 .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 40px;
 }
 
+.e-bigger.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
+.e-bigger.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  margin-top: -2.85em;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: 26px;
   width: auto;

package/styles/multi-select/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'ej2-inputs/styles/input/highcontrast-definition.scss';
 @import 'ej2-popups/styles/popup/highcontrast-definition.scss';
 @import 'ej2-popups/styles/spinner/highcontrast-definition.scss';

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

@@ -1,26 +1,26 @@
-@include export-module('multiselect-bootstrap-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e969';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e842';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e842';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-bootstrap-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e969';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e842';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e842';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,26 +1,26 @@
-@include export-module('multiselect-bootstrap-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e969';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e842';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e842';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-bootstrap-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e969';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e842';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e842';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,37 +1,37 @@
-@include export-module('multiselect-bootstrap4-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e744';
-    font-family: 'e-icons';
-    font-size: 8px;
-  }
-
-  .e-bigger .e-multiselect.e-input-group .e-ddl-icon::before {
-    font-size: 10px;
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e745';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e745';
-    cursor: pointer;
-    height: $ddl-overall-close-top;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    font-size: 12px;
-    top: $ddl-bigger-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-bootstrap4-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e744';
+    font-family: 'e-icons';
+    font-size: 8px;
+  }
+
+  .e-bigger .e-multiselect.e-input-group .e-ddl-icon::before {
+    font-size: 10px;
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e745';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e745';
+    cursor: pointer;
+    height: $ddl-overall-close-top;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    font-size: 12px;
+    top: $ddl-bigger-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,26 +1,26 @@
-@include export-module('multiselect-bootstrap5-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e729';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e7e7';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e7e7';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-bootstrap5-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e729';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e7e7';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e7e7';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,26 +1,26 @@
-@include export-module('multiselect-fabric-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e966';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e7a7';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e7a7';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-fabric-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e966';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e7a7';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e7a7';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,26 +1,26 @@
-@include export-module('multiselect-fabric-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e966';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e7a7';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e7a7';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-fabric-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e966';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e7a7';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e7a7';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,55 +1,55 @@
-@include export-module('multiselect-fluent-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e729';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e7e7';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before,
-  .e-bigger.e-multi-select-wrapper .e-chips .e-chips-close::before {
-    top: 1px;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e7e7';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-small .e-multi-select-wrapper .e-close-hooker::before {
-    top: 1px;
-  }
-
-  .e-small .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
-    top: -1px;
-  }
-
-  .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
-    top: 4px;
-  }
-
-  .e-small.e-bigger .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
-    top: 5px;
-  }
-
-  .e-bigger .e-multi-select-wrapper .e-close-hooker::before {
-    top: 11px;
-  }
-
-  .e-bigger .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
-    top: 11px;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-fluent-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e729';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e7e7';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before,
+  .e-bigger.e-multi-select-wrapper .e-chips .e-chips-close::before {
+    top: 1px;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e7e7';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-small .e-multi-select-wrapper .e-close-hooker::before {
+    top: 1px;
+  }
+
+  .e-small .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
+    top: -1px;
+  }
+
+  .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+    top: 4px;
+  }
+
+  .e-small.e-bigger .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
+    top: 5px;
+  }
+
+  .e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+    top: 11px;
+  }
+
+  .e-bigger .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
+    top: 11px;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}

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

@@ -1,26 +1,26 @@
-@include export-module('multiselect-fusionnew-icons') {
-  .e-multiselect.e-input-group .e-ddl-icon::before {
-    content: '\e729';
-    font-family: 'e-icons';
-  }
-
-  .e-multi-select-wrapper .e-chips .e-chips-close::before {
-    content: '\e7e7';
-    cursor: pointer;
-    left: $ddl-chip-close-left;
-    position: relative;
-    top: $ddl-chip-close-top;
-  }
-
-  .e-multi-select-wrapper .e-close-hooker::before {
-    content: '\e7e7';
-    cursor: pointer;
-    left: $ddl-overall-close-left;
-    position: relative;
-    top: $ddl-overall-close-top;
-  }
-
-  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
-    content: '';
-  }
-}
+@include export-module('multiselect-fusionnew-icons') {
+  .e-multiselect.e-input-group .e-ddl-icon::before {
+    content: '\e729';
+    font-family: 'e-icons';
+  }
+
+  .e-multi-select-wrapper .e-chips .e-chips-close::before {
+    content: '\e7e7';
+    cursor: pointer;
+    left: $ddl-chip-close-left;
+    position: relative;
+    top: $ddl-chip-close-top;
+  }
+
+  .e-multi-select-wrapper .e-close-hooker::before {
+    content: '\e7e7';
+    cursor: pointer;
+    left: $ddl-overall-close-left;
+    position: relative;
+    top: $ddl-overall-close-top;
+  }
+
+  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
+    content: '';
+  }
+}