@syncfusion/ej2-dropdowns 25.2.3 → 25.2.5-30068

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

@@ -1,132 +1,130 @@
-@include export-module('dropdowntree-theme') {
-
-  .e-ddt {
-
-    .e-chips {
-      @if $ddt-skin-name == 'Material3' {
-        background: $ddt-chip-bg-color;
-        border-color: $ddt-chip-border-color;
-        border: 1px solid;
-      }
-      @else {
-        background-color: $ddt-chip-bg-color;
-      }
-
-      .e-chips-close::before {
-        color: $ddt-chip-close;
-      }
-
-      >.e-chipcontent {
-        color: $ddt-chip-font-color;
-      }
-
-      &:hover {
-        @if $ddt-skin-name == 'Material3' {
-          background: $ddt-chip-hover-bg-color;
-        }
-        @else {
-          background-color: $ddt-chip-hover-bg-color;
-        }
-
-        @if $ddt-skin-name == 'highcontrast' {
-          .e-chips-close::before {
-            color: $ddt-chip-hover-font-color;
-          }
-        }
-
-        @if $ddt-skin-name == 'tailwind' {
-          .e-chips-close::before {
-            color: $icon-color-hover;
-          }
-        }
-
-        >.e-chipcontent {
-          color: $ddt-chip-hover-font-color;
-        }
-      }
-    }
-
-    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
-      &.e-filled {
-        .e-chips {
-          background-color: $ddt-filled-chip-bg-color;
-        }
-      }
-    }
-
-    @if $ddt-skin-name == 'tailwind' {
-      &.e-disabled {
-        .e-chips {
-          background-color: $content-bg-color-alt3;
-
-          >.e-chipcontent {
-            color: $content-text-color-disabled;
-          }
-        }
-      }
-    }
-
-    .e-overflow {
-
-      @if $skin-name == 'bootstrap4' {
-        color: $ddt-remains-font-color;
-      }
-
-      .e-remain {
-        color: $ddt-remains-font-color;
-      }
-    }
-
-    &.e-input-group.e-control-wrapper,
-    &.e-float-input.e-control-wrapper {
-      .e-clear-icon {
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' {
-          background-color: $ddt-icon-bg-color;
-        }
-      }
-    }
-
-    &.e-input-group.e-control-wrapper .e-input[readonly],
-    &.e-float-input.e-control-wrapper input[readonly] {
-      @if $ddt-skin-name == 'bootstrap4' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
-        @if $ddt-skin-name == 'FluentUI' {
-          background: transparent;
-        }
-        @else {
-          background: $ddt-readonly-input-bg-color;
-        }
-
-        @if $ddt-skin-name == 'bootstrap5' {
-          ~ span.e-input-group-icon.e-ddt-icon {
-            background: transparent;
-            color: $icon-color;
-          }
-        }
-      }
-
-      &.e-disabled {
-        @if $ddt-skin-name == 'tailwind' {
-          background-color: $content-bg-color-alt1;
-          color: $content-text-color-disabled;
-        }
-      }
-    }
-
-    &.e-popup {
-      background: $ddt-popup-background-color;
-      border-color: $ddt-popup-border-color;
-
-      .e-popup-content.e-no-data {
-        color: $ddt-nodata-font-color;
-      }
-
-      .e-selectall-parent {
-        border-bottom-color: $ddt-popup-reorder-border;
-
-        .e-all-text {
-          color: $ddt-select-all-font-color;
-        }
-      }
-    }
-  }
-}
+@mixin chip-style($bg-color, $close-color, $font-color) {
+
+  @if $ddt-skin-name == 'Material3' {
+    background: $bg-color;
+  }
+  @else {
+    background-color: $bg-color;
+  }
+  .e-chips-close::before {
+    color: $close-color;
+  }
+
+  > .e-chipcontent {
+    color: $font-color;
+  }
+}
+
+@include export-module('dropdowntree-theme') {
+
+  .e-ddt {
+
+    .e-chips {
+      @include chip-style($ddt-chip-bg-color, $ddt-chip-close, $ddt-chip-font-color);
+      @if $ddt-skin-name == 'Material3' {
+        border-color: $ddt-chip-border-color;
+        border: 1px solid;
+      }
+      &:hover {
+        @if $ddt-skin-name == 'highcontrast' {
+          @include chip-style($ddt-chip-hover-bg-color, $ddt-chip-hover-font-color, $ddt-chip-hover-font-color);
+        }
+        @if $ddt-skin-name == 'tailwind' {
+          @include chip-style($ddt-chip-hover-bg-color, $icon-color-hover, $ddt-chip-hover-font-color);
+        }
+      }
+    }
+
+    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
+      &.e-filled {
+        .e-chips {
+          background-color: $ddt-filled-chip-bg-color;
+        }
+      }
+    }
+
+    @if $ddt-skin-name == 'tailwind' {
+      &.e-disabled {
+        @include chip-style($content-bg-color-alt3, $content-text-color-disabled, $content-text-color-disabled);
+      }
+    }
+
+    .e-overflow {
+
+      @if $skin-name == 'bootstrap4' {
+        color: $ddt-remains-font-color;
+      }
+
+      .e-remain {
+        color: $ddt-remains-font-color;
+      }
+    }
+
+    &.e-input-group.e-control-wrapper,
+    &.e-float-input.e-control-wrapper {
+      .e-clear-icon {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'fluent2' {
+          background-color: $ddt-icon-bg-color;
+        }
+      }
+    }
+
+    @if ($ddt-skin-name == 'fluent2') {
+      &.e-input-group.e-control-wrapper:focus,
+      &.e-float-input.e-control-wrapper:focus {
+        border-color: $ddt-input-border-color;
+      }
+  
+      &.e-input-group.e-control-wrapper:active,
+      &.e-float-input.e-control-wrapper:active {
+        border-color: $ddt-input-border-color;
+      }
+    }
+
+    &.e-input-group.e-control-wrapper .e-input[readonly],
+    &.e-float-input.e-control-wrapper input[readonly] {
+      @if $ddt-skin-name == 'bootstrap4' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
+        @if $ddt-skin-name == 'FluentUI' {
+          background: transparent;
+        }
+        @else {
+          background: $ddt-readonly-input-bg-color;
+        }
+
+        @if $ddt-skin-name == 'bootstrap5' {
+          ~ span.e-input-group-icon.e-ddt-icon {
+            background: transparent;
+            color: $icon-color;
+          }
+        }
+      }
+
+      &.e-disabled {
+        @if $ddt-skin-name == 'tailwind' {
+          background-color: $content-bg-color-alt1;
+          color: $content-text-color-disabled;
+        }
+      }
+    }
+
+    &.e-popup {
+      background: $ddt-popup-background-color;
+      border-color: $ddt-popup-border-color;
+
+      .e-popup-content.e-no-data {
+        color: $ddt-nodata-font-color;
+      }
+
+      .e-selectall-parent {
+        border-bottom-color: $ddt-popup-reorder-border;
+        
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
+        .e-all-text {
+          color: $ddt-select-all-font-color;
+        }
+      }
+    }
+  }
+}

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

