@syncfusion/ej2-dropdowns 31.1.18 → 31.1.22

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.18
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.1.22
+*  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "31.1.18",
+  "version": "31.1.22",
   "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": "~31.1.17",
+    "@syncfusion/ej2-base": "~31.1.22",
     "@syncfusion/ej2-data": "~31.1.17",
-    "@syncfusion/ej2-inputs": "~31.1.17",
+    "@syncfusion/ej2-inputs": "~31.1.22",
     "@syncfusion/ej2-lists": "~31.1.17",
-    "@syncfusion/ej2-navigations": "~31.1.18",
+    "@syncfusion/ej2-navigations": "~31.1.20",
     "@syncfusion/ej2-notifications": "~31.1.17",
-    "@syncfusion/ej2-popups": "~31.1.17"
+    "@syncfusion/ej2-popups": "~31.1.20"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -215,6 +215,11 @@ var ComboBox = /** @class */ (function (_super) {
                                 _this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
                             }
                         }
+                        else if (_this.allowCustom) {
+                            _this.valueMuteChange(_this.value);
+                            _this.setHiddenValue();
+                            Input.setValue(_this.text, _this.inputElement, _this.floatLabelType, _this.showClearButton);
+                        }
                         else {
                             _this.valueMuteChange(null);
                         }
