@syncfusion/ej2-dropdowns 29.2.11 → 30.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.11
+*  version : 30.1.39
 *  Copyright Syncfusion Inc. 2001 - 2024. 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

package/license

@@ -1,3 +1,3 @@
-Licensing information is available in the following link
+Licensing information is available in the following link 
 
 https://www.syncfusion.com/sales/licensing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "29.2.11",
+  "version": "30.1.39",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.2.11",
-    "@syncfusion/ej2-data": "~29.2.4",
-    "@syncfusion/ej2-inputs": "~29.2.5",
-    "@syncfusion/ej2-lists": "~29.2.4",
-    "@syncfusion/ej2-navigations": "~29.2.8",
-    "@syncfusion/ej2-notifications": "~29.2.4",
-    "@syncfusion/ej2-popups": "~29.2.8"
+    "@syncfusion/ej2-base": "~30.1.38",
+    "@syncfusion/ej2-data": "~30.1.38",
+    "@syncfusion/ej2-inputs": "~30.1.38",
+    "@syncfusion/ej2-lists": "~30.1.37",
+    "@syncfusion/ej2-navigations": "~30.1.39",
+    "@syncfusion/ej2-notifications": "~30.1.37",
+    "@syncfusion/ej2-popups": "~30.1.37"
   },
   "devDependencies": {},
   "keywords": [

package/src/auto-complete/auto-complete.d.ts

@@ -216,8 +216,8 @@ export declare class AutoComplete extends ComboBox {
     protected getLocaleName(): string;
     protected getNgDirective(): string;
     protected getQuery(query: Query): Query;
-    protected searchLists(e: KeyboardEventArgs | MouseEvent): void;
     protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
+    protected searchLists(e: KeyboardEventArgs | MouseEvent): void;
     /**
      * To filter the data from given data source by using query
      *

package/src/auto-complete/auto-complete.js

@@ -162,6 +162,28 @@ var AutoComplete = /** @class */ (function (_super) {
         }
         return filterQuery;
     };
+    AutoComplete.prototype.performFiltering = function (e) {
+        var _this_1 = this;
+        var eventArgs = {
+            preventDefaultAction: false,
+            text: this.filterInput ? this.filterInput.value : null,
+            updateData: function (dataSource, query, fields) {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                _this_1.isFiltered = true;
+                _this_1.customFilterQuery = query;
+                _this_1.filterAction(dataSource, query, fields);
+            },
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, function (eventArgs) {
+            if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {
+                _this_1.searchList = true;
+                _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);
+            }
+        });
+    };
     AutoComplete.prototype.searchLists = function (e) {
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
@@ -187,28 +209,6 @@ var AutoComplete = /** @class */ (function (_super) {
             this.performFiltering(e);
         }
     };
-    AutoComplete.prototype.performFiltering = function (e) {
-        var _this_1 = this;
-        var eventArgs = {
-            preventDefaultAction: false,
-            text: this.filterInput.value,
-            updateData: function (dataSource, query, fields) {
-                if (eventArgs.cancel) {
-                    return;
-                }
-                _this_1.isFiltered = true;
-                _this_1.customFilterQuery = query;
-                _this_1.filterAction(dataSource, query, fields);
-            },
-            cancel: false
-        };
-        this.trigger('filtering', eventArgs, function (eventArgs) {
-            if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {
-                _this_1.searchList = true;
-                _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);
-            }
-        });
-    };
     /**
      * To filter the data from given data source by using query
      *

package/src/combo-box/combo-box.js

@@ -917,7 +917,7 @@ var ComboBox = /** @class */ (function (_super) {
                 this.removeFillSelection();
             }
             var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
-            var text = !isNullOrUndefined(dataItem.text) ? dataItem.text.replace(/\r\n|\n|\r/g, '') : dataItem.text;
+            var text = !isNullOrUndefined(dataItem.text) ? dataItem.text.toString().replace(/\r\n|\n|\r/g, '') : dataItem.text;
             var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;
             if (this.inputElement && text === this.inputElement.value && !isNullOrUndefined(selected)) {
                 if (this.isSelected) {

package/src/common/incremental-search.js

@@ -127,7 +127,7 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
     var listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     var itemData = { item: null, index: null };
-    if (inputVal && inputVal.length) {
+    if (inputVal && inputVal.length && items) {
         var strLength = inputVal.length;
         var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
         queryStr = escapeCharRegExp(queryStr);

package/src/drop-down-list/drop-down-list.d.ts

@@ -60,6 +60,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     } | string | number | boolean;
     protected hiddenElement: HTMLSelectElement;
     protected isPopupOpen: boolean;
+    private isPopupRender;
     private isDocumentClick;
     protected isInteracted: boolean;
     private isFilterFocus;

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

@@ -113,6 +113,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.initializeData = function () {
         this.isPopupOpen = false;
         this.isDocumentClick = false;
+        this.isPopupRender = false;
         this.isInteracted = false;
         this.isFilterFocus = false;
         this.beforePopupOpen = false;
@@ -1445,7 +1446,8 @@ var DropDownList = /** @class */ (function (_super) {
             e.preventDefault();
         }
         if (!this.readonly) {
-            if (this.isPopupOpen) {
+            if (this.isPopupOpen || (this.popupObj && document.body.contains(this.popupObj.element) &&
+                this.beforePopupOpen && this.isPopupRender)) {
                 this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
@@ -2328,6 +2330,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
             this.getInitialData = false;
             this.isReactTemplateUpdate = true;
+            this.typedString = this.filterInput.value;
             this.searchLists(this.filterArgs);
             return;
         }
@@ -2609,10 +2612,21 @@ var DropDownList = /** @class */ (function (_super) {
                 document.body.appendChild(popupEle);
                 popupEle.style.top = '0px';
                 initialPopupHeight = popupEle.clientHeight;
-                if (_this.enableVirtualization && _this.itemTemplate) {
+                if (_this.enableVirtualization && (_this.itemTemplate || _this.isAngular)) {
                     var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
-                    _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) +
-                        parseInt(window.getComputedStyle(listitems[0]).marginBottom, 10) : 0;
+                    var virtualListitems = popupEle.querySelectorAll('li.e-virtual-list');
+                    var listitemsHeight = listitems && listitems.length > 0 ?
+                        Math.ceil(listitems[0].getBoundingClientRect().height) +
+                            parseInt(window.getComputedStyle(listitems[0]).marginBottom, 10) : 0;
+                    var VirtualLiHeight = virtualListitems && virtualListitems.length > 0 ?
+                        Math.ceil(virtualListitems[0].getBoundingClientRect().height) +
+                            parseInt(window.getComputedStyle(virtualListitems[0]).marginBottom, 10) : 0;
+                    if (listitemsHeight !== VirtualLiHeight && virtualListitems && virtualListitems.length > 0) {
+                        virtualListitems.forEach(function (item) {
+                            item.parentNode.removeChild(item);
+                        });
+                    }
+                    _this.listItemHeight = listitemsHeight;
                 }
                 if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
                     _this.getSkeletonCount();
@@ -2775,6 +2789,7 @@ var DropDownList = /** @class */ (function (_super) {
                         }
                         if (!isNullOrUndefined(_this.popupObj)) {
                             _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
+                            _this.isPopupRender = true;
                         }
                         if (_this.isReact) {
                             setTimeout(function () {
@@ -3312,6 +3327,7 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.rippleFun();
                 }
                 if (_this.isPopupOpen) {
+                    _this.isPopupRender = false;
                     _this.popupObj.hide(new Animation(eventArgs.animation));
                 }
                 else {
@@ -4329,6 +4345,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.hidePopup();
         if (this.popupObj) {
+            this.isPopupRender = false;
             this.popupObj.hide();
         }
         this.unWireEvent();

package/src/drop-down-tree/drop-down-tree-model.d.ts

@@ -1,4 +1,4 @@
-import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
+import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup, isCollide } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
 import {Mode,ExpandOn,TreeFilterType,SortOrder,DdtBeforeOpenEventArgs,DdtChangeEventArgs,DdtPopupEventArgs,DdtDataBoundEventArgs,DdtFilteringEventArgs,DdtFocusEventArgs,DdtKeyPressEventArgs,DdtSelectEventArgs} from "./drop-down-tree";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -828,6 +828,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private getChildType;
     private renderTree;
     private renderPopup;
+    private checkCollision;
     private removeFocus;
     private updateFocus;
     private reactCallBack;

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

@@ -25,7 +25,7 @@ import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove,
 import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';
 import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents } from '@syncfusion/ej2-base';
 import { DataManager, DataUtil } from '@syncfusion/ej2-data';
-import { Popup } from '@syncfusion/ej2-popups';
+import { Popup, isCollide } from '@syncfusion/ej2-popups';
 import { TreeView } from '@syncfusion/ej2-navigations';
 var RTL = 'e-rtl';
 var DROPDOWNTREE = 'e-ddt';
@@ -725,7 +725,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.isPopupOpen) {
             this.hidePopup();
         }
-        else {
+        else if (!(e instanceof TouchEvent) && e.button !== 2) {
             this.focusIn(e);
             this.renderPopup();
         }
@@ -1734,6 +1734,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 removeClass([_this.popupEle], DDTHIDEICON);
                 _this.updatePopupHeight();
                 _this.popupObj.refreshPosition();
+                _this.checkCollision(_this.popupEle);
                 if (!(_this.showSelectAll || _this.allowFiltering) && (!_this.popupDiv.classList.contains(NODATA)
                     && _this.treeItems.length > 0)) {
                     var focusedElement = _this.value != null && _this.text != null ? _this.treeObj.element.querySelector('[data-uid="' + _this.value[_this.value.length - 1] + '"]') : null;
@@ -1777,6 +1778,13 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownTree.prototype.checkCollision = function (popupEle) {
+        var collision = isCollide(popupEle);
+        if (collision.length > 0) {
+            popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
+        }
+        this.popupObj.resolveCollision();
+    };
     DropDownTree.prototype.removeFocus = function (focusedElement, oldFocusedElement) {
         if (oldFocusedElement && oldFocusedElement !== focusedElement) {
             oldFocusedElement.setAttribute('tabindex', '-1');

package/src/mention/mention.d.ts

@@ -59,7 +59,6 @@ export declare class Mention extends DropDownBase {
     private isUpDownKey;
     private isRTE;
     private keyEventName;
-    protected debounceTimer: ReturnType<typeof setTimeout> | null;
     /**
      * Defines class/multiple classes separated by a space for the mention component.
      *

package/src/mention/mention.js

@@ -38,9 +38,7 @@ var Mention = /** @class */ (function (_super) {
      * @private
      */
     function Mention(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.debounceTimer = null;
-        return _this;
+        return _super.call(this, options, element) || this;
     }
     /**
      * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
@@ -370,12 +368,16 @@ var Mention = /** @class */ (function (_super) {
         var isValid = currentRange && mentionRegex.test(currentRange) ? false : true;
         var lastWordRange = this.getLastLetter(currentRange);
         var previousChar = currentRange ? currentRange.charAt(Math.max(0, currentRange.indexOf(this.mentionChar) - 1)) : '';
-        if (isValid && this.allowSpaces && currentRange && currentRange.includes(this.mentionChar) && currentRange.split(this.mentionChar).pop() !== ''
-            && (!this.requireLeadingSpace || (this.requireLeadingSpace && (previousChar === ' ' || currentRange.indexOf(this.mentionChar) === 0)))) {
-            lastWordRange = this.mentionChar + currentRange.split(this.mentionChar).pop();
-        }
-        if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
-            lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
+        if (!this.allowSpaces) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (isValid && currentRange && currentRange.includes(this.mentionChar) && currentRange.split(this.mentionChar).pop() !== ''
+                && (!this.requireLeadingSpace || (this.requireLeadingSpace && (previousChar === ' ' || currentRange.indexOf(this.mentionChar) === 0)))) {
+                lastWordRange = this.mentionChar + currentRange.split(this.mentionChar).pop();
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
+                lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
+            }
         }
         var lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
         // eslint-disable-next-line security/detect-non-literal-regexp
@@ -388,7 +390,8 @@ var Mention = /** @class */ (function (_super) {
             this.hidePopup();
             return;
         }
-        if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace)) || e.code === 'Enter' || e.keyCode === 27 ||
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace && !this.allowSpaces)) || e.code === 'Enter' || e.keyCode === 27 ||
             (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
             (this.isContentEditable(this.inputElement) && this.range.startContainer &&
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&

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

@@ -515,7 +515,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.mode === 'CheckBox' && this.allowFiltering) {
             this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
         }
-        return this.targetInputElement.value;
+        return this.targetInputElement ? this.targetInputElement.value : null;
     };
     MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
         var predicate;
@@ -680,11 +680,16 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
                 this.initialTextUpdate();
             }
-            if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
-                this.initialValueUpdate();
+            if (!this.enableVirtualization) {
+                if (!this.isRemoveSelection) {
+                    this.initialValueUpdate(this.listData, true);
+                }
+                else {
+                    this.initialValueUpdate();
+                }
             }
-            else if (!this.isRemoveSelection) {
-                this.initialValueUpdate(this.listData, true);
+            else if (!(this.dataSource instanceof DataManager)) {
+                this.initialValueUpdate();
             }
             this.initialUpdate();
             this.refreshPlaceHolder();
@@ -2848,7 +2853,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.dispatchSelect = function (value, eve, element, isNotTrigger, length, dataValue, text) {
         var _this = this;
         var list = this.listData;
-        if (this.initStatus && !isNotTrigger) {
+        if (this.initStatus && !isNotTrigger && (!this.allowObjectBinding || (this.allowObjectBinding && value))) {
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             var val_2 = dataValue ? dataValue : this.getDataByValue(value);
             var eventArgs = {
@@ -3757,7 +3762,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 else {
                     if (this_1.listData) {
                         if (this_1.enableVirtualization) {
-                            if (delim && !this_1.isDynamicRemoteVirtualData) {
+                            if (delim && !this_1.isDynamicRemoteVirtualData && !isInitialVirtualData) {
                                 data = this_1.delimiterWrapper && this_1.delimiterWrapper.innerHTML === '' ? data :
                                     this_1.delimiterWrapper.innerHTML;
                             }
@@ -3769,7 +3774,7 @@ var MultiSelect = /** @class */ (function (_super) {
                                 text = this_1.text.split(delimiterChar);
                             }
                             else {
-                                temp = isInitialVirtualData && delim ? this_1.text : this_1.getTextByValue(value);
+                                temp = isInitialVirtualData && delim ? this_1.text.replace(/,/g, delimiterChar + ' ') : this_1.getTextByValue(value);
                                 var textValues = this_1.isDynamicRemoteVirtualData && value != null && value !== '' && !isInitialVirtualData ?
                                     this_1.getTextByValue(value) : isInitialVirtualData ? this_1.text : (this_1.text && this_1.text !== '' ? this_1.text + this_1.delimiterChar + temp : temp);
                                 data += temp + delimiterChar + ' ';
@@ -3933,6 +3938,12 @@ var MultiSelect = /** @class */ (function (_super) {
                             text = this.getTextByValue(value);
                             isCustomData = true;
                         }
+                        else if ((isNullOrUndefined(text) && !this.allowCustomValue) &&
+                            ((!(this.dataSource instanceof DataManager)) ||
+                                (this.dataSource instanceof DataManager && isInitialVirtualData))) {
+                            this.value.splice(index, 1);
+                            index -= 1;
+                        }
                     }
                     else {
                         text = this.getTextByValue(value);
@@ -5527,6 +5538,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.isaddNonPresentItems = false;
             }
             else {
+                this.selectedListData = [];
                 if (prop === 'text') {
                     this.initialTextUpdate();
                     newProp = this.value;
@@ -5570,7 +5582,9 @@ var MultiSelect = /** @class */ (function (_super) {
                                     setTimeout(function () {
                                         _this.initialValueUpdate(listItems_2, true);
                                         _this.isDynamicRemoteVirtualData = false;
-                                        _this.initialUpdate();
+                                        if (!_this.inputFocus || (_this.inputFocus && _this.mode !== 'Default')) {
+                                            _this.initialUpdate();
+                                        }
                                     }, 100);
                                 }
                             });

package/styles/bootstrap5-dark-lite.css

@@ -762,7 +762,7 @@ ejs-dropdownlist {
   display: none;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
-  bottom: 10px;
+  bottom: 8px;
   position: absolute;
   right: 0;
 }

package/styles/bootstrap5-dark.css

@@ -949,7 +949,7 @@ ejs-dropdownlist {
   display: none;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
-  bottom: 10px;
+  bottom: 8px;
   position: absolute;
   right: 0;
 }

package/styles/bootstrap5-lite.css

@@ -762,7 +762,7 @@ ejs-dropdownlist {
   display: none;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
-  bottom: 10px;
+  bottom: 8px;
   position: absolute;
   right: 0;
 }

package/styles/bootstrap5.css

@@ -949,7 +949,7 @@ ejs-dropdownlist {
   display: none;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
-  bottom: 10px;
+  bottom: 8px;
   position: absolute;
   right: 0;
 }

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

@@ -1,7 +1,7 @@
 /* stylelint-disable */
 $ddt-skin-name: $skin-name !default;
 $ddt-box-shadow: none !default;
-$ddt-close-icon-bottom: 10px !default;
+$ddt-close-icon-bottom: 8px !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-width: 30px !default;
 $ddt-close-icon-width: 20px !default;

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

@@ -49,8 +49,8 @@ $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-bigger-padding: 0 12px !default;
+$ddt-delim-padding: 8px 8px !default;
+$ddt-delim-bigger-padding: 8px 12px !default;
 $ddt-remains-count-padding-top: 6px !default;
 $ddt-outline-padding: 10px 12px !default;
 $ddt-outline-chip-padding: 4px 12px !default;

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

@@ -109,7 +109,7 @@
   display: none;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
-  bottom: 10px;
+  bottom: 8px;
   position: absolute;
   right: 0;
 }

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

@@ -109,7 +109,7 @@
   display: none;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-clear-icon {
-  bottom: 10px;
+  bottom: 8px;
   position: absolute;
   right: 0;
 }

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

@@ -205,7 +205,7 @@
   white-space: nowrap;
 }
 .e-ddt .e-overflow.e-show-text {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt .e-overflow.e-show-text.e-input-value:not(.e-icon-hide) {
   display: inline-grid;
@@ -233,7 +233,7 @@
   padding-top: 6px;
 }
 .e-ddt.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 30px;
@@ -358,7 +358,7 @@
   padding: 0 0 0 8px;
 }
 .e-ddt.e-rtl.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 1px;
@@ -448,7 +448,7 @@
 }
 .e-bigger .e-ddt .e-overflow.e-show-text,
 .e-ddt.e-bigger .e-overflow.e-show-text {
-  padding: 0 12px;
+  padding: 8px 12px;
 }
 .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 {

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

@@ -207,7 +207,7 @@
   white-space: nowrap;
 }
 .e-ddt .e-overflow.e-show-text {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt .e-overflow.e-show-text.e-input-value:not(.e-icon-hide) {
   display: inline-grid;
@@ -235,7 +235,7 @@
   padding-top: 6px;
 }
 .e-ddt.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 30px;
@@ -360,7 +360,7 @@
   padding: 0 0 0 8px;
 }
 .e-ddt.e-rtl.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 1px;
@@ -450,7 +450,7 @@
 }
 .e-bigger .e-ddt .e-overflow.e-show-text,
 .e-ddt.e-bigger .e-overflow.e-show-text {
-  padding: 0 12px;
+  padding: 8px 12px;
 }
 .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 {

package/styles/material3-dark-lite.css

@@ -860,7 +860,7 @@ ejs-dropdownlist {
   white-space: nowrap;
 }
 .e-ddt .e-overflow.e-show-text {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt .e-overflow.e-show-text.e-input-value:not(.e-icon-hide) {
   display: inline-grid;
@@ -888,7 +888,7 @@ ejs-dropdownlist {
   padding-top: 6px;
 }
 .e-ddt.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 30px;
@@ -1013,7 +1013,7 @@ ejs-dropdownlist {
   padding: 0 0 0 8px;
 }
 .e-ddt.e-rtl.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 1px;

package/styles/material3-dark.css

@@ -1045,7 +1045,7 @@ ejs-dropdownlist {
   white-space: nowrap;
 }
 .e-ddt .e-overflow.e-show-text {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt .e-overflow.e-show-text.e-input-value:not(.e-icon-hide) {
   display: inline-grid;
@@ -1073,7 +1073,7 @@ ejs-dropdownlist {
   padding-top: 6px;
 }
 .e-ddt.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 30px;
@@ -1198,7 +1198,7 @@ ejs-dropdownlist {
   padding: 0 0 0 8px;
 }
 .e-ddt.e-rtl.e-show-chip .e-overflow.e-total-count .e-remain {
-  padding: 0 8px;
+  padding: 8px 8px;
 }
 .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
   margin-right: 1px;
@@ -1288,7 +1288,7 @@ ejs-dropdownlist {
 }
 .e-bigger .e-ddt .e-overflow.e-show-text,
 .e-ddt.e-bigger .e-overflow.e-show-text {
-  padding: 0 12px;
+  padding: 8px 12px;
 }
 .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 {