@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

package/styles/material-dark.css

@@ -17,9 +17,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 16px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -153,6 +157,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #424242;
   border-bottom: 0;
   border-color: transparent;
@@ -321,9 +326,9 @@
   border-color: transparent;
   color: #fff;
   font-family: inherit;
+  text-indent: 16px;
   font-size: 13px;
   padding-right: 16px;
-  text-indent: 16px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
@@ -492,7 +497,10 @@
   margin-left: -20px;
 }
 
-.e-bigger .e-ddl.e-popup .e-list-item,
+.e-bigger .e-ddl.e-popup .e-list-item {
+  font-size: 14px;
+}
+
 .e-bigger .e-ddl.e-popup .e-list-group-item {
   font-size: 14px;
 }
@@ -501,7 +509,10 @@
   padding: 4px 0;
 }
 
-.e-bigger.e-ddl.e-popup .e-list-item,
+.e-bigger.e-ddl.e-popup .e-list-item {
+  font-size: 14px;
+}
+
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 14px;
 }
@@ -520,6 +531,10 @@
   top: 0;
 }
 
+.e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
+  margin: 0;
+}
+
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
 }
@@ -671,29 +686,41 @@ ejs-dropdownlist {
 }
 
 .e-small .e-ddl.e-popup .e-list-item,
+.e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 12px;
+}
+
 .e-small .e-ddl.e-popup .e-list-group-item,
-.e-input-group.e-ddl.e-small .e-list-item,
 .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 12px;
 }
 
 .e-small.e-ddl.e-popup .e-list-item,
+.e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 12px;
+}
+
 .e-small.e-ddl.e-popup .e-list-group-item,
-.e-input-group.e-ddl.e-small .e-list-item,
 .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 12px;
 }
 
 .e-bigger.e-small .e-ddl.e-popup .e-list-item,
+.e-bigger .e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 13px;
+}
+
 .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
-.e-bigger .e-input-group.e-ddl.e-small .e-list-item,
 .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 13px;
 }
 
 .e-bigger.e-small.e-ddl.e-popup .e-list-item,
+.e-bigger .e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 13px;
+}
+
 .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
-.e-bigger .e-input-group.e-ddl.e-small .e-list-item,
 .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 13px;
 }
