@syncfusion/ej2-multicolumn-combobox 26.2.12 → 27.1.50

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.2.12
+*  version : 27.1.50
 *  Copyright Syncfusion Inc. 2001 - 2023. 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-multicolumn-combobox@*",
-  "_id": "@syncfusion/ej2-multicolumn-combobox@26.2.10",
+  "_id": "@syncfusion/ej2-multicolumn-combobox@27.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-KNb+kJ1fjWr+Bpq183i76TwNktCk/PmC6ZK3CTOVY9n4VjYw6IvgJJNHVB2uH+1O6jz6pEGg3p7+nWDRXyJyDA==",
+  "_integrity": "sha512-mH+FtBZH163NMhWO7mcKD5zrGGFYQwqfJHyOcKLb7lVCOTRe9IX+5/7AJqgOFKrt39fFg6mVFfnqSLyM7wPzcQ==",
   "_location": "/@syncfusion/ej2-multicolumn-combobox",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-multicolumn-combobox",
     "/@syncfusion/ej2-vue-multicolumn-combobox"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-26.2.10.tgz",
-  "_shasum": "eb760582866d2891694337f388296d04f9967f07",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-27.1.48.tgz",
+  "_shasum": "17f5a0f611fde0cd72e7d3a51a5d5e443b74424b",
   "_spec": "@syncfusion/ej2-multicolumn-combobox@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,8 +35,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.2.10",
-    "@syncfusion/ej2-grids": "~26.2.12"
+    "@syncfusion/ej2-base": "~27.1.50",
+    "@syncfusion/ej2-grids": "~27.1.50"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -57,6 +57,6 @@
     "url": "git+https://github.com/syncfusion/ej2-multicolumn-combobox-component.git"
   },
   "typings": "index.d.ts",
-  "version": "26.2.12",
+  "version": "27.1.50",
   "sideEffects": false
 }

package/src/multicolumn-combobox/multi-column-combo-box-model.d.ts

