@syncfusion/ej2-dropdowns 25.2.7 → 26.1.35

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

@@ -1,4 +1,3 @@
-/* stylelint-disable */
 $ddt-skin-name: 'Material3' !default;
 $ddt-box-shadow: $shadow-md !default;
 $ddt-close-icon-min-height: 32px !default;
@@ -34,6 +33,7 @@ $ddt-select-all-checkbox-margin: 0 12px !default;
 $ddt-select-all-text-indent: 0 !default;
 $ddt-select-all-bigger-text-indent: 0 !default;
 $ddt-select-all-text-font-size: $text-sm !default;
+$ddt-popup-radius: 4px !default;
 $ddt-popup-reorder-border: rgba($border-light) !default;
 $ddt-chip-width: calc(100% - 2px) !default;
 $ddt-chip-ddi-width: calc(100% - 31px) !default;
@@ -46,7 +46,7 @@ $ddt-remains-padding: 0 0 0 8px !default;
 $ddt-rtl-remains-padding: 0 8px 0 0 !default;
 $ddt-chip-font-size: $text-sm !default;
 $ddt-overflow-count-padding: 5px 4px !default;
-$ddt-delim-padding : 0 8px !default;
+$ddt-delim-padding: 0 8px !default;
 $ddt-delim-bigger-padding: 0 12px !default;
 $ddt-remains-count-padding-top: 6px !default;
 $ddt-outline-padding: 10px 12px !default;
@@ -60,8 +60,6 @@ $ddt-list-filter-text-indent: 8px 16px 8px !default;
 $ddt-rtl-close-left: -7px !default;
 $ddt-dd-icon-bigger-width: 20px !default;
 $ddt-select-all-height: 36px !default;
-
-// color variables
 $ddt-chip-bg-color: $secondary-bg-color !default;
 $ddt-chip-border-color: rgba($border) !default;
 $ddt-popup-background-color: $flyout-bg-color !default;
@@ -74,4 +72,4 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
 $ddt-select-all-font-color: rgba($content-text-color) !default;
 $ddt-remains-font-color: $grey-600 !default;
 $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
-$ddt-item-hover-bg: $content-bg-color-hover !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;

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

@@ -3,8 +3,8 @@ $ddt-skin-name: $skin-name !default;
 $ddt-box-shadow: $shadow-lg !default;
 $ddt-close-icon-bottom: 6px !default;
 $ddt-dd-icon-bottom: 0 !default;
-$ddt-dd-icon-width: 20px !default;
-$ddt-close-icon-width: 20px !default;
+$ddt-dd-icon-width: 18px !default;
+$ddt-close-icon-width: 18px !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-filter-border: 1px solid $border-light !default;
 $ddt-filter-top-border: 0 !default;
@@ -26,12 +26,16 @@ $ddt-chip-icon-line-height: 10px !default;
 $ddt-chip-close-width: 16px !default;
 $ddt-last-chip-right-margin: 45px !default;
 $ddt-last-chip-bigger-right-margin: 52px !default;
+$ddt-select-all-padding: 8px 12px !default;
+$ddt-big-select-all-padding: 12px 16px !default;
 $ddt-select-all-height: 22px !default;
 $ddt-select-all-checkbox-margin: 0 12px !default;
 $ddt-select-all-text-indent: 0 !default;
 $ddt-select-all-bigger-text-indent: 0 !default;
 $ddt-select-all-text-font-size: $text-sm !default;
+$ddt-popup-radius: 4px !default;
 $ddt-popup-reorder-border: $border-light !default;
+$ddt-popup-margin: 8px !default;
 $ddt-chip-width: calc(100% - 6px) !default;
 $ddt-chip-ddi-width: calc(100% - 26px) !default;
 $ddt-chip-ci-width: calc(100% - 29px) !default;
@@ -41,6 +45,7 @@ $ddt-big-chip-ci-width: calc(100% - 35px) !default;
 $ddt-big-chip-ddi-ci-width: calc(100% - 60px) !default;
 $ddt-remains-padding: 0 0 0 4px !default;
 $ddt-rtl-remains-padding: 0 4px 0 0 !default;
+$ddt-remains-font-size: $text-base !default;
 $ddt-chip-font-size: $text-sm !default;
 $ddt-overflow-count-padding-top: 3px !default;
 $ddt-delim-padding : 3px 12px !default;

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

@@ -1,47 +1,36 @@
-@include export-module('dropdowntree-theme') {
+@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' {
-        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;
-          }
+          @include chip-style($ddt-chip-hover-bg-color, $ddt-chip-hover-font-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;
+          @include chip-style($ddt-chip-hover-bg-color, $icon-color-hover, $ddt-chip-hover-font-color);
         }
       }
     }
@@ -56,13 +45,7 @@
 
     @if $ddt-skin-name == 'tailwind' {
       &.e-disabled {
-        .e-chips {
-          background-color: $content-bg-color-alt3;
-
-          >.e-chipcontent {
-            color: $content-text-color-disabled;
-          }
-        }
+        @include chip-style($content-bg-color-alt3, $content-text-color-disabled, $content-text-color-disabled);
       }
     }
 
@@ -80,7 +63,7 @@
     &.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' {
+        @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' and $ddt-skin-name != 'fluent2' {
           background-color: $ddt-icon-bg-color;
         }
       }
@@ -122,7 +105,7 @@
 
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
-
+        
         &:focus {
           background: $ddt-item-hover-bg;
         }

package/styles/drop-down-tree/bootstrap-dark.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);
   }
 }
@@ -43,12 +67,20 @@
   outline: none;
 }
 .e-ddt .e-ddt-icon::before {
-  transform: rotate(0deg);
+  -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-ddt.e-icon-anim .e-ddt-icon::before {
-  transform: rotate(180deg);
+  -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-ddt .e-ddt-hidden {
   border: 0;
@@ -57,7 +89,8 @@
   width: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
-  box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
   min-height: 32px;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
@@ -88,6 +121,7 @@
   padding-right: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -95,20 +129,25 @@
   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 {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   border-radius: 4px;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
@@ -135,7 +174,8 @@
   padding: 6px 12px 0 12px;
 }
 .e-ddt .e-overflow.e-total-count {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -182,7 +222,8 @@
 }
 .e-ddt.e-popup {
   border: 1px solid #414141;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
   position: absolute;
 }
 .e-ddt.e-popup .e-selectall-parent {
@@ -208,18 +249,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 +274,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 +329,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 +411,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 +440,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;
 }

package/styles/drop-down-tree/bootstrap.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);
   }
 }
@@ -44,12 +68,20 @@
   outline: none;
 }
 .e-ddt .e-ddt-icon::before {
-  transform: rotate(0deg);
+  -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-ddt.e-icon-anim .e-ddt-icon::before {
-  transform: rotate(180deg);
+  -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-ddt .e-ddt-hidden {
   border: 0;
@@ -58,7 +90,8 @@
   width: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
-  box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
   min-height: 32px;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
@@ -89,6 +122,7 @@
   padding-right: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -96,20 +130,25 @@
   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 {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   border-radius: 4px;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
@@ -136,7 +175,8 @@
   padding: 6px 12px 0 12px;
 }
 .e-ddt .e-overflow.e-total-count {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -183,7 +223,8 @@
 }
 .e-ddt.e-popup {
   border: 1px solid #ccc;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
   position: absolute;
 }
 .e-ddt.e-popup .e-selectall-parent {
@@ -209,18 +250,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 +275,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 +330,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 +412,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 +441,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;
 }