@syncfusion/ej2-multicolumn-combobox 28.2.9 → 29.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.9
+*  version : 29.1.33
 *  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/package.json

@@ -1,32 +1,30 @@
 {
-  "_from": "@syncfusion/ej2-multicolumn-combobox@*",
-  "_id": "@syncfusion/ej2-multicolumn-combobox@28.2.7",
+  "_from": "@syncfusion/ej2-multicolumn-combobox@29.1.33",
+  "_id": "@syncfusion/ej2-multicolumn-combobox@29.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-fKivE3ta9NK4gf9NXhuoxXHbZLWjS3bO4w/NVliiIXtJlTYpvunyp6JgK6TY9Yp9A0QtTrQn9T/9+Gx83IZHXw==",
+  "_integrity": "sha512-6ZlwlpqvU76sRwwphiKVGoZuUXxrOyw5llyujeXc0olWsVsoqkV+9M4QRpwzAlbagBHaSQWL3ayTZfGLEj9ZBw==",
   "_location": "/@syncfusion/ej2-multicolumn-combobox",
   "_phantomChildren": {},
   "_requested": {
-    "type": "range",
+    "type": "version",
     "registry": true,
-    "raw": "@syncfusion/ej2-multicolumn-combobox@*",
+    "raw": "@syncfusion/ej2-multicolumn-combobox@29.1.33",
     "name": "@syncfusion/ej2-multicolumn-combobox",
     "escapedName": "@syncfusion%2fej2-multicolumn-combobox",
     "scope": "@syncfusion",
-    "rawSpec": "*",
+    "rawSpec": "29.1.34",
     "saveSpec": null,
-    "fetchSpec": "*"
+    "fetchSpec": "29.1.34"
   },
   "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
     "/@syncfusion/ej2-angular-multicolumn-combobox",
     "/@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-28.2.7.tgz",
-  "_shasum": "db04940028f8456784b85f914aabd5fb68a527ea",
-  "_spec": "@syncfusion/ej2-multicolumn-combobox@*",
-  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
+  "_resolved": "https://registry.npmjs.org/@syncfusion/ej2-multicolumn-combobox/-/ej2-multicolumn-combobox-29.1.33.tgz",
+  "_shasum": "eee3e475bb6c3796699145fde9db865cfcce7279",
+  "_spec": "@syncfusion/ej2-multicolumn-combobox@29.1.33",
+  "_where": "E:\\march2025\\memory-leaks\\node_modules\\@syncfusion\\ej2-angular-multicolumn-combobox",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,8 +33,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.9",
-    "@syncfusion/ej2-grids": "~28.2.9"
+    "@syncfusion/ej2-base": "~29.1.33",
+    "@syncfusion/ej2-grids": "~29.1.33"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -56,7 +54,7 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-multicolumn-combobox-component.git"
   },
+  "sideEffects": false,
   "typings": "index.d.ts",
-  "version": "28.2.9",
-  "sideEffects": false
-}
+  "version": "29.1.34"
+}

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';import { formatUnit, addClass, removeClass, NumberFormatOptions, DateFormatOptions, Event, EmitType, AnimationModel, Animation, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DataManager, Query, Group } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { Grid, Resize, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
+import { Component, EventHandler, INotifyPropertyChanged, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents, getValue } from '@syncfusion/ej2-base';import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';import { formatUnit, addClass, removeClass, NumberFormatOptions, DateFormatOptions, Event, EmitType, AnimationModel, Animation, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DataManager, Query, Group } from '@syncfusion/ej2-data';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Grid, Resize, FailureEventArgs, VirtualScroll, Group as GridGroup, Edit, Sort, GridColumnModel } from '@syncfusion/ej2-grids';
 import {TextAlign,GridLine,WrapMode,ResizeArgs,DataResult,FilterType,FloatLabelType,SortOrder,SortType,PopupEventArgs,FilteringEventArgs,SelectEventArgs,ChangeEventArgs} from "./multi-column-combo-box";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

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

@@ -755,6 +755,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
      * @event change
      */
     change: EmitType<ChangeEventArgs>;
+    private dropdownElement;
     private inputEle;
     private inputObj;
     private inputWrapper;
@@ -780,6 +781,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private isInitialRender;
     private remoteDataLength;
     private selectedRowIndex;
+    private isShowSpinner;
     private hiddenElement;
     /**
      * *Constructor for creating the component
@@ -824,6 +826,7 @@ export declare class MultiColumnComboBox extends Component<HTMLElement> implemen
     private getGridColumns;
     private updateGroupByField;
     private onDataBound;
+    private showHideSpinner;
     private onActionFailure;
     private renderInput;
     private setElementWidth;

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

@@ -57,7 +57,7 @@ import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndef
 import { formatUnit, addClass, removeClass, Event, Animation } from '@syncfusion/ej2-base';
 import { Input } from '@syncfusion/ej2-inputs';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { Popup } from '@syncfusion/ej2-popups';
+import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import { Grid, Resize, VirtualScroll, Group as GridGroup, Edit, Sort } from '@syncfusion/ej2-grids';
 var DROPDOWNICON = 'e-input-group-icon e-multicolumn-list-icon e-icons';
 var CONTENT = 'e-popup-content';
@@ -271,6 +271,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     function MultiColumnComboBox(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.gridInject = new MultiColumnGrid();
+        _this.isShowSpinner = true;
         _this.gridInject.InjectModules();
         return _this;
     }
@@ -330,8 +331,8 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.render = function () {
-        this.renderGrid();
         this.renderInput();
+        this.renderGrid();
         this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.appendChild(this.gridEle);
         this.setHTMLAttributes();
@@ -378,6 +379,12 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             allowResizing: this.gridSettings.allowResizing,
             allowMultiSorting: this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting,
             rowTemplate: this.itemTemplate,
+            beforeDataBound: function () {
+                if (_this.dataSource instanceof DataManager && _this.isShowSpinner) {
+                    _this.showHideSpinner(true);
+                    _this.isShowSpinner = false;
+                }
+            },
             dataBound: function () { _this.onDataBound(); },
             actionFailure: function (args) { _this.onActionFailure(args); },
             actionBegin: function (args) { _this.trigger('actionBegin', args); },
@@ -399,7 +406,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                 }
             }
         });
-        this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
+        this.gridEle = this.createElement('div', { id: this.element.id + "_" + getUniqueID('grid'), className: MULTICOLUMNGRID });
         this.updateGroupByField();
         if (gridColumns.length > 0) {
             // Set first column as primary key to avoid PRIMARY KEY MISSING warning.
@@ -410,6 +417,9 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                             SortOrder.Ascending : SortOrder.Descending }] };
         }
         this.gridObj.appendTo(this.gridEle);
+        if (!isNOU(this.value) || !isNOU(this.text) || !isNOU(this.index)) {
+            this.initValue(null, null, true);
+        }
     };
     MultiColumnComboBox.prototype.handleActionComplete = function (args) {
         var _this = this;
@@ -537,6 +547,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.onDataBound = function () {
+        var _this = this;
         var dataCount = this.dataSource.length;
         var popupChild = this.popupDiv.querySelector('.' + MULTICOLUMNGRID);
         var hasNoDataClass = this.popupDiv.classList.contains(NODATA);
@@ -567,6 +578,19 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             var firstRowEle = rowElements[0];
             firstRowEle.classList.add('e-row-focus');
         }
+        if (this.dataSource instanceof DataManager) {
+            setTimeout(function () {
+                _this.showHideSpinner(false);
+            });
+        }
+    };
+    MultiColumnComboBox.prototype.showHideSpinner = function (isShow) {
+        if (isShow) {
+            showSpinner(this.dropdownElement);
+        }
+        else {
+            hideSpinner(this.dropdownElement);
+        }
     };
     MultiColumnComboBox.prototype.onActionFailure = function (args) {
         this.trigger('actionFailure', args);
@@ -640,9 +664,10 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
             this.element.appendChild(this.inputWrapper);
         }
         this.setElementWidth(this.width);
-        if (!isNOU(this.value) || !isNOU(this.text) || !isNOU(this.index)) {
-            this.initValue(null, null, true);
-        }
+        this.dropdownElement = this.inputWrapper.querySelector('.e-input-group-icon.e-multicolumn-list-icon.e-icons');
+        createSpinner({
+            target: this.dropdownElement
+        });
     };
     MultiColumnComboBox.prototype.setElementWidth = function (inputWidth) {
         if (isNOU(inputWidth)) {
@@ -657,6 +682,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.setHTMLAttributes = function () {
+        var _this = this;
         var htmlAttributes = this.htmlAttributes;
         var inputEle = this.inputEle;
         if (Object.keys(htmlAttributes).length) {
@@ -674,9 +700,19 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                         this.setProperties({ readonly: true }, true);
                         this.dataBind();
                         break;
-                    case 'style':
-                        this.inputWrapper.setAttribute('style', htmlAttributes[htmlAttr]);
+                    case 'style': {
+                        var styles = htmlAttributes[htmlAttr];
+                        this.inputWrapper.style.cssText = '';
+                        if (styles) {
+                            styles.split(';').forEach(function (styleProperty) {
+                                var _a = styleProperty.split(':').map(function (part) { return part.trim(); }), property = _a[0], value = _a[1];
+                                if (property && value) {
+                                    _this.inputWrapper.style.setProperty(property, value);
+                                }
+                            });
+                        }
                         break;
+                    }
                     default: {
                         var defaultAttr = ['title', 'id', 'placeholder', 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                         var validateAttr = ['name', 'required'];
@@ -1174,7 +1210,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         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);
         });
@@ -1488,6 +1523,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
     MultiColumnComboBox.prototype.updateDynamicDataSource = function (newDataSource, oldDataSource) {
         if (this.gridObj) {
             var dataLength_1;
+            this.isShowSpinner = true;
             this.gridObj.dataSource = newDataSource;
             var isRemoteData = oldDataSource instanceof DataManager;
             if (isRemoteData) {
@@ -1567,7 +1603,6 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
                     if ((_this.value || _this.text || _this.index)) {
                         _this.gridObj.selectRow(_this.selectedRowIndex);
                     }
-                    _this.focusIn(e);
                 }
                 var contentEle = _this.gridObj.getContent();
                 if (contentEle) {
@@ -1727,6 +1762,7 @@ var MultiColumnComboBox = /** @class */ (function (_super) {
         this.footer = null;
         this.noRecord = null;
         this.hiddenElement = null;
+        this.dropdownElement = null;
         _super.prototype.destroy.call(this);
     };
     /**

package/styles/bds-lite.css

@@ -210,11 +210,61 @@
   min-width: 300px !important;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
   content: "\e729";
   font-family: "e-icons";
 }
 
+.e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
+  /* stylelint-disable declaration-no-important */
+  height: 20px !important;
+  width: 20px !important;
+  -webkit-transform-origin: 10px 10px 10px !important;
+          transform-origin: 10px 10px 10px !important;
+  /* stylelint-enable declaration-no-important */
+}
+
 .e-multicolumn-grid tr.e-groupcaptionrow {
   position: sticky;
   top: 0;
@@ -344,7 +394,8 @@
   overflow: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
+.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
+.e-multicolumn-list.e-input-group .e-input-group-icon {
   position: relative;
 }
 

package/styles/bds-lite.scss

@@ -5,6 +5,7 @@
 @import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
 @import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
 @import 'ej2-grids/styles/grid/bds-definition.scss';
+@import 'ej2-popups/styles/spinner/bds-definition.scss';
 @import 'multicolumn-combobox/bds-definition.scss';
 @import 'multicolumn-combobox/icons/bds.scss';
 @import 'multicolumn-combobox/all.scss';

package/styles/bds.css

@@ -210,11 +210,61 @@
   min-width: 300px !important;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
   content: "\e729";
   font-family: "e-icons";
 }
 
+.e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
+  /* stylelint-disable declaration-no-important */
+  height: 20px !important;
+  width: 20px !important;
+  -webkit-transform-origin: 10px 10px 10px !important;
+          transform-origin: 10px 10px 10px !important;
+  /* stylelint-enable declaration-no-important */
+}
+
 .e-multicolumn-grid tr.e-groupcaptionrow {
   position: sticky;
   top: 0;
@@ -344,7 +394,8 @@
   overflow: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
+.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
+.e-multicolumn-list.e-input-group .e-input-group-icon {
   position: relative;
 }
 
@@ -440,6 +491,16 @@
   margin-top: 2px;
 }
 
+.e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
+.e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
+  /* stylelint-disable declaration-no-important */
+  height: 26px !important;
+  width: 26px !important;
+  -webkit-transform-origin: 13px 13px 13px !important;
+          transform-origin: 13px 13px 13px !important;
+  /* stylelint-enable declaration-no-important */
+}
+
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,

package/styles/bds.scss

@@ -5,6 +5,7 @@
 @import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
 @import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
 @import 'ej2-grids/styles/grid/bds-definition.scss';
+@import 'ej2-popups/styles/spinner/bds-definition.scss';
 @import 'multicolumn-combobox/bds-definition.scss';
 @import 'multicolumn-combobox/icons/bds.scss';
 @import 'multicolumn-combobox/all.scss';