@@ -159,7 +159,7 @@ export interface GridSettingsModel {
 
     /**
      * Specifies the mode for text wrapping in the popup grid content. Options include 'Both', 'Content', and 'Header'.
-     * 
+     *
      * @isenumeration true
      *
      * @default WrapMode.Both

package/src/multicolumn-combobox/multi-column-combo-box.d.ts

@@ -381,11 +381,11 @@ export interface DataResult {
  * The selected value will be displayed in the input element.
  *
  * ```html
- *  <input type="text" id="multi-column"></input>
+ *  <input type='text' id='multi-column'></input>
  * ```
  * ```typescript
  *  let multiColObj: MultiColumnComboBox = new MultiColumnComboBox();
- *  multiColObj.appendTo("#multi-column");
+ *  multiColObj.appendTo('#multi-column');
  * ```
  */
 export declare class MultiColumnComboBox extends Component<HTMLElement> implements INotifyPropertyChanged {
@@ -810,6 +810,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private updateInputValue;
     private selectFilteredRows;
     private filterAction;
+    private filteringHandler;
     private filterData;
     private updateGridDataSource;
     private wireEvents;
@@ -844,6 +845,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
      * Opens the popup that displays the list of items.
      *
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @param {boolean} isInputOpen - Specifies whether the input is open or not.
      * @returns {void}
      */
     showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent, isInputOpen?: boolean): void;

package/src/multicolumn-combobox/multi-column-combo-box.js

@@ -204,11 +204,11 @@ export { GridSettings };
  * The selected value will be displayed in the input element.
  *
  * ```html
- *  <input type="text" id="multi-column"></input>
+ *  <input type='text' id='multi-column'></input>
  * ```
  * ```typescript
  *  let multiColObj: MultiColumnComboBox = new MultiColumnComboBox();
- *  multiColObj.appendTo("#multi-column");
+ *  multiColObj.appendTo('#multi-column');
  * ```
  */
 var MultiColumnComboBox = /** @class */ (function (_super) {
@@ -318,6 +318,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 if (args.requestType === 'sorting') {
                     _this.updateRowSelection(args);
                 }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataRows = args.rows;
                 if (_this.isDataFiltered && dataRows.length > 0 && _this.inputEle.value !== '' && args.requestType !== 'sorting') {
                     var firstRowEle = _this.gridObj.getRows()[0];
@@ -353,7 +354,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
         this.gridObj.appendTo(this.gridEle);
     };
-    // eslint-disable @typescript-eslint/no-explicit-any
+    /* eslint-disable @typescript-eslint/no-explicit-any */
     MultiColumnComboBox.prototype.isRowMatching = function (data, selectedValue, selectedText) {
         var values = Object.values(data).map(String);
         var isRowPresent = values.includes(selectedValue) && values.includes(selectedText);
@@ -383,11 +384,11 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.findIndex = function (arr, obj) {
         return arr.findIndex(function (item) {
+            // eslint-disable-next-line
             return Object.keys(obj).every(function (key) { return item[key] === obj[key]; });
         });
     };
-    ;
-    // eslint-enable @typescript-eslint/no-explicit-any
+    /* eslint-enable @typescript-eslint/no-explicit-any */
     MultiColumnComboBox.prototype.getGridColumns = function () {
         var _this = this;
         return this.columns.map(function (column) {
@@ -421,7 +422,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 showDropArea: false,
                 columns: [this.fields.groupBy],
                 captionTemplate: (this.groupTemplate && this.fields.groupBy !== '' && !isNOU(this.fields.groupBy))
-                    ? this.groupTemplate : "${key}"
+                    ? this.groupTemplate : '${key}'
             };
             if (this.isVue) {
                 this.gridObj.isVue = this.isVue;
@@ -445,7 +446,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             }
         }
         if (this.isInitialRender) {
-            var rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : this.popupDiv.getBoundingClientRect().height;
+            var rowHeight = !this.popupDiv.classList.contains(NODATA) ? this.popupDiv.querySelector('.e-gridcontent tr') ?
+                this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height : 0 :
+                this.popupDiv.getBoundingClientRect().height;
             this.popupRowHeight = rowHeight;
             this.popupObj.hide();
             this.popupEle.style.visibility = 'unset';
@@ -626,8 +629,29 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 });
             }
             else if (!isNOU(this.dataSource) && this.dataSource instanceof Array) {
-                item = this.dataSource[this.index];
-                updateValues(this.dataSource);
+                if (!this.fields.groupBy) {
+                    item = this.dataSource[this.index];
+                    updateValues(this.dataSource);
+                }
+                else {
+                    setTimeout(function () {
+                        var rows = _this.gridObj.getRows();
+                        if (rows && rows.length > 0) {
+                            var rowData = _this.gridObj.getRowInfo(rows[_this.index]).rowData;
+                            var value = _this.fields.value;
+                            for (var i = 0; i < rows.length; i++) {
+                                if (rowData && rowData[parseInt(value.toString(), 10)] ===
+                                    _this.dataSource[parseInt(i.toString(), 10)][parseInt(value.toString(), 10)]) {
+                                    item = rowData;
+                                    updateValues(_this.dataSource);
+                                    _this.updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial);
+                                    _this.gridObj.selectRow(_this.index);
+                                    break;
+                                }
+                            }
+                        }
+                    });
+                }
             }
         }
         if (!(this.dataSource instanceof DataManager)) {
@@ -910,6 +934,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         var data;
         if (this.dataSource instanceof DataManager) {
             var query = new Query();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.dataSource.executeQuery(query).then(function (result) {
                 var totaldata = result.result;
                 data = totaldata.filter(function (item) {
@@ -943,39 +968,48 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MultiColumnComboBox.prototype.filterAction = function (dataSource, inputValue, query, fields) {
         var _this = this;
-        var dataLists;
         if (isNullOrUndefined(query) && isNullOrUndefined(fields)) {
             this.updateGridDataSource(dataSource);
         }
         else if (query) {
-            new DataManager(dataSource).executeQuery(query).then(function (e) {
-                dataLists = e.result;
-                _this.updateGridDataSource(dataLists);
-            });
-        }
-        else {
-            var filterType_1 = this.filterType.toString().toLowerCase();
-            var isQuery = query || new Query();
-            var filteredData_1;
             if (dataSource instanceof DataManager) {
-                // Handle filtering for DataManager
-                dataSource.executeQuery(isQuery).then(function (e) {
+                this.filteringHandler(dataSource, inputValue, query, fields);
+            }
+            else {
+                new DataManager(dataSource).executeQuery(query).then(function (e) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var dataLists = e.result;
-                    var dataLength = dataLists.length;
-                    filteredData_1 = dataLists.filter(function (item) { return _this.filterData(item, filterType_1, inputValue, fields); });
-                    _this.updateGridDataSource(filteredData_1, dataLength);
+                    _this.updateGridDataSource(dataLists);
                 });
             }
+        }
+        else {
+            var isQuery = query || new Query();
+            if (dataSource instanceof DataManager) {
+                this.filteringHandler(dataSource, inputValue, isQuery, fields);
+            }
             else if (Array.isArray(dataSource)) {
-                // Handle filtering for array data source
-                filteredData_1 = dataSource.filter(function (item) {
+                var filterType_1 = this.filterType.toString().toLowerCase();
+                var filteredData = dataSource.filter(function (item) {
                     return _this.filterData(item, filterType_1, inputValue, fields);
                 });
-                this.updateGridDataSource(filteredData_1);
+                this.updateGridDataSource(filteredData);
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    MultiColumnComboBox.prototype.filteringHandler = function (dataSource, inputValue, query, fields) {
+        var _this = this;
+        var filterType = this.filterType.toString().toLowerCase();
+        var filteredData;
+        dataSource.executeQuery(query).then(function (e) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var dataLists = e.result;
+            var dataLength = dataLists.length;
+            filteredData = dataLists.filter(function (item) { return _this.filterData(item, filterType, inputValue, fields); });
+            _this.updateGridDataSource(filteredData, dataLength);
+        });
+    };
     MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
         var itemValue = item[fields ? fields.text : this.fields.text].toString().toLowerCase();
         switch (filterType) {
@@ -992,7 +1026,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource, dataLength) {
         var autoHeight = true;
         if (dataSource.length > 0) {
-            var length_1 = this.dataSource instanceof DataManager ? dataLength : this.dataSource.length;
+            var length_1 = this.dataSource instanceof DataManager ? dataLength
+                : this.dataSource.length;
             autoHeight = length_1 !== dataSource.length;
             removeClass([this.popupDiv], [NODATA]);
             var noRecordEle = this.popupDiv.querySelector('.e-no-records');
@@ -1101,6 +1136,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     };
     MultiColumnComboBox.prototype.updateValuesOnInput = function (mouseEvent, keyEvent, isClearValues) {
         var _this = this;
+        if (isClearValues === void 0) { isClearValues = false; }
         var e = mouseEvent ? mouseEvent : keyEvent;
         this.hidePopup(e);
         if (this.matchedRowEle && !isClearValues) {
@@ -1247,7 +1283,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.updateSelectedItem = function (e, isUpdateIndex, isInputTarget) {
         if (isUpdateIndex === void 0) { isUpdateIndex = true; }
         if (this.isPopupOpen) {
-            var index = !this.fields.groupBy ? this.gridObj.selectedRowIndex : this.gridObj.selectedRowIndex ? this.gridObj.selectedRowIndex : 0;
+            var index = !this.fields.groupBy ? this.gridObj.selectedRowIndex
+                : this.gridObj.selectedRowIndex ? this.gridObj.selectedRowIndex : 0;
             if ((index === -1 && (e.action === 'moveDown' || e.action === 'moveUp')) || (e.action === 'home')) {
                 index = 0;
             }
@@ -1267,7 +1304,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 focusedEle.classList.remove('e-row-focus');
             }
             if (isUpdateIndex) {
-                this.selectedGridRow(this.gridObj.getRows()[index], e, true);
+                this.selectedGridRow(this.gridObj.getRows()[parseInt(index.toString(), 10)], e, true);
             }
         }
     };
@@ -1308,19 +1345,22 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         if (this.isPopupOpen) {
             this.hidePopup(e);
         }
-        removeClass([this.inputWrapper], [INPUTFOCUS]);
-        var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
-        if (clearIconEle) {
-            clearIconEle.style.display = 'none';
-        }
-        if (this.floatLabelType !== 'Never') {
-            Input.calculateWidth(this.inputEle, this.inputWrapper);
+        if (this.inputWrapper) {
+            removeClass([this.inputWrapper], [INPUTFOCUS]);
+            var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
+            if (clearIconEle) {
+                clearIconEle.style.display = 'none';
+            }
+            if (this.floatLabelType !== 'Never') {
+                Input.calculateWidth(this.inputEle, this.inputWrapper);
+            }
         }
     };
     /**
      * Opens the popup that displays the list of items.
      *
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @param {boolean} isInputOpen - Specifies whether the input is open or not.
      * @returns {void}
      */
     MultiColumnComboBox.prototype.showPopup = function (e, isInputOpen) {
@@ -1335,9 +1375,19 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 attributes(_this.inputEle, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 if (!isInputOpen) {
                     if ((_this.value || _this.text || _this.index)) {
-                        var dataRows = _this.gridObj.currentViewData;
+                        var dataRows = _this.gridObj.getRowsObject();
+                        var groupIndex_1;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         dataRows.forEach(function (data, index) {
-                            _this.selectDataRow(data, index);
+                            if (_this.fields.groupBy && isNOU(data.data.items)) {
+                                if (isNOU(groupIndex_1)) {
+                                    groupIndex_1 = 0;
+                                }
+                                else {
+                                    groupIndex_1 += 1;
+                                }
+                            }
+                            _this.selectDataRow(data.data, !_this.fields.groupBy ? index : groupIndex_1);
                         });
                     }
                     _this.focusIn(e);
@@ -1552,7 +1602,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     this.initValue(true, false);
                     break;
                 case 'index':
-                    this.initValue();
+                    this.initValue(true);
                     break;
                 case 'sortOrder':
                     if (this.gridObj) {
@@ -1626,7 +1676,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     }
                     break;
                 case 'sortType':
-                    this.sortType = newProp.sortType;
+                    if (this.gridObj) {
+                        this.sortType = newProp.sortType;
+                        this.gridObj.allowMultiSorting = this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting;
+                    }
                     break;
                 case 'allowFiltering':
                     this.allowFiltering = newProp.allowFiltering;

package/styles/bootstrap-dark-lite.css

@@ -0,0 +1,267 @@
+.e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 10px 0 0;
+}
+
+.e-small .e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 8px 0 0;
+}
+
+.e-popup.e-ddl {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+  margin-top: 3px;
+}
+.e-popup.e-ddl .e-input-group {
+  width: auto;
+}
+.e-popup.e-ddl .e-input-group input {
+  line-height: 15px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+}
+
+.e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+}
+.e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
+  border: 0;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
+  background: transparent;
+  color: #f0f0f0;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
+.e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
+.e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
+  border: 0;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-ddl.e-popup .e-filter-parent {
+  border-bottom: 1px solid #484848;
+}
+
+.e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
+  content: "\e969";
+  font-family: "e-icons";
+}
+
+.e-multicolumn-grid tr.e-groupcaptionrow {
+  position: sticky;
+  top: 0;
+}
+
+.e-multicolumn-grid th.e-grouptopleftcell.e-lastgrouptopleftcell,
+.e-multicolumn-grid th.e-grouptopleftcell.e-lastgroupleftcell,
+.e-multicolumn-grid td.e-recordplusexpand,
+.e-multicolumn-grid td.e-indentcell,
+.e-multicolumn-grid col.e-group-intent,
+.e-multicolumn-list .e-no-records + .e-grid {
+  display: none;
+}
+
+.e-multicolumn-grid td.e-rowcell {
+  cursor: default;
+}
+
+.e-multicolumn-grid .e-gridheader .e-headercelldiv {
+  overflow: hidden;
+}
+
+.e-multicolumn-list .e-popup-footer {
+  vertical-align: middle;
+  border-style: solid;
+  border-width: 0 1px 0 1px;
+  font-size: 14px;
+  height: 36px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 0 0 4px 4px;
+}
+
+.e-multicolumn-grid.e-grid {
+  border-width: 1px;
+  border-radius: 4px;
+}
+.e-multicolumn-grid.e-grid .e-gridcontent {
+  border-radius: 0 0 4px 4px;
+}
+
+.e-input-group.e-multicolumn-list input[readonly].e-input {
+  pointer-events: none;
+}
+
+.e-multicolumn-list:has(.e-popup-footer) .e-multicolumn-grid.e-grid {
+  border-radius: 4px 4px 0 0;
+}
+.e-multicolumn-list:has(.e-popup-footer) .e-multicolumn-grid.e-grid .e-gridcontent {
+  border-radius: 0;
+}
+.e-multicolumn-list.e-icon-anim .e-multicolumn-list-icon::before {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.e-multicolumn-list:not(.e-icon-anim) .e-multicolumn-list-icon::before {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+}
+.e-multicolumn-list .e-multicolumn-list-icon::before {
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-multicolumn-grid .e-grid {
+  overflow: auto;
+}
+
+.e-multicolumn-grid .e-row,
+.e-multicolumn-grid .e-emptyrow {
+  height: 36px;
+}
+
+.e-multicolumn-group .e-sortnumber {
+  display: none;
+}
+
+.e-popup.e-multicolumn-list {
+  position: absolute;
+  border-radius: 4px;
+  margin-top: unset;
+}
+.e-popup.e-multicolumn-list .e-nodata {
+  cursor: default;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 14px 16px;
+  text-align: center;
+  border-radius: inherit;
+}
+.e-popup.e-multicolumn-list .e-headertext {
+  font-weight: 500;
+}
+.e-popup.e-multicolumn-list .e-gridheader {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-radius: 4px 4px 0 0;
+}
+
+.e-multicolumn-grid .e-headercontent {
+  border-right-color: transparent; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-multicolumn-grid.e-rtl .e-headercontent {
+  border-left-color: transparent; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-multicolumn-grid .e-content {
+  overflow: auto !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
+  position: relative;
+}
+
+.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
+.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-small.e-popup.e-multicolumn-list .e-popup-footer,
+.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,
+.e-small .e-popup .e-multicolumn-grid .e-rowcell,
+.e-small .e-popup.e-multicolumn-list .e-popup-footer {
+  font-size: 12px;
+}
+.e-small.e-popup.e-multicolumn-list .e-popup-footer,
+.e-small.e-popup .e-multicolumn-grid .e-row,
+.e-small.e-popup .e-multicolumn-grid .e-emptyrow,
+.e-small .e-popup.e-multicolumn-list .e-popup-footer,
+.e-small .e-popup .e-multicolumn-grid .e-row,
+.e-small .e-popup .e-multicolumn-grid .e-emptyrow {
+  height: 32px;
+}
+.e-small.e-popup.e-multicolumn-list,
+.e-small .e-popup.e-multicolumn-list {
+  margin-top: unset;
+}
+
+.e-multicolumn-list .e-popup-footer {
+  background: #2a2a2a;
+  color: #0070f0;
+  border-color: #484848;
+}
+
+.e-input-group.e-multicolumn-list:focus-visible {
+  outline: transparent;
+}
+
+.e-popup.e-multicolumn-list {
+  background: transparent;
+  -webkit-box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.05), 0 2px 11px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.05), 0 2px 11px 0 rgba(0, 0, 0, 0.1);
+}
+.e-popup.e-multicolumn-list .e-nodata {
+  color: #0070f0;
+  border: 1px solid #484848;
+  background: #2a2a2a;
+}
+.e-popup.e-multicolumn-list .e-multicolumn-grid .e-rowcell {
+  color: #fff;
+}
+.e-popup.e-multicolumn-list .e-multicolumn-grid .e-focused {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-popup.e-multicolumn-list .e-gridhover .e-row:hover .e-rowcell:not(.e-active),
+.e-popup.e-multicolumn-list .e-gridcontent .e-row-focus {
+  background: #414141 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-popup.e-multicolumn-list .e-multicolumn-grid td.e-active {
+  background: #0070f0;
+  color: #fff;
+}
+.e-popup.e-multicolumn-list .e-groupcaption {
+  color: #0070f0;
+  background: #2a2a2a;
+}
+.e-popup.e-multicolumn-list .e-gridheader,
+.e-popup.e-multicolumn-list .e-gridheader colgroup {
+  background: transparent;
+}
+.e-popup.e-multicolumn-list .e-altrow {
+  background: #393939;
+}
+.e-popup.e-multicolumn-list .e-grid .e-headercell {
+  background-color: unset;
+}
+.e-popup.e-multicolumn-list .e-headertext,
+.e-popup.e-multicolumn-list .e-grid th.e-headercell[aria-sort=ascending] .e-headertext,
+.e-popup.e-multicolumn-list .e-grid th.e-headercell[aria-sort=descending] .e-headertext {
+  color: #0070f0;
+}

package/styles/bootstrap-dark-lite.scss

@@ -0,0 +1,10 @@
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
+@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
+@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition.scss';
+@import 'ej2-grids/styles/grid/bootstrap-dark-definition.scss';
+@import 'multicolumn-combobox/bootstrap-dark-definition.scss';
+@import 'multicolumn-combobox/icons/bootstrap-dark.scss';
+@import 'multicolumn-combobox/all.scss';