@syncfusion/ej2-dropdowns 19.4.38 → 19.4.40

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.38
+*  version : 19.4.40
 *  Copyright Syncfusion Inc. 2001 - 2020. 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/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@18.34.12",
+  "_id": "@syncfusion/ej2-dropdowns@19.3.56",
   "_inBundle": false,
-  "_integrity": "sha512-GpZ9oh7UZXwnybsQmiiBdwawlGvjrvCBIG0qtHQ5La0zjOsOKVIYPk3Lu+CvXwLu3FuxLXFCfy5JiBA/AA9WAg==",
+  "_integrity": "sha512-swxFfaQGysEl0FHFlWDRqRKJMx3x2cBzkWu0aII2IRfQMjGd79WPOdsdSqDmSxQJOE1v6GiNgrlbyf9irDUIEQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -21,6 +21,7 @@
     "/@syncfusion/ej2",
     "/@syncfusion/ej2-angular-dropdowns",
     "/@syncfusion/ej2-documenteditor",
+    "/@syncfusion/ej2-filemanager/@syncfusion/ej2-grids",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
     "/@syncfusion/ej2-inplace-editor",
@@ -33,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.34.12.tgz",
-  "_shasum": "0c4856ee2b4172eae286c065c85c47e0ee581236",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.3.56.tgz",
+  "_shasum": "8fab90fa06f7b8947bfcab02e078098b513bf98f",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -46,7 +47,7 @@
     "@syncfusion/ej2-data": "~19.4.38",
     "@syncfusion/ej2-inputs": "~19.4.38",
     "@syncfusion/ej2-lists": "~19.4.38",
-    "@syncfusion/ej2-navigations": "~19.4.38",
+    "@syncfusion/ej2-navigations": "~19.4.40",
     "@syncfusion/ej2-popups": "~19.4.38"
   },
   "deprecated": false,
@@ -72,6 +73,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "19.4.38",
+  "version": "19.4.40",
   "sideEffects": false
 }

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