@@ -243,7 +248,7 @@ var ComboBox = /** @class */ (function (_super) {
                 this.setSelection(li, null);
             }
             else if ((!this.enableVirtualization && this.allowCustom) ||
-                (this.allowCustom && this.enableVirtualization && !doesItemExist)) {
+                (this.allowCustom && this.enableVirtualization && !doesItemExist && !(this.dataSource instanceof DataManager))) {
                 this.valueMuteChange(this.value);
             }
             else if (!this.enableVirtualization || (this.enableVirtualization && !(this.dataSource instanceof DataManager)
@@ -628,7 +633,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.getValueByText = function (text) {
-        return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);
+        return _super.prototype.getValueByText.call(this, text, this.ignoreCase, this.ignoreAccent);
     };
     ComboBox.prototype.unWireEvent = function () {
         if (this.getModuleName() === 'combobox') {

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

@@ -205,7 +205,14 @@ var DropDownBase = /** @class */ (function (_super) {
                     var item = dataSource_1[_i];
                     if (!isNullOrUndefined(item)) {
                         if (ignoreAccent) {
-                            value = this.checkingAccent(String(item), text, ignoreCase);
+                            if (ignoreCase) {
+                                if (this.checkIgnoreCase(String(item), text)) {
+                                    value = this.checkingAccent(String(item), text, ignoreCase);
+                                }
+                            }
+                            else {
+                                value = this.checkingAccent(String(item), text, ignoreCase);
+                            }
                         }
                         else {
                             if (ignoreCase) {
@@ -677,9 +684,9 @@ var DropDownBase = /** @class */ (function (_super) {
         for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
             var option = options_1[_i];
             var json = {};
-            json[fields.text] = option.innerText;
+            json[fields.text] = option.innerHTML;
             json[fields.value] = !isNullOrUndefined(option.getAttribute(fields.value)) ?
-                option.getAttribute(fields.value) : option.innerText;
+                option.getAttribute(fields.value) : option.innerHTML;
             if (!isNullOrUndefined(category)) {
                 json[fields.groupBy] = category;
             }

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

@@ -191,10 +191,10 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.floatLabelChange = function () {
         if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {
             var floatElement = this.inputWrapper.container.querySelector('.e-float-text');
-            if (this.inputElement.value !== '' || this.isInteracted) {
+            if (floatElement && this.inputElement.value !== '' || this.isInteracted) {
                 classList(floatElement, ['e-label-top'], ['e-label-bottom']);
             }
-            else {
+            else if (floatElement) {
                 classList(floatElement, ['e-label-bottom'], ['e-label-top']);
             }
         }
@@ -2575,8 +2575,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.removeFocus();
             if (this.allowFiltering && this.actionCompleteData && this.actionCompleteData.ulElement &&
                 this.dataSource instanceof DataManager) {
-                var focus_1 = this.actionCompleteData.ulElement.querySelector('.e-item-focus');
-                if (focus_1) {
+                var focus_1 = this.actionCompleteData.ulElement.querySelectorAll('.' + dropDownListClasses.focus);
+                if (focus_1 && focus_1.length) {
                     removeClass(focus_1, dropDownListClasses.focus);
                 }
             }
@@ -2609,29 +2609,29 @@ var DropDownList = /** @class */ (function (_super) {
         this.trigger('beforeOpen', args, function (args) {
             var initialPopupHeight;
             if (!args.cancel) {
-                var popupEle = _this.createElement('div', {
+                var popupEle_1 = _this.createElement('div', {
                     id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
                 });
-                popupEle.setAttribute('aria-label', _this.element.id);
-                popupEle.setAttribute('role', 'dialog');
-                var searchBox = _this.setSearchBox(popupEle);
+                popupEle_1.setAttribute('aria-label', _this.element.id);
+                popupEle_1.setAttribute('role', 'dialog');
+                var searchBox = _this.setSearchBox(popupEle_1);
                 _this.listContainerHeight = _this.allowFiltering && _this.getModuleName() === 'dropdownlist' && Browser.isDevice && _this.isDeviceFullScreen ?
                     formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
-                    _this.setHeaderTemplate(popupEle);
+                    _this.setHeaderTemplate(popupEle_1);
                     _this.isUpdateHeaderHeight = _this.header.offsetHeight !== 0;
                 }
-                append([_this.list], popupEle);
+                append([_this.list], popupEle_1);
                 if (_this.footerTemplate) {
-                    _this.setFooterTemplate(popupEle);
+                    _this.setFooterTemplate(popupEle_1);
                     _this.isUpdateFooterHeight = _this.footer.offsetHeight !== 0;
                 }
-                document.body.appendChild(popupEle);
-                popupEle.style.top = '0px';
-                initialPopupHeight = popupEle.clientHeight;
+                document.body.appendChild(popupEle_1);
+                popupEle_1.style.top = '0px';
+                initialPopupHeight = popupEle_1.clientHeight;
                 if (_this.enableVirtualization && (_this.itemTemplate || _this.isAngular)) {
-                    var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
-                    var virtualListitems = popupEle.querySelectorAll('li.e-virtual-list');
+                    var listitems = popupEle_1.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
+                    var virtualListitems = popupEle_1.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;
@@ -2669,14 +2669,14 @@ var DropDownList = /** @class */ (function (_super) {
                             className: 'e-virtual-ddl'
                         });
                         virtualElement.style.cssText = _this.GetVirtualTrackHeight();
-                        popupEle.querySelector('.e-dropdownbase').appendChild(virtualElement);
+                        popupEle_1.querySelector('.e-dropdownbase').appendChild(virtualElement);
                     }
                     else {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         _this.list.getElementsByClassName('e-virtual-ddl')[0].style = _this.GetVirtualTrackHeight();
                     }
                 }
-                popupEle.style.visibility = 'hidden';
+                popupEle_1.style.visibility = 'hidden';
                 if (_this.popupHeight !== 'auto') {
                     _this.searchBoxHeight = 0;
                     if (!isNullOrUndefined(searchBox.container) &&
@@ -2685,22 +2685,22 @@ var DropDownList = /** @class */ (function (_super) {
                         _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';
                     }
                     if (_this.headerTemplate) {
-                        _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');
+                        _this.header = _this.header ? _this.header : popupEle_1.querySelector('.e-ddl-header');
                         var height = Math.round(_this.header.getBoundingClientRect().height);
                         _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) -
                             (height + _this.searchBoxHeight)).toString() + 'px';
                     }
                     if (_this.footerTemplate) {
-                        _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');
+                        _this.footer = _this.footer ? _this.footer : popupEle_1.querySelector('.e-ddl-footer');
                         var height = Math.round(_this.footer.getBoundingClientRect().height);
                         _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) -
                             (height + _this.searchBoxHeight)).toString() + 'px';
                     }
                     _this.list.style.maxHeight = (parseInt(_this.listContainerHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
-                    popupEle.style.maxHeight = formatUnit(_this.popupHeight);
+                    popupEle_1.style.maxHeight = formatUnit(_this.popupHeight);
                 }
                 else {
-                    popupEle.style.height = 'auto';
+                    popupEle_1.style.height = 'auto';
                 }
                 var offsetValue = 0;
                 var left = void 0;
@@ -2716,7 +2716,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 if (Browser.isDevice && _this.isDeviceFullScreen && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||
                     (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {
-                    offsetValue = _this.getOffsetValue(popupEle);
+                    offsetValue = _this.getOffsetValue(popupEle_1);
                     var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];
                     if (!isNullOrUndefined(_this.inputElement)) {
                         left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
@@ -2724,10 +2724,10 @@ var DropDownList = /** @class */ (function (_super) {
                             parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
                     }
                 }
-                _this.createPopup(popupEle, offsetValue, left);
+                _this.createPopup(popupEle_1, offsetValue, left);
                 _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
                 _this.getFocusElement();
-                _this.checkCollision(popupEle);
+                _this.checkCollision(popupEle_1);
                 if (Browser.isDevice) {
                     if ((parseInt(_this.popupWidth.toString(), 10) > window.outerWidth) &&
                         !(_this.getModuleName() === 'dropdownlist' && _this.allowFiltering)) {
@@ -2751,8 +2751,8 @@ var DropDownList = /** @class */ (function (_super) {
                         EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);
                     }
                 }
-                popupEle.style.visibility = 'visible';
-                addClass([popupEle], 'e-popup-close');
+                popupEle_1.style.visibility = 'visible';
+                addClass([popupEle_1], 'e-popup-close');
                 var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);
                 for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {
                     var element = scrollParentElements_1[_i];
@@ -2772,7 +2772,7 @@ var DropDownList = /** @class */ (function (_super) {
                     setTimeout(function () {
                         if (_this.value || _this.list.querySelector('.e-active')) {
                             _this.updateSelectionList();
-                            if (_this.selectedValueInfo && _this.viewPortInfo && _this.viewPortInfo.offsets.top) {
+                            if (_this.viewPortInfo && _this.viewPortInfo.offsets.top) {
                                 _this.list.scrollTop = _this.viewPortInfo.offsets.top;
                             }
                             else {
@@ -2832,7 +2832,7 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                 });
                 if (_this.allowResize && (_this.getModuleName() !== 'dropdownlist' || !(Browser.isDevice && _this.isDeviceFullScreen && _this.allowFiltering))) {
-                    var resizePaddingBottom = 16;
+                    var resizePaddingBottom_1 = 16;
                     // Create the resizer div
                     _this.resizer = _this.createElement('div', {
                         id: _this.element.id + '_resize-popup',
@@ -2844,9 +2844,25 @@ var DropDownList = /** @class */ (function (_super) {
                         if (_this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight >= (parseInt(_this.popupHeight.toString(), 10) - 2)) {
                             _this.list.parentElement.style.height = '100%';
                         }
-                        _this.list.parentElement.style.paddingBottom = (_this.getModuleName() === 'dropdownlist' && _this.allowFiltering && _this.searchBoxHeight) ? (_this.searchBoxHeight + resizePaddingBottom).toString() + 'px' : resizePaddingBottom.toString() + 'px';
-                        if (_this.header || _this.footer || _this.itemTemplate) {
-                            _this.list.parentElement.style.paddingBottom = ((parseInt(_this.list.parentElement.style.maxHeight, 10) - parseInt(_this.list.style.maxHeight, 10)) + resizePaddingBottom).toString() + 'px';
+                        _this.list.parentElement.style.paddingBottom = (_this.getModuleName() === 'dropdownlist' && _this.allowFiltering && _this.searchBoxHeight) ? (_this.searchBoxHeight + resizePaddingBottom_1).toString() + 'px' : resizePaddingBottom_1.toString() + 'px';
+                        if (_this.isReact && _this.footer) {
+                            var listMaxHeight_1 = _this.list.style.maxHeight;
+                            var listParentElementMaxHeight_1 = _this.list.parentElement.style.maxHeight;
+                            var containerHeight_1 = _this.listContainerHeight;
+                            setTimeout(function () {
+                                _this.footer = _this.footer ? _this.footer : popupEle_1.querySelector('.e-ddl-footer');
+                                var height = Math.round(_this.footer.getBoundingClientRect().height);
+                                if (height > 0) {
+                                    containerHeight_1 = (parseInt(containerHeight_1, 10) - height).toString() + 'px';
+                                    listMaxHeight_1 = (parseInt(containerHeight_1, 10) - 2).toString() + 'px';
+                                    _this.list.parentElement.style.paddingBottom = ((parseInt(listParentElementMaxHeight_1, 10) - parseInt(listMaxHeight_1, 10)) + resizePaddingBottom_1).toString() + 'px';
+                                }
+                            }, 1);
+                        }
+                        else {
+                            if (_this.header || _this.footer || _this.itemTemplate) {
+                                _this.list.parentElement.style.paddingBottom = ((parseInt(_this.list.parentElement.style.maxHeight, 10) - parseInt(_this.list.style.maxHeight, 10)) + resizePaddingBottom_1).toString() + 'px';
+                            }
                         }
                         _this.list.parentElement.appendChild(_this.resizer);
                         //hold the popup resize
@@ -3357,9 +3373,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         var dataSourceCount;
         if (this.dataSource instanceof DataManager) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ?
-                this.virtualGroupDataSource.length : 0;
+            dataSourceCount = this.remoteDataCount;
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1192,8 +1192,14 @@ var DropDownTree = /** @class */ (function (_super) {
         return remainElement;
     };
     DropDownTree.prototype.getOverflowVal = function (index) {
+        var textSelected;
         var selectedData = this.getSelectedData(this.value[parseInt(index.toString(), 10)]);
-        return getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
+        var node = this.treeObj.getNode(this.value[index]);
+        textSelected = getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
+        if (isNOU(textSelected) && !isNOU(node.text)) {
+            textSelected = node.text.toString();
+        }
+        return textSelected;
     };
     DropDownTree.prototype.updateDelimMode = function () {
         if (this.mode !== 'Box') {
@@ -2550,7 +2556,11 @@ var DropDownTree = /** @class */ (function (_super) {
             var compiledString = this.initializeValueTemplate();
             for (var i = 0, len = this.value.length; i < len; i++) {
                 selectedData = this.getSelectedData(this.value[i]);
+                var node = this.treeObj.getNode(this.value[i]);
                 text = getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
+                if (isNOU(text) && !isNOU(node.text)) {
+                    text = node.text.toString();
+                }
                 this.selectedText.push(text);
                 temp = this.selectedText[this.selectedText.length - 1];
                 if (this.selectedText.length > 1) {

package/src/mention/mention.js

@@ -360,7 +360,9 @@ var Mention = /** @class */ (function (_super) {
         }
         if (this.isContentEditable(this.inputElement)) {
             this.range = this.getCurrentRange();
-            rangetextContent = this.range.startContainer.textContent.split('');
+            if (this.range) {
+                rangetextContent = this.range.startContainer.textContent.split('');
+            }
         }
         var currentRange = this.getTextRange();
         // eslint-disable-next-line security/detect-non-literal-regexp
@@ -475,7 +477,8 @@ var Mention = /** @class */ (function (_super) {
         return isMatched;
     };
     Mention.prototype.getCurrentRange = function () {
-        this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
+        this.range = this.inputElement.ownerDocument.getSelection().rangeCount > 0 &&
+            this.inputElement.ownerDocument.getSelection().getRangeAt(0);
         return this.range;
     };
     Mention.prototype.performFiltering = function (e) {

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

@@ -720,6 +720,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private dataUpdater;
     private tempQuery;
     private tempValues;
+    private secureRandom;
     private checkForCustomValue;
     protected getNgDirective(): string;
     private wrapperClick;
@@ -788,6 +789,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateChipStatus;
     private indexOfObjectInArray;
     private addValue;
+    private updateListItemsState;
     private checkMaxSelection;
     private dispatchSelect;
     private addChip;

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

@@ -1112,6 +1112,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.removeFocus();
         }
     };
+    MultiSelect.prototype.secureRandom = function () {
+        var array = new Uint32Array(1);
+        window.crypto.getRandomValues(array);
+        return array[0] / (0xFFFFFFFF + 1);
+    };
     MultiSelect.prototype.checkForCustomValue = function (query, fields) {
         var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
         var field = fields ? fields : this.fields;
@@ -1125,7 +1130,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 setValue(field.text, value, dataItem_1);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
                     === 'number' && this.fields.value !== this.fields.text) {
-                    setValue(field.value, Math.random(), dataItem_1);
+                    setValue(field.value, this.secureRandom(), dataItem_1);
                 }
                 else {
                     setValue(field.value, value, dataItem_1);
@@ -1246,6 +1251,9 @@ var MultiSelect = /** @class */ (function (_super) {
             e.preventDefault();
         }
         this.checkAndScrollParent();
+        if (this.maximumSelectionLength === 0) {
+            this.checkMaxSelection();
+        }
     };
     MultiSelect.prototype.checkAndScrollParent = function () {
         var scrollElement = this.overAllWrapper ? this.overAllWrapper.parentElement : null;
@@ -2855,8 +2863,21 @@ var MultiSelect = /** @class */ (function (_super) {
         this.updateChipStatus();
         this.checkMaxSelection();
     };
+    MultiSelect.prototype.updateListItemsState = function (list) {
+        var activeItems = list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active');
+        removeClass(activeItems, 'e-disable');
+        var inactiveItems = list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-active)');
+        addClass(inactiveItems, 'e-disable');
+    };
     MultiSelect.prototype.checkMaxSelection = function () {
         var limit = this.value && this.value.length ? this.value.length : 0;
+        if (this.maximumSelectionLength === 0) {
+            this.updateListItemsState(this.list);
+            if (this.mainList) {
+                this.updateListItemsState(this.mainList);
+            }
+            return;
+        }
         if (limit === this.maximumSelectionLength) {
             var activeItems = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li + '.e-active');
@@ -6042,6 +6063,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.renderComplete();
     };
     MultiSelect.prototype.setResize = function () {
+        var _this = this;
         var resizePaddingBottom = 16;
         if (this.list && this.list.parentElement && isNullOrUndefined(this.list.parentElement.querySelector('.e-resizer-right.e-icons'))) {
             this.resizer = this.createElement('div', {
@@ -6059,8 +6081,22 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.list.parentElement.style.height = '100%';
             }
             this.list.parentElement.style.boxSizing = 'border-box'; // Ensures padding doesn't affect element size
-            var paddingBottom = this.mode === 'CheckBox' && this.searchBoxHeight ? this.searchBoxHeight + resizePaddingBottom + (this.showSelectAll ? this.storedSelectAllHeight : 0) : resizePaddingBottom;
-            this.list.parentElement.style.paddingBottom = paddingBottom + "px";
+            var paddingBottom_1 = this.mode === 'CheckBox' && this.searchBoxHeight ? this.searchBoxHeight + resizePaddingBottom + (this.showSelectAll ? this.storedSelectAllHeight : 0) : resizePaddingBottom;
+            if (this.footer) {
+                var listMaxHeight_1 = this.list.style.maxHeight;
+                var listParentElementMaxHeight_1 = this.list.parentElement.style.maxHeight;
+                setTimeout(function () {
+                    var height = Math.round(_this.footer.getBoundingClientRect().height);
+                    var containerHeight = (parseInt(listParentElementMaxHeight_1, 10) - height).toString() + 'px';
+                    listMaxHeight_1 = (parseInt(containerHeight, 10) - 2).toString() + 'px';
+                    if (height > 0) {
+                        _this.list.parentElement.style.paddingBottom = ((parseInt(listParentElementMaxHeight_1, 10) - parseInt(listMaxHeight_1, 10)) + paddingBottom_1).toString() + 'px';
+                    }
+                }, 1);
+            }
+            else {
+                this.list.parentElement.style.paddingBottom = paddingBottom_1 + "px";
+            }
             this.list.parentElement.appendChild(this.resizer);
             this.list.parentElement.style.width = this.resizeWidth + 'px';
             this.list.parentElement.style.height = this.resizeHeight + 'px';

package/styles/auto-complete/bootstrap4.css

@@ -79,6 +79,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;

package/styles/bds-lite.css

@@ -1172,7 +1172,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bds.css

@@ -1405,7 +1405,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap-dark-lite.css

@@ -973,7 +973,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap-dark.css

@@ -1150,7 +1150,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap-lite.css

@@ -976,7 +976,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap.css

@@ -1153,7 +1153,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap4-lite.css

@@ -432,6 +432,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -1009,7 +1017,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }
@@ -1132,6 +1139,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-close-hooker::before {
+  font-size: 16px;
   content: "\e745";
   cursor: pointer;
   height: 10px;

package/styles/bootstrap4.css

@@ -511,6 +511,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -1204,7 +1212,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }
@@ -1429,6 +1436,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-close-hooker::before {
+  font-size: 16px;
   content: "\e745";
   cursor: pointer;
   height: 10px;
@@ -2459,12 +2467,12 @@ ejs-multiselect {
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  margin-top: -3.5em;
+  margin-top: -32px;
 }
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -3.5em;
+  margin-top: -32px;
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker,
@@ -2763,13 +2771,13 @@ ejs-multiselect {
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  font-size: 12px;
+  font-size: 18px;
   top: 9px;
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before,
 .e-bigger.e-multi-select-wrapper .e-chips .e-chips-close::before {
-  top: 1px;
+  top: 5px;
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
@@ -2790,7 +2798,7 @@ ejs-multiselect {
 
 .e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
 .e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .e-small.e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
@@ -2831,7 +2839,7 @@ ejs-multiselect {
 
 .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper .e-clear-icon {
   height: 36px;
-  margin-top: -3.5em;
+  margin-top: -32px;
 }
 
 .e-listbox-tool .e-moveup::before {

package/styles/bootstrap5-dark-lite.css

@@ -1028,7 +1028,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap5-dark.css

@@ -1215,7 +1215,6 @@ ejs-dropdownlist {
 .e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }