@syncfusion/ej2-multicolumn-combobox 28.2.7 → 29.1.33

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

@@ -1,7 +1,7 @@
-import { Property, ChildProperty, Event, getUniqueID, isNullOrUndefined, addClass, removeClass, formatUnit, getValue, attributes, prepend, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, Event, getUniqueID, isNullOrUndefined, addClass, removeClass, prepend, formatUnit, getValue, attributes, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, NotifyPropertyChanges, Component } 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 __extends = (undefined && undefined.__extends) || (function () {
@@ -65,6 +65,7 @@ var NODATA = 'e-nodata';
 var DISABLED = 'e-disabled';
 var INPUTFOCUS = 'e-input-focus';
 var MULTICOLUMNLIST = 'e-multicolumn-list';
+var HIDDENELEMENT = 'e-multicolumn-list-hidden';
 var MULTICOLUMNGRID = 'e-multicolumn-grid';
 var MultiColumnGrid = /** @__PURE__ @class */ (function () {
     function MultiColumnGrid() {
@@ -265,6 +266,7 @@ var MultiColumnComboBox = /** @__PURE__ @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;
     }
@@ -324,14 +326,32 @@ var MultiColumnComboBox = /** @__PURE__ @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();
         this.renderPopup();
         this.wireEvents();
     };
+    MultiColumnComboBox.prototype.setHiddenValue = function () {
+        if (isNullOrUndefined(this.value)) {
+            this.hiddenElement.innerHTML = '';
+            return;
+        }
+        var existingOption = this.hiddenElement.querySelector('option');
+        if (!isNullOrUndefined(existingOption)) {
+            existingOption.textContent = this.text;
+            existingOption.setAttribute('value', this.value.toString());
+        }
+        else if (!isNullOrUndefined(this.hiddenElement)) {
+            var newOption = document.createElement('option');
+            newOption.text = this.text;
+            newOption.setAttribute('value', this.value.toString());
+            newOption.setAttribute('selected', '');
+            this.hiddenElement.appendChild(newOption);
+        }
+    };
     MultiColumnComboBox.prototype.renderGrid = function () {
         var _this = this;
         var gridColumns = this.getGridColumns();
@@ -354,6 +374,12 @@ var MultiColumnComboBox = /** @__PURE__ @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); },
@@ -375,7 +401,7 @@ var MultiColumnComboBox = /** @__PURE__ @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.
@@ -386,12 +412,28 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
                             SortOrder.Ascending : SortOrder.Descending }] };
         }
         this.gridObj.appendTo(this.gridEle);
+        if (!isNullOrUndefined(this.value) || !isNullOrUndefined(this.text) || !isNullOrUndefined(this.index)) {
+            this.initValue(null, null, true);
+        }
     };
     MultiColumnComboBox.prototype.handleActionComplete = function (args) {
+        var _this = this;
         this.trigger('actionComplete', args);
         if (args.requestType === 'sorting') {
             this.updateRowSelection(args);
         }
+        if (Array.isArray(args.rows) && this.isDataFiltered) {
+            var rows = args.rows;
+            var rowHeight_1 = 0;
+            rows.forEach(function (row) {
+                var rowElement = _this.gridObj.getRowElementByUID(row.uid);
+                if (rowElement) {
+                    rowHeight_1 += rowElement.getBoundingClientRect().height;
+                }
+            });
+            this.popupRowHeight = rowHeight_1 || parseFloat(this.popupHeight);
+            this.updateGridHeight(true, true);
+        }
         this.popupObj.refreshPosition();
         this.gridObj.element.querySelector('.e-content').scrollTop = 0;
     };
@@ -500,6 +542,7 @@ var MultiColumnComboBox = /** @__PURE__ @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);
@@ -530,6 +573,19 @@ var MultiColumnComboBox = /** @__PURE__ @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);
@@ -585,13 +641,28 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
         this.inputWrapper = this.inputObj.container;
         this.inputWrapper.classList.add(MULTICOLUMNLIST);
         this.inputWrapper.setAttribute('spellcheck', 'false');
+        this.hiddenElement = this.createElement('select', {
+            attrs: {
+                'aria-hidden': 'true',
+                'tabindex': '-1',
+                'class': HIDDENELEMENT
+            }
+        });
+        prepend([this.hiddenElement], this.inputWrapper);
+        var name = this.inputEle.getAttribute('name') ? this.inputEle.getAttribute('name') : this.inputEle.getAttribute('id');
+        this.hiddenElement.setAttribute('name', name);
+        this.inputEle.removeAttribute('name');
+        if (!this.hiddenElement.hasAttribute('aria-label')) {
+            this.hiddenElement.setAttribute('aria-label', this.getModuleName());
+        }
         if (this.element.tagName === this.getDirective()) {
             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
+        });
     };
     MultiColumnComboBox.prototype.setElementWidth = function (inputWidth) {
         if (isNullOrUndefined(inputWidth)) {
@@ -606,6 +677,7 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiColumnComboBox.prototype.setHTMLAttributes = function () {
+        var _this = this;
         var htmlAttributes = this.htmlAttributes;
         var inputEle = this.inputEle;
         if (Object.keys(htmlAttributes).length) {
@@ -623,12 +695,26 @@ var MultiColumnComboBox = /** @__PURE__ @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'];
-                        if (defaultAttr.indexOf(htmlAttr) > -1) {
+                        var validateAttr = ['name', 'required'];
+                        if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {
+                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        }
+                        else if (defaultAttr.indexOf(htmlAttr) > -1) {
                             if (htmlAttr === 'placeholder') {
                                 Input.setPlaceholder(htmlAttributes[htmlAttr], inputEle);
                             }
@@ -803,7 +889,6 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
         var popupHeight = this.getSize(false);
         this.popupEle.style.maxHeight = popupHeight;
         if (this.footerTemplate) {
-            this.footer = this.footer ? this.footer : this.popupEle.querySelector('.e-popup-footer');
             var height = Math.round(this.footer.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
@@ -812,16 +897,15 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
         this.popupEle.style.visibility = 'hidden';
         this.isInitialRender = true;
     };
-    MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight, dataSourceCount) {
+    MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight) {
         var height;
         if (isFilter) {
             var gridContentEle = this.gridObj.getContent().querySelector('.e-content');
             var scrollBarHeight = gridContentEle.offsetHeight - gridContentEle.clientHeight;
-            var totalRowHeight = dataSourceCount * this.popupRowHeight;
             if (this.fields.groupBy !== '' && !isNullOrUndefined(this.fields.groupBy)) {
-                totalRowHeight += this.popupRowHeight;
+                this.popupRowHeight += this.popupRowHeight;
             }
-            height = autoHeight ? (totalRowHeight < this.prevGridHeight ? (totalRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
+            height = autoHeight ? (this.popupRowHeight < this.prevGridHeight ? (this.popupRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
         }
         else {
             this.prevGridHeight = this.popupDiv.getBoundingClientRect().height - this.popupDiv.querySelector('.e-gridheader').getBoundingClientRect().height;
@@ -978,6 +1062,7 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
                     _this.updateValues(selectedRecords ? dataValue : '', selectedRecords ? dataText : '', _this.gridObj.selectedRowIndex, ChangeEventArgs);
                 }
                 Input.setValue(selectedRecords ? dataText : '', _this.inputEle, _this.floatLabelType, _this.showClearButton);
+                _this.setHiddenValue();
                 if (!isKeyNav || (isKeyNav && isUpdateVal)) {
                     _this.hidePopup(e);
                 }
@@ -992,6 +1077,7 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
         this.value = value || this.value;
         this.index = this.selectedRowIndex = !isNullOrUndefined(index) ? index : this.index;
         this.isProtectedOnChange = prevOnChange;
+        this.setHiddenValue();
         if (!isInitial) {
             this.triggerChangeEvent(eventArgs);
         }
@@ -1119,9 +1205,8 @@ var MultiColumnComboBox = /** @__PURE__ @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, dataLength);
+            _this.updateGridDataSource(filteredData);
         });
     };
     MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
@@ -1138,12 +1223,8 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
                 return false;
         }
     };
-    MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource, dataLength) {
-        var autoHeight = true;
+    MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource) {
         if (dataSource.length > 0) {
-            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');
             if (noRecordEle) {
@@ -1156,7 +1237,6 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
             this.l10nUpdate();
             addClass([this.popupDiv], [NODATA]);
         }
-        this.updateGridHeight(true, autoHeight, dataSource.length);
     };
     MultiColumnComboBox.prototype.wireEvents = function () {
         if (!isNullOrUndefined(this.inputObj.buttons[0])) {
@@ -1438,6 +1518,7 @@ var MultiColumnComboBox = /** @__PURE__ @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) {
@@ -1517,7 +1598,6 @@ var MultiColumnComboBox = /** @__PURE__ @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) {
@@ -1676,6 +1756,8 @@ var MultiColumnComboBox = /** @__PURE__ @class */ (function (_super) {
         this.popupEle = null;
         this.footer = null;
         this.noRecord = null;
+        this.hiddenElement = null;
+        this.dropdownElement = null;
         _super.prototype.destroy.call(this);
     };
     /**