@syncfusion/ej2-dropdowns 27.2.5 → 28.1.33

package/styles/bootstrap5.3-lite.css

@@ -82,6 +82,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 30px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -473,6 +477,10 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
@@ -668,6 +676,15 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-popup {
   border-color: var(--color-sf-border-light);
 }
@@ -765,9 +782,6 @@ ejs-dropdownlist {
 .e-ddt.e-show-chip .e-chips-close::before {
   font-size: 10px;
 }
-.e-ddt.e-show-chip .e-chips-close::before {
-  vertical-align: middle;
-}
 .e-ddt.e-show-chip .e-chips {
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -1077,6 +1091,10 @@ ejs-dropdownlist {
   content: "";
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-multi-select-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1838,6 +1856,15 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: var(--color-sf-content-text-color);
 }

package/styles/bootstrap5.3.css

@@ -82,6 +82,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 30px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -562,6 +566,10 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
@@ -757,6 +765,15 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-popup {
   border-color: var(--color-sf-border-light);
 }
@@ -952,9 +969,6 @@ ejs-dropdownlist {
 .e-ddt.e-show-chip .e-chips-close::before {
   font-size: 10px;
 }
-.e-ddt.e-show-chip .e-chips-close::before {
-  vertical-align: middle;
-}
 .e-ddt.e-show-chip .e-chips {
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -1328,6 +1342,10 @@ ejs-dropdownlist {
   content: "";
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-multi-select-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2089,6 +2107,15 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: var(--color-sf-content-text-color);
 }

package/styles/bootstrap5.css

@@ -78,6 +78,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 30px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -558,6 +562,10 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
@@ -752,6 +760,15 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-popup {
   border-color: #dee2e6;
 }
@@ -1393,6 +1410,10 @@ ejs-dropdownlist {
   content: "";
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-multi-select-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2154,6 +2175,15 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #212529;
 }

package/styles/combo-box/_tailwind3-definition.scss

@@ -0,0 +1,2 @@
+//default
+//enddefault

package/styles/combo-box/bds.css

@@ -0,0 +1,75 @@
+
+
+
+
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  color: var(--color-sf-text-primary);
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  -webkit-animation: none;
+          animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 2px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 6px;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: var(--color-sf-bg-primary);
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/bds.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import '../drop-down-list/bds-definition.scss';
+@import 'bds-definition.scss';
+@import 'all.scss';

package/styles/combo-box/highcontrast.css

@@ -11,7 +11,7 @@
 .e-ddl.e-popup .e-content.e-nodata {
   background-color: #000;
 }
-.e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
+.e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
   color: #ffd939;
 }
 .e-ddl.e-popup .e-input-group {

package/styles/combo-box/tailwind3.css

@@ -0,0 +1,101 @@
+
+
+
+
+.e-popup.e-ddl {
+  border-radius: 4px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  margin-top: 3px;
+}
+.e-popup.e-ddl .e-input-group {
+  width: auto;
+}
+.e-popup.e-ddl .e-input-group input {
+  line-height: 15px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+}
+
+.e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+}
+.e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
+  border: 0;
+}
+
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl input[readonly] {
+  background: transparent;
+}
+
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: var(--color-sf-content-bg-color-alt2);
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
+  background: transparent;
+  color: var(--color-sf-icon-color);
+}
+
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: var(--color-sf-icon-color);
+}
+
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: var(--color-sf-content-bg-color-alt2);
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
+.e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
+.e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
+  border: 0;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
+  background: transparent;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.e-ddl.e-popup .e-filter-parent .e-input-group,
+.e-ddl.e-popup .e-filter-parent {
+  background: var(--color-sf-content-bg-color);
+}
+
+.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 14px;
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/combo-box/tailwind3.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/definition/tailwind3.scss';
+@import '../drop-down-list/tailwind3-definition.scss';
+@import 'tailwind3-definition.scss';
+@import 'all.scss';

package/styles/drop-down-base/_bigger.scss

@@ -7,6 +7,9 @@
       #{if(&, '&', '*')} .e-list-item {
         line-height: $ddl-line-height;
         text-indent: $ddl-bigger-text-indent;
+        @if $skin-name == 'tailwind3' {
+          min-height: $ddl-line-height;
+        }
       }
 
       #{if(&, '&', '*')} .e-list-group-item,

package/styles/drop-down-base/_layout.scss

@@ -66,6 +66,10 @@
     position: absolute;
   }
 
