@syncfusion/ej2-multicolumn-combobox 26.1.35

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

@@ -0,0 +1,1612 @@
+import { ChildProperty, Property, Component, getUniqueID, isNullOrUndefined, addClass, removeClass, formatUnit, attributes, prepend, Browser, append, L10n, select, compile, EventHandler, KeyboardEvents, closest, Animation, detach, Complex, Collection, Event, 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 { Grid, VirtualScroll, Group, Edit, Sort } from '@syncfusion/ej2-grids';
+export { Edit, Group, Sort, VirtualScroll } from '@syncfusion/ej2-grids';
+
+var __decorate = (undefined && undefined.__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;
+};
+const DROPDOWNICON = 'e-input-group-icon e-multicolumn-list-icon e-icons';
+const CONTENT = 'e-popup-content';
+const ICONANIMATION = 'e-icon-anim';
+const NODATA = 'e-nodata';
+const DISABLED = 'e-disabled';
+const INPUTFOCUS = 'e-input-focus';
+const MULTICOLUMNLIST = 'e-multicolumn-list';
+const MULTICOLUMNGRID = 'e-multicolumn-grid';
+class MultiColumnGrid {
+    /**
+     * Injecting required modules for component.
+     *
+     * @returns {void}
+     * @private
+     */
+    InjectModules() {
+        Grid.Inject(VirtualScroll, Group, Edit, Sort);
+    }
+}
+/**
+ * Defines the filter type.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+class FieldSettings extends ChildProperty {
+}
+__decorate([
+    Property()
+], FieldSettings.prototype, "text", void 0);
+__decorate([
+    Property()
+], FieldSettings.prototype, "value", void 0);
+__decorate([
+    Property()
+], FieldSettings.prototype, "groupBy", void 0);
+/**
+ * Specifies the number of columns and its respective fields to be displayed in the dropdown popup.
+ */
+class Column extends ChildProperty {
+}
+__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);
+/**
+ * Specifies the configuration of the columns in the popup content.
+ */
+class GridSettings extends ChildProperty {
+}
+__decorate([
+    Property(false)
+], GridSettings.prototype, "enableAltRow", void 0);
+__decorate([
+    Property(null)
+], GridSettings.prototype, "rowHeight", void 0);
+__decorate([
+    Property('Default')
+], GridSettings.prototype, "gridLines", void 0);
+/**
+ * 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");
+ * ```
+ */
+let MultiColumnComboBox = class MultiColumnComboBox extends Component {
+    /**
+     * *Constructor for creating the component
+     *
+     * @param {MultiColumnComboBoxModel} options - Specifies the MultiColumnComboBox model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    constructor(options, element) {
+        super(options, element);
+        this.gridInject = new MultiColumnGrid();
+        this.gridInject.InjectModules();
+    }
+    /**
+     * Initialize the event handler
+     *
+     * @private
+     * @returns {void}
+     */
+    preRender() {
+        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();
+    }
+    getDirective() {
+        return 'EJS-MULTICOLUMNCOMBOBOX';
+    }
+    /**
+     * To get component name.
+     *
+     * @returns {string} - It returns the current module name.
+     * @private
+     */
+    getModuleName() {
+        return 'multicolumncombobox';
+    }
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @private
+     * @returns {string} - It returns the persisted data.
+     */
+    getPersistData() {
+        return this.addOnPersist(['value']);
+    }
+    persistData() {
+        if (this.enablePersistence) {
+            this.element.id = this.element.id + '_wrapper';
+            const data = window.localStorage.getItem(this.getModuleName() + this.element.id);
+            if (!(isNullOrUndefined(data) || (data === ''))) {
+                this.setProperties(JSON.parse(data), true);
+            }
+        }
+    }
+    render() {
+        this.renderGrid();
+        this.renderInput();
+        this.popupDiv = this.createElement('div', { className: CONTENT });
+        this.popupDiv.appendChild(this.gridEle);
+        this.setHTMLAttributes();
+        this.renderPopup();
+        this.wireEvents();
+    }
+    renderGrid() {
+        const 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: () => { this.onDataBound(); },
+            actionFailure: (args) => { this.onActionFailure(args); },
+            actionBegin: (args) => { this.trigger('actionBegin', args); },
+            actionComplete: (args) => {
+                this.trigger('actionComplete', args);
+                if (args.requestType === 'sorting') {
+                    this.updateRowSelection(args);
+                }
+                const dataRows = args.rows;
+                if (this.isDataFiltered && dataRows.length > 0 && this.inputEle.value !== '' && args.requestType !== 'sorting') {
+                    const firstRowEle = this.gridObj.getRows()[0];
+                    firstRowEle.classList.add('e-row-focus');
+                }
+                this.popupObj.refreshPosition();
+            },
+            keyPressed: (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();
+        const 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
+    isRowMatching(data, selectedValue, selectedText) {
+        const values = Object.values(data).map(String);
+        const isRowPresent = values.includes(selectedValue) && values.includes(selectedText);
+        return isRowPresent;
+    }
+    updateRowSelection(args) {
+        if (args) {
+            const dataRows = args.rows;
+            dataRows.forEach((row) => {
+                const data = row.data;
+                const index = row.index;
+                this.selectDataRow(data, index);
+            });
+        }
+    }
+    selectDataRow(data, index) {
+        const isPresent = this.isRowMatching(data, this.value ? this.value.toString() : '', this.text ? this.text.toString() : '');
+        if (isPresent) {
+            this.gridObj.selectRow(index);
+            const prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            this.index = index;
+            this.isProtectedOnChange = prevOnChange;
+            return;
+        }
+    }
+    findIndex(arr, obj) {
+        return arr.findIndex((item) => {
+            return Object.keys(obj).every(key => item[key] === obj[key]);
+        });
+    }
+    ;
+    // eslint-enable @typescript-eslint/no-explicit-any
+    getGridColumns() {
+        return this.columns.map((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'
+            };
+        });
+    }
+    updateGroupByField() {
+        if (this.fields.groupBy !== '' && !isNullOrUndefined(this.fields.groupBy)) {
+            if (this.sortType.toString().toLowerCase() !== 'multiplecolumns') {
+                this.gridEle.classList.add('e-multicolumn-group');
+            }
+            const 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 !== '' && !isNullOrUndefined(this.fields.groupBy))
+                    ? this.groupTemplate : "${key}"
+            };
+            if (this.isVue) {
+                this.gridObj.isVue = this.isVue;
+            }
+            this.isProtectedOnChange = prevOnChange;
+        }
+    }
+    onDataBound() {
+        const dataCount = this.dataSource.length;
+        const 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]);
+            const noRecordEle = this.popupDiv.querySelector('.e-no-records');
+            if (noRecordEle) {
+                this.popupDiv.removeChild(noRecordEle);
+            }
+        }
+    }
+    onActionFailure(args) {
+        this.trigger('actionFailure', args);
+        this.l10nUpdate(true);
+        addClass([this.popupDiv], [NODATA]);
+    }
+    renderInput() {
+        if (this.element.tagName === 'INPUT') {
+            this.inputEle = this.element;
+            if (isNullOrUndefined(this.inputEle.getAttribute('role'))) {
+                this.inputEle.setAttribute('role', 'combobox');
+            }
+            if (isNullOrUndefined(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 (!isNullOrUndefined(this.value) || !isNullOrUndefined(this.text) || !isNullOrUndefined(this.index)) {
+            this.initValue(null, null, true);
+        }
+    }
+    /* To calculate the width when change via set model */
+    setElementWidth(inputWidth) {
+        const ddElement = this.inputWrapper;
+        if (!isNullOrUndefined(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));
+            }
+        }
+    }
+    setHTMLAttributes() {
+        if (Object.keys(this.htmlAttributes).length) {
+            for (const htmlAttr of Object.keys(this.htmlAttributes)) {
+                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 {
+                    const 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 */
+    setEnable() {
+        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');
+        }
+    }
+    initValue(isRerender, isValue, isInitial) {
+        const prevItemData = this.gridObj.getSelectedRecords()[0];
+        const prevItemEle = this.gridObj.getSelectedRows()[0];
+        let item;
+        let currentValue;
+        let currentText;
+        let currentIndex;
+        const prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.value = this.value ? this.value.toString() : this.value;
+        this.isProtectedOnChange = prevOnChange;
+        const updateValues = (dataList) => {
+            const result = this.updateCurrentValues(item, dataList);
+            currentValue = result.currentValue;
+            currentText = result.currentText;
+            currentIndex = result.currentIndex;
+        };
+        if ((!isRerender && (!isNullOrUndefined(this.value) || !isNullOrUndefined(this.text))) || (isRerender && isValue !== undefined)) {
+            const value = isRerender ? (isValue ? this.value : this.text) : (!isNullOrUndefined(this.value) ? this.value : this.text);
+            if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof DataManager) {
+                this.dataSource.executeQuery(new Query).then((e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const dataLists = e.result;
+                    const filteredData = dataLists.filter((item) => {
+                        return item[isRerender ? (isValue ? this.fields.value : this.fields.text) :
+                            !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text].toString() === value;
+                    });
+                    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 (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof Array) {
+                item = this.dataSource.filter((data) => {
+                    return data[isRerender ? (isValue ? this.fields.value : this.fields.text) :
+                        !isNullOrUndefined(this.value) ? this.fields.value : this.fields.text].toString() === value;
+                })[0];
+                updateValues(this.dataSource);
+            }
+        }
+        else if (!isNullOrUndefined(this.index)) {
+            if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof DataManager) {
+                this.dataSource.executeQuery(new Query).then((e) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const 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 (!isNullOrUndefined(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);
+        }
+    }
+    updateChangeEvent(item, prevItemData, prevItemEle, currentValue, currentText, currentIndex, isRerender, isInitial) {
+        const 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);
+    }
+    updateCurrentValues(item, dataList) {
+        if (!isNullOrUndefined(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
+        };
+    }
+    renderPopup() {
+        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();
+        }
+        let popupHeight = this.getSize(false);
+        this.popupEle.style.maxHeight = popupHeight;
+        if (this.footerTemplate) {
+            this.footer = this.footer ? this.footer : this.popupEle.querySelector('.e-popup-footer');
+            const 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();
+    }
+    updateGridHeight(isFilter, autoHeight, dataSourceCount) {
+        let height;
+        if (isFilter) {
+            const gridContentEle = this.gridObj.getContent().querySelector('.e-content');
+            const scrollBarHeight = gridContentEle.offsetHeight - gridContentEle.clientHeight;
+            let totalRowHeight = dataSourceCount * this.popupRowHeight;
+            if (this.fields.groupBy !== '' && !isNullOrUndefined(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';
+        }
+        const prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.gridObj.height = height;
+        this.isProtectedOnChange = prevOnChange;
+    }
+    createPopup(element) {
+        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: () => {
+                if (!Browser.isDevice) {
+                    this.hidePopup();
+                }
+            }
+        });
+    }
+    setFooterTemplate() {
+        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');
+        }
+        const compiledString = this.getTemplateFunction(this.footerTemplate);
+        const dataCount = this.dataSource.length;
+        let 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);
+    }
+    l10nUpdate(actionFailure) {
+        if (this.noRecord) {
+            this.noRecord.innerHTML = '';
+        }
+        else {
+            this.noRecord = this.createElement('div');
+        }
+        if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request Failed') {
+            const template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
+            const templateId = actionFailure ? this.element.id + '_actionFailure' : this.element.id + '_noRecords';
+            const templatestring = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';
+            const compiledString = this.getTemplateFunction(template);
+            let tempArr = compiledString({}, this, templatestring, templateId, this.isStringTemplate, undefined, this.noRecord);
+            if (tempArr) {
+                tempArr = Array.prototype.slice.call(tempArr);
+                append(tempArr, this.noRecord);
+            }
+        }
+        else {
+            const 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
+     */
+    getTemplateFunction(template) {
+        if (typeof template === 'string') {
+            let content = '';
+            try {
+                const 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 */
+    getSize(ispopupWidth) {
+        const currentDimension = ispopupWidth ? this.popupWidth : this.popupHeight;
+        let size = formatUnit(currentDimension);
+        if (size.indexOf('%') > -1) {
+            const 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;
+    }
+    selectedGridRow(row, e, isKeyNav) {
+        const eventArgs = {
+            isInteracted: e ? true : false,
+            item: this.gridObj.getSelectedRecords()[0],
+            itemElement: row,
+            itemData: this.gridObj.getSelectedRecords()[0],
+            event: e,
+            cancel: false
+        };
+        const selectedRecords = this.gridObj.getSelectedRecords()[0];
+        const fieldText = selectedRecords ? selectedRecords[this.fields.text].toString() : "";
+        const fieldValue = selectedRecords ? selectedRecords[this.fields.value].toString() : "";
+        const 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, (eventArgs) => {
+            if (!eventArgs.cancel && eventArgs.itemData) {
+                const 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);
+                }
+            }
+        });
+    }
+    updateValues(value, text, index, eventArgs, isInitial) {
+        this.previousItemElement = eventArgs.itemElement;
+        const prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.text = text ? text : this.text;
+        this.value = value ? value : this.value;
+        this.index = !isNullOrUndefined(index) ? index : this.index;
+        this.isProtectedOnChange = prevOnChange;
+        if (!isInitial) {
+            this.triggerChangeEvent(eventArgs);
+        }
+    }
+    triggerChangeEvent(eventArgs) {
+        this.trigger('change', eventArgs, (eventArgs) => {
+            if (eventArgs.cancel) {
+                return;
+            }
+        });
+    }
+    inputHandler(e) {
+        this.showPopup(null, true);
+        if (this.allowFiltering) {
+            const inputValue = e.target.value.toLowerCase();
+            let customFiltering = false;
+            const eventArgs = {
+                preventDefaultAction: false,
+                text: inputValue,
+                updateData: (dataSource, query, fields) => {
+                    if (eventArgs.cancel) {
+                        return;
+                    }
+                    customFiltering = true;
+                    this.filterAction(dataSource, inputValue, query, fields);
+                },
+                event: e,
+                cancel: false
+            };
+            this.trigger('filtering', eventArgs, (eventArgs) => {
+                if (!eventArgs.cancel && !eventArgs.preventDefaultAction && !customFiltering) {
+                    this.filterAction(this.dataSource, inputValue, this.query, this.fields);
+                }
+            });
+        }
+        this.updateInputValue(e.target.value);
+    }
+    updateInputValue(inputValue) {
+        let data;
+        if (this.dataSource instanceof DataManager) {
+            const query = new Query();
+            this.dataSource.executeQuery(query).then((result) => {
+                const totaldata = result.result;
+                data = totaldata.filter((item) => {
+                    return item[this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
+                });
+                this.selectFilteredRows(data);
+            });
+        }
+        else if (Array.isArray(this.dataSource)) {
+            data = this.dataSource.filter((item) => {
+                return item[this.fields.text].toString().toLowerCase().startsWith(inputValue.toLowerCase());
+            });
+            this.selectFilteredRows(data);
+        }
+    }
+    selectFilteredRows(data) {
+        if (data.length > 0) {
+            this.matchedContent = data[0];
+        }
+        else {
+            this.matchedContent = null;
+        }
+        if (this.matchedContent) {
+            const 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
+    filterAction(dataSource, inputValue, query, fields) {
+        const filterType = this.filterType.toString().toLowerCase();
+        const isQuery = query || new Query();
+        let filteredData;
+        if (dataSource instanceof DataManager) {
+            // Handle filtering for DataManager
+            dataSource.executeQuery(isQuery).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, dataLength);
+            });
+        }
+        else if (Array.isArray(dataSource)) {
+            // Handle filtering for array data source
+            filteredData = dataSource.filter((item) => this.filterData(item, filterType, inputValue, fields));
+            this.updateGridDataSource(filteredData);
+        }
+    }
+    filterData(item, filterType, inputValue, fields) {
+        const 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;
+        }
+    }
+    updateGridDataSource(dataSource, dataLength) {
+        let autoHeight = true;
+        if (dataSource.length > 0) {
+            const length = this.dataSource instanceof DataManager ? dataLength : this.dataSource.length;
+            autoHeight = length !== dataSource.length;
+            removeClass([this.popupDiv], [NODATA]);
+            const 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);
+    }
+    wireEvents() {
+        const ddbIcon = this.inputWrapper.querySelector('.e-input-group-icon');
+        const 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'
+        });
+    }
+    unWireEvents() {
+        const ddbIcon = this.inputWrapper.querySelector('.e-input-group-icon');
+        const 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();
+        }
+    }
+    dropDownClick(e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const 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);
+        }
+    }
+    onMouseClick(e) {
+        const target = e.target;
+        const row = closest(target, '.e-row');
+        let 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);
+            }
+        }
+    }
+    onDocumentClick(e) {
+        if (this.disabled || this.readonly || !this.isPopupOpen) {
+            if (!(e.target.closest('.e-multicolumn-list'))) {
+                this.focusOut();
+            }
+            return;
+        }
+        const 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;
+        }
+    }
+    updateValuesOnInput(mouseEvent, keyEvent, isClearValues) {
+        const e = mouseEvent ? mouseEvent : keyEvent;
+        this.hidePopup(e);
+        if (this.matchedRowEle && !isClearValues) {
+            const prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            setTimeout(() => {
+                this.inputEle.value = this.matchedContent[this.fields.text].toString();
+                this.value = this.matchedContent[this.fields.value].toString();
+                const 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 = '';
+                const 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
+                };
+                const 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;
+            }
+        }
+    }
+    clearText(e) {
+        this.isDataFiltered = true;
+        this.updateValuesOnInput(e, null, true);
+    }
+    windowResize() {
+        if (this.popupObj) {
+            this.popupObj.setProperties({ width: this.getSize(true) });
+            this.popupObj.refreshPosition();
+        }
+    }
+    /* To set cssclass for the dropdowntree */
+    setCssClass(newClass, oldClass) {
+        const elements = this.popupObj ? [this.inputWrapper, this.popupObj.element] : [this.inputWrapper];
+        if (!isNullOrUndefined(oldClass) && oldClass !== '') {
+            removeClass(elements, oldClass.split(' '));
+        }
+        if (!isNullOrUndefined(newClass) && newClass !== '') {
+            addClass(elements, newClass.split(' '));
+        }
+    }
+    keyActionHandler(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;
+        }
+    }
+    gridKeyActionHandler(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;
+        }
+    }
+    updateSelectedItem(e, isUpdateIndex = true) {
+        if (this.isPopupOpen) {
+            let 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;
+            const 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}
+     */
+    focusIn(e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        addClass([this.inputWrapper], [INPUTFOCUS]);
+        this.inputWrapper.tabIndex = 0;
+        this.inputWrapper.focus();
+        const 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}
+     */
+    focusOut(e) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.hidePopup(e);
+        removeClass([this.inputWrapper], [INPUTFOCUS]);
+        this.inputWrapper.tabIndex = -1;
+        const 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}
+     */
+    showPopup(e, isInputOpen) {
+        const animModel = { name: 'FadeIn', duration: 100 };
+        const eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
+        this.trigger('open', eventArgs, (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)) {
+                        const dataRows = this.gridObj.currentViewData;
+                        dataRows.forEach((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}
+     */
+    hidePopup(e) {
+        const animModel = { name: 'FadeOut', duration: 100 };
+        const eventArgs = { popup: this.popupObj, event: e || null, cancel: false, animation: animModel };
+        this.trigger('close', eventArgs, (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) {
+                    const 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(() => {
+            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}
+     */
+    addItems(items, index) {
+        const 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[]}
+     */
+    getItems() {
+        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}
+     */
+    getDataByValue(value) {
+        if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof Array) {
+            return this.dataSource.filter((item) => {
+                return item[this.fields.value].toString() === value;
+            })[0];
+        }
+        else if (!isNullOrUndefined(this.dataSource) && this.dataSource instanceof DataManager) {
+            this.dataSource.executeQuery(new Query()).then((e) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const dataLists = e.result;
+                return dataLists.filter((item) => {
+                    return item[this.fields.value].toString() === value;
+                })[0];
+            });
+        }
+        return null;
+    }
+    destroy() {
+        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) {
+            const attrArray = ['placeholder', 'aria-expanded', 'spellcheck', 'aria-label', 'role', 'tabindex', 'type', 'id', 'aria-owns', 'aria-controls'];
+            for (let 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.destroy();
+    }
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {MultiColumnComboBoxModel} newProp - Specifies new properties
+     * @param  {MultiColumnComboBoxModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            let gridColumns;
+            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) {
+                        const 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);
+
+export { Column, FieldSettings, FilterType, GridSettings, MultiColumnComboBox, MultiColumnGrid, SortOrder, SortType };
+//# sourceMappingURL=ej2-multicolumn-combobox.es2015.js.map