@@ -95,13 +95,15 @@
   width: 100%;
 }
 .e-ddt.e-show-chip .e-chips-close {
-  line-height: 30px;
   min-height: 30px;
   min-width: 30px;
+  line-height: 30px;
   text-align: center;
 }
 .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 {
@@ -179,6 +181,7 @@
 .e-ddt .e-dropdowntree.e-chip-input,
 .e-ddt input[readonly].e-input.e-chip-input {
   width: 0;
+  visibility: hidden;
 }
 .e-ddt.e-popup {
   border: 1px solid #414141;
@@ -208,18 +211,17 @@
   font-size: 14px;
   margin: 10px;
 }
-.e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
-  padding: 0 12px;
-}
 .e-ddt.e-popup .e-filter-wrap {
-  border: #414141;
   border-top-width: 0;
   display: block;
   padding: 5px 8px;
-}
-.e-ddt.e-popup .e-filter-wrap {
+  border: #414141;
   border-bottom: 1px solid #484848;
 }
+.e-ddt.e-popup .e-filter-wrap .e-input,
+.e-ddt.e-popup .e-filter-wrap .e-input:focus {
+  padding: 0 12px;
+}
 .e-ddt.e-popup .e-filter-wrap .e-input-group {
   margin-bottom: 0;
 }
@@ -234,8 +236,8 @@
   cursor: default;
   font-family: inherit;
   font-size: 14px;
-  padding: 14px 16px;
   text-align: center;
+  padding: 14px 16px;
 }
 .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
   display: none;