package/styles/bootstrap-dark-lite.css

@@ -64,11 +64,61 @@
   border-bottom: 1px solid #484848;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
   content: "\e969";
   font-family: "e-icons";
 }
 
+.e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
+  /* stylelint-disable declaration-no-important */
+  height: 20px !important;
+  width: 20px !important;
+  -webkit-transform-origin: 10px 10px 10px !important;
+          transform-origin: 10px 10px 10px !important;
+  /* stylelint-enable declaration-no-important */
+}
+
 .e-multicolumn-grid tr.e-groupcaptionrow {
   position: sticky;
   top: 0;
@@ -198,7 +248,8 @@
   overflow: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
+.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
+.e-multicolumn-list.e-input-group .e-input-group-icon {
   position: relative;
 }
 

package/styles/bootstrap-dark-lite.scss

@@ -5,6 +5,7 @@
 @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 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
 @import 'multicolumn-combobox/bootstrap-dark-definition.scss';
 @import 'multicolumn-combobox/icons/bootstrap-dark.scss';
 @import 'multicolumn-combobox/all.scss';

package/styles/bootstrap-dark.css

@@ -64,11 +64,61 @@
   border-bottom: 1px solid #484848;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
   content: "\e969";
   font-family: "e-icons";
 }
 
+.e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
+  /* stylelint-disable declaration-no-important */
+  height: 20px !important;
+  width: 20px !important;
+  -webkit-transform-origin: 10px 10px 10px !important;
+          transform-origin: 10px 10px 10px !important;
+  /* stylelint-enable declaration-no-important */
+}
+
 .e-multicolumn-grid tr.e-groupcaptionrow {
   position: sticky;
   top: 0;
@@ -198,7 +248,8 @@
   overflow: auto !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon {
+.e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
+.e-multicolumn-list.e-input-group .e-input-group-icon {
   position: relative;
 }
 
@@ -294,6 +345,16 @@
   margin-top: unset;
 }
 
+.e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
+.e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
+  /* stylelint-disable declaration-no-important */
+  height: 26px !important;
+  width: 26px !important;
+  -webkit-transform-origin: 13px 13px 13px !important;
+          transform-origin: 13px 13px 13px !important;
+  /* stylelint-enable declaration-no-important */
+}
+
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-headercelldiv,
 .e-bigger.e-small.e-popup .e-multicolumn-grid .e-rowcell, .e-bigger.e-small.e-popup.e-multicolumn-list .e-popup-footer,
 .e-bigger.e-small .e-popup .e-multicolumn-grid .e-headercelldiv,

package/styles/bootstrap-dark.scss

@@ -5,6 +5,7 @@
 @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 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
 @import 'multicolumn-combobox/bootstrap-dark-definition.scss';
 @import 'multicolumn-combobox/icons/bootstrap-dark.scss';
 @import 'multicolumn-combobox/all.scss';