@@ -2247,12 +2274,14 @@ ejs-dropdownlist {
   width: 100%;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher {
+.e-multi-select-wrapper.e-delimiter .e-searcher,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher {
   height: 27px;
   vertical-align: middle;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase {
+.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher .e-dropdownbase {
   height: 100%;
   min-height: 100%;
 }
@@ -2513,6 +2542,7 @@ ejs-dropdownlist {
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
+.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
   right: 22px;
 }
@@ -2754,7 +2784,7 @@ ejs-dropdownlist {
   padding-right: 16px;
 }
 
-.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-icon.e-close-hooker {
+.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
   left: 19px;
 }
 
@@ -2790,12 +2820,14 @@ ejs-dropdownlist {
   vertical-align: middle;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 12px;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper.e-mulltiselect-group .e-list-group-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 12px;
 }
@@ -2850,6 +2882,7 @@ ejs-dropdownlist {
   font-size: 14px;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
   font-size: 13px;
   line-height: 48px;
@@ -2864,6 +2897,7 @@ ejs-dropdownlist {
   vertical-align: middle;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 12px;
@@ -2903,7 +2937,7 @@ ejs-dropdownlist {
   padding: 8px;
 }
 
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrappe .e-filter-parent .e-input-filter,
+.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
 .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
   padding: 4px 0;
 }
@@ -2949,6 +2983,7 @@ ejs-multiselect {
   display: block;
 }
 
+.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 26px;
 }
@@ -2977,6 +3012,7 @@ ejs-multiselect {
   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;
 }
@@ -3718,7 +3754,7 @@ ejs-multiselect {
   background-color: #424242;
 }
 
-.e-multi-select-wrapper .e-chips.e-chip-selected:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -3747,7 +3783,7 @@ ejs-multiselect {
   height: 24px;
 }
 
-.e-multi-select-wrapper .e-chips:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -3834,16 +3870,16 @@ ejs-multiselect {
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: #424242;
-  border: 1px solid transparent;
   box-shadow: none;
   color: #00b0ff;
+  border: 1px solid transparent;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: #424242;
-  border: 1px solid transparent;
   box-shadow: none;
   color: #00b0ff;
+  border: 1px solid transparent;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item {
@@ -4174,8 +4210,8 @@ ejs-multiselect {
   border-top: 1px solid;
   font-weight: 600;
   height: 36px;
-  line-height: 36px;
-  padding: 0 16px;
+  line-height: 16px;
+  padding: 11px 16px;
 }
 
 .e-listbox-wrapper .e-icon-collapsible,
@@ -4382,7 +4418,7 @@ ejs-listbox {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list.e-list-parent {
+.e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }
 
@@ -4546,7 +4582,7 @@ ejs-listbox {
 .e-bigger .e-listbox-container .e-list-group-item,
 .e-listbox-container.e-bigger .e-list-group-item {
   height: 48px;
-  line-height: 45px;
+  line-height: 25px;
 }
 
 .e-bigger .e-listbox-wrapper .e-list-header,
@@ -4622,16 +4658,6 @@ ejs-listbox {
   height: calc(100% - 47px);
 }
 
-.e-listbox-wrapper.e-select-all .e-list-parent,
-.e-listbox-container.e-select-all .e-list-parent {
-  height: calc(100% - 36px);
-}
-
-.e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
-.e-listbox-container.e-filter-list.e-select-all .e-list-parent {
-  height: calc(100% - 79px);
-}
-
 .e-listbox-wrapper .e-icons,
 .e-listbox-container .e-icons {
   color: #fff;

package/styles/material.css

@@ -17,9 +17,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 16px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -153,6 +157,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;
   border-color: #fff;
@@ -321,9 +326,9 @@
   border-color: #fff;
   color: rgba(0, 0, 0, 0.87);
   font-family: inherit;
+  text-indent: 16px;
   font-size: 13px;
   padding-right: 16px;
-  text-indent: 16px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
@@ -526,7 +531,10 @@
   margin-left: -20px;
 }
 
-.e-bigger .e-ddl.e-popup .e-list-item,
+.e-bigger .e-ddl.e-popup .e-list-item {
+  font-size: 14px;
+}
+
 .e-bigger .e-ddl.e-popup .e-list-group-item {
   font-size: 14px;
 }
@@ -535,7 +543,10 @@
   padding: 4px 0;
 }
 
-.e-bigger.e-ddl.e-popup .e-list-item,
+.e-bigger.e-ddl.e-popup .e-list-item {
+  font-size: 14px;
+}
+
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 14px;
 }
@@ -554,6 +565,10 @@
   top: 0;
 }
 
+.e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
+  margin: 0;
+}
+
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
 }
@@ -705,29 +720,41 @@ ejs-dropdownlist {
 }
 
 .e-small .e-ddl.e-popup .e-list-item,
+.e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 12px;
+}
+
 .e-small .e-ddl.e-popup .e-list-group-item,
-.e-input-group.e-ddl.e-small .e-list-item,
 .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 12px;
 }
 
 .e-small.e-ddl.e-popup .e-list-item,
+.e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 12px;
+}
+
 .e-small.e-ddl.e-popup .e-list-group-item,
-.e-input-group.e-ddl.e-small .e-list-item,
 .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 12px;
 }
 
 .e-bigger.e-small .e-ddl.e-popup .e-list-item,
+.e-bigger .e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 13px;
+}
+
 .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
-.e-bigger .e-input-group.e-ddl.e-small .e-list-item,
 .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 13px;
 }
 
 .e-bigger.e-small.e-ddl.e-popup .e-list-item,
+.e-bigger .e-input-group.e-ddl.e-small .e-list-item {
+  font-size: 13px;
+}
+
 .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
-.e-bigger .e-input-group.e-ddl.e-small .e-list-item,
 .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
   font-size: 13px;
 }