@@ -234,7 +234,7 @@ var ComboBox = /** @class */ (function (_super) {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             var inputValue = this.inputElement.value;
-            var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
+            var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -391,7 +391,7 @@ var ComboBox = /** @class */ (function (_super) {
         else {
             this.activeIndex = null;
             this.removeSelection();
-            if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
+            if (this.liCollections && this.liCollections.length < 0) {
                 this.removeFocus();
             }
         }

package/src/common/incremental-search.d.ts

@@ -1,7 +1,7 @@
 /**
  * IncrementalSearch module file
  */
-export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains';
+export declare type SearchType = 'StartsWith' | 'Equal';
 /**
  * Search and focus the list item based on key code matches with list text content
  *

package/src/common/incremental-search.js

@@ -83,7 +83,7 @@ export function Search(inputVal, items, searchType, ignoreCase) {
         for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
             var item = itemsData[i];
             var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
-            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
+            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {
                 itemData.item = item;
                 itemData.index = i;
                 return { item: item, index: i };

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

@@ -493,7 +493,7 @@ var DropDownBase = /** @class */ (function (_super) {
                             }
                             _this.bindChildItems(localDataArgs.result, ulElement, fields);
                             setTimeout(function () {
-                                if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
+                                if (_this.getModuleName() === 'multiselect' && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
                                     _this.updateDataList();
                                 }
                             });
@@ -628,22 +628,10 @@ var DropDownBase = /** @class */ (function (_super) {
                 var groupValue = select(this.groupTemplate, document).innerHTML.trim();
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
-                //EJ2-55168- Group checkbox is not working with group template
-                if (this.isGroupChecking) {
-                    for (var i = 0; i < tempHeaders.length; i++) {
-                        this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
-                    }
-                }
             }
             else {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
-                //EJ2-55168- Group checkbox is not working with group template
-                if (this.isGroupChecking) {
-                    for (var i = 0; i < tempHeaders.length; i++) {
-                        this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
-                    }
-                }
             }
             this.renderReactTemplates();
         }

package/src/list-box/list-box.d.ts

@@ -678,6 +678,10 @@ export interface DropEventArgs {
      * Illustrates whether the current action needs to be prevented or not.
      */
     cancel?: boolean;
+    /**
+     * Illustrates whether the drag all action needs to be prevented or not.
+     */
+    isDragAll?: boolean | null;
     /**
      * Returns the selected list items.
      */

package/src/list-box/list-box.js

@@ -438,6 +438,9 @@ var ListBox = /** @class */ (function (_super) {
             args.items = this.getDataByValues([dragValue]);
         }
         this.trigger('beforeDrop', args);
+        if (args.isDragAll !== null) {
+            this.allowDragAll = args.isDragAll;
+        }
     };
     ListBox.prototype.dragEnd = function (args) {
         var _this = this;

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

@@ -1,4 +1,4 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 

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

@@ -795,8 +795,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     onPropertyChanged(newProp: MultiSelectModel, oldProp: MultiSelectModel): void;
     private reInitializePoup;
-    private presentItemValue;
-    private addNonPresentItems;
     private updateVal;
     /**
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,

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

@@ -421,7 +421,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.mainData = list;
             this.mainListCollection = this.liCollections;
         }
-        else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
+        else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
             this.mainData = list;
         }
         if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -2443,9 +2443,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateActionCompleteData = function (li, item) {
         if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
             this.mainList = this.ulElement;
-            if (this.hideSelectedItem) {
-                addClass([li], HIDE_LIST);
-            }
+            addClass([li], HIDE_LIST);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -3509,25 +3507,6 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.renderPopup();
     };
-    MultiSelect.prototype.presentItemValue = function (ulElement) {
-        var valuecheck = [];
-        for (var i = 0; i < this.value.length; i++) {
-            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
-            if (!checkEle) {
-                valuecheck.push(this.value[i]);
-            }
-        }
-        return valuecheck;
-    };
-    ;
-    MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
-        var _this = this;
-        this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
-            _this.addItem(e.result, list.length);
-            _this.updateActionList(ulElement, list, event);
-        });
-    };
-    ;
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -3536,43 +3515,31 @@ var MultiSelect = /** @class */ (function (_super) {
             this.onLoadSelect();
         }
         else {
-            var valuecheck = [];
-            if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
-                valuecheck = this.presentItemValue(this.ulElement);
+            if (prop === 'text') {
+                this.initialTextUpdate();
+                newProp = this.value;
             }
-            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-                && this.listData != null) {
-                this.mainData = null;
-                this.setDynValue = true;
-                this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
+            if (isNullOrUndefined(this.value) || this.value.length === 0) {
+                this.tempValues = oldProp;
             }
-            else {
-                if (prop === 'text') {
-                    this.initialTextUpdate();
-                    newProp = this.value;
-                }
-                if (isNullOrUndefined(this.value) || this.value.length === 0) {
-                    this.tempValues = oldProp;
-                }
-                // eslint-disable-next-line
-                if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
-                    && this.isPopupOpen() && this.mainData !== this.listData) {
-                    var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
-                    this.onActionComplete(list, this.mainData);
-                }
-                this.initialValueUpdate();
-                if (this.mode !== 'Box' && !this.inputFocus) {
-                    this.updateDelimView();
-                }
-                if (!this.inputFocus) {
-                    this.refreshInputHight();
-                }
-                this.refreshPlaceHolder();
-                if (this.mode !== 'CheckBox' && this.changeOnBlur) {
-                    this.updateValueState(null, newProp, oldProp);
-                }
-                this.checkPlaceholderSize();
+            // eslint-disable-next-line
+            if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
+                && this.isPopupOpen() && this.mainData !== this.listData) {
+                var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+                this.onActionComplete(list, this.mainData);
+            }
+            this.initialValueUpdate();
+            if (this.mode !== 'Box' && !this.inputFocus) {
+                this.updateDelimView();
+            }
+            if (!this.inputFocus) {
+                this.refreshInputHight();
             }
+            this.refreshPlaceHolder();
+            if (this.mode !== 'CheckBox' && this.changeOnBlur) {
+                this.updateValueState(null, newProp, oldProp);
+            }
+            this.checkPlaceholderSize();
         }
         if (!this.changeOnBlur) {
             this.updateValueState(null, newProp, oldProp);

package/styles/_all.scss

@@ -0,0 +1,3 @@
+@import 'drop-down-base/all.scss';
+@import 'drop-down-list/all.scss';
+@import 'drop-down-tree/all.scss';

package/styles/auto-complete/bootstrap5-dark.css

@@ -62,6 +62,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

package/styles/auto-complete/bootstrap5.css

@@ -62,6 +62,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

package/styles/bootstrap5-dark.css

@@ -453,6 +453,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
@@ -1136,16 +1137,8 @@ ejs-dropdownlist {
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
-  bottom: auto;
-  right: 36px;
-}
-
-.e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon {
-  bottom: 0;
+  bottom: 6px;
+  right: 33px;
 }
 
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
@@ -1159,7 +1152,8 @@ ejs-dropdownlist {
 .e-bigger .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper .e-clear-icon {
-  min-height: 36px;
+  min-width: 0;
+  padding: 6px;
 }
 
 .e-bigger .e-ddt.e-show-chip .e-chips-close,
@@ -3220,7 +3214,7 @@ ejs-listbox {
 .e-listbox-container .e-list-group-item {
   background-color: #343a40;
   border-color: rgba(0, 0, 0, 0.12);
-  color: #000;
+  color: #7b848d;
   font-size: 12px;
 }
 

package/styles/bootstrap5.css

@@ -453,6 +453,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
@@ -1136,16 +1137,8 @@ ejs-dropdownlist {
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
-  bottom: auto;
-  right: 36px;
-}
-
-.e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
-.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon {
-  bottom: 0;
+  bottom: 6px;
+  right: 33px;
 }
 
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
@@ -1159,7 +1152,8 @@ ejs-dropdownlist {
 .e-bigger .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper .e-clear-icon {
-  min-height: 36px;
+  min-width: 0;
+  padding: 6px;
 }
 
 .e-bigger .e-ddt.e-show-chip .e-chips-close,
@@ -3220,7 +3214,7 @@ ejs-listbox {
 .e-listbox-container .e-list-group-item {
   background-color: #e9ecef;
   border-color: rgba(0, 0, 0, 0.12);
-  color: #000;
+  color: #6c757d;
   font-size: 12px;
 }
 

package/styles/combo-box/bootstrap5-dark.css

@@ -62,6 +62,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

package/styles/combo-box/bootstrap5.css

@@ -62,6 +62,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

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

@@ -105,6 +105,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
   .e-input-group#{&}.e-control-wrapper.e-ddl .e-input[readonly],
   .e-float-input#{&}.e-control-wrapper.e-ddl input[readonly] {
     background: transparent;
+    color: inherit;
   }
 
   .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

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

@@ -119,6 +119,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

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

@@ -119,6 +119,7 @@
 .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
 .e-float-input.e-control-wrapper.e-ddl input[readonly] {
   background: transparent;
+  color: inherit;
 }
 
 .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],

package/styles/drop-down-list/icons/_bootstrap5.scss

@@ -12,3 +12,4 @@
     font-family: 'e-icons';
   }
 }
+    

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

@@ -1,60 +1,59 @@
-// sass-lint:disable-all
-$ddt-skin-name: $skin-name !default;
-$ddt-box-shadow: none !default;
-$ddt-close-icon-bottom: 10px !default;
-$ddt-dd-icon-bottom: 0 !default;
-$ddt-dd-icon-width: 30px !default;
-$ddt-close-icon-width: 20px !default;
-$ddt-dd-icon-bigger-bottom: 0 !default;
-$ddt-filter-border: 1px solid $border-light !default;
-$ddt-filter-top-border: 0 !default;
-$ddt-filter-padding: 4px !default;
-$ddt-chip-margin: 3px 4px !default;
-$ddt-chip-padding: 0 8px 0 8px !default;
-$ddt-chip-radius: 4px !default;
-$ddt-chip-height: 24px !default;
-$ddt-chip-bigger-height: 30px !default;
-$ddt-close-icon-bigger-min-height: 36px !default;
-$ddt-chip-content-padding: 0 4px 0 0 !default;
-$ddt-rtl-chip-content-padding: 0 0 0 4px !default;
-$ddt-big-chip-content-padding: 0 8px 0 0 !default;
-$ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
-$ddt-chip-close-font: 10px !default;
-$ddt-chip-close-height: 16px !default;
-$ddt-chip-close-width: 16px !default;
-$ddt-last-chip-right-margin: 48px !default;
-$ddt-last-chip-bigger-right-margin: 52px !default;
-$ddt-select-all-height: 34px !default;
-$ddt-select-all-checkbox-margin: 0 8px !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-reorder-border: $border-light !default;
-$ddt-treeview-padding: 0 8px !default;
-$ddt-chip-width: calc(100% - 2px) !default;
-$ddt-chip-ddi-width: calc(100% - 31px) !default;
-$ddt-chip-ci-width: calc(100% - 31px) !default;
-$ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
-$ddt-big-chip-ddi-width: calc(100% - 37px) !default;
-$ddt-big-chip-ci-width: calc(100% - 37px) !default;
-$ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
-$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-remains-count-padding-top: 0 !default;
-
-// color variables
-$ddt-chip-bg-color: $secondary-bg-color !default;
-$ddt-popup-background-color: $flyout-bg-color !default;
-$ddt-popup-border-color: $border-light !default;
-$ddt-chip-close: $secondary-text-color !default;
-$ddt-chip-font-color: $secondary-text-color !default;
-$ddt-chip-hover-bg-color: $secondary-border-color-hover !default;;
-$ddt-chip-hover-font-color: $secondary-text-color-hover !default;
-$ddt-nodata-font-color: $content-text-color !default;
-$ddt-select-all-font-color: $content-text-color !default;
-$ddt-remains-font-color: $content-text-color-alt3 !default;
+// sass-lint:disable-all
+$ddt-skin-name: $skin-name !default;
+$ddt-box-shadow: none !default;
+$ddt-close-icon-bottom: 10px !default;
+$ddt-dd-icon-bottom: 0 !default;
+$ddt-dd-icon-width: 30px !default;
+$ddt-close-icon-width: 20px !default;
+$ddt-dd-icon-bigger-bottom: 0 !default;
+$ddt-filter-border: 1px solid $border-light !default;
+$ddt-filter-top-border: 0 !default;
+$ddt-filter-padding: 4px !default;
+$ddt-chip-margin: 3px 4px !default;
+$ddt-chip-padding: 0 8px 0 8px !default;
+$ddt-chip-radius: 4px !default;
+$ddt-chip-height: 24px !default;
+$ddt-chip-bigger-height: 30px !default;
+$ddt-chip-content-padding: 0 4px 0 0 !default;
+$ddt-rtl-chip-content-padding: 0 0 0 4px !default;
+$ddt-big-chip-content-padding: 0 8px 0 0 !default;
+$ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
+$ddt-chip-close-font: 10px !default;
+$ddt-chip-close-height: 16px !default;
+$ddt-chip-close-width: 16px !default;
+$ddt-last-chip-right-margin: 48px !default;
+$ddt-last-chip-bigger-right-margin: 52px !default;
+$ddt-select-all-height: 34px !default;
+$ddt-select-all-checkbox-margin: 0 8px !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-reorder-border: $border-light !default;
+$ddt-treeview-padding: 0 8px !default;
+$ddt-chip-width: calc(100% - 2px) !default;
+$ddt-chip-ddi-width: calc(100% - 31px) !default;
+$ddt-chip-ci-width: calc(100% - 31px) !default;
+$ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
+$ddt-big-chip-ddi-width: calc(100% - 37px) !default;
+$ddt-big-chip-ci-width: calc(100% - 37px) !default;
+$ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
+$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-remains-count-padding-top: 0 !default;
+
+// color variables
+$ddt-chip-bg-color: $secondary-bg-color !default;
+$ddt-popup-background-color: $flyout-bg-color !default;
+$ddt-popup-border-color: $border-light !default;
+$ddt-chip-close: $secondary-text-color !default;
+$ddt-chip-font-color: $secondary-text-color !default;
+$ddt-chip-hover-bg-color: $secondary-border-color-hover !default;;
+$ddt-chip-hover-font-color: $secondary-text-color-hover !default;
+$ddt-nodata-font-color: $content-text-color !default;
+$ddt-select-all-font-color: $content-text-color !default;
+$ddt-remains-font-color: $content-text-color-alt3 !default;
 $ddt-readonly-input-bg-color: $content-bg-color !default;

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

@@ -88,7 +88,7 @@
     &.e-show-chip {
 
       .e-chips-close {
-        @if $ddt-skin-name != 'bootstrap5' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
           line-height: $ddt-chip-icon-line-height;
         }
         min-height: $ddt-chip-close-height;
@@ -847,22 +847,14 @@
             right: 33px;
           }
           @else if $ddt-skin-name == 'bootstrap5' {
-            bottom: auto;
-            right: 36px;
+            bottom: 6px;
+            right: 33px;
           }
           @else {
             right: $ddt-dd-icon-bigger-width;
           }
         }
 
-        @if $ddt-skin-name == 'bootstrap5' {
-          &.e-show-chip {
-            &.e-show-dd-icon .e-clear-icon {
-              bottom: 0;
-            }
-          }
-        }
-
         .e-ddt-icon {
           bottom: $ddt-dd-icon-bigger-bottom;
         }
@@ -875,7 +867,7 @@
       }
 
       .e-clear-icon {
-        @if $ddt-skin-name == 'tailwind' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
           min-width: 0;
           padding: 6px;
         }

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

@@ -21,7 +21,6 @@ $ddt-big-chip-content-padding: 0 8px 0 0 !default;
 $ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
 $ddt-chip-close-font: 16px !default;
 $ddt-chip-close-height: 16px !default;
-$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;