@syncfusion/ej2-dropdowns 31.2.16 → 32.1.19

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

@@ -1,9 +1,15 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 /* stylelint-disable */
 $ddt-skin-name: $skin-name !default;
 $ddt-box-shadow: none !default;
 $ddt-close-icon-bottom: 8px !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-width: 30px !default;
+$ddt-nrml-show-dd-icon-margin-left: 30px !default;
+$ddt-dd-icon-margin-right: 30px !default;
 $ddt-close-icon-width: 20px !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-filter-border: none !default;
@@ -11,7 +17,7 @@ $ddt-filter-top-border: 0 !default;
 $ddt-filter-padding: 6px 7px !default;
 $ddt-chip-margin: 2px !default;
 $ddt-chip-padding: 0 8px 0 8px !default;
-$ddt-chip-radius: 6px !default;
+$ddt-chip-radius: $radius-6 !default;
 $ddt-chip-height: 24px !default;
 $ddt-chip-bigger-height: 32px !default;
 $ddt-close-icon-bigger-min-height: 24px !default;
@@ -35,7 +41,7 @@ $ddt-rtl-select-all-text-indent: 36px !default;
 $ddt-select-all-bigger-text-indent: 36px !default;
 $ddt-rtl-select-all-bigger-text-indent: 32px !default;
 $ddt-select-all-text-font-size: $text-sm !default;
-$ddt-popup-radius: 6px !default;
+$ddt-popup-radius: $radius-6 !default;
 $ddt-popup-reorder-border: $border-light !default;
 $ddt-popup-margin: 8px !default;
 $ddt-treeview-padding: 6px 8px !default;
@@ -59,6 +65,37 @@ $ddt-big-select-all-font-size: 16px !default;
 $ddt-big-select-all-text-margin: 0 8px !default;
 $ddt-rtl-big-select-all-text-margin: 0 8px !default;
 $ddt-select-all-checkbox-bottom: 2px !default;
+$ddt-big-chip-font-size: 14px !default;
+$ddt-big-chip-line-height: 20px !default;
+$ddt-big-chipcontent-padding: 0 6px 0 4px !default;
+$ddt-big-chip-close-margin: 0 6px 2px 0 !default;
+$ddt-big-chip-close-font-size: 16px !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-popup-radius: $radius-8 !default;
+$ddt-popup-margin: 8px !default;
+$ddt-popup-filter-wrap-padding: 8px 9px !default;
+$ddt-show-dd-icon-margin-left: 4px !default;
+$ddt-show-dd-icon-margin-right: 1px !default; 
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-chips-wrapper-margin: 2px 0 2px 6px !default;
+$ddt-nrml-chip-border: 1px !default;
+$ddt-nrml-chipcontent-font-size: 12px !default;
+$ddt-nrml-chipcontent-line-height: 16px !default;
+$ddt-nrml-popup-margin-top: 4px !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding: 14px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 1px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-chip-content-height: 20px !default;
+$ddt-chips-close-height: 16px !default;
+$ddt-nrml-chipcontent-font-weight: $font-weight-medium !default;
+$ddt-treeview-border-none: none !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
 
 // color variables
 $ddt-chip-bg-color: $secondary-bg-color !default;

package/styles/drop-down-tree/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/drop-down-tree/_theme.scss

@@ -1,4 +1,6 @@
-@mixin chip-style($bg-color, $close-color, $font-color) {
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@mixin chip-style($bg-color, $close-color, $font-color) {
 
   @if $ddt-skin-name == 'Material3' {
     background: $bg-color;
@@ -23,7 +25,7 @@
       @include chip-style($ddt-chip-bg-color, $ddt-chip-close, $ddt-chip-font-color);
       @if $ddt-skin-name == 'Material3' or $theme-name == 'fluent2-highcontrast' {
         border-color: $ddt-chip-border-color;
-        border: 1px solid;
+        border: $ddt-chip-border;
       }
       &:hover {
         @if $ddt-skin-name == 'highcontrast' {

package/styles/drop-down-tree/bds.css

@@ -455,7 +455,7 @@
   font-family: inherit;
   font-size: 14px;
   text-align: center;
-  padding: 8px 16px;
+  padding: 14px 16px;
 }
 .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
   display: none;
@@ -509,15 +509,15 @@
   padding: 3px 12px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-right: 4px;
+  margin-right: 1px;
   margin-left: 18px;
 }
 .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
-  margin-right: 4px;
+  margin-right: 1px;
   margin-left: 18px;
 }
 .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-right: 4px;
+  margin-right: 1px;
   margin-left: 45px;
 }
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
@@ -706,16 +706,16 @@
 }
 .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
 .e-ddt.e-bigger.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-right: 4px;
+  margin-right: 1px;
 }
 .e-bigger .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child,
 .e-ddt.e-bigger.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
-  margin-right: 4px;
+  margin-right: 1px;
 }
 .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
 .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 52px;
-  margin-left: 4px;
+  margin-left: 1px;
 }
 .e-bigger .e-ddt.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-rtl.e-show-text.e-input-group.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,

package/styles/drop-down-tree/bds.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'ej2-navigations/styles/treeview/bds-definition.scss';
-@import '../drop-down-base/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'ej2-navigations/styles/treeview/bds-definition' as *;
+@use '../drop-down-base/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/bootstrap-dark.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap-dark-definition.scss';
-@import '../drop-down-base/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-inputs/styles/input/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap-dark-definition' as *;
+@use '../drop-down-base/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/bootstrap.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-inputs/styles/input/bootstrap-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap-definition.scss';
-@import '../drop-down-base/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-inputs/styles/input/bootstrap-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap-definition' as *;
+@use '../drop-down-base/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/bootstrap4.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-inputs/styles/input/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap4-definition.scss';
-@import '../drop-down-base/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-inputs/styles/input/bootstrap4-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap4-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap4-definition' as *;
+@use '../drop-down-base/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'icons/bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/bootstrap5-dark.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-inputs/styles/input/bootstrap5-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap5-dark-definition.scss';
-@import '../drop-down-base/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-inputs/styles/input/bootstrap5-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap5-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap5-dark-definition' as *;
+@use '../drop-down-base/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/bootstrap5.3.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 */
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
@@ -152,7 +232,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-inline-box;
@@ -236,7 +316,7 @@
   position: absolute;
 }
 .e-ddt.e-popup .e-selectall-parent {
-  border-bottom: 1px solid;
+  border-bottom: 1 solid;
   cursor: pointer;
   display: block;
   line-height: 34px;
@@ -467,7 +547,7 @@
 .e-bigger .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
 .e-ddt.e-bigger.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 52px;
-  margin-left: 1px;
+  margin-left: 1;
 }
 .e-bigger .e-ddt.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-rtl.e-show-text.e-input-group.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-rtl.e-show-chip.e-input-group.e-show-dd-icon .e-clear-icon,

package/styles/drop-down-tree/bootstrap5.3.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-inputs/styles/input/bootstrap5.3-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5.3-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5.3-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap5.3-definition.scss';
-@import '../drop-down-base/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'icons/bootstrap5.3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-inputs/styles/input/bootstrap5.3-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap5.3-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5.3-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap5.3-definition' as *;
+@use '../drop-down-base/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'icons/bootstrap5.3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/bootstrap5.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-inputs/styles/input/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap5-definition.scss';
-@import '../drop-down-base/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-inputs/styles/input/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap5-definition' as *;
+@use '../drop-down-base/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'icons/bootstrap5' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/fabric-dark.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-inputs/styles/input/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/treeview/fabric-dark-definition.scss';
-@import '../drop-down-base/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-inputs/styles/input/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/popup/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-dark-definition' as *;
+@use 'ej2-navigations/styles/treeview/fabric-dark-definition' as *;
+@use '../drop-down-base/fabric-dark-definition' as *;
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/fabric.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-inputs/styles/input/fabric-definition.scss';
-@import 'ej2-popups/styles/popup/fabric-definition.scss';
-@import 'ej2-popups/styles/spinner/fabric-definition.scss';
-@import 'ej2-navigations/styles/treeview/fabric-definition.scss';
-@import '../drop-down-base/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-inputs/styles/input/fabric-definition' as *;
+@use 'ej2-popups/styles/popup/fabric-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-definition' as *;
+@use 'ej2-navigations/styles/treeview/fabric-definition' as *;
+@use '../drop-down-base/fabric-definition' as *;
+@use 'fabric-definition' as *;
+@use 'icons/fabric' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/fluent-dark.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'ej2-inputs/styles/input/fluent-dark-definition.scss';
-@import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/treeview/fluent-dark-definition.scss';
-@import '../drop-down-base/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-inputs/styles/input/fluent-dark-definition' as *;
+@use 'ej2-popups/styles/popup/fluent-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent-dark-definition' as *;
+@use 'ej2-navigations/styles/treeview/fluent-dark-definition' as *;
+@use '../drop-down-base/fluent-dark-definition' as *;
+@use 'fluent-dark-definition' as *;
+@use 'icons/fluent-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/fluent.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-inputs/styles/input/fluent-definition.scss';
-@import 'ej2-popups/styles/popup/fluent-definition.scss';
-@import 'ej2-popups/styles/spinner/fluent-definition.scss';
-@import 'ej2-navigations/styles/treeview/fluent-definition.scss';
-@import '../drop-down-base/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-inputs/styles/input/fluent-definition' as *;
+@use 'ej2-popups/styles/popup/fluent-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent-definition' as *;
+@use 'ej2-navigations/styles/treeview/fluent-definition' as *;
+@use '../drop-down-base/fluent-definition' as *;
+@use 'fluent-definition' as *;
+@use 'icons/fluent' as *;
+@use 'all' as *;
+@use 'bigger' as *;