@@ -2308,12 +2335,14 @@ ejs-dropdownlist {
   width: 100%;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher {
+.e-multi-select-wrapper.e-delimiter .e-searcher,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher {
   height: 27px;
   vertical-align: middle;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase {
+.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher .e-dropdownbase {
   height: 100%;
   min-height: 100%;
 }
@@ -2574,6 +2603,7 @@ ejs-dropdownlist {
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
+.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
   right: 22px;
 }
@@ -2815,7 +2845,7 @@ ejs-dropdownlist {
   padding-right: 16px;
 }
 
-.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-icon.e-close-hooker {
+.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
   left: 19px;
 }
 
@@ -2851,12 +2881,14 @@ ejs-dropdownlist {
   vertical-align: middle;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 12px;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper.e-mulltiselect-group .e-list-group-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 12px;
 }
@@ -2911,6 +2943,7 @@ ejs-dropdownlist {
   font-size: 14px;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
   font-size: 13px;
   line-height: 48px;
@@ -2925,6 +2958,7 @@ ejs-dropdownlist {
   vertical-align: middle;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 12px;
@@ -2964,7 +2998,7 @@ ejs-dropdownlist {
   padding: 8px;
 }
 
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrappe .e-filter-parent .e-input-filter,
+.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
 .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
   padding: 4px 0;
 }
@@ -3010,6 +3044,7 @@ ejs-multiselect {
   display: block;
 }
 
+.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 26px;
 }
@@ -3038,6 +3073,7 @@ ejs-multiselect {
   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;
 }
@@ -3779,7 +3815,7 @@ ejs-multiselect {
   background-color: #757575;
 }
 
-.e-multi-select-wrapper .e-chips.e-chip-selected:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
   background-color: #757575;
 }
 
@@ -3808,7 +3844,7 @@ ejs-multiselect {
   height: 24px;
 }
 
-.e-multi-select-wrapper .e-chips:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
   background-color: #eee;
 }
 
@@ -3895,16 +3931,16 @@ ejs-multiselect {
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: #e0e0e0;
-  border: 1px solid transparent;
   box-shadow: none;
   color: #e3165b;
+  border: 1px solid transparent;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: #e0e0e0;
-  border: 1px solid transparent;
   box-shadow: none;
   color: #e3165b;
+  border: 1px solid transparent;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item {
@@ -4235,8 +4271,8 @@ ejs-multiselect {
   border-top: 1px solid;
   font-weight: 600;
   height: 36px;
-  line-height: 36px;
-  padding: 0 16px;
+  line-height: 16px;
+  padding: 11px 16px;
 }
 
 .e-listbox-wrapper .e-icon-collapsible,
@@ -4443,7 +4479,7 @@ ejs-listbox {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list.e-list-parent {
+.e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }
 
@@ -4607,7 +4643,7 @@ ejs-listbox {
 .e-bigger .e-listbox-container .e-list-group-item,
 .e-listbox-container.e-bigger .e-list-group-item {
   height: 48px;
-  line-height: 45px;
+  line-height: 25px;
 }
 
 .e-bigger .e-listbox-wrapper .e-list-header,
@@ -4683,16 +4719,6 @@ ejs-listbox {
   height: calc(100% - 47px);
 }
 
-.e-listbox-wrapper.e-select-all .e-list-parent,
-.e-listbox-container.e-select-all .e-list-parent {
-  height: calc(100% - 36px);
-}
-
-.e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
-.e-listbox-container.e-filter-list.e-select-all .e-list-parent {
-  height: calc(100% - 79px);
-}
-
 .e-listbox-wrapper .e-icons,
 .e-listbox-container .e-icons {
   color: rgba(0, 0, 0, 0.54);

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

@@ -8,7 +8,7 @@ $ddl-bigger-search-wrapper-width: calc(100% - 38px) !default;
 $ddl-bigger-small-search-wrapper-width: calc(100% - 32px) !default;
 $ddl-small-search-wrapper-width: calc(100% - 30px) !default;
 $ddl-popup-shadow-value: $shadow-lg !default;
-$ddl-remains-padding-left: 0 !default;
+$ddl-remains-padding-left: 8px !default;
 $ddl-chip-margin: 3px !default;
 $ddl-chip-margin-bigger: 3px !default;
 $ddl-chip-radius: 4px !default;
@@ -93,12 +93,16 @@ $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-down-icon-left: 40px !default;
 $ddl-check-icon-top: 0 !default;
 $ddl-bigger-check-right: 16px !default;
 $ddl-delim-text-padding-right: 6px !default;
 $ddl-list-rtl-padding-right: 15px !default;
 $ddl-close-rtl-icon-left: 19px !default;
-$ddl-chip-close-rtl-left: -7px !default;
+$ddl-chip-close-rtl-small-left: 20px !default;
+$ddl-chip-close-rtl-bigger-left: 32px !default;
+$ddl-chip-close-rtl-small-bigger-left: 25px !default;
+$ddl-chip-close-rtl-left: 25px !default;
 $ddl-multiselect-group-list-item-rtl-padding-right: 25px !default;
 $ddl-bigger-multiselect-group-list-item-rtl-padding-right: 25px !default;
 $ddl-multiselect-group-list-group-item-padding-left: 16px !default;
@@ -174,7 +178,7 @@ $ddl-multi-list-default-font-color: $content-text-color !default;
 $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-delim-font-color: $content-text-color !default;
 $ddl-close-icon-color: $content-text-color !default;
-
+$ddl-close-down-icon-left: 35px !default;
 
 @include export-module('multiselect-bootstrap5') {
   .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
@@ -183,7 +187,7 @@ $ddl-close-icon-color: $content-text-color !default;
   }
 
   .e-multiselect .e-input-group-icon.e-ddl-icon {
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 2px 2px 0;
     border-right-width: 0;
   }
 

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

@@ -0,0 +1 @@
+@import './fluent-definition.scss';