@syncfusion/ej2-multicolumn-combobox 28.2.9 → 29.1.34

package/dist/es6/ej2-multicolumn-combobox.es2015.js

@@ -1,7 +1,7 @@
 import { ChildProperty, Property, Event, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, prepend, formatUnit, getValue, attributes, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { Input } from '@syncfusion/ej2-inputs';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { Popup } from '@syncfusion/ej2-popups';
+import { showSpinner, hideSpinner, createSpinner, Popup } from '@syncfusion/ej2-popups';
 import { Grid, VirtualScroll, Group, Edit, Sort, Resize } from '@syncfusion/ej2-grids';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -207,6 +207,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     constructor(options, element) {
         super(options, element);
         this.gridInject = new MultiColumnGrid();
+        this.isShowSpinner = true;
         this.gridInject.InjectModules();
     }
     /**
@@ -265,8 +266,8 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         }
     }
     render() {
-        this.renderGrid();
         this.renderInput();
+        this.renderGrid();
         this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.appendChild(this.gridEle);
         this.setHTMLAttributes();
@@ -312,6 +313,12 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             allowResizing: this.gridSettings.allowResizing,
             allowMultiSorting: this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting,
             rowTemplate: this.itemTemplate,
+            beforeDataBound: () => {
+                if (this.dataSource instanceof DataManager && this.isShowSpinner) {
+                    this.showHideSpinner(true);
+                    this.isShowSpinner = false;
+                }
+            },
             dataBound: () => { this.onDataBound(); },
             actionFailure: (args) => { this.onActionFailure(args); },
             actionBegin: (args) => { this.trigger('actionBegin', args); },
@@ -333,7 +340,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                 }
             }
         });
-        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.
@@ -344,6 +351,9 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                             SortOrder.Ascending : SortOrder.Descending }] };
         }
         this.gridObj.appendTo(this.gridEle);
+        if (!isNullOrUndefined(this.value) || !isNullOrUndefined(this.text) || !isNullOrUndefined(this.index)) {
+            this.initValue(null, null, true);
+        }
     }
     handleActionComplete(args) {
         this.trigger('actionComplete', args);
@@ -495,6 +505,19 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             const firstRowEle = rowElements[0];
             firstRowEle.classList.add('e-row-focus');
         }
+        if (this.dataSource instanceof DataManager) {
+            setTimeout(() => {
+                this.showHideSpinner(false);
+            });
+        }
+    }
+    showHideSpinner(isShow) {
+        if (isShow) {
+            showSpinner(this.dropdownElement);
+        }
+        else {
+            hideSpinner(this.dropdownElement);
+        }
     }
     onActionFailure(args) {
         this.trigger('actionFailure', args);
@@ -568,9 +591,10 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
             this.element.appendChild(this.inputWrapper);
         }
         this.setElementWidth(this.width);
-        if (!isNullOrUndefined(this.value) || !isNullOrUndefined(this.text) || !isNullOrUndefined(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
+        });
     }
     setElementWidth(inputWidth) {
         if (isNullOrUndefined(inputWidth)) {
@@ -601,9 +625,19 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                         this.setProperties({ readonly: true }, true);
                         this.dataBind();
                         break;
-                    case 'style':
-                        this.inputWrapper.setAttribute('style', htmlAttributes[htmlAttr]);
+                    case 'style': {
+                        const styles = htmlAttributes[htmlAttr];
+                        this.inputWrapper.style.cssText = '';
+                        if (styles) {
+                            styles.split(';').forEach((styleProperty) => {
+                                const [property, value] = styleProperty.split(':').map((part) => part.trim());
+                                if (property && value) {
+                                    this.inputWrapper.style.setProperty(property, value);
+                                }
+                            });
+                        }
                         break;
+                    }
                     default: {
                         const defaultAttr = ['title', 'id', 'placeholder', 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                         const validateAttr = ['name', 'required'];
@@ -1083,7 +1117,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         dataSource.executeQuery(query).then((e) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const dataLists = e.result;
-            const dataLength = dataLists.length;
             filteredData = dataLists.filter((item) => this.filterData(item, filterType, inputValue, fields));
             this.updateGridDataSource(filteredData);
         });
@@ -1393,6 +1426,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
     updateDynamicDataSource(newDataSource, oldDataSource) {
         if (this.gridObj) {
             let dataLength;
+            this.isShowSpinner = true;
             this.gridObj.dataSource = newDataSource;
             const isRemoteData = oldDataSource instanceof DataManager;
             if (isRemoteData) {
@@ -1471,7 +1505,6 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
                     if ((this.value || this.text || this.index)) {
                         this.gridObj.selectRow(this.selectedRowIndex);
                     }
-                    this.focusIn(e);
                 }
                 const contentEle = this.gridObj.getContent();
                 if (contentEle) {
@@ -1629,6 +1662,7 @@ let MultiColumnComboBox = class MultiColumnComboBox extends Component {
         this.footer = null;
         this.noRecord = null;
         this.hiddenElement = null;
+        this.dropdownElement = null;
         super.destroy();
     }
     /**