@@ -289,16 +291,16 @@
   padding: 6px 12px 0 12px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-left: 32px;
   margin-right: 1px;
+  margin-left: 32px;
 }
 .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
-  margin-left: 32px;
   margin-right: 1px;
+  margin-left: 32px;
 }
 .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-left: 64px;
   margin-right: 1px;
+  margin-left: 64px;
 }
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-clear-icon,
@@ -371,18 +373,18 @@
 }
 .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-left: 38px;
   margin-right: 1px;
+  margin-left: 38px;
 }
 .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-left: 38px;
   margin-right: 1px;
+  margin-left: 38px;
 }
 .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-left: 76px;
-  margin-right: 1px;
+  margin-right: 76px;
+  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,
@@ -400,12 +402,6 @@
 .e-ddt .e-chips > .e-chipcontent {
   color: #f0f0f0;
 }
-.e-ddt .e-chips:hover {
-  background-color: #484848;
-}
-.e-ddt .e-chips:hover > .e-chipcontent {
-  color: #f0f0f0;
-}
 .e-ddt .e-overflow .e-remain {
   color: #8d8d8d;
 }
@@ -422,6 +418,9 @@
 .e-ddt.e-popup .e-selectall-parent {
   border-bottom-color: #484848;
 }
+.e-ddt.e-popup .e-selectall-parent:focus {
+  background: #414141;
+}
 .e-ddt.e-popup .e-selectall-parent .e-all-text {
   color: #f0f0f0;
 }

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

@@ -96,13 +96,15 @@
   width: 100%;
 }
 .e-ddt.e-show-chip .e-chips-close {
-  line-height: 24px;
   min-height: 28px;
   min-width: 30px;
+  line-height: 24px;
   text-align: center;
 }
 .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 {
@@ -180,6 +182,7 @@
 .e-ddt .e-dropdowntree.e-chip-input,
 .e-ddt input[readonly].e-input.e-chip-input {
   width: 0;
+  visibility: hidden;
 }
 .e-ddt.e-popup {
   border: 1px solid #ccc;
@@ -209,18 +212,17 @@
   font-size: 14px;
   margin: 10px;
 }
-.e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
-  padding: 0 12px;
-}
 .e-ddt.e-popup .e-filter-wrap {
-  border: none;
   border-top-width: 0;
   display: block;
   padding: 5px 8px;
-}
-.e-ddt.e-popup .e-filter-wrap {
+  border: none;
   border-bottom: 1px solid #ccc;
 }
+.e-ddt.e-popup .e-filter-wrap .e-input,
+.e-ddt.e-popup .e-filter-wrap .e-input:focus {
+  padding: 0 12px;
+}
 .e-ddt.e-popup .e-filter-wrap .e-input-group {
   margin-bottom: 0;
 }
@@ -235,8 +237,8 @@
   cursor: default;
   font-family: inherit;
   font-size: 14px;
-  padding: 14px 16px;
   text-align: center;
+  padding: 14px 16px;
 }
 .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
   display: none;
@@ -290,16 +292,16 @@
   padding: 6px 12px 0 12px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-left: 32px;
   margin-right: 1px;
+  margin-left: 32px;
 }
 .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
-  margin-left: 32px;
   margin-right: 1px;
+  margin-left: 32px;
 }
 .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-left: 64px;
   margin-right: 1px;
+  margin-left: 64px;
 }
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-clear-icon,
@@ -372,18 +374,18 @@
 }
 .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-left: 38px;
   margin-right: 1px;
+  margin-left: 38px;
 }
 .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-left: 38px;
   margin-right: 1px;
+  margin-left: 38px;
 }
 .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-left: 76px;
-  margin-right: 1px;
+  margin-right: 76px;
+  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,
@@ -401,12 +403,6 @@
 .e-ddt .e-chips > .e-chipcontent {
   color: #333;
 }
-.e-ddt .e-chips:hover {
-  background-color: #d4d4d4;
-}
-.e-ddt .e-chips:hover > .e-chipcontent {
-  color: #333;
-}
 .e-ddt .e-overflow .e-remain {
   color: #888;
 }
@@ -423,6 +419,9 @@
 .e-ddt.e-popup .e-selectall-parent {
   border-bottom-color: #e6e6e6;
 }