+  .e-mention.e-popup .e-dropdownbase {
+    min-height: $ddl-list-line-height;
+  }
+
   .e-mention .e-dropdownbase .e-list-item .e-highlight {
     display: inline;
     font-weight: bold;
@@ -81,6 +85,9 @@
     border: $mention-chip-border;
     color: $mention-active-font-color;
     cursor: default;
+    @if $skin-name == 'tailwind3' {
+      font-weight: 500;
+    }
   }
 
   .e-mention.e-editable-element {

package/styles/drop-down-base/_tailwind3-definition.scss

@@ -0,0 +1,98 @@
+$ddl-list-line-height: 32px !default;
+$ddl-header-font-weight: 500 !default;
+$ddl-last-child-bottom-border: 0 !default;
+$ddl-default-font-family: $font-family !default;
+$ddl-line-height: 40px !default;
+$ddl-list-border-size: 0 !default;
+$ddl-list-bottom-border: $ddl-list-border-size !default;
+
+$ddl-list-font-size: $text-sm !default;
+$ddl-list-font-family: $font-family !default;
+$ddl-list-focus-border: 1px solid $border-focus !default;
+$ddl-group-list-padding-left: 12px !default;
+$ddl-group-list-small-padding-left: 8px !default;
+$ddl-group-list-bigger-padding-left: 16px !default;
+$ddl-group-list-bigger-small-padding-left: 14px !default;
+$ddl-list-header-padding-left: 12px !default;
+$ddl-list-header-small-padding-left: 8px !default;
+$ddl-list-header-bigger-small-padding-left: 14px !default;
+$ddl-list-header-bigger-padding-left: 16px !default;
+$ddl-list-text-indent: 12px !default;
+$ddl-list-rtl-padding-right: 0 !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
+$ddl-multi-column-border-width: 0 0 1px 0 !default;
+$ddl-bigger-list-header-font-size: $text-base !default;
+$ddl-group-list-font-size: $text-sm !default;
+$ddl-list-header-font-size: $text-sm !default;
+
+// Small Size
+
+$ddl-small-icon-font-size: $font-icon-14 !default;
+$ddl-small-line-height: 26px !default;
+$ddl-small-list-text-indent: 8px !default;
+$ddl-small-list-header-font-size: $text-xxs !default;
+
+// Touch Small
+
+$ddl-bigger-small-icon-font-size: $font-icon-18 !default;
+$ddl-bigger-small-line-height: 30px !default;
+$ddl-bigger-small-list-text-indent: 16px !default;
+$ddl-bigger-text-indent: 16px !default;
+$ddl-bigger-small-list-header-font-size: $text-xs !default;
+$ddl-group-list-item-text-intent: 0 !default;
+
+$ddl-list-border-color: $border-light !default;
+$ddl-list-gradient-color: $border-light !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $content-bg-color-alt2 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
+$ddl-list-bg-color: $flyout-bg-color !default;
+$ddl-list-header-bg-color: $transparent !default;
+$ddl-list-tap-color: transparent !default;
+$ddl-list-header-border-color: $border-light !default;
+$ddl-nodata-font-color: $content-text-color !default;
+$ddl-list-default-font-color: $flyout-text-color !default;
+$ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
+$ddl-list-active-font-color: $flyout-text-color-selected !default;
+$mention-active-font-color: $primary !default;
+$ddl-list-active-bg-color: $flyout-bg-color-selected !default;
+$ddl-list-hover-border-color: $content-bg-color !default;
+$ddl-list-hover-bg-color: $flyout-bg-color-hover !default;
+$ddl-list-hover-font-color: $flyout-text-color-hover !default;
+$ddl-list-header-font-color: $flyout-text-color !default;
+$ddl-default-header-font-color: $content-text-color-alt3 !default;
+$ddl-list-focus-color: $flyout-text-color-hover !default;
+$ddl-multi-column-border-color: $flyout-border !default;
+
+// Small Size color
+$ddl-small-list-font-color: $content-text-color !default;
+
+// Touch Small color
+$ddl-bigger-small-list-font-color: $content-text-color !default;
+
+@include export-module('dropdownbase-bootstrap5') {
+
+  .e-dropdownbase .e-list-group-item,
+  .e-fixed-head {
+    font-size: $text-xs;
+  }
+
+  .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: $text-xxs;
+  }
+
+  .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 6px 0 0;
+  }
+}