@syncfusion/ej2-dropdowns 25.2.7 → 26.1.38

package/styles/multi-select/fluent2.scss

@@ -0,0 +1,9 @@
+@import 'ej2-base/styles/definition/fluent2.scss';
+@import 'ej2-inputs/styles/input/fluent2-definition.scss';
+@import 'ej2-popups/styles/popup/fluent2-definition.scss';
+@import 'ej2-popups/styles/spinner/fluent2-definition.scss';
+@import 'ej2-buttons/styles/check-box/fluent2-definition.scss';
+@import '../drop-down-base/fluent2-definition.scss';
+@import 'fluent2-definition.scss';
+@import 'icons/fluent2.scss';
+@import 'all.scss';

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

@@ -1,18 +1,42 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -95,6 +119,9 @@
   height: 100%;
   min-height: 28px;
 }
+.e-multi-select-wrapper .e-searcher input[type=text]::-moz-selection {
+  background-color: #400074;
+}
 .e-multi-select-wrapper .e-searcher input[type=text]::selection {
   background-color: #400074;
 }
@@ -168,13 +195,15 @@
 }
 
 .e-multi-select-wrapper {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   cursor: text;
   line-height: normal;
   min-height: 30px;
   padding: 0 32px 0 2px;
   position: relative;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -191,7 +220,8 @@
   white-space: nowrap;
 }
 .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-overflow, .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-total {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -222,6 +252,7 @@
 
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-multi-searcher,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-multi-searcher {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   float: left;
@@ -229,6 +260,7 @@
 }
 .e-multiselect.e-control-container .e-multi-select-wrapper.e-delimiter .e-multi-searcher,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: none;
@@ -251,8 +283,9 @@
 }
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-delim-values,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-delim-values {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   display: inline;
   max-width: 100%;
   word-break: break-word;
@@ -261,12 +294,15 @@
 .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-clear-icon,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
   display: none;
-  -ms-flex-direction: row;
-      flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
   margin-top: -3.2em;
   outline: 0;
   padding: 0;
@@ -278,6 +314,7 @@
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
 .e-multiselect.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -357,8 +394,10 @@
 }
 
 .e-multi-select-wrapper .e-chips {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
@@ -408,6 +447,7 @@
 .e-multi-select-wrapper .e-chips-close {
   -ms-flex-item-align: center;
       align-self: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   float: right;
@@ -588,7 +628,9 @@
 .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
   -ms-flex-item-align: center;
       align-self: center;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   padding: 0 10px;
@@ -935,8 +977,9 @@ ejs-multiselect {
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  -ms-flex-align: normal;
-      align-items: normal;
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
 }
 
 .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
@@ -999,7 +1042,10 @@ ejs-multiselect {
 .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
-.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
+.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
+.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip,
+.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
+.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
   height: 24px;
 }
 
@@ -1008,10 +1054,6 @@ ejs-multiselect {
   height: 32px;
 }
 
-.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip {
-  height: 24px;
-}
-
 .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
@@ -1067,11 +1109,6 @@ ejs-multiselect {
   margin: 4px 0 0 4px;
 }
 
-.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
-.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
-  height: 24px;
-}
-
 .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
 .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
 .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
@@ -1176,7 +1213,8 @@ ejs-multiselect {
 }
 
 .e-multiselect {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
 /* stylelint-disable property-no-vendor-prefix */
@@ -1233,8 +1271,10 @@ ejs-multiselect {
 }
 
 .e-popup.e-multi-select-list-wrapper {
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
-  box-sizing: content-box;
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
   overflow: initial;
 }
 
@@ -1276,14 +1316,16 @@ ejs-multiselect {
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: #400074;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #fff;
   border: 1px solid #400074;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: #400074;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #fff;
   border: 1px solid #400074;
 }

package/styles/multi-select/highcontrast.css

@@ -1,18 +1,42 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -97,6 +121,9 @@
   height: 100%;
   min-height: 28px;
 }
+.e-multi-select-wrapper .e-searcher input[type=text]::-moz-selection {
+  background-color: #ffd939;
+}
 .e-multi-select-wrapper .e-searcher input[type=text]::selection {
   background-color: #ffd939;
 }
@@ -175,13 +202,15 @@
 }
 
 .e-multi-select-wrapper {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   cursor: text;
   line-height: normal;
   min-height: 30px;
   padding: 0 32px 0 2px;
   position: relative;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -198,7 +227,8 @@
   white-space: nowrap;
 }
 .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-overflow, .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-total {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -229,6 +259,7 @@
 
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-multi-searcher,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-multi-searcher {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   float: left;
@@ -236,6 +267,7 @@
 }
 .e-multiselect.e-control-container .e-multi-select-wrapper.e-delimiter .e-multi-searcher,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: none;
@@ -258,8 +290,9 @@
 }
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-delim-values,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-delim-values {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   display: inline;
   max-width: 100%;
   word-break: break-word;
@@ -268,12 +301,15 @@
 .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-clear-icon,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
   display: none;
-  -ms-flex-direction: row;
-      flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
   margin-top: -3.2em;
   outline: 0;
   padding: 0;
@@ -285,6 +321,7 @@
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
 .e-multiselect.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -364,8 +401,10 @@
 }
 
 .e-multi-select-wrapper .e-chips {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
@@ -415,6 +454,7 @@
 .e-multi-select-wrapper .e-chips-close {
   -ms-flex-item-align: center;
       align-self: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   float: right;
@@ -595,7 +635,9 @@
 .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
   -ms-flex-item-align: center;
       align-self: center;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   padding: 0 10px;
@@ -942,8 +984,9 @@ ejs-multiselect {
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  -ms-flex-align: normal;
-      align-items: normal;
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
 }
 
 .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
@@ -1006,7 +1049,10 @@ ejs-multiselect {
 .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
-.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
+.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
+.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip,
+.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
+.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
   height: 24px;
 }
 
@@ -1015,10 +1061,6 @@ ejs-multiselect {
   height: 32px;
 }
 
-.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip {
-  height: 24px;
-}
-
 .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
 .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
@@ -1074,11 +1116,6 @@ ejs-multiselect {
   margin: 4px 0 0 4px;
 }
 
-.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
-.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
-  height: 24px;
-}
-
 .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
 .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
 .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
@@ -1183,7 +1220,8 @@ ejs-multiselect {
 }
 
 .e-multiselect {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
 /* stylelint-disable property-no-vendor-prefix */
@@ -1240,8 +1278,10 @@ ejs-multiselect {
 }
 
 .e-popup.e-multi-select-list-wrapper {
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
-  box-sizing: content-box;
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
   overflow: initial;
 }
 
@@ -1283,14 +1323,16 @@ ejs-multiselect {
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: #ffd939;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #000;
   border: 1px solid #ffd939;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: #ffd939;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #000;
   border: 1px solid #ffd939;
 }

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

@@ -0,0 +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: '';
+  }
+}