@syncfusion/ej2-multicolumn-combobox 26.1.35

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

@@ -0,0 +1,1666 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, EventHandler, Property, NotifyPropertyChanges, closest, attributes, append, compile, detach, KeyboardEvents } from '@syncfusion/ej2-base';
+import { ChildProperty, prepend, Collection, getUniqueID, Complex, isNullOrUndefined as isNOU, select, L10n, Browser } from '@syncfusion/ej2-base';
+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 { Grid, 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';
+var ICONANIMATION = 'e-icon-anim';
+var NODATA = 'e-nodata';
+var DISABLED = 'e-disabled';
+var INPUTFOCUS = 'e-input-focus';
+var MULTICOLUMNLIST = 'e-multicolumn-list';
+var MULTICOLUMNGRID = 'e-multicolumn-grid';
+var MultiColumnGrid = /** @class */ (function () {
+    function MultiColumnGrid() {
+    }
+    /**
+     * Injecting required modules for component.
+     *
+     * @returns {void}
+     * @private
+     */
+    MultiColumnGrid.prototype.InjectModules = function () {
+        Grid.Inject(VirtualScroll, GridGroup, Edit, Sort);
+    };
+    return MultiColumnGrid;
+}());
+export { MultiColumnGrid };
+/**
+ * Defines the filter type.
+ */
+export var FilterType;
+(function (FilterType) {
+    /**
+     * Checks whether a value begins with the specified value.
+     */
+    FilterType["StartsWith"] = "StartsWith";
+    /**
+     * Checks whether a value ends with specified value.
+     */
+    FilterType["EndsWith"] = "EndsWith";
+    /**
+     * Checks whether a value contains with specified value.
+     */
+    FilterType["Contains"] = "Contains";
+})(FilterType || (FilterType = {}));
+/**
+ * Specifies the sortOrder to sort the data source.
+ */
+export var SortOrder;
+(function (SortOrder) {
+    /**
+     * The datasource is not sorting. Default value is None.
+     */
+    SortOrder["None"] = "None";
+    /**
+     * The datasource is sorting with ascending order.
+     */
+    SortOrder["Ascending"] = "Ascending";
+    /**
+     * The data source is sorting with descending order.
+     */
+    SortOrder["Descending"] = "Descending";
+})(SortOrder || (SortOrder = {}));
+/**
+ * Specifies the type of sorting to be applied for the columns.
+ */
+export var SortType;
+(function (SortType) {
+    /**
+     * Allow sorting only one column
+     */
+    SortType["OneColumn"] = "OneColumn";
+    /**
+     * Allow sorting multiple columns
+     */
+    SortType["MultipleColumns"] = "MultipleColumns";
+})(SortType || (SortType = {}));
+/**
+ * The fields property maps the columns of the data table and binds the data to the component.
+ */
+var FieldSettings = /** @class */ (function (_super) {
+    __extends(FieldSettings, _super);
+    function FieldSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property()
+    ], FieldSettings.prototype, "text", void 0);
+    __decorate([
+        Property()
+    ], FieldSettings.prototype, "value", void 0);
+    __decorate([
+        Property()
+    ], FieldSettings.prototype, "groupBy", void 0);
+    return FieldSettings;
+}(ChildProperty));
+export { FieldSettings };
+/**
+ * Specifies the number of columns and its respective fields to be displayed in the dropdown popup.
+ */
+var Column = /** @class */ (function (_super) {
+    __extends(Column, _super);
+    function Column() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], Column.prototype, "field", void 0);
+    __decorate([
+        Property('')
+    ], Column.prototype, "header", void 0);
+    __decorate([
+        Property('')
+    ], Column.prototype, "width", void 0);
+    __decorate([
+        Property('')
+    ], Column.prototype, "textAlign", void 0);
+    __decorate([
+        Property(null)
+    ], Column.prototype, "format", void 0);
+    __decorate([
+        Property(false)
+    ], Column.prototype, "displayAsCheckBox", void 0);
+    __decorate([
+        Property(null)
+    ], Column.prototype, "template", void 0);
+    __decorate([
+        Property(null)
+    ], Column.prototype, "headerTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], Column.prototype, "customAttributes", void 0);
+    return Column;
+}(ChildProperty));
+export { Column };
+/**
+ * Specifies the configuration of the columns in the popup content.
+ */
+var GridSettings = /** @class */ (function (_super) {
+    __extends(GridSettings, _super);
+    function GridSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(false)
+    ], GridSettings.prototype, "enableAltRow", void 0);
+    __decorate([
+        Property(null)
+    ], GridSettings.prototype, "rowHeight", void 0);
+    __decorate([
+        Property('Default')
+    ], GridSettings.prototype, "gridLines", void 0);
+    return GridSettings;
+}(ChildProperty));
+export { GridSettings };
+/**
+ * The `MultiColumnComboBox` allows the user to search and select values from a list. It provides a list of options that can be selected using a filter input.
+ * The selected value will be displayed in the input element.
+ *
+ * ```html
+ *  <input type="text" id="multi-column"></input>
+ * ```
+ * ```typescript
+ *  let multiColObj: MultiColumnComboBox = new MultiColumnComboBox();
+ *  multiColObj.appendTo("#multi-column");
+ * ```
+ */
+var MultiColumnComboBox = /** @class */ (function (_super) {
+    __extends(MultiColumnComboBox, _super);
+    /**
+     * *Constructor for creating the component
+     *
+     * @param {MultiColumnComboBoxModel} options - Specifies the MultiColumnComboBox model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    function MultiColumnComboBox(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.gridInject = new MultiColumnGrid();
+        _this.gridInject.InjectModules();
+        return _this;
+    }
+    /**
+     * Initialize the event handler
+     *
+     * @private
+     * @returns {void}
+     */
+    MultiColumnComboBox.prototype.preRender = function () {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+        this.keyConfigs = {
+            escape: 'escape',
+            altUp: 'alt+uparrow',
+            altDown: 'alt+downarrow',
+            tab: 'tab',
+            shiftTab: 'shift+tab',
+            end: 'end',
+            enter: 'enter',
+            home: 'home',
+            moveDown: 'downarrow',
+            moveUp: 'uparrow'
+        };
+        this.matchedRowEle = this.matchedContent = null;
+        this.persistData();
+    };
+    MultiColumnComboBox.prototype.getDirective = function () {
+        return 'EJS-MULTICOLUMNCOMBOBOX';
+    };
+    /**
+     * To get component name.
+     *
+     * @returns {string} - It returns the current module name.
+     * @private
+     */
+    MultiColumnComboBox.prototype.getModuleName = function () {
+        return 'multicolumncombobox';
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @private
+     * @returns {string} - It returns the persisted data.
+     */
+    MultiColumnComboBox.prototype.getPersistData = function () {
+        return this.addOnPersist(['value']);
+    };
+    MultiColumnComboBox.prototype.persistData = function () {
+        if (this.enablePersistence) {
+            this.element.id = this.element.id + '_wrapper';
+            var data = window.localStorage.getItem(this.getModuleName() + this.element.id);
+            if (!(isNOU(data) || (data === ''))) {
+                this.setProperties(JSON.parse(data), true);
+            }
+        }
+    };
+    MultiColumnComboBox.prototype.render = function () {
+        this.renderGrid();
+        this.renderInput();
+        this.popupDiv = this.createElement('div', { className: CONTENT });
+        this.popupDiv.appendChild(this.gridEle);
+        this.setHTMLAttributes();
+        this.renderPopup();
+        this.wireEvents();
+    };
+    MultiColumnComboBox.prototype.renderGrid = function () {
+        var _this = this;
+        var gridColumns = this.getGridColumns();
+        this.gridObj = new Grid({
+            dataSource: this.dataSource,
+            columns: gridColumns,
+            allowSorting: this.allowSorting,
+            enableStickyHeader: true,
+            gridLines: this.gridSettings.gridLines,
+            rowHeight: this.gridSettings.rowHeight,
+            enableAltRow: this.gridSettings.enableAltRow,
+            enableVirtualization: this.enableVirtualization,
+            enableRtl: this.enableRtl,
+            editSettings: { allowAdding: false },
+            query: this.query,
+            height: this.popupHeight,
+            allowMultiSorting: this.sortType.toString().toLowerCase() === 'multiplecolumns' && this.allowSorting,
+            rowTemplate: this.itemTemplate,
+            dataBound: function () { _this.onDataBound(); },
+            actionFailure: function (args) { _this.onActionFailure(args); },
+            actionBegin: function (args) { _this.trigger('actionBegin', args); },
+            actionComplete: function (args) {
+                _this.trigger('actionComplete', args);
+                if (args.requestType === 'sorting') {
+                    _this.updateRowSelection(args);
+                }
+                var dataRows = args.rows;
+                if (_this.isDataFiltered && dataRows.length > 0 && _this.inputEle.value !== '' && args.requestType !== 'sorting') {
+                    var firstRowEle = _this.gridObj.getRows()[0];
+                    firstRowEle.classList.add('e-row-focus');
+                }
+                _this.popupObj.refreshPosition();
+            },
+            keyPressed: function (args) {
+                if (args.key === 'Enter') {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    args.cancel = true;
+                    if (_this.isPopupOpen) {
+                        _this.selectedGridRow(_this.gridObj.getRows()[_this.gridObj.selectedRowIndex], args, true);
+                        _this.hidePopup(args);
+                        _this.focusIn(args);
+                    }
+                }
+                if (_this.fields.groupBy) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    args.cancel = true;
+                    _this.gridKeyActionHandler(args, true);
+                }
+            }
+        });
+        this.gridEle = this.createElement('div', { id: getUniqueID('grid'), className: MULTICOLUMNGRID });
+        this.updateGroupByField();
+        var sortOrder = this.sortOrder.toString().toLowerCase();
+        // Set first column as primary key to avoid PRIMARY KEY MISSING warning.
+        this.gridObj.columns[0].isPrimaryKey = true;
+        if (sortOrder !== 'none') {
+            this.gridObj.sortSettings = { columns: [{ field: this.fields.text, direction: sortOrder === 'ascending' ?
+                            SortOrder.Ascending : SortOrder.Descending }] };
+        }
+        this.gridObj.appendTo(this.gridEle);
+    };
+    // 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);
+        return isRowPresent;
+    };
+    MultiColumnComboBox.prototype.updateRowSelection = function (args) {
+        var _this = this;
+        if (args) {
+            var dataRows = args.rows;
+            dataRows.forEach(function (row) {
+                var data = row.data;
+                var index = row.index;
+                _this.selectDataRow(data, index);
+            });
+        }
+    };
+    MultiColumnComboBox.prototype.selectDataRow = function (data, index) {
+        var isPresent = this.isRowMatching(data, this.value ? this.value.toString() : '', this.text ? this.text.toString() : '');
+        if (isPresent) {
+            this.gridObj.selectRow(index);
+            var prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            this.index = index;
+            this.isProtectedOnChange = prevOnChange;
+            return;
+        }
+    };
+    MultiColumnComboBox.prototype.findIndex = function (arr, obj) {
+        return arr.findIndex(function (item) {
+            return Object.keys(obj).every(function (key) { return item[key] === obj[key]; });
+        });
+    };
+    ;
+    // eslint-enable @typescript-eslint/no-explicit-any
+    MultiColumnComboBox.prototype.getGridColumns = function () {
+        var _this = this;
+        return this.columns.map(function (column) {
+            return {
+                field: column.field,
+                headerText: column.header,
+                width: column.width,
+                textAlign: column.textAlign === '' && _this.enableRtl ? 'Right' : column.textAlign,
+                format: column.format,
+                displayAsCheckBox: column.displayAsCheckBox,
+                template: column.template,
+                headerTemplate: column.headerTemplate,
+                customAttributes: column.customAttributes,
+                type: column.displayAsCheckBox ? 'boolean' : 'string'
+            };
+        });
+    };
+    MultiColumnComboBox.prototype.updateGroupByField = function () {
+        if (this.fields.groupBy !== '' && !isNOU(this.fields.groupBy)) {
+            if (this.sortType.toString().toLowerCase() !== 'multiplecolumns') {
+                this.gridEle.classList.add('e-multicolumn-group');
+            }
+            var prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            this.gridObj.allowGrouping = true;
+            this.gridObj.groupSettings = {
+                showDropArea: false,
+                columns: [this.fields.groupBy],
+                captionTemplate: (this.groupTemplate && this.fields.groupBy !== '' && !isNOU(this.fields.groupBy))
+                    ? this.groupTemplate : "${key}"
+            };
+            if (this.isVue) {
+                this.gridObj.isVue = this.isVue;
+            }
+            this.isProtectedOnChange = prevOnChange;
+        }
+    };
+    MultiColumnComboBox.prototype.onDataBound = function () {
+        var dataCount = this.dataSource.length;
+        var popupChild = this.popupDiv.querySelector('.' + MULTICOLUMNGRID);
+        if (dataCount <= 0 && popupChild) {
+            this.l10nUpdate();
+            this.popupDiv.removeChild(this.gridEle);
+            addClass([this.popupDiv], [NODATA]);
+        }
+        else if (this.popupDiv.classList.contains(NODATA) && dataCount >= 1) {
+            removeClass([this.popupDiv], [NODATA]);
+            var noRecordEle = this.popupDiv.querySelector('.e-no-records');
+            if (noRecordEle) {
+                this.popupDiv.removeChild(noRecordEle);
+            }
+        }
+    };
+    MultiColumnComboBox.prototype.onActionFailure = function (args) {
+        this.trigger('actionFailure', args);
+        this.l10nUpdate(true);
+        addClass([this.popupDiv], [NODATA]);
+    };
+    MultiColumnComboBox.prototype.renderInput = function () {
+        if (this.element.tagName === 'INPUT') {
+            this.inputEle = this.element;
+            if (isNOU(this.inputEle.getAttribute('role'))) {
+                this.inputEle.setAttribute('role', 'combobox');
+            }
+            if (isNOU(this.inputEle.getAttribute('type'))) {
+                this.inputEle.setAttribute('type', 'text');
+            }
+            this.inputEle.setAttribute('aria-expanded', 'false');
+            this.inputEle.setAttribute('aria-readOnly', this.readonly.toString());
+            this.inputEle.setAttribute('aria-disabled', this.disabled.toString());
+            this.inputEle.setAttribute('tabindex', '0');
+        }
+        else {
+            this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            this.element.parentElement.insertBefore(this.inputEle, this.element);
+        }
+        this.inputObj = Input.createInput({
+            element: this.inputEle,
+            buttons: [DROPDOWNICON],
+            floatLabelType: this.floatLabelType,
+            properties: {
+                enabled: !this.disabled,
+                readonly: this.readonly,
+                placeholder: this.placeholder,
+                enableRtl: this.enableRtl,
+                showClearButton: this.showClearButton,
+                cssClass: this.cssClass
+            }
+        }, this.createElement);
+        this.inputWrapper = this.inputObj.container;
+        this.inputWrapper.classList.add(MULTICOLUMNLIST);
+        this.inputWrapper.setAttribute('spellcheck', 'false');
+        if (this.element.tagName === this.getDirective()) {
+            this.element.appendChild(this.inputWrapper);
+        }
+        this.setElementWidth(this.width);
+        if (!isNOU(this.value) || !isNOU(this.text) || !isNOU(this.index)) {
+            this.initValue(null, null, true);
+        }
+    };
+    /* To calculate the width when change via set model */
+    MultiColumnComboBox.prototype.setElementWidth = function (inputWidth) {
+        var ddElement = this.inputWrapper;
+        if (!isNOU(inputWidth)) {
+            if (typeof inputWidth === 'number') {
+                ddElement.style.width = formatUnit(inputWidth);
+            }
+            else if (typeof inputWidth === 'string') {
+                ddElement.style.width = (inputWidth.match(/px|%|em/)) ? (inputWidth) : (formatUnit(inputWidth));
+            }
+        }
+    };
+    MultiColumnComboBox.prototype.setHTMLAttributes = function () {
+        if (Object.keys(this.htmlAttributes).length) {
+            for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
+                var htmlAttr = _a[_i];
+                if (htmlAttr === 'class') {
+                    this.inputWrapper.classList.add(this.htmlAttributes["" + htmlAttr]);
+                }
+                else if (htmlAttr === 'disabled') {
+                    this.setProperties({ enabled: false }, true);
+                    this.setEnable();
+                }
+                else if (htmlAttr === 'readonly') {
+                    this.setProperties({ readonly: true }, true);
+                    this.dataBind();
+                }
+                else if (htmlAttr === 'style') {
+                    this.inputWrapper.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
+                }
+                else {
+                    var defaultAttr = ['title', 'id', 'placeholder',
+                        'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
+                    if (defaultAttr.indexOf(htmlAttr) > -1) {
+                        if (htmlAttr === 'placeholder') {
+                            Input.setPlaceholder(this.htmlAttributes["" + htmlAttr], this.inputEle);
+                        }
+                        else {
+                            this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        }
+                    }
+                    else {
+                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                    }
+                }
+            }
+        }
+    };
+    /* To set enable property */
+    MultiColumnComboBox.prototype.setEnable = function () {
+        Input.setEnabled(!this.disabled, this.inputEle);
+        if (!this.disabled) {
+            removeClass([this.inputWrapper], DISABLED);
+            this.inputEle.setAttribute('aria-disabled', 'false');
+            this.inputWrapper.setAttribute('aria-disabled', 'false');
+        }
+        else {
+            if (this.isPopupOpen) {
+                this.hidePopup();
+            }
+            addClass([this.inputWrapper], DISABLED);
+            if (this.inputWrapper && this.inputWrapper.classList.contains(INPUTFOCUS)) {
+                removeClass([this.inputWrapper], [INPUTFOCUS]);
+            }
+            this.inputEle.setAttribute('aria-disabled', 'true');
+            this.inputWrapper.setAttribute('aria-disabled', 'true');
+        }
+    };
+    MultiColumnComboBox.prototype.initValue = function (isRerender, isValue, isInitial) {
+        var _this = this;
+        var prevItemData = this.gridObj.getSelectedRecords()[0];
+        var prevItemEle = this.gridObj.getSelectedRows()[0];
+        var item;
+        var currentValue;
+        var currentText;
+        var currentIndex;
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.value = this.value ? this.value.toString() : this.value;
+        this.isProtectedOnChange = prevOnChange;
+        var updateValues = function (dataList) {
+            var result = _this.updateCurrentValues(item, dataList);
+            currentValue = result.currentValue;
+            currentText = result.currentText;
+            currentIndex = result.currentIndex;
+        };
+        if ((!isRerender && (!isNOU(this.value) || !isNOU(this.text))) || (isRerender && isValue !== undefined)) {
+            var value_1 = isRerender ? (isValue ? this.value : this.text) : (!isNOU(this.value) ? this.value : this.text);
+            if (!isNOU(this.dataSource) && this.dataSource instanceof DataManager) {
+                this.dataSource.executeQuery(new Query).then(function (e) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var dataLists = e.result;
+                    var filteredData = dataLists.filter(function (item) {
+                        return item[isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
+                            !isNOU(_this.value) ? _this.fields.value : _this.fields.text].toString() === value_1;
+                    });
+                    if (filteredData.length > 0) {
+                        item = filteredData[0];
+                        updateValues(dataLists);
+                        _this.updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial);
+                        _this.gridObj.selectRow(_this.index);
+                    }
+                });
+            }
+            else if (!isNOU(this.dataSource) && this.dataSource instanceof Array) {
+                item = this.dataSource.filter(function (data) {
+                    return data[isRerender ? (isValue ? _this.fields.value : _this.fields.text) :
+                        !isNOU(_this.value) ? _this.fields.value : _this.fields.text].toString() === value_1;
+                })[0];
+                updateValues(this.dataSource);
+            }
+        }
+        else if (!isNOU(this.index)) {
+            if (!isNOU(this.dataSource) && this.dataSource instanceof DataManager) {
+                this.dataSource.executeQuery(new Query).then(function (e) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var dataLists = e.result;
+                    item = dataLists[_this.index];
+                    updateValues(dataLists);
+                    _this.updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial);
+                    _this.gridObj.selectRow(_this.index);
+                });
+            }
+            else if (!isNOU(this.dataSource) && this.dataSource instanceof Array) {
+                item = this.dataSource[this.index];
+                updateValues(this.dataSource);
+            }
+        }
+        if (!(this.dataSource instanceof DataManager)) {
+            this.updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial);
+        }
+    };
+    MultiColumnComboBox.prototype.updateChangeEvent = function (item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial) {
+        var ChangeEventArgs = {
+            value: item ? item[this.fields.value].toString() : null,
+            itemData: { text: currentText, value: currentValue },
+            item: this.getDataByValue(this.value),
+            previousItemData: prevItemData,
+            previousItemElement: prevItemEle,
+            itemElement: this.inputWrapper,
+            event: null,
+            isInteracted: !isRerender
+        };
+        this.updateValues(currentValue, currentText, currentIndex, ChangeEventArgs, isInitial);
+    };
+    MultiColumnComboBox.prototype.updateCurrentValues = function (item, dataList) {
+        if (!isNOU(item)) {
+            Input.setValue(item[this.fields.text].toString(), this.inputEle, this.floatLabelType, this.showClearButton);
+            return {
+                currentValue: item[this.fields.value].toString(),
+                currentText: item[this.fields.text].toString(),
+                currentIndex: dataList.indexOf(item)
+            };
+        }
+        return {
+            currentValue: null,
+            currentText: null,
+            currentIndex: null
+        };
+    };
+    MultiColumnComboBox.prototype.renderPopup = function () {
+        this.popupEle = this.createElement('div', {
+            id: this.element.id + '_options', className: MULTICOLUMNLIST + ' e-popup ' + (this.cssClass !== null ? this.cssClass : '')
+        });
+        attributes(this.popupEle, { 'aria-label': this.element.id, 'role': 'dialog' });
+        document.body.appendChild(this.popupEle);
+        this.createPopup(this.popupEle);
+        prepend([this.popupDiv], this.popupEle);
+        if (this.footerTemplate) {
+            this.setFooterTemplate();
+        }
+        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');
+        }
+        this.popupDiv.style.maxHeight = popupHeight;
+        this.popupRowHeight = this.popupDiv.querySelector('.e-gridcontent tr').getBoundingClientRect().height;
+        this.updateGridHeight();
+        this.popupObj.hide();
+    };
+    MultiColumnComboBox.prototype.updateGridHeight = function (isFilter, autoHeight, dataSourceCount) {
+        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 !== '' && !isNOU(this.fields.groupBy)) {
+                totalRowHeight += this.popupRowHeight;
+            }
+            height = autoHeight ? (totalRowHeight < this.prevGridHeight ? (totalRowHeight + scrollBarHeight) + 'px' : this.prevGridHeight + 'px') : this.prevGridHeight + 'px';
+        }
+        else {
+            this.prevGridHeight = this.popupDiv.getBoundingClientRect().height - this.popupDiv.querySelector('.e-gridheader').getBoundingClientRect().height;
+            height = this.prevGridHeight + 'px';
+        }
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.gridObj.height = height;
+        this.isProtectedOnChange = prevOnChange;
+    };
+    MultiColumnComboBox.prototype.createPopup = function (element) {
+        var _this = this;
+        this.popupObj = new Popup(element, {
+            width: this.getSize(true),
+            targetType: 'relative',
+            collision: { X: 'flip', Y: 'flip' },
+            relateTo: this.inputWrapper,
+            enableRtl: this.enableRtl,
+            position: { X: 'left', Y: 'bottom' },
+            targetExitViewport: function () {
+                if (!Browser.isDevice) {
+                    _this.hidePopup();
+                }
+            }
+        });
+    };
+    MultiColumnComboBox.prototype.setFooterTemplate = function () {
+        if (this.footer) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (this.isReact && typeof this.footerTemplate === 'function') {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
+        }
+        else {
+            this.footer = this.createElement('div');
+            addClass([this.footer], 'e-popup-footer');
+        }
+        var compiledString = this.getTemplateFunction(this.footerTemplate);
+        var dataCount = this.dataSource.length;
+        var tempArr = compiledString({ count: dataCount }, this, 'footerTemplate', this.element.id + 'footerTemplate', this.isStringTemplate, undefined, this.footer);
+        if (tempArr) {
+            tempArr = Array.prototype.slice.call(tempArr);
+            append(tempArr, this.footer);
+        }
+        append([this.footer], this.popupEle);
+    };
+    MultiColumnComboBox.prototype.l10nUpdate = function (actionFailure) {
+        if (this.noRecord) {
+            this.noRecord.innerHTML = '';
+        }
+        else {
+            this.noRecord = this.createElement('div');
+        }
+        if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request Failed') {
+            var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
+            var templateId = actionFailure ? this.element.id + '_actionFailure' : this.element.id + '_noRecords';
+            var templatestring = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';
+            var compiledString = this.getTemplateFunction(template);
+            var tempArr = compiledString({}, this, templatestring, templateId, this.isStringTemplate, undefined, this.noRecord);
+            if (tempArr) {
+                tempArr = Array.prototype.slice.call(tempArr);
+                append(tempArr, this.noRecord);
+            }
+        }
+        else {
+            var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request Failed' };
+            this.l10n = new L10n('multicolumncombobox', l10nLocale, this.locale);
+            this.noRecord.innerHTML = actionFailure ?
+                this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
+        }
+        addClass([this.noRecord], 'e-no-records');
+        prepend([this.noRecord], this.popupDiv);
+        this.popupObj.refreshPosition();
+    };
+    /**
+     * Gets template content based on the template property value.
+     *
+     * @param {string | Function} template - Template property value.
+     * @returns {Function} - Return template function.
+     * @hidden
+     */
+    MultiColumnComboBox.prototype.getTemplateFunction = function (template) {
+        if (typeof template === 'string') {
+            var content = '';
+            try {
+                var tempEle = select(template);
+                if (tempEle) {
+                    //Return innerHTML incase of jsrenderer script else outerHTML
+                    content = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+                }
+                else {
+                    content = template;
+                }
+            }
+            catch (e) {
+                content = template;
+            }
+            return compile(content);
+        }
+        else {
+            /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+            return compile(template);
+        }
+    };
+    /*To calculate the width and height of the popup */
+    MultiColumnComboBox.prototype.getSize = function (ispopupWidth) {
+        var currentDimension = ispopupWidth ? this.popupWidth : this.popupHeight;
+        var size = formatUnit(currentDimension);
+        if (size.indexOf('%') > -1) {
+            var dimensionValue = ispopupWidth ? this.inputWrapper.offsetWidth : document.documentElement.clientHeight;
+            size = (dimensionValue * parseFloat(size) / 100).toString() + 'px';
+        }
+        else if (typeof currentDimension === 'string') {
+            size = currentDimension.match(/px|em/) ? currentDimension : size;
+        }
+        return size;
+    };
+    MultiColumnComboBox.prototype.selectedGridRow = function (row, e, isKeyNav) {
+        var _this = this;
+        var eventArgs = {
+            isInteracted: e ? true : false,
+            item: this.gridObj.getSelectedRecords()[0],
+            itemElement: row,
+            itemData: this.gridObj.getSelectedRecords()[0],
+            event: e,
+            cancel: false
+        };
+        var selectedRecords = this.gridObj.getSelectedRecords()[0];
+        var fieldText = selectedRecords ? selectedRecords[this.fields.text].toString() : "";
+        var fieldValue = selectedRecords ? selectedRecords[this.fields.value].toString() : "";
+        var ChangeEventArgs = {
+            isInteracted: e ? true : false,
+            item: selectedRecords,
+            itemElement: row,
+            itemData: { text: fieldText, value: fieldValue },
+            event: e,
+            cancel: false,
+            value: fieldValue,
+            previousItemData: { text: this.text, value: this.value },
+            previousItemElement: this.previousItemElement
+        };
+        this.trigger('select', eventArgs, function (eventArgs) {
+            if (!eventArgs.cancel && eventArgs.itemData) {
+                var selectedRecord = eventArgs.itemData;
+                if (!isKeyNav || (isKeyNav && e.key === 'Enter')) {
+                    _this.updateValues(selectedRecord[_this.fields.value], selectedRecord[_this.fields.text], _this.gridObj.selectedRowIndex, ChangeEventArgs);
+                }
+                Input.setValue(selectedRecord[_this.fields.text], _this.inputEle, _this.floatLabelType, _this.showClearButton);
+                if (!isKeyNav || (isKeyNav && e.key === 'Enter')) {
+                    _this.hidePopup(e);
+                }
+            }
+        });
+    };
+    MultiColumnComboBox.prototype.updateValues = function (value, text, index, eventArgs, isInitial) {
+        this.previousItemElement = eventArgs.itemElement;
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.text = text ? text : this.text;
+        this.value = value ? value : this.value;
+        this.index = !isNOU(index) ? index : this.index;
+        this.isProtectedOnChange = prevOnChange;
+        if (!isInitial) {
+            this.triggerChangeEvent(eventArgs);
+        }
+    };
+    MultiColumnComboBox.prototype.triggerChangeEvent = function (eventArgs) {
+        this.trigger('change', eventArgs, function (eventArgs) {
+            if (eventArgs.cancel) {
+                return;
+            }
+        });
+    };
+    MultiColumnComboBox.prototype.inputHandler = function (e) {
+        var _this = this;
+        this.showPopup(null, true);
+        if (this.allowFiltering) {
+            var inputValue_1 = e.target.value.toLowerCase();
+            var customFiltering_1 = false;
+            var eventArgs_1 = {
+                preventDefaultAction: false,
+                text: inputValue_1,
+                updateData: function (dataSource, query, fields) {
+                    if (eventArgs_1.cancel) {
+                        return;
+                    }
+                    customFiltering_1 = true;
+                    _this.filterAction(dataSource, inputValue_1, query, fields);
+                },
+                event: e,
+                cancel: false
+            };
+            this.trigger('filtering', eventArgs_1, function (eventArgs) {
+                if (!eventArgs.cancel && !eventArgs.preventDefaultAction && !customFiltering_1) {
+                    _this.filterAction(_this.dataSource, inputValue_1, _this.query, _this.fields);
+                }
+            });
+        }
+        this.updateInputValue(e.target.value);
+    };
+    MultiColumnComboBox.prototype.updateInputValue = function (inputValue) {
+        var _this = this;
+        var data;
+        if (this.dataSource instanceof DataManager) {
+            var query = new Query();
+            this.dataSource.executeQuery(query).then(function (result) {
+                var totaldata = result.result;
+                data = totaldata.filter(function (item) {
+                    return item[_this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
+                });
+                _this.selectFilteredRows(data);
+            });
+        }
+        else if (Array.isArray(this.dataSource)) {
+            data = this.dataSource.filter(function (item) {
+                return item[_this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
+            });
+            this.selectFilteredRows(data);
+        }
+    };
+    MultiColumnComboBox.prototype.selectFilteredRows = function (data) {
+        if (data.length > 0) {
+            this.matchedContent = data[0];
+        }
+        else {
+            this.matchedContent = null;
+        }
+        if (this.matchedContent) {
+            var selectedIndex = this.findIndex(this.gridObj.currentViewData, this.matchedContent);
+            this.matchedRowEle = this.gridObj.getRowByIndex(selectedIndex);
+        }
+        else {
+            this.matchedRowEle = null;
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    MultiColumnComboBox.prototype.filterAction = function (dataSource, inputValue, query, fields) {
+        var _this = this;
+        var filterType = this.filterType.toString().toLowerCase();
+        var isQuery = query || new Query();
+        var filteredData;
+        if (dataSource instanceof DataManager) {
+            // Handle filtering for DataManager
+            dataSource.executeQuery(isQuery).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);
+            });
+        }
+        else if (Array.isArray(dataSource)) {
+            // Handle filtering for array data source
+            filteredData = dataSource.filter(function (item) {
+                return _this.filterData(item, filterType, inputValue, fields);
+            });
+            this.updateGridDataSource(filteredData);
+        }
+    };
+    MultiColumnComboBox.prototype.filterData = function (item, filterType, inputValue, fields) {
+        var itemValue = item[fields ? fields.text : this.fields.text].toString().toLowerCase();
+        switch (filterType) {
+            case 'startswith':
+                return itemValue.startsWith(inputValue);
+            case 'endswith':
+                return itemValue.endsWith(inputValue);
+            case 'contains':
+                return itemValue.includes(inputValue);
+            default:
+                return false;
+        }
+    };
+    MultiColumnComboBox.prototype.updateGridDataSource = function (dataSource, dataLength) {
+        var autoHeight = true;
+        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) {
+                this.popupDiv.removeChild(noRecordEle);
+            }
+            this.gridObj.dataSource = dataSource;
+            this.isDataFiltered = true;
+        }
+        else {
+            this.l10nUpdate();
+            addClass([this.popupDiv], [NODATA]);
+        }
+        this.updateGridHeight(true, autoHeight, dataSource.length);
+    };
+    MultiColumnComboBox.prototype.wireEvents = function () {
+        var ddbIcon = this.inputWrapper.querySelector('.e-input-group-icon');
+        var clearIcon = this.inputWrapper.querySelector('.e-clear-icon');
+        EventHandler.add(ddbIcon, 'mousedown', this.dropDownClick, this);
+        EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
+        EventHandler.add(this.gridEle, 'click', this.onMouseClick, this);
+        EventHandler.add(this.inputEle, 'input', this.inputHandler, this);
+        EventHandler.add(this.inputWrapper, 'focus', this.focusIn, this);
+        if (clearIcon) {
+            EventHandler.add(clearIcon, 'click', this.clearText, this);
+        }
+        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.keyboardModule = new KeyboardEvents(this.inputWrapper, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+        this.keyboardModule = new KeyboardEvents(this.gridEle, {
+            keyAction: this.gridKeyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    };
+    MultiColumnComboBox.prototype.unWireEvents = function () {
+        var ddbIcon = this.inputWrapper.querySelector('.e-input-group-icon');
+        var clearIcon = this.inputWrapper.querySelector('.e-clear-icon');
+        EventHandler.remove(ddbIcon, 'mousedown', this.dropDownClick);
+        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        EventHandler.remove(this.inputEle, 'input', this.inputHandler);
+        EventHandler.remove(this.inputWrapper, 'focus', this.focusIn);
+        EventHandler.remove(window, 'resize', this.windowResize);
+        EventHandler.remove(this.gridEle, 'click', this.onMouseClick);
+        if (clearIcon) {
+            EventHandler.remove(clearIcon, 'click', this.clearText);
+        }
+        if (this.keyboardModule) {
+            this.keyboardModule.destroy();
+        }
+    };
+    MultiColumnComboBox.prototype.dropDownClick = function (e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        var focusedEle = this.gridEle.querySelector('.e-row-focus');
+        if (focusedEle) {
+            focusedEle.classList.remove('e-row-focus');
+        }
+        if (this.isPopupOpen) {
+            this.hidePopup(e);
+        }
+        else {
+            this.showPopup(e);
+        }
+    };
+    MultiColumnComboBox.prototype.onMouseClick = function (e) {
+        var target = e.target;
+        var row = closest(target, '.e-row');
+        var selectedRowIndex = this.gridObj.selectedRowIndex;
+        if (row) {
+            if (selectedRowIndex >= 0) {
+                this.selectedGridRow(row, e);
+            }
+            else {
+                this.gridObj.selectedRowIndex = this.gridObj.getRows().indexOf(row);
+                this.gridObj.selectRow(this.gridObj.selectedRowIndex);
+                this.hidePopup(e);
+            }
+        }
+    };
+    MultiColumnComboBox.prototype.onDocumentClick = function (e) {
+        if (this.disabled || this.readonly || !this.isPopupOpen) {
+            if (!(e.target.closest('.e-multicolumn-list'))) {
+                this.focusOut();
+            }
+            return;
+        }
+        var target = e.target;
+        if ((target.classList.contains('e-multicolumn-list-icon') || closest(target, '.e-popup'))) {
+            e.preventDefault();
+        }
+        else {
+            if (!target.classList.contains('e-multicolumncombobox') && !target.classList.contains('e-clear-icon')) {
+                this.updateValuesOnInput(e);
+            }
+        }
+        if (!closest(target, '.e-multicolumn-list')) {
+            this.inputWrapper.tabIndex = -1;
+        }
+    };
+    MultiColumnComboBox.prototype.updateValuesOnInput = function (mouseEvent, keyEvent, isClearValues) {
+        var _this = this;
+        var e = mouseEvent ? mouseEvent : keyEvent;
+        this.hidePopup(e);
+        if (this.matchedRowEle && !isClearValues) {
+            var prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            setTimeout(function () {
+                _this.inputEle.value = _this.matchedContent[_this.fields.text].toString();
+                _this.value = _this.matchedContent[_this.fields.value].toString();
+                var selectIndex = _this.findIndex(_this.gridObj.currentViewData, _this.matchedContent);
+                _this.index = selectIndex;
+                _this.text = _this.matchedContent[_this.fields.text].toString();
+                _this.gridObj.selectRow(selectIndex);
+                _this.selectedGridRow(_this.gridObj.getRowByIndex(selectIndex), e);
+                _this.previousItemElement = _this.gridObj.getSelectedRows()[0];
+            }, 100);
+            this.isProtectedOnChange = prevOnChange;
+        }
+        else {
+            if (this.isDataFiltered) {
+                this.inputEle.value = '';
+                var ChangeEventArgs = {
+                    value: null,
+                    itemData: { text: null, value: null },
+                    item: null,
+                    previousItemData: { text: this.text, value: this.value },
+                    previousItemElement: this.previousItemElement,
+                    itemElement: null,
+                    event: e,
+                    isInteracted: true,
+                    cancel: false
+                };
+                var prevOnChange = this.isProtectedOnChange;
+                this.isProtectedOnChange = true;
+                this.text = this.value = this.index = null;
+                this.gridObj.refreshColumns();
+                this.isProtectedOnChange = prevOnChange;
+                this.triggerChangeEvent(ChangeEventArgs);
+                this.isDataFiltered = false;
+                this.matchedContent = this.matchedRowEle = null;
+            }
+        }
+    };
+    MultiColumnComboBox.prototype.clearText = function (e) {
+        this.isDataFiltered = true;
+        this.updateValuesOnInput(e, null, true);
+    };
+    MultiColumnComboBox.prototype.windowResize = function () {
+        if (this.popupObj) {
+            this.popupObj.setProperties({ width: this.getSize(true) });
+            this.popupObj.refreshPosition();
+        }
+    };
+    /* To set cssclass for the dropdowntree */
+    MultiColumnComboBox.prototype.setCssClass = function (newClass, oldClass) {
+        var elements = this.popupObj ? [this.inputWrapper, this.popupObj.element] : [this.inputWrapper];
+        if (!isNOU(oldClass) && oldClass !== '') {
+            removeClass(elements, oldClass.split(' '));
+        }
+        if (!isNOU(newClass) && newClass !== '') {
+            addClass(elements, newClass.split(' '));
+        }
+    };
+    MultiColumnComboBox.prototype.keyActionHandler = function (e) {
+        switch (e.action) {
+            case 'escape':
+            case 'altUp':
+            case 'shiftTab':
+            case 'tab':
+                if (this.isPopupOpen) {
+                    this.hidePopup(e);
+                }
+                break;
+            case 'altDown':
+                if (!this.isPopupOpen) {
+                    this.showPopup(e);
+                    this.updateSelectedItem(e, false);
+                }
+                break;
+            case 'moveDown':
+            case 'moveUp':
+                this.updateSelectedItem(e);
+                break;
+            case 'enter':
+                this.updateValuesOnInput(null, e);
+                this.focusIn(e);
+                break;
+            case 'home':
+            case 'end':
+                this.updateSelectedItem(e);
+                break;
+        }
+    };
+    MultiColumnComboBox.prototype.gridKeyActionHandler = function (e, isGroup) {
+        if (isGroup) {
+            if (e.key === 'ArrowDown') {
+                e.action = 'moveDown';
+            }
+            else if (e.key === 'ArrowUp') {
+                e.action = 'moveUp';
+            }
+            else if (e.key === 'End') {
+                e.action = 'end';
+            }
+            else if (e.key === 'Home') {
+                e.action = 'home';
+            }
+            if (e.altKey && e.key === 'ArrowUp') {
+                e.action = 'altUp';
+            }
+        }
+        switch (e.action) {
+            case 'escape':
+            case 'tab':
+            case 'shiftTab':
+            case 'altUp':
+                if (this.isPopupOpen) {
+                    e.preventDefault();
+                    this.hidePopup(e);
+                }
+                break;
+            case 'moveDown':
+            case 'moveUp':
+            case 'home':
+            case 'end':
+                this.updateSelectedItem(e);
+                break;
+        }
+    };
+    MultiColumnComboBox.prototype.updateSelectedItem = function (e, isUpdateIndex) {
+        if (isUpdateIndex === void 0) { isUpdateIndex = true; }
+        if (this.isPopupOpen) {
+            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;
+            }
+            else if ((index >= this.gridObj.getRows().length && e.action === 'moveDown') || (e.action === 'end')) {
+                index = this.gridObj.getRows().length - 1;
+            }
+            else if (e.action === 'moveDown' && (index >= 0 && index <= this.gridObj.getRows().length) && this.fields.groupBy) {
+                index += 1;
+            }
+            else if (e.action === 'moveUp' && index > 0 && this.fields.groupBy) {
+                index -= 1;
+            }
+            this.gridObj.selectRow(index);
+            this.gridObj.selectedRowIndex = index;
+            var focusedEle = this.gridEle.querySelector('.e-row-focus');
+            if (focusedEle) {
+                focusedEle.classList.remove('e-row-focus');
+            }
+            if (isUpdateIndex) {
+                this.selectedGridRow(this.gridObj.getRows()[index], e, true);
+            }
+        }
+    };
+    /**
+     * Sets the focus to the component for interaction.component for interaction.
+     *
+     * @param {FocusEvent | MouseEvent | KeyboardEvent | TouchEvent} e - Specifies the event.
+     * @returns {void}
+     */
+    MultiColumnComboBox.prototype.focusIn = function (e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        addClass([this.inputWrapper], [INPUTFOCUS]);
+        this.inputWrapper.tabIndex = 0;
+        this.inputWrapper.focus();
+        var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
+        if (clearIconEle && (this.value && this.value.toString() !== '' || this.text && this.text !== '')) {
+            clearIconEle.classList.remove('e-clear-icon-hide');
+        }
+        this.trigger('focus', e);
+        if (this.floatLabelType !== 'Never') {
+            Input.calculateWidth(this.inputEle, this.inputWrapper);
+        }
+    };
+    /**
+     * Moves the focus from the component if the component is already focused.
+     *
+     * @param {MouseEvent | KeyboardEvent} e - Specifies the event.
+     * @returns {void}
+     */
+    MultiColumnComboBox.prototype.focusOut = function (e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.hidePopup(e);
+        removeClass([this.inputWrapper], [INPUTFOCUS]);
+        this.inputWrapper.tabIndex = -1;
+        var clearIconEle = this.inputWrapper.querySelector('.e-clear-icon');
+        if (clearIconEle) {
+            clearIconEle.classList.add('e-clear-icon-hide');
+        }
+        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.
+     * @returns {void}
+     */
+    MultiColumnComboBox.prototype.showPopup = function (e, isInputOpen) {
+        var _this = this;
+        var animModel = { name: 'FadeIn', duration: 100 };
+        var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
+        this.trigger('open', eventArgs, function (eventArgs) {
+            if (!eventArgs.cancel && !_this.isPopupOpen) {
+                _this.isPopupOpen = true;
+                _this.popupObj.refreshPosition();
+                addClass([_this.inputWrapper], [ICONANIMATION]);
+                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;
+                        dataRows.forEach(function (data, index) {
+                            _this.selectDataRow(data, index);
+                        });
+                    }
+                    _this.focusIn(e);
+                }
+                _this.popupObj.show(new Animation(eventArgs.animation), _this.popupEle);
+            }
+        });
+    };
+    /**
+     * Hides the popup if it is in open state.
+     *
+     * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @returns {void}
+     */
+    MultiColumnComboBox.prototype.hidePopup = function (e) {
+        var _this = this;
+        var animModel = { name: 'FadeOut', duration: 100 };
+        var eventArgs = { popup: this.popupObj, event: e || null, cancel: false, animation: animModel };
+        this.trigger('close', eventArgs, function (eventArgs) {
+            if (!eventArgs.cancel) {
+                _this.isPopupOpen = false;
+                removeClass([_this.inputWrapper], [ICONANIMATION]);
+                attributes(_this.inputEle, { 'aria-expanded': 'false' });
+                _this.popupObj.hide(new Animation(eventArgs.animation));
+                _this.inputEle.value = _this.text ? _this.text.toString() : '';
+                if (e) {
+                    var target = e.target;
+                    if (target.classList.contains('e-multicolumn-list-icon') || target.classList.contains('e-rowcell')) {
+                        if (!_this.value) {
+                            _this.gridObj.refreshColumns();
+                        }
+                        _this.focusIn(e);
+                    }
+                    else {
+                        _this.focusOut();
+                    }
+                }
+            }
+        });
+        setTimeout(function () {
+            if (_this.gridObj) {
+                _this.gridObj.dataSource = _this.dataSource;
+                _this.updateGridHeight(true, false);
+            }
+        }, 100);
+    };
+    /**
+     * Adds a new item to the popup list. By default, new item appends to the list as the last item,
+     * but you can insert based on the index parameter.
+     *
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { number } index - Specifies the index to place the newly added item in the popup list.
+     * @returns {void}
+     */
+    MultiColumnComboBox.prototype.addItems = function (items, index) {
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.gridObj.editSettings.allowAdding = true;
+        this.gridObj.dataBind();
+        this.isProtectedOnChange = prevOnChange;
+        this.gridObj.addRecord(items, index);
+    };
+    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
+    /**
+     * Gets all the list items bound on this component.
+     *
+     * @returns {Element[]}
+     */
+    MultiColumnComboBox.prototype.getItems = function () {
+        return this.gridObj.getDataRows();
+    };
+    /**
+     * Gets the data Object that matches the given value.
+     *
+     * @param { string } value - Specifies the value of the list item.
+     * @returns {Object}
+     */
+    MultiColumnComboBox.prototype.getDataByValue = function (value) {
+        var _this = this;
+        if (!isNOU(this.dataSource) && this.dataSource instanceof Array) {
+            return this.dataSource.filter(function (item) {
+                return item[_this.fields.value].toString() === value;
+            })[0];
+        }
+        else if (!isNOU(this.dataSource) && this.dataSource instanceof DataManager) {
+            this.dataSource.executeQuery(new Query()).then(function (e) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var dataLists = e.result;
+                return dataLists.filter(function (item) {
+                    return item[_this.fields.value].toString() === value;
+                })[0];
+            });
+        }
+        return null;
+    };
+    MultiColumnComboBox.prototype.destroy = function () {
+        this.unWireEvents();
+        if (this.gridObj) {
+            this.gridObj.destroy();
+            detach(this.gridObj.element);
+        }
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
+        if (this.inputEle) {
+            var attrArray = ['placeholder', 'aria-expanded', 'spellcheck', 'aria-label', 'role', 'tabindex', 'type', 'id', 'aria-owns', 'aria-controls'];
+            for (var i = 0; i < attrArray.length; i++) {
+                this.inputEle.removeAttribute(attrArray[i]);
+            }
+            this.inputEle.classList.remove('e-input');
+            Input.setValue('', this.inputEle, this.floatLabelType, this.showClearButton);
+        }
+        if (this.element.tagName !== this.getDirective()) {
+            this.inputWrapper.parentElement.insertBefore(this.element, this.inputWrapper);
+        }
+        if (this.inputObj) {
+            detach(this.inputObj.container);
+            this.inputObj = null;
+        }
+        Input.destroy({
+            element: this.inputEle,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        });
+        detach(this.inputWrapper);
+        detach(this.popupDiv);
+        this.inputEle = null;
+        this.previousItemElement = null;
+        this.inputWrapper.innerHTML = '';
+        this.inputWrapper = null;
+        this.popupDiv = null;
+        this.popupObj = null;
+        this.gridObj = null;
+        this.gridEle = null;
+        this.popupEle = null;
+        this.footer = null;
+        this.noRecord = null;
+        _super.prototype.destroy.call(this);
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {MultiColumnComboBoxModel} newProp - Specifies new properties
+     * @param  {MultiColumnComboBoxModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    MultiColumnComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            var gridColumns = void 0;
+            switch (prop) {
+                case 'width':
+                case 'popupWidth':
+                    if (prop === 'width') {
+                        this.setElementWidth(newProp.width);
+                    }
+                    if (this.popupObj) {
+                        this.popupObj.element.style.width = this.getSize(true);
+                    }
+                    break;
+                case 'popupHeight':
+                    if (this.popupObj) {
+                        var height = this.getSize(false);
+                        this.popupObj.element.style.maxHeight = height;
+                        this.popupDiv.style.maxHeight = height;
+                        this.gridObj.height = height;
+                    }
+                    break;
+                case 'placeholder':
+                    Input.setPlaceholder(newProp.placeholder, this.inputEle);
+                    break;
+                case 'readonly':
+                    Input.setReadonly(this.readonly, this.inputEle);
+                    break;
+                case 'disabled':
+                    Input.setEnabled(!this.disabled, this.inputEle);
+                    this.setEnable();
+                    break;
+                case 'cssClass':
+                    this.setCssClass(newProp.cssClass, oldProp.cssClass);
+                    break;
+                case 'floatLabelType':
+                    Input.removeFloating(this.inputObj);
+                    Input.addFloating(this.inputEle, this.floatLabelType, this.placeholder);
+                    break;
+                case 'showClearButton':
+                    Input.setClearButton(newProp.showClearButton, this.inputEle, this.inputObj);
+                    break;
+                case 'value':
+                    this.initValue(true, true);
+                    break;
+                case 'text':
+                    this.initValue(true, false);
+                    break;
+                case 'index':
+                    this.initValue();
+                    break;
+                case 'sortOrder':
+                    if (this.gridObj) {
+                        this.gridObj.sortSettings.columns = [{ field: this.fields.text, direction: newProp.sortOrder === SortOrder.Ascending ?
+                                    SortOrder.Ascending : SortOrder.Descending }];
+                    }
+                    break;
+                case 'htmlAttributes':
+                    this.setHTMLAttributes();
+                    break;
+                case 'noRecordsTemplate':
+                    this.l10nUpdate();
+                    break;
+                case 'actionFailureTemplate':
+                    this.l10nUpdate(true);
+                    break;
+                case 'footerTemplate':
+                    this.setFooterTemplate();
+                    break;
+                case 'itemTemplate':
+                    if (this.gridObj) {
+                        this.gridObj.rowTemplate = newProp.itemTemplate;
+                    }
+                    break;
+                case 'groupTemplate':
+                    this.groupTemplate = newProp.groupTemplate;
+                    this.updateGroupByField();
+                    break;
+                case 'enableRtl':
+                    if (this.gridObj && this.popupObj) {
+                        this.gridObj.enableRtl = newProp.enableRtl;
+                        Input.setEnableRtl(newProp.enableRtl, [this.inputWrapper]);
+                        this.popupObj.enableRtl = newProp.enableRtl;
+                    }
+                    break;
+                case 'dataSource':
+                    if (this.gridObj) {
+                        this.gridObj.dataSource = newProp.dataSource;
+                    }
+                    break;
+                case 'query':
+                    if (this.gridObj) {
+                        this.gridObj.query = newProp.query;
+                    }
+                    break;
+                case 'gridSettings':
+                    if (this.gridObj) {
+                        this.gridObj.gridLines = newProp.gridSettings.gridLines;
+                        this.gridObj.rowHeight = newProp.gridSettings.rowHeight;
+                        this.gridObj.enableAltRow = newProp.gridSettings.enableAltRow;
+                    }
+                    break;
+                case 'fields':
+                    this.fields = newProp.fields;
+                    this.updateGroupByField();
+                    break;
+                case 'filterType':
+                    this.filterType = newProp.filterType;
+                    break;
+                case 'enableVirtualization':
+                    if (this.gridObj) {
+                        this.enableVirtualization = this.gridObj.enableVirtualization = newProp.enableVirtualization;
+                    }
+                    break;
+                case 'sortType':
+                    this.sortType = newProp.sortType;
+                    break;
+                case 'allowFiltering':
+                    this.allowFiltering = newProp.allowFiltering;
+                    break;
+                case 'allowSorting':
+                    if (this.gridObj) {
+                        this.allowSorting = this.gridObj.allowSorting = newProp.allowSorting;
+                    }
+                    break;
+                case 'columns':
+                    if (this.gridObj) {
+                        gridColumns = this.getGridColumns();
+                        this.gridObj.columns = gridColumns;
+                    }
+                    break;
+            }
+        }
+    };
+    __decorate([
+        Property([])
+    ], MultiColumnComboBox.prototype, "dataSource", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "text", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "value", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "index", void 0);
+    __decorate([
+        Property('100%')
+    ], MultiColumnComboBox.prototype, "width", void 0);
+    __decorate([
+        Property('300px')
+    ], MultiColumnComboBox.prototype, "popupHeight", void 0);
+    __decorate([
+        Property('100%')
+    ], MultiColumnComboBox.prototype, "popupWidth", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "placeholder", void 0);
+    __decorate([
+        Property(true)
+    ], MultiColumnComboBox.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(true)
+    ], MultiColumnComboBox.prototype, "allowSorting", void 0);
+    __decorate([
+        Property(false)
+    ], MultiColumnComboBox.prototype, "showClearButton", void 0);
+    __decorate([
+        Property('')
+    ], MultiColumnComboBox.prototype, "cssClass", void 0);
+    __decorate([
+        Complex({ text: null, value: null, groupBy: null }, FieldSettings)
+    ], MultiColumnComboBox.prototype, "fields", void 0);
+    __decorate([
+        Collection([], Column)
+    ], MultiColumnComboBox.prototype, "columns", void 0);
+    __decorate([
+        Complex({}, GridSettings)
+    ], MultiColumnComboBox.prototype, "gridSettings", void 0);
+    __decorate([
+        Property(FilterType.StartsWith)
+    ], MultiColumnComboBox.prototype, "filterType", void 0);
+    __decorate([
+        Property('Never')
+    ], MultiColumnComboBox.prototype, "floatLabelType", void 0);
+    __decorate([
+        Property(SortOrder.None)
+    ], MultiColumnComboBox.prototype, "sortOrder", void 0);
+    __decorate([
+        Property(SortType.OneColumn)
+    ], MultiColumnComboBox.prototype, "sortType", void 0);
+    __decorate([
+        Property(false)
+    ], MultiColumnComboBox.prototype, "enableVirtualization", void 0);
+    __decorate([
+        Property(false)
+    ], MultiColumnComboBox.prototype, "disabled", void 0);
+    __decorate([
+        Property(false)
+    ], MultiColumnComboBox.prototype, "readonly", void 0);
+    __decorate([
+        Property(false)
+    ], MultiColumnComboBox.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property()
+    ], MultiColumnComboBox.prototype, "query", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "footerTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], MultiColumnComboBox.prototype, "groupTemplate", void 0);
+    __decorate([
+        Property('Request Failed')
+    ], MultiColumnComboBox.prototype, "actionFailureTemplate", void 0);
+    __decorate([
+        Property('No records found')
+    ], MultiColumnComboBox.prototype, "noRecordsTemplate", void 0);
+    __decorate([
+        Property({})
+    ], MultiColumnComboBox.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "open", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "close", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "actionFailure", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "actionBegin", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "actionComplete", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "filtering", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "select", void 0);
+    __decorate([
+        Event()
+    ], MultiColumnComboBox.prototype, "change", void 0);
+    MultiColumnComboBox = __decorate([
+        NotifyPropertyChanges
+    ], MultiColumnComboBox);
+    return MultiColumnComboBox;
+}(Component));
+export { MultiColumnComboBox };