@syncfusion/ej2-dropdowns 31.2.16 → 32.1.19

package/styles/drop-down-base/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-dropdownbase .e-list-item.e-active,
 .e-dropdownbase .e-list-item.e-active.e-hover {
   font-weight: 400;
@@ -32,7 +112,7 @@
 
 /* stylelint-disable */
 .e-dropdownbase .e-list-item {
-  border-radius: 6px !important;
+  border-radius: calc(var(--e-radius) * 0.375) !important;
 }
 
 .e-dropdownbase {
@@ -80,7 +160,7 @@
 .e-popup.e-mention .e-dropdownbase.e-nodata {
   color: var(--color-sf-content-text-color);
   cursor: default;
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   padding: 14px 16px;
   text-align: center;
@@ -108,7 +188,7 @@
 .e-mention .e-mention-chip,
 .e-mention .e-mention-chip:hover {
   background: var(--color-sf-content-bg-color-alt2);
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
   border: none;
   color: var(--color-sf-primary);
   cursor: default;
@@ -176,7 +256,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   line-height: 32px;
   min-height: 32px;
@@ -190,9 +270,9 @@
 .e-fixed-head {
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color-alt2);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 32px;
   min-height: 32px;
   padding-left: 12px;
@@ -249,9 +329,9 @@
   border-style: solid;
   border-width: 0 0 1px 0;
   color: var(--color-sf-content-text-color-alt2);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   text-indent: 10px;
 }
 
@@ -307,7 +387,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   text-indent: 8px;
   font-size: 14px;
   padding-right: 16px;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-base/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-base/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'material-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'material-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-base/material3-dark.css

@@ -1,5 +1,85 @@
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-dropdownbase .e-list-item .e-list-icon {
   padding: 0 16px 0 0;
 }
@@ -81,7 +161,7 @@
 
 .e-mention .e-mention-chip,
 .e-mention .e-mention-chip:hover {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
   border: none;
   color: rgba(var(--color-sf-primary));
   cursor: default;

package/styles/drop-down-base/material3-dark.scss

@@ -1,5 +1,4 @@
-
-
-@import 'material3-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'material3-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-base/material3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-dropdownbase .e-list-item .e-list-icon {
   padding: 0 16px 0 0;
 }
@@ -83,7 +163,7 @@
 
 .e-mention .e-mention-chip,
 .e-mention .e-mention-chip:hover {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
   border: none;
   color: rgba(var(--color-sf-primary));
   cursor: default;

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

@@ -1,5 +1,4 @@
-
-
-@import 'material3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'material3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-base/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'tailwind-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'tailwind-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-base/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
   font-size: 12px;
@@ -61,13 +131,14 @@
 .e-dropdownbase.e-content {
   overflow: auto;
   position: relative;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 
 .e-popup.e-ddl .e-dropdownbase.e-nodata,
 .e-popup.e-mention .e-dropdownbase.e-nodata {
   color: var(--color-sf-content-text-color);
   cursor: default;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   padding: 14px 16px;
   text-align: center;
@@ -95,7 +166,7 @@
 .e-mention .e-mention-chip,
 .e-mention .e-mention-chip:hover {
   background: var(--color-sf-content-bg-color-alt2);
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
   border: none;
   color: var(--color-sf-primary);
   cursor: default;
@@ -164,7 +235,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   line-height: 32px;
   min-height: 32px;
@@ -177,7 +248,7 @@
 .e-fixed-head {
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   line-height: 32px;
@@ -235,7 +306,7 @@
   border-style: solid;
   border-width: 0 0 1px 0;
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   text-indent: 10px;
@@ -293,7 +364,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   text-indent: 12px;
   font-size: 14px;
   padding-right: 16px;

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'tailwind3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'tailwind3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-list/_all.scss

@@ -1,3 +1,2 @@
-@import 'layout.scss';
-
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/drop-down-list/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
@@ -17,8 +20,12 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
-$border-type: solid !default;
-$input-margin-top: 24px !default;
+$ddl-input-bgr-small-clear-margin: 0 4px !default;
+$ddl-input-popup-padding: 4px 0 !default;
+$ddl-input-zero-padding: 0 !default;
+$ddl-bigger-filter-parent-padding: 8px 16px 8px 0 !default;
+$ddl-bigger-small-filtr-parent: 8px 16px !default;
+$ddl-bigger-filter-input-parent-padding: 4px 16px 4px 0 !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -29,7 +36,6 @@ $ddl-bigger-small-list-font-size: $text-sm !default;
 $ddl-bigger-small-group-list-font-size: $text-xs !default;
 
 // color
-
 $ddl-default-border-color: $border-light !default;
 $ddl-active-font-color: $content-text-color-selected !default;
 $ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
@@ -37,8 +43,22 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$ddl-bgr-input-filter-margin-left: -20px !default;
+$ddl-bgr-content-min-height: 40px !default;
+$ddl-border-width: 1px !default;
+$ddl-zero-margin-padding: 0 !default;
+$ddl-content-nim-height: 33px !default;
+$ddl-popup-resize-height: 15px !default;
+$ddl-bgr-popup-clear-min-width: 16px !default;
+$ddl-bgr-popup-clear-min-height: 16px !default;
+$ddl-bgr-small-popup-clear-min-height: 18px !default;
+$ddl-bgr-small-popup-clear-min-width: 18px !default;
+$ddl-zero-height: 0 !default;
+$ddl-popup-resize-width: 15px !default;
 $input-border: $ddl-zero-value solid !default;
 
+$ddl-full-width: 100%;
+
 @include export-module('dropdownlist-bds') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {
     transform: rotate(0deg);