@syncfusion/ej2-dropdowns 33.2.7 → 33.2.8

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 33.2.7
-*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _dropdowns from '@syncfusion/ej2-dropdowns';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "33.2.7",
+  "version": "33.2.8",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -12,7 +12,7 @@
     "@syncfusion/ej2-data": "~33.2.5",
     "@syncfusion/ej2-inputs": "~33.2.5",
     "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-navigations": "~33.2.7",
+    "@syncfusion/ej2-navigations": "~33.2.8",
     "@syncfusion/ej2-notifications": "~33.2.7",
     "@syncfusion/ej2-popups": "~33.2.7"
   },

package/src/drop-down-list/drop-down-list.js

@@ -1626,6 +1626,9 @@ var DropDownList = /** @class */ (function (_super) {
             (this.previousValue != null && this.isObjectInArray(this.previousValue, [this.allowCustom &&
                     this.isObjectCustomValue ? this.value ? this.value : dataItem : dataItem.value ?
                     this.getDataByValue(dataItem.value) : dataItem])))) {
+            if (this.getModuleName() === 'combobox' && this.autoFill && e && (e.type === 'click' || e.action === 'enter')) {
+                return false;
+            }
             this.isSelected = false;
             return true;
         }

package/src/mention/mention.js

@@ -460,8 +460,12 @@ var Mention = /** @class */ (function (_super) {
                 ? lastWordRange.substring(lastWordRange.lastIndexOf(this.mentionChar) + 1).trim()
                 : lastWordRange.replace(this.mentionChar, '');
         }
+        if (this.queryString !== '' && e.keyCode === 8 && lastWordRange.includes(this.mentionChar) && !this.isPopupOpen &&
+            ((typeof this.displayTemplate === 'function' ? this.displayTemplate() : this.displayTemplate)).includes(this.mentionChar)) {
+            this.queryString = '';
+        }
         if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
-            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && !this.lineBreak) {
+            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
             this.searchLists(e);
             if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
                 if (!this.isContentEditable(this.inputElement)) {

package/src/multi-select/multi-select.d.ts

@@ -727,6 +727,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private tempQuery;
     private tempValues;
     private secureRandom;
+    private isInvalidString;
     private checkForCustomValue;
     protected getNgDirective(): string;
     private wrapperClick;

package/src/multi-select/multi-select.js

@@ -1138,8 +1138,12 @@ var MultiSelect = /** @class */ (function (_super) {
         window.crypto.getRandomValues(array);
         return array[0] / (0xFFFFFFFF + 1);
     };
+    MultiSelect.prototype.isInvalidString = function (value) {
+        return !value || value.trim().length === 0;
+    };
     MultiSelect.prototype.checkForCustomValue = function (query, fields) {
-        var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
+        var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase) &&
+            !this.isInvalidString(this.inputElement.value);
         var field = fields ? fields : this.fields;
         this.isCustomReset = true;
         if (this.allowCustomValue && dataChecks) {
@@ -4818,12 +4822,24 @@ var MultiSelect = /** @class */ (function (_super) {
                         temp = this.viewWrapper.innerHTML;
                         this.updateWrapperText(this.viewWrapper, data);
                     }
+                    var display = void 0;
+                    var topElement = void 0;
+                    if (this.componentWrapper.offsetWidth === 0 && this.componentWrapper.parentElement) {
+                        topElement = this.componentWrapper.parentElement.parentElement;
+                        if (!isNullOrUndefined(topElement) && topElement.style.display === 'none') {
+                            display = topElement.style.display;
+                            topElement.style.display = 'block';
+                        }
+                    }
                     wrapperleng = this.viewWrapper.offsetWidth +
                         parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10) +
                         parseInt(window.getComputedStyle(this.viewWrapper).paddingLeft, 10);
                     overAllContainer = this.componentWrapper.offsetWidth -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
+                    if (!isNullOrUndefined(display) && display === 'none' && !isNullOrUndefined(topElement)) {
+                        topElement.style.display = 'none';
+                    }
                     if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
                         if (tempData !== undefined && tempData !== '') {
                             temp = tempData;

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

@@ -219,7 +219,7 @@
       }
     }
   
-    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
+    @if $ddt-skin-name == 'Material3' or $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
       &.e-outline {
         .e-overflow {
           &.e-show-text,
@@ -272,6 +272,12 @@
               }
             }
           }
+          .e-float-text.e-label-top {
+            @if $ddt-skin-name == 'Material3' {
+              font-size: 12px !important; /* stylelint-disable-line declaration-no-important */
+              top: 12px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
         }
 
         &.e-float-input.e-control-wrapper:not(.e-show-chip) {
@@ -284,11 +290,21 @@
         &.e-float-input.e-control-wrapper.e-show-chip,
         &.e-float-input.e-control-wrapper.e-show-text {
           .e-ddt-icon {
-            @include icon-style(12px, 12px);
+            @if $ddt-skin-name == 'Material3' {
+              padding: 0;
+            }
+            @else {
+              @include icon-style(12px, 12px);
+            }
           }
 
           .e-clear-icon {
-            @include icon-style(11px, 44px);
+            @if $ddt-skin-name == 'Material3' {
+              @include icon-style(0, 30px);
+            }
+            @else {
+              @include icon-style(11px, 44px);
+            }
           }
 
           &:not(.e-show-dd-icon) .e-clear-icon {
@@ -310,7 +326,12 @@
             padding-top: 19px;
 
             .e-chips {
-              height: 24px;
+              @if $ddt-skin-name == 'Material3' {
+                height: 26px;
+              }
+              @else {
+                height: 24px;
+              }
             }
 
             .e-chips > .e-chipcontent {

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

@@ -248,7 +248,7 @@
       }
     }
 
-    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
+    @if $ddt-skin-name == 'Material3' or $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
       &.e-outline {
         .e-overflow {
           &.e-show-text {
@@ -295,6 +295,11 @@
               }
             }
           }
+          .e-float-text.e-label-top {
+            @if $ddt-skin-name == 'Material3' {
+              font-size: 12px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
 
           &:not(.e-show-chip) {
             .e-ddt-icon,
@@ -306,11 +311,21 @@
           &.e-show-chip,
           &.e-show-text {
             .e-ddt-icon {
-              @include icon-style(6px, 10px);
+              @if $ddt-skin-name == 'Material3' {
+                @include icon-style(6px, 0);
+              }
+              @else {
+                @include icon-style(6px, 10px);
+              }
             }
   
             .e-clear-icon {
-              @include icon-style(5px, 38px);
+              @if $ddt-skin-name == 'Material3' {
+                @include icon-style(5px, 30px);
+              }
+              @else {
+                @include icon-style(5px, 38px);
+              }
             }
   
             &:not(.e-show-dd-icon) .e-clear-icon {

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

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'ej2-base/styles/common/mixin' as *;
 @use 'ej2-base/styles/definition/material3-dark' as *;
 @forward 'ej2-base/styles/definition/material3-dark';
@@ -103,3 +104,4 @@ $ddt-height-none: 0 !default;
 $ddt-nrml-popup-margin-top: 2px !default;
 $ddt-list-item-ul-padding: 0 0 0 14px !default;
 $ddt-chip-border: 1px solid !default;
+$ddt-filled-chip-bg-color: $grey-800 !default;

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

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'ej2-base/styles/common/mixin' as *;
 @use 'ej2-base/styles/definition/material3' as *;
 @forward 'ej2-base/styles/definition/material3';
@@ -103,3 +104,4 @@ $ddt-height-none: 0 !default;
 $ddt-nrml-popup-margin-top: 2px !default;
 $ddt-list-item-ul-padding: 0 0 0 14px !default;
 $ddt-chip-border: 1px solid !default;
+$ddt-filled-chip-bg-color: color.adjust($grey-300, $lightness: -7%) !default;

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

@@ -23,8 +23,8 @@
     .e-chips {
       @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: $ddt-chip-border;
+        border-color: $ddt-chip-border-color;
       }
       &:hover {
         @if $ddt-skin-name == 'highcontrast' {
@@ -44,6 +44,14 @@
       }
     }
 
+    @if $ddt-skin-name == 'Material3' {
+      &.e-filled {
+        .e-chips {
+          background: transparent;
+        }
+      }
+    }
+
     @if $ddt-skin-name == 'tailwind' {
       &.e-disabled {
         @include chip-style($content-bg-color-alt3, $content-text-color-disabled, $content-text-color-disabled);

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

@@ -365,6 +365,108 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-ddt.e-outline .e-overflow.e-show-text {
+  padding: 10px 12px 9px;
+}
+.e-ddt.e-outline .e-overflow.e-total-count {
+  padding: 10px 12px;
+}
+.e-ddt.e-outline.e-input-group.e-control-wrapper.e-show-dd-icon .e-clear-icon, .e-ddt.e-outline.e-float-input.e-control-wrapper.e-show-dd-icon .e-clear-icon {
+  right: 30px;
+}
+.e-ddt.e-outline.e-input-group.e-control-wrapper:not(.e-show-chip).e-show-dd-icon.e-input-focus .e-clear-icon, .e-ddt.e-outline.e-float-input.e-control-wrapper:not(.e-show-chip).e-show-dd-icon.e-input-focus .e-clear-icon {
+  min-height: 20px;
+}
+.e-ddt.e-outline.e-show-chip .e-overflow,
+.e-ddt.e-outline.e-show-chip .e-chips-wrapper {
+  padding: 4px 12px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper .e-overflow.e-show-text {
+  line-height: 21px;
+  padding: 14px 2px 5px 0;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper .e-overflow .e-remain.e-wrap-count {
+  padding-top: 10px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper .e-float-text.e-label-top {
+  font-size: 12px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper:not(.e-show-chip) .e-ddt-icon, .e-ddt.e-filled.e-float-input.e-control-wrapper:not(.e-show-chip).e-show-dd-icon .e-clear-icon {
+  padding-top: 8px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
+  bottom: 6px;
+  right: 0;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
+  bottom: 5px;
+  right: 30px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip:not(.e-show-dd-icon) .e-clear-icon, .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-text:not(.e-show-dd-icon) .e-clear-icon {
+  bottom: 9px;
+  right: 10px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper,
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow {
+  padding-top: 8px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips,
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips {
+  height: 18px;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips > .e-chipcontent,
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips > .e-chipcontent {
+  font-size: 12px;
+  padding: 0 4px 0 0;
+}
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips-close::before,
+.e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips-close::before {
+  font-size: 12px;
+  height: 12px;
+  width: 12px;
+}
+.e-ddt.e-filled .e-chips-wrapper .e-chips,
+.e-ddt.e-filled .e-overflow .e-chips {
+  margin-top: 8px;
+  padding: 0 8px;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-overflow.e-show-text {
+  line-height: 39px;
+  padding: 0;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-overflow .e-remain.e-wrap-count {
+  line-height: 39px;
+  padding-top: 0;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips,
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips {
+  height: 28px;
+  margin-top: 8px;
+  padding: 0 8px;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips > .e-chipcontent,
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips > .e-chipcontent {
+  font-size: 13px;
+  padding: 0 8px 0 0;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips-close::before,
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips-close::before {
+  font-size: 14px;
+  height: 12px;
+  width: 12px;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-text .e-ddt-icon, .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-chip .e-ddt-icon {
+  bottom: 10px;
+  right: 10px;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-clear-icon {
+  bottom: 9px;
+  right: 38px;
+}
+.e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input):not(.e-show-dd-icon) .e-clear-icon {
+  bottom: 9px;
+  right: 10px;
+}
 .e-ddt .e-overflow {
   white-space: nowrap;
 }
@@ -644,8 +746,8 @@
 /* 16px */
 .e-ddt .e-chips {
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
-  border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
+  border-color: rgba(var(--color-sf-outline));
 }
 .e-ddt .e-chips .e-chips-close::before {
   color: rgba(var(--color-sf-on-surface));
@@ -653,6 +755,9 @@
 .e-ddt .e-chips > .e-chipcontent {
   color: rgba(var(--color-sf-on-surface));
 }
+.e-ddt.e-filled .e-chips {
+  background: transparent;
+}
 .e-ddt .e-overflow .e-remain {
   color: #757575;
 }
@@ -775,6 +880,144 @@
 .e-ddt.e-bigger .e-overflow.e-show-text {
   padding: 8px 12px;
 }
+.e-bigger .e-ddt.e-outline .e-overflow.e-show-text, .e-bigger .e-ddt.e-outline .e-overflow.e-total-count,
+.e-ddt.e-bigger.e-outline .e-overflow.e-show-text,
+.e-ddt.e-bigger.e-outline .e-overflow.e-total-count {
+  padding: 15px 16px;
+}
+.e-bigger .e-ddt.e-outline.e-input-group.e-control-wrapper.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-outline.e-float-input.e-control-wrapper.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-outline.e-input-group.e-control-wrapper.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-outline.e-float-input.e-control-wrapper.e-show-dd-icon .e-clear-icon {
+  right: 36px;
+}
+.e-bigger .e-ddt.e-outline.e-show-chip .e-overflow,
+.e-ddt.e-bigger.e-outline.e-show-chip .e-overflow {
+  padding: 8px 15px;
+}
+.e-bigger .e-ddt.e-outline.e-show-chip .e-overflow.e-total-count .e-remain,
+.e-ddt.e-bigger.e-outline.e-show-chip .e-overflow.e-total-count .e-remain {
+  padding-top: 10px;
+}
+.e-bigger .e-ddt.e-outline.e-show-chip .e-overflow .e-remain.e-wrap-count,
+.e-ddt.e-bigger.e-outline.e-show-chip .e-overflow .e-remain.e-wrap-count {
+  padding-top: 10px;
+}
+.e-bigger .e-ddt.e-outline.e-show-chip .e-chips-wrapper,
+.e-ddt.e-bigger.e-outline.e-show-chip .e-chips-wrapper {
+  padding: 8px 15px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper .e-overflow.e-show-text,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper .e-overflow.e-show-text {
+  line-height: 30px;
+  padding: 19px 12px 0 0;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper .e-overflow .e-remain.e-wrap-count,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper .e-overflow .e-remain.e-wrap-count {
+  padding-top: 14px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper .e-float-text.e-label-top,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper .e-float-text.e-label-top {
+  font-size: 12px !important; /* stylelint-disable-line declaration-no-important */
+  top: 12px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper:not(.e-show-chip) .e-ddt-icon, .e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper:not(.e-show-chip).e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-show-chip) .e-ddt-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-show-chip).e-show-dd-icon .e-clear-icon {
+  padding-top: 8px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
+  padding: 0;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-text .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
+  bottom: 0;
+  right: 30px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip:not(.e-show-dd-icon) .e-clear-icon, .e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-text:not(.e-show-dd-icon) .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip:not(.e-show-dd-icon) .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-text:not(.e-show-dd-icon) .e-clear-icon {
+  bottom: 14px;
+  right: 12px;
+}
+.e-bigger .e-ddt.e-filled .e-chips-wrapper .e-chips,
+.e-bigger .e-ddt.e-filled .e-overflow .e-chips,
+.e-ddt.e-bigger.e-filled .e-chips-wrapper .e-chips,
+.e-ddt.e-bigger.e-filled .e-overflow .e-chips {
+  margin-top: 8px;
+  padding: 0 8px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper,
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow {
+  padding-top: 19px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips,
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips {
+  height: 26px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips > .e-chipcontent,
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips > .e-chipcontent,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips > .e-chipcontent,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips > .e-chipcontent {
+  font-size: 13px;
+}
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips-close::before,
+.e-bigger .e-ddt.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips-close::before,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-chips-wrapper .e-chips-close::before,
+.e-ddt.e-bigger.e-filled.e-float-input.e-control-wrapper.e-show-chip .e-overflow .e-chips-close::before {
+  font-size: 14px;
+  height: 14px;
+  width: 14px;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-overflow.e-show-text,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-overflow.e-show-text {
+  line-height: 55px;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-overflow .e-remain.e-wrap-count,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-overflow .e-remain.e-wrap-count {
+  line-height: 55px;
+  padding-top: 0;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips,
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips {
+  height: 32px;
+  padding: 0 12px;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips > .e-chipcontent,
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips > .e-chipcontent,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips > .e-chipcontent,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips > .e-chipcontent {
+  font-size: 14px;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips-close::before,
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips-close::before,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-chips-wrapper .e-chips-close::before,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-chip .e-overflow .e-chips-close::before {
+  font-size: 16px;
+  height: 16px;
+  width: 16px;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-text:not(.e-show-dd-icon) .e-clear-icon, .e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-chip:not(.e-show-dd-icon) .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-text .e-ddt-icon,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-text:not(.e-show-dd-icon) .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-chip .e-ddt-icon,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-show-dd-icon.e-show-chip:not(.e-show-dd-icon) .e-clear-icon {
+  bottom: 16px;
+  right: 12px;
+}
+.e-bigger .e-ddt.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-clear-icon,
+.e-ddt.e-bigger.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-clear-icon {
+  bottom: 15px;
+  right: 44px;
+}
 .e-bigger .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
 .e-ddt.e-bigger.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   max-width: calc(100% - 37px);