+.e-ddt.e-popup .e-selectall-parent:focus {
+  background: #f5f5f5;
+}
 .e-ddt.e-popup .e-selectall-parent .e-all-text {
   color: #333;
 }

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

@@ -106,13 +106,15 @@
   width: 100%;
 }
 .e-ddt.e-show-chip .e-chips-close {
-  line-height: 24px;
   min-height: 24px;
   min-width: 24px;
+  line-height: 24px;
   text-align: center;
 }
 .e-ddt.e-show-chip .e-chips-close::before {
   font-size: 8px;
+}
+.e-ddt.e-show-chip .e-chips-close::before {
   vertical-align: middle;
 }
 .e-ddt.e-show-chip .e-chips {
@@ -190,6 +192,7 @@
 .e-ddt .e-dropdowntree.e-chip-input,
 .e-ddt input[readonly].e-input.e-chip-input {
   width: 0;
+  visibility: hidden;
 }
 .e-ddt.e-popup {
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -220,18 +223,17 @@
   font-size: 14px;
   margin: 10px;
 }
-.e-ddt.e-popup .e-filter-wrap .e-input, .e-ddt.e-popup .e-filter-wrap .e-input:focus {
-  padding: 0 20px;
-}
 .e-ddt.e-popup .e-filter-wrap {
-  border: rgba(0, 0, 0, 0.12);
   border-top-width: 0;
   display: block;
   padding: 0;
-}
-.e-ddt.e-popup .e-filter-wrap {
+  border: rgba(0, 0, 0, 0.12);
   background: rgba(0, 0, 0, 0.03);
 }
+.e-ddt.e-popup .e-filter-wrap .e-input,
+.e-ddt.e-popup .e-filter-wrap .e-input:focus {
+  padding: 0 20px;
+}
 .e-ddt.e-popup .e-filter-wrap .e-input-group {
   margin-bottom: 0;
   background: rgba(0, 0, 0, 0.03);
@@ -247,8 +249,8 @@
   cursor: default;
   font-family: inherit;
   font-size: 14px;
-  padding: 14px 16px;
   text-align: center;
+  padding: 14px 16px;
 }
 .e-ddt.e-popup .e-popup-content.e-no-data .e-treeview {
   display: none;
@@ -302,16 +304,16 @@
   padding: 4px 8px 0 8px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-left: 23px;
   margin-right: 1px;
+  margin-left: 23px;
 }
 .e-ddt.e-rtl.e-show-clear .e-chips-wrapper .e-chips:last-child {
-  margin-left: 24px;
   margin-right: 1px;
+  margin-left: 24px;
 }
 .e-ddt.e-rtl.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-  margin-left: 48px;
   margin-right: 1px;
+  margin-left: 48px;
 }
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon,
 .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-rtl.e-input-group.e-control-wrapper.e-show-text .e-clear-icon,
@@ -362,9 +364,9 @@
 }
 .e-bigger .e-ddt.e-show-chip .e-chips-close,
 .e-ddt.e-bigger.e-show-chip .e-chips-close {
-  line-height: 27px;
   min-height: 30px;
   min-width: 30px;
+  line-height: 27px;
 }
 .e-bigger .e-ddt.e-show-chip .e-chips-close::before,
 .e-ddt.e-bigger.e-show-chip .e-chips-close::before {
@@ -399,18 +401,18 @@
 }
 .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-left: 32px;
   margin-right: 1px;
+  margin-left: 32px;
 }
 .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-left: 35px;
   margin-right: 1px;
+  margin-left: 35px;
 }
 .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-left: 68px;
-  margin-right: 1px;
+  margin-right: 68px;
+  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,
@@ -428,12 +430,6 @@
 .e-ddt .e-chips > .e-chipcontent {
   color: #fff;
 }
-.e-ddt .e-chips:hover {
-  background-color: #5a6268;
-}
-.e-ddt .e-chips:hover > .e-chipcontent {
-  color: #fff;
-}
 .e-ddt .e-overflow {
   color: #6c757d;
 }
@@ -456,6 +452,9 @@
 .e-ddt.e-popup .e-selectall-parent {
   border-bottom-color: rgba(0, 0, 0, 0.15);
 }
+.e-ddt.e-popup .e-selectall-parent:focus {
+  background: #f2f4f6;
+}
 .e-ddt.e-popup .e-selectall-parent .e-all-text {
   color: #212529;
 }