{"version":3,"file":"ej2-grids.min.js","sources":["../../src/grid/services/aria-service.js","../../src/grid/actions/print.js","../../src/grid/base/util.js","../../src/grid/actions/aggregate.js","../../src/grid/renderer/datepicker-edit-cell.js","../../src/grid/services/value-formatter.js","../../src/grid/models/column.js","../../src/grid/base/constant.js","../../src/grid/base/enum.js","../../src/grid/actions/data.js","../../src/grid/models/row.js","../../src/grid/models/cell.js","../../src/grid/renderer/cell-merge-renderer.js","../../src/grid/base/string-literals.js","../../src/grid/renderer/row-renderer.js","../../src/grid/services/row-model-generator.js","../../src/grid/services/summary-model-generator.js","../../src/grid/services/group-model-generator.js","../../src/grid/renderer/content-renderer.js","../../src/grid/renderer/header-renderer.js","../../src/grid/renderer/cell-renderer.js","../../src/grid/renderer/header-cell-renderer.js","../../src/grid/renderer/stacked-cell-renderer.js","../../src/grid/renderer/indent-cell-renderer.js","../../src/grid/renderer/caption-cell-renderer.js","../../src/grid/renderer/expand-cell-renderer.js","../../src/grid/renderer/header-indent-renderer.js","../../src/grid/renderer/detail-header-indent-renderer.js","../../src/grid/renderer/detail-expand-cell-renderer.js","../../src/grid/renderer/row-drag-drop-renderer.js","../../src/grid/renderer/row-drag-header-indent-render.js","../../src/grid/renderer/render.js","../../src/grid/services/cell-render-factory.js","../../src/grid/renderer/responsive-dialog-renderer.js","../../src/grid/services/service-locator.js","../../src/grid/services/renderer-factory.js","../../src/grid/services/width-controller.js","../../src/grid/services/focus-strategy.js","../../src/grid/models/page-settings.js","../../src/grid/models/column-chooser-settings.js","../../src/grid/actions/selection.js","../../src/grid/actions/search.js","../../src/grid/actions/show-hide.js","../../src/grid/actions/scroll.js","../../src/grid/models/aggregate.js","../../src/grid/actions/clipboard.js","../../src/grid/actions/logger.js","../../src/grid/base/grid.js","../../src/grid/common/checkbox-filter-base.js","../../src/grid/common/excel-filter-base.js","../../src/grid/actions/sort.js","../../src/pager/numeric-container.js","../../src/pager/pager-message.js","../../src/pager/pager.js","../../src/pager/pager-dropdown.js","../../src/pager/external-message.js","../../src/grid/actions/page.js","../../src/grid/renderer/filter-cell-renderer.js","../../src/grid/renderer/filter-menu-operator.js","../../src/grid/renderer/string-filter-ui.js","../../src/grid/renderer/number-filter-ui.js","../../src/grid/renderer/boolean-filter-ui.js","../../src/grid/renderer/date-filter-ui.js","../../src/grid/renderer/filter-menu-renderer.js","../../src/grid/actions/checkbox-filter.js","../../src/grid/actions/excel-filter.js","../../src/grid/actions/filter.js","../../src/grid/actions/resize.js","../../src/grid/actions/reorder.js","../../src/grid/actions/row-reorder.js","../../src/grid/actions/group.js","../../src/grid/actions/detail-row.js","../../src/grid/actions/toolbar.js","../../src/grid/renderer/footer-renderer.js","../../src/grid/renderer/summary-cell-renderer.js","../../src/grid/services/intersection-observer.js","../../src/grid/services/virtual-row-model-generator.js","../../src/grid/renderer/virtual-content-renderer.js","../../src/grid/actions/virtual-scroll.js","../../src/grid/renderer/inline-edit-renderer.js","../../src/grid/renderer/batch-edit-renderer.js","../../src/grid/renderer/dialog-edit-renderer.js","../../src/grid/renderer/edit-renderer.js","../../src/grid/renderer/edit-cell-base.js","../../src/grid/renderer/boolean-edit-cell.js","../../src/grid/renderer/dropdown-edit-cell.js","../../src/grid/renderer/numeric-edit-cell.js","../../src/grid/renderer/default-edit-cell.js","../../src/grid/actions/normal-edit.js","../../src/grid/actions/inline-edit.js","../../src/grid/actions/batch-edit.js","../../src/grid/actions/dialog-edit.js","../../src/grid/renderer/template-edit-cell.js","../../src/grid/actions/edit.js","../../src/grid/actions/column-chooser.js","../../src/grid/actions/export-helper.js","../../src/grid/actions/excel-export.js","../../src/grid/actions/pdf-export.js","../../src/grid/renderer/command-column-renderer.js","../../src/grid/actions/command-column.js","../../src/grid/actions/context-menu.js","../../src/grid/actions/freeze.js","../../src/grid/actions/column-menu.js","../../src/grid/actions/foreign-key.js","../../src/grid/actions/infinite-scroll.js","../../src/grid/renderer/group-lazy-load-renderer.js","../../src/grid/actions/lazy-load-group.js","../../src/grid/renderer/autocomplete-edit-cell.js","../../src/grid/renderer/combobox-edit-cell.js","../../src/grid/renderer/multiselect-edit-cell.js","../../src/grid/renderer/timepicker-edit-cell.js","../../src/grid/renderer/toggleswitch-edit-cell.js","../../src/grid/renderer/inputmask-edit-cell.js","../../src/global.js"],"sourcesContent":["/**\n * AriaService\n *\n * @hidden\n */\nvar AriaService = /** @class */ (function () {\n function AriaService() {\n }\n AriaService.prototype.setOptions = function (target, options) {\n var props = Object.keys(options);\n for (var i = 0; i < props.length; i++) {\n setStateAndProperties(target, config[props[parseInt(i.toString(), 10)]], options[props[parseInt(i.toString(), 10)]]);\n }\n };\n AriaService.prototype.setExpand = function (target, expand) {\n setStateAndProperties(target, config.expand, expand);\n };\n AriaService.prototype.setSort = function (target, direction) {\n setStateAndProperties(target, config.sort, direction, typeof direction === 'boolean');\n };\n AriaService.prototype.setBusy = function (target, isBusy) {\n setStateAndProperties(target, config.busy, isBusy);\n setStateAndProperties(target, config.invalid, null, true);\n };\n AriaService.prototype.setGrabbed = function (target, isGrabbed, remove) {\n setStateAndProperties(target, config.grabbed, isGrabbed, remove);\n };\n AriaService.prototype.setDropTarget = function (target, isTarget) {\n setStateAndProperties(target, config.dropeffect, 'copy', !isTarget);\n };\n return AriaService;\n}());\nexport { AriaService };\n/**\n * @param {HTMLElement} target - specifies the target\n * @param {string} attribute - specifies the attribute\n * @param {ValueType} value - specifies the value\n * @param {boolean} remove - specifies the boolean for remove\n * @returns {void}\n * @hidden\n */\nfunction setStateAndProperties(target, attribute, value, remove) {\n if (remove && target) {\n target.removeAttribute(attribute);\n return;\n }\n if (target) {\n target.setAttribute(attribute, value);\n }\n}\nvar config = {\n expand: 'aria-expanded',\n role: 'role',\n datarole: 'data-role',\n selected: 'aria-selected',\n multiselectable: 'aria-multiselectable',\n sort: 'aria-sort',\n busy: 'aria-busy',\n invalid: 'aria-invalid',\n grabbed: 'aria-grabbed',\n dropeffect: 'aria-dropeffect',\n haspopup: 'aria-haspopup',\n level: 'aria-level',\n colcount: 'aria-colcount',\n rowcount: 'aria-rowcount'\n};\n","import { print as printWindow, createElement, detach, classList, selectAll, extend } from '@syncfusion/ej2-base';\nimport { getPrintGridModel } from '../base/util';\nimport { Grid } from '../base/grid';\nimport * as events from '../base/constant';\nimport { Deferred } from '@syncfusion/ej2-data';\nimport * as literals from '../base/string-literals';\n/**\n * @returns {string[]} returns the cloned property\n * @hidden\n */\nexport function getCloneProperties() {\n return ['aggregates', 'allowGrouping', 'allowFiltering', 'allowMultiSorting', 'allowReordering', 'allowSorting',\n 'allowTextWrap', 'childGrid', 'columns', 'currentViewData', 'dataSource', 'detailTemplate', 'enableAltRow',\n 'enableColumnVirtualization', 'filterSettings', 'gridLines',\n 'groupSettings', 'height', 'locale', 'pageSettings', 'printMode', 'query', 'queryString', 'enableRtl',\n 'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'allowPaging', 'hierarchyPrintMode', 'searchSettings',\n 'queryCellInfo', 'beforeDataBound'];\n}\n/**\n *\n * The `Print` module is used to handle print action.\n */\nvar Print = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {Scroll} scrollModule - specifies the scroll module\n * @hidden\n */\n function Print(parent, scrollModule) {\n this.isAsyncPrint = false;\n this.defered = new Deferred();\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.isContentReady(), this);\n this.actionBeginFunction = this.actionBegin.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.on(events.onEmpty, this.onEmpty.bind(this));\n this.parent.on(events.hierarchyPrint, this.hierarchyPrint, this);\n this.scrollModule = scrollModule;\n }\n Print.prototype.isContentReady = function () {\n var _this = this;\n if (this.isPrintGrid() && (this.parent.hierarchyPrintMode === 'None' || !this.parent.childGrid)) {\n return this.contentReady;\n }\n return function () {\n _this.defered.promise.then(function () {\n _this.contentReady();\n });\n if (_this.isPrintGrid()) {\n _this.hierarchyPrint();\n }\n };\n };\n Print.prototype.hierarchyPrint = function () {\n this.removeColGroup(this.parent);\n var printGridObj = window.printGridObj;\n if (printGridObj && !printGridObj.element.querySelector('[aria-busy=true')) {\n printGridObj.printModule.defered.resolve();\n }\n };\n /**\n * By default, prints all the Grid pages and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./printmode/).\n *\n * @returns {void}\n */\n Print.prototype.print = function () {\n this.renderPrintGrid();\n };\n Print.prototype.onEmpty = function () {\n if (this.isPrintGrid()) {\n this.contentReady();\n }\n };\n Print.prototype.actionBegin = function () {\n if (this.isPrintGrid()) {\n this.isAsyncPrint = true;\n }\n };\n Print.prototype.renderPrintGrid = function () {\n var gObj = this.parent;\n var element = createElement('div', {\n id: this.parent.element.id + '_print', className: gObj.element.className + ' e-print-grid'\n });\n element.classList.remove('e-gridhover');\n document.body.appendChild(element);\n var printGrid = new Grid(getPrintGridModel(gObj, gObj.hierarchyPrintMode));\n for (var i = 0; i < printGrid.columns.length; i++) {\n printGrid.columns[parseInt(i.toString(), 10)] = extend({}, printGrid.columns[parseInt(i.toString(), 10)]);\n if (gObj.isFrozenGrid() && !gObj.getFrozenColumns()) {\n printGrid.columns[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.parent.isAngular) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n printGrid.viewContainerRef = this.parent.viewContainerRef;\n }\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n printGrid.load = function () { };\n printGrid.query = gObj.getQuery().clone();\n window.printGridObj = printGrid;\n printGrid.isPrinting = true;\n var modules = printGrid.getInjectedModules();\n var injectedModues = gObj.getInjectedModules();\n if (!modules || modules.length !== injectedModues.length) {\n printGrid.setInjectedModules(injectedModues);\n }\n gObj.notify(events.printGridInit, { element: element, printgrid: printGrid });\n this.parent.log('exporting_begin', this.getModuleName());\n printGrid.registeredTemplate = this.parent.registeredTemplate;\n printGrid.isVue = this.parent.isVue;\n printGrid.appendTo(element);\n if (!gObj.isVue3) {\n printGrid.trigger = gObj.trigger;\n }\n };\n Print.prototype.contentReady = function () {\n if (this.isPrintGrid()) {\n var gObj = this.parent;\n if (this.isAsyncPrint) {\n this.printGrid();\n return;\n }\n var args = {\n requestType: 'print',\n element: gObj.element,\n selectedRows: gObj.getContentTable().querySelectorAll('tr[aria-selected=\"true\"]'),\n cancel: false,\n hierarchyPrintMode: gObj.hierarchyPrintMode\n };\n if (!this.isAsyncPrint) {\n gObj.trigger(events.beforePrint, args);\n }\n if (args.cancel) {\n detach(gObj.element);\n return;\n }\n if (!this.isAsyncPrint) {\n this.printGrid();\n }\n }\n };\n Print.prototype.printGrid = function () {\n var gObj = this.parent;\n // Height adjustment on print grid\n if (gObj.height !== 'auto') { // if scroller enabled\n var cssProps = this.scrollModule.getCssProperties();\n var contentDiv = gObj.element.querySelector('.' + literals.content);\n var headerDiv = gObj.element.querySelector('.' + literals.gridHeader);\n contentDiv.style.height = 'auto';\n contentDiv.style.overflowY = 'auto';\n headerDiv.style[cssProps.padding] = '';\n headerDiv.firstElementChild.style[cssProps.border] = '';\n }\n // Grid alignment adjustment on grouping\n if (gObj.allowGrouping) {\n if (!gObj.groupSettings.columns.length) {\n gObj.element.querySelector('.e-groupdroparea').style.display = 'none';\n }\n else {\n this.removeColGroup(gObj);\n }\n }\n // hide horizontal scroll\n for (var _i = 0, _a = [].slice.call(gObj.element.getElementsByClassName(literals.content)); _i < _a.length; _i++) {\n var element = _a[_i];\n element.style.overflowX = 'hidden';\n }\n // Hide the waiting popup\n var waitingPop = [].slice.call(gObj.element.getElementsByClassName('e-spin-show'));\n for (var _b = 0, _c = [].slice.call(waitingPop); _b < _c.length; _b++) {\n var element = _c[_b];\n classList(element, ['e-spin-hide'], ['e-spin-show']);\n }\n this.printGridElement(gObj);\n gObj.isPrinting = false;\n delete window.printGridObj;\n var args = {\n element: gObj.element\n };\n gObj.trigger(events.printComplete, args);\n gObj.destroy();\n this.parent.log('exporting_complete', this.getModuleName());\n };\n Print.prototype.printGridElement = function (gObj) {\n classList(gObj.element, ['e-print-grid-layout'], ['e-print-grid']);\n if (gObj.isPrinting) {\n detach(gObj.element);\n }\n this.printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');\n this.printWind.moveTo(0, 0);\n this.printWind.resizeTo(screen.availWidth, screen.availHeight);\n this.printWind = printWindow(gObj.element, this.printWind);\n };\n Print.prototype.removeColGroup = function (gObj) {\n var depth = gObj.groupSettings.columns.length;\n var element = gObj.element;\n var id = '#' + gObj.element.id;\n if (!depth) {\n return;\n }\n var groupCaption = selectAll('.e-groupcaption', element);\n var colSpan = groupCaption[depth - 1].getAttribute('colspan');\n for (var i = 0; i < groupCaption.length; i++) {\n groupCaption[parseInt(i.toString(), 10)].setAttribute('colspan', colSpan);\n }\n var colGroups = selectAll(\"colgroup\" + id + \"colgroup\", element);\n var contentColGroups = selectAll('.e-content colgroup', element);\n var footerColGroups = selectAll('.e-summarycontent colgroup', element);\n this.hideColGroup(colGroups, depth);\n this.hideColGroup(contentColGroups, depth);\n this.hideColGroup(footerColGroups, depth);\n };\n Print.prototype.hideColGroup = function (colGroups, depth) {\n for (var i = 0; i < colGroups.length; i++) {\n for (var j = 0; j < depth; j++) {\n colGroups[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)].style.display = 'none';\n }\n }\n };\n /**\n * To destroy the print\n *\n * @returns {boolean} returns the isPrintGrid or not\n * @hidden\n */\n Print.prototype.isPrintGrid = function () {\n return this.parent.element.id.indexOf('_print') > 0 && this.parent.isPrinting;\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n Print.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.contentReady, this.contentReady.bind(this));\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.off(events.onEmpty, this.onEmpty.bind(this));\n this.parent.off(events.hierarchyPrint, this.hierarchyPrint);\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Print.prototype.getModuleName = function () {\n return 'print';\n };\n Print.printGridProp = getCloneProperties().concat([events.beforePrint, events.printComplete, events.load]);\n return Print;\n}());\nexport { Print };\n","import { ChildProperty, compile as baseTemplateComplier, setValue, Internationalization, isUndefined } from '@syncfusion/ej2-base';\nimport { extend as baseExtend, isNullOrUndefined, getValue, classList } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, addClass, attributes, remove, createElement, removeClass } from '@syncfusion/ej2-base';\nimport { isObject, select, selectAll } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate, UrlAdaptor, Deferred } from '@syncfusion/ej2-data';\nimport { Column } from '../models/column';\nimport { calculateRelativeBasedPosition } from '@syncfusion/ej2-popups';\nimport { Print } from '../actions/print';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\nimport * as literals from '../base/string-literals';\n//https://typescript.codeplex.com/discussions/401501\n/**\n * Function to check whether target object implement specific interface\n *\n * @param {Object} target - specifies the target\n * @param {string} checkFor - specifies the checkfors\n * @returns {boolean} returns the boolean\n * @hidden\n */\nexport function doesImplementInterface(target, checkFor) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return target.prototype && checkFor in target.prototype;\n}\n/**\n * Function to get value from provided data\n *\n * @param {string} field - specifies the field\n * @param {Object} data - specifies the data\n * @param {ColumnModel} column - specifies the column\n * @returns {Object} returns the object\n * @hidden\n */\n// eslint-disable-next-line\nexport function valueAccessor(field, data, column) {\n return (isNullOrUndefined(field) || field === '') ? '' : DataUtil.getObject(field, data);\n}\n/**\n * Defines the method used to apply custom header cell values from external function and display this on each header cell rendered.\n *\n * @param {string} field - specifies the field\n * @param {ColumnModel} column - specifies the column\n * @returns {object} headerValueAccessor\n * @hidden\n */\nexport function headerValueAccessor(field, column) {\n return (isNullOrUndefined(field) || field === '') ? '' : DataUtil.getObject(field, column);\n}\n/**\n * The function used to update Dom using requestAnimationFrame.\n *\n * @param {Function} updateFunction - Function that contains the actual action\n * @param {object} callBack - defines the callback\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function getUpdateUsingRaf(updateFunction, callBack) {\n requestAnimationFrame(function () {\n try {\n callBack(null, updateFunction());\n }\n catch (e) {\n callBack(e);\n }\n });\n}\n/**\n * @hidden\n * @param {PdfExportProperties | ExcelExportProperties} exportProperties - Defines the export properties\n * @returns {boolean} Returns isExportColumns\n */\nexport function isExportColumns(exportProperties) {\n return !isNullOrUndefined(exportProperties) &&\n !isNullOrUndefined(exportProperties.columns) && exportProperties.columns.length > 0;\n}\n/**\n * @param {PdfExportProperties | ExcelExportProperties} exportProperties - Defines the export properties\n * @param {IGrid} gObj - Defines the grid object\n * @returns {void}\n * @hidden\n */\nexport function updateColumnTypeForExportColumns(exportProperties, gObj) {\n var exportColumns = exportProperties.columns;\n var gridColumns = gObj.columns;\n for (var i = 0; i < exportColumns.length; i++) {\n if (gridColumns.length - 1 >= i) {\n if (gridColumns[parseInt(i.toString(), 10)].columns) {\n for (var j = 0; j < gridColumns[parseInt(i.toString(), 10)].columns.length; j++) {\n exportColumns[parseInt(i.toString(), 10)].columns[parseInt(j.toString(), 10)]\n .type = gridColumns[parseInt(i.toString(), 10)].columns[parseInt(j.toString(), 10)].type;\n }\n }\n else {\n exportColumns[parseInt(i.toString(), 10)].type = gridColumns[parseInt(i.toString(), 10)].type;\n }\n }\n }\n}\n/**\n * @hidden\n * @param {IGrid} grid - Defines the grid\n * @returns {void}\n */\nexport function updatecloneRow(grid) {\n var nRows = [];\n var actualRows = grid.vRows;\n for (var i = 0; i < actualRows.length; i++) {\n if (actualRows[parseInt(i.toString(), 10)].isDataRow) {\n nRows.push(actualRows[parseInt(i.toString(), 10)]);\n }\n else if (!actualRows[parseInt(i.toString(), 10)].isDataRow) {\n nRows.push(actualRows[parseInt(i.toString(), 10)]);\n if (!actualRows[parseInt(i.toString(), 10)].isExpand && actualRows[parseInt(i.toString(), 10)].isCaptionRow) {\n i += getCollapsedRowsCount(actualRows[parseInt(i.toString(), 10)], grid);\n }\n }\n }\n grid.vcRows = nRows;\n}\nvar count = 0;\n/**\n * @hidden\n * @param {Row} val - Defines the value\n * @param {IGrid} grid - Defines the grid\n * @returns {number} Returns the collapsed row count\n */\nexport function getCollapsedRowsCount(val, grid) {\n count = 0;\n var gSummary = 'gSummary';\n var total = 'count';\n var gLen = grid.groupSettings.columns.length;\n var records = 'records';\n var items = 'items';\n var value = val[\"\" + gSummary];\n var dataRowCnt = 0;\n var agrCnt = 'aggregatesCount';\n if (value === val.data[\"\" + total]) {\n if (grid.groupSettings.columns.length && !isNullOrUndefined(val[\"\" + agrCnt]) && val[\"\" + agrCnt]) {\n if (grid.groupSettings.columns.length !== 1) {\n count += (val.indent !== 0 && (value) < 2) ? (val[\"\" + gSummary] * ((gLen - val.indent) + (gLen - val.indent) * val[\"\" + agrCnt])) :\n (val[\"\" + gSummary] * ((gLen - val.indent) + (gLen - val.indent - 1) * val[\"\" + agrCnt])) + val[\"\" + agrCnt];\n }\n else if (grid.groupSettings.columns.length === 1) {\n count += (val[\"\" + gSummary] * (gLen - val.indent)) + val[\"\" + agrCnt];\n }\n }\n else if (grid.groupSettings.columns.length) {\n if (grid.groupSettings.columns.length !== 1) {\n count += val[\"\" + gSummary] * (grid.groupSettings.columns.length - val.indent);\n }\n else {\n count += val[\"\" + gSummary];\n }\n }\n return count;\n }\n else {\n for (var i = 0, len = val.data[\"\" + items].length; i < len; i++) {\n var gLevel = val.data[\"\" + items][parseInt(i.toString(), 10)];\n count += gLevel[\"\" + items].length + ((gLen !== grid.columns.length) &&\n !isNullOrUndefined(gLevel[\"\" + items][\"\" + records]) ? gLevel[\"\" + items][\"\" + records].length : 0);\n dataRowCnt += (!isNullOrUndefined(gLevel[\"\" + items][\"\" + records]) && !isNullOrUndefined(val[\"\" + agrCnt])) ? gLevel[\"\" + items][\"\" + records].length :\n gLevel[\"\" + items].length;\n if (gLevel[\"\" + items].GroupGuid && gLevel[\"\" + items].childLevels !== 0) {\n recursive(gLevel);\n }\n }\n count += val.data[\"\" + items].length;\n if (!isNullOrUndefined(val[\"\" + agrCnt])) {\n if (val[\"\" + agrCnt] && count && dataRowCnt !== 0) {\n count += ((count - dataRowCnt) * val[\"\" + agrCnt]) + val[\"\" + agrCnt];\n }\n }\n }\n return count;\n}\n/**\n * @param {Object[]} row - Defines the row\n * @returns {void}\n * @hidden\n */\nexport function recursive(row) {\n var items = 'items';\n var rCount = 'count';\n for (var j = 0, length_1 = row[\"\" + items].length; j < length_1; j++) {\n var nLevel = row[\"\" + items][parseInt(j.toString(), 10)];\n count += nLevel[\"\" + rCount];\n if (nLevel[\"\" + items].childLevels !== 0) {\n recursive(nLevel);\n }\n }\n}\n/**\n * @param {Object[]} collection - Defines the array\n * @param {Object} predicate - Defines the predicate\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function iterateArrayOrObject(collection, predicate) {\n var result = [];\n for (var i = 0, len = collection.length; i < len; i++) {\n var pred = predicate(collection[parseInt(i.toString(), 10)], i);\n if (!isNullOrUndefined(pred)) {\n result.push(pred);\n }\n }\n return result;\n}\n/**\n * @param {Object[]} array - Defines the array\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function iterateExtend(array) {\n var obj = [];\n for (var i = 0; i < array.length; i++) {\n obj.push(baseExtend({}, getActualProperties(array[parseInt(i.toString(), 10)]), {}, true));\n }\n return obj;\n}\n/**\n * @param {string | Function} template - Defines the template\n * @returns {Function} Returns the function\n * @hidden\n */\nexport function templateCompiler(template) {\n if (template) {\n try {\n var validSelector = template[0] !== '<';\n if (typeof template === 'function') {\n return baseTemplateComplier(template);\n }\n else if (validSelector && document.querySelectorAll(template).length) {\n return baseTemplateComplier(document.querySelector(template).innerHTML.trim());\n }\n else {\n return baseTemplateComplier(template);\n }\n }\n catch (e) {\n return baseTemplateComplier(template);\n }\n }\n return undefined;\n}\n/**\n * @param {Element} node - Defines the column\n * @param {Object} customAttributes - Defines the index\n * @returns {void}\n * @hidden\n */\nexport function setStyleAndAttributes(node, customAttributes) {\n var copyAttr = {};\n var literals = ['style', 'class'];\n //Dont touch the original object - make a copy\n baseExtend(copyAttr, customAttributes, {});\n if ('style' in copyAttr) {\n setStyleAttribute(node, copyAttr[literals[0]]);\n delete copyAttr[literals[0]];\n }\n if ('class' in copyAttr) {\n addClass([node], copyAttr[literals[1]]);\n delete copyAttr[literals[1]];\n }\n attributes(node, copyAttr);\n}\n/**\n * @param {Object} copied - Defines the column\n * @param {Object} first - Defines the inndex\n * @param {Object} second - Defines the second object\n * @param {string[]} exclude - Defines the exclude\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function extend(copied, first, second, exclude) {\n var moved = baseExtend(copied, first, second);\n var values = Object.keys(moved);\n for (var i = 0; i < values.length; i++) {\n if (exclude && exclude.indexOf(values[parseInt(i.toString(), 10)]) !== -1) {\n delete moved[values[parseInt(i.toString(), 10)]];\n }\n }\n return moved;\n}\n/**\n * @param {Column[]} columnModel - Defines the column\n * @param {number} ind - Defines the inndex\n * @returns {number} - Returns the columnindex\n * @hidden\n */\nexport function setColumnIndex(columnModel, ind) {\n if (ind === void 0) { ind = 0; }\n for (var i = 0, len = (!isNullOrUndefined(columnModel) ? columnModel.length : 0); i < len; i++) {\n if (columnModel[parseInt(i.toString(), 10)].columns) {\n columnModel[parseInt(i.toString(), 10)].index = isNullOrUndefined(columnModel[parseInt(i.toString(), 10)].index) ? ind\n : columnModel[parseInt(i.toString(), 10)].index;\n ind++;\n ind = setColumnIndex(columnModel[parseInt(i.toString(), 10)].columns, ind);\n }\n else {\n columnModel[parseInt(i.toString(), 10)].index = isNullOrUndefined(columnModel[parseInt(i.toString(), 10)].index) ? ind\n : columnModel[parseInt(i.toString(), 10)].index;\n ind++;\n }\n }\n return ind;\n}\n/**\n * @param {Column[] | string[] | ColumnModel[]} columns - Defines the column\n * @param {boolean} autoWidth - Defines the autowidth\n * @param {IGrid} gObj - Defines the class name\n * @returns {Column} - Returns the columns\n * @hidden\n */\nexport function prepareColumns(columns, autoWidth, gObj) {\n for (var c = 0, len = (!isNullOrUndefined(columns) ? columns.length : 0); c < len; c++) {\n var column = void 0;\n if (typeof columns[parseInt(c.toString(), 10)] === 'string') {\n column = new Column({ field: columns[parseInt(c.toString(), 10)] }, gObj);\n }\n else if (!(columns[parseInt(c.toString(), 10)] instanceof Column) || columns[parseInt(c.toString(), 10)].columns) {\n if (!columns[parseInt(c.toString(), 10)].columns) {\n column = new Column(columns[parseInt(c.toString(), 10)], gObj);\n }\n else {\n columns[parseInt(c.toString(), 10)].columns = prepareColumns(columns[parseInt(c.toString(), 10)].columns, null, gObj);\n column = new Column(columns[parseInt(c.toString(), 10)], gObj);\n }\n }\n else {\n column = columns[parseInt(c.toString(), 10)];\n }\n if (column.type && column.type.toLowerCase() === 'checkbox') {\n column.allowReordering = false;\n }\n column.headerText = isNullOrUndefined(column.headerText) ? column.foreignKeyValue || column.field || '' : column.headerText;\n column.foreignKeyField = column.foreignKeyField || column.field;\n column.valueAccessor = (typeof column.valueAccessor === 'string' ? getValue(column.valueAccessor, window)\n : column.valueAccessor) || valueAccessor;\n column.width = autoWidth && isNullOrUndefined(column.width) ? 200 : column.width;\n if (isNullOrUndefined(column.visible)) {\n column.visible = true;\n }\n columns[parseInt(c.toString(), 10)] = column;\n }\n return columns;\n}\n/**\n * @param {HTMLElement} popUp - Defines the popup element\n * @param {MouseEvent | TouchEvent} e - Defines the moouse event\n * @param {string} className - Defines the class name\n * @returns {void}\n * @hidden\n */\nexport function setCssInGridPopUp(popUp, e, className) {\n var popUpSpan = popUp.querySelector('span');\n var position = popUp.parentElement.getBoundingClientRect();\n var targetPosition = e.target.getBoundingClientRect();\n popUpSpan.className = className;\n popUp.style.display = '';\n var isBottomTail = (isNullOrUndefined(e.clientY) ? e.changedTouches[0].clientY :\n e.clientY) > popUp.offsetHeight + 10;\n popUp.style.top = targetPosition.top - position.top +\n (isBottomTail ? -(popUp.offsetHeight + 10) : popUp.offsetHeight + 10) + 'px'; //10px for tail element\n popUp.style.left = getPopupLeftPosition(popUp, e, targetPosition, position.left) + 'px';\n if (isBottomTail) {\n popUp.querySelector('.e-downtail').style.display = '';\n popUp.querySelector('.e-uptail').style.display = 'none';\n }\n else {\n popUp.querySelector('.e-downtail').style.display = 'none';\n popUp.querySelector('.e-uptail').style.display = '';\n }\n}\n/**\n * @param {HTMLElement} popup - Defines the popup element\n * @param {MouseEvent | TouchEvent} e - Defines the mouse event\n * @param {Object} targetPosition - Defines the target position\n * @param {number} targetPosition.top - Defines the top position\n * @param {number} targetPosition.left - Defines the left position\n * @param {number} targetPosition.right - Defines the right position\n * @param {number} left - Defines the left position\n * @returns {number} Returns the popup left position\n * @hidden\n */\nfunction getPopupLeftPosition(popup, e, targetPosition, left) {\n var width = popup.offsetWidth / 2;\n var x = getPosition(e).x;\n if (x - targetPosition.left < width) {\n return targetPosition.left - left;\n }\n else if (targetPosition.right - x < width) {\n return targetPosition.right - left - width * 2;\n }\n else {\n return x - left - width;\n }\n}\n/**\n * @param {Object} obj - Defines the object\n * @returns {Object} Returns the Properties\n * @hidden\n */\nexport function getActualProperties(obj) {\n if (obj instanceof ChildProperty) {\n return getValue('properties', obj);\n }\n else {\n return obj;\n }\n}\n/**\n * @param {Element} elem - Defines the element\n * @param {string} selector - Defines the string selector\n * @param {boolean} isID - Defines the isID\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function parentsUntil(elem, selector, isID) {\n var parent = elem;\n while (parent) {\n if (isID ? parent.id === selector : parent.classList.contains(selector)) {\n break;\n }\n parent = parent.parentElement;\n }\n return parent;\n}\n/**\n * @param {Element} element - Defines the element\n * @param {Element} elements - Defines the element\n * @returns {number} Returns the element index\n * @hidden\n */\nexport function getElementIndex(element, elements) {\n var index = -1;\n for (var i = 0, len = elements.length; i < len; i++) {\n if (elements[parseInt(i.toString(), 10)].isEqualNode(element)) {\n index = i;\n break;\n }\n }\n return index;\n}\n/**\n * @param {Object} value - Defines the value\n * @param {Object} collection - defines the collection\n * @returns {number} Returns the array\n * @hidden\n */\nexport function inArray(value, collection) {\n for (var i = 0, len = collection.length; i < len; i++) {\n if (collection[parseInt(i.toString(), 10)] === value) {\n return i;\n }\n }\n return -1;\n}\n/**\n * @param {Object} collection - Defines the collection\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function getActualPropFromColl(collection) {\n var coll = [];\n for (var i = 0, len = collection.length; i < len; i++) {\n // eslint-disable-next-line no-prototype-builtins\n if (collection[parseInt(i.toString(), 10)].hasOwnProperty('properties')) {\n coll.push(collection[parseInt(i.toString(), 10)].properties);\n }\n else {\n coll.push(collection[parseInt(i.toString(), 10)]);\n }\n }\n return coll;\n}\n/**\n * @param {Element} target - Defines the target element\n * @param {string} selector - Defines the selector\n * @returns {void}\n * @hidden\n */\nexport function removeElement(target, selector) {\n var elements = [].slice.call(target.querySelectorAll(selector));\n for (var i = 0; i < elements.length; i++) {\n remove(elements[parseInt(i.toString(), 10)]);\n }\n}\n/**\n * @param {MouseEvent | TouchEvent} e Defines the mouse event\n * @returns {IPosition} Returns the position\n * @hidden\n */\nexport function getPosition(e) {\n var position = {};\n position.x = (isNullOrUndefined(e.clientX) ? e.changedTouches[0].clientX :\n e.clientX);\n position.y = (isNullOrUndefined(e.clientY) ? e.changedTouches[0].clientY :\n e.clientY);\n return position;\n}\nvar uid = 0;\n/**\n * @param {string} prefix - Defines the prefix string\n * @returns {string} Returns the uid\n * @hidden\n */\nexport function getUid(prefix) {\n return prefix + uid++;\n}\n/**\n * @param {Element | DocumentFragment} elem - Defines the element\n * @param {Element[] | NodeList} children - Defines the Element\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function appendChildren(elem, children) {\n for (var i = 0, len = children.length; i < len; i++) {\n if (len === children.length) {\n elem.appendChild(children[parseInt(i.toString(), 10)]);\n }\n else {\n elem.appendChild(children[0]);\n }\n }\n return elem;\n}\n/**\n * @param {Element} elem - Defines the element\n * @param {string} selector - Defines the selector\n * @param {boolean} isID - Defines isID\n * @returns {Element} Return the element\n * @hidden\n */\nexport function parents(elem, selector, isID) {\n var parent = elem;\n var parents = [];\n while (parent) {\n if (isID ? parent.id === selector : parent.classList.contains(selector)) {\n parents.push(parent);\n }\n parent = parent.parentElement;\n }\n return parents;\n}\n/**\n * @param {AggregateType | string} type - Defines the type\n * @param {Object} data - Defines the data\n * @param {AggregateColumnModel} column - Defines the column\n * @param {Object} context - Defines the context\n * @returns {Object} Returns the calculated aggragate\n * @hidden\n */\nexport function calculateAggregate(type, data, column, context) {\n if (type === 'Custom') {\n var temp = column.customAggregate;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n return temp ? temp.call(context, data, column) : '';\n }\n return (column.field in data || data instanceof Array) ? DataUtil.aggregates[type.toLowerCase()](data, column.field) : null;\n}\n/** @hidden */\nvar scrollWidth = null;\n/** @hidden\n * @returns {number} - Returns the scrollbarwidth\n */\nexport function getScrollBarWidth() {\n if (scrollWidth !== null) {\n return scrollWidth;\n }\n var divNode = document.createElement('div');\n var value = 0;\n divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';\n document.body.appendChild(divNode);\n value = (divNode.offsetWidth - divNode.clientWidth) | 0;\n document.body.removeChild(divNode);\n return scrollWidth = value;\n}\n/** @hidden */\nvar rowHeight;\n/**\n * @param {HTMLElement} element - Defines the element\n * @returns {number} Returns the roww height\n * @hidden\n */\nexport function getRowHeight(element) {\n if (rowHeight !== undefined) {\n return rowHeight;\n }\n var table = createElement('table', { className: literals.table, styles: 'visibility: hidden', attrs: { role: 'grid' } });\n table.innerHTML = 'A';\n element.appendChild(table);\n var rect = table.querySelector('td').getBoundingClientRect();\n element.removeChild(table);\n rowHeight = Math.ceil(rect.height);\n return rowHeight;\n}\n/**\n * @param {HTMLElement} element - Defines the HTMl element\n * @returns {number} Returns the row height\n * @hidden\n */\nexport function getActualRowHeight(element) {\n var table = createElement('table', { className: literals.table, styles: 'visibility: hidden', attrs: { role: 'grid' } });\n table.innerHTML = 'A';\n element.appendChild(table);\n var rect = table.querySelector('tr').getBoundingClientRect();\n element.removeChild(table);\n return rect.height;\n}\n/**\n * @param {string} field - Defines the field\n * @returns {boolean} - Returns is complex field\n * @hidden\n */\nexport function isComplexField(field) {\n return field.split('.').length > 1;\n}\n/**\n * @param {string} field - Defines the field\n * @returns {string} - Returns the get complex field ID\n * @hidden\n */\nexport function getComplexFieldID(field) {\n if (field === void 0) { field = ''; }\n return field.replace(/\\./g, '___');\n}\n/**\n * @param {string} field - Defines the field\n * @returns {string} - Returns the parsed column field id\n * @hidden\n */\nexport function getParsedFieldID(field) {\n if (field === void 0) { field = ''; }\n return field.replace(/[^a-zA-Z0-9_.]/g, '\\\\$&');\n}\n/**\n * @param {string} field - Defines the field\n * @returns {string} - Returns the set complex field ID\n * @hidden\n */\nexport function setComplexFieldID(field) {\n if (field === void 0) { field = ''; }\n return field.replace(/___/g, '.');\n}\n/**\n * @param {Column} col - Defines the column\n * @param {string} type - Defines the type\n * @param {Element} elem - Defines th element\n * @returns {boolean} Returns is Editable\n * @hidden\n */\nexport function isEditable(col, type, elem) {\n var row = parentsUntil(elem, literals.row);\n var isOldRow = !row ? true : row && !row.classList.contains('e-insertedrow');\n if (type === 'beginEdit' && isOldRow) {\n if (col.isIdentity || col.isPrimaryKey || !col.allowEditing) {\n return false;\n }\n return true;\n }\n else if (type === 'add' && col.isIdentity) {\n return false;\n }\n else {\n if (isOldRow && !col.allowEditing && !col.isIdentity && !col.isPrimaryKey) {\n return false;\n }\n return true;\n }\n}\n/**\n * @param {IGrid} inst - Defines the IGrid\n * @returns {boolean} Returns is action prevent in boolean\n * @hidden\n */\nexport function isActionPrevent(inst) {\n var dlg = select('#' + inst.element.id + 'EditConfirm', inst.element);\n return inst.editSettings.mode === 'Batch' &&\n (selectAll('.e-updatedtd', inst.element).length || selectAll('.e-gridform.e-formvalidator', inst.element).length)\n && inst.editSettings.showConfirmDialog && (dlg ? dlg.classList.contains('e-popup-close') : true);\n}\n/**\n * @param {any} elem - Defines the element\n * @param {boolean} action - Defines the boolean for action\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function wrap(elem, action) {\n var clName = 'e-wrap';\n elem = elem instanceof Array ? elem : [elem];\n for (var i = 0; i < elem.length; i++) {\n if (action) {\n elem[parseInt(i.toString(), 10)].classList.add(clName);\n }\n else {\n elem[parseInt(i.toString(), 10)].classList.remove(clName);\n }\n }\n}\n/**\n * @param {ServiceLocator} serviceLocator - Defines the service locator\n * @param {Column} column - Defines the column\n * @returns {void}\n * @hidden\n */\nexport function setFormatter(serviceLocator, column) {\n var fmtr = serviceLocator.getService('valueFormatter');\n var format = 'format';\n var args;\n if (column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly') {\n args = { type: column.type === 'dateonly' ? 'date' : column.type, skeleton: column.format };\n if ((typeof (column.format) === 'string') && column.format !== 'yMd') {\n args[\"\" + format] = column.format;\n }\n }\n switch (column.type) {\n case 'date':\n column.setFormatter(fmtr.getFormatFunction(args));\n column.setParser(fmtr.getParserFunction(args));\n break;\n case 'dateonly':\n column.setFormatter(fmtr.getFormatFunction(args));\n column.setParser(fmtr.getParserFunction(args));\n break;\n case 'datetime':\n column.setFormatter(fmtr.getFormatFunction(args));\n column.setParser(fmtr.getParserFunction(args));\n break;\n case 'number':\n column.setFormatter(fmtr.getFormatFunction({ format: column.format }));\n column.setParser(fmtr.getParserFunction({ format: column.format }));\n break;\n }\n}\n/**\n * @param {Element} cells - Defines the cell element\n * @param {boolean} add - Defines the add\n * @param {string} args - Defines the args\n * @returns {void}\n * @hidden\n */\nexport function addRemoveActiveClasses(cells, add) {\n var args = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n args[_i - 2] = arguments[_i];\n }\n for (var i = 0, len = cells.length; i < len; i++) {\n if (add) {\n classList(cells[parseInt(i.toString(), 10)], args.slice(), []);\n cells[parseInt(i.toString(), 10)].setAttribute('aria-selected', 'true');\n }\n else {\n classList(cells[parseInt(i.toString(), 10)], [], args.slice());\n cells[parseInt(i.toString(), 10)].removeAttribute('aria-selected');\n }\n }\n}\n/**\n * @param {string} result - Defines th string\n * @returns {string} Returns the distinct staing values\n * @hidden\n */\nexport function distinctStringValues(result) {\n var temp = {};\n var res = [];\n for (var i = 0; i < result.length; i++) {\n if (!(result[parseInt(i.toString(), 10)] in temp)) {\n res.push(result[parseInt(i.toString(), 10)].toString());\n temp[result[parseInt(i.toString(), 10)]] = 1;\n }\n }\n return res;\n}\n/**\n * @param {Element} target - Defines the target\n * @param {Dialog} dialogObj - Defines the dialog\n * @returns {void}\n * @hidden\n */\nexport function getFilterMenuPostion(target, dialogObj) {\n var elementVisible = dialogObj.element.style.display;\n dialogObj.element.style.display = 'block';\n var dlgWidth = dialogObj.width;\n var newpos = calculateRelativeBasedPosition(target, dialogObj.element);\n dialogObj.element.style.display = elementVisible;\n dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';\n var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);\n if (leftPos < 1) {\n dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px'; // right calculation\n }\n else {\n dialogObj.element.style.left = leftPos + -4 + 'px';\n }\n}\n/**\n * @param {Object} args - Defines the args\n * @param {Popup} args.popup - Defines the args for popup\n * @param {Dialog} dialogObj - Defines the dialog obj\n * @returns {void}\n * @hidden\n */\nexport function getZIndexCalcualtion(args, dialogObj) {\n args.popup.element.style.zIndex = (dialogObj.zIndex + 1).toString();\n}\n/**\n * @param {Element} elem - Defines the element\n * @returns {void}\n * @hidden\n */\nexport function toogleCheckbox(elem) {\n var span = elem.querySelector('.e-frame');\n var input = span.previousSibling;\n if (span.classList.contains('e-check')) {\n input.checked = false;\n classList(span, ['e-uncheck'], ['e-check']);\n }\n else {\n input.checked = true;\n classList(span, ['e-check'], ['e-uncheck']);\n }\n}\n/**\n * @param {HTMLInputElement} elem - Defines the element\n * @param {boolean} checked - Defines is checked\n * @returns {void}\n * @hidden\n */\nexport function setChecked(elem, checked) {\n elem.checked = checked;\n}\n/**\n * @param {string} uid - Defines the string\n * @param {Element} elem - Defines the Element\n * @param {string} className - Defines the classname\n * @returns {Element} Returns the box wrap\n * @hidden\n */\nexport function createCboxWithWrap(uid, elem, className) {\n var div = createElement('div', { className: className });\n div.appendChild(elem);\n div.setAttribute('uid', uid);\n return div;\n}\n/**\n * @param {Element} elem - Defines the element\n * @param {boolean} checked - Defines is checked\n * @returns {void}\n * @hidden\n */\nexport function removeAddCboxClasses(elem, checked) {\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n if (checked) {\n elem.classList.add('e-check');\n }\n else {\n elem.classList.add('e-uncheck');\n }\n}\n/**\n * Refresh the Row model's foreign data.\n *\n * @param {IRow} row - Grid Row model object.\n * @param {Column[]} columns - Foreign columns array.\n * @param {Object} data - Updated Row data.\n * @returns {void}\n * @hidden\n */\nexport function refreshForeignData(row, columns, data) {\n for (var i = 0; i < (!isNullOrUndefined(columns) ? columns.length : 0); i++) {\n setValue(columns[parseInt(i.toString(), 10)].field, getForeignData(columns[parseInt(i.toString(), 10)], data), row.foreignKeyData);\n }\n var cells = row.cells;\n for (var i = 0; i < cells.length; i++) {\n if (cells[parseInt(i.toString(), 10)].isForeignKey) {\n setValue('foreignKeyData', getValue(cells[parseInt(i.toString(), 10)].column.field, row.foreignKeyData), cells[parseInt(i.toString(), 10)]);\n }\n }\n}\n/**\n * Get the foreign data for the corresponding cell value.\n *\n * @param {Column} column - Foreign Key column\n * @param {Object} data - Row data.\n * @param {string | number} lValue - cell value.\n * @param {Object} foreignKeyData - foreign data source.\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function getForeignData(column, data, lValue, foreignKeyData) {\n var fField = column.foreignKeyField;\n var key = (!isNullOrUndefined(lValue) ? lValue : valueAccessor(column.field, data, column));\n key = isNullOrUndefined(key) ? '' : key;\n var query = new Query();\n var fdata = foreignKeyData || ((column.dataSource instanceof DataManager) && column.dataSource.dataSource.json.length ?\n column.dataSource.dataSource.json : column.columnData);\n if (key.getDay) {\n query.where(getDatePredicate({ field: fField, operator: 'equal', value: key, matchCase: false }));\n }\n else {\n query.where(fField, '==', key, false);\n }\n return new DataManager(fdata).executeLocal(query);\n}\n/**\n * To use to get the column's object by the foreign key value.\n *\n * @param {string} foreignKeyValue - Defines ForeignKeyValue.\n * @param {Column[]} columns - Array of column object.\n * @returns {Column} Returns the element\n * @hidden\n */\nexport function getColumnByForeignKeyValue(foreignKeyValue, columns) {\n var column;\n return columns.some(function (col) {\n column = col;\n return col.foreignKeyValue === foreignKeyValue;\n }) && column;\n}\n/**\n * @param {number} value - Defines the date or month value\n * @returns {string} Returns string\n * @hidden\n */\nexport function padZero(value) {\n if (value < 10) {\n return '0' + value;\n }\n return String(value);\n}\n/**\n * @param {PredicateModel} filterObject - Defines the filterObject\n * @param {string} type - Defines the type\n * @param {boolean} isExecuteLocal - Defines whether the data actions performed in client and used for dateonly type field\n * @returns {Predicate} Returns the Predicate\n * @hidden\n */\nexport function getDatePredicate(filterObject, type, isExecuteLocal) {\n var datePredicate;\n var prevDate;\n var nextDate;\n var prevObj = baseExtend({}, getActualProperties(filterObject));\n var nextObj = baseExtend({}, getActualProperties(filterObject));\n if (isNullOrUndefined(filterObject.value) || filterObject.value === '') {\n datePredicate = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n return datePredicate;\n }\n var value = new Date(filterObject.value);\n if (type === 'dateonly' && !isExecuteLocal) {\n if (typeof (prevObj.value) === 'string') {\n prevObj.value = new Date(prevObj.value);\n }\n var dateOnlyString = prevObj.value.getFullYear() + '-' + padZero(prevObj.value.getMonth() + 1) + '-' + padZero(prevObj.value.getDate());\n var predicates = new Predicate(prevObj.field, prevObj.operator, dateOnlyString, false);\n datePredicate = predicates;\n }\n else {\n if (filterObject.operator === 'equal' || filterObject.operator === 'notequal') {\n if (type === 'datetime') {\n prevDate = new Date(value.setSeconds(value.getSeconds() - 1));\n nextDate = new Date(value.setSeconds(value.getSeconds() + 2));\n filterObject.value = new Date(value.setSeconds(nextDate.getSeconds() - 1));\n }\n else {\n prevDate = new Date(value.setHours(0) - 1);\n nextDate = new Date(value.setHours(24));\n }\n prevObj.value = prevDate;\n nextObj.value = nextDate;\n if (filterObject.operator === 'equal') {\n prevObj.operator = 'greaterthan';\n nextObj.operator = 'lessthan';\n }\n else if (filterObject.operator === 'notequal') {\n prevObj.operator = 'lessthanorequal';\n nextObj.operator = 'greaterthanorequal';\n }\n var predicateSt = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n var predicateEnd = new Predicate(nextObj.field, nextObj.operator, nextObj.value, false);\n datePredicate = filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);\n }\n else {\n if (type === 'date' && (filterObject.operator === 'lessthanorequal' || filterObject.operator === 'greaterthan')) {\n prevObj.value = new Date(value.setHours(24) - 1);\n }\n if (typeof (prevObj.value) === 'string') {\n prevObj.value = new Date(prevObj.value);\n }\n var predicates = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n datePredicate = predicates;\n }\n }\n if (filterObject.setProperties) {\n filterObject.setProperties({ ejpredicate: datePredicate }, true);\n }\n else {\n filterObject.ejpredicate = datePredicate;\n }\n return datePredicate;\n}\n/**\n * @param {IGrid} grid - Defines the IGrid\n * @returns {boolean} Returns true if group adaptive is true\n * @hidden\n */\nexport function isGroupAdaptive(grid) {\n return grid.enableVirtualization && grid.groupSettings.columns.length > 0 && grid.isVirtualAdaptive &&\n !grid.groupSettings.enableLazyLoading;\n}\n/**\n * @param {string} field - Defines the Field\n * @param {Object} object - Defines the objec\n * @returns {any} Returns the object\n * @hidden\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getObject(field, object) {\n if (field === void 0) { field = ''; }\n if (field) {\n var value = object;\n var splits = field.split('.');\n for (var i = 0; i < splits.length && !isNullOrUndefined(value); i++) {\n value = value[splits[parseInt(i.toString(), 10)]];\n if (isUndefined(value)) {\n var newCase = splits[parseInt(i.toString(), 10)].charAt(0).toUpperCase()\n + splits[parseInt(i.toString(), 10)].slice(1);\n value = object[\"\" + newCase] || object[(\"\" + newCase).charAt(0).toLowerCase() + (\"\" + newCase).slice(1)];\n }\n }\n return value;\n }\n}\n/**\n * @param {string | Object} format - defines the format\n * @param {string} colType - Defines the coltype\n * @returns {string} Returns the custom Data format\n * @hidden\n */\nexport function getCustomDateFormat(format, colType) {\n var intl = new Internationalization();\n var formatvalue;\n var formatter = 'format';\n var type = 'type';\n if (colType === 'date') {\n formatvalue = typeof (format) === 'object' ?\n intl.getDatePattern({ type: format[\"\" + type] ? format[\"\" + type] : 'date', format: format[\"\" + formatter] }, false) :\n intl.getDatePattern({ type: 'dateTime', skeleton: format }, false);\n }\n else {\n formatvalue = typeof (format) === 'object' ?\n intl.getDatePattern({ type: format[\"\" + type] ? format[\"\" + type] : 'dateTime', format: format[\"\" + formatter] }, false) :\n intl.getDatePattern({ type: 'dateTime', skeleton: format }, false);\n }\n return formatvalue;\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {HierarchyGridPrintMode} hierarchyPrintMode - Defines the hierarchyPrintMode\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function getExpandedState(gObj, hierarchyPrintMode) {\n var rows = gObj.getRowsObject();\n var obj = {};\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.isExpand && !row.isDetailRow) {\n var index = gObj.allowPaging && gObj.printMode === 'AllPages' ? row.index +\n (gObj.pageSettings.currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : row.index;\n if (!isNullOrUndefined(index)) {\n obj[parseInt(index.toString(), 10)] = {};\n obj[parseInt(index.toString(), 10)].isExpand = true;\n if (gObj.childGrid) {\n obj[parseInt(index.toString(), 10)].gridModel = getPrintGridModel(row.childGrid, hierarchyPrintMode);\n obj[parseInt(index.toString(), 10)].gridModel.query = gObj.childGrid.query;\n }\n }\n }\n }\n return obj;\n}\n/**\n * @param {IGrid} gObj - Defines the grid objct\n * @param {HierarchyGridPrintMode} hierarchyPrintMode - Defines the hierarchyPrintMode\n * @returns {IGrid} Returns the IGrid\n * @hidden\n */\nexport function getPrintGridModel(gObj, hierarchyPrintMode) {\n if (hierarchyPrintMode === void 0) { hierarchyPrintMode = 'Expanded'; }\n var printGridModel = {};\n if (!gObj) {\n return printGridModel;\n }\n for (var _i = 0, _a = Print.printGridProp; _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'columns') {\n printGridModel[\"\" + key] = getActualPropFromColl(gObj.getColumns());\n }\n else if (key === 'allowPaging') {\n printGridModel[\"\" + key] = gObj.printMode === 'CurrentPage';\n }\n else {\n printGridModel[\"\" + key] = getActualProperties(gObj[\"\" + key]);\n }\n }\n printGridModel['enableHover'] = false;\n if ((gObj.childGrid || gObj.detailTemplate) && hierarchyPrintMode !== 'None') {\n printGridModel.expandedRows = getExpandedState(gObj, hierarchyPrintMode);\n }\n return printGridModel;\n}\n/**\n * @param {Object} copied - Defines the copied object\n * @param {Object} first - Defines the first object\n * @param {Object} second - Defines the second object\n * @param {boolean} deep - Defines the deep\n * @returns {Object} Returns the extended object\n * @hidden\n */\nexport function extendObjWithFn(copied, first, second, deep) {\n var res = copied || {};\n var len = arguments.length;\n if (deep) {\n len = len - 1;\n }\n for (var i = 1; i < len; i++) {\n // eslint-disable-next-line prefer-rest-params\n if (!arguments[parseInt(i.toString(), 10)]) {\n continue;\n }\n // eslint-disable-next-line prefer-rest-params\n var obj1 = arguments[parseInt(i.toString(), 10)];\n var keys = Object.keys(Object.getPrototypeOf(obj1)).length ?\n Object.keys(obj1).concat(getPrototypesOfObj(obj1)) : Object.keys(obj1);\n for (var i_1 = 0; i_1 < keys.length; i_1++) {\n var source = res[keys[parseInt(i_1.toString(), 10)]];\n var cpy = obj1[keys[parseInt(i_1.toString(), 10)]];\n var cln = void 0;\n if (deep && (isObject(cpy) || Array.isArray(cpy))) {\n if (isObject(cpy)) {\n cln = source ? source : {};\n res[keys[parseInt(i_1.toString(), 10)]] = baseExtend({}, cln, cpy, deep);\n }\n else {\n cln = source ? source : [];\n res[keys[parseInt(i_1.toString(), 10)]] = baseExtend([], cln, cpy, deep);\n }\n }\n else {\n res[keys[parseInt(i_1.toString(), 10)]] = cpy;\n }\n }\n }\n return res;\n}\n/**\n * @param {Object} obj - Defines the obj\n * @returns {string[]} Returns the string\n * @hidden\n */\nexport function getPrototypesOfObj(obj) {\n var keys = [];\n while (Object.getPrototypeOf(obj) && Object.keys(Object.getPrototypeOf(obj)).length) {\n keys = keys.concat(Object.keys(Object.getPrototypeOf(obj)));\n obj = Object.getPrototypeOf(obj);\n }\n return keys;\n}\n/**\n * @param {Column[]} column - Defines the Column\n * @returns {number} Returns the column Depth\n * @hidden\n */\nexport function measureColumnDepth(column) {\n var max = 0;\n for (var i = 0; i < (!isNullOrUndefined(column) ? column.length : 0); i++) {\n var depth = checkDepth(column[parseInt(i.toString(), 10)], 0);\n if (max < depth) {\n max = depth;\n }\n }\n return max + 1;\n}\n/**\n * @param {Column} col - Defines the Column\n * @param {number} index - Defines the index\n * @returns {number} Returns the depth\n * @hidden\n */\nexport function checkDepth(col, index) {\n var max = index;\n var indices = [];\n if (col.columns) {\n index++;\n for (var i = 0; i < col.columns.length; i++) {\n indices[parseInt(i.toString(), 10)] = checkDepth(col.columns[parseInt(i.toString(), 10)], index);\n }\n for (var j = 0; j < indices.length; j++) {\n if (max < indices[parseInt(j.toString(), 10)]) {\n max = indices[parseInt(j.toString(), 10)];\n }\n }\n index = max;\n }\n return index;\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {PredicateModel[]} filteredCols - Defines the PredicateModel\n * @returns {void}\n * @hidden\n */\nexport function refreshFilteredColsUid(gObj, filteredCols) {\n for (var i = 0; i < filteredCols.length; i++) {\n filteredCols[parseInt(i.toString(), 10)].uid = filteredCols[parseInt(i.toString(), 10)].isForeignKey ?\n getColumnByForeignKeyValue(filteredCols[parseInt(i.toString(), 10)].field, gObj.getForeignKeyColumns()).uid\n : gObj.enableColumnVirtualization ? getColumnModelByFieldName(gObj, filteredCols[parseInt(i.toString(), 10)].field).uid\n : gObj.getColumnByField(filteredCols[parseInt(i.toString(), 10)].field).uid;\n }\n}\n/** @hidden */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var Global;\n(function (Global) {\n // eslint-disable-next-line prefer-const\n Global.timer = null;\n})(Global || (Global = {}));\n/**\n * @param {Element} element - Defines the element\n * @returns {Object} Returns the transform values\n * @hidden\n */\nexport function getTransformValues(element) {\n var style = document.defaultView.getComputedStyle(element, null);\n var transformV = style.getPropertyValue('transform');\n var replacedTv = transformV.replace(/,/g, '');\n var translateX = parseFloat((replacedTv).split(' ')[4]);\n var translateY = parseFloat((replacedTv).split(' ')[5]);\n return { width: translateX, height: translateY };\n}\n/**\n * @param {Element} rootElement - Defines the root Element\n * @param {Element} element - Defines the element\n * @returns {void}\n * @hidden\n */\nexport function applyBiggerTheme(rootElement, element) {\n if (rootElement.classList.contains('e-bigger')) {\n element.classList.add('e-bigger');\n }\n}\n/**\n * @param {IGrid} gObj - Defines grid object\n * @returns {number} - Returns scroll width\n * @hidden\n */\nexport function getScrollWidth(gObj) {\n var scrollElem = gObj.getContent().firstElementChild;\n return scrollElem.scrollWidth > scrollElem.offsetWidth ? getScrollBarWidth() : 0;\n}\n/**\n * @param {IGrid} gObj - Defines grid object\n * @param {number} idx - Defines the index\n * @returns {number} Returns colSpan index\n * @hidden\n */\nexport function resetColspanGroupCaption(gObj, idx) {\n var colspan = 0;\n var cols = gObj.getColumns();\n var width = idx * 30;\n if (gObj.isRowDragable()) {\n colspan++;\n width += 30;\n }\n colspan += (gObj.groupSettings.columns.length - idx);\n width += (30 * (gObj.groupSettings.columns.length - idx));\n var gridWidth = (gObj.width === 'auto' ? gObj.element.offsetWidth : parseInt(gObj.width.toString(), 10)) -\n getScrollWidth(gObj);\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseInt(cols[parseInt(i.toString(), 10)].width.toString(), 10);\n colspan++;\n }\n if (width > gridWidth) {\n colspan--;\n break;\n }\n }\n return colspan;\n}\n/**\n * @param {HTMLElement} tr - Defines the tr Element\n * @param {IGrid} gObj - Defines grid object\n * @returns {void}\n * @hidden\n */\nexport function groupCaptionRowLeftRightPos(tr, gObj) {\n var width = 0;\n for (var j = 0; j < tr.childNodes.length; j++) {\n var td = tr.childNodes[parseInt(j.toString(), 10)];\n td.classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td, width, gObj.enableRtl, 'Left');\n if (td.classList.contains('e-indentcell') || td.classList.contains('e-recordplusexpand') ||\n td.classList.contains('e-recordpluscollapse')) {\n width += 30;\n }\n if (td.classList.contains('e-groupcaption')) {\n var colspan = parseInt(td.getAttribute('colspan'), 10);\n if (gObj.isRowDragable()) {\n colspan--;\n width += 30;\n }\n colspan = colspan - (gObj.groupSettings.columns.length - j);\n width = width + (30 * (gObj.groupSettings.columns.length - j));\n var cols = gObj.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if ((parseInt(td.getAttribute('colspan'), 10) > 1) &&\n (parseInt(cols[parseInt(i.toString(), 10)].width.toString(), 10)\n + width) > (parseInt(gObj.width.toString(), 10) - getScrollWidth(gObj))) {\n var newColspan = resetColspanGroupCaption(gObj, j);\n td.setAttribute('colspan', newColspan.toString());\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseInt(cols[parseInt(i.toString(), 10)].width.toString(), 10);\n colspan--;\n }\n if (colspan === 0) {\n break;\n }\n }\n }\n if (td.classList.contains('e-summarycell')) {\n var uid_1 = td.getAttribute('e-mappinguid');\n var column = gObj.getColumnByUid(uid_1);\n width += parseInt(column.width.toString(), 10);\n }\n }\n}\n/**\n * @param {Element} row - Defines row element\n * @param {IGrid} gridObj - Defines grid object\n * @returns {boolean} Returns isRowEnteredInGrid\n * @hidden\n */\nexport function ensureLastRow(row, gridObj) {\n var content = gridObj.getContent().firstElementChild;\n return row && (row.getBoundingClientRect().top - content.getBoundingClientRect().top +\n gridObj.getRowHeight()) > content.offsetHeight;\n}\n/**\n * @param {Element} row - Defines row element\n * @param {number} rowTop - Defines row top number\n * @returns {boolean} Returns first row is true\n * @hidden\n */\nexport function ensureFirstRow(row, rowTop) {\n return row && row.getBoundingClientRect().top < rowTop;\n}\n/**\n * @param {number} index - Defines index\n * @param {IGrid} gObj - Defines grid object\n * @returns {boolean} Returns isRowEnteredInGrid\n * @hidden\n */\nexport function isRowEnteredInGrid(index, gObj) {\n var rowHeight = gObj.getRowHeight();\n var startIndex = gObj.getContent().firstElementChild.scrollTop / rowHeight;\n var endIndex = startIndex + (gObj.getContent().firstElementChild.offsetHeight / rowHeight);\n return index < endIndex && index > startIndex;\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @param {Object} data - Defines the query\n * @returns {number} Returns the edited data index\n * @hidden\n */\nexport function getEditedDataIndex(gObj, data) {\n var keyField = gObj.getPrimaryKeyFieldNames()[0];\n var dataIndex;\n gObj.getCurrentViewRecords().filter(function (e, index) {\n if (keyField.includes('.')) {\n var currentValue = getObject(keyField, e);\n var originalValue = getObject(keyField, data);\n if (currentValue === originalValue) {\n dataIndex = index;\n }\n }\n else {\n if (e[\"\" + keyField] === data[\"\" + keyField]) {\n dataIndex = index;\n }\n }\n });\n return dataIndex;\n}\n/**\n * @param {Object} args - Defines the argument\n * @param {Query} query - Defines the query\n * @returns {FilterStateObj} Returns the filter state object\n * @hidden\n */\nexport function eventPromise(args, query) {\n var state = getStateEventArgument(query);\n var def = new Deferred();\n state.dataSource = def.resolve;\n state.action = args;\n return { state: state, deffered: def };\n}\n/**\n * @param {Query} query - Defines the query\n * @returns {Object} Returns the state event argument\n * @hidden\n */\nexport function getStateEventArgument(query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({ url: '', adaptor: new UrlAdaptor });\n var state = adaptr.processQuery(dm, query);\n var data = JSON.parse(state.data);\n return data;\n}\n/**\n * @param {IGrid} gObj - Defines the Igrid\n * @returns {boolean} Returns the ispercentageWidth\n * @hidden\n */\nexport function ispercentageWidth(gObj) {\n var columns = gObj.getVisibleColumns();\n var percentageCol = 0;\n var undefinedWidthCol = 0;\n for (var i = 0; i < columns.length; i++) {\n if (isUndefined(columns[parseInt(i.toString(), 10)].width)) {\n undefinedWidthCol++;\n }\n else if (columns[parseInt(i.toString(), 10)].width.toString().indexOf('%') !== -1) {\n percentageCol++;\n }\n }\n return (gObj.width === 'auto' || typeof (gObj.width) === 'string' && gObj.width.indexOf('%') !== -1) &&\n !gObj.groupSettings.showGroupedColumn && gObj.groupSettings.columns.length\n && percentageCol && !undefinedWidthCol;\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {Row[]} rows - Defines the row\n * @param {HTMLTableRowElement[]} rowElms - Row elements\n * @param {number} index - Row index\n * @param {number} startRowIndex - Start Row Index\n * @returns {void}\n * @hidden\n */\nexport function resetRowIndex(gObj, rows, rowElms, index, startRowIndex) {\n var startIndex = index ? index : 0;\n for (var i = startRowIndex ? startRowIndex : 0; i < rows.length; i++) {\n if (rows[parseInt(i.toString(), 10)] && rows[parseInt(i.toString(), 10)].isDataRow) {\n rows[parseInt(i.toString(), 10)].index = startIndex;\n rows[parseInt(i.toString(), 10)].isAltRow = gObj.enableAltRow ? startIndex % 2 !== 0 : false;\n rowElms[parseInt(i.toString(), 10)].setAttribute(literals.dataRowIndex, startIndex.toString());\n rowElms[parseInt(i.toString(), 10)].setAttribute(literals.ariaRowIndex, (startIndex + 1).toString());\n if (rows[parseInt(i.toString(), 10)].isAltRow) {\n rowElms[parseInt(i.toString(), 10)].classList.add('e-altrow');\n }\n else {\n rowElms[parseInt(i.toString(), 10)].classList.remove('e-altrow');\n }\n for (var j = 0; j < rowElms[parseInt(i.toString(), 10)].cells.length; j++) {\n rowElms[parseInt(i.toString(), 10)].cells[parseInt(j.toString(), 10)].setAttribute('index', startIndex.toString());\n }\n startIndex++;\n }\n }\n if (!rows.length) {\n gObj.renderModule.emptyRow(true);\n }\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @returns {void}\n * @hidden\n */\nexport function resetCachedRowIndex(gObj) {\n var rowObjects = gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache ?\n gObj.getRowsObject() : gObj.vRows;\n var rowElements = gObj.getRows();\n for (var i = 0, startIndex = 0, k = 0; i < rowObjects.length; i++) {\n var rowObject = rowObjects[parseInt(i.toString(), 10)];\n if (rowObject.isDataRow) {\n rowObject.index = startIndex;\n rowObject.isAltRow = gObj.enableAltRow ? startIndex % 2 !== 0 : false;\n var rowElement = gObj.getRowElementByUID(rowObject.uid);\n if (!isNullOrUndefined(rowElement)) {\n rowElements[parseInt(k.toString(), 10)] = rowElement;\n rowElement.setAttribute(literals.dataRowIndex, startIndex.toString());\n rowElement.setAttribute(literals.ariaRowIndex, (startIndex + 1).toString());\n if (rowObject.isAltRow) {\n rowElement.classList.add('e-altrow');\n }\n else {\n rowElement.classList.remove('e-altrow');\n }\n for (var j = 0; j < rowElement.cells.length; j++) {\n rowElement.cells[parseInt(j.toString(), 10)].setAttribute('index', startIndex.toString());\n }\n k++;\n }\n startIndex++;\n }\n }\n if (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache) {\n gObj.infiniteScrollModule.resetInfiniteCache(rowObjects);\n }\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {RowDropEventArgs} args - Defines the row drop event argument\n * @param {HTMLTableRowElement[]} tr - Row elements\n * @param {Row} dropRObj - dropped row object\n * @returns {void}\n * @hidden\n */\nexport function groupReorderRowObject(gObj, args, tr, dropRObj) {\n var rowObjects = gObj.enableVirtualization ? gObj.vRows : gObj.getRowsObject();\n var orderChangeRowObjects = [];\n var dropRowObject = dropRObj ? dropRObj :\n gObj.getRowObjectFromUID(args.target.closest('tr').getAttribute('data-uid'));\n var rowObjectDropIndex;\n for (var i = 0; i < args.rows.length; i++) {\n var orderChangeRowObject = gObj.getRowObjectFromUID(args.rows[parseInt(i.toString(), 10)].getAttribute('data-uid'));\n if (dropRowObject === orderChangeRowObject) {\n rowObjectDropIndex = rowObjects.indexOf(dropRowObject);\n }\n orderChangeRowObjects.push(rowObjects.splice(rowObjects.indexOf(orderChangeRowObject), 1)[0]);\n }\n if (isNullOrUndefined(rowObjectDropIndex)) {\n rowObjectDropIndex = rowObjects.indexOf(dropRowObject);\n if (args.fromIndex > args.dropIndex) {\n rowObjects.splice.apply(rowObjects, [rowObjectDropIndex, 0].concat(orderChangeRowObjects));\n }\n else {\n rowObjects.splice.apply(rowObjects, [rowObjectDropIndex + 1, 0].concat(orderChangeRowObjects));\n }\n }\n else {\n rowObjects.splice.apply(rowObjects, [rowObjectDropIndex, 0].concat(orderChangeRowObjects));\n }\n if (!gObj.enableVirtualization && !gObj.infiniteScrollSettings.enableCache) {\n var record = {};\n var currentViewData = gObj.getCurrentViewRecords();\n for (var i = 0, len = tr.length; i < len; i++) {\n var index = parseInt(tr[parseInt(i.toString(), 10)].getAttribute(literals.dataRowIndex), 10);\n record[parseInt(i.toString(), 10)] = currentViewData[parseInt(index.toString(), 10)];\n }\n var rows = gObj.getRows();\n for (var i = 0, len = tr.length; i < len; i++) {\n rows[parseInt(i.toString(), 10)] = tr[parseInt(i.toString(), 10)];\n currentViewData[parseInt(i.toString(), 10)] = record[parseInt(i.toString(), 10)];\n }\n }\n if (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache) {\n gObj.infiniteScrollModule.resetInfiniteCache(rowObjects);\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @param {Object} changes - Defines the changes\n * @param {string} type - Defines the type\n * @param {string} keyField - Defines the keyfield\n * @returns {void}\n * @hidden\n */\nexport function compareChanges(gObj, changes, type, keyField) {\n var newArray = gObj.dataToBeUpdated[\"\" + type].concat(changes[\"\" + type]).reduce(function (r, o) {\n r[o[\"\" + keyField]] = r[o[\"\" + keyField]] === undefined ? o : Object.assign(r[o[\"\" + keyField]], o);\n return r;\n }, {});\n gObj.dataToBeUpdated[\"\" + type] = Object.keys(newArray).map(function (k) { return newArray[\"\" + k]; });\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @returns {void}\n * @hidden\n */\nexport function setRowElements(gObj) {\n (gObj).contentModule.rowElements =\n [].slice.call(gObj.element.querySelectorAll('.e-row:not(.e-addedrow):not(.e-cloneproperties .e-row)'));\n}\n/**\n * @param {Element} row - Defines the row\n * @param {number} start - Defines the start index\n * @param {number} end - Defines the end index\n * @returns {void}\n * @hidden\n */\nexport function sliceElements(row, start, end) {\n var cells = row.children;\n var len = cells.length;\n var k = 0;\n for (var i = 0; i < len; i++, k++) {\n if (i >= start && i < end) {\n continue;\n }\n row.removeChild(row.children[parseInt(k.toString(), 10)]);\n k--;\n }\n}\n/**\n * @param {Column} column - Defines the column\n * @param {string} uid - Defines the uid\n * @returns {boolean} Returns is child column\n * @hidden\n */\nexport function isChildColumn(column, uid) {\n var uids = [];\n uids.push(column.uid);\n pushuid(column, uids);\n if (uids.indexOf(uid) > -1) {\n return true;\n }\n else {\n return false;\n }\n}\n/**\n * @param {Column} column - Defines the column\n * @param {string[]} uids - Defines the uid\n * @returns {void}\n * @hidden\n */\nexport function pushuid(column, uids) {\n for (var i = 0; i < column.columns.length; i++) {\n if (column.columns[parseInt(i.toString(), 10)].uid) {\n uids.push(column.columns[parseInt(i.toString(), 10)].uid);\n }\n if (column.columns[parseInt(i.toString(), 10)].columns &&\n column.columns[parseInt(i.toString(), 10)].columns.length) {\n pushuid(column.columns[parseInt(i.toString(), 10)], uids);\n }\n }\n}\n/**\n * @param {Column} column - Defines the column\n * @returns {string} Returns the direction\n * @hidden\n */\nexport function frozenDirection(column) {\n if (column.columns[0].freeze || column.columns[0].isFrozen) {\n if (column.columns[0].freeze === 'Left' || column.columns[0].isFrozen) {\n return 'Left';\n }\n else if (column.columns[0].freeze === 'Right') {\n return 'Right';\n }\n else if (column.columns[0].freeze === 'Fixed') {\n return 'Fixed';\n }\n else {\n return 'None';\n }\n }\n else {\n if (column.columns[0].columns && column.columns[0].columns.length) {\n return frozenDirection(column.columns[0]);\n }\n else {\n return 'None';\n }\n }\n}\n/**\n * @param {Element} row - Defines the row\n * @returns {void}\n * @hidden\n */\nexport function addFixedColumnBorder(row) {\n if (row.querySelector('.e-fixedfreeze')) {\n var cells = [].slice.call(row.querySelectorAll('.e-filterbarcell:not(.e-hide),.e-summarycell:not(.e-hide),.e-headercell:not(.e-hide),.e-rowcell:not(.e-hide)'));\n for (var j = 0; j < cells.length; j++) {\n if (cells[parseInt(j.toString(), 10)].classList.contains('e-fixedfreeze') && (!(cells[j - 1]) ||\n (cells[j - 1] && !cells[j - 1].classList.contains('e-fixedfreeze')))) {\n cells[parseInt(j.toString(), 10)].classList.add('e-freezeleftborder');\n }\n if (cells[parseInt(j.toString(), 10)].classList.contains('e-fixedfreeze') && (!(cells[j + 1]) ||\n (cells[j + 1] && !cells[j + 1].classList.contains('e-fixedfreeze')))) {\n cells[parseInt(j.toString(), 10)].classList.add('e-freezerightborder');\n }\n }\n }\n}\n/**\n * @param {HTMLElement} node - Defines the row\n * @param {number} width - Defines the width\n * @param {boolean} isRtl - Boolean property\n * @param {string} position - Defines the position\n * @returns {void}\n * @hidden\n */\nexport function applyStickyLeftRightPosition(node, width, isRtl, position) {\n if (position === 'Left') {\n if (isRtl) {\n node.style.right = width + 'px';\n }\n else {\n node.style.left = width + 'px';\n }\n }\n if (position === 'Right') {\n if (isRtl) {\n node.style.left = width + 'px';\n }\n else {\n node.style.right = width + 'px';\n }\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid\n * @param {Column} column - Defines the column\n * @param {Element} node - Defines the Element\n * @param {number} colSpan - Defines the colSpan value\n * @returns {void}\n * @hidden\n */\nexport function resetColandRowSpanStickyPosition(gObj, column, node, colSpan) {\n var columns = gObj.getColumns();\n var index = column.index;\n if (column.freeze === 'Left' && column.border !== 'Left') {\n var idx = index + (colSpan - 1);\n while (columns[parseInt(idx.toString(), 10)].visible === false) {\n idx++;\n }\n if (columns[parseInt(idx.toString(), 10)].border === 'Left') {\n node.classList.add('e-freezeleftborder');\n }\n }\n else if (column.freeze === 'Right' || column.freeze === 'Fixed') {\n var width = 0;\n for (var j = index + 1; j < index + colSpan; j++) {\n if (j === columns.length) {\n break;\n }\n if (columns[parseInt(j.toString(), 10)].visible) {\n width += parseInt(columns[parseInt(j.toString(), 10)].width.toString(), 10);\n }\n else {\n colSpan++;\n }\n }\n if (gObj.enableRtl) {\n node.style.left = parseInt(node.style.left, 10) - width + 'px';\n }\n else {\n node.style.right = parseInt(node.style.right, 10) - width + 'px';\n }\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid\n * @param {number} rowIndex - Defines the row index\n * @param {number} colIndex - Defines the colum index\n * @returns {void}\n * @hidden\n */\nexport function getCellFromRow(gObj, rowIndex, colIndex) {\n var row = (gObj.getRowByIndex(rowIndex));\n for (var i = 0; i < row.cells.length; i++) {\n if (row.cells[parseInt(i.toString(), 10)].getAttribute('data-colindex') === colIndex.toString()) {\n return row.cells[parseInt(i.toString(), 10)];\n }\n }\n return null;\n}\n/**\n * @param {IGrid} gObj - Defines the grid\n * @param {Column} column - Defines the column\n * @param {Element} node - Defines the Element\n * @returns {void}\n * @hidden\n */\nexport function addStickyColumnPosition(gObj, column, node) {\n if (column.freeze === 'Left' || column.isFrozen) {\n node.classList.add('e-leftfreeze');\n if (column.border === 'Left') {\n node.classList.add('e-freezeleftborder');\n }\n if (column.index === 0) {\n applyStickyLeftRightPosition(node, (gObj.getIndentCount() * 30), gObj.enableRtl, 'Left');\n if (gObj.enableColumnVirtualization) {\n column.valueX = (gObj.getIndentCount() * 30);\n }\n }\n else {\n var cols = gObj.getColumns();\n var width = gObj.getIndentCount() * 30;\n for (var i = 0; i < cols.length; i++) {\n if (column.uid === cols[parseInt(i.toString(), 10)].uid) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, gObj.enableRtl, 'Left');\n if (gObj.enableColumnVirtualization) {\n column.valueX = width;\n }\n }\n }\n else if (column.freeze === 'Right') {\n node.classList.add('e-rightfreeze');\n var cols = gObj.getColumns();\n if (column.border === 'Right') {\n node.classList.add('e-freezerightborder');\n }\n if (column.index === cols[cols.length - 1].index) {\n var width = gObj.getFrozenMode() === 'Right' && gObj.isRowDragable() ? 30 : 0;\n applyStickyLeftRightPosition(node, width, gObj.enableRtl, 'Right');\n if (gObj.enableColumnVirtualization) {\n column.valueX = width;\n }\n }\n else {\n var width = gObj.getFrozenMode() === 'Right' && gObj.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (column.uid === cols[parseInt(i.toString(), 10)].uid) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, gObj.enableRtl, 'Right');\n if (gObj.enableColumnVirtualization) {\n column.valueX = width;\n }\n }\n }\n else if (column.freeze === 'Fixed') {\n node.classList.add('e-fixedfreeze');\n var cols = gObj.getColumns();\n var width = 0;\n if (gObj.getVisibleFrozenLeftCount()) {\n width = gObj.getIndentCount() * 30;\n }\n else if (gObj.getFrozenMode() === 'Right') {\n width = gObj.groupSettings.columns.length * 30;\n }\n for (var i = 0; i < cols.length; i++) {\n if (column.uid === cols[parseInt(i.toString(), 10)].uid) {\n break;\n }\n if ((cols[parseInt(i.toString(), 10)].freeze === 'Left' || cols[parseInt(i.toString(), 10)].isFrozen) ||\n cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n applyStickyLeftRightPosition(node, (width - 1), gObj.enableRtl, 'Left');\n width = gObj.getFrozenMode() === 'Right' && gObj.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (column.uid === cols[parseInt(i.toString(), 10)].uid) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].freeze === 'Right' || cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n applyStickyLeftRightPosition(node, (width - 1), gObj.enableRtl, 'Right');\n }\n else {\n node.classList.add('e-unfreeze');\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid Object\n * @param {Column} col - Defines the column\n * @param {number} rowIndex - Defines the rowindex\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function getCellsByTableName(gObj, col, rowIndex) {\n return [].slice.call(gObj.getDataRows()[parseInt(rowIndex.toString(), 10)].getElementsByClassName(literals.rowCell));\n}\n/**\n * @param {IGrid} gObj - Defines the column\n * @param {Column} col - Defines the index\n * @param {number} rowIndex - Defines the rules\n * @param {number} index - Defines the movable column rules\n * @returns {Element} Returns the Element\n * @hidden\n */\nexport function getCellByColAndRowIndex(gObj, col, rowIndex, index) {\n return getCellsByTableName(gObj, col, rowIndex)[parseInt(index.toString(), 10)];\n}\n/**\n * @param {Column} col - Defines the column\n * @param {number} index - Defines the index\n * @param {Object} rules - Defines the rules\n * @param {Object} mRules - Defines the movable column rules\n * @param {Object} frRules - Defines the Frozen rules\n * @param {number} len - Defines the length\n * @param {boolean} isCustom - Defines custom form validation\n * @returns {void}\n * @hidden\n */\nexport function setValidationRuels(col, index, rules, mRules, frRules, len, isCustom) {\n if (isCustom) {\n rules[getComplexFieldID(col.field)] = col.validationRules;\n }\n else {\n if (col.getFreezeTableName() === literals.frozenLeft\n || (!index && col.getFreezeTableName() === literals.frozenRight) || len === 1) {\n rules[getComplexFieldID(col.field)] = col.validationRules;\n }\n else if (col.getFreezeTableName() === 'movable' || !col.getFreezeTableName()) {\n mRules[getComplexFieldID(col.field)] = col.validationRules;\n }\n else if (col.getFreezeTableName() === literals.frozenRight) {\n frRules[getComplexFieldID(col.field)] = col.validationRules;\n }\n }\n}\n/**\n * @param {string} numberFormat - Format\n * @param {string} type - Value type\n * @param {boolean} isExcel - Boolean property\n * @param {string} currencyCode - Specifies the currency code to be used for formatting.\n * @returns {string} returns formated value\n * @hidden\n */\nexport function getNumberFormat(numberFormat, type, isExcel, currencyCode) {\n var format;\n var intl = new Internationalization();\n if (type === 'number') {\n try {\n format = intl.getNumberPattern({ format: numberFormat, currency: currencyCode, useGrouping: true }, true);\n }\n catch (error) {\n format = numberFormat;\n }\n }\n else if (type === 'date' || type === 'time' || type === 'datetime') {\n try {\n format = intl.getDatePattern({ skeleton: numberFormat, type: type }, isExcel);\n if (isNullOrUndefined(format)) {\n // eslint-disable-next-line\n throw 'error';\n }\n }\n catch (error) {\n try {\n format = intl.getDatePattern({ format: numberFormat, type: type }, isExcel);\n }\n catch (error) {\n format = numberFormat;\n }\n }\n }\n else {\n format = numberFormat;\n }\n if (type !== 'number') {\n var patternRegex = /G|H|c|'| a|yy|y|EEEE|E/g;\n var mtch_1 = { 'G': '', 'H': 'h', 'c': 'd', '\\'': '\"', ' a': ' AM/PM', 'yy': 'yy', 'y': 'yyyy', 'EEEE': 'dddd', 'E': 'ddd' };\n format = format.replace(patternRegex, function (pattern) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return mtch_1[\"\" + pattern];\n });\n }\n return format;\n}\n/**\n * @param {IGrid} gObj - Grid instance\n * @returns {void}\n * @hidden\n */\nexport function addBiggerDialog(gObj) {\n if (gObj.enableAdaptiveUI) {\n var dialogs = document.getElementsByClassName('e-responsive-dialog');\n for (var i = 0; i < dialogs.length; i++) {\n dialogs[parseInt(i.toString(), 10)].classList.add('e-bigger');\n }\n }\n}\n/**\n * @param {string} value - specifies the trr\n * @param {Object} mapObject - specifies the idx\n * @returns {Object | string} returns object or string\n * @hidden\n */\nexport function performComplexDataOperation(value, mapObject) {\n var returnObj;\n var length = value.split('.').length;\n var splits = value.split('.');\n var duplicateMap = mapObject;\n for (var i = 0; i < length; i++) {\n returnObj = duplicateMap[splits[parseInt(i.toString(), 10)]];\n duplicateMap = returnObj;\n }\n return returnObj;\n}\n/**\n * @param {Object} tr - specifies the trr\n * @param {number} idx - specifies the idx\n * @param {string} displayVal - specifies the displayval\n * @param {Row} rows - specifies the rows\n * @param {IGrid} parent - Grid instance\n * @param {boolean} isContent - check for content renderer\n * @returns {void}\n * @hidden\n */\nexport function setDisplayValue(tr, idx, displayVal, rows, parent, isContent) {\n var trs = Object.keys(tr);\n var actualIndex = idx;\n for (var i = 0; i < trs.length; i++) {\n var td = tr[trs[parseInt(i.toString(), 10)]].querySelectorAll('td.e-rowcell')[parseInt(idx.toString(), 10)];\n if (parent && !parent.isFrozenGrid() && !parent.isRowDragable()) {\n td = (!isNullOrUndefined(td) && (parseInt(td.getAttribute('data-colindex'), 10) === idx ||\n (parentsUntil(td, 'e-addedrow') && td.parentElement.childNodes[parseInt(idx.toString(), 10)] === td)))\n ? td : tr[parseInt(i.toString(), 10)].querySelector(\"td[data-colindex=\\\"\" + idx + \"\\\"]\");\n if (isNullOrUndefined(td)) {\n continue;\n }\n else {\n idx = (parent.getContentTable().querySelector('.e-detailrowcollapse, .e-detailrowexpand')) ?\n (td.cellIndex - 1) : td.cellIndex;\n }\n }\n if (tr[trs[parseInt(i.toString(), 10)]].querySelectorAll('td.e-rowcell').length && td) {\n setStyleAttribute(tr[trs[parseInt(i.toString(), 10)]].querySelectorAll('td.e-rowcell')[parseInt(idx.toString(), 10)], { 'display': displayVal });\n if (tr[trs[parseInt(i.toString(), 10)]].querySelectorAll('td.e-rowcell')[parseInt(idx.toString(), 10)].classList.contains('e-hide')) {\n removeClass([tr[trs[parseInt(i.toString(), 10)]].querySelectorAll('td.e-rowcell')[parseInt(idx.toString(), 10)]], ['e-hide']);\n }\n if ((isContent && parent.isRowDragable()) || (parent && parent.isDetail())) {\n var index = idx + 1;\n rows[trs[parseInt(i.toString(), 10)]].cells[parseInt(index.toString(), 10)].visible = displayVal === '' ? true : false;\n }\n else {\n if (!isNullOrUndefined(rows[trs[parseInt(i.toString(), 10)]])) {\n rows[trs[parseInt(i.toString(), 10)]].cells[parseInt(idx.toString(), 10)].visible = displayVal === '' ? true : false;\n if (rows[trs[parseInt(i.toString(), 10)]].cells[parseInt(idx.toString(), 10)].visible === false) {\n tr[trs[parseInt(i.toString(), 10)]].querySelectorAll('td.e-rowcell')[parseInt(idx.toString(), 10)].classList.add('e-hide');\n }\n }\n }\n idx = actualIndex;\n }\n }\n}\n// eslint-disable-next-line\n/** @hidden */\nexport function addRemoveEventListener(parent, evt, isOn, module) {\n for (var _i = 0, evt_1 = evt; _i < evt_1.length; _i++) {\n var inst = evt_1[_i];\n if (isOn) {\n parent.on(inst.event, inst.handler, module);\n }\n else {\n parent.off(inst.event, inst.handler);\n }\n }\n}\n// eslint-disable-next-line\n/** @hidden */\nexport function createEditElement(parent, column, classNames, attr) {\n var complexFieldName = getComplexFieldID(column.field);\n attr = Object.assign(attr, {\n id: parent.element.id + complexFieldName,\n name: complexFieldName, 'e-mappinguid': column.uid\n });\n return parent.createElement('input', {\n className: classNames, attrs: attr\n });\n}\n/**\n * @param {IGrid} gObj - Grid instance\n * @param {string} uid - Defines column's uid\n * @returns {Column} returns column model\n * @hidden\n */\nexport function getColumnModelByUid(gObj, uid) {\n var column;\n for (var _i = 0, _a = (gObj.columnModel); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.uid === uid) {\n column = col;\n break;\n }\n }\n return column;\n}\n/**\n * @param {IGrid} gObj - Grid instance\n * @param {string} field - Defines column's uid\n * @returns {Column} returns column model\n * @hidden\n */\nexport function getColumnModelByFieldName(gObj, field) {\n var column;\n if (!gObj.columnModel) {\n gObj.getColumns();\n }\n for (var _i = 0, _a = (gObj.columnModel); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.field === field) {\n column = col;\n break;\n }\n }\n return column;\n}\n/**\n * @param {string} id - Defines component id\n * @param {string[]} evts - Defines events\n * @param {object} handlers - Defines event handlers\n * @param {any} instance - Defines class instance\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function registerEventHandlers(id, evts, handlers, instance) {\n instance.eventHandlers[\"\" + id] = {};\n for (var i = 0; i < evts.length; i++) {\n instance.eventHandlers[\"\" + id][evts[parseInt(i.toString(), 10)]] = handlers[evts[parseInt(i.toString(), 10)]];\n }\n}\n/**\n * @param {any} component - Defines component instance\n * @param {string[]} evts - Defines events\n * @param {any} instance - Defines class instance\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function removeEventHandlers(component, evts, instance) {\n for (var i = 0; i < evts.length; i++) {\n if (component.isDestroyed) {\n break;\n }\n component.removeEventListener(evts[parseInt(i.toString(), 10)], instance.eventHandlers[component.element.id][evts[parseInt(i.toString(), 10)]]);\n }\n}\n/**\n * @param {IGrid | IXLFilter} parent - Defines parent instance\n * @param {string[]} templates - Defines the templates name which are needs to clear\n * @returns {void}\n * @hidden\n */\nexport function clearReactVueTemplates(parent, templates) {\n parent.destroyTemplate(templates);\n if (parent.isReact) {\n parent.renderTemplates();\n }\n}\n/**\n *\n * @param { Element } row - Defines row element\n * @returns { number } row index\n */\nexport function getRowIndexFromElement(row) {\n return parseInt(row.getAttribute(literals.dataRowIndex), 10);\n}\n/**\n *\n * @param { string[] } fields - Defines grouped fields\n * @param { values } values - Defines caption keys\n * @param { any } instance - Defines dynamic class instance\n * @returns { Predicate } returns filter predicate\n */\n// eslint-disable-next-line\nexport function generateExpandPredicates(fields, values, instance) {\n var filterCols = [];\n for (var i = 0; i < fields.length; i++) {\n var column = instance.parent.getColumnByField(fields[parseInt(i.toString(), 10)]);\n var value = values[parseInt(i.toString(), 10)] === 'null' ? null : values[parseInt(i.toString(), 10)];\n var pred = {\n field: fields[parseInt(i.toString(), 10)], predicate: 'or', uid: column.uid, operator: 'equal', type: column.type,\n matchCase: instance.allowCaseSensitive, ignoreAccent: instance.parent.filterSettings.ignoreAccent\n };\n if (value === '' || isNullOrUndefined(value)) {\n filterCols = filterCols.concat(CheckBoxFilterBase.generateNullValuePredicates(pred));\n }\n else {\n filterCols.push(extend({}, { value: value }, pred));\n }\n }\n return CheckBoxFilterBase.getPredicate(filterCols);\n}\n/**\n *\n * @param { Predicate } pred - Defines filter predicate\n * @returns { Predicate[] } Returns formed predicate\n */\nexport function getPredicates(pred) {\n var predicateList = [];\n for (var _i = 0, _a = Object.keys(pred); _i < _a.length; _i++) {\n var prop = _a[_i];\n predicateList.push(pred[\"\" + prop]);\n }\n return predicateList;\n}\n/**\n *\n * @param { number } index - Defines group caption indent\n * @param { Row[] } rowsObject - Defines rows object\n * @returns { { fields: string[], keys: string[] } } Returns grouped keys and values\n */\nexport function getGroupKeysAndFields(index, rowsObject) {\n var fields = [];\n var keys = [];\n for (var i = index; i >= 0; i--) {\n if (rowsObject[parseInt(i.toString(), 10)].isCaptionRow\n && fields.indexOf(rowsObject[parseInt(i.toString(), 10)].data.field) === -1\n && (rowsObject[parseInt(i.toString(), 10)].indent < rowsObject[parseInt(index.toString(), 10)].indent || i === index)) {\n fields.push(rowsObject[parseInt(i.toString(), 10)].data.field);\n keys.push(rowsObject[parseInt(i.toString(), 10)].data.key);\n if (rowsObject[parseInt(i.toString(), 10)].indent === 0) {\n break;\n }\n }\n }\n return { fields: fields, keys: keys };\n}\n// eslint-disable-next-line\n/**\n *\n * @param { number[][] } checkActiveMatrix - Defines matrix to check\n * @param { number[] } checkCellIndex - Defines index to check\n * @param { boolean } next - Defines select next or previous index\n * @returns { number[] } - Returns next active current index\n */\nexport function findCellIndex(checkActiveMatrix, checkCellIndex, next) {\n var activeMatrix = checkActiveMatrix;\n var cellIndex = checkCellIndex;\n var currentCellIndexPass = false;\n if (next) {\n for (var i = cellIndex[0]; i < activeMatrix.length; i++) {\n var rowCell = activeMatrix[parseInt(i.toString(), 10)];\n for (var j = 0; j < rowCell.length; j++) {\n if (currentCellIndexPass && activeMatrix[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)] === 1) {\n cellIndex = [i, j];\n return cellIndex;\n }\n if (!currentCellIndexPass && cellIndex.toString() === [i, j].toString()) {\n currentCellIndexPass = true;\n }\n }\n }\n }\n else {\n for (var i = cellIndex[0]; i >= 0; i--) {\n var rowCell = activeMatrix[parseInt(i.toString(), 10)];\n for (var j = rowCell.length - 1; j >= 0; j--) {\n if (currentCellIndexPass && activeMatrix[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)] === 1) {\n cellIndex = [i, j];\n return cellIndex;\n }\n if (!currentCellIndexPass && cellIndex.toString() === [i, j].toString()) {\n currentCellIndexPass = true;\n }\n }\n }\n }\n return cellIndex;\n}\n/**\n *\n * @param { string } string - Defines string need to capitalized first letter\n * @returns { string } - Returns capitalized first letter string\n */\nexport function capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n","import { remove, extend, getValue } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, addClass } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { uiUpdate, initialEnd, dataReady, modelChanged, refreshAggregates, refreshFooterRenderer, groupAggregates, destroy } from '../base/constant';\nimport { FooterRenderer } from '../renderer/footer-renderer';\nimport { SummaryCellRenderer } from '../renderer/summary-cell-renderer';\nimport { GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';\nimport * as literals from '../base/string-literals';\n/**\n * Summary Action controller.\n */\nvar Aggregate = /** @class */ (function () {\n function Aggregate(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.addEventListener();\n }\n Aggregate.prototype.getModuleName = function () {\n return 'aggregate';\n };\n Aggregate.prototype.initiateRender = function () {\n var _this = this;\n var cellFac = this.locator.getService('cellRendererFactory');\n var instance = new SummaryCellRenderer(this.parent, this.locator);\n var type = [CellType.Summary, CellType.CaptionSummary, CellType.GroupSummary];\n for (var i = 0; i < type.length; i++) {\n cellFac.addCellRenderer(type[parseInt(i.toString(), 10)], instance);\n }\n this.footerRenderer = new FooterRenderer(this.parent, this.locator);\n this.footerRenderer.renderPanel();\n this.footerRenderer.renderTable();\n var footerContent = this.footerRenderer.getPanel();\n if (this.parent.element.scrollHeight >= this.parent.getHeight(this.parent.height)\n && footerContent) {\n addClass([footerContent], ['e-footerpadding']);\n }\n this.locator.register('footerRenderer', this.footerRenderer);\n var fn = function () {\n _this.prepareSummaryInfo();\n _this.parent.off(dataReady, fn);\n };\n this.parent.on(dataReady, fn, this);\n this.parent.on(dataReady, this.footerRenderer.refresh, this.footerRenderer);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Aggregate.prototype.prepareSummaryInfo = function () {\n var _this = this;\n summaryIterator(this.parent.aggregates, function (column) {\n var cFormat = getValue('customFormat', column);\n if (!isNullOrUndefined(cFormat)) {\n column.setPropertiesSilent({ format: cFormat });\n }\n if (typeof (column.format) === 'object') {\n var valueFormatter = new ValueFormatter();\n column.setFormatter(valueFormatter.getFormatFunction(extend({}, column.format)));\n }\n else if (typeof (column.format) === 'string') {\n var fmtr = _this.locator.getService('valueFormatter');\n column.setFormatter(fmtr.getFormatFunction({ format: column.format }));\n }\n column.setPropertiesSilent({ columnName: column.columnName || column.field });\n });\n };\n Aggregate.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (isNullOrUndefined(this.footerRenderer)) {\n this.initiateRender();\n }\n this.prepareSummaryInfo();\n this.footerRenderer.refresh();\n var cModel = new CaptionSummaryModelGenerator(this.parent);\n var gModel = new GroupSummaryModelGenerator(this.parent);\n if (gModel.getData().length !== 0 || !cModel.isEmpty()) {\n this.parent.notify(modelChanged, {});\n }\n };\n Aggregate.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(initialEnd, this.initiateRender, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n this.parent.on(refreshAggregates, this.refresh, this);\n this.parent.on(destroy, this.destroy, this);\n };\n Aggregate.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.footerRenderer.removeEventListener();\n this.parent.off(initialEnd, this.initiateRender);\n this.parent.off(dataReady, this.footerRenderer.refresh);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n this.parent.off(refreshAggregates, this.refresh);\n this.parent.off(destroy, this.destroy);\n if (this.parent.element.querySelector('.' + literals.gridFooter)) {\n remove(this.parent.element.querySelector('.' + literals.gridFooter));\n }\n };\n Aggregate.prototype.destroy = function () {\n this.removeEventListener();\n };\n Aggregate.prototype.refresh = function (data, element) {\n var editedData = data instanceof Array ? data : [data];\n this.parent.notify(refreshFooterRenderer, editedData);\n if (element) {\n editedData.row = element;\n }\n if (this.parent.groupSettings.columns.length > 0) {\n this.parent.notify(groupAggregates, editedData);\n }\n };\n return Aggregate;\n}());\nexport { Aggregate };\n/**\n * @param {AggregateRowModel[]} aggregates - specifies the AggregateRowModel\n * @param {Function} callback - specifies the Function\n * @returns {void}\n * @private\n */\nexport function summaryIterator(aggregates, callback) {\n for (var i = 0; i < aggregates.length; i++) {\n for (var j = 0; j < aggregates[parseInt(i.toString(), 10)].columns.length; j++) {\n callback(aggregates[parseInt(i.toString(), 10)].columns[parseInt(j.toString(), 10)], aggregates[parseInt(i.toString(), 10)]);\n }\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { extend } from '@syncfusion/ej2-base';\nimport { DatePicker, DateTimePicker, MaskedDateTime } from '@syncfusion/ej2-calendars';\nimport { isEditable, getObject, getCustomDateFormat } from '../base/util';\nimport { EditCellBase } from './edit-cell-base';\nDatePicker.Inject(MaskedDateTime);\n/**\n * `DatePickerEditCell` is used to handle datepicker cell type editing.\n *\n * @hidden\n */\nvar DatePickerEditCell = /** @class */ (function (_super) {\n __extends(DatePickerEditCell, _super);\n function DatePickerEditCell() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DatePickerEditCell.prototype.write = function (args) {\n this.edit = this.parent.editModule;\n if (args.column.editType === 'datepickeredit') {\n this.obj = new DatePicker(extend(dateanddatetimerender(args, this.parent.editSettings.mode, this.parent.enableRtl, this.parent.cssClass, this), args.column.edit.params));\n }\n else if (args.column.editType === 'datetimepickeredit') {\n this.obj = new DateTimePicker(extend(dateanddatetimerender(args, this.parent.editSettings.mode, this.parent.enableRtl, this.parent.cssClass, this), args.column.edit.params));\n }\n this.obj.appendTo(args.element);\n };\n return DatePickerEditCell;\n}(EditCellBase));\nexport { DatePickerEditCell };\n// eslint-disable-next-line\nfunction dateanddatetimerender(args, mode, rtl, css, datePickerEditCell) {\n var isInline = mode !== 'Dialog';\n var format = getCustomDateFormat(args.column.format, args.column.type);\n var value = getObject(args.column.field, args.rowData);\n value = value ? new Date(value) : null;\n return {\n floatLabelType: isInline ? 'Never' : 'Always',\n value: value,\n format: format,\n placeholder: isInline ?\n '' : args.column.headerText, enableRtl: rtl,\n enabled: isEditable(args.column, args.requestType, args.element),\n cssClass: css ? css : null,\n close: datePickerClose.bind(datePickerEditCell)\n };\n}\n// eslint-disable-next-line\nfunction datePickerClose(args) {\n if (args.event && args.event.action === 'escape') {\n this.edit.editCellDialogClose = true;\n }\n}\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n *\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format))) {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { merge, isNullOrUndefined, extend, Property } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData, getObject } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options, parent) {\n var _this = this;\n /**\n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n *\n * @default true\n */\n this.disableHtmlEncode = true;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n *\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n *\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n *\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n *\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n *\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n *\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n *\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n *\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](../../grid/filtering/filter-menu/#custom-component-in-filter-menu) for its customization.\n *\n * @default {}\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n *\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n *\n * @default {}\n */\n this.edit = {};\n /**\n * If `allowSearching` set to false, then it disables Searching of a particular column.\n * By default all columns allow Searching.\n *\n * @default true\n */\n this.allowSearching = true;\n /**\n * If `autoFit` set to true, then the particular column content width will be\n * adjusted based on its content in the initial rendering itself.\n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n *\n * @default false\n */\n this.autoFit = false;\n this.sortDirection = 'Descending';\n /**\n * @returns {Function} returns the edit template\n * @hidden */\n this.getEditTemplate = function () { return _this.editTemplateFn; };\n /**\n * @returns {Function} returns the filter template\n * @hidden */\n this.getFilterTemplate = function () { return _this.filterTemplateFn; };\n merge(this, options);\n this.parent = parent;\n if (this.type === 'none') {\n this.type = null;\n }\n else if (this.type) {\n this.type = typeof (this.type) === 'string' ? this.type.toLowerCase() : undefined;\n }\n if (this.editType) {\n this.editType = this.editType.toLowerCase();\n }\n if (isNullOrUndefined(this.uid)) {\n this.uid = getUid('grid-column');\n }\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || (options.format.format &&\n typeof options.format.format === 'string'))) {\n this.setFormatter(valueFormatter.getFormatFunction(extend({}, options.format)));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n this.toJSON = function () {\n var col = {};\n var skip = ['filter', 'dataSource', 'headerText', 'template', 'headerTemplate', 'edit',\n 'editTemplate', 'filterTemplate', 'commandsTemplate', 'parent'];\n var keys = Object.keys(_this);\n for (var i = 0; i < keys.length; i++) {\n if (keys[parseInt(i.toString(), 10)] === 'columns') {\n col[keys[parseInt(i.toString(), 10)]] = [];\n for (var j = 0; j < _this[keys[parseInt(i.toString(), 10)]].length; j++) {\n col[keys[parseInt(i.toString(), 10)]].push(_this[keys[parseInt(i.toString(), 10)]][parseInt(j.toString(), 10)].toJSON());\n }\n }\n else if (skip.indexOf(keys[parseInt(i.toString(), 10)]) < 0) {\n col[keys[parseInt(i.toString(), 10)]] = _this[keys[parseInt(i.toString(), 10)]];\n }\n }\n return col;\n };\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n if (this.columns) {\n this.allowResizing = this.columns.some(function (col) {\n return col.allowResizing;\n });\n }\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (!isNullOrUndefined(this.filter) && this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.editTemplate) {\n this.editTemplateFn = templateCompiler(this.editTemplate);\n }\n if (this.filterTemplate) {\n this.filterTemplateFn = templateCompiler(this.filterTemplate);\n }\n if (this.isForeignColumn() &&\n (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit' || this.editType === 'defaultedit')) {\n this.editType = 'dropdownedit';\n if (this.edit.params && this.edit.params.dataSource) {\n this.edit.params.ddEditedData = true;\n }\n this.edit.params = extend({\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n }, this.edit.params);\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function (x, y, xObj, yObj) {\n if (typeof a_1 === 'string') {\n a_1 = getObject(a_1, window);\n }\n if (_this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n var obj = xObj;\n xObj = yObj;\n yObj = obj;\n }\n return a_1(x, y, xObj, yObj);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getObject(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getObject(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /**\n * @returns {string} returns the sort direction\n * @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /**\n * @param {string} direction - specifies the direction\n * @returns {void}\n * @hidden\n */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /**\n * @returns {freezeTable} returns the FreezeTable\n * @hidden */\n Column.prototype.getFreezeTableName = function () {\n return this.freezeTable;\n };\n /**\n * @param {Column} column - specifies the column\n * @returns {void}\n * @hidden\n */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n var _loop_1 = function (i) {\n if (keys[parseInt(i.toString(), 10)] === 'columns') {\n var cols_1 = column[keys[parseInt(i.toString(), 10)]];\n var _loop_2 = function (j) {\n this_1.columns.find(function (col) {\n return col.field === cols_1[parseInt(j.toString(), 10)]\n .field;\n }).setProperties(cols_1[parseInt(j.toString(), 10)]);\n };\n for (var j = 0; j < cols_1.length; j++) {\n _loop_2(j);\n }\n }\n else {\n this_1[keys[parseInt(i.toString(), 10)]] = column[keys[parseInt(i.toString(), 10)]];\n }\n //Refresh the react columnTemplates on state change\n if (this_1.parent && this_1.parent.isReact) {\n if (keys[parseInt(i.toString(), 10)] === 'template') {\n this_1.templateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n this_1.parent.refreshReactColumnTemplateByUid(this_1.uid, true);\n }\n else if (keys[parseInt(i.toString(), 10)] === 'headerTemplate') {\n this_1.headerTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n this_1.parent.refreshReactHeaderTemplateByUid(this_1.uid);\n }\n else if (keys[parseInt(i.toString(), 10)] === 'editTemplate') {\n this_1.editTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n }\n }\n };\n var this_1 = this;\n for (var i = 0; i < keys.length; i++) {\n _loop_1(i);\n }\n };\n /**\n * @returns {boolean} returns true for foreign column\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /**\n * @returns {Function} returns the function\n * @hidden\n */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /**\n * @returns {string} returns the string\n * @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n/**\n * Define options for custom command buttons.\n */\nvar CommandColumnModel = /** @class */ (function () {\n function CommandColumnModel() {\n }\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"title\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"buttonOption\", void 0);\n return CommandColumnModel;\n}());\nexport { CommandColumnModel };\n/**\n * Defines Grid column\n */\nvar GridColumn = /** @class */ (function (_super) {\n __extends(GridColumn, _super);\n function GridColumn() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], GridColumn.prototype, \"columns\", void 0);\n return GridColumn;\n}(Column));\nexport { GridColumn };\n/**\n * Defines stacked grid column\n */\nvar StackedColumn = /** @class */ (function (_super) {\n __extends(StackedColumn, _super);\n function StackedColumn() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return StackedColumn;\n}(GridColumn));\nexport { StackedColumn };\n","/** @hidden */\nexport var created = 'create';\n/** @hidden */\nexport var destroyed = 'destroy';\n/** @hidden */\nexport var load = 'load';\n/** @hidden */\nexport var rowDataBound = 'rowDataBound';\n/** @hidden */\nexport var queryCellInfo = 'queryCellInfo';\n/** @hidden */\nexport var headerCellInfo = 'headerCellInfo';\n/** @hidden */\nexport var actionBegin = 'actionBegin';\n/** @hidden */\nexport var actionComplete = 'actionComplete';\n/** @hidden */\nexport var actionFailure = 'actionFailure';\n/** @hidden */\nexport var dataBound = 'dataBound';\n/** @hidden */\nexport var rowSelecting = 'rowSelecting';\n/** @hidden */\nexport var rowSelected = 'rowSelected';\n/** @hidden */\nexport var rowDeselecting = 'rowDeselecting';\n/** @hidden */\nexport var rowDeselected = 'rowDeselected';\n/** @hidden */\nexport var cellSelecting = 'cellSelecting';\n/** @hidden */\nexport var cellSelected = 'cellSelected';\n/** @hidden */\nexport var cellDeselecting = 'cellDeselecting';\n/** @hidden */\nexport var cellDeselected = 'cellDeselected';\n/** @hidden */\nexport var columnSelecting = 'columnSelecting';\n/** @hidden */\nexport var columnSelected = 'columnSelected';\n/** @hidden */\nexport var columnDeselecting = 'columnDeselecting';\n/** @hidden */\nexport var columnDeselected = 'columnDeselected';\n/** @hidden */\nexport var columnDragStart = 'columnDragStart';\n/** @hidden */\nexport var columnDrag = 'columnDrag';\n/** @hidden */\nexport var columnDrop = 'columnDrop';\n/** @hidden */\nexport var rowDragStartHelper = 'rowDragStartHelper';\n/** @hidden */\nexport var rowDragStart = 'rowDragStart';\n/** @hidden */\nexport var rowDrag = 'rowDrag';\n/** @hidden */\nexport var rowDrop = 'rowDrop';\n/** @hidden */\nexport var beforePrint = 'beforePrint';\n/** @hidden */\nexport var printComplete = 'printComplete';\n/** @hidden */\nexport var detailDataBound = 'detailDataBound';\n/** @hidden */\nexport var toolbarClick = 'toolbarClick';\n/** @hidden */\nexport var batchAdd = 'batchAdd';\n/** @hidden */\nexport var batchCancel = 'batchCancel';\n/** @hidden */\nexport var batchDelete = 'batchDelete';\n/** @hidden */\nexport var beforeBatchAdd = 'beforeBatchAdd';\n/** @hidden */\nexport var beforeBatchDelete = 'beforeBatchDelete';\n/** @hidden */\nexport var beforeBatchSave = 'beforeBatchSave';\n/** @hidden */\nexport var beginEdit = 'beginEdit';\n/** @hidden */\nexport var cellEdit = 'cellEdit';\n/** @hidden */\nexport var cellSave = 'cellSave';\n/** @hidden */\nexport var cellSaved = 'cellSaved';\n/** @hidden */\nexport var endAdd = 'endAdd';\n/** @hidden */\nexport var endDelete = 'endDelete';\n/** @hidden */\nexport var endEdit = 'endEdit';\n/** @hidden */\nexport var recordDoubleClick = 'recordDoubleClick';\n/** @hidden */\nexport var recordClick = 'recordClick';\n/** @hidden */\nexport var beforeDataBound = 'beforeDataBound';\n/** @hidden */\nexport var beforeOpenColumnChooser = 'beforeOpenColumnChooser';\n/** @hidden */\nexport var beforeOpenAdaptiveDialog = 'beforeOpenAdaptiveDialog';\n/** @hidden */\nexport var resizeStart = 'resizeStart';\n/** @hidden */\nexport var onResize = 'resizing';\n/** @hidden */\nexport var resizeStop = 'resizeStop';\n/** @hidden */\nexport var checkBoxChange = 'checkBoxChange';\n/** @hidden */\nexport var beforeCopy = 'beforeCopy';\n/** @hidden */\nexport var beforePaste = 'beforePaste';\n/** @hidden */\nexport var beforeAutoFill = 'beforeAutoFill';\n/** @hidden */\nexport var filterChoiceRequest = 'filterchoicerequest';\n/** @hidden */\nexport var filterAfterOpen = 'filterAfterOpen';\n/** @hidden */\nexport var filterBeforeOpen = 'filterBeforeOpen';\n/** @hidden */\nexport var filterSearchBegin = 'filterSearchBegin';\n/** @hidden */\nexport var commandClick = 'commandClick';\n/** @hidden */\nexport var exportGroupCaption = 'exportGroupCaption';\n/** @hidden */\nexport var lazyLoadGroupExpand = 'lazyLoadGroupExpand';\n/** @hidden */\nexport var lazyLoadGroupCollapse = 'lazyLoadGroupCollapse';\n/**\n * Specifies grid internal events\n */\n/** @hidden */\nexport var initialLoad = 'initial-load';\n/** @hidden */\nexport var initialEnd = 'initial-end';\n/** @hidden */\nexport var dataReady = 'data-ready';\n/** @hidden */\nexport var contentReady = 'content-ready';\n/** @hidden */\nexport var uiUpdate = 'ui-update';\n/** @hidden */\nexport var onEmpty = 'on-empty';\n/** @hidden */\nexport var inBoundModelChanged = 'inbound-model-changed';\n/** @hidden */\nexport var modelChanged = 'model-changed';\n/** @hidden */\nexport var colGroupRefresh = 'colgroup-refresh';\n/** @hidden */\nexport var headerRefreshed = 'header-refreshed';\n/** @hidden */\nexport var pageBegin = 'paging-begin';\n/** @hidden */\nexport var pageComplete = 'paging-complete';\n/** @hidden */\nexport var sortBegin = 'sorting-begin';\n/** @hidden */\nexport var sortComplete = 'sorting-complete';\n/** @hidden */\nexport var filterBegin = 'filtering-begin';\n/** @hidden */\nexport var filterComplete = 'filtering-complete';\n/** @hidden */\nexport var searchBegin = 'searching-begin';\n/** @hidden */\nexport var searchComplete = 'searching-complete';\n/** @hidden */\nexport var reorderBegin = 'reorder-begin';\n/** @hidden */\nexport var reorderComplete = 'reorder-complete';\n/** @hidden */\nexport var rowDragAndDropBegin = 'rowdraganddrop-begin';\n/** @hidden */\nexport var rowDragAndDropComplete = 'rowdraganddrop-complete';\n/** @hidden */\nexport var groupBegin = 'grouping-begin';\n/** @hidden */\nexport var groupComplete = 'grouping-complete';\n/** @hidden */\nexport var ungroupBegin = 'ungrouping-begin';\n/** @hidden */\nexport var ungroupComplete = 'ungrouping-complete';\n/** @hidden */\nexport var groupAggregates = 'group-aggregates';\n/** @hidden */\nexport var refreshFooterRenderer = 'refresh-footer-rendered';\n/** @hidden */\nexport var refreshAggregateCell = 'refresh-aggregate-cell';\n/** @hidden */\nexport var refreshAggregates = 'refresh-aggregates';\n/** @hidden */\nexport var rowSelectionBegin = 'rowselecting';\n/** @hidden */\nexport var rowSelectionComplete = 'rowselected';\n/** @hidden */\nexport var columnSelectionBegin = 'columnselecting';\n/** @hidden */\nexport var columnSelectionComplete = 'columnselected';\n/** @hidden */\nexport var cellSelectionBegin = 'cellselecting';\n/** @hidden */\nexport var cellSelectionComplete = 'cellselected';\n/** @hidden */\nexport var destroyAutoFillElements = 'destroy-autofill-elements';\n/** @hidden */\nexport var beforeCellFocused = 'beforecellfocused';\n/** @hidden */\nexport var cellFocused = 'cellfocused';\n/** @hidden */\nexport var keyPressed = 'key-pressed';\n/** @hidden */\nexport var click = 'click';\n/** @hidden */\nexport var destroy = 'destroy';\n/** @hidden */\nexport var columnVisibilityChanged = 'column-visible-changed';\n/** @hidden */\nexport var scroll = 'scroll';\n/** @hidden */\nexport var columnWidthChanged = 'column-width-changed';\n/** @hidden */\nexport var columnPositionChanged = 'column-position-changed';\n/** @hidden */\nexport var rowDragAndDrop = 'row-drag-and-drop';\n/** @hidden */\nexport var rowsAdded = 'rows-added';\n/** @hidden */\nexport var rowsRemoved = 'rows-removed';\n/** @hidden */\nexport var columnDragStop = 'column-drag-stop';\n/** @hidden */\nexport var headerDrop = 'header-drop';\n/** @hidden */\nexport var dataSourceModified = 'datasource-modified';\n/** @hidden */\nexport var refreshComplete = 'refresh-complete';\n/** @hidden */\nexport var refreshVirtualBlock = 'refresh-virtual-block';\n/** @hidden */\nexport var dblclick = 'dblclick';\n/** @hidden */\nexport var toolbarRefresh = 'toolbar-refresh';\n/** @hidden */\nexport var bulkSave = 'bulk-save';\n/** @hidden */\nexport var autoCol = 'auto-col';\n/** @hidden */\nexport var tooltipDestroy = 'tooltip-destroy';\n/** @hidden */\nexport var updateData = 'update-data';\n/** @hidden */\nexport var editBegin = 'edit-begin';\n/** @hidden */\nexport var editComplete = 'edit-complete';\n/** @hidden */\nexport var addBegin = 'add-begin';\n/** @hidden */\nexport var addComplete = 'add-complete';\n/** @hidden */\nexport var saveComplete = 'save-complete';\n/** @hidden */\nexport var deleteBegin = 'delete-begin';\n/** @hidden */\nexport var deleteComplete = 'delete-complete';\n/** @hidden */\nexport var preventBatch = 'prevent-batch';\n/** @hidden */\nexport var dialogDestroy = 'dialog-destroy';\n/** @hidden */\nexport var crudAction = 'crud-Action';\n/** @hidden */\nexport var addDeleteAction = 'add-delete-Action';\n/** @hidden */\nexport var destroyForm = 'destroy-form';\n/** @hidden */\nexport var doubleTap = 'double-tap';\n/** @hidden */\nexport var beforeExcelExport = 'beforeExcelExport';\n/** @hidden */\nexport var excelExportComplete = 'excelExportComplete';\n/** @hidden */\nexport var excelQueryCellInfo = 'excelQueryCellInfo';\n/** @hidden */\nexport var excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';\n/** @hidden */\nexport var exportDetailDataBound = 'exportDetailDataBound';\n/** @hidden */\nexport var exportDetailTemplate = 'exportDetailTemplate';\n/** @hidden */\nexport var beforePdfExport = 'beforePdfExport';\n/** @hidden */\nexport var pdfExportComplete = 'pdfExportComplete';\n/** @hidden */\nexport var pdfQueryCellInfo = 'pdfQueryCellInfo';\n/** @hidden */\nexport var pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';\n/** @hidden */\nexport var accessPredicate = 'access-predicate';\n/** @hidden */\nexport var contextMenuClick = 'contextMenuClick';\n/** @hidden */\nexport var freezeRender = 'freezerender';\n/** @hidden */\nexport var freezeRefresh = 'freezerefresh';\n/** @hidden */\nexport var contextMenuOpen = 'contextMenuOpen';\n/** @hidden */\nexport var columnMenuClick = 'columnMenuClick';\n/** @hidden */\nexport var columnMenuOpen = 'columnMenuOpen';\n/** @hidden */\nexport var filterOpen = 'filterOpen';\n/** @hidden */\nexport var filterDialogCreated = 'filterDialogCreated';\n/** @hidden */\nexport var filterMenuClose = 'filter-menu-close';\n/** @hidden */\nexport var initForeignKeyColumn = 'initForeignKeyColumn';\n/** @hidden */\nexport var getForeignKeyData = 'getForeignKeyData';\n/** @hidden */\nexport var generateQuery = 'generateQuery';\n/** @hidden */\nexport var showEmptyGrid = 'showEmptyGrid';\n/** @hidden */\nexport var foreignKeyData = 'foreignKeyData';\n/** @hidden */\nexport var columnDataStateChange = 'columnDataStateChange';\n/** @hidden */\nexport var dataStateChange = 'dataStateChange';\n/** @hidden */\nexport var dataSourceChanged = 'dataSourceChanged';\n/** @hidden */\nexport var rtlUpdated = 'rtl-updated';\n/** @hidden */\nexport var beforeFragAppend = 'beforeFragAppend';\n/** @hidden */\nexport var frozenHeight = 'frozenHeight';\n/** @hidden */\nexport var textWrapRefresh = 'textWrapRefresh';\n/** @hidden */\nexport var recordAdded = 'recordAdded';\n/** @hidden */\nexport var cancelBegin = 'cancel-Begin';\n/** @hidden */\nexport var editNextValCell = 'editNextValCell';\n/** @hidden */\nexport var hierarchyPrint = 'hierarchyprint';\n/** @hidden */\nexport var expandChildGrid = 'expandchildgrid';\n/** @hidden */\nexport var printGridInit = 'printGrid-Init';\n/** @hidden */\nexport var exportRowDataBound = 'export-RowDataBound';\n/** @hidden */\nexport var exportDataBound = 'export-DataBound';\n/** @hidden */\nexport var rowPositionChanged = 'row-position-changed';\n/** @hidden */\nexport var columnChooserOpened = 'columnChooserOpened';\n/** @hidden */\nexport var batchForm = 'batchedit-form';\n/** @hidden */\nexport var beforeStartEdit = 'edit-form';\n/** @hidden */\nexport var beforeBatchCancel = 'before-batch-cancel';\n/** @hidden */\nexport var batchEditFormRendered = 'batcheditform-rendered';\n/** @hidden */\nexport var partialRefresh = 'partial-refresh';\n/** @hidden */\nexport var beforeCustomFilterOpen = 'beforeCustomFilterOpen';\n/** @hidden */\nexport var selectVirtualRow = 'select-virtual-Row';\n/** @hidden */\nexport var columnsPrepared = 'columns-prepared';\n/** @hidden */\nexport var cBoxFltrBegin = 'cbox-filter-begin';\n/** @hidden */\nexport var cBoxFltrComplete = 'cbox-filter-complete';\n/** @hidden */\nexport var fltrPrevent = 'filter-Prevent';\n/** @hidden */\nexport var beforeFltrcMenuOpen = 'before-filter-cmenu-open';\n/** @hidden */\nexport var valCustomPlacement = 'validation-custom-placement';\n/** @hidden */\nexport var filterCboxValue = 'filter-cbox-value';\n/** @hidden */\nexport var componentRendered = 'component-rendered';\n/** @hidden */\nexport var restoreFocus = 'restore-Focus';\n/** @hidden */\nexport var detailStateChange = 'detail-state-change';\n/** @hidden */\nexport var detailIndentCellInfo = 'detail-indentcell-info';\n/** @hidden */\nexport var virtaulKeyHandler = 'virtaul-key-handler';\n/** @hidden */\nexport var virtaulCellFocus = 'virtaul-cell-focus';\n/** @hidden */\nexport var virtualScrollEditActionBegin = 'virtual-scroll-edit-action-begin';\n/** @hidden */\nexport var virtualScrollEditSuccess = 'virtual-scroll-edit-success';\n/** @hidden */\nexport var virtualScrollEditCancel = 'virtual-scroll-edit-cancel';\n/** @hidden */\nexport var virtualScrollEdit = 'virtual-scroll-edit';\n/** @hidden */\nexport var refreshVirtualCache = 'refresh-virtual-cache';\n/** @hidden */\nexport var editReset = 'edit-reset';\n/** @hidden */\nexport var virtualScrollAddActionBegin = 'virtual-scroll-add-action-begin';\n/** @hidden */\nexport var getVirtualData = 'get-virtual-data';\n/** @hidden */\nexport var refreshInfiniteModeBlocks = 'refresh-infinite-mode-blocks';\n/** @hidden */\nexport var resetInfiniteBlocks = 'reset-infinite-blocks';\n/** @hidden */\nexport var infiniteScrollHandler = 'infinite-scroll-handler';\n/** @hidden */\nexport var infinitePageQuery = 'infinite-page-query';\n/** @hidden */\nexport var infiniteShowHide = 'infinite-show-hide';\n/** @hidden */\nexport var appendInfiniteContent = 'append-infinite-content';\n/** @hidden */\nexport var removeInfiniteRows = 'remove-infinite-rows';\n/** @hidden */\nexport var setInfiniteCache = 'set-infinite-cache';\n/** @hidden */\nexport var infiniteEditHandler = 'infinite-edit-handler';\n/** @hidden */\nexport var initialCollapse = 'initial-collapse';\n/** @hidden */\nexport var getAggregateQuery = 'get-aggregate-query';\n/** @hidden */\nexport var closeFilterDialog = 'close-filter-dialog';\n/** @hidden */\nexport var columnChooserCancelBtnClick = 'columnChooserCancelBtnClick';\n/** @hidden */\nexport var getFilterBarOperator = 'get-filterbar-operator';\n/** @hidden */\nexport var resetColumns = 'reset-columns';\n/** @hidden */\nexport var pdfAggregateQueryCellInfo = 'pdfAggregateQueryCellInfo';\n/** @hidden */\nexport var excelAggregateQueryCellInfo = 'excelAggregateQueryCellInfo';\n/** @hidden */\nexport var setGroupCache = 'group-cache';\n/** @hidden */\nexport var lazyLoadScrollHandler = 'lazy-load-scroll-handler';\n/** @hidden */\nexport var groupCollapse = 'group-collapse';\n/** @hidden */\nexport var beforeCheckboxRenderer = 'beforeCheckboxRenderer';\n/** @hidden */\nexport var refreshHandlers = 'refreshResizeHandlers';\n/** @hidden */\nexport var refreshFrozenColumns = 'refresh-frozen-columns';\n/** @hidden */\nexport var setReorderDestinationElement = 'set-reorder-destination-element';\n/** @hidden */\nexport var refreshVirtualFrozenHeight = 'refresh-virtual-frozen-height';\n/** @hidden */\nexport var setFreezeSelection = 'set-freeze-selection';\n/** @hidden */\nexport var setInfiniteFrozenHeight = 'set-infinite-frozen-height';\n/** @hidden */\nexport var setInfiniteColFrozenHeight = 'set-infinite-col-frozen-height';\n/** @hidden */\nexport var beforeRefreshOnDataChange = 'before-refresh-on-data-change';\n/** @hidden */\nexport var immutableBatchCancel = 'immutable-batch-cancel';\n/** @hidden */\nexport var refreshVirtualFrozenRows = 'refresh-virtual-frozenrows';\n/** @hidden */\nexport var checkScrollReset = 'check-scroll-reset';\n/** @hidden */\nexport var refreshFrozenHeight = 'refresh-frozen-height';\n/** @hidden */\nexport var setHeightToFrozenElement = 'set-height-to-frozen-element';\n/** @hidden */\nexport var preventFrozenScrollRefresh = 'prevent-frozen-scroll-refresh';\n/** @hidden */\nexport var nextCellIndex = 'next-cell-index';\n/** @hidden */\nexport var refreshInfiniteCurrentViewData = 'refresh-infinite-current-view-data';\n/** @hidden */\nexport var infiniteCrudCancel = 'infinite-crud-cancel';\n/** @hidden */\nexport var filterDialogClose = 'filter-dialog-close';\n/** @hidden */\nexport var refreshCustomFilterOkBtn = 'refresh-cutsom-filter-ok-button';\n/** @hidden */\nexport var refreshCustomFilterClearBtn = 'refresh-cutsom-filter-clear-button';\n/** @hidden */\nexport var renderResponsiveCmenu = 'render-responsive-cmenu';\n/** @hidden */\nexport var filterCmenuSelect = 'filter-cmenu-select';\n/** @hidden */\nexport var customFilterClose = 'custom-filter-close';\n/** @hidden */\nexport var setFullScreenDialog = 'set-fullscreen-dialog';\n/** @hidden */\nexport var refreshExpandandCollapse = 'refresh-Expand-and-Collapse';\n/** @hidden */\nexport var rowModeChange = 'row-mode-change';\n/** @hidden */\nexport var enterKeyHandler = 'enter-key-handler';\n/** @hidden */\nexport var refreshVirtualMaxPage = 'refresh-virtual-max-page';\n/** @hidden */\nexport var setVirtualPageQuery = 'set-virtual-page-query';\n/** @hidden */\nexport var selectRowOnContextOpen = 'select-row-on-context-open';\n/** @hidden */\nexport var pagerRefresh = 'pager-refresh';\n/** @hidden */\nexport var closeInline = 'closeinline';\n/** @hidden */\nexport var closeBatch = 'closebatch';\n/** @hidden */\nexport var closeEdit = 'close-edit';\n/** @hidden */\nexport var resetVirtualFocus = 'reset-virtual-focus';\n/** @hidden */\nexport var afterContentRender = 'after-content-renderer';\n/** @hidden */\nexport var refreshVirtualEditFormCells = 'refresh-virtual-editform-cells';\n/** @hidden */\nexport var scrollToEdit = 'scroll-to-edit';\n/** @hidden */\nexport var beforeCheckboxRendererQuery = 'before-checkbox-renderer-query';\n/** @hidden */\nexport var createVirtualValidationForm = 'create-virtual-validation-form';\n/** @hidden */\nexport var validateVirtualForm = 'validate-virtual-form';\n/** @hidden */\nexport var destroyChildGrid = 'destroy-child-grid';\n/** @hidden */\nexport var stickyScrollComplete = 'sticky-scroll-complete';\n/** @hidden */\nexport var captionActionComplete = 'infinite-group-collapse';\n/** @hidden */\nexport var refreshInfinitePersistSelection = 'refresh-infinite-persist-selection';\n/** @hidden */\nexport var refreshInfiniteEditrowindex = 'refresh-infinite-editrowindex';\n/** @hidden */\nexport var afterFilterColumnMenuClose = 'after-filter-column-menu-close';\n/** @hidden */\nexport var beforeCheckboxfilterRenderer = 'beforeCheckboxfilterRenderer';\n/** @hidden */\nexport var commandColumnDestroy = 'commandColumnDestroy';\n/** @hidden */\nexport var batchCnfrmDlgCancel = 'cancelcnfrmDlg';\n/** @hidden */\nexport var refreshVirtualLazyLoadCache = 'refresh-Virtual-LazyLoad-Cache';\n/** @hidden */\nexport var refreshFrozenPosition = 'refresh-Frozen-Position';\n/** @hidden */\nexport var refreshResizePosition = 'refresh-Resize-Position';\n/** @hidden */\nexport var refreshSplitFrozenColumn = 'refresh-Split-Frozen-Column';\n/** @hidden */\nexport var renderResponsiveChangeAction = 'render-Responsive-Change-Action';\n/** @hidden */\nexport var renderResponsiveColumnChooserDiv = 'render-Responsive-Column-Chooser-Div';\n/** @hidden */\nexport var showAddNewRowFocus = 'show-Add-New-Row-Focus';\n/** @hidden */\nexport var infiniteScrollComplete = 'infinitescroll-complete';\n","/**\n * Defines types of Cell\n *\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n /** Defines CellType as DetailFooterIntent */\n CellType[CellType[\"DetailFooterIntent\"] = 15] = \"DetailFooterIntent\";\n /** Defines CellType as RowDrag */\n CellType[CellType[\"RowDragIcon\"] = 16] = \"RowDragIcon\";\n /** Defines CellType as RowDragHeader */\n CellType[CellType[\"RowDragHIcon\"] = 17] = \"RowDragHIcon\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n *\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n *\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n/**\n * Defines types of responsive dialogs\n *\n * @hidden\n */\nexport var ResponsiveDialogAction;\n(function (ResponsiveDialogAction) {\n /** Defines dialog type as Edit */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isEdit\"] = 0] = \"isEdit\";\n /** Defines dialog type as Add */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isAdd\"] = 1] = \"isAdd\";\n /** Defines dialog type as Sort */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isSort\"] = 2] = \"isSort\";\n /** Defines dialog type as Filter */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isFilter\"] = 3] = \"isFilter\";\n /** Defines dialog type as ColMenu */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isColMenu\"] = 4] = \"isColMenu\";\n /** Defines dialog type as ColumChooser */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isColumnChooser\"] = 5] = \"isColumnChooser\";\n})(ResponsiveDialogAction || (ResponsiveDialogAction = {}));\n/**\n * Defines responsive toolbar actions\n *\n * @hidden\n */\nexport var ResponsiveToolbarAction;\n(function (ResponsiveToolbarAction) {\n /** Defines initial responsive toolbar buttons */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isInitial\"] = 0] = \"isInitial\";\n /** Defines responsive toolbar search */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isSearch\"] = 1] = \"isSearch\";\n})(ResponsiveToolbarAction || (ResponsiveToolbarAction = {}));\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor, RemoteSaveAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, isGroupAdaptive, getColumnByForeignKeyValue, refreshFilteredColsUid } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * Grid data module is used to generate query and data source.\n *\n * @hidden\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the service locator\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = { isPending: false, resolver: null, group: [] };\n this.foreignKeyDataState = { isPending: false, resolver: null };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n if (this.parent.isDestroyed || this.getModuleName() === 'foreignKey') {\n return;\n }\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowPositionChanged, this.reorderRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n this.parent.on(events.autoCol, this.refreshFilteredCols, this);\n this.parent.on(events.columnsPrepared, this.refreshFilteredCols, this);\n }\n Data.prototype.reorderRows = function (e) {\n this.dataManager.dataSource.json.splice(e.toIndex, 0, this.dataManager.dataSource.json.splice(e.fromIndex, 1)[0]);\n };\n Data.prototype.getModuleName = function () {\n return 'data';\n };\n /**\n * The function used to initialize dataManager and external query\n *\n * @returns {void}\n */\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource :\n (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource));\n if (gObj.isAngular && !(gObj.query instanceof Query)) {\n gObj.setProperties({ query: new Query() }, true);\n }\n else {\n this.isQueryInvokedFromData = true;\n if (!(gObj.query instanceof Query)) {\n gObj.query = new Query();\n }\n }\n };\n /**\n * The function is used to generate updated Query from Grid model.\n *\n * @param {boolean} skipPage - specifies the boolean to skip the page\n * @param {boolean} isAutoCompleteCall - specifies for auto complete call\n * @returns {Query} returns the Query\n * @hidden\n */\n Data.prototype.generateQuery = function (skipPage, isAutoCompleteCall) {\n var gObj = this.parent;\n var query = !isNullOrUndefined(gObj.getQuery()) ? gObj.getQuery().clone() : new Query();\n if (this.parent.columnQueryMode === 'ExcludeHidden') {\n query.select(this.parent.getColumns().filter(function (column) { return !(column.isPrimaryKey !== true && column.visible === false || column.field === undefined); }).map(function (column) { return column.field; }));\n }\n else if (this.parent.columnQueryMode === 'Schema') {\n var selectQueryFields = [];\n var columns = this.parent.columns;\n for (var i = 0; i < columns.length; i++) {\n selectQueryFields.push(columns[parseInt(i.toString(), 10)].field);\n }\n query.select(selectQueryFields);\n }\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n if (isGroupAdaptive(this.parent)) {\n this.virtualGroupPageQuery(query);\n }\n else {\n this.pageQuery(query, skipPage);\n }\n if (isNullOrUndefined(isAutoCompleteCall) || !isAutoCompleteCall) {\n this.groupQuery(query);\n }\n return query;\n };\n /**\n * @param {Query} query - specifies the query\n * @returns {Query} - returns the query\n * @hidden\n */\n Data.prototype.aggregateQuery = function (query) {\n var rows = this.parent.aggregates;\n for (var i = 0; i < rows.length; i++) {\n var row = rows[parseInt(i.toString(), 10)];\n for (var j = 0; j < row.columns.length; j++) {\n var cols = row.columns[parseInt(j.toString(), 10)];\n var types = cols.type instanceof Array ? cols.type : [cols.type];\n for (var k = 0; k < types.length; k++) {\n query.aggregate(types[parseInt(k.toString(), 10)].toLowerCase(), cols.field);\n }\n }\n }\n return query;\n };\n Data.prototype.virtualGroupPageQuery = function (query) {\n var fName = 'fn';\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[parseInt(i.toString(), 10)][\"\" + fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n };\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n var fName = 'fn';\n var args = { query: query, skipPage: false };\n gObj.notify(events.setVirtualPageQuery, args);\n if (args.skipPage) {\n return query;\n }\n if ((gObj.allowPaging || gObj.enableVirtualization || gObj.enableInfiniteScrolling) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[parseInt(i.toString(), 10)][\"\" + fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n if (!isNullOrUndefined(gObj.infiniteScrollModule) && gObj.enableInfiniteScrolling) {\n this.parent.notify(events.infinitePageQuery, query);\n }\n else {\n query.page(gObj.pageSettings.currentPage, gObj.allowPaging && gObj.pagerModule &&\n (gObj.pagerModule.pagerObj.isAllPage && !gObj.isManualRefresh) &&\n (!this.dataManager.dataSource.offline && !(this.dataManager.adaptor instanceof RemoteSaveAdaptor)) ?\n null : gObj.pageSettings.pageSize);\n }\n }\n return query;\n };\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n if (this.parent.groupSettings.enableLazyLoading) {\n query.lazyLoad.push({ key: 'isLazyLoad', value: this.parent.groupSettings.enableLazyLoading });\n }\n var columns = gObj.groupSettings.columns;\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[parseInt(i.toString(), 10)]);\n if (!column) {\n this.parent.log('initial_action', { moduleName: 'group', columnName: columns[parseInt(i.toString(), 10)] });\n }\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n if (isGrpFmt) {\n query.group(columns[parseInt(i.toString(), 10)], this.formatGroupColumn.bind(this), format);\n }\n else {\n query.group(columns[parseInt(i.toString(), 10)], null);\n }\n }\n }\n return query;\n };\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[parseInt(i.toString(), 10)].field);\n if (col) {\n col.setSortDirection(columns[parseInt(i.toString(), 10)].direction);\n }\n else {\n this.parent.log('initial_action', { moduleName: 'sort', columnName: columns[parseInt(i.toString(), 10)].field });\n return query;\n }\n var fn = columns[parseInt(i.toString(), 10)].direction;\n if (col.sortComparer) {\n this.parent.log('grid_sort_comparer');\n fn = !this.isRemote() ? col.sortComparer.bind(col) : columns[parseInt(i.toString(), 10)].direction;\n }\n if (gObj.groupSettings.columns.indexOf(columns[parseInt(i.toString(), 10)].field) === -1) {\n if (col.isForeignColumn() || col.sortComparer) {\n query.sortByForeignKey(col.field, fn, undefined, columns[parseInt(i.toString(), 10)].direction.toLowerCase());\n }\n else {\n query.sortBy(col.field, fn);\n }\n }\n else {\n sortGrp.push({ direction: fn, field: col.field });\n }\n }\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n if (typeof sortGrp[parseInt(i.toString(), 10)].direction === 'string') {\n query.sortBy(sortGrp[parseInt(i.toString(), 10)].field, sortGrp[parseInt(i.toString(), 10)].direction);\n }\n else {\n var col = this.getColumnByField(sortGrp[parseInt(i.toString(), 10)].field);\n query.sortByForeignKey(sortGrp[parseInt(i.toString(), 10)].field, sortGrp[parseInt(i.toString(), 10)].direction, undefined, col.getSortDirection().toLowerCase());\n }\n }\n }\n return query;\n };\n /**\n * @param {Query} query - specifies the query\n * @param {Column} fcolumn - specifies the forein key column model\n * @param {boolean} isForeignKey - Confirms whether the column is a foreign key or not\n * @returns {Query} - returns the query\n * @hidden\n */\n Data.prototype.searchQuery = function (query, fcolumn, isForeignKey) {\n var sSettings = this.parent.searchSettings;\n var fields = (!isNullOrUndefined(sSettings.fields) && sSettings.fields.length) ? sSettings.fields : this.getSearchColumnFieldNames();\n var predicateList = [];\n var needForeignKeySearch = false;\n if (!isNullOrUndefined(this.parent.searchSettings.key) && this.parent.searchSettings.key.length) {\n needForeignKeySearch = this.parent.getForeignKeyColumns().some(function (col) { return fields.indexOf(col.field) > -1; });\n var adaptor = !isForeignKey ? this.dataManager.adaptor : fcolumn.dataSource.adaptor;\n if (needForeignKeySearch || (adaptor.getModuleName &&\n adaptor.getModuleName() === 'ODataV4Adaptor')) {\n fields = isForeignKey ? [fcolumn.foreignKeyValue] : fields;\n for (var i = 0; i < fields.length; i++) {\n var column = isForeignKey ? fcolumn : this.getColumnByField(fields[parseInt(i.toString(), 10)]);\n if (column.isForeignColumn() && !isForeignKey) {\n predicateList = this.fGeneratePredicate(column, predicateList);\n }\n else {\n predicateList.push(new Predicate(fields[parseInt(i.toString(), 10)], sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));\n }\n }\n var predList = Predicate.or(predicateList);\n predList.key = sSettings.key;\n query.where(predList);\n }\n else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n }\n return query;\n };\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n var foreignColEmpty;\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n for (var _i = 0, _a = gObj.getColumns(); _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n var foreignCols = [];\n var defaultFltrCols = [];\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n var gridColumn = col.isForeignKey ? gObj.getColumnByUid(col.uid) : gObj.getColumnByField(col.field);\n if (isNullOrUndefined(col.type) && gridColumn && (gridColumn.type === 'date' || gridColumn.type === 'datetime' || gridColumn.type === 'dateonly')) {\n col.type = col.isForeignKey ? gObj.getColumnByUid(col.uid).type : gObj.getColumnByField(col.field).type;\n }\n if (col.isForeignKey) {\n foreignCols.push(col);\n }\n else {\n defaultFltrCols.push(col);\n }\n }\n if (defaultFltrCols.length) {\n for (var i = 0, len = defaultFltrCols.length; i < len; i++) {\n defaultFltrCols[parseInt(i.toString(), 10)].uid = defaultFltrCols[parseInt(i.toString(), 10)].uid ||\n this.parent.grabColumnByFieldFromAllCols(defaultFltrCols[parseInt(i.toString(), 10)]\n .field, defaultFltrCols[parseInt(i.toString(), 10)].isForeignKey).uid;\n }\n var excelPredicate = CheckBoxFilterBase.getPredicate(defaultFltrCols);\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n predicateList.push(excelPredicate[\"\" + prop]);\n }\n }\n if (foreignCols.length) {\n for (var _e = 0, foreignCols_1 = foreignCols; _e < foreignCols_1.length; _e++) {\n var col = foreignCols_1[_e];\n col.uid = col.uid || this.parent.grabColumnByFieldFromAllCols(col.field, col.isForeignKey).uid;\n var column_1 = this.parent.grabColumnByUidFromAllCols(col.uid);\n if (!column_1) {\n this.parent.log('initial_action', { moduleName: 'filter', columnName: col.field });\n }\n if (column_1.isForeignColumn() && getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n if (!column_1.columnData.length) {\n foreignColEmpty = true;\n }\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n }\n else {\n var excelPredicate = CheckBoxFilterBase.getPredicate(columns);\n for (var _f = 0, _g = Object.keys(excelPredicate); _f < _g.length; _f++) {\n var prop = _g[_f];\n predicateList.push(excelPredicate[\"\" + prop]);\n }\n }\n }\n }\n if (predicateList.length && !foreignColEmpty) {\n query.where(Predicate.and(predicateList));\n }\n else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n return query;\n };\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n *\n * @param {object} args - specifies the object\n * @param {string} args.requestType - Defines the request type\n * @param {string[]} args.foreignKeyData - Defines the foreignKeyData.string\n * @param {Object} args.data - Defines the data.\n * @param {number} args.index - Defines the index .\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @returns {Promise} - returns the object\n * @hidden\n */\n Data.prototype.getData = function (args, query) {\n var _this = this;\n if (args === void 0) { args = { requestType: '' }; }\n var key = this.getKey(args.foreignKeyData &&\n Object.keys(args.foreignKeyData).length ?\n args.foreignKeyData : this.parent.getPrimaryKeyFieldNames());\n this.parent.log('datasource_syntax_mismatch', { dataState: this.parent });\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n var def = this.eventPromise(args, query, key);\n return def.promise;\n }\n else {\n var crud = void 0;\n switch (args.requestType) {\n case 'delete':\n query = query ? query : this.generateQuery();\n // eslint-disable-next-line no-case-declarations\n var len = Object.keys(args.data).length;\n if (len === 1) {\n crud = this.dataManager.remove(key, args.data[0], query.fromTable, query);\n }\n else {\n var changes = {\n addedRecords: [],\n deletedRecords: [],\n changedRecords: []\n };\n changes.deletedRecords = args.data;\n crud = this.dataManager.saveChanges(changes, key, query.fromTable, query.requiresCount());\n }\n break;\n case 'save':\n query = query ? query : this.generateQuery();\n args.index = isNullOrUndefined(args.index) ? 0 : args.index;\n crud = this.dataManager.insert(args.data, query.fromTable, query, args.index);\n break;\n }\n var promise = 'promise';\n args[\"\" + promise] = crud;\n // eslint-disable-next-line no-prototype-builtins\n if (crud && !Array.isArray(crud) && !crud.hasOwnProperty('deletedRecords')) {\n return crud.then(function () {\n return _this.insert(query, args);\n });\n }\n else {\n return this.insert(query, args);\n }\n }\n };\n Data.prototype.insert = function (query, args) {\n if (args.requestType === 'save') {\n this.parent.notify(events.recordAdded, args);\n }\n return this.executeQuery(query);\n };\n Data.prototype.executeQuery = function (query) {\n var _this = this;\n if (this.dataManager.ready) {\n var deferred_1 = new Deferred();\n var ready = this.dataManager.ready;\n ready.then(function () {\n _this.dataManager.executeQuery(query).then(function (result) {\n deferred_1.resolve(result);\n });\n }).catch(function (e) {\n deferred_1.reject(e);\n });\n return deferred_1.promise;\n }\n else {\n return this.dataManager.executeQuery(query);\n }\n };\n Data.prototype.formatGroupColumn = function (value, field) {\n var serviceLocator = this.serviceLocator;\n var column = this.getColumnByField(field);\n var date = value;\n if (!column.type) {\n column.type = date.getDay ? (date.getHours() > 0 || date.getMinutes() > 0 ||\n date.getSeconds() > 0 || date.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n if (isNullOrUndefined(column.getFormatter())) {\n setFormatter(serviceLocator, column);\n }\n var formatVal = ValueFormatter.prototype.toView(value, column.getFormatter());\n return formatVal;\n };\n Data.prototype.crudActions = function (args) {\n var query = this.generateQuery();\n var promise = null;\n var pr = 'promise';\n var key = this.getKey(args.foreignKeyData &&\n Object.keys(args.foreignKeyData).length ? args.foreignKeyData :\n this.parent.getPrimaryKeyFieldNames());\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.eventPromise(args, query, key);\n }\n switch (args.requestType) {\n case 'save':\n promise = this.dataManager.update(key, args.data, query.fromTable, query, args.previousData);\n break;\n }\n args[\"\" + pr] = promise ? promise : args[\"\" + pr];\n this.parent.notify(events.crudAction, args);\n };\n /**\n * @param {object} changes - specifies the changes\n * @param {string} key - specifies the key\n * @param {object} original - specifies the original data\n * @param {Query} query - specifies the query\n * @returns {Promise} returns the object\n * @hidden\n */\n Data.prototype.saveChanges = function (changes, key, original, query) {\n if (query === void 0) { query = this.generateQuery(); }\n query.requiresCount();\n if ('result' in this.parent.dataSource) {\n var deff = new Deferred();\n var args = {\n requestType: 'batchsave', changes: changes, key: key, query: query,\n endEdit: deff.resolve\n };\n this.setState({ isPending: true, resolver: deff.resolve });\n this.parent.trigger(events.dataSourceChanged, args);\n return deff.promise;\n }\n else {\n var promise = this.dataManager.saveChanges(changes, key, query.fromTable, query, original);\n return promise;\n }\n };\n Data.prototype.getKey = function (keys) {\n if (keys && keys.length) {\n return keys[0];\n }\n return undefined;\n };\n /**\n * @returns {boolean} returns whether its remote data\n * @hidden\n */\n Data.prototype.isRemote = function () {\n return this.dataManager.dataSource.offline !== true && this.dataManager.dataSource.url !== undefined &&\n this.dataManager.dataSource.url !== '';\n };\n Data.prototype.addRows = function (e) {\n for (var i = e.records.length; i > 0; i--) {\n if (this.parent.dataSource instanceof DataManager && this.dataManager.dataSource.offline) {\n this.dataManager.dataSource.json.splice(e.toIndex, 0, e.records[i - 1]);\n }\n else if (((!this.parent.getDataModule().isRemote()) && (!isNullOrUndefined(this.parent.dataSource))) &&\n (!this.parent.dataSource.result)) {\n this.parent.dataSource['splice'](e.toIndex, 0, e.records[i - 1]);\n }\n }\n };\n Data.prototype.removeRows = function (e) {\n var json = this.dataManager.dataSource.json;\n if (this.parent.dataSource instanceof DataManager && this.dataManager.dataSource.offline) {\n this.dataManager.dataSource.json = json.filter(function (value) { return e.records.indexOf(value) === -1; });\n }\n else if (((!this.parent.getDataModule().isRemote()) && (!isNullOrUndefined(this.parent.dataSource))) &&\n (!this.parent.dataSource.result)) {\n this.parent.dataSource = json.filter(function (value) { return e.records.indexOf(value) === -1; });\n }\n };\n Data.prototype.getColumnByField = function (field) {\n var col;\n return (this.parent.columnModel).some(function (column) {\n col = column;\n return column.field === field;\n }) && col;\n };\n Data.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.rowsAdded, this.addRows);\n this.parent.off(events.rowsRemoved, this.removeRows);\n this.parent.off(events.dataSourceModified, this.initDataManager);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.updateData, this.crudActions);\n this.parent.off(events.addDeleteAction, this.getData);\n this.parent.off(events.autoCol, this.refreshFilteredCols);\n this.parent.off(events.columnsPrepared, this.refreshFilteredCols);\n };\n Data.prototype.getState = function () {\n return this.dataState;\n };\n Data.prototype.setState = function (state) {\n return this.dataState = state;\n };\n Data.prototype.getForeignKeyDataState = function () {\n return this.foreignKeyDataState;\n };\n Data.prototype.setForeignKeyDataState = function (state) {\n this.foreignKeyDataState = state;\n };\n Data.prototype.getStateEventArgument = function (query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({ url: '', adaptor: new UrlAdaptor });\n var state = adaptr.processQuery(dm, query);\n var data = JSON.parse(state.data);\n return extend(data, state.pvtData);\n };\n Data.prototype.eventPromise = function (args, query, key) {\n var _this = this;\n var dataArgs = args;\n var state = this.getStateEventArgument(query);\n var def = new Deferred();\n var deff = new Deferred();\n if ((args.requestType !== undefined || (this.parent.groupSettings.disablePageWiseAggregates && query.queries.some(function (query) { return query.fn === 'onGroup'; })))\n && this.dataState.isDataChanged !== false) {\n state.action = args;\n if (args.requestType === 'save' || args.requestType === 'delete') {\n var editArgs_1 = args;\n editArgs_1.key = key;\n var promise = 'promise';\n editArgs_1[\"\" + promise] = deff.promise;\n editArgs_1.state = state;\n this.setState({ isPending: true, resolver: deff.resolve });\n dataArgs.endEdit = deff.resolve;\n dataArgs.cancelEdit = deff.reject;\n this.parent.trigger(events.dataSourceChanged, editArgs_1);\n deff.promise.then(function () {\n _this.setState({ isPending: true, resolver: def.resolve, group: state.group, aggregates: state.aggregates });\n if (editArgs_1.requestType === 'save') {\n _this.parent.notify(events.recordAdded, editArgs_1);\n }\n _this.parent.trigger(events.dataStateChange, state);\n })\n .catch(function () { return void 0; });\n }\n else {\n this.setState({ isPending: true, resolver: def.resolve, group: state.group, aggregates: state.aggregates });\n this.parent.trigger(events.dataStateChange, state);\n }\n }\n else {\n this.setState({});\n def.resolve(this.parent.dataSource);\n }\n return def;\n };\n /**\n * Gets the columns where searching needs to be performed from the Grid.\n *\n * @returns {string[]} returns the searched column field names\n */\n Data.prototype.getSearchColumnFieldNames = function () {\n var colFieldNames = [];\n var columns = this.parent.getColumns();\n for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {\n var col = columns_2[_i];\n if (col.allowSearching && !isNullOrUndefined(col.field)) {\n colFieldNames.push(col.field);\n }\n }\n return colFieldNames;\n };\n Data.prototype.refreshFilteredCols = function () {\n if (this.parent.allowFiltering && this.parent.filterSettings.columns.length) {\n refreshFilteredColsUid(this.parent, this.parent.filterSettings.columns);\n }\n };\n return Data;\n}());\nexport { Data };\n","import { merge } from '@syncfusion/ej2-base';\n/**\n * Row\n *\n * @hidden\n */\nvar Row = /** @class */ (function () {\n function Row(options, parent) {\n merge(this, options);\n this.parent = parent;\n }\n Row.prototype.clone = function () {\n var row = new Row({});\n merge(row, this);\n row.cells = this.cells.map(function (cell) { return cell.clone(); });\n return row;\n };\n /**\n * Replaces the row data and grid refresh the particular row element only.\n *\n * @param {Object} data - To update new data for the particular row.\n * @returns {void}\n */\n Row.prototype.setRowValue = function (data) {\n if (!this.parent) {\n return;\n }\n var key = this.data[this.parent.getPrimaryKeyFieldNames()[0]];\n this.parent.setRowData(key, data);\n };\n /**\n * Replaces the given field value and refresh the particular cell element only.\n *\n * @param {string} field - Specifies the field name which you want to update.\n * @param {string | number | boolean | Date} value - To update new value for the particular cell.\n * @returns {void}\n */\n Row.prototype.setCellValue = function (field, value) {\n if (!this.parent) {\n return;\n }\n var isValDiff = !(this.data[\"\" + field].toString() === value.toString());\n if (isValDiff) {\n var pKeyField = this.parent.getPrimaryKeyFieldNames()[0];\n var key = this.data[\"\" + pKeyField];\n this.parent.setCellValue(key, field, value);\n this.makechanges(pKeyField, this.data);\n }\n else {\n return;\n }\n };\n Row.prototype.makechanges = function (key, data) {\n if (!this.parent) {\n return;\n }\n var gObj = this.parent;\n var dataManager = gObj.getDataModule().dataManager;\n dataManager.update(key, data);\n };\n return Row;\n}());\nexport { Row };\n","import { merge } from '@syncfusion/ej2-base';\n/**\n * Cell\n *\n * @hidden\n */\nvar Cell = /** @class */ (function () {\n function Cell(options) {\n this.isSpanned = false;\n this.isRowSpanned = false;\n merge(this, options);\n }\n Cell.prototype.clone = function () {\n var cell = new Cell({});\n merge(cell, this);\n return cell;\n };\n return Cell;\n}());\nexport { Cell };\n","import { isNullOrUndefined, attributes } from '@syncfusion/ej2-base';\nimport { iterateArrayOrObject } from '../base/util';\nimport { CellType } from '../base/enum';\n/**\n * `CellMergeRender` module.\n *\n * @hidden\n */\nvar CellMergeRender = /** @class */ (function () {\n function CellMergeRender(serviceLocator, parent) {\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n }\n CellMergeRender.prototype.render = function (cellArgs, row, i, td) {\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[parseInt(i.toString(), 10)].cellType\n || CellType.Data);\n var colSpan = row.cells[parseInt(i.toString(), 10)].cellSpan ? row.cells[parseInt(i.toString(), 10)].cellSpan :\n (cellArgs.colSpan + i) <= row.cells.length ? cellArgs.colSpan : row.cells.length - i;\n var rowSpan = cellArgs.rowSpan;\n var visible = 0;\n var spannedCell;\n if (row.index > 0) {\n var rowsObject = this.parent.getRowsObject();\n var cells = this.parent.groupSettings.columns.length > 0 &&\n !rowsObject[row.index - 1].isDataRow ? rowsObject[row.index].cells : rowsObject[row.index - 1].cells;\n var targetCell_1 = row.cells[parseInt(i.toString(), 10)];\n var uid_1 = 'uid';\n spannedCell = cells.filter(function (cell) { return cell.column.uid === targetCell_1.column[\"\" + uid_1]; })[0];\n }\n var colSpanLen = spannedCell && spannedCell.colSpanRange > 1 && spannedCell.rowSpanRange > 1 ?\n spannedCell.colSpanRange : colSpan;\n for (var j = i + 1; j < i + colSpanLen && j < row.cells.length; j++) {\n if (row.cells[parseInt(j.toString(), 10)].visible === false) {\n visible++;\n }\n else {\n row.cells[parseInt(j.toString(), 10)].isSpanned = true;\n }\n }\n if (visible > 0) {\n for (var j = i + colSpan; j < i + colSpan + visible && j < row.cells.length; j++) {\n row.cells[parseInt(j.toString(), 10)].isSpanned = true;\n }\n if (i + colSpan + visible >= row.cells.length) {\n colSpan -= (i + colSpan + visible) - row.cells.length;\n }\n }\n if (row.cells[parseInt(i.toString(), 10)].cellSpan) {\n row.data[cellArgs.column.field] = row.cells[parseInt(i.toString(), 10)].spanText;\n td = cellRenderer.render(row.cells[parseInt(i.toString(), 10)], row.data, { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' });\n }\n if (colSpan > 1) {\n attributes(td, { 'colSpan': colSpan.toString(), 'aria-colSpan': colSpan.toString() });\n }\n if (rowSpan > 1) {\n attributes(td, { 'rowspan': rowSpan.toString(), 'aria-rowspan': rowSpan.toString() });\n row.cells[parseInt(i.toString(), 10)].isRowSpanned = true;\n row.cells[parseInt(i.toString(), 10)].rowSpanRange = Number(rowSpan);\n if (colSpan > 1) {\n row.cells[parseInt(i.toString(), 10)].colSpanRange = Number(colSpan);\n }\n }\n if (row.index > 0 && (spannedCell.rowSpanRange > 1)) {\n row.cells[parseInt(i.toString(), 10)].isSpanned = true;\n row.cells[parseInt(i.toString(), 10)].rowSpanRange = Number(spannedCell.rowSpanRange - 1);\n row.cells[parseInt(i.toString(), 10)].colSpanRange = spannedCell.rowSpanRange > 0 ? spannedCell.colSpanRange : 1;\n }\n if (this.parent.enableColumnVirtualization && !row.cells[parseInt(i.toString(), 10)].cellSpan &&\n !this.containsKey(cellArgs.column.field, cellArgs.data[cellArgs.column.field])) {\n this.backupMergeCells(cellArgs.column.field, cellArgs.data[cellArgs.column.field], cellArgs.colSpan);\n }\n return td;\n };\n CellMergeRender.prototype.backupMergeCells = function (fName, data, span) {\n this.setMergeCells(this.generteKey(fName, data), span);\n };\n CellMergeRender.prototype.generteKey = function (fname, data) {\n return fname + '__' + data.toString();\n };\n CellMergeRender.prototype.splitKey = function (key) {\n return key.split('__');\n };\n CellMergeRender.prototype.containsKey = function (fname, data) {\n // eslint-disable-next-line no-prototype-builtins\n return this.getMergeCells().hasOwnProperty(this.generteKey(fname, data));\n };\n CellMergeRender.prototype.getMergeCells = function () {\n return this.parent.mergeCells;\n };\n CellMergeRender.prototype.setMergeCells = function (key, span) {\n this.parent.mergeCells[\"\" + key] = span;\n };\n CellMergeRender.prototype.updateVirtualCells = function (rows) {\n var mCells = this.getMergeCells();\n for (var _i = 0, _a = Object.keys(mCells); _i < _a.length; _i++) {\n var key = _a[_i];\n var value = mCells[\"\" + key];\n var merge = this.splitKey(key);\n var columnIndex = this.getIndexFromAllColumns(merge[0]);\n var vColumnIndices = this.parent.getColumnIndexesInView();\n var span = value - (vColumnIndices[0] - columnIndex);\n if (columnIndex < vColumnIndices[0] && span > 1) {\n for (var _b = 0, rows_1 = rows; _b < rows_1.length; _b++) {\n var row = rows_1[_b];\n if (row.data[merge[0]].toString() === merge[1].toString()) {\n row.cells[0].cellSpan = span;\n row.cells[0].spanText = merge[1];\n break;\n }\n }\n }\n }\n return rows;\n };\n CellMergeRender.prototype.getIndexFromAllColumns = function (field) {\n var index = iterateArrayOrObject(this.parent.getVisibleColumns(), function (item, index) {\n if (item.field === field) {\n return index;\n }\n return undefined;\n })[0];\n return index;\n };\n return CellMergeRender;\n}());\nexport { CellMergeRender };\n","/**\n * Specifies class names\n */\n/** @hidden */\nexport var rowCell = 'e-rowcell';\n/** @hidden */\nexport var gridHeader = 'e-gridheader';\n/** @hidden */\nexport var gridContent = 'e-gridcontent';\n/** @hidden */\nexport var gridFooter = 'e-gridfooter';\n/** @hidden */\nexport var headerContent = 'e-headercontent';\n/** @hidden */\nexport var movableContent = 'e-movablecontent';\n/** @hidden */\nexport var movableHeader = 'e-movableheader';\n/** @hidden */\nexport var frozenContent = 'e-frozencontent';\n/** @hidden */\nexport var frozenHeader = 'e-frozenheader';\n/** @hidden */\nexport var content = 'e-content';\n/** @hidden */\nexport var table = 'e-table';\n/** @hidden */\nexport var row = 'e-row';\n/** @hidden */\nexport var gridChkBox = 'e-gridchkbox';\n/** @hidden */\nexport var editedRow = 'e-editedrow';\n/** @hidden */\nexport var addedRow = 'e-addedrow';\n/**\n * Specifies repeated strings\n */\n/** @hidden */\nexport var changedRecords = 'changedRecords';\n/** @hidden */\nexport var addedRecords = 'addedRecords';\n/** @hidden */\nexport var deletedRecords = 'deletedRecords';\n/** @hidden */\nexport var leftRight = 'Left-Right';\n/** @hidden */\nexport var frozenRight = 'frozen-right';\n/** @hidden */\nexport var frozenLeft = 'frozen-left';\n/** @hidden */\nexport var dataColIndex = 'data-colindex';\n/** @hidden */\nexport var ariaColIndex = 'aria-colindex';\n/** @hidden */\nexport var dataRowIndex = 'data-rowindex';\n/** @hidden */\nexport var ariaRowIndex = 'aria-rowindex';\n/** @hidden */\nexport var tbody = 'tbody';\n/** @hidden */\nexport var colGroup = 'colgroup';\n/** @hidden */\nexport var open = 'open';\n/** @hidden */\nexport var change = 'change';\n/** @hidden */\nexport var focus = 'focus';\n/** @hidden */\nexport var create = 'created';\n/** @hidden */\nexport var beforeOpen = 'beforeOpen';\n/** @hidden */\nexport var downArrow = 'downArrow';\n/** @hidden */\nexport var upArrow = 'upArrow';\n/** @hidden */\nexport var pageUp = 'PageUp';\n/** @hidden */\nexport var pageDown = 'PageDown';\n/** @hidden */\nexport var enter = 'enter';\n/** @hidden */\nexport var shiftEnter = 'shiftEnter';\n/** @hidden */\nexport var tab = 'tab';\n/** @hidden */\nexport var shiftTab = 'shiftTab';\n/** @hidden */\nexport var initialFrozenColumnIndex = 'initialFrozenColumnIndex';\n","import { isNullOrUndefined, extend, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { attributes as addAttributes } from '@syncfusion/ej2-base';\nimport { rowDataBound, queryCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, getObject, extendObjWithFn, applyStickyLeftRightPosition, groupCaptionRowLeftRightPos, resetColspanGroupCaption, resetColandRowSpanStickyPosition } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { CellMergeRender } from './cell-merge-renderer';\nimport * as literals from '../base/string-literals';\n/**\n * RowRenderer class which responsible for building row content.\n *\n * @hidden\n */\nvar RowRenderer = /** @class */ (function () {\n function RowRenderer(serviceLocator, cellType, parent) {\n this.isSpan = false;\n this.cellType = cellType;\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n this.element = this.parent.createElement('tr', { attrs: { role: 'row' } });\n }\n /* eslint-disable */\n /**\n * Function to render the row content based on Column[] and data.\n *\n * @param {Row} row - specifies the row\n * @param {Column[]} columns - specifies the columns\n * @param {Object} attributes - specifies the attributes\n * @param {string} rowTemplate - specifies the rowTemplate\n * @param {Element} cloneNode - specifies the cloneNode\n * @returns {Element} returns the element\n */\n /* eslint-enable */\n RowRenderer.prototype.render = function (row, columns, attributes, rowTemplate, cloneNode) {\n return this.refreshRow(row, columns, attributes, rowTemplate, cloneNode);\n };\n /* eslint-disable */\n /**\n * Function to refresh the row content based on Column[] and data.\n *\n * @param {Row} row - specifies the row\n * @param {Column[]} columns - specifies the column\n * @param {boolean} isChanged - specifies isChanged\n * @param {Object} attributes - specifies the attributes\n * @param {string} rowTemplate - specifies the rowTemplate\n * @returns {void}\n */\n /* eslint-enable */\n RowRenderer.prototype.refresh = function (row, columns, isChanged, attributes, rowTemplate) {\n var _this = this;\n if (isChanged) {\n row.data = extendObjWithFn({}, row.changes);\n this.refreshMergeCells(row);\n }\n var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');\n var tr = this.refreshRow(row, columns, attributes, rowTemplate, null, isChanged);\n var cells = [].slice.call(tr.cells);\n var tempCells = [].slice.call(node.querySelectorAll('.e-templatecell'));\n if (this.parent.isReact && tempCells.length) {\n var _loop_1 = function (col) {\n if (col.template) {\n setTimeout(function () {\n _this.parent.refreshReactColumnTemplateByUid(col.uid, true);\n }, 0);\n return \"break\";\n }\n };\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n var state_1 = _loop_1(col);\n if (state_1 === \"break\")\n break;\n }\n }\n var attr = [].slice.call(tr.attributes);\n attr.map(function (item) {\n node.setAttribute(item['name'], item['value']);\n });\n node.innerHTML = '';\n for (var _a = 0, cells_1 = cells; _a < cells_1.length; _a++) {\n var cell = cells_1[_a];\n node.appendChild(cell);\n }\n };\n // tslint:disable-next-line:max-func-body-length\n RowRenderer.prototype.refreshRow = function (row, columns, attributes, rowTemplate, cloneNode, isEdit) {\n var tr = !isNullOrUndefined(cloneNode) ? cloneNode : this.element.cloneNode();\n var rowArgs = { data: row.data };\n var cellArgs = { data: row.data };\n var chekBoxEnable = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox' && col.field; })[0];\n var value = false;\n var isFrozen = this.parent.isFrozenGrid();\n if (chekBoxEnable) {\n value = getObject(chekBoxEnable.field, rowArgs.data);\n }\n var selIndex = this.parent.getSelectedRowIndexes();\n if (row.isDataRow) {\n row.isSelected = selIndex.indexOf(row.index) > -1 || value;\n }\n if (row.isDataRow && this.parent.isCheckBoxSelection\n && this.parent.checkAllRows === 'Check' && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n row.isSelected = true;\n if (selIndex.indexOf(row.index) === -1) {\n selIndex.push(row.index);\n }\n }\n this.buildAttributeFromRow(tr, row);\n addAttributes(tr, extend({}, attributes, {}));\n setStyleAndAttributes(tr, row.attributes);\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var _loop_2 = function (i, len) {\n var cell = row.cells[parseInt(i.toString(), 10)];\n cell.isSelected = row.isSelected;\n cell.isColumnSelected = cell.column.isSelected;\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[parseInt(i.toString(), 10)].cellType\n || CellType.Data);\n var attrs = { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' };\n if (row.isExpand && row.cells[parseInt(i.toString(), 10)].cellType === CellType.DetailExpand) {\n attrs['class'] = this_1.parent.isPrinting ? 'e-detailrowcollapse' : 'e-detailrowexpand';\n }\n var td = cellRenderer.render(row.cells[parseInt(i.toString(), 10)], row.data, attrs, row.isExpand, isEdit);\n if (row.cells[parseInt(i.toString(), 10)].cellType !== CellType.Filter) {\n if (row.cells[parseInt(i.toString(), 10)].cellType === CellType.Data\n || row.cells[parseInt(i.toString(), 10)].cellType === CellType.CommandColumn) {\n var isReactChild = this_1.parent.parentDetails && this_1.parent.parentDetails.parentInstObj &&\n this_1.parent.parentDetails.parentInstObj.isReact;\n if (((this_1.parent.isReact && this_1.parent.requireTemplateRef) || (isReactChild &&\n this_1.parent.parentDetails.parentInstObj.requireTemplateRef)) && cell.isTemplate) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = this_1;\n thisRef_1.parent.renderTemplates(function () {\n if (typeof (cell.column.template) !== 'string') {\n var ariaAttr = td.getAttribute('aria-label');\n td.setAttribute('aria-label', td.innerText + ariaAttr);\n }\n thisRef_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[parseInt(i.toString(), 10)].foreignKeyData,\n requestType: thisRef_1.parent.requestTypeAction\n }));\n });\n }\n else {\n this_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[parseInt(i.toString(), 10)].foreignKeyData,\n requestType: this_1.parent.requestTypeAction\n }));\n }\n var isRowSpanned = false;\n if (row.index > 0 && (this_1.isSpan || (this_1.parent.isSpan && isEdit))) {\n var rowsObject = this_1.parent.getRowsObject();\n var prevRowCells = this_1.parent.groupSettings.columns.length > 0 &&\n !rowsObject[row.index - 1].isDataRow ? rowsObject[row.index].cells : rowsObject[row.index - 1].cells;\n var uid_1 = 'uid';\n var prevRowCell = prevRowCells.filter(function (cell) {\n return cell.column.uid === row.cells[parseInt(i.toString(), 10)].column[\"\" + uid_1];\n })[0];\n isRowSpanned = prevRowCell.isRowSpanned ? prevRowCell.isRowSpanned : prevRowCell.rowSpanRange > 1;\n }\n if ((cellArgs.rowSpan > 1 || cellArgs.colSpan > 1)) {\n this_1.resetrowSpanvalue(this_1.parent.frozenRows > row.index ? this_1.parent.frozenRows :\n this_1.parent.currentViewData.length, cellArgs, row.index);\n if (cellArgs.column.visible === false) {\n cellArgs.colSpan = 1;\n }\n else {\n if (isFrozen) {\n var columns_2 = this_1.parent.getColumns();\n var right = this_1.parent.getFrozenRightColumnsCount();\n var left = this_1.parent.getFrozenLeftCount();\n var movableCount = columns_2.length - right;\n var cellIdx = cellArgs.column.index;\n if (left > cellIdx && left < (cellIdx + cellArgs.colSpan)) {\n var colSpan = (cellIdx + cellArgs.colSpan) - left;\n cellArgs.colSpan = cellArgs.colSpan - colSpan;\n }\n else if (movableCount <= cellIdx && columns_2.length < (cellIdx + cellArgs.colSpan)) {\n var colSpan = (cellIdx + cellArgs.colSpan) - columns_2.length;\n cellArgs.colSpan = cellArgs.colSpan - colSpan;\n }\n else if (cellArgs.column.freeze === 'Fixed') {\n var colSpan = 1;\n var index = cellIdx;\n for (var j = index + 1; j < index + cellArgs.colSpan; j++) {\n if (columns_2[parseInt(j.toString(), 10)].freeze === 'Fixed') {\n colSpan++;\n }\n else {\n break;\n }\n }\n cellArgs.colSpan = colSpan;\n }\n else if (movableCount > cellIdx && movableCount < (cellIdx + cellArgs.colSpan)) {\n var colSpan = (cellIdx + cellArgs.colSpan) - movableCount;\n cellArgs.colSpan = cellArgs.colSpan - colSpan;\n }\n }\n }\n }\n if (cellArgs.colSpan > 1 || row.cells[parseInt(i.toString(), 10)].cellSpan > 1 || cellArgs.rowSpan > 1\n || isRowSpanned) {\n this_1.parent.isSpan = true;\n this_1.isSpan = true;\n var cellMerge = new CellMergeRender(this_1.serviceLocator, this_1.parent);\n td = cellMerge.render(cellArgs, row, i, td);\n if (isFrozen) {\n resetColandRowSpanStickyPosition(this_1.parent, cellArgs.column, td, cellArgs.colSpan);\n }\n }\n }\n if (isFrozen && this_1.isSpan) {\n var rowsObject = this_1.parent.getRowsObject();\n var isRtl = this_1.parent.enableRtl;\n if (rowsObject[row.index - 1]) {\n var prevRowCells = rowsObject[row.index - 1].cells;\n var prevRowCell = prevRowCells[i - 1];\n var nextRowCell = prevRowCells[i + 1];\n var direction = prevRowCells[parseInt(i.toString(), 10)].column.freeze;\n if (prevRowCell && (prevRowCell.isRowSpanned || prevRowCell.rowSpanRange > 1) && prevRowCell.visible) {\n if (prevRowCell.column.freeze === 'Fixed' && direction === 'Fixed') {\n td.classList.add(isRtl ? 'e-removefreezerightborder' : 'e-removefreezeleftborder');\n }\n else if (!isRtl && i === 1 && direction === 'Left') {\n td.classList.add('e-addfreezefirstchildborder');\n }\n }\n if (nextRowCell && (nextRowCell.isRowSpanned || nextRowCell.rowSpanRange > 1) && nextRowCell.visible &&\n nextRowCell.column.freeze === 'Fixed' && direction === 'Fixed' && cellArgs.colSpan < 2) {\n td.classList.add(isRtl ? 'e-removefreezeleftborder' : 'e-removefreezerightborder');\n }\n }\n }\n if (cellArgs.rowSpan > 1 && this_1.parent.currentViewData.length - row.index === cellArgs.rowSpan) {\n td.classList.add('e-row-span-lastrowcell');\n }\n if (!row.cells[parseInt(i.toString(), 10)].isSpanned) {\n tr.appendChild(td);\n }\n }\n };\n var this_1 = this;\n for (var i = 0, len = row.cells.length; i < len; i++) {\n _loop_2(i, len);\n }\n var emptyColspan = 0;\n if (this.parent.groupSettings.columns.length && this.parent.getFrozenLeftColumnsCount()) {\n if (tr.classList.contains('e-groupcaptionrow')) {\n var freezeCells = [].slice.call(tr.querySelectorAll('.e-leftfreeze,.e-unfreeze,.e-rightfreeze,.e-fixedfreeze,.e-freezerightborder,.e-freezeleftborder'));\n if (freezeCells.length) {\n removeClass(freezeCells, ['e-leftfreeze', 'e-unfreeze', 'e-rightfreeze', 'e-fixedfreeze', 'e-freezerightborder', 'e-freezeleftborder']);\n }\n if (tr.querySelector('.e-summarycell')) {\n groupCaptionRowLeftRightPos(tr, this.parent);\n }\n else {\n for (var j = 0; j < tr.childNodes.length; j++) {\n var td = tr.childNodes[parseInt(j.toString(), 10)];\n td.classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td, j * 30, this.parent.enableRtl, 'Left');\n if (td.classList.contains('e-groupcaption')) {\n var oldColspan = parseInt(td.getAttribute('colspan'), 10);\n var colspan = resetColspanGroupCaption(this.parent, j);\n td.setAttribute('colspan', colspan.toString());\n emptyColspan = oldColspan - colspan;\n }\n }\n if (emptyColspan) {\n var td = this.parent.createElement('TD', {\n className: 'e-groupcaption',\n attrs: { colspan: emptyColspan.toString(), id: this.parent.element.id + 'captioncell', tabindex: '-1' }\n });\n tr.appendChild(td);\n }\n }\n }\n if (tr.querySelectorAll('.e-leftfreeze').length &&\n (tr.querySelectorAll('.e-indentcell').length || tr.querySelectorAll('.e-grouptopleftcell').length)) {\n var td = tr.querySelectorAll('.e-indentcell, .e-grouptopleftcell');\n for (var i = 0; i < td.length; i++) {\n td[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td[parseInt(i.toString(), 10)], i * 30, this.parent.enableRtl, 'Left');\n }\n }\n }\n var args = { row: tr, rowHeight: this.parent.rowHeight };\n if (row.isDataRow) {\n var eventArg_1 = extend(rowArgs, args);\n eventArg_1.isSelectable = true;\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var cellTemplate = eventArg_1.row.querySelectorAll('.e-templatecell');\n if (((this.parent.isReact && this.parent.requireTemplateRef) || (isReactChild &&\n this.parent.parentDetails.parentInstObj.requireTemplateRef)) && cellTemplate.length) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_2 = this;\n thisRef_2.parent.renderTemplates(function () {\n thisRef_2.parent.trigger(rowDataBound, eventArg_1);\n if (!eventArg_1.isSelectable) {\n row.isSelectable = eventArg_1.isSelectable;\n thisRef_2.disableRowSelection(thisRef_2, row, args, eventArg_1);\n }\n });\n }\n else {\n this.parent.trigger(rowDataBound, eventArg_1);\n }\n row.isSelectable = eventArg_1.isSelectable;\n var isDraggable = this.parent.isRowDragable();\n if (this.parent.allowPaging && this.parent.selectionSettings.persistSelection) {\n var primaryKey_1 = this.parent.getPrimaryKeyFieldNames()[0];\n var pKey_1 = row.data ? row.data[\"\" + primaryKey_1] : null;\n var SelectedRecords = eventArg_1.isSelectable ? this.parent.partialSelectedRecords :\n this.parent.disableSelectedRecords;\n if (!SelectedRecords.some(function (data) { return data[\"\" + primaryKey_1] === pKey_1; })) {\n SelectedRecords.push(row.data);\n }\n }\n if (!eventArg_1.isSelectable) {\n this.disableRowSelection(this, row, args, eventArg_1);\n }\n if (this.parent.childGrid || isDraggable || this.parent.detailTemplate) {\n var td = tr.querySelectorAll('.e-rowcell:not(.e-hide)')[0];\n if (td) {\n td.classList.add('e-detailrowvisible');\n }\n }\n }\n if (this.parent.enableVirtualization) {\n rowArgs.rowHeight = this.parent.rowHeight;\n }\n if (rowArgs.rowHeight) {\n tr.style.height = rowArgs.rowHeight + 'px';\n }\n else if (this.parent.rowHeight && (tr.querySelector('.e-headercell') || tr.querySelector('.e-groupcaption'))) {\n tr.style.height = this.parent.rowHeight + 'px';\n }\n if (row.cssClass) {\n tr.classList.add(row.cssClass);\n }\n if (row.lazyLoadCssClass) {\n tr.classList.add(row.lazyLoadCssClass);\n }\n if (this.parent.rowRenderingMode === 'Vertical' && this.parent.allowTextWrap && (this.parent.textWrapSettings.wrapMode === 'Header'\n || this.parent.textWrapSettings.wrapMode === 'Both')) {\n tr.classList.add('e-verticalwrap');\n }\n var vFTable = this.parent.enableColumnVirtualization;\n if (!vFTable && this.parent.aggregates.length && this.parent.element.scrollHeight > this.parent.height) {\n for (var i = 0; i < this.parent.aggregates.length; i++) {\n var property = 'properties';\n var column = 'columns';\n if (this.parent.aggregates[parseInt(i.toString(), 10)][\"\" + property][\"\" + column][0].footerTemplate) {\n var summarycell = [].slice.call(tr.getElementsByClassName('e-summarycell'));\n if (summarycell.length) {\n var lastSummaryCell = (summarycell[summarycell.length - 1]);\n addClass([lastSummaryCell], ['e-lastsummarycell']);\n var firstSummaryCell = (summarycell[0]);\n addClass([firstSummaryCell], ['e-firstsummarycell']);\n }\n }\n }\n }\n return tr;\n };\n RowRenderer.prototype.resetrowSpanvalue = function (rowCount, cellArgs, rowIndex) {\n if (rowCount > rowIndex && rowCount < rowIndex + cellArgs.rowSpan) {\n var rowSpan = (rowIndex + cellArgs.rowSpan) - rowCount;\n cellArgs.rowSpan = cellArgs.rowSpan - rowSpan;\n }\n };\n RowRenderer.prototype.disableRowSelection = function (thisRef, row, args, eventArg) {\n var selIndex = this.parent.getSelectedRowIndexes();\n this.parent.selectionModule.isPartialSelection = true;\n row.isSelected = false;\n var selRowIndex = selIndex.indexOf(row.index);\n if (selRowIndex > -1) {\n selIndex.splice(selRowIndex, 1);\n }\n var chkBox = args.row.querySelectorAll('.e-rowcell.e-gridchkbox');\n var isDrag = eventArg.row.querySelector('.e-rowdragdrop');\n var cellIdx = thisRef.parent.groupSettings.columns.length + (isDrag || thisRef.parent.isDetail() ? 1 : 0);\n for (var i = 0; i < chkBox.length; i++) {\n chkBox[parseInt(i.toString(), 10)].firstElementChild.classList.add('e-checkbox-disabled');\n chkBox[parseInt(i.toString(), 10)].querySelector('.e-frame').classList.remove('e-check');\n }\n if (row.cells.length) {\n for (var i = cellIdx; i < row.cells.length; i++) {\n var cell = eventArg.row.querySelector('.e-rowcell[data-colindex=\"' + row.cells[parseInt(i.toString(), 10)].index + '\"]');\n if (cell) {\n removeClass([cell], ['e-selectionbackground', 'e-active']);\n }\n }\n }\n if (isDrag) {\n removeClass([isDrag], ['e-selectionbackground', 'e-active']);\n }\n };\n RowRenderer.prototype.refreshMergeCells = function (row) {\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n cell.isSpanned = false;\n }\n return row;\n };\n /* eslint-disable */\n /**\n * Function to check and add alternative row css class.\n *\n * @param {Element} tr - specifies the tr element\n * @param {Row} row - specifies the row\n * @returns {void}\n */\n /* eslint-enable */\n RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {\n var attr = {};\n var prop = { 'rowindex': literals.dataRowIndex, 'dataUID': 'data-uid', 'ariaSelected': 'aria-selected' };\n var classes = [];\n if (row.isDataRow) {\n classes.push(literals.row);\n }\n if (row.isAltRow) {\n classes.push('e-altrow');\n }\n if (row.isCaptionRow) {\n classes.push('e-groupcaptionrow');\n }\n if (row.isAggregateRow && row.parentUid) {\n classes.push('e-groupfooterrow');\n }\n if (!isNullOrUndefined(row.index)) {\n attr[literals.ariaRowIndex] = row.index + 1;\n attr[prop.rowindex] = row.index;\n }\n if (row.rowSpan) {\n attr.rowSpan = row.rowSpan;\n }\n if (row.uid) {\n attr[prop.dataUID] = row.uid;\n }\n if (row.isSelected) {\n attr[prop.ariaSelected] = true;\n }\n if (row.visible === false) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(tr, attr);\n };\n return RowRenderer;\n}());\nexport { RowRenderer };\n","import { isNullOrUndefined, getValue, setValue } from '@syncfusion/ej2-base';\nimport { Row } from '../models/row';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\nimport { getUid } from '../base/util';\nimport { getForeignData } from '../../grid/base/util';\nimport * as events from '../base/constant';\n/**\n * RowModelGenerator is used to generate grid data rows.\n *\n * @hidden\n */\nvar RowModelGenerator = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function RowModelGenerator(parent) {\n this.parent = parent;\n }\n RowModelGenerator.prototype.generateRows = function (data, args) {\n var rows = [];\n var startIndex = this.parent.enableVirtualization && args ? args.startIndex : 0;\n startIndex = this.parent.enableInfiniteScrolling && args ? this.getInfiniteIndex(args) : startIndex;\n if (this.parent.enableImmutableMode && args && args.startIndex) {\n startIndex = args.startIndex;\n }\n for (var i = 0, len = Object.keys(data).length; i < len; i++, startIndex++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(data[parseInt(i.toString(), 10)], startIndex);\n }\n return rows;\n };\n RowModelGenerator.prototype.ensureColumns = function () {\n //TODO: generate dummy column for group, detail here;\n var cols = [];\n if (this.parent.detailTemplate || this.parent.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n cols.push(this.generateCell(args, null, CellType.DetailExpand));\n }\n if (this.parent.isRowDragable()) {\n cols.push(this.generateCell({}, null, CellType.RowDragIcon));\n }\n return cols;\n };\n RowModelGenerator.prototype.generateRow = function (data, index, cssClass, indent, pid, tIndex, parentUid) {\n var options = {};\n options.foreignKeyData = {};\n options.uid = getUid('grid-row');\n options.data = data;\n options.index = index;\n options.indent = indent;\n options.tIndex = tIndex;\n options.isDataRow = true;\n options.parentGid = pid;\n options.parentUid = parentUid;\n if (this.parent.isPrinting) {\n if (this.parent.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (this.parent.hierarchyPrintMode === 'Expanded' && this.parent.expandedRows && this.parent.expandedRows[parseInt(index.toString(), 10)]) {\n options.isExpand = this.parent.expandedRows[parseInt(index.toString(), 10)].isExpand;\n }\n }\n options.cssClass = cssClass;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isSelected = this.parent.getSelectedRowIndexes().indexOf(index) > -1;\n this.refreshForeignKeyRow(options);\n var cells = this.ensureColumns();\n var row = new Row(options, this.parent);\n row.cells = this.parent.getFrozenMode() === 'Right' ? this.generateCells(options).concat(cells)\n : cells.concat(this.generateCells(options));\n return row;\n };\n RowModelGenerator.prototype.refreshForeignKeyRow = function (options) {\n var foreignKeyColumns = this.parent.getForeignKeyColumns();\n for (var i = 0; i < foreignKeyColumns.length; i++) {\n setValue(foreignKeyColumns[parseInt(i.toString(), 10)].field, getForeignData(foreignKeyColumns[parseInt(i.toString(), 10)], options.data), options.foreignKeyData);\n }\n };\n RowModelGenerator.prototype.generateCells = function (options) {\n var dummies = this.parent.getColumns();\n var tmp = [];\n for (var i = 0; i < dummies.length; i++) {\n tmp.push(this.generateCell(dummies[parseInt(i.toString(), 10)], options.uid, isNullOrUndefined(dummies[parseInt(i.toString(), 10)].commands) ? undefined : CellType.CommandColumn, null, i, options.foreignKeyData));\n }\n return tmp;\n };\n /**\n *\n * @param {Column} column - Defines column details\n * @param {string} rowId - Defines row id\n * @param {CellType} cellType - Defines cell type\n * @param {number} colSpan - Defines colSpan\n * @param {number} oIndex - Defines index\n * @param {Object} foreignKeyData - Defines foreign key data\n * @returns {Cell} returns cell model\n * @hidden\n */\n RowModelGenerator.prototype.generateCell = function (column, rowId, cellType, colSpan, oIndex, foreignKeyData) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(column.field || column.template),\n 'isTemplate': !isNullOrUndefined(column.template),\n 'rowID': rowId,\n 'column': column,\n 'cellType': !isNullOrUndefined(cellType) ? cellType : CellType.Data,\n 'colSpan': colSpan,\n 'commands': column.commands,\n 'isForeignKey': column.isForeignColumn && column.isForeignColumn(),\n 'foreignKeyData': column.isForeignColumn && column.isForeignColumn() && getValue(column.field, foreignKeyData)\n };\n if (opt.isDataCell || opt.column.type === 'checkbox' || opt.commands) {\n opt.index = oIndex;\n }\n return new Cell(opt);\n };\n RowModelGenerator.prototype.refreshRows = function (input) {\n for (var i = 0; i < input.length; i++) {\n this.refreshForeignKeyRow(input[parseInt(i.toString(), 10)]);\n input[parseInt(i.toString(), 10)].cells = this.generateCells(input[parseInt(i.toString(), 10)]);\n }\n return input;\n };\n RowModelGenerator.prototype.getInfiniteIndex = function (args) {\n return args.requestType === 'infiniteScroll' || args.requestType === 'delete' || args.action === 'add'\n ? (isNullOrUndefined(args.startIndex) ? args['index'] : args.startIndex) : 0;\n };\n return RowModelGenerator;\n}());\nexport { RowModelGenerator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Row } from '../models/row';\nimport { Column } from '../models/column';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { calculateAggregate, getUid } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\n/**\n * Summary row model generator\n *\n * @hidden\n */\nvar SummaryModelGenerator = /** @class */ (function () {\n /**\n * Constructor for Summary row model generator\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function SummaryModelGenerator(parent) {\n this.parent = parent;\n }\n SummaryModelGenerator.prototype.getData = function () {\n var _this = this;\n var rows = [];\n var row = this.parent.aggregates.slice();\n for (var i = 0; i < row.length; i++) {\n var columns = row[parseInt(i.toString(), 10)].columns.filter(function (column) {\n return !(column.footerTemplate || column.groupFooterTemplate || column.groupCaptionTemplate)\n || _this.columnSelector(column);\n });\n if (columns.length) {\n rows.push({ columns: columns });\n }\n }\n return rows;\n };\n SummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.footerTemplate !== undefined;\n };\n SummaryModelGenerator.prototype.getColumns = function (start) {\n var columns = [];\n if (this.parent.detailTemplate || !isNullOrUndefined(this.parent.childGrid)) {\n columns.push(new Column({}));\n }\n if (this.parent.allowGrouping) {\n for (var i = 0; i < this.parent.groupSettings.columns.length; i++) {\n columns.push(new Column({}));\n }\n }\n if (this.parent.isRowDragable() && !start) {\n columns.push(new Column({}));\n }\n columns.push.apply(columns, this.parent.getColumns());\n return columns;\n };\n SummaryModelGenerator.prototype.generateRows = function (input, args, start, end, columns) {\n if (input.length === 0) {\n if (args === undefined || !(args.count || args.loadSummaryOnEmpty)) {\n return [];\n }\n }\n var data = this.buildSummaryData(input, args);\n var rows = [];\n var row = this.getData();\n for (var i = 0; i < row.length; i++) {\n rows.push(this.getGeneratedRow(row[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)], args ? args.level : undefined, start, end, args ? args.parentUid : undefined, columns));\n }\n return rows;\n };\n SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw, start, end, parentUid, columns) {\n var tmp = [];\n var indents = this.getIndentByLevel();\n var isDetailGridAlone = !isNullOrUndefined(this.parent.childGrid);\n var indentLength = this.parent.getIndentCount();\n if (this.parent.groupSettings.columns.length && this.parent.allowRowDragAndDrop) {\n indents.push('e-indentcelltop');\n }\n else if (this.parent.isRowDragable() && !start) {\n indents = ['e-indentcelltop'];\n }\n var values = columns ? columns : this.getColumns(start);\n for (var i = 0; i < values.length; i++) {\n tmp.push(this.getGeneratedCell(values[parseInt(i.toString(), 10)], summaryRow, i >= indentLength ? this.getCellType() :\n i === 0 && this.parent.childGrid ? CellType.DetailFooterIntent : CellType.Indent, indents[parseInt(i.toString(), 10)], isDetailGridAlone));\n }\n var row = new Row({ data: data, attributes: { class: 'e-summaryrow' } });\n row.cells = tmp;\n row.uid = getUid('grid-row');\n row.parentUid = parentUid;\n row.isAggregateRow = true;\n row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });\n return row;\n };\n SummaryModelGenerator.prototype.getGeneratedCell = function (column, summaryRow, cellType, indent, isDetailGridAlone) {\n //Get the summary column by display\n var sColumn = summaryRow.columns.filter(function (scolumn) { return scolumn.columnName === column.field; })[0];\n var attrs = {\n 'style': { 'textAlign': column.textAlign },\n 'e-mappinguid': column.uid, index: column.index\n };\n if (indent) {\n attrs.class = indent;\n }\n if (isNullOrUndefined(indent) && isDetailGridAlone) {\n attrs.class = 'e-detailindentcelltop';\n }\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(sColumn),\n 'isTemplate': sColumn && !isNullOrUndefined(sColumn.footerTemplate\n || sColumn.groupFooterTemplate || sColumn.groupCaptionTemplate),\n 'column': sColumn || {},\n 'attributes': attrs,\n 'cellType': cellType\n };\n opt.column.headerText = column.headerText;\n return new Cell(opt);\n };\n SummaryModelGenerator.prototype.buildSummaryData = function (data, args) {\n var dummy = [];\n var summaryRows = this.getData();\n var single = {};\n for (var i = 0; i < summaryRows.length; i++) {\n single = {};\n var column = summaryRows[parseInt(i.toString(), 10)].columns;\n for (var j = 0; j < column.length; j++) {\n single = this.setTemplate(column[parseInt(j.toString(), 10)], (args && args.aggregates) ? args : data, single);\n }\n dummy.push(single);\n }\n return dummy;\n };\n SummaryModelGenerator.prototype.getIndentByLevel = function () {\n return this.parent.groupSettings.columns.map(function () { return 'e-indentcelltop'; });\n };\n SummaryModelGenerator.prototype.setTemplate = function (column, data, single) {\n var types = column.type;\n var helper = {};\n var formatFn = column.getFormatter() || (function () { return function (a) { return a; }; })();\n var group = data;\n if (!(types instanceof Array)) {\n types = [column.type];\n }\n for (var i = 0; i < types.length; i++) {\n var key = column.field + ' - ' + types[parseInt(i.toString(), 10)].toLowerCase();\n var disp = column.columnName;\n var disablePageWiseAggregatesGroup = this.parent.groupSettings.disablePageWiseAggregates\n && this.parent.groupSettings.columns.length && group.items ? true : false;\n var val = (types[parseInt(i.toString(), 10)] !== 'Custom' || disablePageWiseAggregatesGroup) && group.aggregates\n && key in group.aggregates ? group.aggregates[\"\" + key] :\n calculateAggregate(types[parseInt(i.toString(), 10)], group.aggregates ? group : data, column, this.parent);\n single[\"\" + disp] = single[\"\" + disp] || {};\n single[\"\" + disp][\"\" + key] = val;\n single[\"\" + disp][types[parseInt(i.toString(), 10)]] = !isNullOrUndefined(val) ? formatFn(val) : ' ';\n if (group.field) {\n single[\"\" + disp].field = group.field;\n single[\"\" + disp].key = group.key;\n }\n }\n helper.format = column.getFormatter();\n column.setTemplate(helper);\n return single;\n };\n SummaryModelGenerator.prototype.getCellType = function () {\n return CellType.Summary;\n };\n return SummaryModelGenerator;\n}());\nexport { SummaryModelGenerator };\nvar GroupSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(GroupSummaryModelGenerator, _super);\n function GroupSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n GroupSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupFooterTemplate !== undefined;\n };\n GroupSummaryModelGenerator.prototype.getIndentByLevel = function (level) {\n if (level === void 0) { level = this.parent.groupSettings.columns.length; }\n if (this.parent.allowRowDragAndDrop && this.parent.groupSettings.columns.length) {\n level -= 1;\n }\n return this.parent.groupSettings.columns.map(function (v, indx) { return indx <= level - 1 ? '' : 'e-indentcelltop'; });\n };\n GroupSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.GroupSummary;\n };\n return GroupSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { GroupSummaryModelGenerator };\nvar CaptionSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(CaptionSummaryModelGenerator, _super);\n function CaptionSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CaptionSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupCaptionTemplate !== undefined;\n };\n CaptionSummaryModelGenerator.prototype.getData = function () {\n var initVal = { columns: [] };\n return [_super.prototype.getData.call(this).reduce(function (prev, cur) {\n prev.columns = prev.columns.concat(cur.columns);\n return prev;\n }, initVal)];\n };\n CaptionSummaryModelGenerator.prototype.isEmpty = function () {\n return (this.getData()[0].columns || []).length === 0;\n };\n CaptionSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.CaptionSummary;\n };\n return CaptionSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { CaptionSummaryModelGenerator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Row } from '../models/row';\nimport { isNullOrUndefined, extend, setValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';\nimport { getForeignData, getUid } from '../../grid/base/util';\n/**\n * GroupModelGenerator is used to generate group caption rows and data rows.\n *\n * @hidden\n */\nvar GroupModelGenerator = /** @class */ (function (_super) {\n __extends(GroupModelGenerator, _super);\n function GroupModelGenerator(parent) {\n var _this = _super.call(this, parent) || this;\n _this.rows = [];\n /** @hidden */\n _this.index = 0;\n _this.infiniteChildCount = 0;\n _this.renderInfiniteAgg = true;\n _this.parent = parent;\n _this.summaryModelGen = new GroupSummaryModelGenerator(parent);\n _this.captionModelGen = new CaptionSummaryModelGenerator(parent);\n return _this;\n }\n GroupModelGenerator.prototype.generateRows = function (data, args) {\n if (this.parent.groupSettings.columns.length === 0) {\n return _super.prototype.generateRows.call(this, data, args);\n }\n this.isInfiniteScroll = (args.requestType === 'infiniteScroll');\n this.rows = [];\n this.index = this.parent.enableVirtualization || this.isInfiniteScroll ? args.startIndex : 0;\n for (var i = 0, len = data.length; i < len; i++) {\n this.infiniteChildCount = 0;\n this.renderInfiniteAgg = true;\n this.getGroupedRecords(0, data[parseInt(i.toString(), 10)], data.level, i, undefined, this.rows.length);\n }\n this.index = 0;\n if (this.parent.isCollapseStateEnabled()) {\n this.ensureRowVisibility();\n }\n return this.rows;\n };\n GroupModelGenerator.prototype.getGroupedRecords = function (index, data, raw, parentid, childId, tIndex, parentUid) {\n var _a;\n var level = raw;\n if (isNullOrUndefined(data.items)) {\n if (isNullOrUndefined(data.GroupGuid)) {\n this.rows = this.rows.concat(this.generateDataRows(data, index, parentid, this.rows.length, parentUid));\n }\n else {\n for (var j = 0, len = data.length; j < len; j++) {\n this.getGroupedRecords(index, data[parseInt(j.toString(), 10)], data.level, parentid, index, this.rows.length, parentUid);\n }\n }\n }\n else {\n var preCaption = void 0;\n var captionRow = this.generateCaptionRow(data, index, parentid, childId, tIndex, parentUid);\n if (this.isInfiniteScroll) {\n preCaption = this.getPreCaption(index, captionRow.data.key);\n }\n if (!preCaption) {\n this.rows = this.rows.concat(captionRow);\n }\n else {\n captionRow.uid = preCaption.uid;\n }\n if (data.items && data.items.length) {\n this.getGroupedRecords(index + 1, data.items, data.items.level, parentid, index + 1, this.rows.length, captionRow.uid);\n }\n if (this.parent.aggregates.length && this.isRenderAggregate(captionRow)) {\n var rowCnt = this.rows.length;\n (_a = this.rows).push.apply(_a, this.summaryModelGen.generateRows(data, { level: level, parentUid: captionRow.uid }));\n for (var i = rowCnt - 1; i >= 0; i--) {\n if (this.rows[parseInt(i.toString(), 10)].isCaptionRow) {\n this.rows[parseInt(i.toString(), 10)].aggregatesCount = this.rows.length - rowCnt;\n }\n else if (!this.rows[parseInt(i.toString(), 10)].isCaptionRow && !this.rows[parseInt(i.toString(), 10)].isDataRow) {\n break;\n }\n }\n }\n if (preCaption) {\n this.setInfiniteRowVisibility(preCaption);\n }\n }\n };\n GroupModelGenerator.prototype.isRenderAggregate = function (data) {\n if (this.parent.enableInfiniteScrolling) {\n if (!this.renderInfiniteAgg) {\n return false;\n }\n this.getPreCaption(data.indent, data.data.key);\n this.renderInfiniteAgg = data.data.count === this.infiniteChildCount;\n return this.renderInfiniteAgg;\n }\n return !this.parent.enableInfiniteScrolling;\n };\n GroupModelGenerator.prototype.getPreCaption = function (indent, key) {\n var rowObj = this.parent.getRowsObject().concat(this.rows);\n var preCap;\n this.infiniteChildCount = 0;\n var i = rowObj.length;\n while (i--) {\n if (rowObj[parseInt(i.toString(), 10)].isCaptionRow && rowObj[parseInt(i.toString(), 10)].indent === indent) {\n var groupKey = rowObj[parseInt(i.toString(), 10)].data.key;\n if ((groupKey.toString() === key.toString() && groupKey instanceof Date) || groupKey === key) {\n preCap = rowObj[parseInt(i.toString(), 10)];\n }\n }\n if (rowObj[parseInt(i.toString(), 10)].indent === indent || rowObj[parseInt(i.toString(), 10)].indent < indent) {\n break;\n }\n if (rowObj[parseInt(i.toString(), 10)].indent === indent + 1) {\n this.infiniteChildCount++;\n }\n }\n return preCap;\n };\n GroupModelGenerator.prototype.getCaptionRowCells = function (field, indent, data) {\n var cells = [];\n var visibles = [];\n var column = this.parent.getColumnByField(field);\n var indexes = this.parent.getColumnIndexesInView();\n if (this.parent.enableColumnVirtualization) {\n column = this.parent.columns.filter(function (c) { return c.field === field; })[0];\n }\n var groupedLen = this.parent.groupSettings.columns.length;\n var gObj = this.parent;\n if (!this.parent.enableColumnVirtualization || indexes.indexOf(indent) !== -1) {\n for (var i = 0; i < indent; i++) {\n cells.push(this.generateIndentCell());\n }\n cells.push(this.generateCell({}, null, CellType.Expand));\n }\n indent = this.parent.enableColumnVirtualization ? 1 :\n (this.parent.getVisibleColumns().length + groupedLen + (gObj.detailTemplate || gObj.childGrid ? 1 : 0) -\n indent + (this.parent.getVisibleColumns().length ? -1 : 0));\n //Captionsummary cells will be added here.\n if (this.parent.aggregates.length && !this.captionModelGen.isEmpty()) {\n var captionCells = this.captionModelGen.generateRows(data)[0];\n extend(data, captionCells.data);\n var cIndex_1 = 0;\n captionCells.cells.some(function (cell, index) { cIndex_1 = index; return cell.visible && cell.isDataCell; });\n visibles = captionCells.cells.slice(cIndex_1).filter(function (cell) { return cell.visible; });\n if (captionCells.visible && visibles[0].column.field === this.parent.getVisibleColumns()[0].field) {\n visibles = visibles.slice(1);\n }\n if (this.parent.getVisibleColumns().length === 1) {\n visibles = [];\n }\n indent = indent - visibles.length;\n }\n var cols = (!this.parent.enableColumnVirtualization ? [column] : this.parent.getColumns());\n var wFlag = true;\n for (var j = 0; j < cols.length; j++) {\n var tmpFlag = wFlag && indexes.indexOf(indent) !== -1;\n if (tmpFlag) {\n wFlag = false;\n }\n var cellType = !this.parent.enableColumnVirtualization || tmpFlag ?\n CellType.GroupCaption : CellType.GroupCaptionEmpty;\n indent = this.parent.enableColumnVirtualization && cellType === CellType.GroupCaption ? indent + groupedLen : indent;\n if (gObj.isRowDragable()) {\n indent++;\n }\n cells.push(this.generateCell(column, null, cellType, indent));\n }\n cells.push.apply(cells, visibles);\n return cells;\n };\n /**\n * @param {GroupedData} data - specifies the data\n * @param {number} indent - specifies the indent\n * @param {number} parentID - specifies the parentID\n * @param {number} childID - specifies the childID\n * @param {number} tIndex - specifies the TIndex\n * @param {string} parentUid - specifies the ParentUid\n * @returns {Row} returns the Row object\n * @hidden\n */\n GroupModelGenerator.prototype.generateCaptionRow = function (data, indent, parentID, childID, tIndex, parentUid) {\n var options = {};\n var records = 'records';\n var col = this.parent.getColumnByField(data.field);\n options.data = extend({}, data);\n if (col) {\n options.data.field = data.field;\n }\n options.isDataRow = false;\n options.isExpand = !this.parent.groupSettings.enableLazyLoading && !this.parent.isCollapseStateEnabled();\n options.parentGid = parentID;\n options.childGid = childID;\n options.tIndex = tIndex;\n options.isCaptionRow = true;\n options.parentUid = parentUid;\n options.gSummary = !isNullOrUndefined(data.items[\"\" + records]) ? data.items[\"\" + records].length : data.items.length;\n options.uid = getUid('grid-row');\n var row = new Row(options);\n row.indent = indent;\n this.getForeignKeyData(row);\n row.cells = this.getCaptionRowCells(data.field, indent, row.data);\n return row;\n };\n GroupModelGenerator.prototype.getForeignKeyData = function (row) {\n var data = row.data;\n var col = this.parent.getColumnByField(data.field);\n if (col && col.isForeignColumn && col.isForeignColumn()) {\n var fkValue = (isNullOrUndefined(data.key) ? '' : col.valueAccessor(col.foreignKeyValue, getForeignData(col, {}, data.key)[0], col));\n setValue('foreignKey', fkValue, row.data);\n }\n };\n /**\n * @param {Object[]} data - specifies the data\n * @param {number} indent - specifies the indent\n * @param {number} childID - specifies the childID\n * @param {number} tIndex - specifies the tIndex\n * @param {string} parentUid - specifies the ParentUid\n * @returns {Row[]} returns the row object\n * @hidden\n */\n GroupModelGenerator.prototype.generateDataRows = function (data, indent, childID, tIndex, parentUid) {\n var rows = [];\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = data.length; i < len; i++, tIndex++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(data[parseInt(i.toString(), 10)], this.index, i ? undefined : 'e-firstchildrow', indent, childID, tIndex, parentUid);\n for (var j = 0; j < indent; j++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(indent) === -1) {\n continue;\n }\n rows[parseInt(i.toString(), 10)].cells.unshift(this.generateIndentCell());\n }\n this.index++;\n }\n return rows;\n };\n GroupModelGenerator.prototype.generateIndentCell = function () {\n return this.generateCell({}, null, CellType.Indent);\n };\n GroupModelGenerator.prototype.refreshRows = function (input) {\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0; i < input.length; i++) {\n if (input[parseInt(i.toString(), 10)].isDataRow) {\n input[parseInt(i.toString(), 10)].cells = this.generateCells(input[parseInt(i.toString(), 10)]);\n for (var j = 0; j < input[parseInt(i.toString(), 10)].indent; j++) {\n if (this.parent.enableColumnVirtualization\n && indexes.indexOf(input[parseInt(i.toString(), 10)].indent) === -1) {\n continue;\n }\n input[parseInt(i.toString(), 10)].cells.unshift(this.generateIndentCell());\n }\n }\n else {\n var cRow = this.generateCaptionRow(input[parseInt(i.toString(), 10)].data, input[parseInt(i.toString(), 10)].indent);\n input[parseInt(i.toString(), 10)].cells = cRow.cells;\n }\n }\n return input;\n };\n GroupModelGenerator.prototype.setInfiniteRowVisibility = function (caption) {\n if (!caption.isExpand || caption.visible === false) {\n for (var _i = 0, _a = this.rows; _i < _a.length; _i++) {\n var row = _a[_i];\n if (row.parentUid === caption.uid) {\n row.visible = false;\n if (row.isCaptionRow) {\n this.setInfiniteRowVisibility(row);\n }\n }\n }\n }\n };\n GroupModelGenerator.prototype.ensureRowVisibility = function () {\n for (var i = 0; i < this.rows.length; i++) {\n var row = this.rows[parseInt(i.toString(), 10)];\n if (!row.isCaptionRow) {\n continue;\n }\n for (var j = i + 1; j < this.rows.length; j++) {\n var childRow = this.rows[parseInt(j.toString(), 10)];\n if (row.uid === childRow.parentUid) {\n this.rows[parseInt(j.toString(), 10)].visible = row.isExpand;\n }\n }\n }\n };\n return GroupModelGenerator;\n}(RowModelGenerator));\nexport { GroupModelGenerator };\n","import { Droppable } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, remove, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { getUpdateUsingRaf, appendChildren, setDisplayValue, clearReactVueTemplates, getScrollBarWidth, getScrollWidth, getTransformValues } from '../base/util';\nimport * as events from '../base/constant';\nimport { RowRenderer } from './row-renderer';\nimport { CellMergeRender } from './cell-merge-renderer';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { GroupModelGenerator } from '../services/group-model-generator';\nimport { isGroupAdaptive, addFixedColumnBorder } from '../base/util';\nimport * as literals from '../base/string-literals';\n// eslint-disable-next-line valid-jsdoc\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar ContentRender = /** @class */ (function () {\n /**\n * Constructor for content renderer module\n *\n * @param {IGrid} parent - specifies the Igrid\n * @param {ServiceLocator} serviceLocator - specifies the service locator\n */\n function ContentRender(parent, serviceLocator) {\n var _this = this;\n this.rows = [];\n this.freezeRows = [];\n this.movableRows = [];\n this.freezeRowElements = [];\n /** @hidden */\n this.currentInfo = {};\n /** @hidden */\n this.prevCurrentView = [];\n this.isLoaded = true;\n this.drop = function (e) {\n _this.parent.notify(events.columnDrop, { target: e.target, droppedElement: e.droppedElement });\n remove(e.droppedElement);\n };\n this.infiniteCache = {};\n /** @hidden */\n this.visibleRows = [];\n this.visibleFrozenRows = [];\n this.rightFreezeRows = [];\n this.isAddRows = false;\n this.isInfiniteFreeze = false;\n this.useGroupCache = false;\n /** @hidden */\n this.tempFreezeRows = [];\n this.rafCallback = function (args) {\n var arg = args;\n return function () {\n _this.ariaService.setBusy(_this.getPanel().querySelector('.' + literals.content), false);\n if (_this.parent.isDestroyed) {\n return;\n }\n var rows = _this.rows.slice(0);\n if (_this.parent.enableInfiniteScrolling) {\n if (_this.parent.groupSettings.enableLazyLoading) {\n for (var i = 0; i < _this.visibleRows.length; i++) {\n _this.setRowsInLazyGroup(_this.visibleRows[parseInt(i.toString(), 10)], i);\n }\n }\n rows = _this.parent.getRowsObject();\n var prevPage = arg.prevPage;\n if (_this.parent.infiniteScrollSettings.enableCache && prevPage) {\n var maxBlock = _this.parent.infiniteScrollSettings.maxBlocks;\n rows = [];\n var rowIdx = (parseInt(_this.rowElements[0].getAttribute('data-rowindex'), 10) + 1);\n var startIdx = Math.ceil(rowIdx / _this.parent.pageSettings.pageSize);\n for (var i = 0, count = startIdx; i < maxBlock; i++, count++) {\n if (_this.infiniteCache[parseInt(count.toString(), 10)]) {\n rows = rows.concat(_this.infiniteCache[parseInt(count.toString(), 10)]);\n }\n }\n }\n }\n _this.parent.notify(events.contentReady, { rows: rows, args: arg });\n if (_this.parent.editSettings.showAddNewRow && _this.parent.addNewRowFocus) {\n _this.parent.notify(events.showAddNewRowFocus, {});\n _this.parent.addNewRowFocus = false;\n }\n if (_this.parent.autoFit) {\n _this.parent.preventAdjustColumns();\n }\n if (!_this.parent.isInitialLoad) {\n _this.parent.focusModule.setFirstFocusableTabIndex();\n }\n if (_this.isLoaded) {\n _this.parent.isManualRefresh = false;\n if (_this.parent.enableInfiniteScrolling && _this.parent.groupSettings.enableLazyLoading && args.requestType === 'sorting') {\n _this.parent.infiniteScrollModule['groupCaptionAction'] = undefined;\n }\n var isReactChild = _this.parent.parentDetails && _this.parent.parentDetails.parentInstObj &&\n _this.parent.parentDetails.parentInstObj.isReact;\n if ((_this.parent.isReact || isReactChild) && _this.parent.element.querySelectorAll('.e-templatecell').length) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = _this;\n thisRef_1.parent.renderTemplates(function () {\n thisRef_1.parent.trigger(events.dataBound, {}, function () {\n if (thisRef_1.parent.allowTextWrap) {\n thisRef_1.parent.notify(events.freezeRender, { case: 'textwrap' });\n }\n });\n });\n }\n else {\n _this.parent.trigger(events.dataBound, {}, function () {\n if (_this.parent.allowTextWrap) {\n _this.parent.notify(events.freezeRender, { case: 'textwrap' });\n }\n });\n }\n if (_this.parent.allowTextWrap && _this.parent.height === 'auto') {\n if (_this.parent.getContentTable().scrollHeight > _this.parent.getContent().clientHeight) {\n _this.parent.scrollModule.setPadding();\n }\n else {\n _this.parent.scrollModule.removePadding();\n }\n }\n }\n if (arg) {\n var action = (arg.requestType || '').toLowerCase() + '-complete';\n _this.parent.notify(action, arg);\n if (args.requestType === 'batchsave') {\n args.cancel = false;\n _this.parent.trigger(events.actionComplete, args);\n }\n }\n if (_this.isLoaded) {\n _this.parent.hideSpinner();\n }\n };\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.widthService = serviceLocator.getService('widthService');\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.parent.enableDeepCompare = this.parent.getDataModule().isRemote();\n this.generator = this.getModelGenerator();\n if (this.parent.isDestroyed) {\n return;\n }\n if (!this.parent.enableColumnVirtualization && !this.parent.enableVirtualization\n && !this.parent.groupSettings.enableLazyLoading) {\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n }\n this.parent.on(events.colGroupRefresh, this.colGroupRefresh, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.refreshInfiniteModeBlocks, this.refreshContentRows, this);\n this.parent.on(events.beforeCellFocused, this.beforeCellFocused, this);\n this.parent.on(events.destroy, this.droppableDestroy, this);\n }\n ContentRender.prototype.beforeCellFocused = function (e) {\n if (e.byKey && (e.keyArgs.action === 'upArrow' || e.keyArgs.action === 'downArrow')) {\n this.pressedKey = e.keyArgs.action;\n }\n else {\n this.pressedKey = undefined;\n }\n };\n /**\n * The function is used to render grid content div\n *\n * @returns {void}\n */\n ContentRender.prototype.renderPanel = function () {\n var gObj = this.parent;\n var div = this.parent.element.querySelector('.' + literals.gridContent);\n if (div) {\n this.ariaService.setOptions(this.parent.element.querySelector('.' + literals.content), { busy: false });\n this.setPanel(div);\n return;\n }\n div = this.parent.createElement('div', { className: literals.gridContent });\n var innerDiv = this.parent.createElement('div', {\n className: literals.content\n });\n this.ariaService.setOptions(innerDiv, { busy: false });\n if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid()) {\n this.renderHorizontalScrollbar(div);\n innerDiv.classList.add('e-virtual-content');\n }\n div.appendChild(innerDiv);\n this.setPanel(div);\n gObj.element.appendChild(div);\n };\n ContentRender.prototype.renderHorizontalScrollbar = function (element) {\n var parent = this.parent.createElement('div', { className: 'e-movablescrollbar' });\n var child = this.parent.createElement('div', { className: 'e-movablechild' });\n var scrollbarHeight = getScrollBarWidth().toString();\n this.setScrollbarHeight(child, scrollbarHeight);\n this.setScrollbarHeight(parent, scrollbarHeight);\n parent.appendChild(child);\n element.appendChild(parent);\n };\n ContentRender.prototype.setScrollbarHeight = function (ele, height) {\n ele.style.minHeight = height + 'px';\n ele.style.maxHeight = height + 'px';\n };\n /**\n * The function is used to render grid content table\n *\n * @returns {void}\n */\n ContentRender.prototype.renderTable = function () {\n var contentDiv = this.getPanel();\n var virtualTable = contentDiv.querySelector('.e-virtualtable');\n var virtualTrack = contentDiv.querySelector('.e-virtualtrack');\n if (this.parent.enableVirtualization && !isNullOrUndefined(virtualTable) && !isNullOrUndefined(virtualTrack)) {\n remove(virtualTable);\n remove(virtualTrack);\n }\n contentDiv.appendChild(this.createContentTable('_content_table'));\n this.setTable(contentDiv.querySelector('.' + literals.table));\n if (this.parent.selectionSettings.type === 'Multiple') {\n this.ariaService.setOptions(this.parent.element, {\n multiselectable: true\n });\n }\n this.initializeContentDrop();\n if (this.parent.frozenRows) {\n this.parent.getHeaderContent().classList.add('e-frozenhdr');\n }\n };\n /**\n * The function is used to create content table elements\n *\n * @param {string} id - specifies the id\n * @returns {Element} returns the element\n * @hidden\n */\n ContentRender.prototype.createContentTable = function (id) {\n var innerDiv = this.getPanel().firstElementChild;\n if (this.getTable()) {\n remove(this.getTable());\n }\n var table = innerDiv.querySelector('.' + literals.table) ? innerDiv.querySelector('.' + literals.table) :\n this.parent.createElement('table', {\n className: literals.table, attrs: {\n cellspacing: '0.25px', role: 'presentation',\n id: this.parent.element.id + id\n }\n });\n this.setColGroup(this.parent.getHeaderTable().querySelector(literals.colGroup).cloneNode(true));\n table.appendChild(this.getColGroup());\n table.appendChild(this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } }));\n innerDiv.appendChild(table);\n return innerDiv;\n };\n /**\n * Refresh the content of the Grid.\n *\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n */\n // tslint:disable-next-line:max-func-body-length\n ContentRender.prototype.refreshContentRows = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n var gObj = this.parent;\n if (gObj.currentViewData.length === 0) {\n return;\n }\n if (gObj.editSettings && gObj.editModule && gObj.editSettings.mode === 'Batch' && gObj.editModule.formObj\n && gObj.editSettings.showConfirmDialog === false) {\n gObj.editModule.destroyForm();\n }\n var dataSource = this.currentMovableRows || gObj.currentViewData;\n var isReact = gObj.isReact && !isNullOrUndefined(gObj.rowTemplate);\n var frag = isReact ? gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } }) : document.createDocumentFragment();\n if (!this.initialPageRecords) {\n this.initialPageRecords = extend([], dataSource);\n }\n var hdrfrag = isReact ? gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } }) : document.createDocumentFragment();\n var refFrag;\n var refHdrfrag;\n if (gObj.isReact && gObj.rowTemplate) {\n refFrag = frag;\n refHdrfrag = hdrfrag;\n }\n var columns = gObj.getColumns();\n var tr;\n var hdrTbody;\n var trElement;\n var row = new RowRenderer(this.serviceLocator, null, this.parent);\n var isInfiniteScroll = this.parent.enableInfiniteScrolling\n && args.requestType === 'infiniteScroll';\n var isColumnVirtualInfiniteProcess = this.isInfiniteColumnvirtualization() && args.requestType !== 'virtualscroll';\n gObj.notify(events.destroyChildGrid, {});\n this.rowElements = [];\n this.rows = [];\n this.tempFreezeRows = [];\n var tbdy;\n var tableName;\n var isGroupFrozenHdr = this.parent.frozenRows && this.parent.groupSettings.columns.length ? true : false;\n if (isGroupAdaptive(gObj)) {\n if (['sorting', 'filtering', 'searching', 'grouping', 'ungrouping', 'reorder', 'save', 'delete']\n .some(function (value) { return args.requestType === value; })) {\n this.emptyVcRows();\n }\n }\n var modelData;\n modelData = this.checkCache(modelData, args);\n if (!this.isAddRows && !this.useGroupCache) {\n modelData = this.generator.generateRows(dataSource, args);\n }\n this.setGroupCache(modelData, args);\n this.parent.notify(events.setInfiniteCache, { isInfiniteScroll: isInfiniteScroll, modelData: modelData, args: args });\n var isFrozenLeft = false;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var registeredTemplates = this.parent.registeredTemplate;\n if (!(args.requestType === 'infiniteScroll' && !this.parent.infiniteScrollSettings.enableCache) && registeredTemplates\n && registeredTemplates.template && !args.isFrozen && !isFrozenLeft) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var templatetoclear = [];\n for (var i = 0; i < registeredTemplates.template.length; i++) {\n for (var j = 0; j < registeredTemplates.template[parseInt(i.toString(), 10)].rootNodes.length; j++) {\n if (isNullOrUndefined(registeredTemplates.template[parseInt(i.toString(), 10)]\n .rootNodes[parseInt(j.toString(), 10)].parentNode)) {\n templatetoclear.push(registeredTemplates.template[parseInt(i.toString(), 10)]);\n }\n }\n }\n this.parent.destroyTemplate(['template'], templatetoclear);\n }\n if ((this.parent.isReact || this.parent.isVue) && !(args.requestType === 'infiniteScroll' && !this.parent.infiniteScrollSettings.enableCache) && !args.isFrozen) {\n var templates = [\n this.parent.isVue ? 'template' : 'columnTemplate', 'rowTemplate', 'detailTemplate',\n 'captionTemplate', 'commandsTemplate', 'groupFooterTemplate', 'groupCaptionTemplate'\n ];\n if (args.requestType === 'infiniteScroll' && this.parent.infiniteScrollSettings.enableCache) {\n templates = [\n this.parent.isVue ? 'template' : 'columnTemplate', 'commandsTemplate'\n ];\n }\n clearReactVueTemplates(this.parent, templates);\n }\n if (this.parent.enableColumnVirtualization) {\n var cellMerge = new CellMergeRender(this.serviceLocator, this.parent);\n cellMerge.updateVirtualCells(modelData);\n }\n this.tbody = this.getTable().querySelector(literals.tbody);\n var startIndex = 0;\n var blockLoad = true;\n if (isGroupAdaptive(gObj) && gObj.vcRows.length) {\n var top_1 = 'top';\n var scrollTop = !isNullOrUndefined(args.virtualInfo.offsets) ? args.virtualInfo.offsets.top :\n (!isNullOrUndefined(args.scrollTop) ? args.scrollTop[\"\" + top_1] : 0);\n if (scrollTop !== 0) {\n var offsets_1 = gObj.vGroupOffsets;\n var bSize = gObj.pageSettings.pageSize / 2;\n var values = Object.keys(offsets_1).map(function (key) { return offsets_1[\"\" + key]; });\n for (var m = 0; m < values.length; m++) {\n if (scrollTop < values[parseInt(m.toString(), 10)]) {\n if (!isNullOrUndefined(args.virtualInfo) && args.virtualInfo.direction === 'up') {\n startIndex = m > 0 ? ((m - 1) * bSize) : (m * bSize);\n break;\n }\n else {\n startIndex = m * bSize;\n if (this.parent.contentModule.isEndBlock(m) || this.parent.contentModule.isEndBlock(m + 1)) {\n args.virtualInfo.blockIndexes = [m, m + 1];\n }\n break;\n }\n }\n }\n if (Math.round(scrollTop + this.contentPanel.firstElementChild.offsetHeight) >=\n this.contentPanel.firstElementChild.scrollHeight && !args.rowObject) {\n blockLoad = false;\n }\n }\n }\n var isVFFrozenOnly = gObj.frozenRows && this.parent.enableVirtualization\n && args.requestType === 'reorder';\n if ((gObj.frozenRows && args.requestType === 'virtualscroll' && args.virtualInfo.sentinelInfo.axis === 'X') || isVFFrozenOnly) {\n var bIndex = args.virtualInfo.blockIndexes;\n var page = args.virtualInfo.page;\n args.virtualInfo.blockIndexes = [1, 2];\n if (isVFFrozenOnly) {\n args.virtualInfo.page = 1;\n }\n var data = isVFFrozenOnly ? this.initialPageRecords : dataSource;\n var mhdrData = this.vgenerator\n .generateRows(data, args);\n mhdrData.splice(this.parent.frozenRows);\n for (var i = 0; i < this.parent.frozenRows; i++) {\n // mhdrData[parseInt(i.toString(), 10)].cells.splice(0, this.parent.getFrozenColumns());\n tr = row.render(mhdrData[parseInt(i.toString(), 10)], columns);\n addFixedColumnBorder(tr);\n hdrfrag.appendChild(tr);\n }\n args.virtualInfo.blockIndexes = bIndex;\n args.virtualInfo.page = page;\n if (isVFFrozenOnly && args.virtualInfo.page === 1) {\n modelData.splice(0, this.parent.frozenRows);\n }\n }\n this.virtualFrozenHdrRefresh(hdrfrag, modelData, row, args, dataSource, columns);\n if (this.parent.groupSettings.enableLazyLoading && !this.useGroupCache && this.parent.groupSettings.columns.length) {\n (this.parent.enableVirtualization ? this.parent.lazyLoadRender :\n this.parent.contentModule).refRowsObj[this.parent.pageSettings.currentPage] = [];\n }\n if (this.parent.enableInfiniteScrolling && this.parent.groupSettings.enableLazyLoading && args.requestType === 'delete') { // || (this.parent.infiniteScrollSettings && this.parent.infiniteScrollSettings.enableCache))\n this.visibleRows = [];\n }\n var _loop_1 = function (i, len) {\n this_1.rows.push(modelData[parseInt(i.toString(), 10)]);\n if (this_1.parent.groupSettings.enableLazyLoading && !this_1.useGroupCache && this_1.parent.groupSettings.columns.length) {\n (this_1.parent.enableVirtualization ? this_1.parent.lazyLoadRender :\n this_1.parent.contentModule).refRowsObj[this_1.parent.pageSettings.currentPage].push(modelData[parseInt(i.toString(), 10)]);\n this_1.setRowsInLazyGroup(modelData[parseInt(i.toString(), 10)], i);\n if (isNullOrUndefined(modelData[parseInt(i.toString(), 10)].indent)) {\n return \"continue\";\n }\n }\n this_1.setInfiniteVisibleRows(args, modelData[parseInt(i.toString(), 10)]);\n if (isGroupAdaptive(gObj) && args.virtualInfo && args.virtualInfo.blockIndexes\n && (this_1.rowElements.length >= (args.virtualInfo.blockIndexes.length * this_1.parent.contentModule.getBlockSize()))\n && blockLoad) {\n this_1.parent.currentViewData['records'] = this_1.rows.map(function (m) { return m.data; });\n return \"break\";\n }\n if (!gObj.rowTemplate) {\n tr = row.render(modelData[parseInt(i.toString(), 10)], columns);\n addFixedColumnBorder(tr);\n var isVFreorder = this_1.ensureFrozenHeaderRender(args);\n if (gObj.frozenRows && (i < gObj.frozenRows || isGroupFrozenHdr) && !isInfiniteScroll && args.requestType !== 'virtualscroll' && isVFreorder\n && this_1.ensureVirtualFrozenHeaderRender(args)) {\n hdrfrag.appendChild(tr);\n }\n else {\n frag.appendChild(tr);\n }\n var rowIdx = parseInt(tr.getAttribute('data-rowindex'), 10);\n if (rowIdx + 1 === gObj.frozenRows) {\n isGroupFrozenHdr = false;\n }\n if (modelData[parseInt(i.toString(), 10)].isExpand) {\n gObj.notify(events.expandChildGrid, tr.cells[gObj.groupSettings.columns.length]);\n }\n }\n else {\n var rowTemplateID = gObj.element.id + 'rowTemplate';\n var elements = void 0;\n if (gObj.isReact) {\n var isHeader = gObj.frozenRows && i < gObj.frozenRows;\n var copied = extend({ index: i }, dataSource[parseInt(i.toString(), 10)]);\n gObj.getRowTemplate()(copied, gObj, 'rowTemplate', rowTemplateID, null, null, isHeader ? hdrfrag : frag);\n if (gObj.requireTemplateRef) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_2 = this_1;\n thisRef_2.parent.renderTemplates(function () {\n if (gObj.frozenRows && i < gObj.frozenRows) {\n tr = refHdrfrag.childNodes[parseInt(i.toString(), 10)];\n }\n else {\n trElement = refFrag.childNodes[parseInt(i.toString(), 10)];\n }\n var arg = { data: modelData[parseInt(i.toString(), 10)].data,\n row: trElement ? trElement : tr };\n thisRef_2.parent.trigger(events.rowDataBound, arg);\n if (modelData[parseInt(i.toString(), 10)].isDataRow || (thisRef_2.parent.enableVirtualization &&\n thisRef_2.parent.groupSettings.enableLazyLoading)) {\n thisRef_2.rowElements.push(arg.row);\n }\n thisRef_2.ariaService.setOptions(thisRef_2.parent.element, {\n colcount: gObj.getColumns().length.toString()\n });\n if (i === modelData.length - 1) {\n refFrag = null;\n refHdrfrag = null;\n }\n });\n return \"continue\";\n }\n }\n else {\n elements = gObj.getRowTemplate()(extend({ index: i }, dataSource[parseInt(i.toString(), 10)]), gObj, 'rowTemplate', rowTemplateID, undefined, undefined, undefined, this_1.parent['root']);\n }\n if (!gObj.isReact && elements[0].tagName === 'TBODY') {\n for (var j = 0; j < elements.length; j++) {\n var isTR = elements[parseInt(j.toString(), 10)].nodeName.toLowerCase() === 'tr';\n if (isTR || (elements[parseInt(j.toString(), 10)].querySelectorAll && elements[parseInt(j.toString(), 10)].querySelectorAll('tr').length)) {\n tr = isTR ? elements[parseInt(j.toString(), 10)] : elements[parseInt(j.toString(), 10)].querySelector('tr');\n }\n }\n if (gObj.frozenRows && i < gObj.frozenRows) {\n hdrfrag.appendChild(tr);\n }\n else {\n frag.appendChild(tr);\n }\n }\n else {\n if (gObj.frozenRows && i < gObj.frozenRows) {\n tr = !gObj.isReact ? appendChildren(hdrfrag, elements) : hdrfrag.lastElementChild;\n }\n else {\n // frag.appendChild(tr);\n if (!gObj.isReact) {\n tr = appendChildren(frag, elements);\n }\n trElement = gObj.isReact ? frag.lastElementChild : tr.lastElementChild;\n }\n }\n var arg = { data: modelData[parseInt(i.toString(), 10)].data, row: trElement ? trElement : tr };\n this_1.parent.trigger(events.rowDataBound, arg);\n }\n if (modelData[parseInt(i.toString(), 10)].isDataRow || (this_1.parent.enableVirtualization &&\n this_1.parent.groupSettings.enableLazyLoading)) {\n if (!isNullOrUndefined(gObj.rowTemplate) && (gObj.isAngular || gObj.isVue3 || gObj.isVue)) {\n this_1.rowElements.push(trElement ? trElement : tr);\n }\n else {\n this_1.rowElements.push(tr);\n }\n }\n this_1.ariaService.setOptions(this_1.parent.element, { colcount: gObj.getColumns().length.toString() });\n };\n var this_1 = this;\n for (var i = startIndex, len = modelData.length; i < len; i++) {\n var state_1 = _loop_1(i, len);\n if (state_1 === \"break\")\n break;\n }\n var isReactChild = gObj.parentDetails && gObj.parentDetails.parentInstObj && gObj.parentDetails.parentInstObj.isReact;\n if ((gObj.isReact || isReactChild) && !gObj.requireTemplateRef) {\n gObj.renderTemplates();\n }\n if (this.parent.enableInfiniteScrolling && this.parent.groupSettings.enableLazyLoading) {\n this.parent.contentModule.refRowsObj[this.parent.pageSettings.currentPage] =\n this.parent.contentModule['groupCache'][this.parent.pageSettings.currentPage];\n }\n if (this.parent.groupSettings.enableLazyLoading && !this.useGroupCache && this.parent.groupSettings.columns.length) {\n this.parent.notify(events.refreshExpandandCollapse, {\n rows: (this.parent.enableVirtualization ? this.parent.lazyLoadRender :\n this.parent.contentModule).refRowsObj[this.parent.pageSettings.currentPage]\n });\n }\n gObj.removeMaskRow();\n this.parent.notify('removeGanttShimmer', { requestType: 'hideShimmer' });\n if ((gObj.frozenRows && args.requestType !== 'virtualscroll' && !isInfiniteScroll && this.ensureVirtualFrozenHeaderRender(args))\n || (args.requestType === 'virtualscroll' && args.virtualInfo.sentinelInfo && args.virtualInfo.sentinelInfo.axis === 'X')) {\n hdrTbody = gObj.getHeaderTable().querySelector(literals.tbody);\n if (isReact) {\n var parentTable = hdrTbody.parentElement;\n remove(hdrTbody);\n parentTable.appendChild(hdrfrag);\n }\n else {\n hdrTbody.innerHTML = '';\n hdrTbody.appendChild(hdrfrag);\n }\n if (!gObj.isInitialLoad) {\n gObj.scrollModule.setHeight();\n }\n }\n // if (!gObj.enableVirtualization && hdrTbody && gObj.frozenRows && idx === 0 && cont.offsetHeight === Number(gObj.height)) {\n // cont.style.height = (cont.offsetHeight - hdrTbody.offsetHeight) + 'px';\n // }\n args.rows = this.rows.slice(0);\n getUpdateUsingRaf(function () {\n _this.parent.notify(events.beforeFragAppend, args);\n if (!_this.parent.enableVirtualization && (!_this.parent.enableColumnVirtualization || isColumnVirtualInfiniteProcess)\n && !isInfiniteScroll) {\n if (!gObj.isReact) {\n _this.tbody.innerHTML = '';\n }\n if (!isNullOrUndefined(_this.tbody.parentElement)) {\n remove(_this.tbody);\n }\n else {\n remove(gObj.getContentTable().querySelector(literals.tbody));\n }\n _this.tbody = _this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n }\n if (gObj.rowTemplate) {\n updateBlazorTemplate(gObj.element.id + 'rowTemplate', 'RowTemplate', gObj);\n }\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && ((_this.parent.enableInfiniteScrolling\n && !_this.isInfiniteColumnvirtualization()) || isColumnVirtualInfiniteProcess)) {\n _this.isAddRows = false;\n _this.parent.notify(events.removeInfiniteRows, { args: args });\n _this.parent.notify(events.appendInfiniteContent, {\n tbody: tbdy ? tbdy : _this.tbody, frag: frag, args: args, rows: _this.rows,\n rowElements: _this.rowElements, visibleRows: _this.visibleRows,\n tableName: tableName\n });\n if (_this.isInfiniteColumnvirtualization() && _this.parent.isFrozenGrid()) {\n var virtualTable = _this.parent.getContent().querySelector('.e-virtualtable');\n var transform = getTransformValues(virtualTable);\n _this.parent.contentModule.resetStickyLeftPos(transform.width);\n _this.widthService.refreshFrozenScrollbar();\n }\n }\n else {\n _this.useGroupCache = false;\n _this.appendContent(_this.tbody, frag, args);\n }\n if (_this.parent.editSettings.showAddNewRow && (_this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling)) {\n var newRow = _this.parent.element.querySelector('.e-addrow-removed');\n if (newRow) {\n remove(newRow);\n }\n }\n var startAdd = !_this.parent.element.querySelector('.' + literals.addedRow);\n if (_this.parent.editSettings.showAddNewRow && _this.parent.editSettings.mode === 'Normal') {\n if (startAdd) {\n if (_this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling) {\n _this.parent.isAddNewRow = true;\n }\n _this.parent.isEdit = false;\n _this.parent.addRecord();\n }\n if (startAdd || ((_this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling) &&\n ['sorting', 'filtering', 'searching', 'grouping', 'ungrouping', 'reorder']\n .some(function (value) { return args.requestType === value; }))) {\n _this.parent.notify(events.showAddNewRowFocus, {});\n }\n }\n if (_this.parent.getVisibleFrozenRightCount() && _this.parent.getContent() && getScrollWidth(_this.parent) > 0) {\n _this.parent.element.classList.add('e-right-shadow');\n }\n frag = null;\n }, this.rafCallback(extend({}, args)));\n };\n ContentRender.prototype.isInfiniteColumnvirtualization = function () {\n return this.parent.enableColumnVirtualization && this.parent.enableInfiniteScrolling;\n };\n ContentRender.prototype.enableCacheOnInfiniteColumnVirtual = function () {\n return this.isInfiniteColumnvirtualization() && this.parent.infiniteScrollSettings.enableCache;\n };\n ContentRender.prototype.emptyVcRows = function () {\n this.parent.vcRows = [];\n this.parent.vRows = [];\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ContentRender.prototype.appendContent = function (tbody, frag, args, tableName) {\n var isReact = this.parent.isReact && !isNullOrUndefined(this.parent.rowTemplate);\n if (isReact) {\n this.getTable().appendChild(frag);\n }\n else {\n tbody.appendChild(frag);\n this.getTable().appendChild(tbody);\n }\n if (this.parent.rowRenderingMode === 'Vertical' && this.parent.allowTextWrap && (this.parent.textWrapSettings.wrapMode === 'Header'\n || this.parent.textWrapSettings.wrapMode === 'Both')) {\n var cells = tbody.querySelectorAll('td');\n for (var i = 0; i < cells.length; i++) {\n var headerCellHeight = parseFloat(document.defaultView.getComputedStyle(cells[parseInt(i.toString(), 10)], '::before').getPropertyValue('height'));\n var cellHeight = cells[parseInt(i.toString(), 10)].offsetHeight;\n if (headerCellHeight > cellHeight) {\n cells[parseInt(i.toString(), 10)].style.height = headerCellHeight + 'px';\n cells[parseInt(i.toString(), 10)].style.boxSizing = 'content-box';\n }\n }\n }\n if (this.parent.getVisibleFrozenLeftCount() && this.parent.enableColumnVirtualization) {\n this.widthService.refreshFrozenScrollbar();\n }\n };\n ContentRender.prototype.setRowsInLazyGroup = function (row, index) {\n if (this.parent.groupSettings.enableLazyLoading && !this.useGroupCache && this.parent.groupSettings.columns.length) {\n (this.parent.enableVirtualization ? this.parent.lazyLoadRender :\n this.parent.contentModule).maintainRows(row, index);\n }\n };\n ContentRender.prototype.setGroupCache = function (data, args) {\n if (!this.useGroupCache && this.parent.groupSettings.enableLazyLoading) {\n this.parent.notify(events.setGroupCache, { args: args, data: data });\n }\n };\n ContentRender.prototype.ensureFrozenHeaderRender = function (args) {\n return !((this.parent.enableVirtualization\n && (args.requestType === 'reorder' || args.requestType === 'refresh')) || (this.parent.infiniteScrollSettings.enableCache\n && this.parent.frozenRows && this.parent.infiniteScrollModule.requestType === 'delete'\n && this.parent.pageSettings.currentPage !== 1));\n };\n ContentRender.prototype.ensureVirtualFrozenHeaderRender = function (args) {\n return !(this.parent.enableVirtualization && args.requestType === 'delete');\n };\n ContentRender.prototype.checkCache = function (modelData, args) {\n if (this.parent.infiniteScrollSettings.enableCache && args.requestType === 'infiniteScroll') {\n this.isAddRows = !isNullOrUndefined(this.infiniteCache[this.parent.pageSettings.currentPage]);\n if (this.isAddRows) {\n var data = this.infiniteCache[this.parent.pageSettings.currentPage];\n modelData = this.parent.pageSettings.currentPage === 1 ? data.slice(this.parent.frozenRows) : data;\n }\n return modelData;\n }\n if (this.parent.groupSettings.enableLazyLoading && this.parent.groupSettings.columns.length && (args.requestType === 'paging'\n || args.requestType === 'columnstate' || args.requestType === 'reorder' || args.requestType === 'virtualscroll')\n && (this.parent.enableVirtualization ? this.parent.lazyLoadRender :\n this.parent.contentModule).getGroupCache()[this.parent.pageSettings.currentPage]) {\n if (!this.parent.enableVirtualization) {\n this.useGroupCache = true;\n }\n return this.parent.enableVirtualization ? this.parent.getRowsObject() :\n this.parent.contentModule.initialGroupRows(args.requestType === 'reorder');\n }\n return null;\n };\n ContentRender.prototype.setInfiniteVisibleRows = function (args, data) {\n if (this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache\n && !(this.isInfiniteColumnvirtualization() && args.requestType === 'virtualscroll')) {\n this.visibleRows.push(data);\n }\n };\n ContentRender.prototype.getCurrentBlockInfiniteRecords = function () {\n var data = [];\n if (this.parent.infiniteScrollSettings.enableCache) {\n if (!Object.keys(this.infiniteCache).length) {\n return [];\n }\n var rows = this.parent.getRows();\n var index = parseInt(rows[this.parent.frozenRows].getAttribute(literals.dataRowIndex), 10);\n var first = Math.ceil((index + 1) / this.parent.pageSettings.pageSize);\n index = parseInt(rows[rows.length - 1].getAttribute(literals.dataRowIndex), 10);\n var last = Math.ceil((index + (rows.length ? 1 : 0)) / this.parent.pageSettings.pageSize);\n for (var i = first; i <= last; i++) {\n data = !data.length ? this.infiniteCache[parseInt(i.toString(), 10)]\n : data.concat(this.infiniteCache[parseInt(i.toString(), 10)]);\n }\n if (this.parent.frozenRows && this.parent.pageSettings.currentPage > 1) {\n data = this.infiniteCache[1].slice(0, this.parent.frozenRows).concat(data);\n }\n }\n return data;\n };\n ContentRender.prototype.getReorderedRows = function (args) {\n return this.parent.contentModule.getReorderedFrozenRows(args);\n };\n ContentRender.prototype.virtualFrozenHdrRefresh = function (hdrfrag, modelData, row, args, dataSource, columns) {\n if (this.parent.frozenRows && this.parent.enableVirtualization\n && (args.requestType === 'reorder' || args.requestType === 'refresh')) {\n var tr = void 0;\n var fhdrData = this.getReorderedRows(args);\n for (var i = 0; i < fhdrData.length; i++) {\n tr = row.render(fhdrData[parseInt(i.toString(), 10)], columns);\n hdrfrag.appendChild(tr);\n }\n if (args.virtualInfo.page === 1) {\n modelData.splice(0, this.parent.frozenRows);\n }\n }\n };\n ContentRender.prototype.getInfiniteRows = function () {\n var rows = [];\n if (this.parent.enableInfiniteScrolling) {\n if (this.parent.infiniteScrollSettings.enableCache) {\n var keys = Object.keys(this.infiniteCache);\n for (var i = 0; i < keys.length; i++) {\n rows = rows.concat(this.infiniteCache[keys[parseInt(i.toString(), 10)]]);\n }\n }\n else {\n rows = this.visibleRows;\n }\n }\n return rows;\n };\n ContentRender.prototype.getInfiniteMovableRows = function () {\n var infiniteCacheRows = this.getCurrentBlockInfiniteRecords();\n var infiniteRows = this.parent.enableInfiniteScrolling ? infiniteCacheRows.length ? infiniteCacheRows\n : this.visibleRows : [];\n return infiniteRows;\n };\n /**\n * Get the content div element of grid\n *\n * @returns {Element} returns the element\n */\n ContentRender.prototype.getPanel = function () {\n return this.contentPanel;\n };\n /**\n * Set the content div element of grid\n *\n * @param {Element} panel - specifies the panel\n * @returns {void}\n */\n ContentRender.prototype.setPanel = function (panel) {\n this.contentPanel = panel;\n };\n /**\n * Get the content table element of grid\n *\n * @returns {Element} returns the element\n */\n ContentRender.prototype.getTable = function () {\n return this.contentTable;\n };\n /**\n * Set the content table element of grid\n *\n * @param {Element} table - specifies the table\n * @returns {void}\n */\n ContentRender.prototype.setTable = function (table) {\n this.contentTable = table;\n };\n /**\n * Get the Movable Row collection in the Freeze pane Grid.\n *\n * @returns {Row[] | HTMLCollectionOf} returns the row\n */\n ContentRender.prototype.getRows = function () {\n var infiniteRows = this.getInfiniteRows();\n return infiniteRows.length ? infiniteRows : this.rows;\n };\n /**\n * Get the content table data row elements\n *\n * @returns {Element} returns the element\n */\n ContentRender.prototype.getRowElements = function () {\n return this.rowElements;\n };\n /**\n * Get the content table data row elements\n *\n * @param {Element[]} elements - specifies the elements\n * @returns {void}\n */\n ContentRender.prototype.setRowElements = function (elements) {\n this.rowElements = elements;\n };\n /**\n * Get the header colgroup element\n *\n * @returns {Element} returns the element\n */\n ContentRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n *\n * @param {Element} colGroup - specifies the colgroup\n * @returns {Element} returns the element\n */\n ContentRender.prototype.setColGroup = function (colGroup) {\n if (!isNullOrUndefined(colGroup)) {\n colGroup.id = 'content-' + colGroup.id;\n }\n return this.colgroup = colGroup;\n };\n /**\n * Function to hide content table column based on visible property\n *\n * @param {Column[]} columns - specifies the column\n * @returns {void}\n */\n ContentRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var rows = this.getRows();\n var testRow;\n rows.some(function (r) { if (r.isDataRow) {\n testRow = r;\n } return r.isDataRow; });\n var needFullRefresh = true;\n if (!gObj.groupSettings.columns.length && testRow) {\n needFullRefresh = false;\n }\n var tr = gObj.getDataRows();\n var args = {};\n var infiniteData = this.infiniteRowVisibility();\n var contentrows = infiniteData ? infiniteData\n : this.rows.filter(function (row) { return !row.isDetailRow; });\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[parseInt(c.toString(), 10)];\n var idx = this.parent.getNormalizedColumnIndex(column.uid);\n var colIdx = this.parent.getColumnIndexByUid(column.uid);\n var displayVal = column.visible === true ? '' : 'none';\n if (idx !== -1 && testRow && idx < testRow.cells.length) {\n setStyleAttribute(this.getColGroup().childNodes[parseInt(idx.toString(), 10)], { 'display': displayVal });\n }\n if (!needFullRefresh) {\n this.setDisplayNone(tr, colIdx, displayVal, contentrows);\n }\n if (!this.parent.invokedFromMedia && column.hideAtMedia) {\n this.parent.updateMediaColumns(column);\n }\n this.parent.invokedFromMedia = false;\n }\n if (needFullRefresh) {\n this.refreshContentRows({ requestType: 'refresh' });\n }\n else {\n this.parent.notify(events.partialRefresh, { rows: contentrows, args: args });\n if (this.parent.editSettings.showAddNewRow && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n this.parent.notify(events.showAddNewRowFocus, {});\n }\n }\n };\n /**\n * @param {Object} tr - specifies the trr\n * @param {number} idx - specifies the idx\n * @param {string} displayVal - specifies the displayval\n * @param {Row} rows - specifies the rows\n * @returns {void}\n * @hidden\n */\n ContentRender.prototype.setDisplayNone = function (tr, idx, displayVal, rows) {\n setDisplayValue(tr, idx, displayVal, rows, this.parent, this.parent.isRowDragable());\n this.parent.notify(events.infiniteShowHide, { visible: displayVal, index: idx, isFreeze: this.isInfiniteFreeze });\n };\n ContentRender.prototype.infiniteRowVisibility = function (isFreeze) {\n var infiniteData;\n if (this.parent.enableInfiniteScrolling) {\n this.isInfiniteFreeze = isFreeze;\n if (this.parent.infiniteScrollSettings.enableCache) {\n infiniteData = this.getCurrentBlockInfiniteRecords();\n }\n else {\n infiniteData = isFreeze ? this.visibleFrozenRows : this.visibleRows;\n }\n }\n return infiniteData;\n };\n ContentRender.prototype.colGroupRefresh = function () {\n if (this.getColGroup()) {\n var colGroup = this.getHeaderColGroup();\n this.getTable().replaceChild(colGroup, this.getColGroup());\n this.setColGroup(colGroup);\n }\n };\n ContentRender.prototype.getHeaderColGroup = function () {\n return this.parent.element.querySelector('.' + literals.gridHeader)\n .querySelector(literals.colGroup + ':not(.e-masked-colgroup)').cloneNode(true);\n };\n ContentRender.prototype.initializeContentDrop = function () {\n var gObj = this.parent;\n this.droppable = new Droppable(gObj.element, {\n accept: '.e-dragclone',\n drop: this.drop\n });\n };\n ContentRender.prototype.droppableDestroy = function () {\n if (this.droppable && !this.droppable.isDestroyed) {\n this.droppable.destroy();\n }\n };\n ContentRender.prototype.canSkip = function (column, row, index) {\n /**\n * Skip the toggle visiblity operation when one of the following success\n * 1. Grid has empty records\n * 2. column visible property is unchanged\n * 3. cell`s isVisible property is same as column`s visible property.\n */\n return isNullOrUndefined(row) || //(1)\n isNullOrUndefined(column.visible) || //(2)\n row.cells[parseInt(index.toString(), 10)].visible === column.visible; //(3)\n };\n ContentRender.prototype.getModelGenerator = function () {\n return this.generator = this.parent.allowGrouping ? new GroupModelGenerator(this.parent) : new RowModelGenerator(this.parent);\n };\n ContentRender.prototype.renderEmpty = function (tbody) {\n this.getTable().appendChild(tbody);\n if (this.parent.frozenRows) {\n this.parent.getHeaderContent().querySelector(literals.tbody).innerHTML = '';\n }\n };\n ContentRender.prototype.setSelection = function (uid, set, clearAll) {\n this.parent.notify(events.setFreezeSelection, { uid: uid, set: set, clearAll: clearAll });\n var row = this.getRows().filter(function (row) { return clearAll || uid === row.uid; });\n for (var j = 0; j < row.length; j++) {\n row[parseInt(j.toString(), 10)].isSelected = set;\n var cells = row[parseInt(j.toString(), 10)].cells;\n for (var k = 0; k < cells.length; k++) {\n cells[parseInt(k.toString(), 10)].isSelected = set;\n }\n }\n };\n ContentRender.prototype.getRowByIndex = function (index) {\n index = this.getInfiniteRowIndex(index);\n return !isNullOrUndefined(index) ? this.parent.getDataRows()[parseInt(index.toString(), 10)] : undefined;\n };\n ContentRender.prototype.getInfiniteRowIndex = function (index) {\n if (this.parent.infiniteScrollSettings.enableCache && !isNullOrUndefined(index)) {\n var fRows = this.parent.frozenRows;\n var idx = fRows > index ? 0 : fRows;\n var firstRowIndex = parseInt(this.parent.getRows()[parseInt(idx.toString(), 10)]\n .getAttribute(literals.dataRowIndex), 10);\n index = fRows > index ? index : (index - firstRowIndex) + fRows;\n }\n return index;\n };\n ContentRender.prototype.getVirtualRowIndex = function (index) {\n return index;\n };\n ContentRender.prototype.enableAfterRender = function (e) {\n if (e.module === 'group' && e.enable) {\n this.generator = this.getModelGenerator();\n }\n };\n ContentRender.prototype.setRowObjects = function (rows) {\n this.rows = rows;\n };\n /**\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n * @hidden\n */\n ContentRender.prototype.immutableModeRendering = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n var gObj = this.parent;\n gObj.hideSpinner();\n var key = gObj.getPrimaryKeyFieldNames()[0];\n var oldKeys = {};\n var newKeys = {};\n var newRowObjs = [];\n var oldIndexes = {};\n var oldRowObjs = gObj.getRowsObject().slice();\n var batchChangeKeys = this.getBatchEditedRecords(key, oldRowObjs);\n var newIndexes = {};\n var hasBatch = Object.keys(batchChangeKeys).length !== 0;\n if (gObj.getContent().querySelector('.e-emptyrow') || args.requestType === 'reorder'\n || this.parent.groupSettings.columns.length) {\n this.refreshContentRows(args);\n }\n else {\n if (gObj.currentViewData.length === 0) {\n return;\n }\n var oldRowElements = {};\n var tbody = gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var dataSource = gObj.currentViewData;\n var trs = [].slice.call(this.getTable().querySelector(literals.tbody).children);\n if (this.prevCurrentView.length) {\n var prevLen = this.prevCurrentView.length;\n var currentLen = dataSource.length;\n if (prevLen === currentLen) {\n for (var i = 0; i < currentLen; i++) {\n if (this.parent.editSettings.mode === 'Batch'\n && trs[parseInt(i.toString(), 10)].classList.contains('e-insertedrow')) {\n trs.splice(i, 1);\n --i;\n continue;\n }\n newKeys[dataSource[parseInt(i.toString(), 10)][\"\" + key]] = oldKeys[this.prevCurrentView[parseInt(i.toString(), 10)][\"\" + key]] = i;\n newIndexes[parseInt(i.toString(), 10)] = dataSource[parseInt(i.toString(), 10)][\"\" + key];\n oldRowElements[oldRowObjs[parseInt(i.toString(), 10)].uid] = trs[parseInt(i.toString(), 10)];\n oldIndexes[parseInt(i.toString(), 10)] = this.prevCurrentView[parseInt(i.toString(), 10)][\"\" + key];\n }\n }\n else {\n for (var i = 0; i < currentLen; i++) {\n newKeys[dataSource[parseInt(i.toString(), 10)][\"\" + key]] = i;\n newIndexes[parseInt(i.toString(), 10)] = dataSource[parseInt(i.toString(), 10)][\"\" + key];\n }\n for (var i = 0; i < prevLen; i++) {\n if (this.parent.editSettings.mode === 'Batch'\n && trs[parseInt(i.toString(), 10)].classList.contains('e-insertedrow')) {\n trs.splice(i, 1);\n --i;\n continue;\n }\n oldRowElements[oldRowObjs[parseInt(i.toString(), 10)].uid] = trs[parseInt(i.toString(), 10)];\n oldKeys[this.prevCurrentView[parseInt(i.toString(), 10)][\"\" + key]] = i;\n oldIndexes[parseInt(i.toString(), 10)] = this.prevCurrentView[parseInt(i.toString(), 10)][\"\" + key];\n }\n }\n }\n for (var i = 0; i < dataSource.length; i++) {\n var oldIndex = oldKeys[dataSource[parseInt(i.toString(), 10)][\"\" + key]];\n if (!isNullOrUndefined(oldIndex)) {\n var isEqual = false;\n if (this.parent.enableDeepCompare) {\n isEqual = this.objectEqualityChecker(this.prevCurrentView[parseInt(oldIndex.toString(), 10)], dataSource[parseInt(i.toString(), 10)]);\n }\n var tr = oldRowElements[oldRowObjs[parseInt(oldIndex.toString(), 10)]\n .uid];\n newRowObjs.push(oldRowObjs[parseInt(oldIndex.toString(), 10)]);\n if (this.rowElements[parseInt(oldIndex.toString(), 10)] && this.rowElements[parseInt(oldIndex.toString(), 10)].getAttribute('data-uid') === newRowObjs[parseInt(i.toString(), 10)].uid\n && ((hasBatch && isNullOrUndefined(batchChangeKeys[newIndexes[parseInt(i.toString(), 10)]]))\n || (!hasBatch && (isEqual\n || this.prevCurrentView[parseInt(oldIndex.toString(), 10)] === dataSource[parseInt(i.toString(), 10)])))) {\n if (oldIndex !== i) {\n this.refreshImmutableContent(i, tr, newRowObjs[parseInt(i.toString(), 10)]);\n }\n tbody.appendChild(tr);\n continue;\n }\n if ((hasBatch && !isNullOrUndefined(batchChangeKeys[newIndexes[parseInt(i.toString(), 10)]]))\n || (!this.parent.enableDeepCompare\n && dataSource[parseInt(i.toString(), 10)] !== this.prevCurrentView[parseInt(oldIndex.toString(), 10)])\n || (this.parent.enableDeepCompare && !isEqual)) {\n oldRowObjs[parseInt(oldIndex.toString(), 10)].setRowValue(dataSource[parseInt(i.toString(), 10)]);\n }\n tbody.appendChild(tr);\n this.refreshImmutableContent(i, tr, newRowObjs[parseInt(i.toString(), 10)]);\n }\n else {\n var row = new RowRenderer(this.serviceLocator, null, gObj);\n var args_1 = { startIndex: i };\n var modelData = this.generator.generateRows([dataSource[parseInt(i.toString(), 10)]], args_1);\n newRowObjs.push(modelData[0]);\n var tr = row.render(modelData[0], gObj.getColumns());\n tbody.appendChild(tr);\n this.refreshImmutableContent(i, tr, newRowObjs[parseInt(i.toString(), 10)]);\n }\n }\n this.rows = newRowObjs;\n this.rowElements = [].slice.call(tbody.children);\n remove(this.getTable().querySelector(literals.tbody));\n this.getTable().appendChild(tbody);\n this.parent.trigger(events.dataBound, {}, function () {\n if (_this.parent.allowTextWrap) {\n _this.parent.notify(events.freezeRender, { case: 'textwrap' });\n }\n });\n if (args) {\n var action = (args.requestType || '').toLowerCase() + '-complete';\n this.parent.notify(action, args);\n }\n }\n };\n ContentRender.prototype.objectEqualityChecker = function (old, next) {\n var keys = Object.keys(old);\n var isEqual = true;\n for (var i = 0; i < keys.length; i++) {\n if (old[keys[parseInt(i.toString(), 10)]] !== next[keys[parseInt(i.toString(), 10)]]) {\n var isDate = old[keys[parseInt(i.toString(), 10)]] instanceof Date\n && next[keys[parseInt(i.toString(), 10)]] instanceof Date;\n if (!isDate || (old[keys[parseInt(i.toString(), 10)]]\n .getTime() !== next[keys[parseInt(i.toString(), 10)]].getTime())) {\n isEqual = false;\n break;\n }\n }\n }\n return isEqual;\n };\n ContentRender.prototype.getBatchEditedRecords = function (primaryKey, rows) {\n var keys = {};\n var changes = this.parent.getBatchChanges();\n var changedRecords = [];\n var addedRecords = [];\n if (Object.keys(changes).length) {\n changedRecords = changes.changedRecords;\n addedRecords = changes.addedRecords;\n }\n var args = { cancel: false };\n this.parent.notify(events.immutableBatchCancel, { rows: rows, args: args });\n if (addedRecords.length) {\n if (this.parent.editSettings.newRowPosition === 'Bottom') {\n rows.splice(rows.length - 1, addedRecords.length);\n }\n else {\n if (!args.cancel) {\n rows.splice(0, addedRecords.length);\n }\n }\n }\n for (var i = 0; i < changedRecords.length; i++) {\n keys[changedRecords[parseInt(i.toString(), 10)][\"\" + primaryKey]] = i;\n }\n return keys;\n };\n ContentRender.prototype.refreshImmutableContent = function (index, tr, row) {\n row.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n if (row.isAltRow) {\n tr.classList.add('e-altrow');\n }\n else {\n tr.classList.remove('e-altrow');\n }\n row.index = index;\n row.edit = undefined;\n row.isDirty = false;\n tr.setAttribute(literals.dataRowIndex, index.toString());\n tr.setAttribute(literals.ariaRowIndex, (index + 1).toString());\n this.updateCellIndex(tr, index);\n };\n ContentRender.prototype.updateCellIndex = function (rowEle, index) {\n for (var i = 0; i < rowEle.cells.length; i++) {\n rowEle.cells[parseInt(i.toString(), 10)].setAttribute('index', index.toString());\n }\n };\n return ContentRender;\n}());\nexport { ContentRender };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, closest as getClosest, remove } from '@syncfusion/ej2-base';\nimport { classList } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowRenderer } from './row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport * as events from '../base/constant';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { parentsUntil, wrap, measureColumnDepth, appendChildren, addFixedColumnBorder } from '../base/util';\nimport * as literals from '../base/string-literals';\n// eslint-disable-next-line valid-jsdoc\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar HeaderRender = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n */\n function HeaderRender(parent, serviceLocator) {\n var _this = this;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n this.isFirstCol = false;\n this.isReplaceDragEle = true;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = _this.draggable.currentStateTarget;\n var parentEle = parentsUntil(target, 'e-headercell');\n if (!(gObj.allowReordering || gObj.allowGrouping) || (!isNullOrUndefined(parentEle)\n && parentEle.getElementsByClassName('e-checkselectall').length > 0)) {\n return false;\n }\n var visualElement = _this.parent.createElement('div', { className: 'e-cloneproperties e-dragclone e-headerclone' });\n var element = target.classList.contains('e-headercell') ? target : parentEle;\n if (!element || (!gObj.allowReordering && element.classList.contains('e-stackedheadercell'))) {\n return false;\n }\n var height = element.offsetHeight;\n var headercelldiv = element.querySelector('.e-headercelldiv') || element.querySelector('.e-stackedheadercelldiv');\n var col;\n if (headercelldiv) {\n if (element.querySelector('.e-stackedheadercelldiv')) {\n col = gObj.getStackedHeaderColumnByHeaderText(headercelldiv.innerText.trim(), gObj.columns);\n }\n else {\n col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));\n }\n _this.column = col;\n if (_this.column.lockColumn) {\n return false;\n }\n visualElement.setAttribute('e-mappinguid', _this.column.uid);\n }\n if (col && !isNullOrUndefined(col.headerTemplate)) {\n if (!isNullOrUndefined(col.headerTemplate)) {\n var colIndex = gObj.getColumnIndexByField(col.field);\n var result = col.getHeaderTemplate()(extend({ 'index': colIndex }, col), gObj, 'headerTemplate');\n var isReactCompiler = gObj.isReact && typeof (col.headerTemplate) !== 'string';\n var isReactChild = gObj.parentDetails && gObj.parentDetails.parentInstObj &&\n gObj.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n gObj.renderTemplates();\n }\n appendChildren(visualElement, result);\n }\n else {\n visualElement.innerHTML = col.headerTemplate;\n }\n if (!isNullOrUndefined(visualElement.firstChild) && visualElement.firstChild.nodeType === 1) {\n visualElement.firstChild.style.pointerEvents = 'none';\n }\n }\n else {\n visualElement.innerHTML = headercelldiv ?\n col.headerText : element.firstElementChild.innerHTML;\n }\n visualElement.style.width = element.offsetWidth + 'px';\n visualElement.style.height = element.offsetHeight + 'px';\n visualElement.style.lineHeight = (height - 6).toString() + 'px';\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n gObj.notify(events.columnDragStart, { target: _this.draggable.currentStateTarget, column: _this.column, event: e.event });\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n var target = e.target;\n if (target) {\n var closest = getClosest(target, '.e-grid');\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (!closest || closest.getAttribute('id') !== gObj.element.getAttribute('id')) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n if (gObj.allowReordering) {\n gObj.element.querySelector('.e-reorderuparrow').style.display = 'none';\n gObj.element.querySelector('.e-reorderdownarrow').style.display = 'none';\n }\n if (!gObj.groupSettings.allowReordering) {\n return;\n }\n }\n gObj.notify(events.columnDrag, { target: e.target, column: _this.column, event: e.event });\n }\n };\n this.dragStop = function (e) {\n var gObj = _this.parent;\n var cancel;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n if ((!parentsUntil(e.target, 'e-headercell') && !parentsUntil(e.target, 'e-groupdroparea')) ||\n (!gObj.allowReordering && parentsUntil(e.target, 'e-headercell')) ||\n (!e.helper.getAttribute('e-mappinguid') && parentsUntil(e.target, 'e-groupdroparea'))) {\n remove(e.helper);\n cancel = true;\n }\n gObj.notify(events.columnDragStop, { target: e.target, event: e.event, column: _this.column, cancel: cancel });\n };\n this.drop = function (e) {\n var gObj = _this.parent;\n var uid = e.droppedElement.getAttribute('e-mappinguid');\n var closest = getClosest(e.target, '.e-grid');\n remove(e.droppedElement);\n if (closest && closest.getAttribute('id') !== gObj.element.getAttribute('id') ||\n !(gObj.allowReordering || gObj.allowGrouping)) {\n return;\n }\n gObj.notify(events.headerDrop, { target: e.target, uid: uid, droppedElement: e.droppedElement });\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.widthService = this.serviceLocator.getService('widthService');\n if (this.parent.isDestroyed) {\n return;\n }\n if (!this.parent.enableColumnVirtualization) {\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n }\n this.parent.on(events.columnPositionChanged, this.colPosRefresh, this);\n this.parent.on(events.initialEnd, this.renderCustomToolbar, this);\n if (this.parent.rowRenderingMode === 'Vertical') {\n this.parent.on(events.uiUpdate, this.updateCustomResponsiveToolbar, this);\n }\n }\n /**\n * The function is used to render grid header div\n *\n * @returns {void}\n */\n HeaderRender.prototype.renderPanel = function () {\n var div = this.parent.element.querySelector('.' + literals.gridHeader);\n var isRendered = (div != null);\n div = isRendered ? div : this.parent.createElement('div', { className: 'e-gridheader' });\n var innerDiv = isRendered ? div.querySelector('.' + literals.headerContent) :\n this.parent.createElement('div', { className: literals.headerContent });\n this.toggleStackClass(div);\n div.appendChild(innerDiv);\n this.setPanel(div);\n if (!isRendered) {\n this.parent.element.appendChild(div);\n }\n };\n /**\n * The function is used to render grid header div\n *\n * @returns {void}\n */\n HeaderRender.prototype.renderTable = function () {\n var headerDiv = this.getPanel();\n headerDiv.appendChild(this.createHeaderTable());\n this.setTable(headerDiv.querySelector('.' + literals.table));\n this.initializeHeaderDrag();\n this.initializeHeaderDrop();\n this.parent.notify(events.headerRefreshed, { rows: this.rows });\n };\n /**\n * Get the header content div element of grid\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getPanel = function () {\n return this.headerPanel;\n };\n /**\n * Set the header content div element of grid\n *\n * @param {Element} panel - specifies the panel element\n * @returns {void}\n */\n HeaderRender.prototype.setPanel = function (panel) {\n this.headerPanel = panel;\n };\n /**\n * Get the header table element of grid\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getTable = function () {\n return this.headerTable;\n };\n /**\n * Set the header table element of grid\n *\n * @param {Element} table - specifies the table element\n * @returns {void}\n */\n HeaderRender.prototype.setTable = function (table) {\n this.headerTable = table;\n };\n /**\n * Get the header colgroup element\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n *\n * @param {Element} colGroup - specifies the colgroup\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Get the header row element collection.\n *\n * @returns {Element[]} returns the element\n */\n HeaderRender.prototype.getRows = function () {\n var table = this.getTable();\n return table.tHead.rows;\n };\n /**\n * The function is used to create header table elements\n *\n * @returns {Element} returns the element\n * @hidden\n */\n HeaderRender.prototype.createHeaderTable = function () {\n var table = this.createTable();\n var innerDiv = this.getPanel().querySelector('.' + literals.headerContent);\n innerDiv.appendChild(table);\n return innerDiv;\n };\n /**\n * The function is used to create header table elements\n *\n * @param {Element} tableEle - specifies the table Element\n * @param {freezeTable} tableName - specifies the table name\n * @returns {Element} returns the element\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderRender.prototype.createHeader = function (tableEle, tableName) {\n if (tableEle === void 0) { tableEle = null; }\n var gObj = this.parent;\n if (this.getTable()) {\n remove(this.getTable());\n }\n var table = this.parent.createElement('table', { className: literals.table, attrs: { cellspacing: '0.25px', role: 'presentation' } });\n var findHeaderRow = this.createHeaderContent(tableName);\n var thead = findHeaderRow.thead;\n var tbody = this.parent.createElement(literals.tbody, { className: this.parent.frozenRows ||\n ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling) && this.parent.editSettings.showAddNewRow) ? '' :\n 'e-hide', attrs: { role: 'rowgroup' } });\n this.caption = this.parent.createElement('caption', { innerHTML: this.parent.element.id + '_header_table', className: 'e-hide' });\n var colGroup = this.parent.createElement(literals.colGroup);\n var rowBody = this.parent.createElement('tr', { attrs: { role: 'row' }, className: (this.parent.enableVirtualization ||\n this.parent.enableInfiniteScrolling) && this.parent.editSettings.showAddNewRow ? 'e-hide' : '' });\n var bodyCell;\n var rows = this.rows = findHeaderRow.rows;\n for (var i = 0, len = rows.length; i < len; i++) {\n for (var j = 0, len_1 = rows[parseInt(i.toString(), 10)].cells.length; j < len_1; j++) {\n bodyCell = this.parent.createElement('td');\n rowBody.appendChild(bodyCell);\n }\n }\n if (gObj.allowFiltering || gObj.allowSorting || gObj.allowGrouping) {\n table.classList.add('e-sortfilter');\n }\n this.updateColGroup(colGroup);\n tbody.appendChild(rowBody);\n table.appendChild(this.setColGroup(colGroup));\n table.appendChild(thead);\n table.appendChild(tbody);\n table.appendChild(this.caption);\n return table;\n };\n /**\n * @param {Element} tableEle - specifies the column\n * @returns {Element} returns the element\n * @hidden\n */\n HeaderRender.prototype.createTable = function (tableEle) {\n if (tableEle === void 0) { tableEle = null; }\n return this.createHeader(tableEle);\n };\n HeaderRender.prototype.createHeaderContent = function (tableName) {\n var gObj = this.parent;\n var columns = gObj.getColumns();\n var thead = this.parent.createElement('thead', { attrs: { 'role': 'rowgroup' } });\n var colHeader = this.parent.createElement('tr', { className: 'e-columnheader', attrs: { role: 'row' } });\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, gObj);\n rowRenderer.element = colHeader;\n var rows = [];\n var headerRow;\n this.colDepth = measureColumnDepth(gObj.columns);\n for (var i = 0, len = this.colDepth; i < len; i++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(i);\n rows[parseInt(i.toString(), 10)].cells = [];\n }\n rows = this.ensureColumns(rows);\n rows = this.getHeaderCells(rows, tableName);\n if (gObj.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n for (var i = 0, len = rows.length; i < len; i++) {\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n for (var i = 0, len = this.colDepth; i < len; i++) {\n headerRow = rowRenderer.render(rows[parseInt(i.toString(), 10)], columns);\n if (this.parent.rowHeight && headerRow.querySelector('.e-headercell')) {\n headerRow.style.height = this.parent.rowHeight + 'px';\n }\n addFixedColumnBorder(headerRow);\n thead.appendChild(headerRow);\n }\n var findHeaderRow = {\n thead: thead,\n rows: rows\n };\n return findHeaderRow;\n };\n HeaderRender.prototype.updateColGroup = function (colGroup) {\n var cols = this.parent.getColumns();\n var col;\n var indexes = this.parent.getColumnIndexesInView();\n colGroup.id = this.parent.element.id + literals.colGroup;\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n continue;\n }\n col = this.parent.createElement('col', { className: 'e-group-intent' });\n colGroup.appendChild(col);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n col = this.parent.createElement('col', { className: 'e-detail-intent' });\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n col = this.parent.createElement('col');\n if (cols[parseInt(i.toString(), 10)].visible === false) {\n setStyleAttribute(col, { 'display': 'none' });\n }\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n return colGroup;\n };\n HeaderRender.prototype.ensureColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gObj = this.parent;\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gObj.allowGrouping) {\n for (var c = 0, len_2 = gObj.groupSettings.columns.length; c < len_2; c++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(c) === -1) {\n continue;\n }\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (gObj.detailTemplate || gObj.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell(args, CellType.DetailHeader));\n }\n if (gObj.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n return rows;\n };\n HeaderRender.prototype.getHeaderCells = function (rows, tableName) {\n var thead = this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead');\n var cols = this.parent.enableColumnVirtualization ?\n this.parent.getColumns(this.parent.enablePersistence) : this.parent.columns;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n if (this.parent.lockcolPositionCount) {\n for (var i = 0; i < (!isNullOrUndefined(cols) ? cols.length : 0); i++) {\n this.lockColsRendered = false;\n rows = this.appendCells(cols[parseInt(i.toString(), 10)], rows, 0, i === 0, false, i === (cols.length - 1), thead, tableName, false);\n }\n }\n for (var i = 0, len = (!isNullOrUndefined(cols) ? cols.length : 0); i < len; i++) {\n this.notfrzIdx = 0;\n this.lockColsRendered = true;\n rows = this.appendCells(cols[parseInt(i.toString(), 10)], rows, 0, i === 0, false, i === (len - 1), thead, tableName, false);\n }\n return rows;\n };\n HeaderRender.prototype.appendCells = function (cols, rows, index, isFirstObj, isFirstCol, isLastCol, isMovable, tableName, isStackLastCol) {\n var lastCol = isLastCol ? isStackLastCol ? 'e-laststackcell' : 'e-lastcell' : '';\n var isLockColumn = !this.parent.lockcolPositionCount\n || (cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered);\n if (!cols.columns) {\n if (isLockColumn) {\n rows[parseInt(index.toString(), 10)].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n if (this.parent.lockcolPositionCount) {\n if ((this.frzIdx + this.notfrzIdx < this.parent.frozenColumns) &&\n ((cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered))) {\n this.frzIdx++;\n }\n else {\n this.notfrzIdx++;\n }\n }\n else {\n this.frzIdx++;\n }\n }\n else {\n this.isFirstCol = false;\n var colSpan = this.getCellCnt(cols, 0);\n if (colSpan) {\n var stackedLockColsCount = this.getStackedLockColsCount(cols, 0);\n var isStackedLockColumn = this.parent.lockcolPositionCount === 0\n || (!this.lockColsRendered && stackedLockColsCount !== 0)\n || (this.lockColsRendered && (colSpan - stackedLockColsCount) !== 0);\n if (isStackedLockColumn) {\n rows[parseInt(index.toString(), 10)].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols,\n colSpan: this.getColSpan(colSpan, stackedLockColsCount),\n className: isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')\n }));\n }\n }\n if (this.parent.lockcolPositionCount && !this.lockColsRendered) {\n for (var i = 0; i < cols.columns.length; i++) {\n rows = this.appendCells(cols.columns[parseInt(i.toString(), 10)], rows, index + 1, isFirstObj, i === 0, i === (cols.columns.length - 1) && isLastCol, isMovable, tableName, false);\n }\n }\n if (this.lockColsRendered) {\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n isFirstObj = isFirstObj && i === 0;\n var isFirstCol_1 = this.isFirstCol = cols.columns[parseInt(i.toString(), 10)].visible\n && !isFirstObj;\n var isLaststackedCol = i === (len - 1) && isLastCol;\n rows = this.appendCells(cols.columns[parseInt(i.toString(), 10)], rows, index + 1, isFirstObj, isFirstCol_1 && !isLaststackedCol, isLaststackedCol, isMovable, tableName, true);\n }\n }\n }\n return rows;\n };\n HeaderRender.prototype.getStackedLockColsCount = function (col, lockColsCount) {\n if (col.columns) {\n for (var i = 0; i < col.columns.length; i++) {\n lockColsCount = this.getStackedLockColsCount(col.columns[parseInt(i.toString(), 10)], lockColsCount);\n }\n }\n else if (col.lockColumn) {\n lockColsCount++;\n }\n return lockColsCount;\n };\n HeaderRender.prototype.getColSpan = function (colSpan, stackedLockColsCount) {\n colSpan = !this.lockColsRendered ? stackedLockColsCount : colSpan - stackedLockColsCount;\n return colSpan;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderRender.prototype.generateRow = function (index) {\n return new Row({});\n };\n HeaderRender.prototype.generateCell = function (column, cellType, rowSpan, className, rowIndex, colIndex) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'isTemplate': !isNullOrUndefined(column.headerTemplate),\n 'rowID': '',\n 'column': column,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'className': className,\n 'index': rowIndex,\n 'colIndex': colIndex\n };\n if (!opt.rowSpan || opt.rowSpan < 2) {\n delete opt.rowSpan;\n }\n return new Cell(opt);\n };\n /**\n * Function to hide header table column based on visible property\n *\n * @param {Column[]} columns - specifies the column\n * @returns {void}\n */\n HeaderRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var displayVal;\n var idx;\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[parseInt(c.toString(), 10)];\n idx = gObj.getNormalizedColumnIndex(column.uid);\n displayVal = column.visible ? '' : 'none';\n setStyleAttribute(this.getColGroup().children[parseInt(idx.toString(), 10)], { 'display': displayVal });\n if (gObj.editSettings.showAddNewRow && gObj.element.querySelector('.e-addedrow')) {\n setStyleAttribute(gObj.element.querySelector('.e-addedrow').querySelector('colgroup').childNodes[parseInt(idx.toString(), 10)], { 'display': displayVal });\n }\n }\n this.refreshUI();\n if (this.parent.editSettings.showAddNewRow) {\n this.parent.isAddNewRow = true;\n }\n };\n HeaderRender.prototype.colPosRefresh = function () {\n this.refreshUI();\n };\n /**\n * Refresh the header of the Grid.\n *\n * @returns {void}\n */\n HeaderRender.prototype.refreshUI = function () {\n var headerDiv = this.getPanel();\n this.toggleStackClass(headerDiv);\n var table = this.freezeReorder ? this.headerPanel.querySelector('.' + literals.movableHeader).querySelector('.' + literals.table)\n : this.getTable();\n var tableName = undefined;\n if (table) {\n remove(table);\n if (this.parent.editSettings.showAddNewRow && !this.parent.isAddNewRow && table.querySelector('.e-addedrow') &&\n (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n (table.querySelector('.e-addedrow')).classList.add('e-addrow-removed');\n this.parent.isAddNewRow = true;\n }\n table.removeChild(table.firstChild);\n table.removeChild(table.childNodes[0]);\n var colGroup = this.parent.createElement(literals.colGroup);\n var findHeaderRow = this.createHeaderContent(tableName);\n this.rows = findHeaderRow.rows;\n table.insertBefore(findHeaderRow.thead, table.firstChild);\n this.updateColGroup(colGroup);\n table.insertBefore(this.setColGroup(colGroup), table.firstChild);\n this.appendContent(table);\n this.parent.notify(events.colGroupRefresh, {});\n this.widthService.setWidthToColumns();\n this.parent.updateDefaultCursor();\n this.initializeHeaderDrag();\n var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n var gCells = [].slice.call(row.getElementsByClassName('e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n }\n this.parent.notify(events.headerRefreshed, { rows: this.rows });\n if (this.parent.enableColumnVirtualization && parentsUntil(table, literals.movableHeader)) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false, isXaxis: true } });\n }\n if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {\n wrap(rows, true);\n }\n }\n var firstHeaderCell = this.parent.getHeaderContent().querySelector('.e-headercell:not(.e-hide)');\n if (!isNullOrUndefined(firstHeaderCell)) {\n firstHeaderCell.tabIndex = 0;\n }\n };\n HeaderRender.prototype.toggleStackClass = function (div) {\n var column = this.parent.columns;\n var stackedHdr = (!isNullOrUndefined(column) ? column.some(function (column) { return !isNullOrUndefined(column.columns); }) : false);\n if (stackedHdr) {\n div.classList.add('e-stackedheader');\n }\n else {\n div.classList.remove('e-stackedheader');\n }\n };\n HeaderRender.prototype.appendContent = function (table) {\n this.getPanel().querySelector('.' + literals.headerContent).appendChild(table);\n };\n HeaderRender.prototype.getCellCnt = function (col, cnt) {\n if (col.columns) {\n for (var i = 0, len = col.columns.length; i < len; i++) {\n cnt = this.getCellCnt(col.columns[parseInt(i.toString(), 10)], cnt);\n }\n }\n else {\n if (col.visible) {\n cnt++;\n }\n }\n return cnt;\n };\n HeaderRender.prototype.initializeHeaderDrag = function () {\n var gObj = this.parent;\n if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {\n return;\n }\n this.draggable = new Draggable(gObj.getHeaderContent(), {\n dragTarget: '.e-headercell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n abort: '.e-rhandler',\n isReplaceDragEle: this.isReplaceDragEle\n });\n this.parent.on(events.destroy, this.droppableDestroy, this);\n };\n HeaderRender.prototype.initializeHeaderDrop = function () {\n var gObj = this.parent;\n this.droppable = new Droppable(gObj.getHeaderContent(), {\n accept: '.e-dragclone',\n drop: this.drop\n });\n this.parent.on(events.destroy, this.droppableDestroy, this);\n };\n HeaderRender.prototype.droppableDestroy = function () {\n if (this.droppable && !this.droppable.isDestroyed) {\n this.droppable.destroy();\n }\n if (this.draggable && !this.draggable.isDestroyed) {\n this.draggable.destroy();\n }\n };\n HeaderRender.prototype.renderCustomToolbar = function () {\n var _this = this;\n var gObj = this.parent;\n if (gObj.rowRenderingMode === 'Vertical' && !gObj.toolbar\n && (gObj.allowSorting || (gObj.allowFiltering && gObj.filterSettings.type !== 'FilterBar'))) {\n var div = gObj.createElement('div', { className: 'e-res-toolbar e-toolbar' });\n var toolbarItems = gObj.createElement('div', { className: 'e-toolbar-items' });\n var toolbarLeft = gObj.createElement('div', { className: 'e-toolbar-left' });\n var count = this.parent.allowFiltering && this.parent.allowSorting ? 2 : 1;\n for (var i = 0; i < count; i++) {\n var toolbarItem = gObj.createElement('div', { className: 'e-toolbar-item e-gridresponsiveicons e-icons e-tbtn-align' });\n var cls = count === 1 ? this.parent.allowSorting ? 'sort'\n : 'filter' : i === 1 ? 'sort' : 'filter';\n var button = gObj.createElement('button', { className: 'e-tbar-btn e-control e-btn e-lib e-icon-btn' });\n var span = gObj.createElement('span', { className: 'e-btn-icon e-res' + cls + '-icon e-icons' });\n button.appendChild(span);\n var btnObj = new Button({\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n btnObj.appendTo(button);\n button.onclick = function (e) {\n if (e.target.classList.contains('e-ressort-btn')\n || e.target.classList.contains('e-ressort-icon') ||\n e.target.querySelector('.e-ressort-icon')) {\n _this.parent.showResponsiveCustomSort();\n }\n else {\n _this.parent.showResponsiveCustomFilter();\n }\n };\n toolbarItem.appendChild(button);\n toolbarLeft.appendChild(toolbarItem);\n }\n toolbarItems.appendChild(toolbarLeft);\n div.appendChild(toolbarItems);\n gObj.element.insertBefore(div, this.parent.element.querySelector('.' + literals.gridHeader));\n }\n else {\n if (gObj.enableAdaptiveUI && !gObj.toolbar) {\n gObj.getContent().classList.add('e-responsive-header');\n }\n }\n };\n HeaderRender.prototype.updateCustomResponsiveToolbar = function (args) {\n var resToolbar = this.parent.element.querySelector('.e-responsive-toolbar');\n if (args.module === 'toolbar') {\n if (resToolbar) {\n remove(resToolbar);\n }\n else {\n this.renderCustomToolbar();\n }\n }\n };\n return HeaderRender;\n}());\nexport { HeaderRender };\n","import { remove, addClass } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { doesImplementInterface, setStyleAndAttributes, appendChildren, extendObjWithFn, addStickyColumnPosition } from '../base/util';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { foreignKeyData } from '../base/constant';\nimport { CellType } from '../base/enum';\nimport * as literals from '../base/string-literals';\n/**\n * CellRenderer class which responsible for building cell content.\n *\n * @hidden\n */\nvar CellRenderer = /** @class */ (function () {\n function CellRenderer(parent, locator) {\n this.localizer = locator.getService('localization');\n this.formatter = locator.getService('valueFormatter');\n this.parent = parent;\n this.element = this.parent.createElement('TD', { className: literals.rowCell, attrs: { role: 'gridcell', tabindex: '-1' } });\n this.rowChkBox = this.parent.createElement('input', { className: 'e-checkselect', attrs: { 'type': 'checkbox', 'aria-label': this.localizer.getConstant('SelectRow') } });\n }\n /**\n * Function to return the wrapper for the TD content\n *\n * @returns {string | Element} returns the string\n */\n CellRenderer.prototype.getGui = function () {\n return '';\n };\n /**\n * Function to format the cell value.\n *\n * @param {Column} column - specifies the column\n * @param {Object} value - specifies the value\n * @param {Object} data - specifies the data\n * @returns {string} returns the format\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n CellRenderer.prototype.format = function (column, value, data) {\n if (!isNullOrUndefined(column.format)) {\n if (column.type === 'number' && isNaN(parseInt(value, 10))) {\n value = null;\n }\n if (column.type === 'dateonly' && typeof value === 'string' && value) {\n var arr = value.split(/[^0-9.]/);\n value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));\n }\n value = this.formatter.toView(value, column.getFormatter());\n }\n return isNullOrUndefined(value) ? '' : value.toString();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n CellRenderer.prototype.evaluate = function (node, cell, data, attributes, fData, isEdit) {\n var _a;\n var result;\n if (cell.column.template) {\n var isReactCompiler = this.parent.isReact && typeof (cell.column.template) !== 'string' && cell.column.template.prototype && !(cell.column.template.prototype).CSPTemplate;\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var literals_1 = ['index'];\n var dummyData = extendObjWithFn({}, data, (_a = {}, _a[foreignKeyData] = fData, _a.column = cell.column, _a));\n var templateID = this.parent.element.id + cell.column.uid;\n var str = 'isStringTemplate';\n if (isReactCompiler || isReactChild) {\n var copied = { 'index': attributes[literals_1[0]] };\n cell.column.getColumnTemplate()(extend(copied, dummyData), this.parent, 'columnTemplate', templateID, this.parent[\"\" + str], null, node);\n }\n else {\n result = cell.column.getColumnTemplate()(extend({ 'index': attributes[literals_1[0]] }, dummyData), this.parent, 'template', templateID, this.parent[\"\" + str], undefined, undefined, this.parent['root']);\n }\n if (!isReactCompiler && !isReactChild) {\n appendChildren(node, result);\n }\n this.parent.notify('template-result', { template: result });\n result = null;\n node.setAttribute('aria-label', node.innerText + this.localizer.getConstant('TemplateCell') +\n this.localizer.getConstant('ColumnHeader') + cell.column.headerText);\n return false;\n }\n return true;\n };\n /**\n * Function to invoke the custom formatter available in the column object.\n *\n * @param {Column} column - specifies the column\n * @param {Object} value - specifies the value\n * @param {Object} data - specifies the data\n * @returns {Object} returns the object\n */\n CellRenderer.prototype.invokeFormatter = function (column, value, data) {\n if (!isNullOrUndefined(column.formatter)) {\n if (doesImplementInterface(column.formatter, 'getValue')) {\n var formatter = column.formatter;\n value = new formatter().getValue(column, data);\n }\n else if (typeof column.formatter === 'function') {\n value = column.formatter(column, data);\n }\n else {\n value = column.formatter.getValue(column, data);\n }\n }\n return value;\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attributes\n * @param {boolean} isExpand - specifies the boolean for expand\n * @param {boolean} isEdit - specifies the boolean for edit\n * @returns {Element} returns the element\n */\n CellRenderer.prototype.render = function (cell, data, attributes, isExpand, isEdit) {\n return this.refreshCell(cell, data, attributes, isEdit);\n };\n /**\n * Function to refresh the cell content based on Column object.\n *\n * @param {Element} td - specifies the element\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attribute\n * @returns {void}\n */\n CellRenderer.prototype.refreshTD = function (td, cell, data, attributes) {\n var isEdit = this.parent.editSettings.mode === 'Batch' && td.classList.contains('e-editedbatchcell');\n if (this.parent.isReact) {\n var cellIndex = td.cellIndex;\n var parentRow = td.parentElement;\n remove(td);\n var newTD = this.refreshCell(cell, data, attributes, isEdit);\n this.cloneAttributes(newTD, td);\n if (parentRow.cells.length !== cellIndex - 1) {\n parentRow.insertBefore(newTD, parentRow.cells[parseInt(cellIndex.toString(), 10)]);\n }\n else {\n parentRow.appendChild(newTD);\n }\n }\n else {\n var node = this.refreshCell(cell, data, attributes, isEdit);\n td.innerHTML = '';\n var arialabelText = node.getAttribute('aria-label');\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n arialabelText ? td.setAttribute('aria-label', arialabelText) : null;\n var elements = [].slice.call(node.childNodes);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var elem = elements_1[_i];\n td.appendChild(elem);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n CellRenderer.prototype.cloneAttributes = function (target, source) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var attrs = source.attributes;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var i = attrs.length;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var attr;\n while (i--) {\n attr = attrs[parseInt(i.toString(), 10)];\n target.setAttribute(attr.name, attr.value);\n }\n };\n CellRenderer.prototype.refreshCell = function (cell, data, attributes, isEdit) {\n var _a;\n var node = this.element.cloneNode();\n var column = cell.column;\n var fData;\n if (cell.isForeignKey) {\n fData = cell.foreignKeyData[0] || (_a = {}, _a[column.foreignKeyValue] = column.format ? null : '', _a);\n }\n //Prepare innerHtml\n var innerHtml = this.getGui();\n var value = cell.isForeignKey ? this.getValue(column.foreignKeyValue, fData, column) :\n this.getValue(column.field, data, column);\n if ((column.type === 'date' || column.type === 'datetime') && !isNullOrUndefined(value)) {\n value = new Date(value);\n }\n if (column.type === 'dateonly' && !isNullOrUndefined(value) && typeof value === 'string') {\n var arr = value.split(/[^0-9.]/);\n value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));\n }\n value = this.format(column, value, data);\n innerHtml = value.toString();\n if (column.type === 'boolean' && !column.displayAsCheckBox) {\n var localeStr = (value !== 'true' && value !== 'false') ? null : value === 'true' ? 'True' : 'False';\n innerHtml = localeStr ? this.localizer.getConstant(localeStr) : innerHtml;\n }\n var fromFormatter = this.invokeFormatter(column, value, data);\n innerHtml = !isNullOrUndefined(column.formatter) ? isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;\n if (this.evaluate(node, cell, data, attributes, fData, isEdit) && column.type !== 'checkbox') {\n this.appendHtml(node, this.parent.sanitize(innerHtml), column.getDomSetter ? column.getDomSetter() : 'innerHTML');\n }\n else if (column.type === 'checkbox') {\n node.classList.add(literals.gridChkBox);\n if (this.parent.selectionSettings.persistSelection) {\n value = value === 'true';\n }\n else {\n value = false;\n }\n var checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });\n if (this.parent.cssClass) {\n addClass([checkWrap], [this.parent.cssClass]);\n }\n this.rowChkBox.id = 'checkbox-' + cell.rowID;\n checkWrap.insertBefore(this.rowChkBox.cloneNode(), checkWrap.firstChild);\n node.appendChild(checkWrap);\n }\n if (this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {\n cell.isSelected = true;\n }\n this.setAttributes(node, cell, attributes);\n if (column.type === 'boolean' && column.displayAsCheckBox) {\n var checked = isNaN(parseInt(value.toString(), 10)) ? value === 'true' : parseInt(value.toString(), 10) > 0;\n var checkWrap = createCheckBox(this.parent.createElement, false, { checked: checked, label: ' ' });\n node.innerHTML = '';\n node.classList.add('e-gridchkbox-cell');\n checkWrap.classList.add('e-checkbox-disabled');\n if (this.parent.cssClass) {\n addClass([checkWrap], [this.parent.cssClass]);\n }\n node.appendChild(checkWrap);\n }\n if (node.classList.contains('e-summarycell') && !data.key) {\n var uid = node.getAttribute('e-mappinguid');\n column = this.parent.getColumnByUid(uid);\n node.setAttribute('aria-label', innerHtml + this.localizer.getConstant('ColumnHeader') + cell.column.headerText);\n }\n if (this.parent.isFrozenGrid() && (!data || (data && !data.key))) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHTML\n * @param {string} property - specifies the element\n * @returns {Element} returns the element\n */\n CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {\n if (property === void 0) { property = 'innerHTML'; }\n node[\"\" + property] = innerHtml;\n return node;\n };\n /**\n * @param {HTMLElement} node - specifies the node\n * @param {cell} cell - specifies the cell\n * @param {Object} attributes - specifies the attributes\n * @returns {void}\n * @hidden\n */\n CellRenderer.prototype.setAttributes = function (node, cell, attributes) {\n var column = cell.column;\n this.buildAttributeFromCell(node, cell, column.type === 'checkbox');\n setStyleAndAttributes(node, attributes);\n setStyleAndAttributes(node, cell.attributes);\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (this.parent.rowRenderingMode === 'Vertical') {\n setStyleAndAttributes(node, { 'data-cell': column.headerText });\n }\n if (column.textAlign) {\n node.style.textAlign = column.textAlign;\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip')\n && !(this.parent.allowTextWrap && (this.parent.textWrapSettings.wrapMode === 'Content'\n || this.parent.textWrapSettings.wrapMode === 'Both'))) {\n if (column.type !== 'checkbox') {\n node.classList.add('e-ellipsistooltip');\n }\n }\n };\n CellRenderer.prototype.buildAttributeFromCell = function (node, cell, isCheckBoxType) {\n var attr = {};\n var prop = { 'colindex': literals.dataColIndex };\n var classes = [];\n if (cell.colSpan) {\n attr.colSpan = cell.colSpan;\n }\n if (cell.rowSpan) {\n attr.rowSpan = cell.rowSpan;\n }\n if (cell.isTemplate) {\n classes.push('e-templatecell');\n }\n if (cell.isSelected) {\n classes.push.apply(classes, ['e-selectionbackground', 'e-active']);\n if (isCheckBoxType) {\n node.querySelector('.e-frame').classList.add('e-check');\n }\n }\n if (cell.isColumnSelected) {\n classes.push.apply(classes, ['e-columnselection']);\n }\n if (cell.cellType === CellType.Header) {\n attr[prop.colindex] = cell.colIndex;\n attr[literals.ariaColIndex] = cell.colIndex + 1;\n }\n else if (!isNullOrUndefined(cell.index)) {\n attr[prop.colindex] = cell.index;\n attr[literals.ariaColIndex] = cell.index + 1;\n }\n if (!cell.visible) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(node, attr);\n };\n CellRenderer.prototype.getValue = function (field, data, column) {\n return column.valueAccessor(field, data, column);\n };\n return CellRenderer;\n}());\nexport { CellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, extend, addClass } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes, appendChildren, addStickyColumnPosition } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\nimport { AriaService } from '../services/aria-service';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { headerCellInfo } from '../base/constant';\n/**\n * HeaderCellRenderer class which responsible for building header cell content.\n *\n * @hidden\n */\nvar HeaderCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderCellRenderer, _super);\n function HeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent\n .createElement('TH', { className: 'e-headercell', attrs: { tabindex: '-1', role: 'columnheader' } });\n _this.ariaService = new AriaService();\n _this.hTxtEle = _this.parent.createElement('span', { className: 'e-headertext' });\n _this.sortEle = _this.parent.createElement('div', { className: 'e-sortfilterdiv e-icons', attrs: { 'aria-hidden': 'true' } });\n _this.gui = _this.parent.createElement('div');\n _this.chkAllBox = _this.parent.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox', 'aria-label': _this.localizer.getConstant('SelectAllCheckbox') } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n *\n * @returns {string | Element} returns the element\n */\n HeaderCellRenderer.prototype.getGui = function () {\n return this.gui.cloneNode();\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the column\n * @param {Object} data - specifies the data\n * @param {object} attributes - specifies the aattributes\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n /**\n * Function to refresh the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Element} node - specifies the noe\n * @returns {Element} returns the element\n */\n HeaderCellRenderer.prototype.refresh = function (cell, node) {\n this.clean(node);\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n HeaderCellRenderer.prototype.clean = function (node) {\n node.innerHTML = '';\n };\n /* tslint:disable-next-line:max-func-body-length */\n HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {\n var column = cell.column;\n var ariaAttr = {};\n var elementDesc = '';\n //Prepare innerHtml\n var innerDIV = this.getGui();\n var hValueAccer;\n attributes(innerDIV, {\n 'e-mappinguid': column.uid,\n 'class': 'e-headercelldiv'\n });\n if (!isNullOrUndefined(column.headerValueAccessor)) {\n hValueAccer = this.getValue(column.headerText, column);\n }\n if (this.parent.allowSorting && column.allowSorting && !isNullOrUndefined(column.field)) {\n node.classList.add('e-sort-icon');\n }\n if (column.type !== 'checkbox') {\n var value = column.headerText;\n if (!isNullOrUndefined(hValueAccer)) {\n value = hValueAccer;\n }\n var headerText = this.hTxtEle.cloneNode();\n headerText[column.getDomSetter()] = this.parent.sanitize(value);\n innerDIV.appendChild(headerText);\n }\n else {\n column.editType = 'booleanedit';\n var checkAllWrap = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n this.chkAllBox.id = 'checkbox-' + column.uid;\n checkAllWrap.insertBefore(this.chkAllBox.cloneNode(), checkAllWrap.firstChild);\n if (this.parent.cssClass) {\n addClass([checkAllWrap], [this.parent.cssClass]);\n }\n innerDIV.appendChild(checkAllWrap);\n innerDIV.classList.add('e-headerchkcelldiv');\n }\n this.buildAttributeFromCell(node, cell);\n this.appendHtml(node, innerDIV);\n node.appendChild(this.sortEle.cloneNode());\n if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&\n (column.allowFiltering && !isNullOrUndefined(column.field)) &&\n !(this.parent.showColumnMenu && column.showColumnMenu)) {\n attributes(fltrMenuEle, {\n 'e-mappinguid': 'e-flmenu-' + column.uid\n });\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('FilterDescription') : this.localizer.getConstant('FilterDescription');\n node.classList.add('e-fltr-icon');\n var matchFlColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var index = 0; index < this.parent.columns.length; index++) {\n for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {\n if (this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field === column.field\n || (foreignColumn.length\n && column.foreignKeyValue === this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field)) {\n fltrMenuEle.classList.add('e-filtered');\n matchFlColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.appendChild(fltrMenuEle.cloneNode());\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (this.parent.allowSorting && column.allowSorting) {\n ariaAttr.sort = 'none';\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('SortDescription') : this.localizer.getConstant('SortDescription');\n }\n if ((this.parent.allowGrouping && column.allowGrouping) || this.parent.allowReordering && column.allowReordering) {\n ariaAttr.grabbed = false;\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('GroupDescription') : this.localizer.getConstant('GroupDescription');\n }\n if (this.parent.showColumnMenu && column.type !== 'checkbox' && !column.template) {\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('ColumnMenuDescription') : this.localizer.getConstant('ColumnMenuDescription');\n }\n node = this.extendPrepareHeader(column, node);\n var result;\n var gridObj = this.parent;\n var colIndex = gridObj.getColumnIndexByField(column.field);\n if (!isNullOrUndefined(column.headerTemplate)) {\n //need to pass the template id for blazor headertemplate\n var headerTempID = gridObj.element.id + column.uid + 'headerTemplate';\n var str = 'isStringTemplate';\n var col = column;\n var isReactCompiler = this.parent.isReact && typeof (column.headerTemplate) !== 'string';\n var isReactChild_1 = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild_1) {\n var copied = { 'index': colIndex };\n node.firstElementChild.innerHTML = '';\n column.getHeaderTemplate()(extend(copied, col), gridObj, 'headerTemplate', headerTempID, this.parent[\"\" + str], null, node.firstElementChild);\n this.parent.renderTemplates();\n }\n else {\n result = column.getHeaderTemplate()(extend({ 'index': colIndex }, col), gridObj, 'headerTemplate', headerTempID, this.parent[\"\" + str], undefined, undefined, this.parent['root']);\n node.firstElementChild.innerHTML = '';\n appendChildren(node.firstElementChild, result);\n }\n }\n this.ariaService.setOptions(node, ariaAttr);\n if (!isNullOrUndefined(column.headerTextAlign) || !isNullOrUndefined(column.textAlign)) {\n var alignment = column.headerTextAlign || column.textAlign;\n innerDIV.style.textAlign = alignment;\n if (alignment === 'Right' || alignment === 'Left') {\n node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');\n }\n else if (alignment === 'Center') {\n node.classList.add('e-centeralign');\n }\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if ((column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip'))\n && !(gridObj.allowTextWrap && (gridObj.textWrapSettings.wrapMode === 'Header'\n || gridObj.textWrapSettings.wrapMode === 'Both'))) {\n if (column.type !== 'checkbox') {\n node.classList.add('e-ellipsistooltip');\n }\n }\n if (elementDesc) {\n var titleElem = (this.parent.createElement('span', { id: 'headerTitle-' + column.uid, innerHTML: elementDesc, attrs: { style: 'display:none' } }));\n node.appendChild(titleElem);\n node.setAttribute('aria-describedby', titleElem.id);\n }\n node.setAttribute('aria-rowspan', (!isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());\n node.setAttribute('aria-colspan', '1');\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (((this.parent.isReact && this.parent.requireTemplateRef)\n || (isReactChild && this.parent.parentDetails.parentInstObj.requireTemplateRef))\n && !isNullOrUndefined(column.headerTemplate)) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = this;\n thisRef_1.parent.renderTemplates(function () {\n thisRef_1.parent.trigger(headerCellInfo, { cell: cell, node: node });\n });\n }\n else {\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n HeaderCellRenderer.prototype.getValue = function (field, column) {\n return column.headerValueAccessor(field, column);\n };\n HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {\n if (this.parent.showColumnMenu && column.showColumnMenu && !isNullOrUndefined(column.field)) {\n var element = (this.parent.createElement('div', { className: 'e-icons e-columnmenu', attrs: { 'aria-hidden': 'true' } }));\n var matchFilteredColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {\n for (var i = 0; i < this.parent.columns.length; i++) {\n for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {\n if (this.parent.filterSettings.columns[parseInt(j.toString(), 10)].field === column.field) {\n element.classList.add('e-filtered');\n matchFilteredColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.classList.add('e-fltr-icon');\n node.appendChild(element);\n }\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHtml\n * @returns {Element} returns the element\n */\n HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n return HeaderCellRenderer;\n}(CellRenderer));\nexport { HeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { headerCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, appendChildren, frozenDirection, isChildColumn, applyStickyLeftRightPosition } from '../base/util';\n/**\n * StackedHeaderCellRenderer class which responsible for building stacked header cell content.\n *\n * @hidden\n */\nvar StackedHeaderCellRenderer = /** @class */ (function (_super) {\n __extends(StackedHeaderCellRenderer, _super);\n function StackedHeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', {\n className: 'e-headercell e-stackedheadercell', attrs: {\n tabindex: '-1', role: 'columnheader'\n }\n });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {object} attributes - specifies the attributes\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n StackedHeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var div = this.parent.createElement('div', {\n className: 'e-stackedheadercelldiv',\n attrs: { 'e-mappinguid': cell.column.uid }\n });\n var column = cell.column;\n node.appendChild(div);\n if (!isNullOrUndefined(column.headerTemplate)) {\n appendChildren(div, column.getHeaderTemplate()(column, this.parent, 'headerTemplate'));\n }\n else {\n this.appendHtml(div, this.parent.sanitize(column.headerText), column.getDomSetter());\n }\n if (cell.column.toolTip) {\n node.setAttribute('title', cell.column.toolTip);\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip')) {\n node.classList.add('e-ellipsistooltip');\n }\n if (!isNullOrUndefined(cell.column.textAlign)) {\n div.style.textAlign = cell.column.textAlign;\n }\n if (cell.column.customAttributes) {\n setStyleAndAttributes(node, cell.column.customAttributes);\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-colspan', cell.colSpan.toString());\n node.setAttribute('aria-rowspan', '1');\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = cell.column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n if (frozenDirection(column) === 'Left') {\n node.classList.add('e-leftfreeze');\n if (column.border === 'Left') {\n node.classList.add('e-freezeleftborder');\n }\n if (column.index === 0) {\n applyStickyLeftRightPosition(node, (this.parent.getIndentCount() * 30), this.parent.enableRtl, 'Left');\n }\n else {\n var cols = this.parent.getColumns();\n var width = this.parent.getIndentCount() * 30;\n for (var i = 0; i < cols.length; i++) {\n if (column.index < cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, 'Left');\n }\n }\n else if (frozenDirection(column) === 'Right') {\n node.classList.add('e-rightfreeze');\n var cols = this.parent.getColumns();\n var width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (isChildColumn(column, cols[parseInt(i.toString(), 10)].uid) || column.index > cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, 'Right');\n if (column.border === 'Right') {\n node.classList.add('e-freezerightborder');\n }\n }\n else if (frozenDirection(column) === 'Fixed') {\n node.classList.add('e-fixedfreeze');\n var cols = this.parent.getColumns();\n var width = 0;\n if (this.parent.getVisibleFrozenLeftCount()) {\n width = this.parent.getIndentCount() * 30;\n }\n else if (this.parent.getFrozenMode() === 'Right') {\n width = this.parent.groupSettings.columns.length * 30;\n }\n for (var i = 0; i < cols.length; i++) {\n if (column.index > cols[parseInt(i.toString(), 10)].index) {\n if ((cols[parseInt(i.toString(), 10)].freeze === 'Left' || cols[parseInt(i.toString(), 10)].isFrozen) ||\n cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, width - 1, this.parent.enableRtl, 'Left');\n width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (column.index < cols[parseInt(i.toString(), 10)].index) {\n if (isChildColumn(column, cols[parseInt(i.toString(), 10)].uid) ||\n column.index > cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].freeze === 'Right' || cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, width - 1, this.parent.enableRtl, 'Right');\n }\n else {\n node.classList.add('e-unfreeze');\n }\n return node;\n };\n return StackedHeaderCellRenderer;\n}(CellRenderer));\nexport { StackedHeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { setStyleAndAttributes } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\n/**\n * IndentCellRenderer class which responsible for building group indent cell.\n *\n * @hidden\n */\nvar IndentCellRenderer = /** @class */ (function (_super) {\n __extends(IndentCellRenderer, _super);\n function IndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-indentcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n IndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n setStyleAndAttributes(node, cell.attributes);\n return node;\n };\n return IndentCellRenderer;\n}(CellRenderer));\nexport { IndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren, templateCompiler } from '../base/util';\nimport { CellType } from '../base/enum';\n/**\n * GroupCaptionCellRenderer class which responsible for building group caption cell.\n *\n * @hidden\n */\nvar GroupCaptionCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionCellRenderer, _super);\n function GroupCaptionCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.cellUid = 0;\n _this.element = _this.parent\n .createElement('TD', { className: 'e-groupcaption',\n attrs: { id: _this.parent.element.id + 'captioncell', tabindex: '-1' } });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the GroupedData\n * @returns {Element} returns the element\n */\n GroupCaptionCellRenderer.prototype.render = function (cell, data) {\n this.element.id = this.parent.element.id + 'captioncell' + this.cellUid++;\n var node = this.element.cloneNode();\n var gObj = this.parent;\n var column = cell.column;\n var domSetter = column.getDomSetter ? column.getDomSetter() : 'innerHTML';\n var result;\n var fKeyValue;\n var gTemplateValue;\n data.headerText = cell.column.headerText;\n if (cell.isForeignKey) {\n fKeyValue = this.format(cell.column, cell.column.valueAccessor('foreignKey', data, cell.column));\n }\n var value = cell.isForeignKey ? fKeyValue : cell.column.enableGroupByFormat ? data.key :\n this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));\n for (var j = 0; j < gObj.aggregates.length; j++) {\n var _loop_1 = function (i) {\n if (gObj.getVisibleColumns()[0].field === gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .field && gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)].groupCaptionTemplate) {\n var gCaptionTemp = gObj.aggregates[parseInt(j.toString(), 10)]\n .columns[parseInt(i.toString(), 10)].groupCaptionTemplate;\n if (typeof gCaptionTemp === 'string' && gCaptionTemp.includes('$')) {\n gTemplateValue = gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .groupCaptionTemplate.split('$')[0] + data[gObj.getVisibleColumns()[0].field][gObj\n .aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)].type] +\n gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .groupCaptionTemplate.split('}')[1];\n }\n else {\n var column_1 = (gObj.aggregates[parseInt(j.toString(), 10)]\n .columns[parseInt(i.toString(), 10)]);\n var tempObj = column_1.getTemplate(CellType.CaptionSummary);\n var tempID = '';\n if (!isNullOrUndefined(tempObj)) {\n var tempValue_1 = tempObj.fn(data[column_1.columnName], this_1.parent, tempObj.property, tempID);\n if (this_1.parent.isReact && typeof column_1.groupCaptionTemplate !== 'string') {\n this_1.parent.renderTemplates(function () {\n if (tempValue_1 && tempValue_1.length) {\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n node.appendChild(tempValue_1[0]);\n }\n else {\n node.innerText += ' ' + tempValue_1[0].textContent;\n }\n }\n });\n }\n else {\n if (tempValue_1 && tempValue_1.length) {\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n gTemplateValue = tempValue_1;\n }\n else {\n gTemplateValue = tempValue_1[0].textContent;\n }\n }\n }\n }\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0; i < gObj.aggregates[parseInt(j.toString(), 10)].columns.length; i++) {\n var state_1 = _loop_1(i);\n if (state_1 === \"break\")\n break;\n }\n }\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n var isReactCompiler = this.parent.isReact && typeof (gObj.groupSettings.captionTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n var tempID = gObj.element.id + 'captionTemplate';\n templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent, 'captionTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else if (this.parent.isVue) {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent);\n }\n else {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data);\n }\n if (!isReactCompiler && !isReactChild) {\n appendChildren(node, result);\n if (gTemplateValue && gTemplateValue.length && gTemplateValue[0].textContent) {\n node.appendChild(gTemplateValue[0]);\n }\n }\n }\n else {\n if (gObj.groupSettings.enableLazyLoading) {\n node[\"\" + domSetter] = this.parent.sanitize(cell.column.headerText) + ': ' + this.parent.sanitize(value) +\n (gTemplateValue ? ' ' + gTemplateValue : '');\n }\n else {\n node[\"\" + domSetter] = this.parent.sanitize(cell.column.headerText) + ': ' + this.parent.sanitize(value) +\n ' - ' + data.count + ' ' + (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'))\n + (gTemplateValue ? ' ' + gTemplateValue : '');\n }\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-label', node.innerHTML + this.localizer.getConstant('GroupCaption'));\n node.setAttribute('title', node.textContent);\n return node;\n };\n return GroupCaptionCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionCellRenderer };\n/**\n * GroupCaptionEmptyCellRenderer class which responsible for building group caption empty cell.\n *\n * @hidden\n */\nvar GroupCaptionEmptyCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionEmptyCellRenderer, _super);\n function GroupCaptionEmptyCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-groupcaption' });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the Object\n * @param {string} data.field - Defines the field\n * @param {string} data.key - Defines the key\n * @param {number} data.count - Defines the count\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n GroupCaptionEmptyCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.innerHTML = ' ';\n node.setAttribute('colspan', cell.colSpan.toString());\n return node;\n };\n return GroupCaptionEmptyCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionEmptyCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { IndentCellRenderer } from './indent-cell-renderer';\nimport { CellType } from '../base/enum';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar ExpandCellRenderer = /** @class */ (function (_super) {\n __extends(ExpandCellRenderer, _super);\n function ExpandCellRenderer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Function to render the expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {string} data.field - Defines the field\n * @param {string} data.key - Defines the key\n * @param {Object} attr - specifies the attribute\n * @param {boolean} isExpand - specifies isexpand\n * @returns {Element} returns the element\n */\n ExpandCellRenderer.prototype.render = function (cell, data, attr, isExpand) {\n var node = this.element.cloneNode();\n node.setAttribute('ej-mappingname', data.field);\n node.setAttribute('ej-mappingvalue', data.key);\n node.setAttribute('aria-expanded', isExpand ? 'true' : 'false');\n node.setAttribute('tabindex', '-1');\n if (this.parent.infiniteScrollSettings && this.parent.infiniteScrollSettings.enableCache &&\n !this.parent.groupSettings.enableLazyLoading) {\n cell.cellType = CellType.Indent;\n node.className = isExpand ? 'e-recordplusexpand e-disablepointer' : 'e-recordpluscollapse e-disablepointer';\n }\n else {\n node.className = isExpand ? 'e-recordplusexpand' : 'e-recordpluscollapse';\n node.appendChild(this.parent.createElement('a', {\n className: isExpand ? 'e-icons e-gdiagonaldown e-icon-gdownarrow' : 'e-icons e-gnextforward e-icon-grightarrow',\n attrs: { href: '#', 'title': isExpand ? this.localizer.getConstant('Expanded') : this.localizer.getConstant('Collapsed') }\n }));\n }\n return node;\n };\n return ExpandCellRenderer;\n}(IndentCellRenderer));\nexport { ExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * HeaderIndentCellRenderer class which responsible for building header indent cell.\n *\n * @hidden\n */\nvar HeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderIndentCellRenderer, _super);\n function HeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-grouptopleftcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-headercelldiv e-emptycell', innerHTML: '' }));\n return node;\n };\n return HeaderIndentCellRenderer;\n}(CellRenderer));\nexport { HeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n *\n * @hidden\n */\nvar DetailHeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(DetailHeaderIndentCellRenderer, _super);\n function DetailHeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-detailheadercell' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DetailHeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-emptycell' }));\n return node;\n };\n return DetailHeaderIndentCellRenderer;\n}(CellRenderer));\nexport { DetailHeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar DetailExpandCellRenderer = /** @class */ (function (_super) {\n __extends(DetailExpandCellRenderer, _super);\n function DetailExpandCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-detailrowcollapse',\n attrs: { 'aria-expanded': 'false', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attributes\n * @returns {Element} returns the element\n */\n DetailExpandCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n if (attributes && !isNullOrUndefined(attributes['class'])) {\n node.className = '';\n node.className = attributes['class'];\n node.appendChild(this.parent.createElement('a', { className: 'e-icons e-dtdiagonaldown e-icon-gdownarrow', attrs: {\n href: '#', 'title': this.localizer.getConstant('Expanded')\n } }));\n }\n else {\n node.appendChild(this.parent.createElement('a', { className: 'e-icons e-dtdiagonalright e-icon-grightarrow', attrs: {\n href: '#', 'title': this.localizer.getConstant('Collapsed')\n } }));\n }\n if (cell.isSelected) {\n node.classList.add('e-selectionbackground', 'e-active');\n }\n return node;\n };\n return DetailExpandCellRenderer;\n}(CellRenderer));\nexport { DetailExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\nimport { applyStickyLeftRightPosition } from '../base/util';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar RowDragDropRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropRenderer, _super);\n function RowDragDropRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowdragdrop e-rowdragdropcell',\n attrs: { tabindex: '-1', role: 'gridcell' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDragDropRenderer.prototype.render = function (cell, data) {\n var nodeElement = this.element.cloneNode();\n nodeElement.appendChild(this.parent.createElement('div', {\n className: 'e-icons e-rowcelldrag e-dtdiagonalright e-icon-rowdragicon',\n attrs: { 'aria-hidden': 'true' }\n }));\n if (cell.isSelected) {\n nodeElement.classList.add('e-selectionbackground');\n nodeElement.classList.add('e-active');\n }\n if (this.parent.getVisibleFrozenRightCount() || this.parent.getVisibleFrozenLeftCount()) {\n nodeElement.classList.add('e-leftfreeze');\n var width = this.parent.getFrozenMode() === 'Right' ? 0 : this.parent.groupSettings.columns.length * 30;\n applyStickyLeftRightPosition(nodeElement, width, this.parent.enableRtl, this.parent.getFrozenMode() === 'Right' ? 'Right' : 'Left');\n }\n return nodeElement;\n };\n return RowDragDropRenderer;\n}(CellRenderer));\nexport { RowDragDropRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { applyStickyLeftRightPosition } from '../base/util';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n *\n * @hidden\n */\nvar RowDragDropHeaderRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropHeaderRenderer, _super);\n function RowDragDropHeaderRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-rowdragheader' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDragDropHeaderRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(createElement('div', { className: 'e-emptycell' }));\n if (this.parent.getVisibleFrozenRightCount() || this.parent.getVisibleFrozenLeftCount()) {\n node.classList.add('e-leftfreeze');\n var width = this.parent.getFrozenMode() === 'Right' ? 0 : this.parent.groupSettings.columns.length * 30;\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, this.parent.getFrozenMode() === 'Right' ? 'Right' : 'Left');\n }\n return node;\n };\n return RowDragDropHeaderRenderer;\n}(CellRenderer));\nexport { RowDragDropHeaderRenderer };\n","import { remove, resetBlazorTemplate, blazorTemplates, getValue } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Deferred, Predicate, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RenderType, CellType } from '../base/enum';\nimport { Data } from '../actions/data';\nimport { Column } from '../models/column';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport * as events from '../base/constant';\nimport { prepareColumns, setFormatter, isGroupAdaptive, getDatePredicate, getObject, clearReactVueTemplates } from '../base/util';\nimport { ContentRender } from '../renderer/content-renderer';\nimport { HeaderRender } from '../renderer/header-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { HeaderCellRenderer } from '../renderer/header-cell-renderer';\nimport { StackedHeaderCellRenderer } from '../renderer/stacked-cell-renderer';\nimport { IndentCellRenderer } from '../renderer/indent-cell-renderer';\nimport { GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer } from '../renderer/caption-cell-renderer';\nimport { ExpandCellRenderer } from '../renderer/expand-cell-renderer';\nimport { HeaderIndentCellRenderer } from '../renderer/header-indent-renderer';\nimport { DetailHeaderIndentCellRenderer } from '../renderer/detail-header-indent-renderer';\nimport { DetailExpandCellRenderer } from '../renderer/detail-expand-cell-renderer';\nimport { RowDragDropRenderer } from './row-drag-drop-renderer';\nimport { RowDragDropHeaderRenderer } from '../renderer/row-drag-header-indent-render';\nimport * as literals from '../base/string-literals';\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifies the serviceLocator\n */\n function Render(parent, locator) {\n this.emptyGrid = false;\n this.counter = 0;\n this.parent = parent;\n this.locator = locator;\n this.data = new Data(parent, locator);\n this.l10n = locator.getService('localization');\n this.ariaService = this.locator.getService('ariaService');\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize grid header, content and footer rendering\n *\n * @returns {void}\n */\n Render.prototype.render = function () {\n var gObj = this.parent;\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer.renderPanel();\n this.contentRenderer.renderPanel();\n if (gObj.getColumns().length) {\n this.isLayoutRendered = true;\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.emptyRow(false);\n }\n this.parent.scrollModule.setWidth();\n this.parent.scrollModule.setHeight();\n if (this.parent.height !== 'auto') {\n this.parent.scrollModule.setPadding();\n }\n this.refreshDataManager();\n };\n /**\n * Refresh the entire Grid.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n */\n Render.prototype.refresh = function (e) {\n var _this = this;\n if (e === void 0) { e = { requestType: 'refresh' }; }\n var gObj = this.parent;\n gObj.notify(e.requestType + \"-begin\", e);\n gObj.trigger(events.actionBegin, e, function (args) {\n if (args === void 0) { args = { requestType: 'refresh' }; }\n if (args.cancel) {\n gObj.notify(events.cancelBegin, args);\n if (args.action === 'clearFilter' && _this.parent.filterSettings.type === 'Menu') {\n _this.parent.filterSettings.columns[_this.parent.filterModule.filterObjIndex] = _this.parent.filterModule.prevFilterObject;\n var iconClass = _this.parent.showColumnMenu && _this.parent.filterModule['column'].showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var col = _this.parent.element.querySelector('[e-mappinguid=\"' + _this.parent.filterModule['column'].uid + '\"]').parentElement;\n var flIcon = col.querySelector(iconClass);\n if (!isNullOrUndefined(_this.parent.filterModule.prevFilterObject)) {\n flIcon.classList.add('e-filtered');\n }\n }\n if (args.action === 'clear-filter' && (_this.parent.filterSettings.type === 'CheckBox' || _this.parent.filterSettings.type === 'Excel')) {\n _this.parent.filterSettings.columns = _this.parent.filterModule.checkboxPrevFilterObject;\n }\n if (args.requestType === 'grouping') {\n // Remove the dropped column name from groupsettings.columns if args.cancel is true\n var index = gObj.groupSettings.columns.indexOf(args.columnName);\n if (index !== -1) {\n gObj.setProperties({ groupSettings: { Columns: gObj.groupSettings.columns.splice(index, 1) } }, true);\n gObj.setProperties({ sortSettings: { Columns: gObj.sortSettings.columns.splice(index, 1) } }, true);\n var column = gObj.getColumnByField(args.columnName);\n var headerCell = gObj.getColumnHeaderByField(column.field);\n column.visible = (!isNullOrUndefined(headerCell) && !headerCell.classList.contains('e-hide'));\n }\n }\n return;\n }\n if (gObj.allowSelection && (args.action === 'clearFilter' || args.action === 'clear-filter' ||\n (args.requestType === 'searching' && args.searchString === '') || args.action === 'add')) {\n gObj.selectionModule['rmtHdrChkbxClicked'] = false;\n }\n if (gObj.allowPaging && gObj.pageSettings.pageSizes && gObj.pagerModule.pagerObj.isAllPage &&\n (args.action === 'add' && args.requestType === 'save') && gObj.pagerModule.pagerObj.checkAll) {\n gObj.setProperties({ pageSettings: { pageSize: gObj.pageSettings.pageSize + 1 } }, true);\n }\n if (args.requestType === 'delete' && gObj.allowPaging) {\n var dataLength = args.data.length;\n var count = gObj.pageSettings.totalRecordsCount - dataLength;\n var currentViewData = gObj.getCurrentViewRecords().length;\n // eslint-disable-next-line max-len\n if ((!(currentViewData - dataLength) && count && ((gObj.pageSettings.currentPage - 1) * gObj.pageSettings.pageSize) === count) || (count && count <= dataLength)) {\n gObj.prevPageMoving = true;\n gObj.setProperties({\n pageSettings: {\n totalRecordsCount: count, currentPage: Math.ceil(count / gObj.pageSettings.pageSize)\n }\n }, true);\n gObj.pagerModule.pagerObj.totalRecordsCount = count;\n }\n }\n if (args.requestType === 'reorder' && _this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else if ((args.requestType === 'paging' || args.requestType === 'columnstate' || args.requestType === 'reorder')\n && _this.parent.groupSettings.enableLazyLoading && _this.parent.groupSettings.columns.length\n && (_this.parent.enableVirtualization ? _this.parent.lazyLoadRender :\n _this.parent.contentModule).getGroupCache()[_this.parent.pageSettings.currentPage]) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else {\n _this.refreshDataManager(args);\n }\n });\n };\n /**\n * @returns {void}\n * @hidden\n */\n Render.prototype.resetTemplates = function () {\n var gObj = this.parent;\n var gridColumns = gObj.getColumns();\n if (gObj.detailTemplate) {\n var detailTemplateID = gObj.element.id + 'detailTemplate';\n blazorTemplates[\"\" + detailTemplateID] = [];\n resetBlazorTemplate(detailTemplateID, 'DetailTemplate');\n }\n if (gObj.groupSettings.captionTemplate) {\n resetBlazorTemplate(gObj.element.id + 'captionTemplate', 'CaptionTemplate');\n }\n if (gObj.rowTemplate) {\n resetBlazorTemplate(gObj.element.id + 'rowTemplate', 'RowTemplate');\n }\n if (gObj.toolbarTemplate) {\n resetBlazorTemplate(gObj.element.id + 'toolbarTemplate', 'ToolbarTemplate');\n }\n if (gObj.pageSettings.template) {\n resetBlazorTemplate(gObj.element.id + '_template', 'pageSettings');\n }\n for (var i = 0; i < gridColumns.length; i++) {\n if (gridColumns[parseInt(i.toString(), 10)].template) {\n blazorTemplates[gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid] = [];\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid, 'Template');\n }\n if (gridColumns[parseInt(i.toString(), 10)].headerTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid + 'headerTemplate', 'HeaderTemplate');\n }\n if (gridColumns[parseInt(i.toString(), 10)].filterTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid + 'filterTemplate', 'FilterTemplate');\n }\n }\n var guid = 'guid';\n for (var k = 0; k < gObj.aggregates.length; k++) {\n for (var j = 0; j < gObj.aggregates[parseInt(k.toString(), 10)].columns.length; j++) {\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].footerTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'footerTemplate';\n resetBlazorTemplate(tempID, 'FooterTemplate');\n }\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].groupFooterTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'groupFooterTemplate';\n resetBlazorTemplate(tempID, 'GroupFooterTemplate');\n }\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].groupCaptionTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'groupCaptionTemplate';\n resetBlazorTemplate(tempID, 'GroupCaptionTemplate');\n }\n }\n }\n };\n Render.prototype.refreshComplete = function (e) {\n this.parent.trigger(events.actionComplete, e);\n };\n /**\n * The function is used to refresh the dataManager\n *\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n */\n Render.prototype.refreshDataManager = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n var gObj = this.parent;\n var maskRow = (gObj.loadingIndicator.indicatorType === 'Shimmer' && args.requestType !== 'virtualscroll'\n && args.requestType !== 'infiniteScroll') || ((args.requestType === 'virtualscroll' || args.requestType === 'infiniteScroll')\n && gObj.enableVirtualMaskRow);\n if (args.requestType !== 'virtualscroll' && !args.isCaptionCollapse && !maskRow) {\n this.parent.showSpinner();\n }\n if (maskRow) {\n gObj.showMaskRow(args.requestType === 'virtualscroll' ? args.virtualInfo.sentinelInfo.axis\n : args.requestType === 'infiniteScroll' ? args.direction : undefined);\n }\n this.parent.notify(events.resetInfiniteBlocks, args);\n this.emptyGrid = false;\n var dataManager;\n var isFActon = this.isNeedForeignAction();\n this.ariaService.setBusy(this.parent.getContent().querySelector('.' + literals.content), true);\n if (isFActon) {\n var deffered = new Deferred();\n dataManager = this.getFData(deffered, args);\n }\n if (!dataManager) {\n if (gObj.allowPaging && !gObj.getDataModule().dataManager.dataSource.offline && gObj.pageSettings\n && gObj.pageSettings.pageSizes && gObj.pagerModule && gObj.pagerModule.pagerObj && gObj.pagerModule.pagerObj.isAllPage) {\n gObj.pagerModule.pagerObj.isAllPage = undefined;\n }\n dataManager = this.data.getData(args, this.data.generateQuery().requiresCount());\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dataManager = dataManager.then(function (e) {\n var query = _this.data.generateQuery().requiresCount();\n if (_this.emptyGrid) {\n var def = new Deferred();\n def.resolve({ result: [], count: 0 });\n return def.promise;\n }\n return _this.data.getData(args, query);\n });\n }\n if (this.parent.getForeignKeyColumns().length && (!isFActon || this.parent.searchSettings.key.length)) {\n var deffered_1 = new Deferred();\n dataManager = dataManager.then(function (e) {\n _this.parent.notify(events.getForeignKeyData, { dataManager: dataManager, result: e, promise: deffered_1, action: args });\n return deffered_1.promise;\n });\n }\n if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {\n dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });\n }\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })\n .catch(function (e) { return _this.dataManagerFailure(e, args); });\n };\n Render.prototype.getFData = function (deferred, args) {\n this.parent.notify(events.getForeignKeyData, { isComplex: true, promise: deferred, action: args });\n return deferred.promise;\n };\n Render.prototype.isNeedForeignAction = function () {\n var gObj = this.parent;\n return !!((gObj.allowFiltering && gObj.filterSettings.columns.length) ||\n (!isNullOrUndefined(gObj.searchSettings.key) && gObj.searchSettings.key.length)) && this.foreignKey(this.parent.getForeignKeyColumns());\n };\n Render.prototype.foreignKey = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n var fbool = false;\n fbool = _this.parent.filterSettings.columns.some(function (value) {\n return col.uid === value.uid;\n });\n return !!(fbool || _this.parent.searchSettings.key.length);\n });\n };\n Render.prototype.sendBulkRequest = function (args) {\n var _this = this;\n args.requestType = 'batchsave';\n var gObj = this.parent;\n if (gObj.allowPaging && gObj.pageSettings.pageSizes && gObj.pagerModule.pagerObj.isAllPage && gObj.pagerModule.pagerObj.checkAll) {\n var dataLength = args['changes'].addedRecords.length;\n if (dataLength) {\n gObj.setProperties({ pageSettings: { pageSize: gObj.pageSettings.pageSize + dataLength } }, true);\n }\n }\n if (gObj.allowPaging && (args.changes.addedRecords.length ||\n args.changes.deletedRecords.length ||\n args.changes.changedRecords.length) && gObj.pageSettings\n && gObj.pageSettings.pageSizes && gObj.pagerModule && gObj.pagerModule.pagerObj\n && !gObj.getDataModule().dataManager.dataSource.offline && gObj.pagerModule.pagerObj.isAllPage) {\n gObj.pagerModule.pagerObj.isAllPage = undefined;\n }\n var promise = this.data.saveChanges(args.changes, this.parent.getPrimaryKeyFieldNames()[0], args.original);\n var query = this.data.generateQuery().requiresCount();\n if (this.data.dataManager.dataSource.offline) {\n this.refreshDataManager({ requestType: 'batchsave' });\n return;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n promise.then(function (e) {\n _this.data.getData(args, query)\n .then(function (e) { return _this.dmSuccess(e, args); })\n .catch(function (e) { return _this.dmFailure(e, args); });\n })\n .catch(function (e) { return _this.dmFailure(e, args); });\n }\n };\n Render.prototype.dmSuccess = function (e, args) {\n this.dataManagerSuccess(e, args);\n };\n Render.prototype.dmFailure = function (e, args) {\n this.dataManagerFailure(e, args);\n };\n /**\n * Render empty row to Grid which is used at the time to represent to no records.\n *\n * @returns {void}\n * @hidden\n */\n Render.prototype.renderEmptyRow = function () {\n this.emptyRow(true);\n };\n Render.prototype.emptyRow = function (isTrigger) {\n var gObj = this.parent;\n var tbody = this.contentRenderer.getTable().querySelector(literals.tbody);\n if (!isNullOrUndefined(tbody)) {\n remove(tbody);\n }\n tbody = this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var spanCount = gObj.allowRowDragAndDrop && isNullOrUndefined(gObj.rowDropSettings.targetID) ? 1 : 0;\n if (gObj.detailTemplate || gObj.childGrid) {\n ++spanCount;\n }\n var className = gObj.editSettings.showAddNewRow && gObj.editSettings.newRowPosition === 'Bottom' ?\n 'e-emptyrow e-show-added-row' : 'e-emptyrow';\n var tr = this.parent.createElement('tr', { className: className, attrs: { role: 'row' } });\n var td;\n if (gObj.emptyRecordTemplate) {\n var emptyRecordTemplateID = gObj.element.id + 'emptyRecordTemplate';\n td = this.parent.createElement('td', { attrs: { colspan: (gObj.getVisibleColumns().length +\n spanCount + gObj.groupSettings.columns.length).toString() } });\n if (gObj.isVue) {\n td.appendChild(gObj.getEmptyRecordTemplate()(gObj.dataSource, gObj, 'emptyRecordTemplate', emptyRecordTemplateID, undefined, undefined, undefined, this.parent['root'])[1]);\n }\n else {\n td.appendChild(gObj.getEmptyRecordTemplate()(gObj.dataSource, gObj, 'emptyRecordTemplate', emptyRecordTemplateID, undefined, undefined, undefined, this.parent['root'])[0]);\n }\n if (gObj.isReact) {\n this.parent.renderTemplates();\n }\n }\n else {\n td = this.parent.createElement('td', {\n innerHTML: this.l10n.getConstant('EmptyRecord'),\n attrs: { colspan: (gObj.getVisibleColumns().length + spanCount + (!isNullOrUndefined(gObj.groupSettings.columns) ? gObj.groupSettings.columns.length : 0)).toString() }\n });\n }\n if (gObj.isFrozenGrid()) {\n td.classList.add('e-leftfreeze');\n td.style.left = 0 + 'px';\n }\n if (gObj.frozenRows && gObj.element.querySelector('.e-frozenrow-border')) {\n this.parent.element.querySelector('.e-frozenrow-border').classList.add('e-frozenrow-empty');\n }\n tr.appendChild(td);\n tbody.appendChild(tr);\n this.contentRenderer.renderEmpty(tbody);\n if (isTrigger) {\n if (!this.parent.isInitialLoad) {\n this.parent.focusModule.setFirstFocusableTabIndex();\n }\n this.parent.trigger(events.dataBound, {});\n this.parent.notify(events.onEmpty, { rows: [new Row({ isDataRow: true, cells: [new Cell({ isDataCell: true, visible: true })] })] });\n if (gObj.editSettings.showAddNewRow) {\n gObj.addRecord();\n this.parent.notify(events.showAddNewRowFocus, {});\n }\n }\n };\n Render.prototype.dynamicColumnChange = function () {\n if (this.parent.getCurrentViewRecords().length) {\n this.updateColumnType(this.parent.getCurrentViewRecords()[0]);\n }\n };\n Render.prototype.updateColumnType = function (record) {\n var columns = this.parent.getColumns();\n var value;\n var cFormat = 'customFormat';\n var equalTo = 'equalTo';\n var data = record && record.items ? record.items[0] : record;\n var fmtr = this.locator.getService('valueFormatter');\n for (var i = 0, len = columns.length; i < len; i++) {\n value = getObject(columns[parseInt(i.toString(), 10)].field || '', data);\n if (!isNullOrUndefined(columns[parseInt(i.toString(), 10)][\"\" + cFormat])) {\n columns[parseInt(i.toString(), 10)].format = columns[parseInt(i.toString(), 10)][\"\" + cFormat];\n }\n if (!isNullOrUndefined(columns[parseInt(i.toString(), 10)].validationRules)\n && !isNullOrUndefined(columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo])) {\n columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo][0] = this.parent.element.id + columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo][0];\n }\n if (columns[parseInt(i.toString(), 10)].isForeignColumn() && columns[parseInt(i.toString(), 10)].columnData) {\n value = getObject(columns[parseInt(i.toString(), 10)].foreignKeyValue || '', columns[parseInt(i.toString(), 10)].columnData[0]);\n }\n if (!isNullOrUndefined(value)) {\n this.isColTypeDef = true;\n if (!columns[parseInt(i.toString(), 10)].type) {\n columns[parseInt(i.toString(), 10)].type = value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 ||\n value.getSeconds() > 0 || value.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n }\n else {\n columns[parseInt(i.toString(), 10)].type = columns[parseInt(i.toString(), 10)].type || null;\n }\n var valueFormatter = new ValueFormatter();\n if (columns[parseInt(i.toString(), 10)].format && (columns[parseInt(i.toString(), 10)].format.skeleton\n || (columns[parseInt(i.toString(), 10)].format.format &&\n typeof columns[parseInt(i.toString(), 10)].format.format === 'string'))) {\n columns[parseInt(i.toString(), 10)].setFormatter(valueFormatter.getFormatFunction(extend({}, columns[parseInt(i.toString(), 10)].format)));\n columns[parseInt(i.toString(), 10)].setParser(valueFormatter.getParserFunction(columns[parseInt(i.toString(), 10)].format));\n }\n if (typeof (columns[parseInt(i.toString(), 10)].format) === 'string') {\n setFormatter(this.locator, columns[parseInt(i.toString(), 10)]);\n }\n else if (!columns[parseInt(i.toString(), 10)].format && columns[parseInt(i.toString(), 10)].type === 'number') {\n columns[parseInt(i.toString(), 10)].setParser(fmtr.getParserFunction({ format: 'n2' }));\n }\n if (columns[parseInt(i.toString(), 10)].type === 'dateonly' && !columns[parseInt(i.toString(), 10)].format) {\n columns[parseInt(i.toString(), 10)].format = 'yMd';\n setFormatter(this.locator, columns[parseInt(i.toString(), 10)]);\n }\n }\n };\n /**\n * @param {ReturnType} e - specifies the return type\n * @param {NotifyArgs} args - specifies the Notifyargs\n * @returns {void}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Render.prototype.dataManagerSuccess = function (e, args) {\n var _this = this;\n var gObj = this.parent;\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n e.actionArgs = args;\n var isInfiniteDelete = this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache &&\n !gObj.groupSettings.enableLazyLoading && (args.requestType === 'delete' || (args.requestType === 'save' &&\n this.parent.infiniteScrollModule.requestType === 'add' && !(gObj.sortSettings.columns.length ||\n gObj.filterSettings.columns.length || this.parent.groupSettings.columns.length || gObj.searchSettings.key)));\n // tslint:disable-next-line:max-func-body-length\n gObj.trigger(events.beforeDataBound, e, function (dataArgs) {\n if (dataArgs.cancel) {\n return;\n }\n dataArgs.result = isNullOrUndefined(dataArgs.result) ? [] : dataArgs.result;\n var len = Object.keys(dataArgs.result).length;\n if (_this.parent.isDestroyed) {\n return;\n }\n if ((!gObj.getColumns().length && !len) && !(gObj.columns.length && gObj.columns[0] instanceof Column)) {\n gObj.hideSpinner();\n return;\n }\n if (_this.isInfiniteEnd(args) && !len) {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n return;\n }\n _this.parent.isEdit = false;\n _this.parent.notify(events.editReset, {});\n _this.parent.notify(events.tooltipDestroy, {});\n if (args && !((args.requestType === 'infiniteScroll' || args.requestType === 'delete' || args.action === 'add') &&\n gObj.enableInfiniteScrolling)) {\n _this.parent.notify(events.commandColumnDestroy, { type: 'refreshCommandColumn' });\n }\n _this.contentRenderer.prevCurrentView = !isNullOrUndefined(_this.parent.currentViewData) && _this.parent.currentViewData.slice();\n gObj.currentViewData = dataArgs.result;\n gObj.notify(events.refreshInfiniteCurrentViewData, { args: args, data: dataArgs.result });\n if (dataArgs.count && !gObj.allowPaging && (gObj.enableVirtualization || gObj.enableInfiniteScrolling)) {\n gObj.totalDataRecordsCount = dataArgs.count;\n }\n if (!len && dataArgs.count && gObj.allowPaging && args && args.requestType !== 'delete') {\n if (_this.parent.groupSettings.enableLazyLoading\n && (args.requestType === 'grouping' || args.requestType === 'ungrouping')) {\n _this.parent.notify(events.groupComplete, args);\n }\n gObj.prevPageMoving = true;\n gObj.pageSettings.totalRecordsCount = dataArgs.count;\n if (args.requestType !== 'paging') {\n gObj.pageSettings.currentPage = Math.ceil(dataArgs.count / gObj.pageSettings.pageSize);\n }\n gObj.dataBind();\n return;\n }\n if ((!gObj.getColumns().length && len || !_this.isLayoutRendered) && !isGroupAdaptive(gObj)) {\n gObj.removeMaskRow();\n _this.updatesOnInitialRender(dataArgs);\n }\n if (!_this.isColTypeDef && gObj.getCurrentViewRecords()) {\n if (_this.data.dataManager.dataSource.offline && gObj.dataSource && gObj.dataSource.length) {\n _this.updateColumnType(gObj.dataSource[0]);\n }\n else {\n _this.updateColumnType(gObj.getCurrentViewRecords()[0]);\n }\n }\n if (!_this.parent.isInitialLoad && _this.parent.groupSettings.disablePageWiseAggregates &&\n !_this.parent.groupSettings.columns.length) {\n dataArgs.result = _this.parent.dataSource instanceof Array ? _this.parent.dataSource : _this.parent.currentViewData;\n }\n if ((_this.parent.isReact || _this.parent.isVue) && !isNullOrUndefined(args) && args.requestType !== 'infiniteScroll' && !args.isFrozen) {\n clearReactVueTemplates(_this.parent, ['footerTemplate']);\n }\n if (_this.parent.isAngular && _this.parent.allowGrouping && _this.parent.groupSettings.captionTemplate\n && !(!isNullOrUndefined(args) && args.requestType === 'infiniteScroll')) {\n _this.parent.destroyTemplate(['groupSettings_captionTemplate']);\n }\n _this.parent.notify(events.dataReady, extend({ count: dataArgs.count, result: dataArgs.result, aggregates: dataArgs.aggregates, loadSummaryOnEmpty: false }, args));\n if ((gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping'))\n && (args && args.requestType !== 'filtering')) {\n _this.headerRenderer.refreshUI();\n }\n if (len) {\n if (isGroupAdaptive(gObj)) {\n var content = 'content';\n args.scrollTop = { top: _this.contentRenderer[\"\" + content].scrollTop };\n }\n if (!isInfiniteDelete) {\n if (_this.parent.enableImmutableMode) {\n _this.contentRenderer.immutableModeRendering(args);\n }\n else {\n _this.contentRenderer.refreshContentRows(args);\n }\n }\n else {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n }\n }\n else {\n if (args && args.isCaptionCollapse) {\n return;\n }\n if (!gObj.getColumns().length) {\n gObj.element.innerHTML = '';\n alert(_this.l10n.getConstant('EmptyDataSourceError')); //ToDO: change this alert as dialog\n return;\n }\n _this.contentRenderer.setRowElements([]);\n _this.contentRenderer.setRowObjects([]);\n _this.ariaService.setBusy(_this.parent.getContent().querySelector('.' + literals.content), false);\n gObj.removeMaskRow();\n _this.renderEmptyRow();\n if (gObj.enableColumnVirtualization && !len) {\n _this.parent.notify(events.contentReady, { rows: gObj.getRowsObject(), args: {} });\n }\n if (args) {\n var action = (args.requestType || '').toLowerCase() + '-complete';\n _this.parent.notify(action, args);\n if (args.requestType === 'batchsave') {\n args.cancel = false;\n args.rows = [];\n args.isFrozen = !args.isFrozen;\n _this.parent.trigger(events.actionComplete, args);\n }\n }\n if (_this.parent.autoFit) {\n _this.parent.preventAdjustColumns();\n }\n _this.parent.hideSpinner();\n }\n _this.parent.notify(events.toolbarRefresh, {});\n _this.setRowCount(_this.parent.getCurrentViewRecords().length);\n if ('query' in e) {\n _this.parent.getDataModule().isQueryInvokedFromData = false;\n }\n });\n };\n /**\n * @param {object} e - specifies the object\n * @param {Object[]} e.result - specifies the result\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n * @hidden\n */\n Render.prototype.dataManagerFailure = function (e, args) {\n if (!isNullOrUndefined(this.parent.contentModule)) {\n this.ariaService.setOptions(this.parent.getContent().querySelector('.' + literals.content), { busy: false, invalid: true });\n this.setRowCount(1);\n }\n this.parent.trigger(events.actionFailure, { error: e });\n this.parent.hideSpinner();\n this.parent.removeMaskRow();\n if (args.requestType === 'save' || args.requestType === 'delete'\n || args.name === 'bulk-save') {\n return;\n }\n this.parent.currentViewData = [];\n this.renderEmptyRow();\n if (!this.parent.isInitialLoad) {\n this.parent.focusModule.setFirstFocusableTabIndex();\n }\n this.parent.log('actionfailure', { error: e });\n };\n Render.prototype.setRowCount = function (dataRowCount) {\n this.ariaService.setOptions(this.parent.element, {\n rowcount: dataRowCount ? dataRowCount.toString() : '1'\n });\n };\n Render.prototype.isInfiniteEnd = function (args) {\n return this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache && args.requestType === 'delete';\n };\n Render.prototype.updatesOnInitialRender = function (e) {\n this.isLayoutRendered = true;\n var isEmptyCol = false;\n if (this.parent.columns.length < 1) {\n this.buildColumns(e.result[0]);\n isEmptyCol = true;\n }\n prepareColumns(this.parent.columns, null, this.parent);\n if (isEmptyCol) {\n this.parent.notify(events.refreshSplitFrozenColumn, {});\n }\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.parent.isAutoGen = true;\n this.parent.notify(events.autoCol, {});\n };\n Render.prototype.iterateComplexColumns = function (obj, field, split) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n var childKeys = typeof obj[keys[parseInt(i.toString(), 10)]] === 'object'\n && obj[keys[parseInt(i.toString(), 10)]] && !(obj[keys[parseInt(i.toString(), 10)]] instanceof Date) ?\n Object.keys(obj[keys[parseInt(i.toString(), 10)]]) : [];\n if (childKeys.length) {\n this.iterateComplexColumns(obj[keys[parseInt(i.toString(), 10)]], field + (keys[parseInt(i.toString(), 10)] + '.'), split);\n }\n else {\n split[this.counter] = field + keys[parseInt(i.toString(), 10)];\n this.counter++;\n }\n }\n };\n Render.prototype.buildColumns = function (record) {\n var cols = [];\n var complexCols = {};\n this.iterateComplexColumns(record, '', complexCols);\n var columns = Object.keys(complexCols).filter(function (e) { return complexCols[\"\" + e] !== 'BlazId'; }).\n map(function (field) { return complexCols[\"\" + field]; });\n for (var i = 0, len = columns.length; i < len; i++) {\n cols[parseInt(i.toString(), 10)] = { 'field': columns[parseInt(i.toString(), 10)] };\n if (this.parent.enableColumnVirtualization) {\n cols[parseInt(i.toString(), 10)].width = !isNullOrUndefined(cols[parseInt(i.toString(), 10)].width) ?\n cols[parseInt(i.toString(), 10)].width : 200;\n }\n }\n this.parent.setProperties({ 'columns': cols }, true);\n };\n Render.prototype.instantiateRenderer = function () {\n this.renderer.addRenderer(RenderType.Header, new HeaderRender(this.parent, this.locator));\n this.renderer.addRenderer(RenderType.Content, new ContentRender(this.parent, this.locator));\n var cellrender = this.locator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Header, new HeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Data, new CellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Indent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaption, new GroupCaptionCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaptionEmpty, new GroupCaptionEmptyCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Expand, new ExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.HeaderIndent, new HeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailHeader, new DetailHeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragHIcon, new RowDragDropHeaderRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailExpand, new DetailExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailFooterIntent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragIcon, new RowDragDropRenderer(this.parent, this.locator));\n };\n Render.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on('refreshdataSource', this.dataManagerSuccess, this);\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.refreshComplete, this.refreshComplete, this);\n this.parent.on(events.bulkSave, this.sendBulkRequest, this);\n this.parent.on(events.showEmptyGrid, function () { _this.emptyGrid = true; }, this);\n this.parent.on(events.autoCol, this.dynamicColumnChange, this);\n };\n /**\n * @param {ReturnType} e - specifies the Return type\n * @returns {Promise} returns the object\n * @hidden\n */\n Render.prototype.validateGroupRecords = function (e) {\n var _this = this;\n var index = e.result.length - 1;\n if (index < 0) {\n return Promise.resolve(e);\n }\n var group0 = e.result[0];\n var groupN = e.result[parseInt(index.toString(), 10)];\n var predicate = [];\n var addWhere = function (input) {\n var groups = [group0, groupN];\n for (var i = 0; i < groups.length; i++) {\n predicate.push(new Predicate('field', '==', groups[parseInt(i.toString(), 10)].field).and(_this.getPredicate('key', 'equal', groups[parseInt(i.toString(), 10)].key)));\n }\n input.where(Predicate.or(predicate));\n };\n var query = new Query();\n addWhere(query);\n var curDm = new DataManager(e.result);\n var curFilter = curDm.executeLocal(query);\n var newQuery = this.data.generateQuery(true);\n var rPredicate = [];\n if (this.data.isRemote()) {\n var groups = [group0, groupN];\n for (var i = 0; i < groups.length; i++) {\n rPredicate.push(this.getPredicate(groups[parseInt(i.toString(), 10)].field, 'equal', groups[parseInt(i.toString(), 10)].key));\n }\n newQuery.where(Predicate.or(rPredicate));\n }\n else {\n addWhere(newQuery);\n }\n var deferred = new Deferred();\n this.data.getData({}, newQuery).then(function (r) {\n _this.updateGroupInfo(curFilter, r.result);\n deferred.resolve(e);\n }).catch(function (e) { return deferred.reject(e); });\n return deferred.promise;\n };\n /**\n * @param {string} key - Defines the key\n * @param {string} operator - Defines the operator\n * @param {string | number | Date} value - Defines the value\n * @returns {Predicate} - Returns the predicate\n * @hidden */\n Render.prototype.getPredicate = function (key, operator, value) {\n if (value instanceof Date) {\n return getDatePredicate({ field: key, operator: operator, value: value });\n }\n return new Predicate(key, operator, value);\n };\n /**\n * @param {Object[]} current - Defines the current object\n * @param {Object[]} untouched - Defines the object needs to merge\n * @returns {Object[]} - Returns the updated group information\n * @hidden */\n Render.prototype.updateGroupInfo = function (current, untouched) {\n var dm = new DataManager(untouched);\n var elements = current;\n for (var i = 0; i < elements.length; i++) {\n var updatedGroup = dm.executeLocal(new Query()\n .where(new Predicate('field', '==', elements[parseInt(i.toString(), 10)].field).and(this.getPredicate('key', 'equal', elements[parseInt(i.toString(), 10)].key))))[0];\n if (!isNullOrUndefined(updatedGroup)) {\n elements[parseInt(i.toString(), 10)].count = updatedGroup.count;\n var itemGroup = elements[parseInt(i.toString(), 10)].items;\n var updatedGroupItem = updatedGroup.items;\n if (itemGroup.GroupGuid) {\n elements[parseInt(i.toString(), 10)].items =\n this.updateGroupInfo(elements[parseInt(i.toString(), 10)].items, updatedGroup.items);\n }\n var rows = this.parent.aggregates;\n for (var j = 0; j < rows.length; j++) {\n var row = rows[parseInt(j.toString(), 10)];\n for (var k = 0; k < row.columns.length; k++) {\n var column = row.columns[parseInt(k.toString(), 10)];\n var types = column.type instanceof Array ? (column.type) : [(column.type)];\n for (var l = 0; l < types.length; l++) {\n var key = column.field + ' - ' + types[parseInt(l.toString(), 10)].toLowerCase();\n var data = itemGroup.level ? updatedGroupItem.records : updatedGroup.items;\n var context = this.parent;\n if (types[parseInt(l.toString(), 10)] === 'Custom') {\n var data_1 = itemGroup.level ? updatedGroupItem : updatedGroup;\n var temp = column\n .customAggregate;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n elements[parseInt(i.toString(), 10)].aggregates[\"\" + key] = temp ? temp.call(context, data_1, row.columns[parseInt(k.toString(), 10)]) : '';\n }\n else {\n elements[parseInt(i.toString(), 10)].aggregates[\"\" + key] = DataUtil.aggregates[types[parseInt(l.toString(), 10)].toLowerCase()](data, row.columns[parseInt(k.toString(), 10)].field);\n }\n }\n }\n }\n }\n }\n return current;\n };\n return Render;\n}());\nexport { Render };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\n/**\n * CellRendererFactory\n *\n * @hidden\n */\nvar CellRendererFactory = /** @class */ (function () {\n function CellRendererFactory() {\n this.cellRenderMap = {};\n }\n CellRendererFactory.prototype.addCellRenderer = function (name, type) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[\"\" + name])) {\n this.cellRenderMap[\"\" + name] = type;\n }\n };\n CellRendererFactory.prototype.getCellRenderer = function (name) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[\"\" + name])) {\n // eslint-disable-next-line no-throw-literal\n throw \"The cellRenderer \" + name + \" is not found\";\n }\n else {\n return this.cellRenderMap[\"\" + name];\n }\n };\n return CellRendererFactory;\n}());\nexport { CellRendererFactory };\n","import { Dialog } from '@syncfusion/ej2-popups';\nimport { EventHandler, isNullOrUndefined, remove, Browser } from '@syncfusion/ej2-base';\nimport { parentsUntil, addBiggerDialog, addRemoveEventListener } from '../base/util';\nimport * as events from '../base/constant';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { ResponsiveDialogAction } from '../base/enum';\n/**\n *\n * The `ResponsiveDialogRenderer` module is used to render the responsive dialogs.\n */\nvar ResponsiveDialogRenderer = /** @class */ (function () {\n function ResponsiveDialogRenderer(parent, serviceLocator) {\n this.sortedCols = [];\n this.sortPredicate = [];\n /** @hidden */\n this.isCustomDialog = false;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n }\n ResponsiveDialogRenderer.prototype.addEventListener = function () {\n this.evtHandlers = [{ event: events.filterDialogClose, handler: this.closeCustomDialog },\n { event: events.refreshCustomFilterOkBtn, handler: this.refreshCustomFilterOkBtn },\n { event: events.renderResponsiveCmenu, handler: this.renderResponsiveContextMenu },\n { event: events.filterCmenuSelect, handler: this.renderCustomFilterDiv },\n { event: events.customFilterClose, handler: this.customExFilterClose },\n { event: events.refreshCustomFilterClearBtn, handler: this.refreshCustomFilterClearBtn }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n this.onActionCompleteFn = this.editComplate.bind(this);\n this.parent.addEventListener(events.actionComplete, this.onActionCompleteFn);\n };\n ResponsiveDialogRenderer.prototype.customExFilterClose = function () {\n this.isCustomDlgRender = false;\n };\n ResponsiveDialogRenderer.prototype.renderCustomFilterDiv = function () {\n var header = this.customResponsiveDlg.element.querySelector('.e-dlg-header-content');\n var title = header.querySelector('.e-dlg-custom-header');\n var closeBtn = header.querySelector('.e-dlg-closeicon-btn');\n this.isCustomDlgRender = true;\n this.parent.filterModule.filterModule.closeDialog();\n this.saveBtn.element.style.display = '';\n this.refreshCustomFilterOkBtn({ disabled: false });\n this.backBtn.element.style.display = 'none';\n closeBtn.style.display = '';\n title.innerHTML = this.parent.localeObj.getConstant('CustomFilter');\n var content = this.customResponsiveDlg.element.querySelector('.e-dlg-content');\n this.customExcelFilterParent = this.parent.createElement('div', { className: 'e-xl-customfilterdiv e-default-filter' });\n content.appendChild(this.customExcelFilterParent);\n };\n ResponsiveDialogRenderer.prototype.renderResponsiveContextMenu = function (args) {\n if (this.action === ResponsiveDialogAction.isFilter) {\n var content = this.customResponsiveDlg.element.querySelector('.e-dlg-content');\n var header = this.customResponsiveDlg.element.querySelector('.e-dlg-header-content');\n var closeBtn = header.querySelector('.e-dlg-closeicon-btn');\n var text = header.querySelector('.e-dlg-custom-header');\n if (args.isOpen) {\n content.firstChild.style.display = 'none';\n content.appendChild(args.target);\n closeBtn.style.display = 'none';\n this.saveBtn.element.style.display = 'none';\n this.filterClearBtn.element.style.display = 'none';\n text.innerHTML = args.header;\n var backBtn = this.parent.createElement('button');\n var span = this.parent.createElement('span', { className: 'e-btn-icon e-resfilterback e-icons' });\n backBtn.appendChild(span);\n this.backBtn = new Button({\n cssClass: this.parent.cssClass ? 'e-res-back-btn' + ' ' + this.parent.cssClass : 'e-res-back-btn'\n });\n this.backBtn.appendTo(backBtn);\n text.parentElement.insertBefore(backBtn, text);\n }\n else if (this.backBtn && !this.isCustomDlgRender) {\n content.firstChild.style.display = '';\n remove(this.backBtn.element);\n closeBtn.style.display = '';\n this.saveBtn.element.style.display = '';\n if (this.isFiltered) {\n this.filterClearBtn.element.style.display = '';\n }\n text.innerHTML = this.getHeaderTitle({ action: ResponsiveDialogAction.isFilter }, args.col);\n }\n }\n };\n ResponsiveDialogRenderer.prototype.refreshCustomFilterClearBtn = function (args) {\n if (this.filterClearBtn) {\n this.isFiltered = args.isFiltered;\n this.filterClearBtn.element.style.display = args.isFiltered ? '' : 'none';\n }\n };\n ResponsiveDialogRenderer.prototype.refreshCustomFilterOkBtn = function (args) {\n if (this.saveBtn) {\n this.saveBtn.disabled = args.disabled;\n }\n if (this.parent.columnChooserModule && this.parent.columnChooserModule.responsiveDialogRenderer.saveBtn) {\n this.parent.columnChooserModule.responsiveDialogRenderer.saveBtn.disabled = args.disabled;\n }\n };\n ResponsiveDialogRenderer.prototype.columnMenuResponsiveContent = function (str, locale, disabled) {\n var cDiv = this.parent.createElement('div', { className: 'e-responsivecoldiv e-responsive' + str.toLowerCase() + 'div' + (disabled ? ' e-disabled' : '') });\n var span = this.parent.createElement('span', { className: 'e-icons e-res' + str.toLowerCase() + '-icon e-btn-icon' });\n var icon = this.parent.createElement('span', { innerHTML: locale, className: 'e-rescolumn-menu e-res-header-text' });\n cDiv.appendChild(span);\n cDiv.appendChild(icon);\n this.customColumnDiv.appendChild(cDiv);\n };\n ResponsiveDialogRenderer.prototype.renderResponsiveContent = function (col, column) {\n var _this = this;\n var gObj = this.parent;\n var isColumnChooser = this.action === ResponsiveDialogAction.isColumnChooser;\n if (col || isColumnChooser) {\n this.filterParent = this.parent.createElement('div', { className: (isColumnChooser ? 'e-maincolumnchooserdiv ' : '') + 'e-mainfilterdiv e-default-filter',\n id: (isColumnChooser ? 'columchooser' : col.uid) + '-main-filter' });\n return this.filterParent;\n }\n else {\n this.customColumnDiv = gObj.createElement('div', { className: 'columndiv columnmenudiv', styles: 'width: 100%' });\n if (this.parent.showColumnMenu && this.parent.rowRenderingMode === 'Horizontal' && this.action === ResponsiveDialogAction.isColMenu) {\n this.columnMenuResponsiveContent('AutoFitAll', gObj.localeObj.getConstant('AutoFitAll'));\n this.columnMenuResponsiveContent('AutoFit', gObj.localeObj.getConstant('AutoFit'));\n if (column.allowGrouping && gObj.allowGrouping) {\n this.columnMenuResponsiveContent('Group', gObj.localeObj.getConstant('Group'), gObj.groupSettings.columns.indexOf(column.field) >= 0);\n this.columnMenuResponsiveContent('UnGroup', gObj.localeObj.getConstant('Ungroup'), gObj.groupSettings.columns.indexOf(column.field) < 0);\n }\n if (column.allowSorting && gObj.allowSorting) {\n var direction = 'None';\n var sortColumns = this.parent.sortSettings.columns;\n for (var i = 0; i < sortColumns.length; i++) {\n if (sortColumns[parseInt(i.toString(), 10)].field === column.field) {\n direction = sortColumns[parseInt(i.toString(), 10)].direction;\n break;\n }\n }\n this.columnMenuResponsiveContent('ascending', gObj.localeObj.getConstant('SortAscending'), direction === 'Ascending');\n this.columnMenuResponsiveContent('descending', gObj.localeObj.getConstant('SortDescending'), direction === 'Descending');\n }\n if (gObj.showColumnChooser) {\n this.columnMenuResponsiveContent('Column', gObj.localeObj.getConstant('Columnchooser'));\n }\n if (column.allowFiltering && gObj.allowFiltering) {\n this.columnMenuResponsiveContent('Filter', gObj.localeObj.getConstant('FilterMenu'));\n }\n }\n else {\n var cols = gObj.getColumns();\n var sortBtnParent = gObj.createElement('div', { className: 'e-ressortbutton-parent' });\n var filteredCols = [];\n var isSort = this.action === ResponsiveDialogAction.isSort;\n var isFilter = this.action === ResponsiveDialogAction.isFilter;\n if (isFilter) {\n for (var i = 0; i < gObj.filterSettings.columns.length; i++) {\n filteredCols.push(gObj.filterSettings.columns[parseInt(i.toString(), 10)].field);\n }\n }\n for (var i = 0; i < cols.length; i++) {\n if (!cols[parseInt(i.toString(), 10)].visible || (!cols[parseInt(i.toString(), 10)].allowSorting && isSort)\n || (!cols[parseInt(i.toString(), 10)].allowFiltering && isFilter)) {\n continue;\n }\n var cDiv = gObj.createElement('div', { className: 'e-responsivecoldiv' });\n cDiv.setAttribute('data-e-mappingname', cols[parseInt(i.toString(), 10)].field);\n cDiv.setAttribute('data-e-mappinguid', cols[parseInt(i.toString(), 10)].uid);\n var span = gObj.createElement('span', { innerHTML: cols[parseInt(i.toString(), 10)].headerText, className: 'e-res-header-text' });\n cDiv.appendChild(span);\n this.customColumnDiv.appendChild(cDiv);\n if (isSort) {\n var fields = this.getSortedFieldsAndDirections('field');\n var index = fields.indexOf(cols[parseInt(i.toString(), 10)].field);\n var button = gObj.createElement('button', { id: gObj.element.id + cols[parseInt(i.toString(), 10)].field + 'sortbutton' });\n var clone = sortBtnParent.cloneNode();\n clone.appendChild(button);\n cDiv.appendChild(clone);\n var btnObj = new Button({\n cssClass: this.parent.cssClass ? 'e-ressortbutton' + ' ' + this.parent.cssClass : 'e-ressortbutton'\n });\n btnObj.appendTo(button);\n var buttonInnerText = void 0;\n if ((!isNullOrUndefined(this.parent.sortSettings.columns[parseInt(index.toString(), 10)]))) {\n buttonInnerText = (this.parent.sortSettings.columns[parseInt(index.toString(), 10)].direction === 'Ascending') ?\n this.parent.localeObj.getConstant('AscendingText') : this.parent.localeObj.getConstant('DescendingText');\n }\n button.innerHTML = index > -1 ? buttonInnerText : this.parent.localeObj.getConstant('NoneText');\n button.onclick = function (e) {\n _this.sortButtonClickHandler(e.target);\n };\n }\n if (isFilter && filteredCols.indexOf(cols[parseInt(i.toString(), 10)].field) > -1) {\n var divIcon = gObj.createElement('div', { className: 'e-icons e-res-icon e-filtersetdiv' });\n var iconSpan = gObj.createElement('span', { className: 'e-icons e-res-icon e-filterset' });\n iconSpan.setAttribute('colType', cols[parseInt(i.toString(), 10)].type);\n divIcon.appendChild(iconSpan);\n cDiv.appendChild(divIcon);\n }\n }\n }\n EventHandler.add(this.customColumnDiv, Browser.isDevice ? 'touchend' : 'click', this.customFilterColumnClickHandler, this);\n return this.customColumnDiv;\n }\n };\n ResponsiveDialogRenderer.prototype.getSortedFieldsAndDirections = function (name) {\n var fields = [];\n for (var i = 0; i < this.parent.sortSettings.columns.length; i++) {\n fields.push(this.parent.sortSettings.columns[parseInt(i.toString(), 10)][\"\" + name]);\n }\n return fields;\n };\n ResponsiveDialogRenderer.prototype.sortButtonClickHandler = function (target) {\n if (target) {\n var columndiv = parentsUntil(target, 'e-responsivecoldiv');\n var field = columndiv.getAttribute('data-e-mappingname');\n if (!this.parent.allowMultiSorting) {\n this.sortPredicate = [];\n this.sortedCols = [];\n this.isSortApplied = false;\n this.resetSortButtons(target);\n }\n var txt = target.textContent;\n var directionTxt = txt === this.parent.localeObj.getConstant('NoneText') ? this.parent.localeObj.getConstant('AscendingText')\n : txt === this.parent.localeObj.getConstant('AscendingText') ? this.parent.localeObj.getConstant('DescendingText')\n : this.parent.localeObj.getConstant('NoneText');\n var direction = directionTxt === this.parent.localeObj.getConstant('AscendingText') ? 'Ascending'\n : directionTxt === this.parent.localeObj.getConstant('DescendingText') ? 'Descending' : 'None';\n target.innerHTML = directionTxt;\n this.setSortedCols(field, direction);\n }\n };\n ResponsiveDialogRenderer.prototype.resetSortButtons = function (target) {\n var buttons = [].slice.call(this.customColumnDiv.getElementsByClassName('e-ressortbutton'));\n for (var i = 0; i < buttons.length; i++) {\n if (buttons[parseInt(i.toString(), 10)] !== target) {\n buttons[parseInt(i.toString(), 10)].innerHTML = 'None';\n }\n }\n };\n ResponsiveDialogRenderer.prototype.setSortedCols = function (field, direction) {\n var fields = this.getCurrentSortedFields();\n var index = fields.indexOf(field);\n if (this.parent.allowMultiSorting && index > -1) {\n this.sortedCols.splice(index, 1);\n this.sortPredicate.splice(index, 1);\n }\n this.isSortApplied = true;\n if (direction !== 'None') {\n this.sortedCols.push(field);\n this.sortPredicate.push({ field: field, direction: direction });\n }\n };\n ResponsiveDialogRenderer.prototype.getCurrentSortedFields = function () {\n var fields = [];\n for (var i = 0; i < this.sortedCols.length; i++) {\n fields.push(this.sortedCols[parseInt(i.toString(), 10)]);\n }\n return fields;\n };\n ResponsiveDialogRenderer.prototype.customFilterColumnClickHandler = function (e) {\n var gObj = this.parent;\n var target = e.target;\n if (parentsUntil(target, 'columnmenudiv') && this.action === ResponsiveDialogAction.isColMenu && !parentsUntil(target, 'e-disabled')) {\n var column = this.menuCol ? this.menuCol : this.filteredCol;\n if (parentsUntil(target, 'e-responsiveautofitalldiv')) {\n gObj.autoFitColumns([]);\n this.closeCustomFilter();\n }\n else if (parentsUntil(target, 'e-responsiveautofitdiv')) {\n gObj.autoFitColumns(column.field);\n this.closeCustomFilter();\n }\n else if (parentsUntil(target, 'e-responsivegroupdiv')) {\n gObj.groupColumn(column.field);\n this.closeCustomFilter();\n }\n else if (parentsUntil(target, 'e-responsiveungroupdiv')) {\n gObj.ungroupColumn(column.field);\n this.closeCustomFilter();\n }\n else if (parentsUntil(target, 'e-responsiveascendingdiv')) {\n gObj.sortColumn(column.field, 'Ascending');\n this.closeCustomFilter();\n }\n else if (parentsUntil(target, 'e-responsivedescendingdiv')) {\n gObj.sortColumn(column.field, 'Descending');\n this.closeCustomFilter();\n }\n else if (parentsUntil(target, 'e-responsivecolumndiv')) {\n gObj.notify(events.renderResponsiveChangeAction, { action: 5 });\n gObj.showResponsiveCustomColumnChooser();\n }\n else if (parentsUntil(target, 'e-responsivefilterdiv')) {\n gObj.notify(events.renderResponsiveChangeAction, { action: 3 });\n this.isRowResponsive = true;\n this.isCustomDialog = false;\n if (gObj.filterModule) {\n gObj.filterModule.responsiveDialogRenderer.showResponsiveDialog(column);\n }\n }\n e.preventDefault();\n }\n if (this.action !== ResponsiveDialogAction.isFilter) {\n return;\n }\n if (gObj.filterSettings.type !== 'FilterBar') {\n if (target.classList.contains('e-responsivecoldiv') || target.parentElement.classList.contains('e-responsivecoldiv')) {\n var field = target.getAttribute('data-e-mappingname');\n if (!field) {\n field = target.parentElement.getAttribute('data-e-mappingname');\n }\n if (field) {\n var col = gObj.getColumnByField(field);\n this.isRowResponsive = true;\n this.showResponsiveDialog(col);\n }\n }\n else if (target.classList.contains('e-filterset') || target.parentElement.classList.contains('e-filtersetdiv')) {\n var colDiv = parentsUntil(target, 'e-responsivecoldiv');\n if (colDiv) {\n var field = colDiv.getAttribute('data-e-mappingname');\n var col = gObj.getColumnByField(field);\n if (col.filter.type === 'Menu' || (!col.filter.type && gObj.filterSettings.type === 'Menu')) {\n this.isDialogClose = true;\n }\n this.parent.filterModule.filterModule.clearCustomFilter(col);\n this.removeCustomDlgFilterEle(target);\n }\n }\n }\n };\n /**\n * Function to show the responsive dialog\n *\n * @param {Column} col - specifies the filter column\n * @param {Column} column - specifies the menu column\n * @returns {void}\n */\n ResponsiveDialogRenderer.prototype.showResponsiveDialog = function (col, column) {\n if ((this.isCustomDialog && this.action === ResponsiveDialogAction.isFilter && !this.isRowResponsive) ||\n (column && this.action === ResponsiveDialogAction.isColMenu)) {\n this.menuCol = column;\n this.renderCustomFilterDialog(null, column);\n }\n else {\n this.filteredCol = col;\n this.renderResponsiveDialog(col);\n if (this.parent.enableAdaptiveUI && col) {\n this.parent.filterModule.setFilterModel(col);\n this.parent.filterModule.filterModule.openDialog(this.parent.filterModule.createOptions(col, undefined));\n }\n if (this.action === ResponsiveDialogAction.isColumnChooser) {\n this.parent.notify(events.renderResponsiveColumnChooserDiv, { action: 'open' });\n }\n if (this.action === ResponsiveDialogAction.isSort) {\n var args = {\n cancel: false, dialogObj: this.customResponsiveDlg, requestType: 'beforeOpenAptiveSortDialog'\n };\n this.parent.trigger(events.beforeOpenAdaptiveDialog, args);\n if (args.cancel) {\n return;\n }\n }\n this.customResponsiveDlg.show(true);\n this.customResponsiveDlg.element.style.maxHeight = '100%';\n this.setTopToChildDialog(this.customResponsiveDlg.element);\n }\n };\n ResponsiveDialogRenderer.prototype.setTopToChildDialog = function (dialogEle) {\n var child = dialogEle.querySelector('.e-dialog');\n if (child) {\n var top_1 = dialogEle.querySelector('.e-dlg-header-content').getBoundingClientRect().height;\n child.style.top = top_1 + 'px';\n }\n };\n ResponsiveDialogRenderer.prototype.renderCustomFilterDialog = function (col, column) {\n var gObj = this.parent;\n var isColMenu = this.action === ResponsiveDialogAction.isColMenu;\n if (this.action === ResponsiveDialogAction.isFilter && gObj.filterSettings.type === 'FilterBar') {\n return;\n }\n var colMenu = isColMenu ? 'e-customcolumnmenudiv ' : '';\n var outerDiv = this.parent.createElement('div', {\n id: gObj.element.id + (isColMenu ? 'customcolumnmenu' : 'customfilter'),\n className: this.parent.cssClass ? colMenu +\n 'e-customfilterdiv e-responsive-dialog ' + this.parent.cssClass : colMenu + 'e-customfilterdiv e-responsive-dialog'\n });\n this.parent.element.appendChild(outerDiv);\n this.customFilterDlg = this.getDialogOptions(col, true, null, column);\n var args = {\n cancel: false, dialogObj: this.customFilterDlg, requestType: 'beforeOpenAptiveFilterDialog'\n };\n this.parent.trigger(events.beforeOpenAdaptiveDialog, args);\n if (args.cancel) {\n return;\n }\n this.customFilterDlg.appendTo(outerDiv);\n this.customFilterDlg.show(true);\n this.customFilterDlg.element.style.maxHeight = '100%';\n };\n ResponsiveDialogRenderer.prototype.getDialogOptions = function (col, isCustomFilter, id, column) {\n var options = new Dialog({\n isModal: true,\n showCloseIcon: true,\n closeOnEscape: false,\n locale: this.parent.locale,\n target: this.parent.adaptiveDlgTarget ? this.parent.adaptiveDlgTarget : document.body,\n visible: false,\n enableRtl: this.parent.enableRtl,\n content: this.renderResponsiveContent(col, column),\n open: this.dialogOpen.bind(this),\n created: this.dialogCreated.bind(this),\n close: this.beforeDialogClose.bind(this),\n width: '100%',\n height: '100%',\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n var isStringTemplate = 'isStringTemplate';\n options[\"\" + isStringTemplate] = true;\n if (isCustomFilter) {\n options.header = this.renderResponsiveHeader(col, undefined, true);\n var colMenu = this.action === ResponsiveDialogAction.isColMenu ? 'e-customcolumnmenu ' : '';\n options.cssClass = colMenu + 'e-customfilter';\n }\n else {\n options.header = this.renderResponsiveHeader(col);\n options.cssClass = this.parent.rowRenderingMode === 'Vertical' && this.action === ResponsiveDialogAction.isFilter\n ? 'e-res' + id + ' e-row-responsive-filter' : 'e-res' + id;\n }\n return options;\n };\n ResponsiveDialogRenderer.prototype.renderResponsiveDialog = function (col) {\n var gObj = this.parent;\n if (this.action === ResponsiveDialogAction.isFilter && gObj.filterSettings.type === 'FilterBar') {\n return;\n }\n var id = this.action === ResponsiveDialogAction.isFilter ? 'filter' : 'sort';\n id = this.action === ResponsiveDialogAction.isColumnChooser ? 'columnchooser' : id;\n var outerDiv = this.parent.createElement('div', {\n id: gObj.element.id + 'responsive' + id,\n className: this.parent.cssClass ?\n 'e-res' + id + 'div e-responsive-dialog ' + this.parent.cssClass : 'e-res' + id + 'div e-responsive-dialog'\n });\n this.parent.element.appendChild(outerDiv);\n this.customResponsiveDlg = this.getDialogOptions(col, false, id);\n this.customResponsiveDlg.appendTo(outerDiv);\n };\n ResponsiveDialogRenderer.prototype.dialogCreated = function () {\n addBiggerDialog(this.parent);\n };\n ResponsiveDialogRenderer.prototype.dialogOpen = function () {\n if (this.action === ResponsiveDialogAction.isSort && this.parent.allowMultiSorting) {\n for (var i = 0; i < this.parent.sortSettings.columns.length; i++) {\n this.sortedCols.push(this.parent.sortSettings.columns[parseInt(i.toString(), 10)].field);\n var sortField = this.parent.sortSettings.columns[parseInt(i.toString(), 10)].field;\n var sortDirection = this.parent.sortSettings.columns[parseInt(i.toString(), 10)].direction;\n this.sortPredicate.push({ field: sortField, direction: sortDirection });\n }\n }\n };\n ResponsiveDialogRenderer.prototype.beforeDialogClose = function (args) {\n this.isDialogClose = args.element && !args.element.querySelector('.e-xl-customfilterdiv')\n && args.element.classList.contains('e-resfilterdiv');\n if (this.action === ResponsiveDialogAction.isFilter) {\n if (args.element.classList.contains('e-resfilterdiv')) {\n this.parent.filterModule.filterModule.closeResponsiveDialog(this.isCustomDlgRender);\n }\n else if (args.element.classList.contains('e-customfilterdiv')) {\n this.closeCustomFilter();\n }\n if (this.parent.rowRenderingMode === 'Horizontal' && this.parent.showColumnMenu) {\n this.parent.notify(events.renderResponsiveChangeAction, { action: 4 });\n var custom = document.querySelector('.e-resfilter');\n if (custom) {\n remove(custom);\n }\n }\n }\n else if (this.action === ResponsiveDialogAction.isSort) {\n this.closeCustomDialog();\n }\n else if (this.action === ResponsiveDialogAction.isColMenu) {\n this.closeCustomFilter();\n var custom = document.querySelector('.e-rescolummenu');\n if (custom) {\n remove(custom);\n }\n }\n else if (this.action === ResponsiveDialogAction.isColumnChooser) {\n this.parent.notify(events.renderResponsiveColumnChooserDiv, { action: 'clear' });\n var custom = document.querySelector('.e-rescolumnchooser');\n if (custom) {\n remove(custom);\n }\n if (this.parent.rowRenderingMode === 'Horizontal' && this.parent.showColumnMenu) {\n this.parent.notify(events.renderResponsiveChangeAction, { action: 4 });\n }\n this.isCustomDialog = false;\n this.isDialogClose = false;\n }\n this.parent.off(events.enterKeyHandler, this.keyHandler);\n };\n ResponsiveDialogRenderer.prototype.sortColumn = function () {\n if (!this.isSortApplied) {\n this.closeCustomDialog();\n return;\n }\n if (this.sortPredicate.length) {\n this.parent.setProperties({ sortSettings: { columns: [] } }, true);\n }\n for (var i = 0; i < this.sortPredicate.length; i++) {\n this.parent.sortColumn(this.sortPredicate[parseInt(i.toString(), 10)].field, this.sortPredicate[parseInt(i.toString(), 10)].direction, this.parent.allowMultiSorting);\n }\n if (!this.sortPredicate.length) {\n this.parent.clearSorting();\n }\n this.closeCustomDialog();\n };\n ResponsiveDialogRenderer.prototype.getHeaderTitle = function (args, col) {\n var gObj = this.parent;\n var title;\n if (this.action === ResponsiveDialogAction.isEdit) {\n title = gObj.localeObj.getConstant('EditFormTitle') + args.primaryKeyValue[0];\n }\n else if (this.action === ResponsiveDialogAction.isAdd) {\n title = gObj.localeObj.getConstant('AddFormTitle');\n }\n else if (this.action === ResponsiveDialogAction.isFilter) {\n title = col ? col.headerText || col.field : gObj.localeObj.getConstant('FilterButton');\n }\n else if (this.action === ResponsiveDialogAction.isSort) {\n title = gObj.localeObj.getConstant('Sort');\n }\n else if (this.action === ResponsiveDialogAction.isColMenu) {\n title = gObj.localeObj.getConstant('ColumnMenu');\n }\n else if (this.action === ResponsiveDialogAction.isColumnChooser) {\n title = gObj.localeObj.getConstant('ChooseColumns');\n }\n return title;\n };\n ResponsiveDialogRenderer.prototype.getDialogName = function (action) {\n var name;\n if (action === ResponsiveDialogAction.isAdd || action === ResponsiveDialogAction.isEdit) {\n name = 'dialogEdit_wrapper_title';\n }\n else if (action === ResponsiveDialogAction.isFilter) {\n name = 'responsive_filter_dialog_wrapper';\n }\n else if (action === ResponsiveDialogAction.isColumnChooser) {\n name = 'responsive_column_chooser_dialog_wrapper';\n }\n return name;\n };\n ResponsiveDialogRenderer.prototype.getButtonText = function (action) {\n var text;\n if (action === ResponsiveDialogAction.isAdd || action === ResponsiveDialogAction.isEdit) {\n text = 'Save';\n }\n else if (action === ResponsiveDialogAction.isFilter || this.action === ResponsiveDialogAction.isSort ||\n action === ResponsiveDialogAction.isColumnChooser || this.action === ResponsiveDialogAction.isColumnChooser) {\n text = 'OKButton';\n }\n return text;\n };\n /**\n * Function to render the responsive header\n *\n * @param {Column} col - specifies the column\n * @param {ResponsiveDialogArgs} args - specifies the responsive dialog arguments\n * @param {boolean} isCustomFilter - specifies whether it is custom filter or not\n * @returns {HTMLElement | string} returns the html element or string\n */\n ResponsiveDialogRenderer.prototype.renderResponsiveHeader = function (col, args, isCustomFilter) {\n var _this = this;\n var gObj = this.parent;\n gObj.on(events.enterKeyHandler, this.keyHandler, this);\n var id = gObj.element.id + this.getDialogName(this.action);\n var header = gObj.createElement('div', { className: 'e-res-custom-element' });\n var titleDiv = gObj.createElement('div', { className: 'e-dlg-custom-header', id: id });\n titleDiv.innerHTML = this.getHeaderTitle(args, col);\n header.appendChild(titleDiv);\n var saveBtn = gObj.createElement('button');\n if (!isCustomFilter) {\n this.saveBtn = new Button({\n cssClass: this.parent.cssClass ?\n 'e-primary e-flat e-res-apply-btn' + ' ' + this.parent.cssClass : 'e-primary e-flat e-res-apply-btn'\n });\n saveBtn.innerHTML = gObj.localeObj.getConstant(this.getButtonText(this.action));\n this.saveBtn.appendTo(saveBtn);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n saveBtn.onclick = function (e) {\n _this.dialogHdrBtnClickHandler();\n };\n }\n var isSort = this.action === ResponsiveDialogAction.isSort;\n var isFilter = this.action === ResponsiveDialogAction.isFilter;\n if (isFilter || isSort) {\n var id_1 = isSort ? 'sort' : 'filter';\n var clearBtn = gObj.createElement('button');\n this.filterClearBtn = new Button({\n cssClass: this.parent.cssClass ? 'e-primary e-flat e-res-' + id_1 + '-clear-btn' + ' ' + this.parent.cssClass\n : 'e-primary e-flat e-res-' + id_1 + '-clear-btn'\n });\n if (isFilter) {\n var span = gObj.createElement('span', { className: 'e-btn-icon e-icon-filter-clear e-icons' });\n clearBtn.appendChild(span);\n }\n else {\n clearBtn.innerHTML = gObj.localeObj.getConstant('Clear');\n }\n header.appendChild(clearBtn);\n this.filterClearBtn.appendTo(clearBtn);\n clearBtn.onclick = function (e) {\n if ((parentsUntil(e.target, 'e-customfilter'))) {\n _this.parent.filterModule.clearFiltering();\n _this.removeCustomDlgFilterEle();\n }\n else {\n if (isFilter) {\n _this.filterClear();\n }\n else {\n _this.resetSortButtons();\n _this.sortedCols = [];\n _this.sortPredicate = [];\n _this.isSortApplied = true;\n }\n }\n };\n header.appendChild(clearBtn);\n }\n if (!isCustomFilter) {\n header.appendChild(saveBtn);\n }\n return header;\n };\n ResponsiveDialogRenderer.prototype.filterClear = function () {\n this.parent.filterModule.filterModule.clearCustomFilter(this.filteredCol);\n this.parent.filterModule.filterModule.closeResponsiveDialog();\n };\n ResponsiveDialogRenderer.prototype.removeCustomFilterElement = function () {\n var elem = document.getElementById(this.parent.element.id + 'customcolumnmenu');\n if (elem) {\n remove(elem);\n var custom = document.querySelector('.e-customfilter');\n if (custom) {\n remove(custom);\n }\n }\n var custommenu = document.querySelector('.e-rescolumnchooser');\n if (custommenu) {\n remove(custommenu);\n }\n };\n ResponsiveDialogRenderer.prototype.dialogHdrBtnClickHandler = function () {\n if (this.action === ResponsiveDialogAction.isEdit || this.action === ResponsiveDialogAction.isAdd) {\n this.parent.endEdit();\n }\n else if (this.action === ResponsiveDialogAction.isFilter) {\n this.parent.filterModule.filterModule.applyCustomFilter({ col: this.filteredCol, isCustomFilter: this.isCustomDlgRender });\n this.removeCustomFilterElement();\n }\n else if (this.action === ResponsiveDialogAction.isSort) {\n this.sortColumn();\n this.removeCustomFilterElement();\n }\n else if (this.action === ResponsiveDialogAction.isColumnChooser) {\n this.parent.notify(events.renderResponsiveColumnChooserDiv, { action: 'confirm' });\n this.removeCustomFilterElement();\n this.isCustomDialog = false;\n this.isDialogClose = false;\n }\n };\n ResponsiveDialogRenderer.prototype.closeCustomDialog = function () {\n if (this.isCustomDlgRender) {\n var mainfilterdiv = this.customResponsiveDlg.element.querySelector('.e-mainfilterdiv');\n remove(mainfilterdiv);\n return;\n }\n this.isRowResponsive = false;\n this.isCustomDlgRender = false;\n this.destroyCustomFilterDialog();\n };\n ResponsiveDialogRenderer.prototype.destroyCustomFilterDialog = function () {\n if (!this.customResponsiveDlg) {\n return;\n }\n var elem = document.getElementById(this.customResponsiveDlg.element.id);\n if (this.customResponsiveDlg && !this.customResponsiveDlg.isDestroyed && elem) {\n this.customResponsiveDlg.destroy();\n remove(elem);\n }\n this.closeCustomFilter();\n if (this.action === ResponsiveDialogAction.isSort) {\n this.sortPredicate = [];\n this.sortedCols = [];\n this.isSortApplied = false;\n }\n };\n ResponsiveDialogRenderer.prototype.closeCustomFilter = function () {\n if (!this.isDialogClose && this.customFilterDlg) {\n var customEle = document.getElementById(this.customFilterDlg.element.id);\n if (this.customFilterDlg && !this.customFilterDlg.isDestroyed && customEle) {\n this.customFilterDlg.destroy();\n remove(customEle);\n }\n }\n this.isCustomDialog = false;\n this.isDialogClose = false;\n };\n ResponsiveDialogRenderer.prototype.removeCustomDlgFilterEle = function (target) {\n if (target) {\n if (target.parentElement.classList.contains('e-filtersetdiv')) {\n remove(target.parentElement);\n }\n else {\n remove(target);\n }\n }\n else {\n var child = this.customColumnDiv.children;\n for (var i = 0; i < child.length; i++) {\n target = child[parseInt(i.toString(), 10)].querySelector('.e-filtersetdiv');\n if (target) {\n remove(target);\n i--;\n }\n }\n }\n };\n ResponsiveDialogRenderer.prototype.keyHandler = function (e) {\n if (e.keyCode === 13 && ((this.action === ResponsiveDialogAction.isFilter\n && e.target.classList.contains('e-searchinput'))\n || (this.action === ResponsiveDialogAction.isEdit || this.action === ResponsiveDialogAction.isAdd))) {\n this.dialogHdrBtnClickHandler();\n }\n };\n ResponsiveDialogRenderer.prototype.editComplate = function (args) {\n if (args.requestType === 'save' || args.requestType === 'cancel') {\n this.parent.off(events.enterKeyHandler, this.keyHandler);\n }\n };\n ResponsiveDialogRenderer.prototype.removeEventListener = function () {\n if (this.customColumnDiv) {\n EventHandler.remove(this.customColumnDiv, Browser.isDevice ? 'touchend' : 'click', this.customFilterColumnClickHandler);\n }\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n this.parent.removeEventListener(events.actionComplete, this.onActionCompleteFn);\n };\n return ResponsiveDialogRenderer;\n}());\nexport { ResponsiveDialogRenderer };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { ResponsiveDialogRenderer } from '../renderer/responsive-dialog-renderer';\n/**\n * ServiceLocator\n *\n * @hidden\n */\nvar ServiceLocator = /** @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n ServiceLocator.prototype.register = function (name, type) {\n if (isNullOrUndefined(this.services[\"\" + name])) {\n this.services[\"\" + name] = type;\n }\n };\n ServiceLocator.prototype.getService = function (name) {\n if (isNullOrUndefined(this.services[\"\" + name])) {\n // eslint-disable-next-line no-throw-literal\n throw \"The service \" + name + \" is not registered\";\n }\n return this.services[\"\" + name];\n };\n ServiceLocator.prototype.registerAdaptiveService = function (type, isAdaptiveUI, action) {\n if (isAdaptiveUI) {\n type.responsiveDialogRenderer = new ResponsiveDialogRenderer(type.parent, type.serviceLocator);\n type.responsiveDialogRenderer.action = action;\n }\n else {\n if (type.responsiveDialogRenderer) {\n type.responsiveDialogRenderer.removeEventListener();\n type.responsiveDialogRenderer = undefined;\n }\n }\n };\n return ServiceLocator;\n}());\nexport { ServiceLocator };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\n/**\n * RendererFactory\n *\n * @hidden\n */\nvar RendererFactory = /** @class */ (function () {\n function RendererFactory() {\n this.rendererMap = {};\n }\n RendererFactory.prototype.addRenderer = function (name, type) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[\"\" + rName])) {\n this.rendererMap[\"\" + rName] = type;\n }\n };\n RendererFactory.prototype.getRenderer = function (name) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[\"\" + rName])) {\n // eslint-disable-next-line no-throw-literal\n throw \"The renderer \" + rName + \" is not found\";\n }\n else {\n return this.rendererMap[\"\" + rName];\n }\n };\n return RendererFactory;\n}());\nexport { RendererFactory };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { formatUnit } from '@syncfusion/ej2-base';\nimport { columnWidthChanged, preventFrozenScrollRefresh } from '../base/constant';\nimport { Column } from '../models/column';\nimport { parentsUntil, ispercentageWidth, getScrollBarWidth } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * ColumnWidthService\n *\n * @hidden\n */\nvar ColumnWidthService = /** @class */ (function () {\n function ColumnWidthService(parent) {\n this.parent = parent;\n }\n ColumnWidthService.prototype.setWidthToColumns = function () {\n var i = 0;\n var indexes = this.parent.getColumnIndexesInView();\n var wFlag = true;\n var totalColumnsWidth = 0;\n if (this.parent.allowGrouping) {\n for (var len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n wFlag = false;\n continue;\n }\n this.setColumnWidth(new Column({ width: '30px' }), i);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n this.setColumnWidth(new Column({ width: '30px' }), i);\n i++;\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n this.setColumnWidth(new Column({ width: '30px' }), i);\n i++;\n }\n var columns = this.parent.getColumns();\n for (var j = 0; j < columns.length; j++) {\n this.setColumnWidth(columns[parseInt(j.toString(), 10)], wFlag && this.parent.enableColumnVirtualization ? undefined : j + i);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n this.setColumnWidth(new Column({ width: '30px' }), this.parent.groupSettings.columns.length + columns.length);\n }\n totalColumnsWidth = this.getTableWidth(this.parent.getColumns());\n if (this.parent.width !== 'auto' && this.parent.width.toString().indexOf('%') === -1) {\n this.setMinwidthBycalculation(totalColumnsWidth);\n }\n };\n ColumnWidthService.prototype.setMinwidthBycalculation = function (tWidth) {\n var difference = 0;\n var collection = this.parent.getColumns().filter(function (a) {\n return isNullOrUndefined(a.width) || a.width === 'auto';\n });\n if (collection.length) {\n if (!isNullOrUndefined(this.parent.width) && this.parent.width !== 'auto' &&\n typeof (this.parent.width) === 'string' && this.parent.width.indexOf('%') === -1) {\n difference = parseInt(this.parent.width, 10) - tWidth;\n }\n else {\n difference = this.parent.element.getBoundingClientRect().width - tWidth;\n }\n var tmWidth = 0;\n for (var _i = 0, collection_1 = collection; _i < collection_1.length; _i++) {\n var cols = collection_1[_i];\n tmWidth += !isNullOrUndefined(cols.minWidth) ?\n ((typeof cols.minWidth === 'string' ? parseInt(cols.minWidth, 10) : cols.minWidth)) : 0;\n }\n for (var i = 0; i < collection.length; i++) {\n if (tWidth === 0 && this.parent.allowResizing && this.isWidthUndefined() && (i !== collection.length - 1)) {\n this.setUndefinedColumnWidth(collection);\n }\n var index = this.parent.getColumnIndexByField(collection[parseInt(i.toString(), 10)].field) + this.parent.getIndentCount();\n if (tWidth !== 0 && difference < tmWidth) {\n this.setWidth(collection[parseInt(i.toString(), 10)].minWidth, index);\n }\n else if (tWidth !== 0 && difference > tmWidth) {\n this.setWidth('', index, true);\n }\n }\n }\n };\n ColumnWidthService.prototype.setUndefinedColumnWidth = function (collection) {\n for (var k = 0; k < collection.length; k++) {\n if (k !== collection.length - 1) {\n collection[parseInt(k.toString(), 10)].width = 200;\n this.setWidth(200, this.parent.getColumnIndexByField(collection[parseInt(k.toString(), 10)].field));\n }\n }\n };\n ColumnWidthService.prototype.setColumnWidth = function (column, index, module) {\n if (this.parent.getColumns().length < 1) {\n return;\n }\n var columnIndex = isNullOrUndefined(index) ? this.parent.getNormalizedColumnIndex(column.uid) : index;\n var cWidth = this.getWidth(column);\n var tgridWidth = this.getTableWidth(this.parent.getColumns());\n if (cWidth !== null) {\n this.setWidth(cWidth, columnIndex);\n if (this.parent.width !== 'auto' && this.parent.width.toString().indexOf('%') === -1) {\n this.setMinwidthBycalculation(tgridWidth);\n }\n if ((this.parent.allowResizing && module === 'resize') || (this.parent.getFrozenColumns() && this.parent.allowResizing)) {\n this.setWidthToTable();\n }\n this.parent.notify(columnWidthChanged, { index: columnIndex, width: cWidth, column: column, module: module });\n }\n };\n ColumnWidthService.prototype.setWidth = function (width, index, clear) {\n if (this.parent.groupSettings.columns.length > index && ispercentageWidth(this.parent)) {\n var elementWidth = this.parent.element.offsetWidth;\n width = (30 / elementWidth * 100).toFixed(1) + '%';\n }\n var header = this.parent.getHeaderTable();\n var content = this.parent.getContentTable();\n var fWidth = formatUnit(width);\n var headerCol = header.querySelector(literals.colGroup)\n .children[parseInt(index.toString(), 10)];\n if (headerCol && !clear) {\n headerCol.style.width = fWidth;\n }\n else if (headerCol && clear) {\n headerCol.style.width = '';\n }\n var contentCol = content.querySelector(literals.colGroup).children[parseInt(index.toString(), 10)];\n if (contentCol && !clear) {\n contentCol.style.width = fWidth;\n }\n else if (contentCol && clear) {\n contentCol.style.width = '';\n }\n if (!this.parent.enableColumnVirtualization && this.parent.isEdit) {\n var edit = this.parent.element.querySelectorAll('.e-table.e-inline-edit');\n var editTableCol = [];\n for (var i = 0; i < edit.length; i++) {\n if (parentsUntil(edit[parseInt(i.toString(), 10)], 'e-grid').id === this.parent.element.id) {\n for (var j = 0; j < edit[parseInt(i.toString(), 10)].querySelector('colgroup').children.length; j++) {\n editTableCol.push(edit[parseInt(i.toString(), 10)].querySelector('colgroup').children[parseInt(j.toString(), 10)]);\n }\n }\n }\n if (edit.length && editTableCol.length && editTableCol[parseInt(index.toString(), 10)]) {\n editTableCol[parseInt(index.toString(), 10)].style.width = fWidth;\n }\n }\n if (this.parent.isFrozenGrid() && this.parent.enableColumnVirtualization) {\n this.refreshFrozenScrollbar();\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n ColumnWidthService.prototype.refreshFrozenScrollbar = function () {\n var args = { cancel: false };\n this.parent.notify(preventFrozenScrollRefresh, args);\n if (args.cancel) {\n return;\n }\n var scrollWidth = getScrollBarWidth();\n var movableScrollbar = this.parent.element.querySelector('.e-movablescrollbar');\n var movableWidth = this.parent.getContent().firstElementChild.getBoundingClientRect().width;\n if (this.parent.enableColumnVirtualization) {\n var placeHolder = this.parent.getContent().querySelector('.e-virtualtrack');\n if (placeHolder) {\n movableWidth = placeHolder.scrollWidth;\n }\n }\n if (this.parent.height !== 'auto') {\n movableWidth = movableWidth + scrollWidth;\n }\n movableScrollbar.firstElementChild.style.width = movableWidth + 'px';\n };\n ColumnWidthService.prototype.getSiblingsHeight = function (element) {\n var previous = this.getHeightFromDirection(element, 'previous');\n var next = this.getHeightFromDirection(element, 'next');\n return previous + next;\n };\n ColumnWidthService.prototype.getHeightFromDirection = function (element, direction) {\n var sibling = element[direction + 'ElementSibling'];\n var result = 0;\n var classList = [literals.gridHeader, literals.gridFooter, 'e-groupdroparea', 'e-gridpager', 'e-toolbar', 'e-temp-toolbar'];\n while (sibling) {\n if (classList.some(function (value) { return sibling.classList.contains(value); })) {\n result += sibling.offsetHeight;\n }\n sibling = sibling[direction + 'ElementSibling'];\n }\n return result;\n };\n ColumnWidthService.prototype.isWidthUndefined = function () {\n var isWidUndefCount = this.parent.getColumns().filter(function (col) {\n return isNullOrUndefined(col.width) && isNullOrUndefined(col.minWidth);\n }).length;\n return (this.parent.getColumns().length === isWidUndefCount);\n };\n ColumnWidthService.prototype.getWidth = function (column) {\n if (isNullOrUndefined(column.width) && this.parent.allowResizing\n && isNullOrUndefined(column.minWidth) && !this.isWidthUndefined()) {\n column.width = 200;\n }\n if (!column.width) {\n return null;\n }\n var width = parseInt(column.width.toString(), 10);\n if (column.minWidth && width < parseInt(column.minWidth.toString(), 10)) {\n return column.minWidth;\n }\n else if ((column.maxWidth && width > parseInt(column.maxWidth.toString(), 10))) {\n return column.maxWidth;\n }\n else {\n return column.width;\n }\n };\n ColumnWidthService.prototype.getTableWidth = function (columns) {\n var tWidth = 0;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n var cWidth = this.getWidth(column);\n if (column.width === 'auto') {\n cWidth = 0;\n }\n if (column.visible !== false && cWidth !== null) {\n tWidth += parseInt(cWidth.toString(), 10);\n }\n }\n return tWidth;\n };\n ColumnWidthService.prototype.setWidthToTable = function () {\n var tWidth = formatUnit(this.getTableWidth(this.parent.getColumns()));\n if (this.parent.detailTemplate || this.parent.childGrid) {\n this.setColumnWidth(new Column({ width: '30px' }));\n }\n tWidth = this.isAutoResize() ? '100%' : tWidth;\n this.parent.getHeaderTable().style.width = tWidth;\n this.parent.getContentTable().style.width = tWidth;\n var edit = this.parent.element.querySelector('.e-table.e-inline-edit');\n if (edit) {\n edit.style.width = tWidth;\n }\n };\n ColumnWidthService.prototype.isAutoResize = function () {\n return this.parent.allowResizing && this.parent.resizeSettings.mode === 'Auto';\n };\n return ColumnWidthService;\n}());\nexport { ColumnWidthService };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { EventHandler, getValue, closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, extend, Browser } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport * as event from '../base/constant';\nimport { Row } from '../models/row';\nimport { RowModelGenerator } from './row-model-generator';\nimport { parentsUntil, addRemoveEventListener, findCellIndex } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * FocusStrategy class\n *\n * @hidden\n */\nvar FocusStrategy = /** @class */ (function () {\n function FocusStrategy(parent) {\n this.currentInfo = {};\n this.oneTime = true;\n this.swap = {};\n /** @hidden */\n this.isInfiniteScroll = false;\n this.forget = false;\n this.skipFocus = true;\n this.focusByClick = false;\n this.firstHeaderCellClick = false;\n this.prevIndexes = {};\n this.refMatrix = this.refreshMatrix(true);\n this.actions = ['downArrow', 'upArrow'];\n this.isVirtualScroll = false;\n this.groupedFrozenRow = 0;\n this.parent = parent;\n this.rowModelGen = new RowModelGenerator(this.parent);\n this.addEventListener();\n }\n FocusStrategy.prototype.focusCheck = function (e) {\n var target = e.target;\n this.focusByClick = true;\n this.firstHeaderCellClick = true;\n this.skipFocus = target.classList.contains('e-grid');\n };\n FocusStrategy.prototype.onFocus = function (e) {\n if (this.parent.isDestroyed || Browser.isDevice || this.parent.enableVirtualization\n || this.parent.element.querySelector('.e-masked-table') || (!this.parent.isInitialLoad && e\n && e.target === this.parent.element && this.parent.element.querySelector('.e-spin-show'))) {\n return;\n }\n this.setActive(!this.parent.enableHeaderFocus && this.parent.frozenRows === 0);\n if (!this.parent.enableHeaderFocus && !this.parent.getCurrentViewRecords().length && ((this.parent.editSettings.mode !== 'Batch')\n || (this.parent.editSettings.mode === 'Batch' && this.parent.editModule && !this.parent.editModule.getBatchChanges()[literals.addedRecords].length))) {\n this.getContent().matrix.\n generate(this.rowModelGen.generateRows({ rows: [new Row({ isDataRow: true })] }), this.getContent().selector, false);\n }\n var current = this.getContent().matrix.get(0, -1, [0, 1], null, this.getContent().validator());\n this.getContent().matrix.select(current[0], current[1]);\n if (this.skipFocus && !(e && e.target === this.parent.element)) {\n this.focus(e);\n this.skipFocus = false;\n }\n };\n FocusStrategy.prototype.passiveFocus = function (e) {\n if (this.parent.isDestroyed) {\n return;\n }\n var firstHeaderCell = this.parent.getHeaderContent().querySelector('.e-headercell:not(.e-hide)');\n if (e.target === firstHeaderCell && e.relatedTarget && !parentsUntil(e.relatedTarget, 'e-grid')\n && !this.firstHeaderCellClick) {\n var firstHeaderCellIndex = [0, 0];\n if (this.active.matrix.matrix[firstHeaderCellIndex[0]][firstHeaderCellIndex[1]] === 0) {\n firstHeaderCellIndex = findCellIndex(this.active.matrix.matrix, firstHeaderCellIndex, true);\n }\n this.active.matrix.current = firstHeaderCellIndex;\n this.currentInfo.element = e.target;\n this.currentInfo.elementToFocus = e.target;\n addClass([this.currentInfo.element], ['e-focused', 'e-focus']);\n }\n this.firstHeaderCellClick = false;\n if (e.target && e.target.classList.contains('e-detailcell')) {\n this.currentInfo.skipAction = false;\n addClass([this.currentInfo.element], ['e-focused', 'e-focus']);\n }\n };\n FocusStrategy.prototype.onBlur = function (e) {\n if (this.parent.allowPaging && this.parent.pagerModule.pagerObj.element.querySelector('.e-pagercontainer')) {\n this.parent.pagerModule.pagerObj.element.querySelector('.e-pagercontainer').removeAttribute('aria-hidden');\n }\n // The below boolean condition for gantt team focus fix.\n var isGantt = parentsUntil(e.target, 'e-gantt') && e.target.classList.contains('e-rowcell')\n && (!isNullOrUndefined(e.target.nextElementSibling)\n && e.target.nextElementSibling.classList.contains('e-rowcell')) ? true : false;\n if ((this.parent.isEdit || e && (!e.relatedTarget || closest(e.relatedTarget, '.e-grid'))\n && !(this.parent.element.classList.contains('e-childgrid') && !this.parent.element.matches(':focus-within')))\n && !(!isGantt && isNullOrUndefined(e.relatedTarget) && parseInt(e.target.getAttribute('data-colindex'), 10) === 0\n && parseInt(e.target.getAttribute('index'), 10) === 0) && !(!isGantt && isNullOrUndefined(e.relatedTarget)\n && !closest(document.activeElement, '.e-grid') && !isNullOrUndefined(e['sourceCapabilities']))) {\n return;\n }\n this.removeFocus();\n this.skipFocus = true;\n this.currentInfo.skipAction = false;\n this.setLastContentCellTabIndex();\n this.setFirstFocusableTabIndex();\n this.firstHeaderCellClick = false;\n };\n /**\n * @returns {void}\n * @hidden */\n FocusStrategy.prototype.setFirstFocusableTabIndex = function () {\n var gObj = this.parent;\n gObj.element.tabIndex = -1;\n if (gObj.allowGrouping && gObj.groupSettings.showDropArea) {\n var groupModule = gObj.groupModule;\n var focusableGroupedItems = groupModule.getFocusableGroupedItems();\n if (focusableGroupedItems.length > 0) {\n groupModule.element.tabIndex = -1;\n focusableGroupedItems[0].tabIndex = 0;\n }\n else {\n groupModule.element.tabIndex = 0;\n }\n return;\n }\n if (gObj.toolbar || gObj.toolbarTemplate) {\n var toolbarElement = gObj.toolbarModule.element;\n var focusableToolbarItems = this.parent.toolbarModule.getFocusableToolbarItems();\n if (focusableToolbarItems.length > 0 && focusableToolbarItems[0].querySelector('.e-toolbar-item-focus,.e-btn,.e-input')) {\n toolbarElement.tabIndex = -1;\n focusableToolbarItems[0].querySelector('.e-toolbar-item-focus,.e-btn,.e-input').tabIndex = 0;\n }\n else {\n toolbarElement.tabIndex = 0;\n }\n return;\n }\n if (gObj.getColumns().length) {\n var firstHeaderCell = gObj.getHeaderContent().querySelector('.e-headercell:not(.e-hide)');\n firstHeaderCell.tabIndex = 0;\n this.setActive(false);\n if (!isNullOrUndefined(this.active) && (isNullOrUndefined(this.active.target) || !this.active.target.classList.contains('e-columnmenu'))) {\n var firstHeaderCellIndex = [0, 0];\n if (this.active.matrix.matrix[firstHeaderCellIndex[0]][firstHeaderCellIndex[1]] === 0) {\n firstHeaderCellIndex = findCellIndex(this.active.matrix.matrix, firstHeaderCellIndex, true);\n }\n this.active.matrix.current = firstHeaderCellIndex;\n }\n return;\n }\n };\n FocusStrategy.prototype.setLastContentCellTabIndex = function () {\n var contentTable = this.parent.getContentTable();\n if (contentTable.rows[contentTable.rows.length - 1]) {\n var lastCell = contentTable.rows[contentTable.rows.length - 1].lastElementChild;\n lastCell.tabIndex = 0;\n }\n };\n FocusStrategy.prototype.onClick = function (e, force) {\n if (parentsUntil(e.target, 'e-filterbarcell') && (parentsUntil(e.target, 'e-multiselect') ||\n e.target.classList.contains('e-input-group-icon'))) {\n return;\n }\n var isContent = !isNullOrUndefined(closest(e.target, '.' + literals.gridContent));\n var isHeader = !isNullOrUndefined(closest(e.target, '.' + literals.gridHeader));\n isContent = isContent && isHeader ? !isContent : isContent;\n if (!isContent && isNullOrUndefined(closest(e.target, '.' + literals.gridHeader)) ||\n e.target.classList.contains(literals.content) ||\n !isNullOrUndefined(closest(e.target, '.e-unboundcell'))) {\n return;\n }\n this.setActive(isContent);\n var beforeArgs = { cancel: false, byKey: false, byClick: !isNullOrUndefined(e.target), clickArgs: e };\n this.parent.notify(event.beforeCellFocused, beforeArgs);\n if (beforeArgs.cancel || (closest(e.target, '.e-inline-edit') && (!this.parent.editSettings.showAddNewRow &&\n (this.parent.editSettings.showAddNewRow && !this.parent.element.querySelector('.e-editedrow'))))) {\n return;\n }\n this.setActive(isContent);\n if (this.getContent()) {\n var returnVal = this.getContent().onClick(e, force);\n if (returnVal === false) {\n return;\n }\n this.focus();\n if (this.currentInfo.element.classList.contains('e-rowcell') && e.type && e.type === 'click') {\n addClass([this.currentInfo.element], ['e-focused', 'e-focus']);\n }\n }\n };\n FocusStrategy.prototype.handleFilterNavigation = function (e, inputSelector, buttonSelector) {\n if (e.target === document.querySelector(inputSelector) && e.key === 'Tab' && e.shiftKey) {\n e.preventDefault();\n document.querySelector(buttonSelector).focus();\n }\n else if (e.target === document.querySelector(buttonSelector) && e.key === 'Tab' && !e.shiftKey &&\n document.activeElement === document.querySelector(buttonSelector)) {\n e.preventDefault();\n document.querySelector(inputSelector).focus();\n }\n };\n FocusStrategy.prototype.onKeyPress = function (e) {\n if (this.parent.allowPaging) {\n var pagerElement = this.parent.pagerModule.pagerObj.element;\n var focusablePagerElements = this.parent.pagerModule.pagerObj.getFocusablePagerElements(pagerElement, []);\n if (this.parent.childGrid && !parentsUntil(e.target, 'e-gridpager') && this.allowToPaging(e) && focusablePagerElements.length) {\n focusablePagerElements[0].tabIndex = 0;\n }\n if (this.parent.pagerModule.pagerObj.checkPagerHasFocus()) {\n if (e.action === 'shiftTab' && focusablePagerElements.length && focusablePagerElements[0] === e.target) {\n this.setActive(true);\n var lastHeaderCellIndex = [this.active.matrix.matrix.length - 1,\n this.active.matrix.matrix[this.active.matrix.matrix.length - 1].length - 1];\n if (this.active.matrix.matrix[lastHeaderCellIndex[0]][lastHeaderCellIndex[1]] === 0) {\n lastHeaderCellIndex = findCellIndex(this.active.matrix.matrix, lastHeaderCellIndex, false);\n }\n this.active.matrix.current = this.parent.editSettings.mode === 'Batch' ?\n this.isValidBatchEditCell(lastHeaderCellIndex) ? lastHeaderCellIndex :\n this.findBatchEditCell(lastHeaderCellIndex, false) : lastHeaderCellIndex;\n e.preventDefault();\n this.focus(e);\n return;\n }\n if (!(e.action === 'tab' && this.parent.element.classList.contains('e-childgrid')\n && ((!this.parent.pageSettings.pageSizes && focusablePagerElements.length\n && focusablePagerElements[focusablePagerElements.length - 1] === e.target)\n || (this.parent.pagerModule.pagerObj.getDropDownPage() === e.target)))) {\n this.parent.pagerModule.pagerObj.changePagerFocus(e);\n return;\n }\n else {\n var parentCell = parentsUntil(this.parent.element, 'e-detailcell');\n removeClass([this.parent.element], ['e-focus']);\n removeClass([parentCell], ['e-focused']);\n parentCell.tabIndex = -1;\n }\n }\n if (this.parent.pagerModule.pagerObj.element.tabIndex === 0 && (e.keyCode === 38 || (e.shiftKey && e.keyCode === 9))) {\n e.preventDefault();\n this.focus(e);\n return;\n }\n else if (this.parent.pagerModule.pagerObj.element.tabIndex === 0 && e.keyCode === 9) {\n e.preventDefault();\n this.parent.pagerModule.pagerObj.setPagerFocus();\n return;\n }\n if (this.parent.pagerModule.pagerObj.checkFirstPagerFocus()) {\n var lastRow = this.getContent().matrix.rows;\n var lastColumn = this.getContent().matrix.columns;\n this.getContent().matrix.current = [lastRow, lastColumn];\n }\n }\n if (this.parent.filterSettings.type === 'Excel') {\n this.handleFilterNavigation(e, '.e-excelfilter .e-menu-item:not(.e-disabled)', '.e-excelfilter .e-footer-content button:nth-child(2)');\n }\n if (this.parent.filterSettings.type === 'CheckBox') {\n this.handleFilterNavigation(e, '.e-searchinput.e-input', '.e-checkboxfilter .e-footer-content button:nth-child(2)');\n }\n if (this.parent.filterSettings.type === 'Menu') {\n this.handleFilterNavigation(e, '.e-flmenu .e-input-group.e-popup-flmenu', '.e-flmenu .e-footer-content button:nth-child(2)');\n }\n if (this.skipOn(e)) {\n return;\n }\n if (e.target && parentsUntil(e.target, 'e-gridcontent')) {\n var rows = [].slice.call(this.parent.getContentTable().rows);\n var lastCell = rows[rows.length - 1].lastElementChild;\n if (e.target === lastCell) {\n this.setActive(true);\n this.setLastContentCellActive();\n }\n }\n if (e.action === 'shiftTab' && e.target && (e.target === this.parent.element || parentsUntil(e.target, 'e-toolbar')\n || parentsUntil(e.target, 'e-groupdroparea'))) {\n if (e.target === this.parent.element) {\n if (this.parent.element.classList.contains('e-childgrid')) {\n this.focusOutFromChildGrid(e);\n }\n return;\n }\n if (parentsUntil(e.target, 'e-groupdroparea')) {\n if (this.parent.element.classList.contains('e-childgrid')) {\n e.preventDefault();\n this.parent.element.focus();\n }\n return;\n }\n if (parentsUntil(e.target, 'e-toolbar')) {\n if (this.parent.allowGrouping && this.parent.groupSettings.showDropArea) {\n var groupModule = this.parent.groupModule;\n var focusableGroupedItems = groupModule.getFocusableGroupedItems();\n e.preventDefault();\n if (focusableGroupedItems.length > 0) {\n focusableGroupedItems[focusableGroupedItems.length - 1].focus();\n }\n else {\n groupModule.element.focus();\n }\n }\n else if (this.parent.element.classList.contains('e-childgrid')) {\n e.preventDefault();\n this.parent.element.focus();\n }\n return;\n }\n }\n var focusFirstHeaderCell = false;\n if (e.action === 'tab' && e.target && (e.target === this.parent.element || parentsUntil(e.target, 'e-toolbar')\n || parentsUntil(e.target, 'e-groupdroparea'))) {\n if (this.parent.allowGrouping && this.parent.groupSettings.showDropArea\n && (e.target === this.parent.element || e.target.classList.contains('e-groupdroparea'))) {\n var groupModule = this.parent.groupModule;\n var focusableGroupedItems = groupModule.getFocusableGroupedItems();\n if (focusableGroupedItems.length > 0) {\n e.preventDefault();\n focusableGroupedItems[0].focus();\n return;\n }\n if (!e.target.classList.contains('e-groupdroparea')) {\n e.preventDefault();\n groupModule.element.focus();\n return;\n }\n }\n if ((this.parent.toolbar || this.parent.toolbarTemplate) && (e.target === this.parent.element\n || parentsUntil(e.target, 'e-groupdroparea')\n || e.target.classList.contains('e-toolbar'))) {\n var toolbarElement = this.parent.toolbarModule.element;\n var focusableToolbarItems = this.parent.toolbarModule.getFocusableToolbarItems();\n if (focusableToolbarItems.length > 0) {\n e.preventDefault();\n focusableToolbarItems[0].querySelector('.e-toolbar-item-focus,.e-btn,.e-input').focus();\n return;\n }\n if (!e.target.classList.contains('e-toolbar')) {\n e.preventDefault();\n toolbarElement.focus();\n return;\n }\n }\n if (e.target === this.parent.element || parentsUntil(e.target, 'e-toolbar')\n || parentsUntil(e.target, 'e-groupdroparea')) {\n focusFirstHeaderCell = true;\n }\n }\n if (focusFirstHeaderCell) {\n if (this.parent.allowGrouping && !isNullOrUndefined(this.parent.groupSettings.columns) && this.parent.groupSettings.columns.length === this.parent.columns.length) {\n this.setActive(true);\n }\n else {\n this.setActive(false);\n }\n this.active.matrix.current = [0, -1];\n }\n this.activeKey = e.action;\n var beforeArgs = { cancel: false, byKey: true, byClick: false, keyArgs: e };\n this.parent.notify(event.beforeCellFocused, beforeArgs);\n if (beforeArgs.cancel) {\n return;\n }\n var bValue = this.getContent().matrix.current;\n var prevBatchValue = this.active && this.active.matrix.current ?\n [this.active.matrix.current[0], this.active.matrix.current[1]] : undefined;\n this.currentInfo.outline = true;\n var swapInfo = this.getContent().jump(e.action, bValue);\n this.swap = swapInfo;\n if (swapInfo.swap && !(this.parent.editSettings.mode === 'Batch'\n && (e.action === 'tab' || e.action === 'shiftTab'))) {\n this.setActive(!swapInfo.toHeader);\n this.getContent().matrix.current = this.getContent().getNextCurrent(bValue, swapInfo, this.active, e.action);\n this.prevIndexes = {};\n }\n this.setActiveByKey(e.action, this.getContent());\n var returnVal = this.content.lastIdxCell ? false : this.getContent().onKeyPress(e);\n if (e.target && parentsUntil(e.target, 'e-gridheader')) {\n if (e.action === 'tab' && bValue.toString() === this.active.matrix.current.toString()) {\n var nextHeaderCellIndex = findCellIndex(this.active.matrix.matrix, this.active.matrix.current, true);\n var lastHeaderCellIndex = [this.active.matrix.matrix.length - 1,\n this.active.matrix.matrix[this.active.matrix.matrix.length - 1].length - 1];\n if (this.active.matrix.matrix[lastHeaderCellIndex[0]][lastHeaderCellIndex[1]] === 0) {\n lastHeaderCellIndex = findCellIndex(this.active.matrix.matrix, lastHeaderCellIndex, false);\n }\n if (this.active.matrix.current.toString() === lastHeaderCellIndex.toString() && this.content.matrix.matrix.length) {\n returnVal = true;\n this.setActive(true);\n var firstContentCellIndex = [0, 0];\n if (this.parent.allowPaging && this.parent.pagerModule.pagerObj.element.querySelector('.e-pagercontainer')) {\n this.parent.pagerModule.pagerObj.element.querySelector('.e-pagercontainer').setAttribute('aria-hidden', 'true');\n }\n if (this.active.matrix.matrix[firstContentCellIndex[0]][firstContentCellIndex[1]] === 0) {\n firstContentCellIndex = findCellIndex(this.active.matrix.matrix, [0, 0], true);\n }\n this.active.matrix.current = this.parent.editSettings.mode === 'Batch' ?\n this.isValidBatchEditCell(firstContentCellIndex) ? firstContentCellIndex :\n this.findBatchEditCell(firstContentCellIndex, true) : firstContentCellIndex;\n }\n else if (this.active.matrix.current.toString() !== nextHeaderCellIndex.toString()) {\n this.active.matrix.current = nextHeaderCellIndex;\n }\n }\n if (e.action === 'shiftTab' && bValue.toString() === this.active.matrix.current.toString()) {\n var previousCellIndex = findCellIndex(this.active.matrix.matrix, this.active.matrix.current, false);\n if (previousCellIndex.toString() === this.active.matrix.current.toString()) {\n this.focusOutFromHeader(e);\n return;\n }\n if (this.active.matrix.current.toString() !== previousCellIndex.toString() && !returnVal) {\n returnVal = true;\n this.active.matrix.current = previousCellIndex;\n }\n }\n }\n if (e.target && parentsUntil(e.target, 'e-gridcontent')) {\n if (this.parent.allowPaging && this.parent.pagerModule.pagerObj.element.querySelector('.e-pagercontainer')) {\n this.parent.pagerModule.pagerObj.element.querySelector('.e-pagercontainer').removeAttribute('aria-hidden');\n }\n if (this.parent.editSettings.mode === 'Batch' && (e.action === 'tab' || e.action === 'shiftTab')) {\n this.active.matrix.current = this.findBatchEditCell(prevBatchValue, e.action === 'tab' ? true : false);\n if (e.action === 'tab' && prevBatchValue.toString() === this.active.matrix.current.toString()) {\n this.parent.editModule.editModule.addBatchRow = true;\n }\n }\n if (e.action === 'shiftTab' && bValue.toString() === this.active.matrix.current.toString()) {\n if (this.parent.allowGrouping && !isNullOrUndefined(this.parent.groupSettings.columns) && this.parent.groupSettings.columns.length === this.parent.columns.length) {\n this.focusOutFromHeader(e);\n return;\n }\n var firstContentCellIndex = [0, 0];\n if (this.active.matrix.matrix[firstContentCellIndex[0]][firstContentCellIndex[1]] === 0) {\n firstContentCellIndex = findCellIndex(this.active.matrix.matrix, [0, 0], true);\n }\n if (!returnVal && (firstContentCellIndex.toString() === this.active.matrix.current.toString()\n || (this.parent.editSettings.mode === 'Batch'\n && prevBatchValue.toString() === this.active.matrix.current.toString()))) {\n returnVal = true;\n this.setActive(false);\n this.setLastContentCellActive();\n }\n }\n }\n if (returnVal === false) {\n this.clearIndicator();\n if (e.action === 'shiftTab' && bValue.toString() === [0, 0].toString()) {\n this.parent.element.tabIndex = -1;\n }\n if (this.parent.allowPaging && !this.parent.pagerModule.pagerObj.checkPagerHasFocus() && this.allowToPaging(e)\n && bValue.toString() !== [0, 0].toString()) {\n e.preventDefault();\n if (e.keyCode === 40) {\n this.parent.pagerModule.pagerObj.setPagerContainerFocus();\n return;\n }\n else if (e.keyCode === 9) {\n this.parent.pagerModule.pagerObj.setPagerFocus();\n return;\n }\n }\n if (this.parent.element.classList.contains('e-childgrid')) {\n this.focusOutFromChildGrid(e);\n }\n return;\n }\n e.preventDefault();\n this.focus(e);\n };\n FocusStrategy.prototype.isValidBatchEditCell = function (cellIndex) {\n var cell = this.active.getTable().rows[cellIndex[0]].cells[cellIndex[1]];\n var tr = closest(cell, 'tr');\n var cellColIndex = parseInt(cell.getAttribute('data-colindex'), 10);\n var cellCol = this.parent.getColumns()[parseInt(cellColIndex.toString(), 10)];\n if (this.active.matrix.matrix[cellIndex[0]][cellIndex[1]] === 1\n && (!tr.classList.contains('e-row') || (tr.classList.contains('e-insertedrow') || !cellCol.isPrimaryKey) && cellCol.allowEditing)) {\n return true;\n }\n return false;\n };\n FocusStrategy.prototype.findBatchEditCell = function (currentCellIndex, next, limitRow) {\n var cellIndex = currentCellIndex;\n var tempCellIndex = currentCellIndex;\n var cellIndexObtain = false;\n while (!cellIndexObtain) {\n var prevTempCellIndex = tempCellIndex;\n tempCellIndex = findCellIndex(this.active.matrix.matrix, tempCellIndex, next);\n if ((prevTempCellIndex.toString() === tempCellIndex.toString())\n || (limitRow && prevTempCellIndex[0] !== tempCellIndex[0])) {\n cellIndexObtain = true;\n continue;\n }\n if (this.isValidBatchEditCell(tempCellIndex)) {\n cellIndex = tempCellIndex;\n cellIndexObtain = true;\n }\n }\n return cellIndex;\n };\n FocusStrategy.prototype.setLastContentCellActive = function () {\n var lastContentCellIndex = [this.active.matrix.matrix.length - 1,\n this.active.matrix.matrix[this.active.matrix.matrix.length - 1].length - 1];\n if (this.active.matrix.matrix[lastContentCellIndex[0]][lastContentCellIndex[1]] === 0) {\n lastContentCellIndex = findCellIndex(this.active.matrix.matrix, lastContentCellIndex, false);\n }\n this.active.matrix.current = lastContentCellIndex;\n };\n FocusStrategy.prototype.focusOutFromChildGrid = function (e) {\n var parentTable = parentsUntil(this.parent.element, 'e-table');\n var parentGrid = parentsUntil(parentTable, 'e-grid').ej2_instances[0];\n var parentCell = parentsUntil(this.parent.element, 'e-detailcell');\n var uid = parentsUntil(this.parent.element, 'e-detailrow').getAttribute('data-uid');\n var parentRows = [].slice.call(parentGrid.getContentTable().rows);\n var parentRowIndex = parentRows.map(function (m) { return m.getAttribute('data-uid'); }).indexOf(uid);\n if (e.action === 'tab' && parentRowIndex >= parentRows.length - 1) {\n return;\n }\n removeClass([this.parent.element], ['e-focus']);\n removeClass([parentCell], ['e-focused']);\n parentCell.tabIndex = -1;\n e.preventDefault();\n var nextFocusCell;\n parentGrid.focusModule.removeFocus();\n if (e.action === 'shiftTab') {\n var previousRow = parentRows[parentRowIndex - 1];\n var rowCells = previousRow.cells;\n for (var i = rowCells.length - 1; i >= 0; i--) {\n nextFocusCell = rowCells[parseInt(i.toString(), 10)];\n if (!nextFocusCell.classList.contains('e-hide')) {\n parentGrid.focusModule.active.matrix.current = [parentRowIndex - 1, i];\n break;\n }\n }\n }\n else {\n nextFocusCell = parentRows[parentRowIndex + 1].cells[0];\n parentGrid.focusModule.active.matrix.current = [parentRowIndex + 1, 0];\n }\n parentGrid.focusModule.currentInfo.element = nextFocusCell;\n parentGrid.focusModule.currentInfo.elementToFocus = nextFocusCell;\n addClass([nextFocusCell], ['e-focused', 'e-focus']);\n nextFocusCell.tabIndex = 0;\n nextFocusCell.focus();\n };\n FocusStrategy.prototype.focusOutFromHeader = function (e) {\n this.removeFocus();\n if (this.parent.toolbar || this.parent.toolbarTemplate) {\n var toolbarElement = this.parent.toolbarModule.element;\n var focusableToolbarItems = this.parent.toolbarModule.getFocusableToolbarItems();\n e.preventDefault();\n if (focusableToolbarItems.length > 0) {\n focusableToolbarItems[focusableToolbarItems.length - 1].querySelector('.e-toolbar-item-focus,.e-btn,.e-input').focus();\n }\n else {\n toolbarElement.focus();\n }\n return;\n }\n if (this.parent.allowGrouping && this.parent.groupSettings.showDropArea) {\n var groupModule = this.parent.groupModule;\n var focusableGroupedItems = groupModule.getFocusableGroupedItems();\n e.preventDefault();\n if (focusableGroupedItems.length > 0) {\n focusableGroupedItems[focusableGroupedItems.length - 1].focus();\n }\n else {\n groupModule.element.focus();\n }\n return;\n }\n if (this.parent.element.classList.contains('e-childgrid')) {\n e.preventDefault();\n this.parent.element.focus();\n }\n };\n FocusStrategy.prototype.allowToPaging = function (e) {\n if (this.parent.editSettings.mode === 'Batch' && this.parent.editSettings.allowAdding && e.keyCode !== 40) {\n return false;\n }\n return true;\n };\n FocusStrategy.prototype.skipOn = function (e) {\n var target = e.target;\n if (!target) {\n return false;\n }\n if (this.currentInfo.skipAction) {\n this.clearIndicator();\n return true;\n }\n if (['pageUp', 'pageDown', 'altDownArrow'].indexOf(e.action) > -1) {\n this.clearIndicator();\n return true;\n }\n if (this.parent.allowGrouping) {\n var focusableGroupedItems = this.parent.groupModule.getFocusableGroupedItems();\n if (parentsUntil(e.target, 'e-groupheadercell')\n && !((e.target === focusableGroupedItems[0] && e.action === 'shiftTab')\n || (e.target === focusableGroupedItems[focusableGroupedItems.length - 1] && e.action === 'tab'))) {\n return true;\n }\n }\n if (this.parent.toolbar || this.parent.toolbarTemplate) {\n var toolbarElement = this.parent.toolbarModule.element;\n var focusableToolbarItems = toolbarElement\n .querySelectorAll('.e-toolbar-item:not(.e-overlay):not(.e-hidden)');\n if (parentsUntil(e.target, 'e-toolbar-item')\n && !(focusableToolbarItems.length > 0 && ((parentsUntil(e.target, 'e-toolbar-item') === focusableToolbarItems[0] && e.action === 'shiftTab')\n || (parentsUntil(e.target, 'e-toolbar-item') === focusableToolbarItems[focusableToolbarItems.length - 1] && e.action === 'tab')))) {\n return true;\n }\n }\n var th = closest(target, 'th') && !closest(target, 'th').tabIndex;\n if (e.target.classList.contains('e-filterbaroperator') && (e.keyCode === 13 || e.keyCode === 27)) {\n var inputTarget = closest(e.target, '.e-filterbarcell');\n inputTarget.querySelector('input').focus();\n }\n var addNewRow = this.parent.editSettings.showAddNewRow && closest(document.activeElement, '.e-addedrow') !== null;\n if ((th && closest(document.activeElement, '.e-filterbarcell') !== null) || addNewRow) {\n this.removeFocus();\n }\n var filterCell = closest(document.activeElement, '.e-filterbarcell') !== null;\n if (this.parent.enableHeaderFocus && filterCell) {\n var matrix = this.active.matrix;\n var current = matrix.current;\n filterCell = matrix.matrix[current[0]].lastIndexOf(1) !== current[1];\n }\n if (this.parent.isEdit && (e.action === 'tab' || e.action === 'shiftTab') && this.parent.editSettings.mode === 'Normal'\n && !this.parent.editSettings.showAddNewRow && !isNullOrUndefined(parentsUntil(target, 'e-addedrow'))) {\n var inputElements = this.parent.editModule.formObj.element\n .querySelectorAll('input.e-field:not(.e-disabled),button:not(.e-hide)');\n var inputTarget = target.classList.contains('e-ddl') ? target.querySelector('input') : target;\n var firstEditCell = e.action === 'tab' && inputTarget === inputElements[inputElements.length - 1];\n var lastEditCell = e.action === 'shiftTab' && inputTarget === inputElements[0];\n if (firstEditCell || lastEditCell) {\n e.preventDefault();\n var focusElement = inputElements[firstEditCell ? 0 : inputElements.length - 1];\n focusElement = focusElement.parentElement.classList.contains('e-ddl') ? focusElement.parentElement : focusElement;\n focusElement.focus();\n }\n }\n return (e.action === 'delete'\n || (this.parent.editSettings.mode !== 'Batch' && ((this.parent.isEdit && (!this.parent.editSettings.showAddNewRow ||\n (this.parent.editSettings.showAddNewRow && ((!isNullOrUndefined(this.parent.element.querySelector('.e-editedrow')) ||\n (!isNullOrUndefined(parentsUntil(target, 'e-addedrow')) && !isNullOrUndefined(closest(e.target, 'input')) && !isNullOrUndefined(document.querySelector('.e-popup-open'))) ||\n (!isNullOrUndefined(parentsUntil(target, 'e-addedrow')) && (target && !target.querySelector('.e-cancel-icon')) &&\n !isNullOrUndefined(parentsUntil(target, 'e-unboundcell')))))))) || ['insert', 'f2'].indexOf(e.action) > -1))\n || ((filterCell && this.parent.enableHeaderFocus) || ((filterCell || addNewRow) && e.action !== 'tab' && e.action !== 'shiftTab') ||\n closest(document.activeElement, '#' + this.parent.element.id + '_searchbar') !== null\n && ['enter', 'leftArrow', 'rightArrow',\n 'shiftLeft', 'shiftRight', 'ctrlPlusA'].indexOf(e.action) > -1)\n || (closest(target, '.' + literals.gridContent) === null && closest(target, '.' + literals.gridHeader) === null\n && !(e.target === this.parent.element || parentsUntil(e.target, 'e-toolbar')\n || parentsUntil(e.target, 'e-groupdroparea')))\n || (e.action === 'space' && (!target.classList.contains(literals.gridChkBox) && closest(target, '.' + literals.gridChkBox) === null\n && closest(target, '.e-headerchkcelldiv') === null))) || closest(target, '.e-filter-popup') !== null;\n };\n FocusStrategy.prototype.focusVirtualElement = function (e) {\n var _this = this;\n if (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling) {\n var data = { virtualData: {}, isAdd: false, isCancel: false };\n this.parent.notify(event.getVirtualData, data);\n var isKeyFocus = this.actions.some(function (value) { return value === _this.activeKey; });\n var isSelected = this.parent.contentModule ?\n this.parent.contentModule.selectedRowIndex > -1 : false;\n if (data.isAdd || Object.keys(data.virtualData).length || isKeyFocus || data.isCancel || isSelected) {\n this.parent.notify(event.resetVirtualFocus, { isCancel: false });\n data.isCancel = false;\n this.parent.contentModule.selectedRowIndex = -1;\n if (isKeyFocus) {\n this.activeKey = this.empty;\n this.parent.notify('virtaul-key-handler', e);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.currentInfo.elementToFocus.focus({ preventScroll: true });\n }\n else {\n if (this.isVirtualScroll || this.isInfiniteScroll) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.currentInfo.elementToFocus.focus({ preventScroll: true });\n }\n else {\n this.currentInfo.elementToFocus.focus();\n }\n }\n }\n this.isVirtualScroll = this.isInfiniteScroll = false;\n };\n FocusStrategy.prototype.getFocusedElement = function () {\n return this.currentInfo.elementToFocus;\n };\n FocusStrategy.prototype.getContent = function () {\n return this.active || this.content;\n };\n FocusStrategy.prototype.setActive = function (content) {\n this.active = content ? this.content : this.header;\n };\n FocusStrategy.prototype.setFocusedElement = function (element, e) {\n var _this = this;\n this.currentInfo.elementToFocus = element;\n setTimeout(function () {\n if (!isNullOrUndefined(_this.currentInfo.elementToFocus)) {\n if (_this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling) {\n _this.focusVirtualElement(e);\n }\n else if (isNullOrUndefined(_this.parent.element.querySelector('.e-flmenu')) ||\n parentsUntil(document.activeElement, 'e-flmenu-valuediv') !== _this.parent.element.querySelector('.e-flmenu-valuediv')) {\n _this.currentInfo.elementToFocus.focus();\n }\n }\n }, 0);\n };\n FocusStrategy.prototype.focus = function (e) {\n this.parent.notify(event.virtaulCellFocus, e);\n this.removeFocus();\n this.addFocus(this.getContent().getFocusInfo(), e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FocusStrategy.prototype.removeFocus = function (e) {\n if (!this.currentInfo.element) {\n return;\n }\n if (this.parent.isReact && !this.parent.isEdit && this.currentInfo.element.classList.contains('e-rowcell')\n && !this.currentInfo.element.parentElement && !(this.parent.allowGrouping && !isNullOrUndefined(this.parent.groupSettings.columns) && this.parent.groupSettings.columns.length) &&\n this.parent.getRowByIndex(this.prevIndexes.rowIndex)) {\n var cellElem = this.parent.getCellFromIndex(this.prevIndexes.rowIndex, this.prevIndexes\n .cellIndex);\n this.currentInfo.element = cellElem ? cellElem : this.currentInfo.element;\n }\n removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focused', 'e-focus']);\n this.currentInfo.element.tabIndex = -1;\n };\n /**\n * @returns {void}\n * @hidden */\n FocusStrategy.prototype.addOutline = function () {\n var info = this.getContent().getFocusInfo();\n if (info.element) {\n addClass([info.element], ['e-focused']);\n addClass([info.elementToFocus], ['e-focus']);\n }\n };\n /**\n * @returns {void}\n * @hidden */\n FocusStrategy.prototype.focusHeader = function () {\n this.setActive(false);\n this.resetFocus();\n };\n /**\n * @returns {void}\n * @hidden */\n FocusStrategy.prototype.focusContent = function () {\n this.setActive(true);\n this.resetFocus();\n };\n FocusStrategy.prototype.resetFocus = function () {\n var current = this.getContent().matrix.get(0, -1, [0, 1], null, this.getContent().validator());\n this.getContent().matrix.select(current[0], current[1]);\n this.focus();\n };\n FocusStrategy.prototype.addFocus = function (info, e) {\n this.currentInfo = info;\n this.currentInfo.outline = info.outline && (!isNullOrUndefined(e) || this.isVirtualScroll);\n if (this.isInfiniteScroll) {\n this.currentInfo.outline = true;\n }\n if (!info.element) {\n return;\n }\n var isFocused = info.elementToFocus.classList.contains('e-focus');\n if (isFocused) {\n return;\n }\n if (this.currentInfo.outline) {\n addClass([info.element], ['e-focused']);\n }\n addClass([info.elementToFocus], ['e-focus']);\n info.element.tabIndex = 0;\n if (!isFocused) {\n this.setFocusedElement(info.elementToFocus, e);\n }\n this.parent.notify(event.cellFocused, {\n element: info.elementToFocus,\n parent: info.element,\n indexes: this.getContent().matrix.current,\n byKey: !isNullOrUndefined(e),\n byClick: isNullOrUndefined(e),\n keyArgs: e,\n isJump: this.swap.swap,\n container: this.getContent().getInfo(e),\n outline: !isNullOrUndefined(e),\n swapInfo: this.swap\n });\n var _a = this.getContent().matrix.current, rowIndex = _a[0], cellIndex = _a[1];\n this.prevIndexes = { rowIndex: rowIndex, cellIndex: cellIndex };\n this.focusedColumnUid = this.parent.getColumnByIndex(cellIndex).uid;\n this.focusByClick = false;\n };\n FocusStrategy.prototype.refreshMatrix = function (content) {\n var _this = this;\n return function (e) {\n if (content && !_this.content) {\n _this.content = new ContentFocus(_this.parent);\n }\n if (!content && !_this.header) {\n _this.header = new HeaderFocus(_this.parent);\n }\n var cFocus = content ? _this.content : _this.header;\n var frozenRow = _this.parent.frozenRows;\n var batchLen = 0;\n if (frozenRow && _this.parent.editSettings.mode === 'Batch') {\n batchLen = _this.parent.getHeaderContent().querySelectorAll('.e-insertedrow').length +\n _this.parent.getHeaderContent().querySelectorAll('.e-hiddenrow').length;\n }\n if (!isNullOrUndefined(_this.parent.groupSettings.columns) && _this.parent.groupSettings.columns.length && frozenRow && content) {\n frozenRow = 0;\n for (var i = 0; i < e.rows.length; i++) {\n frozenRow++;\n if (e.rows[parseInt(i.toString(), 10)].index + 1 === _this.parent.frozenRows) {\n break;\n }\n }\n _this.groupedFrozenRow = frozenRow;\n }\n var rows = content ? e.rows.slice(frozenRow + batchLen) : e.rows;\n var updateRow = content ? e.rows.slice(0, frozenRow + batchLen) : e.rows;\n if (_this.parent.isCollapseStateEnabled() && content) {\n rows = rows.filter(function (x) { return x.visible !== false; });\n }\n var isRowTemplate = !isNullOrUndefined(_this.parent.rowTemplate);\n if (frozenRow && ((_this.parent.editSettings.mode === 'Batch' && content && (e.name === 'batchDelete' || e.name === 'batchAdd' ||\n e.name === 'batchCancel' || (e.args && (e.args.requestType === 'batchsave')))) ||\n (e.args && (e.args.requestType === 'delete' || e.args.requestType === 'save')))) {\n var matrixcs = _this.header.matrix.matrix;\n var hdrLen = _this.parent.headerModule.rows.length;\n matrixcs.splice(hdrLen, matrixcs.length - hdrLen);\n }\n var matrix = cFocus.matrix.generate(updateRow, cFocus.selector, isRowTemplate);\n cFocus.matrix.generate(rows, cFocus.selector, isRowTemplate);\n var isScroll = _this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling;\n if ((_this.parent.editSettings.showAddNewRow && content && _this.header && _this.header.matrix) &&\n (!isScroll || (isScroll && _this.parent.isAddNewRow))) {\n var tempMatrix = _this.header.matrix.matrix;\n var lastRowHeaderIdx = _this.parent.allowFiltering && _this.parent.filterSettings.type === 'FilterBar' ? 2 : 1;\n cFocus.matrix.rows = _this.parent.frozenRows && _this.parent.editSettings.newRowPosition === 'Top' ?\n cFocus.matrix.rows : ++cFocus.matrix.rows;\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n (_this.parent.frozenRows || isScroll ?\n matrix : cFocus.matrix.matrix).unshift(_this.refreshAddNewRowMatrix(tempMatrix[tempMatrix.length -\n lastRowHeaderIdx]));\n }\n else {\n cFocus.matrix.matrix.push(_this.refreshAddNewRowMatrix(tempMatrix[tempMatrix.length - lastRowHeaderIdx]));\n }\n _this.parent.isAddNewRow = false;\n }\n if (!(_this.parent.isFrozenGrid() && (e.args && (e.args.requestType === 'sorting'\n || e.args.requestType === 'batchsave' || e.args.requestType === 'paging'))) ||\n (frozenRow && _this.parent.editSettings.mode === 'Batch' && content && (e.name === 'batchDelete' || e.name === 'batchAdd' ||\n e.name === 'batchCancel' || e.args.requestType === 'batchsave'))) {\n cFocus.generateRows(updateRow, {\n matrix: matrix, handlerInstance: _this.header\n });\n }\n if (!Browser.isDevice && e && e.args) {\n if (!_this.focusByClick && e.args.requestType === 'paging' && !_this.parent.pagerModule.pagerObj.checkPagerHasFocus()) {\n _this.skipFocus = false;\n _this.parent.element.focus();\n }\n if (e.args.requestType === 'grouping') {\n _this.skipFocus = true;\n }\n }\n if (e && e.args && e.args.requestType === 'virtualscroll') {\n if (_this.currentInfo.uid) {\n var index_1;\n var bool = e.rows.some(function (row, i) {\n index_1 = i;\n return row.uid === _this.currentInfo.uid;\n });\n if (bool) {\n _this.content.matrix.current[0] = index_1;\n _this.content.matrix.current[1] = _this.parent.getColumnIndexByUid(_this.focusedColumnUid) || 0;\n var focusElement = _this.getContent().getFocusInfo().elementToFocus;\n if (focusElement) {\n var cellPosition = focusElement.getBoundingClientRect();\n var gridPosition = _this.parent.element.getBoundingClientRect();\n if (cellPosition.top >= 0 && cellPosition.left >= 0 &&\n cellPosition.right <= Math.min(gridPosition.right, window.innerWidth ||\n document.documentElement.clientWidth) &&\n cellPosition.bottom <= Math.min(gridPosition.bottom, window.innerHeight ||\n document.documentElement.clientHeight)) {\n _this.isVirtualScroll = true;\n _this.focus();\n }\n }\n }\n }\n else if (e.args.focusElement && e.args.focusElement.classList.contains('e-filtertext')) {\n var focusElement = _this.parent.element.querySelector('#' + e.args.focusElement.id);\n if (focusElement) {\n focusElement.focus();\n }\n }\n }\n if (e && e.args && e.args.requestType === 'infiniteScroll') {\n _this.isInfiniteScroll = true;\n }\n };\n };\n FocusStrategy.prototype.refreshAddNewRowMatrix = function (matrix) {\n var cols = this.parent.getColumns();\n var indent = this.parent.getIndentCount();\n for (var i = indent; i < matrix.length - 1; i++) {\n if (cols[i - indent] && cols[i - indent].visible && cols[i - indent].allowEditing) {\n matrix[parseInt(i.toString(), 10)] = 1;\n }\n else {\n matrix[parseInt(i.toString(), 10)] = 0;\n }\n }\n return matrix;\n };\n FocusStrategy.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n EventHandler.add(this.parent.element, 'mousedown', this.focusCheck, this);\n EventHandler.add(this.parent.element, 'touchstart', this.focusCheck, this);\n EventHandler.add(this.parent.element, 'focus', this.onFocus, this);\n this.parent.element.addEventListener('focus', this.passiveHandler = function (e) { return _this.passiveFocus(e); }, true);\n EventHandler.add(this.parent.element, 'focusout', this.onBlur, this);\n this.evtHandlers = [{ event: event.keyPressed, handler: this.onKeyPress },\n { event: event.click, handler: this.onClick },\n { event: event.contentReady, handler: this.refMatrix },\n { event: event.partialRefresh, handler: this.refMatrix },\n { event: event.refreshExpandandCollapse, handler: this.refMatrix },\n { event: event.showAddNewRowFocus, handler: this.showAddNewRowFocus },\n { event: event.headerRefreshed, handler: this.refreshMatrix() },\n { event: event.closeEdit, handler: this.restoreFocus },\n { event: event.restoreFocus, handler: this.restoreFocus },\n { event: 'start-edit', handler: this.clearIndicator },\n { event: 'start-add', handler: this.clearIndicator },\n { event: 'sorting-complete', handler: this.restoreFocus },\n { event: 'filtering-complete', handler: this.filterfocus },\n { event: 'custom-filter-close', handler: this.filterfocus },\n { event: 'grouping-complete', handler: this.restoreFocusWithAction },\n { event: 'ungrouping-complete', handler: this.restoreFocusWithAction },\n { event: event.batchAdd, handler: this.refMatrix },\n { event: event.batchCancel, handler: this.refMatrix },\n { event: event.batchDelete, handler: this.refMatrix },\n { event: event.detailDataBound, handler: this.refMatrix },\n { event: event.onEmpty, handler: this.refMatrix },\n { event: event.cellFocused, handler: this.internalCellFocus }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n };\n FocusStrategy.prototype.showAddNewRowFocus = function () {\n if (this.parent.editSettings.showAddNewRow) {\n var startIdx = this.parent.editSettings.newRowPosition === 'Top' ? 0 : this.content.matrix.matrix.length - 1;\n var startCellIdx = this.parent.getIndentCount();\n if (this.parent.editSettings.newRowPosition === 'Top' && (this.parent.frozenRows ||\n this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n var headrIdx = this.header.matrix.matrix.length - (this.groupedFrozenRow ?\n this.groupedFrozenRow : this.parent.frozenRows);\n startCellIdx = this.findNextCellFocus(this.header.matrix.matrix[headrIdx - 1], startCellIdx);\n this.header.matrix.current = [headrIdx - 1, startCellIdx];\n this.active = this.header;\n }\n else {\n startCellIdx = this.findNextCellFocus(this.content.matrix.matrix[parseInt(startIdx.toString(), 10)], startCellIdx);\n this.content.matrix.current = [startIdx, startCellIdx];\n this.active = this.content;\n }\n var addedrow = this.parent.element.querySelector('.e-addedrow');\n if (addedrow && addedrow.querySelectorAll('tr') &&\n addedrow.querySelector('tr').cells[parseInt(startCellIdx.toString(), 10)].querySelector('input')) {\n addedrow.querySelector('tr').cells[parseInt(startCellIdx.toString(), 10)].querySelector('input').select();\n }\n }\n };\n FocusStrategy.prototype.findNextCellFocus = function (matrix, cellIndex) {\n for (var i = cellIndex; i < matrix.length; i++) {\n if (matrix[parseInt(i.toString(), 10)] === 1) {\n return i;\n }\n }\n return cellIndex;\n };\n FocusStrategy.prototype.filterfocus = function () {\n if (this.parent.filterSettings.type !== 'FilterBar') {\n this.restoreFocus();\n }\n };\n FocusStrategy.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n EventHandler.remove(this.parent.element, 'mousedown', this.focusCheck);\n EventHandler.remove(this.parent.element, 'touchstart', this.focusCheck);\n EventHandler.remove(this.parent.element, 'focus', this.onFocus);\n EventHandler.remove(this.parent.element, 'focusout', this.onBlur);\n this.parent.element.removeEventListener('focus', this.passiveHandler, true);\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n };\n FocusStrategy.prototype.destroy = function () {\n this.removeEventListener();\n };\n FocusStrategy.prototype.restoreFocus = function () {\n var groupModule = this.parent.groupModule;\n if (this.parent.allowGrouping && groupModule && (groupModule.groupSortFocus || groupModule.groupTextFocus)) {\n groupModule.groupSortFocus = false;\n groupModule.groupTextFocus = false;\n return;\n }\n this.firstHeaderCellClick = true;\n this.addFocus(this.getContent().getFocusInfo());\n };\n FocusStrategy.prototype.restoreFocusWithAction = function (e) {\n if (!this.parent.enableInfiniteScrolling) {\n var matrix = this.getContent().matrix;\n var current = matrix.current;\n switch (e.requestType) {\n case 'grouping':\n case 'ungrouping':\n current[1] = current.length &&\n !this.parent.groupSettings.showGroupedColumn && !isNullOrUndefined(matrix.matrix[current[0]]) ?\n matrix.matrix[current[0]].indexOf(1) : e.requestType === 'grouping' ? current[1] + 1 : current[1] - 1;\n break;\n }\n this.getContent().matrix.current = current;\n var groupModule = this.parent.groupModule;\n if (this.parent.allowGrouping && groupModule && groupModule.groupCancelFocus) {\n var focusableGroupedItems = groupModule.getFocusableGroupedItems();\n if (focusableGroupedItems.length) {\n if (focusableGroupedItems[0].parentElement.getAttribute('ej-mappingname') === e.columnName) {\n focusableGroupedItems[3].focus();\n }\n else {\n focusableGroupedItems[0].focus();\n }\n }\n else {\n groupModule.element.focus();\n }\n groupModule.groupCancelFocus = false;\n return;\n }\n this.addFocus(this.getContent().getFocusInfo());\n }\n };\n FocusStrategy.prototype.clearIndicator = function () {\n if (!this.currentInfo.element || !this.currentInfo.elementToFocus) {\n return;\n }\n removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focus', 'e-focused']);\n };\n FocusStrategy.prototype.getPrevIndexes = function () {\n var forget = this.forget;\n this.forget = false;\n return forget || !Object.keys(this.prevIndexes).length ? { rowIndex: null, cellIndex: null } : this.prevIndexes;\n };\n FocusStrategy.prototype.forgetPrevious = function () {\n this.forget = true;\n };\n FocusStrategy.prototype.setActiveByKey = function (action, active) {\n if (this.parent.frozenRows === 0) {\n return;\n }\n // eslint-disable-next-line prefer-const\n var info;\n var actions = {\n 'home': function () { return ({ toHeader: !info.isContent, toFrozen: true }); },\n 'end': function () { return ({ toHeader: !info.isContent, toFrozen: false }); },\n 'ctrlHome': function () { return ({ toHeader: true, toFrozen: false }); },\n 'ctrlEnd': function () { return ({ toHeader: false, toFrozen: false }); }\n };\n if (!(action in actions)) {\n return;\n }\n info = active.getInfo();\n var swap = actions[\"\" + action]();\n this.setActive(!swap.toHeader);\n this.getContent().matrix.current = active.matrix.current;\n };\n FocusStrategy.prototype.internalCellFocus = function (e) {\n if (!(e.byKey && e.container.isContent && e.keyArgs.action === 'enter'\n && (e.parent.classList.contains('e-detailcell') ||\n e.parent.classList.contains('e-unboundcell')))) {\n return;\n }\n this.clearIndicator();\n var focusEle = this.getContent().getFocusable(this.getFocusedElement());\n this.setFocusedElement(focusEle);\n this.currentInfo.skipAction = true;\n };\n return FocusStrategy;\n}());\nexport { FocusStrategy };\n/**\n * Create matrix from row collection which act as mental model for cell navigation\n *\n * @hidden\n */\nvar Matrix = /** @class */ (function () {\n function Matrix() {\n this.matrix = [];\n this.current = [];\n }\n Matrix.prototype.set = function (rowIndex, columnIndex, allow) {\n rowIndex = Math.max(0, Math.min(rowIndex, this.rows));\n columnIndex = Math.max(0, Math.min(columnIndex, this.columns));\n this.matrix[parseInt(rowIndex.toString(), 10)] = this.matrix[parseInt(rowIndex.toString(), 10)] || [];\n this.matrix[parseInt(rowIndex.toString(), 10)][parseInt(columnIndex.toString(), 10)] = allow ? 1 : 0;\n };\n Matrix.prototype.get = function (rowIndex, columnIndex, navigator, action, validator) {\n var tmp = columnIndex;\n if (rowIndex + navigator[0] < 0) {\n return [rowIndex, columnIndex];\n }\n rowIndex = Math.max(0, Math.min(rowIndex + navigator[0], this.rows));\n var emptyTable = true;\n if (isNullOrUndefined(this.matrix[parseInt(rowIndex.toString(), 10)])) {\n return null;\n }\n columnIndex = Math.max(0, Math.min(columnIndex + navigator[1], this.matrix[parseInt(rowIndex.toString(), 10)].length - 1));\n if (tmp + navigator[1] > this.matrix[parseInt(rowIndex.toString(), 10)].length - 1\n && validator(rowIndex, columnIndex, action)) {\n return [rowIndex, tmp];\n }\n var first = this.first(this.matrix[parseInt(rowIndex.toString(), 10)], columnIndex, navigator, true, action);\n columnIndex = first === null ? tmp : first;\n var val = getValue(rowIndex + \".\" + columnIndex, this.matrix);\n if (rowIndex === this.rows && (action === 'downArrow' || action === 'enter')) {\n navigator[0] = -1;\n }\n if (first === null) {\n for (var i = 0; i < this.rows; i++) {\n if (this.matrix[parseInt(i.toString(), 10)].some(function (v) { return v === 1; })) {\n emptyTable = false;\n break;\n }\n }\n if (emptyTable) {\n rowIndex = this.current.length ? this.current[0] : 0;\n return [rowIndex, columnIndex];\n }\n }\n return this.inValid(val) || !validator(rowIndex, columnIndex, action) ?\n this.get(rowIndex, tmp, navigator, action, validator) : [rowIndex, columnIndex];\n };\n Matrix.prototype.first = function (vector, index, navigator, moveTo, action) {\n if (((index < 0 || index === vector.length) && this.inValid(vector[parseInt(index.toString(), 10)])\n && (action !== 'upArrow' && action !== 'downArrow')) || !vector.some(function (v) { return v === 1; })) {\n return null;\n }\n return !this.inValid(vector[parseInt(index.toString(), 10)]) ? index :\n this.first(vector, (['upArrow', 'downArrow', 'shiftUp', 'shiftDown'].indexOf(action) !== -1) ? moveTo ? 0 : ++index : index + navigator[1], navigator, false, action);\n };\n Matrix.prototype.select = function (rowIndex, columnIndex) {\n rowIndex = Math.max(0, Math.min(rowIndex, this.rows));\n columnIndex = Math.max(0, Math.min(columnIndex, this.matrix[parseInt(rowIndex.toString(), 10)].length - 1));\n this.current = [rowIndex, columnIndex];\n };\n Matrix.prototype.generate = function (rows, selector, isRowTemplate) {\n this.rows = rows.length - 1;\n this.matrix = [];\n for (var i = 0; i < rows.length; i++) {\n var cells = rows[parseInt(i.toString(), 10)].cells.filter(function (c) { return c.isSpanned !== true; });\n this.columns = Math.max(cells.length - 1, this.columns | 0);\n var incrementNumber = 0;\n for (var j = 0; j < cells.length; j++) {\n if (cells[parseInt(j.toString(), 10)].column && cells[parseInt(j.toString(), 10)].column.columns) {\n incrementNumber = this.columnsCount(cells[parseInt(j.toString(), 10)].column.columns, incrementNumber);\n }\n else {\n incrementNumber++;\n }\n this.set(i, j, rows[parseInt(i.toString(), 10)].visible === false ?\n false : selector(rows[parseInt(i.toString(), 10)], cells[parseInt(j.toString(), 10)], isRowTemplate));\n }\n this.columns = Math.max(incrementNumber - 1, this.columns | 0);\n }\n return this.matrix;\n };\n Matrix.prototype.columnsCount = function (rowColumns, currentColumnCount) {\n var columns = rowColumns;\n var incrementNumber = currentColumnCount;\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].columns) {\n incrementNumber = this.columnsCount(columns[parseInt(i.toString(), 10)].columns, incrementNumber);\n }\n else {\n incrementNumber++;\n }\n }\n return incrementNumber;\n };\n Matrix.prototype.inValid = function (value) {\n return value === 0 || value === undefined;\n };\n return Matrix;\n}());\nexport { Matrix };\n/**\n * @hidden\n */\nvar ContentFocus = /** @class */ (function () {\n function ContentFocus(parent) {\n var _this = this;\n this.matrix = new Matrix();\n this.lastIdxCell = false;\n this.parent = parent;\n this.keyActions = {\n 'rightArrow': [0, 1],\n 'tab': [0, 1],\n 'leftArrow': [0, -1],\n 'shiftTab': [0, -1],\n 'upArrow': [-1, 0],\n 'downArrow': [1, 0],\n 'shiftUp': [-1, 0],\n 'shiftDown': [1, 0],\n 'shiftRight': [0, 1],\n 'shiftLeft': [0, -1],\n 'enter': [1, 0],\n 'shiftEnter': [-1, 0]\n };\n this.indexesByKey = function (action) {\n var opt = {\n 'home': [_this.matrix.current[0], -1, 0, 1],\n 'end': [_this.matrix.current[0], _this.matrix.columns + 1, 0, -1],\n 'ctrlHome': [0, -1, 0, 1],\n 'ctrlEnd': [_this.matrix.rows, _this.matrix.columns + 1, 0, -1]\n };\n return opt[\"\" + action] || null;\n };\n }\n ContentFocus.prototype.getTable = function () {\n return (this.parent.getContentTable());\n };\n ContentFocus.prototype.onKeyPress = function (e) {\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'home') {\n e.action = 'ctrlHome';\n }\n else if (e.action === 'end') {\n e.action = 'ctrlEnd';\n }\n else if (['downArrow', 'upArrow', 'leftArrow', 'rightArrow'].indexOf(e.action) !== -1) {\n return;\n }\n }\n var navigators = this.keyActions[e.action];\n var current = this.getCurrentFromAction(e.action, navigators, e.action in this.keyActions, e);\n if (!current) {\n return;\n }\n if (((['tab', 'shiftTab'].indexOf(e.action) > -1 && this.matrix.current || []).toString() === current.toString())\n || (this.parent.allowPaging && !this.parent.pagerModule.pagerObj.checkPagerHasFocus()\n && this.matrix.current[0] === this.matrix.rows && ((this.parent.editSettings.mode === 'Batch'\n && this.parent.editSettings.allowAdding && e.keyCode === 40) || (e.keyCode === 40)))) {\n if (current.toString() === [this.matrix.rows, this.matrix.columns].toString() ||\n current.toString() === [0, 0].toString() || (this.matrix.current[0] === this.matrix.rows &&\n this.matrix.current.toString() === current.toString()) || (this.parent.allowGrouping &&\n this.parent.infiniteScrollSettings.enableCache && current.toString() === [0, 1].toString())) {\n return false;\n }\n else {\n current = this.editNextRow(current[0], current[1], e.action);\n }\n }\n this.matrix.select(current[0], current[1]);\n };\n ContentFocus.prototype.editNextRow = function (rowIndex, cellIndex, action) {\n var gObj = this.parent;\n var editNextRow = gObj.editSettings.allowNextRowEdit && (gObj.isEdit || gObj.isLastCellPrimaryKey);\n var visibleIndex = gObj.getColumnIndexByField(gObj.getVisibleColumns()[0].field);\n var row = this.getTable().rows[parseInt(rowIndex.toString(), 10)];\n var cell = gObj.editSettings.showAddNewRow && row.classList.contains('e-addedrow') ?\n (row.querySelectorAll('td:not(.e-editcell)'))[parseInt(cellIndex.toString(), 10)]\n : row.cells[parseInt(cellIndex.toString(), 10)];\n if (action === 'tab' && editNextRow) {\n rowIndex++;\n var index = (this.getTable().rows[parseInt(rowIndex.toString(), 10)].getElementsByClassName('e-indentcell').length +\n this.getTable().rows[parseInt(rowIndex.toString(), 10)].getElementsByClassName('e-detailrowcollapse').length);\n cellIndex = visibleIndex + index;\n }\n if (action === 'shiftTab' && editNextRow) {\n rowIndex--;\n cellIndex = gObj.getColumnIndexByField(gObj.getVisibleColumns()[gObj.getVisibleColumns().length - 1].field);\n }\n return !cell.classList.contains(literals.rowCell) && !cell.classList.contains('e-headercell') &&\n !cell.classList.contains('e-groupcaption') && !cell.classList.contains('e-filterbarcell') ?\n this.editNextRow(rowIndex, cellIndex, action) : [rowIndex, cellIndex];\n };\n ContentFocus.prototype.getCurrentFromAction = function (action, navigator, isPresent, e) {\n if (navigator === void 0) { navigator = [0, 0]; }\n if (!isPresent && !this.indexesByKey(action) || (this.matrix.current.length === 0)) {\n return null;\n }\n if (!this.shouldFocusChange(e)) {\n return this.matrix.current;\n }\n // eslint-disable-next-line\n var _a = this.indexesByKey(action) || this.matrix.current.concat(navigator), rowIndex = _a[0], cellIndex = _a[1], rN = _a[2], cN = _a[3];\n if (this.parent.allowGrouping && !isNullOrUndefined(this.parent.groupSettings.columns) && this.parent.groupSettings.columns.length && this.parent.aggregates.length && action === 'enter') {\n for (var i = rowIndex; i < this.matrix.matrix.length; i++) {\n var row = this.getTable().rows[i + 1];\n if (row && row.cells[parseInt(cellIndex.toString(), 10)] && row.cells[parseInt(cellIndex.toString(), 10)].classList.contains('e-rowcell')) {\n return [i + 1, cellIndex];\n }\n if (i === this.matrix.matrix.length - 1) {\n return [rowIndex, cellIndex];\n }\n }\n }\n if (action === 'ctrlEnd' || action === 'end') {\n var lastContentCellIndex = [this.matrix.matrix.length - 1,\n this.matrix.matrix[this.matrix.matrix.length - 1].length - 1];\n if (action === 'end') {\n lastContentCellIndex = [rowIndex, this.matrix.matrix[parseInt(rowIndex.toString(), 10)].length - 1];\n }\n if (this.matrix.matrix[lastContentCellIndex[0]][lastContentCellIndex[1]] === 0) {\n lastContentCellIndex = findCellIndex(this.matrix.matrix, lastContentCellIndex, false);\n }\n rowIndex = lastContentCellIndex[0];\n cellIndex = lastContentCellIndex[1] + 1;\n }\n var current = this.matrix.get(rowIndex, cellIndex, [rN, cN], action, this.validator());\n return current;\n };\n ContentFocus.prototype.onClick = function (e, force) {\n var target = e.target;\n this.target = target;\n target = (target.classList.contains(literals.rowCell) ? target : closest(target, 'td'));\n target = target ? target : closest(e.target, 'td.e-detailrowcollapse')\n || closest(e.target, 'td.e-detailrowexpand');\n target = closest(e.target, 'td.e-detailcell') ?\n isNullOrUndefined(closest(closest(e.target, '.e-grid'), 'td.e-detailcell')) ? null : target : target;\n target = target && closest(target, 'table').classList.contains(literals.table) ? target : null;\n if (!target) {\n return false;\n }\n var rowIdx = target.parentElement.rowIndex;\n if (this.parent.editSettings.showAddNewRow && parentsUntil(target, 'e-addedrow')) {\n rowIdx = parentsUntil(target, 'e-addedrow').rowIndex;\n }\n var _a = [rowIdx, target.cellIndex], rowIndex = _a[0], cellIndex = _a[1];\n var _b = this.matrix.current, oRowIndex = _b[0], oCellIndex = _b[1];\n var val = getValue(rowIndex + \".\" + cellIndex, this.matrix.matrix);\n if (this.matrix.inValid(val) || (!force && oRowIndex === rowIndex && oCellIndex === cellIndex) ||\n (!parentsUntil(e.target, literals.rowCell) && !parentsUntil(e.target, 'e-groupcaption')\n && !parentsUntil(e.target, 'e-recordpluscollapse') && !parentsUntil(e.target, 'e-recordplusexpand')\n && !parentsUntil(e.target, 'e-detailrowcollapse') && !parentsUntil(e.target, 'e-detailrowexpand')\n && !parentsUntil(e.target, 'e-templatecell'))) {\n return false;\n }\n this.matrix.select(rowIndex, cellIndex);\n };\n ContentFocus.prototype.getFocusInfo = function () {\n var info = {};\n var _a = this.matrix.current, _b = _a[0], rowIndex = _b === void 0 ? 0 : _b, _c = _a[1], cellIndex = _c === void 0 ? 0 : _c;\n this.matrix.current = [rowIndex, cellIndex];\n var row = this.getTable().rows[parseInt(rowIndex.toString(), 10)];\n info.element = !isNullOrUndefined(row) ? this.parent.editSettings.showAddNewRow && row.classList.contains('e-addedrow') ?\n (row.querySelectorAll('td:not(.e-editcell)'))[parseInt(cellIndex.toString(), 10)]\n : row.cells[parseInt(cellIndex.toString(), 10)] : null;\n if (!info.element) {\n return info;\n }\n info.elementToFocus = (!info.element.classList.contains('e-unboundcell') || (this.parent.editSettings.showAddNewRow &&\n info.element.classList.contains('e-unboundcell') && parentsUntil(info.element, 'e-addedrow'))) &&\n !info.element.classList.contains('e-detailcell') ? this.getFocusable(info.element) : info.element;\n info.elementToFocus = info.element.classList.contains('e-detailcell') && info.element.querySelector('.e-childgrid')\n ? info.element.querySelector('.e-childgrid') : info.elementToFocus;\n if (this.parent.editSettings.mode === 'Batch' && this.parent.isEdit && info.elementToFocus.tagName.toLowerCase() === 'input'\n && info.elementToFocus.classList.contains('e-dropdownlist')) {\n info.elementToFocus = info.elementToFocus.parentElement;\n }\n info.outline = true;\n info.uid = info.element.parentElement.getAttribute('data-uid');\n return info;\n };\n ContentFocus.prototype.getFocusable = function (element) {\n var query = 'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n var isTemplate = !isNullOrUndefined(closest(element, '.e-templatecell'));\n if (this.parent.isEdit) {\n var commandCellQuery = this.parent.editSettings.showAddNewRow && parentsUntil(element, 'e-addedrow') ?\n ', button:not(.e-hide)' : '';\n query = 'input:not([type=\"hidden\"]), select:not([aria-hidden=\"true\"]), textarea' + commandCellQuery;\n }\n var child = [].slice.call(element.querySelectorAll(query));\n /* Select the first focusable child element\n * if no child found then select the cell itself.\n * if Grid is in editable state, check for editable control inside child.\n */\n return child.length ? isTemplate && child.length > 1 ? this.target ? this.target : element : child[0] : element;\n };\n ContentFocus.prototype.selector = function (row, cell, isRowTemplate) {\n var types = [CellType.Expand, CellType.GroupCaption, CellType.CaptionSummary, CellType.GroupSummary];\n return ((row.isDataRow && cell.visible && (cell.isDataCell || cell.isTemplate))\n || (row.isDataRow && cell.cellType === CellType.DetailExpand && isNullOrUndefined(cell.visible))\n || (!row.isDataRow && types.indexOf(cell.cellType) > -1\n && !((cell.cellType === CellType.GroupSummary || cell.cellType === CellType.CaptionSummary)\n && !(cell.isDataCell && cell.visible)))\n || (cell.column && cell.visible && cell.column.type === 'checkbox')\n || (cell.cellType === CellType.CommandColumn)\n || (row.isDataRow && isRowTemplate))\n && !(row.edit === 'delete' && row.isDirty);\n };\n ContentFocus.prototype.nextRowFocusValidate = function (index) {\n var lastIndex = index;\n for (var i = index, len = this.matrix.rows; i <= len; i++) {\n if (this.matrix.matrix[parseInt(index.toString(), 10)].indexOf(1) === -1) {\n index = index + 1;\n }\n else {\n return index;\n }\n }\n this.lastIdxCell = true;\n return lastIndex;\n };\n ContentFocus.prototype.previousRowFocusValidate = function (index) {\n var firstIndex = index;\n for (var i = index, len = 0; i >= len; i--) {\n if (this.matrix.matrix[parseInt(index.toString(), 10)].indexOf(1) === -1) {\n index = index - 1;\n if (index < 0) {\n this.lastIdxCell = true;\n return firstIndex;\n }\n }\n else {\n return index;\n }\n }\n return firstIndex;\n };\n ContentFocus.prototype.jump = function (action, current) {\n this.lastIdxCell = false;\n var enterFrozen = this.parent.frozenRows !== 0 && action === 'shiftEnter';\n var headerSwap = (action === 'upArrow' || enterFrozen) && current[0] === 0;\n if (action === 'tab' && this.matrix.matrix.length &&\n current[1] === this.matrix.matrix[current[0]].lastIndexOf(1) && this.matrix.matrix.length - 1 !== current[0]) {\n this.matrix.current[0] = this.nextRowFocusValidate(this.matrix.current[0] + 1);\n this.matrix.current[1] = -1;\n }\n if (action === 'shiftTab' &&\n current[0] !== 0 && this.matrix.matrix[current[0]].indexOf(1) === current[1]) {\n this.matrix.current[0] = this.previousRowFocusValidate(this.matrix.current[0] - 1);\n this.matrix.current[1] = this.matrix.matrix[current[0]].length;\n }\n var isHeaderFocus = false;\n var row = parentsUntil(document.activeElement, 'e-addedrow') && this.parent.editSettings.showAddNewRow ?\n parentsUntil(document.activeElement, 'e-addedrow') : document.activeElement.parentElement;\n if ((this.parent.enableVirtualization || this.parent.infiniteScrollSettings.enableCache)\n && !isNullOrUndefined(row) && row.classList.contains(literals.row)) {\n var rowIndex = parseInt(row.getAttribute(literals.dataRowIndex), 10);\n isHeaderFocus = rowIndex > 0;\n }\n var info = {\n swap: !isHeaderFocus ? ((action === 'upArrow' || enterFrozen) && current[0] === 0) : false,\n toHeader: headerSwap\n };\n return info;\n };\n ContentFocus.prototype.getNextCurrent = function (previous, swap, active, action) {\n if (previous === void 0) { previous = []; }\n var current = [];\n if (action === 'rightArrow' || action === 'tab') {\n current[0] = previous[0];\n current[1] = -1;\n }\n if (action === 'downArrow' || action === 'enter') {\n current[0] = -1;\n current[1] = previous[1];\n }\n return current;\n };\n ContentFocus.prototype.generateRows = function (rows, optionals) {\n var _a;\n var matrix = optionals.matrix, handlerInstance = optionals.handlerInstance;\n var len = handlerInstance.matrix.matrix.length;\n var defaultLen = this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar' ? len + 1 : len;\n handlerInstance.matrix.matrix = handlerInstance.matrix.matrix.slice(0, defaultLen); //Header matrix update.\n handlerInstance.matrix.rows = defaultLen;\n (_a = handlerInstance.matrix.matrix).push.apply(_a, matrix);\n handlerInstance.matrix.rows += matrix.length;\n };\n ContentFocus.prototype.getInfo = function (e) {\n var info = this.getFocusInfo();\n var _a = this.matrix.current, rIndex = _a[0], cIndex = _a[1];\n var isData = info.element.classList.contains(literals.rowCell);\n var isSelectable = isData || (e && e.action !== 'enter' && (info.element.classList.contains('e-detailrowcollapse')\n || info.element.classList.contains('e-detailrowexpand')));\n // eslint-disable-next-line\n var _b = [Math.min(parseInt(info.element.parentElement.getAttribute(literals.dataRowIndex), 10), rIndex),\n Math.min(parseInt(info.element.getAttribute(literals.dataColIndex), 10), cIndex)], rowIndex = _b[0], cellIndex = _b[1];\n if (this.parent.allowGrouping && this.parent.groupSettings.enableLazyLoading && isData) {\n rowIndex = this.parent.getDataRows().indexOf(info.element.parentElement);\n }\n if (this.parent.enableVirtualization && this.parent.groupSettings.columns.length) {\n rowIndex = rIndex;\n cellIndex = cIndex;\n }\n if (this.parent.editSettings.showAddNewRow && this.parent.editSettings.newRowPosition === 'Top' &&\n !this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling && e && e.action === 'downArrow') {\n rowIndex++;\n }\n return { isContent: true, isDataCell: isData, indexes: [rowIndex, cellIndex], isSelectable: isSelectable };\n };\n ContentFocus.prototype.validator = function () {\n var table = this.getTable();\n return function (rowIndex, cellIndex, action) {\n if (!isNullOrUndefined(table.rows[parseInt(rowIndex.toString(), 10)])) {\n var cell = void 0;\n cellIndex = table.querySelector('.e-emptyrow') ? 0 : cellIndex;\n if (table.rows[parseInt(rowIndex.toString(), 10)].cells[0].classList.contains('e-editcell')) {\n cell = table.rows[parseInt(rowIndex.toString(), 10)].cells[0].querySelectorAll('td')[parseInt(cellIndex.toString(), 10)];\n }\n else {\n cell = table.rows[parseInt(rowIndex.toString(), 10)].cells[parseInt(cellIndex.toString(), 10)];\n }\n var isCellWidth = cell.getBoundingClientRect().width !== 0;\n if (action === 'enter' || action === 'shiftEnter') {\n return isCellWidth && cell.classList.contains(literals.rowCell);\n }\n if ((action === 'shiftUp' || action === 'shiftDown') && cell.classList.contains(literals.rowCell)) {\n return isCellWidth;\n }\n else if (action !== 'shiftUp' && action !== 'shiftDown') {\n return isCellWidth;\n }\n }\n return false;\n };\n };\n ContentFocus.prototype.shouldFocusChange = function (e) {\n var _a = this.matrix.current, _b = _a[0], rIndex = _b === void 0 ? -1 : _b, _c = _a[1], cIndex = _c === void 0 ? -1 : _c;\n if (rIndex < 0 || cIndex < 0) {\n return true;\n }\n var cell = getValue(rIndex + \".cells.\" + cIndex, this.getTable().rows);\n if (!cell) {\n return true;\n }\n return e.action === 'enter' || e.action === 'shiftEnter' ?\n cell.classList.contains(literals.rowCell) && !cell.classList.contains('e-unboundcell')\n || cell.classList.contains('e-editedbatchcell') && !cell.classList.contains('e-detailcell') : true;\n };\n ContentFocus.prototype.getGridSeletion = function () {\n return this.parent.allowSelection && this.parent.selectionSettings.allowColumnSelection;\n };\n return ContentFocus;\n}());\nexport { ContentFocus };\n/**\n * @hidden\n */\nvar HeaderFocus = /** @class */ (function (_super) {\n __extends(HeaderFocus, _super);\n function HeaderFocus(parent) {\n return _super.call(this, parent) || this;\n }\n HeaderFocus.prototype.getTable = function () {\n return (this.parent.getHeaderTable());\n };\n HeaderFocus.prototype.onClick = function (e) {\n var target = e.target;\n this.target = target;\n target = (target.classList.contains('e-headercell') ? target : closest(target, 'th'));\n if (!target && (this.parent.frozenRows !== 0 || ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling) &&\n this.parent.editSettings.showAddNewRow))) {\n target = (e.target.classList.contains(literals.rowCell) ? e.target :\n closest(e.target, 'td'));\n }\n if (e.target.classList.contains('e-columnheader') ||\n e.target.querySelector('.e-stackedheadercell')) {\n return false;\n }\n if (!target) {\n return;\n }\n var rowIdx = target.parentElement.rowIndex;\n if (this.parent.editSettings.showAddNewRow && parentsUntil(target, 'e-addedrow')) {\n rowIdx = parentsUntil(target, 'e-addedrow').rowIndex;\n }\n var _a = [rowIdx, target.cellIndex], rowIndex = _a[0], cellIndex = _a[1];\n var val = getValue(rowIndex + \".\" + cellIndex, this.matrix.matrix);\n if (this.matrix.inValid(val)) {\n return false;\n }\n this.matrix.select(rowIdx, target.cellIndex);\n };\n HeaderFocus.prototype.getFocusInfo = function () {\n var info = {};\n var _a = this.matrix.current, _b = _a[0], rowIndex = _b === void 0 ? 0 : _b, _c = _a[1], cellIndex = _c === void 0 ? 0 : _c;\n var row = this.getTable().rows[parseInt(rowIndex.toString(), 10)];\n info.element = !isNullOrUndefined(row) ? this.parent.editSettings.showAddNewRow && row.classList.contains('e-addedrow') ?\n (row.querySelectorAll('td:not(.e-editcell)'))[parseInt(cellIndex.toString(), 10)]\n : row.cells[parseInt(cellIndex.toString(), 10)] : null;\n if (!isNullOrUndefined(info.element)) {\n info.elementToFocus = this.getFocusable(info.element);\n info.outline = !info.element.classList.contains('e-filterbarcell');\n }\n return info;\n };\n HeaderFocus.prototype.selector = function (row, cell) {\n return (cell.visible && (cell.column.field !== undefined || cell.isTemplate || !isNullOrUndefined(cell.column.template)\n || !isNullOrUndefined(cell.column.commands))) || cell.column.type === 'checkbox' || cell.cellType === CellType.StackedHeader;\n };\n HeaderFocus.prototype.jump = function (action, current) {\n var enterFrozen = this.parent.frozenRows !== 0 && action === 'enter';\n var isLastCell;\n var lastRow;\n if (this.parent.enableHeaderFocus && action === 'tab') {\n lastRow = this.matrix.matrix.length - 1 === current[0];\n isLastCell = current[1] === this.matrix.matrix[current[0]].lastIndexOf(1);\n if (isLastCell) {\n if (!lastRow) {\n this.matrix.current[0] = this.matrix.current[0] + 1;\n }\n else {\n this.matrix.current[0] = 0;\n }\n this.matrix.current[1] = -1;\n }\n }\n return {\n swap: ((action === 'downArrow' || enterFrozen) && current[0] === this.matrix.matrix.length - 1) ||\n (action === 'tab' && lastRow && isLastCell)\n };\n };\n HeaderFocus.prototype.getNextCurrent = function (previous, swap, active, action) {\n if (previous === void 0) { previous = []; }\n var current1 = [];\n if (action === 'rightArrow' || (action === 'shiftRight' && this.getGridSeletion()) || action === 'tab') {\n current1[0] = previous[0];\n current1[1] = -1;\n }\n if (action === 'upArrow' || action === 'shiftEnter') {\n current1[0] = this.matrix.matrix.length;\n current1[1] = previous[1];\n }\n return current1;\n };\n HeaderFocus.prototype.generateRows = function (rows) {\n var length = this.matrix.matrix.length;\n if (this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar') {\n this.matrix.rows = ++this.matrix.rows;\n var cells = rows[0].cells;\n var incrementNumber = 0;\n for (var i = 0; i < cells.length; i++) {\n if (cells[parseInt(i.toString(), 10)].column && cells[parseInt(i.toString(), 10)].column.columns) {\n incrementNumber = this.checkFilterColumn(cells[parseInt(i.toString(), 10)].column.columns, length, incrementNumber);\n }\n else {\n this.matrix.set(length, incrementNumber, cells[parseInt(i.toString(), 10)].visible && cells[parseInt(i.toString(), 10)].column.allowFiltering !== false);\n incrementNumber++;\n }\n }\n }\n };\n HeaderFocus.prototype.checkFilterColumn = function (rowColumns, rowIndex, columnIndex) {\n var columns = rowColumns;\n var incrementNumber = columnIndex;\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].columns) {\n incrementNumber = this.checkFilterColumn(columns[parseInt(i.toString(), 10)].columns, rowIndex, incrementNumber);\n }\n else {\n this.matrix.set(rowIndex, incrementNumber, columns[parseInt(i.toString(), 10)].visible && columns[parseInt(i.toString(), 10)].allowFiltering !== false);\n incrementNumber++;\n }\n }\n return incrementNumber;\n };\n HeaderFocus.prototype.getInfo = function (e) {\n return extend(_super.prototype.getInfo.call(this, e), { isContent: false, isHeader: true });\n };\n HeaderFocus.prototype.validator = function () {\n return function () { return true; };\n };\n HeaderFocus.prototype.shouldFocusChange = function (e) {\n var _a = this.matrix.current, rowIndex = _a[0], columnIndex = _a[1];\n if (rowIndex < 0 || columnIndex < 0) {\n return true;\n }\n var cell = getValue(rowIndex + \".cells.\" + columnIndex, this.getTable().rows);\n if (!cell) {\n return true;\n }\n return e.action === 'enter' || e.action === 'altDownArrow' ? !cell.classList.contains('e-headercell') : true;\n };\n HeaderFocus.prototype.getHeaderType = function () {\n return 'HeaderFocus';\n };\n return HeaderFocus;\n}(ContentFocus));\nexport { HeaderFocus };\n/** @hidden */\nvar SearchBox = /** @class */ (function () {\n function SearchBox(searchBox, serviceLocator) {\n this.searchBox = searchBox;\n this.serviceLocator = serviceLocator;\n this.l10n = this.serviceLocator.getService('localization');\n }\n SearchBox.prototype.searchFocus = function (args) {\n args.target.parentElement.classList.add('e-input-focus');\n if (args.target.classList.contains('e-input') && args.target.classList.contains('e-search') && args.target.value) {\n var sIcon = args.target.parentElement.querySelector('.e-sicon');\n sIcon.classList.add('e-clear-icon');\n sIcon.setAttribute('title', this.l10n.getConstant('Clear'));\n (sIcon).style.cursor = 'pointer';\n }\n };\n SearchBox.prototype.searchBlur = function (args) {\n var relatedTarget = args.relatedTarget ? args.relatedTarget : null;\n if (relatedTarget && relatedTarget.classList.contains('e-sicon')) {\n if (relatedTarget.classList.contains('e-clear-icon')) {\n args.target.parentElement.classList.remove('e-input-focus');\n }\n }\n else {\n args.target.parentElement.classList.remove('e-input-focus');\n }\n if (args.target.classList.contains('e-search') && ((relatedTarget && !(relatedTarget.classList.contains('e-sicon e-clear-icon'))\n && !(relatedTarget.classList.contains('e-sicon'))) || isNullOrUndefined(relatedTarget))) {\n var sIcon = args.target.parentElement.querySelector('.e-sicon');\n sIcon.classList.remove('e-clear-icon');\n sIcon.removeAttribute('title');\n sIcon.style.cursor = 'default';\n }\n };\n SearchBox.prototype.wireEvent = function () {\n if (this.searchBox) {\n EventHandler.add(this.searchBox, 'focus', this.searchFocus, this);\n EventHandler.add(this.searchBox, 'blur', this.searchBlur, this);\n }\n };\n SearchBox.prototype.unWireEvent = function () {\n if (this.searchBox) {\n EventHandler.remove(this.searchBox, 'focus', this.searchFocus);\n EventHandler.remove(this.searchBox, 'blur', this.searchBlur);\n }\n };\n return SearchBox;\n}());\nexport { SearchBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the paging behavior of the Grid.\n */\nvar PageSettings = /** @class */ (function (_super) {\n __extends(PageSettings, _super);\n function PageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(12)\n ], PageSettings.prototype, \"pageSize\", void 0);\n __decorate([\n Property(8)\n ], PageSettings.prototype, \"pageCount\", void 0);\n __decorate([\n Property(1)\n ], PageSettings.prototype, \"currentPage\", void 0);\n __decorate([\n Property()\n ], PageSettings.prototype, \"totalRecordsCount\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"enableQueryString\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"pageSizes\", void 0);\n __decorate([\n Property(null)\n ], PageSettings.prototype, \"template\", void 0);\n return PageSettings;\n}(ChildProperty));\nexport { PageSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the column chooser behavior of the Grid.\n */\nvar ColumnChooserSettings = /** @class */ (function (_super) {\n __extends(ColumnChooserSettings, _super);\n function ColumnChooserSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('startsWith')\n ], ColumnChooserSettings.prototype, \"operator\", void 0);\n __decorate([\n Property(false)\n ], ColumnChooserSettings.prototype, \"ignoreAccent\", void 0);\n return ColumnChooserSettings;\n}(ChildProperty));\nexport { ColumnChooserSettings };\n","import { Browser, EventHandler, createElement } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, isUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { remove, closest, select } from '@syncfusion/ej2-base';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport { setCssInGridPopUp, getPosition, isGroupAdaptive, addRemoveActiveClasses, removeAddCboxClasses, getCellFromRow } from '../base/util';\nimport { getCellsByTableName, parentsUntil, getScrollBarWidth } from '../base/util';\nimport * as events from '../base/constant';\nimport { RenderType } from '../base/enum';\nimport { iterateExtend, setChecked, isComplexField, getObject } from '../base/util';\nimport { addRemoveEventListener } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * The `Selection` module is used to handle cell and row selection.\n */\nvar Selection = /** @class */ (function () {\n /**\n * Constructor for the Grid selection module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {SelectionSettings} selectionSettings - specifies the selectionsettings\n * @param {ServiceLocator} locator - specifies the ServiceLocator\n * @hidden\n */\n function Selection(parent, selectionSettings, locator) {\n //Internal letiables\n /**\n * @hidden\n */\n this.selectedRowIndexes = [];\n /**\n * @hidden\n */\n this.selectedRowCellIndexes = [];\n /**\n * @hidden\n */\n this.selectedRecords = [];\n /**\n * @hidden\n */\n this.preventFocus = false;\n /**\n * @hidden\n */\n this.selectedColumnsIndexes = [];\n this.checkBoxState = false;\n this.isMultiShiftRequest = false;\n this.isMultiCtrlRequest = false;\n this.isMultiCtrlRequestCell = false;\n this.enableSelectMultiTouch = false;\n this.clearRowCheck = false;\n this.selectRowCheck = false;\n this.selectedRowState = {};\n this.unSelectedRowState = {};\n this.totalRecordsCount = 0;\n this.chkAllCollec = [];\n this.isCheckedOnAdd = false;\n this.persistSelectedData = [];\n this.deSelectedData = [];\n this.isHdrSelectAllClicked = false;\n this.needColumnSelection = false;\n this.isCancelDeSelect = false;\n this.isPreventCellSelect = false;\n this.disableUI = false;\n this.isPersisted = false;\n this.cmdKeyPressed = false;\n this.cellselected = false;\n this.isMultiSelection = false;\n this.isAddRowsToSelection = false;\n this.initialRowSelection = false;\n this.isPrevRowSelection = false;\n this.isKeyAction = false;\n this.isRowDragSelected = false;\n this.isPartialSelection = false;\n this.rmtHdrChkbxClicked = false;\n this.isCheckboxReset = false;\n /**\n * @hidden\n */\n this.autoFillRLselection = true;\n this.bottom = '0 0 2px 0';\n this.top = '2px 0 0 0';\n /* eslint-disable */\n this.right_bottom = '0 2px 2px 0';\n this.bottom_left = '0 0 2px 2px';\n this.top_right = '2px 2px 0 0';\n this.top_left = '2px 0 0 2px';\n this.top_bottom = '2px 0 2px 0';\n this.top_right_bottom = '2px 2px 2px 0';\n this.top_bottom_left = '2px 0 2px 2px';\n this.top_right_left = '2px 2px 0 2px';\n this.right_bottom_left = '0 2px 2px 2px';\n this.all_border = '2px';\n this.parent = parent;\n this.selectionSettings = selectionSettings;\n this.factory = locator.getService('rendererFactory');\n this.focus = locator.getService('focus');\n this.addEventListener();\n this.wireEvents();\n }\n Selection.prototype.initializeSelection = function () {\n this.parent.log('selection_key_missing');\n this.render();\n };\n /**\n * The function used to trigger onActionBegin\n *\n * @param {Object} args - specifies the args\n * @param {string} type - specifies the type\n * @returns {void}\n * @hidden\n */\n Selection.prototype.onActionBegin = function (args, type) {\n this.parent.trigger(type, this.fDataUpdate(args));\n };\n Selection.prototype.fDataUpdate = function (args) {\n if (!this.isMultiSelection && (!isNullOrUndefined(args.cellIndex) || !isNullOrUndefined(args.rowIndex))) {\n var rowObj = this.getRowObj(isNullOrUndefined(args.rowIndex) ? isNullOrUndefined(args.cellIndex) ?\n this.currentIndex : args.cellIndex.rowIndex : args.rowIndex);\n args.foreignKeyData = rowObj.foreignKeyData;\n }\n return args;\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {Object} args - specifies the args\n * @param {string} type - specifies the type\n * @returns {void}\n * @hidden\n */\n Selection.prototype.onActionComplete = function (args, type) {\n this.parent.trigger(type, this.fDataUpdate(args));\n this.isMultiSelection = false;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Selection.prototype.getModuleName = function () {\n return 'selection';\n };\n /**\n * To destroy the selection\n *\n * @returns {void}\n * @hidden\n */\n Selection.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.hidePopUp();\n this.clearSelection();\n this.destroyAutoFillElements();\n this.removeEventListener();\n this.unWireEvents();\n EventHandler.remove(this.parent.getContent(), 'mousedown', this.mouseDownHandler);\n EventHandler.remove(this.parent.getHeaderContent(), 'mousedown', this.mouseDownHandler);\n };\n Selection.prototype.isEditing = function () {\n return (this.parent.editSettings.mode === 'Normal' || (this.parent.editSettings.mode === 'Batch' && this.parent.editModule &&\n this.parent.editModule.formObj && !this.parent.editModule.formObj.validate())) &&\n (this.parent.isEdit && !this.parent.editSettings.showAddNewRow) && !this.parent.isPersistSelection;\n };\n Selection.prototype.getCurrentBatchRecordChanges = function () {\n var gObj = this.parent;\n if (gObj.editSettings.mode === 'Batch' && gObj.editModule) {\n var currentRecords = iterateExtend(this.parent.getCurrentViewRecords());\n currentRecords = gObj.editSettings.newRowPosition === 'Bottom' ?\n currentRecords.concat(this.parent.editModule.getBatchChanges()[literals.addedRecords]) :\n this.parent.editModule.getBatchChanges()[literals.addedRecords].concat(currentRecords);\n var deletedRecords = this.parent.editModule.getBatchChanges()[literals.deletedRecords];\n var primaryKey = this.parent.getPrimaryKeyFieldNames()[0];\n for (var i = 0; i < (deletedRecords.length); i++) {\n for (var j = 0; j < currentRecords.length; j++) {\n if (deletedRecords[parseInt(i.toString(), 10)][\"\" + primaryKey] === currentRecords[parseInt(j.toString(), 10)][\"\" + primaryKey]) {\n currentRecords.splice(j, 1);\n break;\n }\n }\n }\n return currentRecords;\n }\n else if (this.parent.enableVirtualization && this.parent.groupSettings.columns.length && !this.parent.isPersistSelection) {\n var selectedGroupedData = gObj.getCurrentViewRecords().filter(function (col) { return col['key'] === undefined; });\n return selectedGroupedData;\n }\n else {\n return gObj.getCurrentViewRecords();\n }\n };\n /**\n * Selects a row by the given index.\n *\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @returns {void}\n */\n Selection.prototype.selectRow = function (index, isToggle) {\n if (this.selectedRowIndexes.length && this.selectionSettings.enableSimpleMultiRowSelection) {\n this.addRowsToSelection([index]);\n return;\n }\n var gObj = this.parent;\n var selectedRow = gObj.getRowByIndex(index);\n var rowObj = selectedRow && gObj.getRowObjectFromUID(selectedRow.getAttribute('data-uid'));\n if (this.isPartialSelection && rowObj && rowObj.isDataRow && !rowObj.isSelectable) {\n return;\n }\n var selectData;\n var isRemoved = false;\n if (gObj.enableVirtualization && index > -1) {\n var e = { selectedIndex: index, isAvailable: true };\n this.parent.notify(events.selectVirtualRow, e);\n if (selectedRow && (gObj.getRowObjectFromUID(selectedRow.getAttribute('data-uid')))) {\n selectData = gObj.getRowObjectFromUID(selectedRow.getAttribute('data-uid')).data;\n }\n else {\n if (e.isAvailable && !gObj.selectionSettings.persistSelection) {\n var prevSelectedData = this.parent.getSelectedRecords();\n if (prevSelectedData.length > 0) {\n this.clearRowSelection();\n }\n }\n return;\n }\n }\n else {\n selectData = this.getRowObj(index).data;\n }\n if (!this.isRowType() || !selectedRow || this.isEditing()) {\n // if (this.isEditing()) {\n // gObj.selectedRowIndex = index;\n // }\n return;\n }\n var isRowSelected = selectedRow.hasAttribute('aria-selected');\n this.activeTarget();\n isToggle = !isToggle ? isToggle :\n !this.selectedRowIndexes.length ? false :\n (this.selectedRowIndexes.length ? (this.isKeyAction && this.parent.isCheckBoxSelection ?\n false : index === this.selectedRowIndexes[this.selectedRowIndexes.length - 1]) : false);\n this.isKeyAction = false;\n var args;\n var can = 'cancel';\n if (!isToggle) {\n args = {\n data: selectData, rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest, row: selectedRow,\n previousRow: gObj.getRowByIndex(this.prevRowIndex),\n previousRowIndex: this.prevRowIndex, target: this.actualTarget, cancel: false, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked\n };\n this.parent.trigger(events.rowSelecting, this.fDataUpdate(args), this.rowSelectingCallBack(args, isToggle, index, selectData, isRemoved, isRowSelected, can));\n }\n else {\n this.rowDeselect(events.rowDeselecting, [rowObj.index], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], this.actualTarget);\n if (this.isCancelDeSelect) {\n return;\n }\n this.rowDeselect(events.rowDeselected, [rowObj.index], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], this.actualTarget, undefined, undefined, undefined);\n this.rowSelectingCallBack(args, isToggle, index, selectData, isRemoved, isRowSelected, can)(args);\n }\n };\n Selection.prototype.rowSelectingCallBack = function (args, isToggle, index, selectData, isRemoved, isRowSelected, can) {\n var _this = this;\n return function (args) {\n if (!isNullOrUndefined(args) && args[\"\" + can] === true) {\n _this.disableInteracted();\n return;\n }\n _this.index = index;\n _this.toggle = isToggle;\n _this.data = selectData;\n _this.removed = isRemoved;\n if (isRowSelected && _this.selectionSettings.persistSelection && !(_this.selectionSettings.checkboxMode === 'ResetOnRowClick')) {\n _this.clearSelectedRow(index);\n _this.selectRowCallBack();\n }\n else if (!isRowSelected && _this.selectionSettings.persistSelection &&\n _this.selectionSettings.checkboxMode !== 'ResetOnRowClick') {\n _this.selectRowCallBack();\n }\n if (_this.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n _this.isCheckboxReset = true;\n _this.clearSelection();\n }\n if (!_this.selectionSettings.persistSelection || _this.selectionSettings.checkboxMode === 'ResetOnRowClick' ||\n (!_this.parent.isCheckBoxSelection && _this.selectionSettings.persistSelection)) {\n _this.selectRowCheck = true;\n _this.clearRow();\n }\n };\n };\n Selection.prototype.selectRowCallBack = function () {\n var gObj = this.parent;\n var args;\n var index = this.index;\n var isToggle = this.toggle;\n var selectData = this.data;\n var isRemoved = this.removed;\n var selectedRow = gObj.getRowByIndex(index);\n if (!isToggle && !isRemoved) {\n if (this.selectedRowIndexes.indexOf(index) <= -1) {\n this.updateRowSelection(selectedRow, index);\n }\n this.selectRowIndex(index);\n }\n if (!isToggle) {\n args = {\n data: selectData, rowIndex: index,\n row: selectedRow, previousRow: gObj.getRowByIndex(this.prevRowIndex),\n previousRowIndex: this.prevRowIndex, target: this.actualTarget, isInteracted: this.isInteracted,\n isHeaderCheckBoxClicked: this.isHeaderCheckboxClicked, rowIndexes: index\n };\n this.onActionComplete(args, events.rowSelected);\n }\n this.isInteracted = false;\n this.updateRowProps(index);\n };\n /**\n * Selects a range of rows from start and end row indexes.\n *\n * @param {number} startIndex - Specifies the start row index.\n * @param {number} endIndex - Specifies the end row index.\n * @returns {void}\n */\n Selection.prototype.selectRowsByRange = function (startIndex, endIndex) {\n this.selectRows(this.getCollectionFromIndexes(startIndex, endIndex));\n this.selectRowIndex(endIndex);\n };\n Selection.prototype.selectedDataUpdate = function (selectedData, foreignKeyData, selectedRows, rowIndexes, selectableRowIndex) {\n for (var i = 0, len = rowIndexes.length; i < len; i++) {\n var currentRow = this.parent.getDataRows()[rowIndexes[parseInt(i.toString(), 10)]];\n if (this.parent.enableVirtualization) {\n currentRow = this.parent.getRowByIndex(rowIndexes[parseInt(i.toString(), 10)]);\n }\n var rowObj = this.getRowObj(currentRow);\n if (rowObj && rowObj.isDataRow && rowObj.isSelectable) {\n selectedData.push(rowObj.data);\n selectedRows.push(currentRow);\n foreignKeyData.push(rowObj.foreignKeyData);\n }\n else {\n if (this.isPartialSelection && selectableRowIndex) {\n selectableRowIndex.splice(selectableRowIndex.indexOf(rowIndexes[parseInt(i.toString(), 10)]), 1);\n }\n }\n }\n };\n /**\n * Selects a collection of rows by index.\n *\n * @param {number[]} rowIndexes - Specifies an array of row indexes.\n * @returns {void}\n */\n Selection.prototype.selectRows = function (rowIndexes) {\n var _this = this;\n var gObj = this.parent;\n var selectableRowIndex = rowIndexes.slice();\n var rowIndex = !this.isSingleSel() ? rowIndexes[0] : rowIndexes[rowIndexes.length - 1];\n this.isMultiSelection = true;\n var selectedRows = [];\n var foreignKeyData = [];\n var can = 'cancel';\n var selectedData = [];\n if (!this.isRowType() || this.isEditing()) {\n return;\n }\n this.selectedDataUpdate(selectedData, foreignKeyData, selectedRows, rowIndexes, selectableRowIndex);\n this.activeTarget();\n var args = {\n cancel: false,\n rowIndexes: selectableRowIndex, row: selectedRows, rowIndex: rowIndex, target: this.actualTarget,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n isInteracted: this.isInteracted, isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n data: selectedData, isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, foreignKeyData: foreignKeyData\n };\n this.parent.trigger(events.rowSelecting, this.fDataUpdate(args), function (args) {\n if (!isNullOrUndefined(args) && args[\"\" + can] === true) {\n _this.disableInteracted();\n return;\n }\n if (!(gObj.allowRowDragAndDrop && _this.isDragged && _this.selectionSettings.persistSelection)) {\n _this.clearRow();\n }\n _this.selectRowIndex(selectableRowIndex.slice(-1)[0]);\n var selectRowFn = function (index, preventFocus) {\n _this.updateRowSelection(gObj.getRowByIndex(index), index, preventFocus);\n _this.updateRowProps(rowIndex);\n };\n if (!_this.isSingleSel()) {\n for (var _i = 0, selectableRowIndex_1 = selectableRowIndex; _i < selectableRowIndex_1.length; _i++) {\n var rowIdx = selectableRowIndex_1[_i];\n selectRowFn(rowIdx, gObj.enableVirtualization ? true : false);\n }\n }\n else {\n selectRowFn(rowIndex);\n }\n args = {\n rowIndexes: selectableRowIndex, row: selectedRows, rowIndex: rowIndex, target: _this.actualTarget,\n prevRow: gObj.getRows()[_this.prevRowIndex], previousRowIndex: _this.prevRowIndex,\n data: _this.getSelectedRecords(), isInteracted: _this.isInteracted,\n isHeaderCheckboxClicked: _this.isHeaderCheckboxClicked, foreignKeyData: foreignKeyData\n };\n if (_this.isRowSelected) {\n _this.onActionComplete(args, events.rowSelected);\n }\n _this.isInteracted = false;\n });\n };\n /**\n * Select rows with existing row selection by passing row indexes.\n *\n * @param {number} rowIndexes - Specifies the row indexes.\n * @returns {void}\n * @hidden\n */\n Selection.prototype.addRowsToSelection = function (rowIndexes) {\n var gObj = this.parent;\n var can = 'cancel';\n var target = this.target;\n this.isMultiSelection = true;\n var selectedRows = [];\n var foreignKeyData = [];\n var selectedData = [];\n var indexes = gObj.getSelectedRowIndexes().concat(rowIndexes);\n var selectedRow = !this.isSingleSel() ? gObj.getRowByIndex(rowIndexes[0]) :\n gObj.getRowByIndex(rowIndexes[rowIndexes.length - 1]);\n if ((!this.isRowType() || this.isEditing()) && !this.selectionSettings.checkboxOnly) {\n return;\n }\n var args;\n var checkboxColumn = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (this.isMultiCtrlRequest && !checkboxColumn.length) {\n this.selectedDataUpdate(selectedData, foreignKeyData, selectedRows, indexes);\n }\n for (var _i = 0, rowIndexes_1 = rowIndexes; _i < rowIndexes_1.length; _i++) {\n var rowIndex = rowIndexes_1[_i];\n var rowObj = this.getRowObj(rowIndex);\n var isUnSelected = this.selectedRowIndexes.indexOf(rowIndex) > -1;\n if (this.isPartialSelection && rowObj && rowObj.isDataRow && !rowObj.isSelectable) {\n continue;\n }\n this.selectRowIndex(rowIndex);\n if (isUnSelected && ((checkboxColumn.length ? true : this.selectionSettings.enableToggle) || this.isMultiCtrlRequest)) {\n this.isAddRowsToSelection = true;\n this.rowDeselect(events.rowDeselecting, [rowIndex], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], target);\n if (this.isCancelDeSelect) {\n return;\n }\n this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(rowIndex), 1);\n this.selectedRecords.splice(this.selectedRecords.indexOf(selectedRow), 1);\n this.selectRowIndex(this.selectedRowIndexes.length ? this.selectedRowIndexes[this.selectedRowIndexes.length - 1] : -1);\n selectedRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedRow, false, null, 'e-selectionbackground', 'e-active');\n this.rowDeselect(events.rowDeselected, [rowIndex], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], target, undefined, undefined, undefined);\n this.isInteracted = false;\n this.isMultiSelection = false;\n this.isAddRowsToSelection = false;\n this.isHdrSelectAllClicked = false;\n }\n else {\n this.activeTarget();\n args = {\n cancel: false,\n data: selectedData.length ? selectedData : rowObj.data, rowIndex: rowIndex, row: selectedRows.length ? selectedRows :\n selectedRow, target: this.actualTarget, prevRow: gObj.getRows()[this.prevRowIndex],\n previousRowIndex: this.prevRowIndex, isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n foreignKeyData: foreignKeyData.length ? foreignKeyData : rowObj.foreignKeyData, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, rowIndexes: indexes\n };\n this.parent.trigger(events.rowSelecting, this.fDataUpdate(args));\n if (!isNullOrUndefined(args) && args[\"\" + can] === true) {\n this.disableInteracted();\n return;\n }\n if (this.isSingleSel()) {\n this.clearRow();\n }\n this.updateRowSelection(selectedRow, rowIndex);\n }\n if (!isUnSelected) {\n args = {\n data: selectedData.length ? selectedData : rowObj.data, rowIndex: rowIndex, row: selectedRows.length ? selectedRows :\n selectedRow, target: this.actualTarget, prevRow: gObj.getRows()[this.prevRowIndex],\n previousRowIndex: this.prevRowIndex, foreignKeyData: foreignKeyData.length ? foreignKeyData : rowObj.foreignKeyData,\n isInteracted: this.isInteracted, isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, rowIndexes: indexes\n };\n this.onActionComplete(args, events.rowSelected);\n }\n this.isInteracted = false;\n this.updateRowProps(rowIndex);\n if (this.isSingleSel()) {\n break;\n }\n }\n };\n Selection.prototype.getCollectionFromIndexes = function (startIndex, endIndex) {\n var indexes = [];\n // eslint-disable-next-line prefer-const\n var _a = (startIndex <= endIndex) ?\n { i: startIndex, max: endIndex } : { i: endIndex, max: startIndex }, i = _a.i, max = _a.max;\n for (; i <= max; i++) {\n indexes.push(i);\n }\n if (startIndex > endIndex) {\n indexes.reverse();\n }\n return indexes;\n };\n Selection.prototype.clearRow = function () {\n this.clearRowCheck = true;\n this.clearRowSelection();\n };\n Selection.prototype.clearRowCallBack = function () {\n if (this.isCancelDeSelect && this.parent.checkAllRows !== 'Check') {\n return;\n }\n this.selectedRowIndexes = [];\n this.selectedRecords = [];\n this.selectRowIndex(-1);\n if (this.isSingleSel() && this.parent.isPersistSelection) {\n this.selectedRowState = {};\n }\n };\n Selection.prototype.clearSelectedRow = function (index) {\n if (this.toggle) {\n var selectedEle = this.parent.getRowByIndex(index);\n if (!this.disableUI) {\n selectedEle.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedEle, false, true, 'e-selectionbackground', 'e-active');\n }\n this.removed = true;\n this.updatePersistCollection(selectedEle, false);\n this.updateCheckBoxes(selectedEle);\n this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(index), 1);\n this.selectedRecords.splice(this.selectedRecords.indexOf(this.parent.getRowByIndex(index)), 1);\n }\n };\n Selection.prototype.updateRowProps = function (startIndex) {\n this.prevRowIndex = startIndex;\n this.isRowSelected = this.selectedRowIndexes.length && true;\n };\n Selection.prototype.getPkValue = function (pkField, data) {\n return pkField ? isComplexField(pkField) ? getObject(pkField, data) : data[\"\" + pkField] : data[\"\" + pkField];\n };\n Selection.prototype.updatePersistCollection = function (selectedRow, chkState) {\n var _this = this;\n if ((this.parent.isPersistSelection || this.parent.selectionSettings.persistSelection &&\n this.parent.getPrimaryKeyFieldNames().length > 0) && !isNullOrUndefined(selectedRow)) {\n if (!this.parent.isPersistSelection) {\n this.ensureCheckboxFieldSelection();\n }\n var rowObj = this.getRowObj(selectedRow);\n var pKey_1 = rowObj.data ? this.getPkValue(this.primaryKey, rowObj.data) : null;\n if (pKey_1 === null) {\n return;\n }\n rowObj.isSelected = chkState;\n if ((chkState && !this.isPartialSelection) || (this.isPartialSelection && rowObj.isSelectable && rowObj.isSelected)) {\n this.selectedRowState[\"\" + pKey_1] = chkState;\n delete (this.unSelectedRowState[\"\" + pKey_1]);\n if (!this.persistSelectedData.some(function (data) { return _this.getPkValue(_this.primaryKey, data) === pKey_1; })) {\n this.persistSelectedData.push(rowObj.data);\n }\n }\n else {\n this.updatePersistDelete(pKey_1);\n }\n }\n };\n Selection.prototype.updatePersistDelete = function (pKey, isPartialSelection) {\n var _this = this;\n delete (this.selectedRowState[\"\" + pKey]);\n if (this.rmtHdrChkbxClicked) {\n this.unSelectedRowState[\"\" + pKey] = true;\n }\n var index;\n var isPresent = this.persistSelectedData.some(function (data, i) {\n index = i;\n return _this.getPkValue(_this.primaryKey, data) === pKey;\n });\n if (isPresent) {\n this.persistSelectedData.splice(index, 1);\n if (isPartialSelection) {\n this.parent.partialSelectedRecords.splice(index, 1);\n }\n }\n };\n Selection.prototype.updateCheckBoxes = function (row, chkState, rowIndex) {\n if (!isNullOrUndefined(row)) {\n var chkBox = row.querySelector('.e-checkselect');\n if (!isNullOrUndefined(chkBox)) {\n removeAddCboxClasses(chkBox.nextElementSibling, chkState);\n setChecked(chkBox, chkState);\n if (isNullOrUndefined(this.checkedTarget) || (!isNullOrUndefined(this.checkedTarget)\n && !this.checkedTarget.classList.contains('e-checkselectall'))) {\n this.setCheckAllState(rowIndex);\n }\n }\n }\n };\n Selection.prototype.updateRowSelection = function (selectedRow, startIndex, preventFocus) {\n if (!selectedRow) {\n return;\n }\n if (this.selectedRowIndexes.indexOf(startIndex) === -1) {\n this.selectedRowIndexes.push(startIndex);\n this.selectedRecords.push(selectedRow);\n }\n selectedRow.setAttribute('aria-selected', 'true');\n this.updatePersistCollection(selectedRow, true);\n this.updateCheckBoxes(selectedRow, true);\n this.addRemoveClassesForRow(selectedRow, true, null, 'e-selectionbackground', 'e-active');\n if (!this.preventFocus) {\n var target = this.focus.getPrevIndexes().cellIndex ?\n selectedRow.cells[this.focus.getPrevIndexes().cellIndex] :\n selectedRow.querySelector('.e-selectionbackground:not(.e-hide):not(.e-detailrowcollapse):not(.e-detailrowexpand)');\n if (this.parent.contextMenuModule && this.mouseButton === 2) {\n target = this.parent.contextMenuModule.cell;\n }\n if (!target || preventFocus) {\n return;\n }\n this.focus.onClick({ target: target }, true);\n }\n };\n /**\n * Deselects the currently selected rows and cells.\n *\n * @returns {void}\n */\n Selection.prototype.clearSelection = function () {\n this.checkSelectAllClicked = true;\n if (this.selectionSettings.persistSelection && this.persistSelectedData.length) {\n this.deSelectedData = iterateExtend(this.persistSelectedData);\n }\n if (!this.parent.isPersistSelection || (this.parent.isPersistSelection && !this.parent.isEdit) ||\n (!isNullOrUndefined(this.checkedTarget) && this.checkedTarget.classList.contains('e-checkselectall'))) {\n var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');\n if (span.classList.contains('e-rowselect')) {\n span.classList.remove('e-spanclicked');\n }\n if (this.parent.isPersistSelection) {\n this.persistSelectedData = [];\n this.selectedRowState = {};\n }\n this.clearRowSelection();\n this.clearCellSelection();\n this.clearColumnSelection();\n this.prevRowIndex = undefined;\n this.prevCIdxs = undefined;\n this.prevECIdxs = undefined;\n this.enableSelectMultiTouch = false;\n this.isInteracted = false;\n this.checkSelectAllClicked = false;\n this.isHdrSelectAllClicked = false;\n }\n };\n /**\n * Deselects the currently selected rows.\n *\n * @returns {void}\n */\n Selection.prototype.clearRowSelection = function () {\n var _this = this;\n if (this.isRowSelected) {\n var rows_1 = this.parent.getDataRows();\n var data_1 = [];\n var row_1 = [];\n var rowIndex_1 = [];\n var foreignKeyData_1 = [];\n var target_1 = this.target;\n for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {\n var currentRow = this.parent.editSettings.mode === 'Batch' ?\n this.parent.getRows()[this.selectedRowIndexes[parseInt(i.toString(), 10)]]\n : this.parent.getDataRows()[this.selectedRowIndexes[parseInt(i.toString(), 10)]];\n var rowObj = this.getRowObj(currentRow);\n if (rowObj) {\n data_1.push(rowObj.data);\n row_1.push(currentRow);\n rowIndex_1.push(this.selectedRowIndexes[parseInt(i.toString(), 10)]);\n foreignKeyData_1.push(rowObj.foreignKeyData);\n }\n }\n if (this.selectionSettings.persistSelection && this.selectionSettings.checkboxMode !== 'ResetOnRowClick') {\n this.isRowClicked = this.checkSelectAllClicked ? true : false;\n }\n this.rowDeselect(events.rowDeselecting, rowIndex_1, data_1, row_1, foreignKeyData_1, target_1, null, function () {\n if (_this.isCancelDeSelect && (_this.isRowClicked || _this.checkSelectAllClicked || (_this.isInteracted &&\n !_this.parent.isPersistSelection))) {\n if (_this.parent.isPersistSelection) {\n if (_this.getCheckAllStatus(_this.parent.element.querySelector('.e-checkselectall')) === 'Intermediate') {\n for (var i = 0; i < _this.selectedRecords.length; i++) {\n _this.updatePersistCollection(_this.selectedRecords[parseInt(i.toString(), 10)], true);\n }\n }\n else {\n _this.parent.checkAllRows = 'Check';\n _this.updatePersistSelectedData(true);\n }\n }\n if (_this.clearRowCheck) {\n _this.clearRowCallBack();\n _this.clearRowCheck = false;\n if (_this.selectRowCheck) {\n _this.selectRowCallBack();\n _this.selectRowCheck = false;\n }\n }\n return;\n }\n var element = [].slice.call(rows_1.filter(function (record) { return record.hasAttribute('aria-selected'); }));\n for (var j = 0; j < element.length; j++) {\n if (!_this.disableUI) {\n element[parseInt(j.toString(), 10)].removeAttribute('aria-selected');\n _this.addRemoveClassesForRow(element[parseInt(j.toString(), 10)], false, true, 'e-selectionbackground', 'e-active');\n }\n // tslint:disable-next-line:align\n if (!_this.isPrevRowSelection) {\n _this.updatePersistCollection(element[parseInt(j.toString(), 10)], false);\n }\n _this.updateCheckBoxes(element[parseInt(j.toString(), 10)]);\n }\n _this.selectedRowIndexes = [];\n _this.selectedRecords = [];\n _this.isRowSelected = false;\n _this.selectRowIndex(-1);\n _this.isPrevRowSelection = false;\n _this.rowDeselect(events.rowDeselected, rowIndex_1, data_1, row_1, foreignKeyData_1, target_1, null, undefined, null);\n if (_this.clearRowCheck) {\n _this.clearRowCallBack();\n _this.clearRowCheck = false;\n if (_this.selectRowCheck) {\n _this.selectRowCallBack();\n _this.selectRowCheck = false;\n }\n }\n }, null);\n }\n else {\n if (this.clearRowCheck) {\n this.clearRowCallBack();\n this.clearRowCheck = false;\n if (this.selectRowCheck) {\n this.selectRowCallBack();\n this.selectRowCheck = false;\n }\n }\n }\n };\n Selection.prototype.rowDeselect = function (type, rowIndex, data, row, \n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n foreignKeyData, target, mRow, rowDeselectCallBack, frozenRightRow) {\n var _this = this;\n if ((this.selectionSettings.persistSelection && (this.isRowClicked || this.deSelectedData.length || this.checkSelectAllClicked || (this.focus['activeKey'] &&\n this.focus.currentInfo.element.classList.contains('e-gridchkbox') && this.focus['activeKey'] === 'space'))) ||\n !this.selectionSettings.persistSelection) {\n var cancl_1 = 'cancel';\n var isSingleDeSel = rowIndex.length === 1 && this.deSelectedData.length === 1;\n var rowDeselectObj = {\n rowIndex: rowIndex[0], data: this.selectionSettings.persistSelection && (this.parent.checkAllRows === 'Uncheck' &&\n !isSingleDeSel) && this.selectionSettings.checkboxMode !== 'ResetOnRowClick' ? this.deSelectedData : data,\n foreignKeyData: foreignKeyData, cancel: false, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked\n };\n if (type === 'rowDeselected') {\n delete rowDeselectObj.cancel;\n }\n var rowInString = 'row';\n var target_2 = 'target';\n var rowidx = 'rowIndex';\n var rowidxex = 'rowIndexes';\n var dataTxt = 'data';\n var foreignKey = 'foreignKeyData';\n rowDeselectObj[\"\" + rowInString] = row;\n rowDeselectObj[\"\" + target_2] = this.actualTarget;\n var isHeaderCheckBxClick = this.actualTarget && !isNullOrUndefined(closest(this.actualTarget, 'thead'));\n if (isHeaderCheckBxClick || rowIndex.length > 1) {\n rowDeselectObj[\"\" + rowidx] = rowIndex[0];\n rowDeselectObj[\"\" + rowidxex] = rowIndex;\n }\n else if (rowIndex.length === 1) {\n rowDeselectObj[\"\" + dataTxt] = rowDeselectObj[\"\" + dataTxt][0];\n rowDeselectObj[\"\" + rowInString] = rowDeselectObj[\"\" + rowInString][0];\n rowDeselectObj[\"\" + foreignKey] = rowDeselectObj[\"\" + foreignKey][0];\n if (this.isAddRowsToSelection) {\n rowDeselectObj[\"\" + rowidxex] = rowIndex;\n }\n }\n this.parent.trigger(type, rowDeselectObj, function (args) {\n _this.isCancelDeSelect = args[\"\" + cancl_1];\n if (!_this.isCancelDeSelect || (!_this.isRowClicked && !_this.isInteracted && _this.deSelectedData.length < 0 && !_this.checkSelectAllClicked)) {\n _this.updatePersistCollection(row[0], false);\n _this.updateCheckBoxes(row[0], undefined, rowIndex[0]);\n }\n if (rowDeselectCallBack !== undefined) {\n rowDeselectCallBack();\n }\n });\n }\n else if (this.selectionSettings.persistSelection && !this.isInteracted) {\n if (rowDeselectCallBack !== undefined) {\n rowDeselectCallBack();\n }\n }\n };\n Selection.prototype.getRowObj = function (row) {\n if (row === void 0) { row = this.currentIndex; }\n if (isNullOrUndefined(row)) {\n return {};\n }\n if (typeof row === 'number') {\n row = this.parent.getRowByIndex(row);\n }\n if (row) {\n return this.parent.getRowObjectFromUID(row.getAttribute('data-uid')) || {};\n }\n return {};\n };\n /**\n * Selects a cell by the given index.\n *\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @returns {void}\n */\n Selection.prototype.selectCell = function (cellIndex, isToggle) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var args;\n var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n this.currentIndex = cellIndex.rowIndex;\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (!this.isCellType() || !selectedCell || this.isEditing()) {\n return;\n }\n var isCellSelected = selectedCell.classList.contains('e-cellselectionbackground');\n isToggle = !isToggle ? isToggle : (!isUndefined(this.prevCIdxs) &&\n cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&\n isCellSelected);\n if (!isToggle) {\n args = {\n data: selectedData, cellIndex: cellIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n previousRowCell: this.prevECIdxs ?\n this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined,\n cancel: false\n };\n var currentCell = 'currentCell';\n args[\"\" + currentCell] = selectedCell;\n var previousRowCellIndex = 'previousRowCellIndex';\n args[\"\" + previousRowCellIndex] = this.prevECIdxs;\n this.parent.trigger(events.cellSelecting, this.fDataUpdate(args), this.successCallBack(args, isToggle, cellIndex, selectedCell, selectedData));\n this.cellselected = true;\n }\n else {\n this.successCallBack(args, isToggle, cellIndex, selectedCell, selectedData)(args);\n }\n };\n Selection.prototype.successCallBack = function (cellSelectingArgs, isToggle, cellIndex, selectedCell, selectedData) {\n var _this = this;\n return function (cellSelectingArgs) {\n var cncl = 'cancel';\n var currentCell = 'currentCell';\n if (!isNullOrUndefined(cellSelectingArgs) && cellSelectingArgs[\"\" + cncl] === true) {\n return;\n }\n if (!isToggle) {\n cellSelectingArgs[\"\" + currentCell] = cellSelectingArgs[\"\" + currentCell] ? cellSelectingArgs[\"\" + currentCell] : selectedCell;\n }\n _this.clearCell();\n if (!isToggle) {\n _this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);\n }\n if (!isToggle) {\n var args = {\n data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,\n selectedRowCellIndex: _this.selectedRowCellIndexes,\n previousRowCell: _this.prevECIdxs ?\n _this.getCellIndex(_this.prevECIdxs.rowIndex, _this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n args[\"\" + previousRowCellIndex] = _this.prevECIdxs;\n _this.updateCellProps(cellIndex, cellIndex);\n _this.onActionComplete(args, events.cellSelected);\n }\n };\n };\n Selection.prototype.getCellIndex = function (rIdx, cIdx) {\n return this.parent.getCellFromIndex(rIdx, cIdx);\n };\n /**\n * Selects a range of cells from start and end indexes.\n *\n * @param {IIndex} startIndex - Specifies the row and column's start index.\n * @param {IIndex} endIndex - Specifies the row and column's end index.\n * @returns {void}\n */\n Selection.prototype.selectCellsByRange = function (startIndex, endIndex) {\n var _this = this;\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.parent.isSpan ? getCellFromRow(this.parent, startIndex.rowIndex, startIndex.cellIndex) :\n gObj.getCellFromIndex(startIndex.rowIndex, startIndex.cellIndex);\n var min;\n var max;\n var stIndex = startIndex;\n var edIndex = endIndex = endIndex ? endIndex : startIndex;\n var cellIndexes;\n this.currentIndex = startIndex.rowIndex;\n var cncl = 'cancel';\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n var args = {\n data: selectedData, cellIndex: startIndex, currentCell: selectedCell,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n args[\"\" + previousRowCellIndex] = this.prevECIdxs;\n this.parent.trigger(events.cellSelecting, this.fDataUpdate(args), function (cellSelectingArgs) {\n if (!isNullOrUndefined(cellSelectingArgs) && cellSelectingArgs[\"\" + cncl] === true) {\n return;\n }\n _this.clearCell();\n if (startIndex.rowIndex > endIndex.rowIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex.rowIndex; i <= endIndex.rowIndex; i++) {\n if (_this.selectionSettings.cellSelectionMode.indexOf('Box') < 0) {\n min = i === startIndex.rowIndex ? (startIndex.cellIndex) : 0;\n max = i === endIndex.rowIndex ? (endIndex.cellIndex) : _this.getLastColIndex(i);\n }\n else {\n min = startIndex.cellIndex;\n max = endIndex.cellIndex;\n }\n cellIndexes = [];\n for (var j = min < max ? min : max, len = min > max ? min : max; j <= len; j++) {\n selectedCell = _this.parent.isSpan ? getCellFromRow(gObj, i, j) : gObj.getCellFromIndex(i, j);\n if (!selectedCell) {\n continue;\n }\n cellIndexes.push(j);\n _this.updateCellSelection(selectedCell);\n _this.addAttribute(selectedCell);\n }\n _this.selectedRowCellIndexes.push({ rowIndex: i, cellIndexes: cellIndexes });\n }\n var cellSelectedArgs = {\n data: selectedData, cellIndex: edIndex, currentCell: gObj.getCellFromIndex(edIndex.rowIndex, edIndex.cellIndex),\n selectedRowCellIndex: _this.selectedRowCellIndexes,\n previousRowCell: _this.prevECIdxs ? _this.getCellIndex(_this.prevECIdxs.rowIndex, _this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n cellSelectedArgs[\"\" + previousRowCellIndex] = _this.prevECIdxs;\n if (!_this.isDragged) {\n _this.onActionComplete(cellSelectedArgs, events.cellSelected);\n _this.cellselected = true;\n }\n _this.updateCellProps(stIndex, edIndex);\n });\n };\n /**\n * Selects a collection of cells by row and column indexes.\n *\n * @param {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.\n * @returns {void}\n */\n Selection.prototype.selectCells = function (rowCellIndexes) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = gObj.getCellFromIndex(rowCellIndexes[0].rowIndex, rowCellIndexes[0].cellIndexes[0]);\n this.currentIndex = rowCellIndexes[0].rowIndex;\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n var cellSelectArgs = {\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n cellSelectArgs[\"\" + previousRowCellIndex] = this.prevECIdxs;\n this.onActionBegin(cellSelectArgs, events.cellSelecting);\n for (var i = 0, len = rowCellIndexes.length; i < len; i++) {\n for (var j = 0, cellLen = rowCellIndexes[parseInt(i.toString(), 10)].cellIndexes.length; j < cellLen; j++) {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[parseInt(i.toString(), 10)].rowIndex, rowCellIndexes[parseInt(i.toString(), 10)].cellIndexes[parseInt(j.toString(), 10)]);\n if (!selectedCell) {\n continue;\n }\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n this.addRowCellIndex({ rowIndex: rowCellIndexes[parseInt(i.toString(), 10)].rowIndex,\n cellIndex: rowCellIndexes[parseInt(i.toString(), 10)].cellIndexes[parseInt(j.toString(), 10)] });\n }\n }\n this.updateCellProps({ rowIndex: rowCellIndexes[0].rowIndex, cellIndex: rowCellIndexes[0].cellIndexes[0] }, { rowIndex: rowCellIndexes[0].rowIndex, cellIndex: rowCellIndexes[0].cellIndexes[0] });\n var cellSelectedArgs = {\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n currentCell: selectedCell, selectedRowCellIndex: this.selectedRowCellIndexes,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n var prvRowCellIndex = 'previousRowCellIndex';\n cellSelectedArgs[\"\" + prvRowCellIndex] = this.prevECIdxs;\n this.onActionComplete(cellSelectedArgs, events.cellSelected);\n };\n /**\n * Select cells with existing cell selection by passing row and column index.\n *\n * @param {IIndex} cellIndexes - Defines the collection of row and column index.\n * @returns {void}\n * @hidden\n */\n Selection.prototype.addCellsToSelection = function (cellIndexes) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell;\n var index;\n this.currentIndex = cellIndexes[0].rowIndex;\n var cncl = 'cancel';\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n this.hideAutoFill();\n var rowObj;\n rowObj = gObj.getRowsObject()[cellIndexes[0].rowIndex];\n if (gObj.groupSettings.columns.length > 0) {\n rowObj = gObj.getRowObjectFromUID(this.target.parentElement.getAttribute('data-uid'));\n }\n var foreignKeyData = [];\n for (var _i = 0, cellIndexes_1 = cellIndexes; _i < cellIndexes_1.length; _i++) {\n var cellIndex = cellIndexes_1[_i];\n for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {\n if (this.selectedRowCellIndexes[parseInt(i.toString(), 10)].rowIndex === cellIndex.rowIndex) {\n index = i;\n break;\n }\n }\n selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n var idx = cellIndex.cellIndex;\n if (gObj.groupSettings.columns.length > 0) {\n foreignKeyData.push(rowObj.cells[idx + gObj.groupSettings.columns.length].foreignKeyData);\n }\n else {\n foreignKeyData.push(rowObj.cells[parseInt(idx.toString(), 10)].foreignKeyData);\n }\n var args = {\n cancel: false, data: selectedData, cellIndex: cellIndexes[0],\n isShiftPressed: this.isMultiShiftRequest,\n currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,\n previousRowCell: this.prevECIdxs ?\n gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n var prvRowCellIndex = 'previousRowCellIndex';\n args[\"\" + prvRowCellIndex] = this.prevECIdxs;\n var isUnSelected = index > -1;\n if (isUnSelected) {\n var selectedCellIdx = this.selectedRowCellIndexes[parseInt(index.toString(), 10)].cellIndexes;\n if (selectedCellIdx.indexOf(cellIndex.cellIndex) > -1 || (this.selectionSettings.mode === 'Both' &&\n selectedCell.classList.contains('e-gridchkbox') && !selectedCell.getAttribute('aria-selected'))) {\n this.cellDeselect(events.cellDeselecting, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell], foreignKeyData);\n selectedCellIdx.splice(selectedCellIdx.indexOf(cellIndex.cellIndex), 1);\n if (selectedCellIdx.length === 0) {\n this.selectedRowCellIndexes.splice(index, 1);\n }\n selectedCell.classList.remove('e-cellselectionbackground');\n selectedCell.removeAttribute('aria-selected');\n this.cellDeselect(events.cellDeselected, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell], foreignKeyData);\n }\n else {\n isUnSelected = false;\n this.onActionBegin(args, events.cellSelecting);\n this.addRowCellIndex({ rowIndex: cellIndex.rowIndex, cellIndex: cellIndex.cellIndex });\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n }\n }\n else {\n this.onActionBegin(args, events.cellSelecting);\n if (!isNullOrUndefined(args) && args[\"\" + cncl] === true) {\n return;\n }\n this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);\n }\n if (!isUnSelected) {\n var cellSelectedArgs = {\n data: selectedData, cellIndex: cellIndexes[0], currentCell: selectedCell,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :\n undefined, selectedRowCellIndex: this.selectedRowCellIndexes\n };\n cellSelectedArgs[\"\" + prvRowCellIndex] = this.prevECIdxs;\n this.onActionComplete(cellSelectedArgs, events.cellSelected);\n this.cellselected = true;\n }\n this.updateCellProps(cellIndex, cellIndex);\n }\n };\n Selection.prototype.getColIndex = function (rowIndex, index) {\n var col = this.parent.getColumnByIndex(index);\n var cells = getCellsByTableName(this.parent, col, rowIndex);\n if (cells) {\n for (var m = 0; m < cells.length; m++) {\n var colIndex = parseInt(cells[parseInt(m.toString(), 10)].getAttribute(literals.dataColIndex), 10);\n if (colIndex === index) {\n return m;\n }\n }\n }\n return -1;\n };\n Selection.prototype.getLastColIndex = function (rowIndex) {\n var cells = this.parent.getDataRows()[parseInt(rowIndex.toString(), 10)].querySelectorAll('td.e-rowcell');\n return parseInt(cells[cells.length - 1].getAttribute(literals.dataColIndex), 10);\n };\n Selection.prototype.clearCell = function () {\n this.clearCellSelection();\n };\n Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells, foreignKeyData) {\n var cancl = 'cancel';\n if (cells && cells.length > 0) {\n for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {\n var cell = cells_1[_i];\n if (cell && cell.classList.contains(literals.gridChkBox)) {\n this.updateCheckBoxes(closest(cell, 'tr'));\n }\n }\n }\n var args = {\n cells: cells, data: data, cellIndexes: cellIndexes, foreignKeyData: foreignKeyData, cancel: false\n };\n this.parent.trigger(type, args);\n this.isPreventCellSelect = args[\"\" + cancl];\n };\n Selection.prototype.updateCellSelection = function (selectedCell, rowIndex, cellIndex) {\n if (!isNullOrUndefined(rowIndex)) {\n this.addRowCellIndex({ rowIndex: rowIndex, cellIndex: cellIndex });\n }\n selectedCell.classList.add('e-cellselectionbackground');\n if (selectedCell.classList.contains(literals.gridChkBox)) {\n this.updateCheckBoxes(closest(selectedCell, 'tr'), true);\n }\n this.addAttribute(selectedCell);\n };\n Selection.prototype.addAttribute = function (cell) {\n this.target = cell;\n if (!isNullOrUndefined(cell)) {\n cell.setAttribute('aria-selected', 'true');\n if (!this.preventFocus) {\n this.focus.onClick({ target: cell }, true);\n }\n }\n };\n Selection.prototype.updateCellProps = function (startIndex, endIndex) {\n this.prevCIdxs = startIndex;\n this.prevECIdxs = endIndex;\n this.isCellSelected = this.selectedRowCellIndexes.length && true;\n };\n Selection.prototype.addRowCellIndex = function (rowCellIndex) {\n var isRowAvail;\n var index;\n for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {\n if (this.selectedRowCellIndexes[parseInt(i.toString(), 10)].rowIndex === rowCellIndex.rowIndex) {\n isRowAvail = true;\n index = i;\n break;\n }\n }\n if (isRowAvail) {\n if (this.selectedRowCellIndexes[parseInt(index.toString(), 10)].cellIndexes.indexOf(rowCellIndex.cellIndex) < 0) {\n this.selectedRowCellIndexes[parseInt(index.toString(), 10)].cellIndexes.push(rowCellIndex.cellIndex);\n }\n }\n else {\n this.selectedRowCellIndexes.push({ rowIndex: rowCellIndex.rowIndex, cellIndexes: [rowCellIndex.cellIndex] });\n }\n };\n /**\n * Deselects the currently selected cells.\n *\n * @returns {void}\n */\n Selection.prototype.clearCellSelection = function () {\n if (this.isCellSelected) {\n var gObj = this.parent;\n var selectedCells = this.getSelectedCellsElement();\n var rowCell = this.selectedRowCellIndexes;\n var data = [];\n var cells = [];\n var foreignKeyData = [];\n var currentViewData = this.getCurrentBatchRecordChanges();\n this.hideAutoFill();\n for (var i = 0, len = rowCell.length; i < len; i++) {\n data.push(currentViewData[rowCell[parseInt(i.toString(), 10)].rowIndex]);\n var rowObj = this.getRowObj(rowCell[parseInt(i.toString(), 10)].rowIndex);\n for (var j = 0, cLen = rowCell[parseInt(i.toString(), 10)].cellIndexes.length; j < cLen; j++) {\n if (rowObj.cells) {\n foreignKeyData.push(rowObj.cells[rowCell[parseInt(i.toString(), 10)]\n .cellIndexes[parseInt(j.toString(), 10)]].foreignKeyData);\n }\n cells.push(gObj.getCellFromIndex(rowCell[parseInt(i.toString(), 10)].rowIndex, rowCell[parseInt(i.toString(), 10)].cellIndexes[parseInt(j.toString(), 10)]));\n }\n }\n this.cellDeselect(events.cellDeselecting, rowCell, data, cells, foreignKeyData);\n if (this.isPreventCellSelect === true) {\n return;\n }\n for (var i = 0, len = selectedCells.length; i < len; i++) {\n selectedCells[parseInt(i.toString(), 10)].classList.remove('e-cellselectionbackground');\n selectedCells[parseInt(i.toString(), 10)].removeAttribute('aria-selected');\n }\n if (this.bdrElement) {\n this.showHideBorders('none');\n }\n this.selectedRowCellIndexes = [];\n this.isCellSelected = false;\n if (!this.isDragged && this.cellselected) {\n this.cellDeselect(events.cellDeselected, rowCell, data, cells, foreignKeyData);\n }\n }\n };\n Selection.prototype.getSelectedCellsElement = function () {\n var gObj = this.parent;\n var rows = gObj.getDataRows();\n var cells = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n cells = cells.concat([].slice.call(rows[parseInt(i.toString(), 10)].getElementsByClassName('e-cellselectionbackground')));\n }\n return cells;\n };\n Selection.prototype.mouseMoveHandler = function (e) {\n e.preventDefault();\n this.stopTimer();\n var gBRect = this.parent.element.getBoundingClientRect();\n var x1 = this.x;\n var y1 = this.y;\n var position = getPosition(e);\n var x2 = position.x - gBRect.left;\n var y2 = position.y - gBRect.top;\n var tmp;\n var target = closest(e.target, 'tr');\n this.isDragged = true;\n if (!this.isCellDrag) {\n if (!target) {\n target = closest(document.elementFromPoint(this.parent.element.offsetLeft + 2, e.clientY), 'tr');\n }\n if (x1 > x2) {\n tmp = x2;\n x2 = x1;\n x1 = tmp;\n }\n if (y1 > y2) {\n tmp = y2;\n y2 = y1;\n y1 = tmp;\n }\n this.element.style.left = x1 + 'px';\n this.element.style.top = y1 + 'px';\n this.element.style.width = x2 - x1 + 'px';\n this.element.style.height = y2 - y1 + 'px';\n }\n if (target && !e.ctrlKey && !e.shiftKey) {\n var rowIndex = parseInt(target.getAttribute(literals.dataRowIndex), 10);\n if (!this.isCellDrag) {\n this.hideAutoFill();\n this.selectRowsByRange(this.startDIndex, rowIndex);\n this.isRowDragSelected = true;\n }\n else {\n var td = parentsUntil(e.target, literals.rowCell);\n if (td) {\n this.startAFCell = this.startCell;\n this.endAFCell = parentsUntil(e.target, literals.rowCell);\n if (rowIndex > -1) {\n this.selectLikeExcel(e, rowIndex, parseInt(td.getAttribute(literals.dataColIndex), 10));\n }\n }\n }\n }\n if (!e.ctrlKey && !e.shiftKey && !this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling &&\n !this.parent.enableColumnVirtualization && !this.parent.groupSettings.columns.length && this.isCellDrag) {\n this.updateScrollPosition(e, position, this.parent.getContent());\n }\n };\n Selection.prototype.updateScrollPosition = function (mouseEvent, position, scrollElement) {\n var _this = this;\n var clientRect = scrollElement.getBoundingClientRect();\n if (clientRect.left >= position.x - 20 -\n (this.parent.enableRtl && this.parent.height !== 'auto' ? getScrollBarWidth() : 0)) {\n this.timer1 = window.setInterval(function () { _this.setScrollPosition(scrollElement.firstElementChild, _this.parent.enableRtl ? 'right' : 'left', mouseEvent); }, 200);\n }\n else if (clientRect.left + scrollElement.clientWidth - 20 -\n (!this.parent.enableRtl && this.parent.height !== 'auto' ? getScrollBarWidth() : 0) < position.x) {\n this.timer1 = window.setInterval(function () { _this.setScrollPosition(scrollElement.firstElementChild, _this.parent.enableRtl ? 'left' : 'right', mouseEvent); }, 200);\n }\n if (clientRect.top >= position.y - (this.parent.getRowHeight() * 0.5)) {\n this.timer2 = window.setInterval(function () { _this.setScrollPosition(scrollElement.firstElementChild, 'up', mouseEvent); }, 200);\n }\n else if (clientRect.top + scrollElement.clientHeight - (this.parent.getRowHeight() * 0.5) -\n (scrollElement.firstElementChild.scrollWidth > scrollElement.firstElementChild.offsetWidth ?\n getScrollBarWidth() : 0) <= position.y) {\n this.timer2 = window.setInterval(function () { _this.setScrollPosition(scrollElement.firstElementChild, 'down', mouseEvent); }, 200);\n }\n };\n Selection.prototype.stopTimer = function () {\n if (this.timer1) {\n window.clearInterval(this.timer1);\n this.timer1 = null;\n }\n if (this.timer2) {\n window.clearInterval(this.timer2);\n this.timer2 = null;\n }\n this.preventFocus = false;\n };\n Selection.prototype.setScrollPosition = function (scrollElement, direction, mouseEvent) {\n var rowIndex = -1;\n var columnIndex = -1;\n if (this.endAFCell || this.prevECIdxs) {\n rowIndex = this.endAFCell ? parseInt(this.endAFCell.getAttribute('index'), 10) : this.prevECIdxs.rowIndex;\n columnIndex = this.endAFCell ? parseInt(this.endAFCell.getAttribute('data-colindex'), 10) : this.prevECIdxs.cellIndex;\n }\n switch (direction) {\n case 'up':\n if (mouseEvent && closest(mouseEvent.target, '.e-headercontent')) {\n return;\n }\n if (this.isAutoFillSel && this.startAFCell && this.selectedRowCellIndexes.length &&\n ((this.selectedRowCellIndexes.length === 1 && this.startAFCell !== this.startCell) ||\n (this.selectedRowCellIndexes.length > 1 && this.startAFCell.getBoundingClientRect().top > 0))) {\n rowIndex = parseInt(this.startAFCell.getAttribute('index'), 10);\n }\n rowIndex -= 1;\n if (this.parent.frozenRows) {\n rowIndex += this.parent.frozenRows + 1;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n rowIndex < 1 ? scrollElement.scrollTop = 0 : scrollElement.scrollTop -= this.parent.getRowByIndex(rowIndex)\n .offsetHeight;\n break;\n case 'down':\n if (this.isAutoFillSel && this.startAFCell && this.startAFCell !== this.startCell) {\n rowIndex = parseInt(this.startAFCell.getAttribute('index'), 10);\n }\n if (rowIndex < this.parent.getRows().length - 1) {\n rowIndex += 1;\n if (this.isAutoFillSel && this.startAFCell && this.startAFCell !== this.startCell) {\n this.startAFCell = this.parent.getCellFromIndex(rowIndex, this.selectedRowCellIndexes[0].cellIndexes[0]);\n }\n scrollElement.scrollTop += this.parent.getRowByIndex(rowIndex).offsetHeight;\n }\n else {\n scrollElement.scrollTop = scrollElement.scrollHeight;\n }\n break;\n case 'left':\n if (columnIndex > 0 && rowIndex > -1) {\n if (this.isAutoFillSel && this.startAFCell && this.selectedRowCellIndexes.length &&\n ((this.selectedRowCellIndexes[0].cellIndexes.length > 0 && this.startAFCell !== this.startCell) ||\n (this.selectedRowCellIndexes[0].cellIndexes.length > 1 &&\n ((!this.parent.enableRtl && this.startAFCell.getBoundingClientRect().left > 0) || (this.parent.enableRtl &&\n this.startAFCell.getBoundingClientRect().left < this.parent.element.offsetWidth))))) {\n columnIndex = parseInt(this.startAFCell.getAttribute('data-colindex'), 10);\n }\n var nextElement_1 = this.findNextCell(scrollElement, direction, columnIndex, rowIndex);\n columnIndex = nextElement_1 ? parseInt(nextElement_1.getAttribute('data-colindex'), 10) : -1;\n if (this.parent.enableRtl && nextElement_1) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n columnIndex < 1 ? scrollElement.scrollLeft = scrollElement.scrollWidth :\n scrollElement.scrollLeft += nextElement_1.offsetWidth;\n }\n else if (nextElement_1) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n columnIndex < 1 ? scrollElement.scrollLeft = 0 : scrollElement.scrollLeft -= nextElement_1.offsetWidth;\n }\n }\n break;\n case 'right':\n if (this.isAutoFillSel && this.startAFCell && this.startAFCell !== this.startCell) {\n columnIndex = parseInt(this.startAFCell.getAttribute('data-colindex'), 10);\n }\n // eslint-disable-next-line no-case-declarations\n var currentElement = this.parent.getCellFromIndex(rowIndex, columnIndex);\n // eslint-disable-next-line no-case-declarations\n var nextElement = this.findNextCell(scrollElement, direction, columnIndex, rowIndex);\n if (nextElement && this.isAutoFillSel && this.startAFCell && this.startAFCell !== this.startCell) {\n this.startAFCell = this.parent.getCellFromIndex(this.selectedRowCellIndexes[0].rowIndex, parseInt(nextElement.getAttribute('data-colindex'), 10));\n }\n columnIndex = nextElement ? parseInt(nextElement.getAttribute('data-colindex'), 10) : -1;\n if (this.parent.enableRtl && nextElement) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n columnIndex < this.parent.columns.length - 1 ? scrollElement.scrollLeft -= currentElement.offsetWidth :\n scrollElement.scrollLeft = -scrollElement.scrollWidth;\n }\n else if (nextElement) {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n columnIndex < this.parent.columns.length - 1 ? scrollElement.scrollLeft += currentElement.offsetWidth :\n scrollElement.scrollLeft = scrollElement.scrollWidth;\n }\n if (this.isAutoFillSel && (columnIndex === this.parent.columns.length - 1 || columnIndex === -1) &&\n this.startAFCell && this.endAFCell) {\n this.positionAFBorders();\n scrollElement.scrollLeft = this.parent.enableRtl ? -scrollElement.scrollWidth : scrollElement.scrollWidth;\n }\n break;\n }\n if (rowIndex > -1 && rowIndex < this.parent.getRows().length && columnIndex > -1) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var mouseEvent_1 = { target: this.parent.getCellFromIndex(rowIndex, columnIndex) };\n if (this.isAutoFillSel && mouseEvent_1.target.classList.contains('e-cellselectionbackground') &&\n ((direction === 'down' && parseInt(mouseEvent_1.target.getAttribute('index'), 10) === this.parent.getRows().length - 1) ||\n (direction === 'right' && parseInt(mouseEvent_1.target.getAttribute('data-colindex'), 10) === this.parent.columns.length - 1))) {\n return;\n }\n this.endAFCell = mouseEvent_1.target;\n this.preventFocus = true;\n this.selectLikeExcel(mouseEvent_1, rowIndex, columnIndex);\n }\n };\n Selection.prototype.findNextCell = function (scrollElement, direction, columnIndex, rowIndex) {\n var nextElement = this.parent.getCellFromIndex(rowIndex, direction === 'left' ? columnIndex - 1 : columnIndex + 1);\n if (nextElement && nextElement.classList.contains('e-hide')) {\n var siblingEles = nextElement.closest('tr').querySelectorAll('.e-rowcell:not(.e-hide)');\n var nextEleInd = Array.from(siblingEles).indexOf(nextElement.nextElementSibling);\n if (nextEleInd > 0 && nextEleInd < siblingEles.length - 1) {\n nextElement = siblingEles[nextEleInd + (direction === 'left' ? -1 : 1)];\n return nextElement;\n }\n else {\n scrollElement.scrollLeft = 0;\n return null;\n }\n }\n return nextElement;\n };\n Selection.prototype.selectLikeExcel = function (e, rowIndex, cellIndex) {\n if (!this.isAutoFillSel) {\n this.clearCellSelection();\n this.selectCellsByRange({ rowIndex: this.startDIndex, cellIndex: this.startDCellIndex }, { rowIndex: rowIndex, cellIndex: cellIndex });\n this.drawBorders();\n }\n else { //Autofill\n this.showAFBorders();\n this.selectLikeAutoFill(e);\n }\n };\n Selection.prototype.setFrozenBorders = function (parentEle, border, bdrStr) {\n var width = border.style.borderWidth.toString().split(' ');\n var strCell = ['', 'e-leftfreeze', 'e-unfreeze', 'e-leftfreeze', 'e-unfreeze', 'e-rightfreeze', 'e-rightfreeze'];\n var cells = [].slice.call(parentEle.querySelectorAll('.e-cellselectionbackground' + '.' + strCell[\"\" + bdrStr])).\n filter(function (ele) { return ele.style.display === ''; });\n var fixedCells = [].slice.call(parentEle.querySelectorAll('.e-cellselectionbackground.e-fixedfreeze')).\n filter(function (ele) { return ele.style.display === ''; });\n var isRtl = this.parent.enableRtl;\n if (cells.length) {\n var firstRowIdx = cells[0].getAttribute('index');\n var firstColIdx = cells[0].getAttribute('data-colindex');\n var lastRowIdx = cells[cells.length - 1].getAttribute('index');\n var lastColIdx = cells[cells.length - 1].getAttribute('data-colindex');\n for (var i = 0; i < cells.length; i++) {\n if (cells[parseInt(i.toString(), 10)].getAttribute('index') === firstRowIdx && (width.length === 1 || (width.length === 3\n && parseInt(width[0], 10) === 2) || (width.length === 4 && parseInt(width[0], 10) === 2))) {\n cells[parseInt(i.toString(), 10)].classList.add('e-xlsel-top-border');\n }\n if (cells[parseInt(i.toString(), 10)].getAttribute('data-colindex') === firstColIdx && (width.length === 1 ||\n (width.length === 3 && parseInt(width[1], 10) === 2) || (width.length === 4 && (((!isRtl &&\n parseInt(width[3], 10) === 2)) || (isRtl && parseInt(width[1], 10) === 2))))) {\n cells[parseInt(i.toString(), 10)].classList.add(isRtl ? 'e-xlsel-right-border' : 'e-xlsel-left-border');\n }\n if (cells[parseInt(i.toString(), 10)].getAttribute('index') === lastRowIdx && (width.length === 1 ||\n (width.length === 3 && parseInt(width[2], 10) === 2) || (width.length === 4 && parseInt(width[2], 10) === 2))) {\n cells[parseInt(i.toString(), 10)].classList.add('e-xlsel-bottom-border');\n }\n if (cells[parseInt(i.toString(), 10)].getAttribute('data-colindex') === lastColIdx && (width.length === 1 ||\n (width.length === 3 && parseInt(width[1], 10) === 2) || (width.length === 4 && ((!isRtl &&\n parseInt(width[1], 10) === 2)) || (isRtl && parseInt(width[3], 10) === 2)))) {\n cells[parseInt(i.toString(), 10)].classList.add(isRtl ? 'e-xlsel-left-border' : 'e-xlsel-right-border');\n }\n }\n }\n if (fixedCells.length) {\n var firstRowIdx = fixedCells[0].getAttribute('index');\n var firstColIdx = fixedCells[0].getAttribute('data-colindex');\n var lastRowIdx = fixedCells[fixedCells.length - 1].getAttribute('index');\n var lastColIdx = fixedCells[fixedCells.length - 1].getAttribute('data-colindex');\n for (var i = 0; i < fixedCells.length; i++) {\n var idx = fixedCells[parseInt(i.toString(), 10)].getAttribute('index');\n var colIdx = fixedCells[parseInt(i.toString(), 10)].getAttribute('data-colindex');\n if (idx === firstRowIdx &&\n ((!this.parent.getHeaderContent().querySelector('.e-cellselectionbackground.e-fixedfreeze')\n && parentsUntil(parentEle, 'e-content')) || !parentsUntil(parentEle, 'e-content'))) {\n fixedCells[parseInt(i.toString(), 10)].classList.add('e-xlsel-top-border');\n }\n if (idx === lastRowIdx &&\n ((!this.parent.getContent().querySelector('.e-cellselectionbackground.e-fixedfreeze')\n && parentsUntil(parentEle, 'e-headercontent')) || !parentsUntil(parentEle, 'e-headercontent'))) {\n fixedCells[parseInt(i.toString(), 10)].classList.add('e-xlsel-bottom-border');\n }\n var preCell = fixedCells[parseInt(i.toString(), 10)].parentElement.children[parseInt(colIdx, 10) - 1];\n if (colIdx === firstColIdx && (!preCell || (preCell && !preCell.classList.contains('e-cellselectionbackground')))) {\n fixedCells[parseInt(i.toString(), 10)].classList.add(isRtl ? 'e-xlsel-right-border' : 'e-xlsel-left-border');\n }\n var nextCell = fixedCells[parseInt(i.toString(), 10)].parentElement.children[parseInt(colIdx, 10) + 1];\n if (colIdx === lastColIdx && (!nextCell || (nextCell && !nextCell.classList.contains('e-cellselectionbackground')))) {\n fixedCells[parseInt(i.toString(), 10)].classList.add(isRtl ? 'e-xlsel-left-border' : 'e-xlsel-right-border');\n }\n }\n }\n };\n Selection.prototype.refreshFrozenBorders = function () {\n if (this.bdrElement) {\n this.setFrozenBorders(this.parent.getContentTable(), this.bdrElement, '1');\n if (this.parent.isFrozenGrid() && this.parent.getFrozenMode() === literals.leftRight) {\n this.setFrozenBorders(this.parent.getContentTable(), this.frcBdrElement, '5');\n }\n if (this.parent.frozenRows) {\n this.setFrozenBorders(this.parent.getHeaderTable(), this.fhBdrElement, '3');\n if (this.parent.isFrozenGrid() && this.parent.getFrozenMode() === literals.leftRight) {\n this.setFrozenBorders(this.parent.getHeaderTable(), this.frhBdrElement, '6');\n }\n }\n }\n };\n Selection.prototype.drawBorders = function () {\n if (this.selectionSettings.cellSelectionMode === 'BoxWithBorder' && this.selectedRowCellIndexes.length && !this.parent.isEdit) {\n this.parent.element.classList.add('e-enabledboxbdr');\n if (!this.bdrElement) {\n this.createBorders();\n }\n this.positionBorders();\n if (this.parent.isFrozenGrid()) {\n this.showHideBorders('none', true);\n this.refreshFrozenBorders();\n }\n }\n else {\n this.showHideBorders('none');\n }\n };\n Selection.prototype.isLastCell = function (cell) {\n var cells = [].slice.call(cell.parentElement.querySelectorAll('.e-rowcell:not(.e-hide)'));\n return cells[cells.length - 1] === cell;\n };\n Selection.prototype.isLastRow = function (cell) {\n var rows = [].slice.call(closest(cell, literals.tbody).querySelectorAll('.e-row:not(.e-hiddenrow)'));\n return cell.parentElement === rows[rows.length - 1];\n };\n Selection.prototype.isFirstRow = function (cell) {\n var rows = [].slice.call(closest(cell, literals.tbody).querySelectorAll('.e-row:not(.e-hiddenrow)'));\n return cell.parentElement === rows[0];\n };\n Selection.prototype.isFirstCell = function (cell) {\n var cells = [].slice.call(cell.parentElement.querySelectorAll('.e-rowcell:not(.e-hide)'));\n return cells[0] === cell;\n };\n Selection.prototype.setBorders = function (parentEle, border, bdrStr) {\n var cells = [].slice.call(parentEle.getElementsByClassName('e-cellselectionbackground')).\n filter(function (ele) { return ele.style.display === ''; });\n if (cells.length && this.parent.isFrozenGrid()) {\n var strCell = ['', 'e-leftfreeze', 'e-unfreeze', 'e-leftfreeze', 'e-unfreeze', 'e-rightfreeze', 'e-rightfreeze'];\n cells = [].slice.call(parentEle.querySelectorAll('.e-cellselectionbackground' + '.' + strCell[\"\" + bdrStr] + ':not(.e-hide)')).\n filter(function (ele) { return ele.style.display === ''; });\n }\n if (cells.length) {\n var isFrozen = this.parent.isFrozenGrid();\n var start = cells[0];\n var end = cells[cells.length - 1];\n var stOff = start.getBoundingClientRect();\n var endOff = end.getBoundingClientRect();\n var parentOff = start.offsetParent.getBoundingClientRect();\n if (start.offsetParent.classList.contains('e-content') || start.offsetParent.classList.contains('e-headercontent')) {\n parentOff = start.offsetParent.querySelector('table').getBoundingClientRect();\n }\n var rowHeight = !isFrozen && this.isLastRow(end) && (bdrStr === '1' || bdrStr === '2' || bdrStr === '5') ? 2 : 0;\n var topOffSet = 0;\n var leftOffset = isFrozen && (bdrStr === '2' || bdrStr === '4') && this.isFirstCell(start) ? 1 : 0;\n var rightOffset = ((this.parent.getFrozenMode() === 'Right' && (bdrStr === '1' || bdrStr === '3'))\n || (this.parent.getFrozenMode() === literals.leftRight && (bdrStr === '5' || bdrStr === '6')))\n && this.isFirstCell(start) ? 1 : 0;\n if (this.parent.enableRtl) {\n border.style.right = parentOff.right - stOff.right - leftOffset + 'px';\n border.style.width = stOff.right - endOff.left + leftOffset + 1 + 'px';\n }\n else {\n border.style.left = stOff.left - parentOff.left - leftOffset - rightOffset + 'px';\n border.style.width = endOff.right - stOff.left + leftOffset - rightOffset + 1 + 'px';\n }\n border.style.top = stOff.top - parentOff.top - topOffSet + 'px';\n border.style.height = endOff.top - stOff.top > 0 ?\n (endOff.top - parentOff.top + endOff.height + (isFrozen ? 0 : 1)) - (stOff.top - parentOff.top) - rowHeight + topOffSet + 'px' :\n endOff.height + topOffSet - rowHeight + (isFrozen ? 0 : 1) + 'px';\n this.selectDirection += bdrStr;\n }\n else {\n border.style.display = 'none';\n }\n };\n Selection.prototype.positionBorders = function () {\n this.updateStartEndCells();\n if (!this.startCell || !this.bdrElement || !this.selectedRowCellIndexes.length) {\n return;\n }\n this.selectDirection = '';\n this.showHideBorders('');\n this.setBorders(this.parent.getContentTable(), this.bdrElement, '1');\n if (this.parent.isFrozenGrid()) {\n this.setBorders(this.parent.getContentTable(), this.mcBdrElement, '2');\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.setBorders(this.parent.getContentTable(), this.frcBdrElement, '5');\n }\n }\n if (this.parent.frozenRows) {\n this.setBorders(this.parent.getHeaderTable(), this.fhBdrElement, '3');\n if (this.parent.isFrozenGrid()) {\n this.setBorders(this.parent.getHeaderTable(), this.mhBdrElement, '4');\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.setBorders(this.parent.getHeaderTable(), this.frhBdrElement, '6');\n }\n }\n }\n this.applyBorders(this.selectDirection);\n };\n /* eslint-enable */\n Selection.prototype.applyBothFrozenBorders = function (str) {\n var rtl = this.parent.enableRtl;\n switch (str.length) {\n case 6:\n {\n this.bdrElement.style.borderWidth = rtl ? this.right_bottom : this.bottom_left;\n this.mcBdrElement.style.borderWidth = this.bottom;\n this.fhBdrElement.style.borderWidth = rtl ? this.top_right : this.top_left;\n this.mhBdrElement.style.borderWidth = this.top;\n this.frcBdrElement.style.borderWidth = rtl ? this.bottom_left : this.right_bottom;\n this.frhBdrElement.style.borderWidth = rtl ? this.top_left : this.top_right;\n }\n break;\n case 4:\n {\n if (str.includes('1') && str.includes('2') && str.includes('3') && str.includes('4')) {\n this.fhBdrElement.style.borderWidth = rtl ? this.top_right : this.top_left;\n this.mhBdrElement.style.borderWidth = rtl ? this.top_left : this.top_right;\n this.bdrElement.style.borderWidth = rtl ? this.right_bottom : this.bottom_left;\n this.mcBdrElement.style.borderWidth = rtl ? this.bottom_left : this.right_bottom;\n }\n if (str.includes('2') && str.includes('4') && str.includes('5') && str.includes('6')) {\n this.mcBdrElement.style.borderWidth = rtl ? this.right_bottom : this.bottom_left;\n this.mhBdrElement.style.borderWidth = rtl ? this.top_right : this.top_left;\n this.frcBdrElement.style.borderWidth = rtl ? this.bottom_left : this.right_bottom;\n this.frhBdrElement.style.borderWidth = rtl ? this.top_left : this.top_right;\n }\n }\n break;\n case 3:\n {\n this.bdrElement.style.borderWidth = rtl ? this.top_right_bottom : this.top_bottom_left;\n this.mcBdrElement.style.borderWidth = this.top_bottom;\n this.frcBdrElement.style.borderWidth = rtl ? this.top_bottom_left : this.top_right_bottom;\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = rtl ? this.top_right_bottom : this.top_bottom_left;\n this.mhBdrElement.style.borderWidth = this.top_bottom;\n this.frcBdrElement.style.borderWidth = rtl ? this.top_bottom_left : this.top_right_bottom;\n }\n }\n break;\n case 2:\n {\n if (str.includes('1')) {\n this.mcBdrElement.style.borderWidth = rtl ? this.top_bottom_left : this.top_right_bottom;\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = this.top_right_left;\n }\n }\n if (str.includes('2')) {\n this.bdrElement.style.borderWidth = rtl ? this.top_right_bottom : this.top_bottom_left;\n this.frcBdrElement.style.borderWidth = rtl ? this.top_bottom_left : this.top_right_bottom;\n if (this.parent.frozenRows) {\n this.mhBdrElement.style.borderWidth = this.top_right_left;\n }\n }\n if (str.includes('3')) {\n this.mhBdrElement.style.borderWidth = rtl ? this.top_bottom_left : this.top_right_bottom;\n this.bdrElement.style.borderWidth = this.right_bottom_left;\n }\n if (str.includes('4')) {\n this.fhBdrElement.style.borderWidth = rtl ? this.top_right_bottom : this.top_bottom_left;\n this.frhBdrElement.style.borderWidth = rtl ? this.top_bottom_left : this.top_right_bottom;\n this.mcBdrElement.style.borderWidth = this.right_bottom_left;\n }\n if (str.includes('5')) {\n this.mcBdrElement.style.borderWidth = rtl ? this.top_right_bottom : this.top_bottom_left;\n if (this.parent.frozenRows) {\n this.frhBdrElement.style.borderWidth = this.top_right_left;\n }\n }\n if (str.includes('6')) {\n this.mhBdrElement.style.borderWidth = rtl ? this.top_right_bottom : this.top_bottom_left;\n this.frcBdrElement.style.borderWidth = this.right_bottom_left;\n }\n }\n break;\n default:\n this.bdrElement.style.borderWidth = this.all_border;\n this.mcBdrElement.style.borderWidth = this.all_border;\n this.frcBdrElement.style.borderWidth = this.all_border;\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = this.all_border;\n this.mhBdrElement.style.borderWidth = this.all_border;\n this.frhBdrElement.style.borderWidth = this.all_border;\n }\n break;\n }\n };\n Selection.prototype.applyBorders = function (str) {\n var rtl = this.parent.enableRtl;\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.applyBothFrozenBorders(str);\n }\n else {\n switch (str.length) {\n case 4:\n {\n if (this.parent.getFrozenMode() === 'Right') {\n this.bdrElement.style.borderWidth = rtl ? this.bottom_left : this.right_bottom;\n this.mcBdrElement.style.borderWidth = rtl ? this.right_bottom : this.bottom_left;\n this.fhBdrElement.style.borderWidth = rtl ? this.top_left : this.top_right;\n this.mhBdrElement.style.borderWidth = rtl ? this.top_right : this.top_left;\n }\n else {\n this.bdrElement.style.borderWidth = rtl ? this.right_bottom : this.bottom_left;\n this.mcBdrElement.style.borderWidth = rtl ? this.bottom_left : this.right_bottom;\n this.fhBdrElement.style.borderWidth = rtl ? this.top_right : this.top_left;\n this.mhBdrElement.style.borderWidth = rtl ? this.top_left : this.top_right;\n }\n }\n break;\n case 2:\n {\n if (this.parent.getFrozenMode() === 'Right') {\n this.bdrElement.style.borderWidth = str.includes('2') ? rtl ? this.top_bottom_left\n : this.top_right_bottom : this.right_bottom_left;\n this.mcBdrElement.style.borderWidth = str.includes('1') ? rtl ? this.top_right_bottom\n : this.top_bottom_left : this.right_bottom_left;\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = str.includes('1') ? this.top_right_left\n : rtl ? this.top_bottom_left : this.top_right_bottom;\n this.mhBdrElement.style.borderWidth = str.includes('2') ? this.top_right_left\n : rtl ? this.top_right_bottom : this.top_bottom_left;\n }\n }\n else {\n this.bdrElement.style.borderWidth = str.includes('2') ? rtl ? this.top_right_bottom\n : this.top_bottom_left : this.right_bottom_left;\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement.style.borderWidth = str.includes('1') ? rtl ? this.top_bottom_left\n : this.top_right_bottom : this.right_bottom_left;\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = str.includes('1') ? this.top_right_left\n : rtl ? this.top_right_bottom : this.top_bottom_left;\n if (this.parent.isFrozenGrid()) {\n this.mhBdrElement.style.borderWidth = str.includes('2') ? this.top_right_left\n : rtl ? this.top_bottom_left : this.top_right_bottom;\n }\n }\n }\n }\n break;\n default:\n this.bdrElement.style.borderWidth = this.all_border;\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement.style.borderWidth = this.all_border;\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = this.all_border;\n if (this.parent.isFrozenGrid()) {\n this.mhBdrElement.style.borderWidth = this.all_border;\n }\n }\n break;\n }\n }\n };\n Selection.prototype.createBorders = function () {\n if (!this.bdrElement) {\n this.bdrElement = this.parent.getContentTable().parentElement.appendChild(createElement('div', {\n className: 'e-xlsel', id: this.parent.element.id + '_bdr',\n styles: 'width: 2px; border-width: 0;'\n }));\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement = this.parent.getContentTable().parentElement.appendChild(createElement('div', {\n className: 'e-xlsel', id: this.parent.element.id + '_mcbdr',\n styles: 'height: 2px; border-width: 0;'\n }));\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.frcBdrElement = this.parent.getContentTable().parentElement.appendChild(createElement('div', {\n className: 'e-xlsel', id: this.parent.element.id + '_frcbdr',\n styles: 'height: 2px; border-width: 0;'\n }));\n }\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement = this.parent.getHeaderTable().parentElement.appendChild(createElement('div', { className: 'e-xlsel', id: this.parent.element.id + '_fhbdr', styles: 'height: 2px;' }));\n }\n if (this.parent.frozenRows && this.parent.isFrozenGrid()) {\n this.mhBdrElement = this.parent.getHeaderTable().parentElement.appendChild(createElement('div', { className: 'e-xlsel', id: this.parent.element.id + '_mhbdr', styles: 'height: 2px;' }));\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.frhBdrElement = this.parent.getHeaderTable().parentElement.appendChild(createElement('div', { className: 'e-xlsel', id: this.parent.element.id + '_frhbdr', styles: 'height: 2px;' }));\n }\n }\n }\n };\n Selection.prototype.showHideBorders = function (display, freeze) {\n if (this.bdrElement) {\n this.bdrElement.style.display = display;\n if (this.parent.isFrozenGrid()) {\n var parentEle = this.parent.getContentTable();\n removeClass(parentEle.querySelectorAll('.e-xlsel-top-border'), 'e-xlsel-top-border');\n removeClass(parentEle.querySelectorAll('.e-xlsel-left-border'), 'e-xlsel-left-border');\n removeClass(parentEle.querySelectorAll('.e-xlsel-right-border'), 'e-xlsel-right-border');\n removeClass(parentEle.querySelectorAll('.e-xlsel-bottom-border'), 'e-xlsel-bottom-border');\n if (!freeze) {\n this.mcBdrElement.style.display = display;\n }\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.frcBdrElement.style.display = display;\n }\n }\n if (this.parent.frozenRows) {\n var parentEle = this.parent.getHeaderTable();\n removeClass(parentEle.querySelectorAll('.e-xlsel-top-border'), 'e-xlsel-top-border');\n removeClass(parentEle.querySelectorAll('.e-xlsel-left-border'), 'e-xlsel-left-border');\n removeClass(parentEle.querySelectorAll('.e-xlsel-right-border'), 'e-xlsel-right-border');\n removeClass(parentEle.querySelectorAll('.e-xlsel-bottom-border'), 'e-xlsel-bottom-border');\n this.fhBdrElement.style.display = display;\n }\n if (this.parent.frozenRows && this.parent.isFrozenGrid()) {\n if (!freeze) {\n this.mhBdrElement.style.display = display;\n }\n if (this.parent.getFrozenMode() === literals.leftRight) {\n this.frhBdrElement.style.display = display;\n }\n }\n }\n };\n Selection.prototype.drawAFBorders = function () {\n if (!this.bdrAFBottom) {\n this.createAFBorders();\n }\n this.positionAFBorders();\n };\n Selection.prototype.positionAFBorders = function () {\n if (!this.startCell || !this.bdrAFLeft) {\n return;\n }\n var stOff = this.startAFCell.getBoundingClientRect();\n var endOff = this.endAFCell.getBoundingClientRect();\n var top = endOff.top - stOff.top > 0 ? 1 : 0;\n var firstCellTop = endOff.top - stOff.top >= 0 && (parentsUntil(this.startAFCell, literals.movableContent) ||\n parentsUntil(this.startAFCell, 'e-frozencontent')) && this.isFirstRow(this.startAFCell) ? 1.5 : 0;\n var firstCellLeft = (parentsUntil(this.startAFCell, literals.movableContent) ||\n parentsUntil(this.startAFCell, literals.movableHeader)) && this.isFirstCell(this.startAFCell) ? 1 : 0;\n var rowHeight = this.isLastRow(this.endAFCell) && (parentsUntil(this.endAFCell, literals.movableContent) ||\n parentsUntil(this.endAFCell, 'e-frozencontent')) ? 2 : 0;\n var parentOff = this.startAFCell.offsetParent.getBoundingClientRect();\n var parentRect = this.parent.element.getBoundingClientRect();\n var sTop = this.startAFCell.offsetParent.parentElement.scrollTop;\n var sLeft = this.startAFCell.offsetParent.parentElement.scrollLeft;\n var scrollTop = sTop - this.startAFCell.offsetTop;\n var scrollLeft = sLeft - this.startAFCell.offsetLeft;\n var totalHeight = this.parent.element.clientHeight - getScrollBarWidth();\n if (this.parent.allowPaging) {\n totalHeight -= this.parent.element.querySelector('.e-pager').offsetHeight;\n }\n if (this.parent.aggregates.length) {\n totalHeight -= this.parent.getFooterContent().offsetHeight;\n }\n var totalWidth = this.parent.element.clientWidth - (this.parent.height !== 'auto' ? getScrollBarWidth() : 0);\n scrollTop = scrollTop > 0 ? Math.floor(scrollTop) - 1 : 0;\n scrollLeft = scrollLeft > 0 ? scrollLeft : 0;\n var left = stOff.left - parentRect.left;\n if (!this.parent.enableRtl) {\n this.bdrAFLeft.style.left = left - firstCellLeft + scrollLeft - 1 + 'px';\n this.bdrAFRight.style.left = endOff.left - parentRect.left - 2 + endOff.width + 'px';\n this.bdrAFRight.style.width = totalWidth <= parseInt(this.bdrAFRight.style.left, 10) ? '0px' : '2px';\n this.bdrAFTop.style.left = left + scrollLeft - 0.5 + 'px';\n this.bdrAFTop.style.width = parseInt(this.bdrAFRight.style.left, 10) - parseInt(this.bdrAFLeft.style.left, 10)\n - firstCellLeft + 1 + 'px';\n if (totalWidth <= (parseInt(this.bdrAFTop.style.width, 10) + parseInt(this.bdrAFTop.style.left, 10))) {\n var leftRemove = (parseInt(this.bdrAFTop.style.width, 10) + parseInt(this.bdrAFTop.style.left, 10)) - totalWidth;\n this.bdrAFTop.style.width = parseInt(this.bdrAFTop.style.width, 10) - leftRemove + 'px';\n }\n }\n else {\n var scrolloffSet = (parentsUntil(this.startAFCell, literals.movableContent) ||\n parentsUntil(this.startAFCell, literals.movableHeader)) ? stOff.right -\n this.startAFCell.offsetParent.parentElement.getBoundingClientRect().width -\n parentRect.left : 0;\n this.bdrAFLeft.style.right = parentRect.right - endOff.right - 2 + endOff.width + 'px';\n this.bdrAFLeft.style.width = totalWidth <= parseInt(this.bdrAFLeft.style.right, 10) ? '0px' : '2px';\n var borderAFRightValue = parentRect.right - stOff.right - firstCellLeft + scrolloffSet - 1;\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n borderAFRightValue > 0 ? this.bdrAFRight.style.right = borderAFRightValue + 'px' : this.bdrAFRight.style.right = '0px';\n this.bdrAFTop.style.left = endOff.left - parentRect.left - 0.5 + 'px';\n this.bdrAFTop.style.width = parseInt(this.bdrAFLeft.style.right, 10) - parseInt(this.bdrAFRight.style.right, 10)\n - firstCellLeft + 1 + 'px';\n if (parseInt(this.bdrAFTop.style.left, 10) < 0) {\n this.bdrAFTop.style.width = parseInt(this.bdrAFTop.style.width, 10) + parseInt(this.bdrAFTop.style.left, 10) + 'px';\n if (this.parent.height !== 'auto' && getScrollBarWidth()) {\n this.bdrAFTop.style.left = getScrollBarWidth() + 'px';\n this.bdrAFTop.style.width = (parseInt(this.bdrAFTop.style.width, 10) - getScrollBarWidth()) + 'px';\n }\n else {\n this.bdrAFTop.style.left = '0px';\n }\n }\n }\n this.bdrAFLeft.style.top = stOff.top - parentRect.top - firstCellTop + scrollTop + 'px';\n this.bdrAFLeft.style.height = endOff.top - stOff.top > 0 ?\n (endOff.top - parentOff.top + endOff.height + 1) - (stOff.top - parentOff.top) + firstCellTop - rowHeight - scrollTop + 'px' :\n endOff.height + firstCellTop - rowHeight - scrollTop + 'px';\n this.bdrAFRight.style.top = this.bdrAFLeft.style.top;\n this.bdrAFRight.style.height = parseInt(this.bdrAFLeft.style.height, 10) + 'px';\n this.bdrAFTop.style.top = this.bdrAFRight.style.top;\n this.bdrAFBottom.style.left = this.bdrAFTop.style.left;\n this.bdrAFBottom.style.top = parseFloat(this.bdrAFLeft.style.top) + parseFloat(this.bdrAFLeft.style.height) - top - 1 + 'px';\n this.bdrAFBottom.style.width = totalHeight <= parseFloat(this.bdrAFBottom.style.top) ? '0px' : this.bdrAFTop.style.width;\n if (totalHeight <= (parseInt(this.bdrAFLeft.style.height, 10) + parseInt(this.bdrAFLeft.style.top, 10))) {\n var topRemove = parseInt(this.bdrAFLeft.style.height, 10) + parseInt(this.bdrAFLeft.style.top, 10) - totalHeight;\n this.bdrAFLeft.style.height = parseInt(this.bdrAFLeft.style.height, 10) - topRemove + 'px';\n this.bdrAFRight.style.height = parseInt(this.bdrAFLeft.style.height, 10) + 'px';\n }\n };\n Selection.prototype.createAFBorders = function () {\n if (!this.bdrAFLeft) {\n this.bdrAFLeft = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdrafleft', styles: 'width: 2px;' }));\n this.bdrAFRight = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdrafright', styles: 'width: 2px;' }));\n this.bdrAFBottom = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdrafbottom', styles: 'height: 2px;' }));\n this.bdrAFTop = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdraftop', styles: 'height: 2px;' }));\n }\n };\n Selection.prototype.destroyAutoFillElements = function () {\n if (this.bdrAFLeft) {\n this.bdrAFLeft.remove();\n this.bdrAFRight.remove();\n this.bdrAFBottom.remove();\n this.bdrAFTop.remove();\n this.bdrAFLeft = this.bdrAFRight = this.bdrAFBottom = this.bdrAFTop = null;\n }\n if (this.autofill) {\n this.autofill.remove();\n this.autofill = null;\n }\n };\n Selection.prototype.showAFBorders = function () {\n if (this.bdrAFLeft) {\n this.bdrAFLeft.style.display = '';\n this.bdrAFRight.style.display = '';\n this.bdrAFBottom.style.display = '';\n this.bdrAFTop.style.display = '';\n }\n };\n Selection.prototype.hideAFBorders = function () {\n if (this.bdrAFLeft) {\n this.bdrAFLeft.style.display = 'none';\n this.bdrAFRight.style.display = 'none';\n this.bdrAFBottom.style.display = 'none';\n this.bdrAFTop.style.display = 'none';\n }\n };\n Selection.prototype.updateValue = function (rIdx, cIdx, cell) {\n var args = this.createBeforeAutoFill(rIdx, cIdx, cell);\n if (!args.cancel) {\n var col = this.parent.getColumnByIndex(cIdx);\n if (this.parent.editModule && cell) {\n if (col.type === 'number') {\n this.parent.editModule.updateCell(rIdx, col.field, parseFloat(args.value));\n }\n else {\n this.parent.editModule.updateCell(rIdx, col.field, args.value);\n }\n }\n }\n };\n Selection.prototype.createBeforeAutoFill = function (rowIndex, colIndex, cell) {\n var col = this.parent.getColumnByIndex(colIndex);\n var args = {\n column: col,\n value: cell.innerText\n };\n this.parent.trigger(events.beforeAutoFill, args);\n return args;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Selection.prototype.getAutoFillCells = function (rowIndex, startCellIdx) {\n var cls = '.e-cellselectionbackground';\n var cells = [].slice.call(this.parent.getDataRows()[parseInt(rowIndex.toString(), 10)].querySelectorAll(cls));\n return cells;\n };\n Selection.prototype.selectLikeAutoFill = function (e, isApply) {\n var startrowIdx = parseInt(parentsUntil(this.startAFCell, literals.row).getAttribute(literals.dataRowIndex), 10);\n var startCellIdx = parseInt(this.startAFCell.getAttribute(literals.dataColIndex), 10);\n var endrowIdx = parseInt(parentsUntil(this.endAFCell, literals.row).getAttribute(literals.dataRowIndex), 10);\n var endCellIdx = parseInt(this.endAFCell.getAttribute(literals.dataColIndex), 10);\n var rowLen = this.selectedRowCellIndexes.length - 1;\n var colLen = this.selectedRowCellIndexes[0].cellIndexes.length - 1;\n switch (true) { //direction\n case !isApply && this.endAFCell.classList.contains('e-cellselectionbackground') &&\n !!parentsUntil(e.target, literals.rowCell):\n this.startAFCell = this.parent.getCellFromIndex(startrowIdx, startCellIdx);\n this.endAFCell = this.parent.getCellFromIndex(startrowIdx + rowLen, startCellIdx + colLen);\n this.drawAFBorders();\n break;\n case this.autoFillRLselection && startCellIdx + colLen < endCellIdx && //right\n endCellIdx - startCellIdx - colLen + 1 > endrowIdx - startrowIdx - rowLen // right bottom\n && endCellIdx - startCellIdx - colLen + 1 > startrowIdx - endrowIdx: //right top\n this.endAFCell = this.parent.getCellFromIndex(startrowIdx + rowLen, endCellIdx);\n endrowIdx = parseInt(parentsUntil(this.endAFCell, literals.row).getAttribute(literals.dataRowIndex), 10);\n endCellIdx = parseInt(this.endAFCell.getAttribute(literals.dataColIndex), 10);\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n var cellIdx = parseInt(this.endCell.getAttribute(literals.dataColIndex), 10);\n for (var i = startrowIdx; i <= endrowIdx; i++) {\n var cells = this.getAutoFillCells(i, startCellIdx);\n var c = 0;\n for (var j = cellIdx + 1; j <= endCellIdx; j++) {\n if (c > colLen) {\n c = 0;\n }\n this.updateValue(i, j, cells[parseInt(c.toString(), 10)]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: startrowIdx, cellIndex: this.startCellIndex }, { rowIndex: endrowIdx, cellIndex: endCellIdx });\n }\n break;\n case this.autoFillRLselection && startCellIdx > endCellIdx && // left\n startCellIdx - endCellIdx + 1 > endrowIdx - startrowIdx - rowLen && //left top\n startCellIdx - endCellIdx + 1 > startrowIdx - endrowIdx: // left bottom\n this.startAFCell = this.parent.getCellFromIndex(startrowIdx, endCellIdx);\n this.endAFCell = this.endCell;\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n for (var i = startrowIdx; i <= startrowIdx + rowLen; i++) {\n var cells = this.getAutoFillCells(i, startCellIdx);\n cells.reverse();\n var c = 0;\n for (var j = this.startCellIndex - 1; j >= endCellIdx; j--) {\n if (c > colLen) {\n c = 0;\n }\n this.updateValue(i, j, cells[parseInt(c.toString(), 10)]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: startrowIdx, cellIndex: endCellIdx }, { rowIndex: startrowIdx + rowLen, cellIndex: this.startCellIndex + colLen });\n }\n break;\n case startrowIdx > endrowIdx: //up\n this.startAFCell = this.parent.getCellFromIndex(endrowIdx, startCellIdx);\n this.endAFCell = this.endCell;\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n var trIdx = parseInt(this.endCell.parentElement.getAttribute(literals.dataRowIndex), 10);\n var r = trIdx;\n for (var i = startrowIdx - 1; i >= endrowIdx; i--) {\n if (r === this.startIndex - 1) {\n r = trIdx;\n }\n var cells = this.getAutoFillCells(r, startCellIdx);\n var c = 0;\n r--;\n for (var j = this.startCellIndex; j <= this.startCellIndex + colLen; j++) {\n this.updateValue(i, j, cells[parseInt(c.toString(), 10)]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: endrowIdx, cellIndex: startCellIdx + colLen }, { rowIndex: startrowIdx + rowLen, cellIndex: startCellIdx });\n }\n break;\n default: //down\n this.endAFCell = this.parent.getCellFromIndex(endrowIdx, startCellIdx + colLen);\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n var trIdx = parseInt(this.endCell.parentElement.getAttribute(literals.dataRowIndex), 10);\n var r = this.startIndex;\n for (var i = trIdx + 1; i <= endrowIdx; i++) {\n if (r === trIdx + 1) {\n r = this.startIndex;\n }\n var cells = this.getAutoFillCells(r, startCellIdx);\n r++;\n var c = 0;\n for (var m = this.startCellIndex; m <= this.startCellIndex + colLen; m++) {\n this.updateValue(i, m, cells[parseInt(c.toString(), 10)]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: trIdx - rowLen, cellIndex: startCellIdx }, { rowIndex: endrowIdx, cellIndex: startCellIdx + colLen });\n }\n break;\n }\n };\n Selection.prototype.mouseUpHandler = function (e) {\n this.stopTimer();\n document.body.classList.remove('e-disableuserselect');\n if (this.element && !isNullOrUndefined(this.element.parentElement)) {\n remove(this.element);\n }\n if (this.isDragged && this.selectedRowCellIndexes.length === 1 && this.selectedRowCellIndexes[0].cellIndexes.length === 1) {\n this.mUPTarget = parentsUntil(e.target, literals.rowCell);\n }\n else {\n this.mUPTarget = null;\n }\n var closeRowCell = closest(e.target, '.e-rowcell');\n if (this.isDragged && !this.isAutoFillSel && this.selectionSettings.mode === 'Cell' &&\n closeRowCell && closeRowCell.classList.contains(literals.rowCell)) {\n var rowIndex = parseInt(closeRowCell.parentElement.getAttribute(literals.dataRowIndex), 10);\n var cellIndex = parseInt(closeRowCell.getAttribute(literals.dataColIndex), 10);\n this.isDragged = false;\n this.clearCellSelection();\n this.selectCellsByRange({ rowIndex: this.startDIndex, cellIndex: this.startDCellIndex }, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isDragged = false;\n this.updateAutoFillPosition();\n if (this.isAutoFillSel) {\n this.preventFocus = true;\n var lastCell = parentsUntil(e.target, literals.rowCell);\n this.endAFCell = lastCell ? lastCell : this.endCell === this.endAFCell ? this.startAFCell : this.endAFCell;\n this.startAFCell = this.startCell;\n if (!isNullOrUndefined(this.endAFCell) && !isNullOrUndefined(this.startAFCell)) {\n this.updateStartCellsIndex();\n this.selectLikeAutoFill(e, true);\n this.updateAutoFillPosition();\n this.hideAFBorders();\n this.positionBorders();\n if (this.parent.isFrozenGrid()) {\n this.showHideBorders('none', true);\n this.refreshFrozenBorders();\n }\n if (this.parent.aggregates.length > 0) {\n this.parent.notify(events.refreshFooterRenderer, {});\n }\n }\n this.isAutoFillSel = false;\n this.preventFocus = false;\n }\n EventHandler.remove(this.parent.getContent(), 'mousemove', this.mouseMoveHandler);\n if (this.parent.frozenRows) {\n EventHandler.remove(this.parent.getHeaderContent(), 'mousemove', this.mouseMoveHandler);\n }\n EventHandler.remove(document, 'mouseup', this.mouseUpHandler);\n };\n Selection.prototype.hideAutoFill = function () {\n if (this.autofill) {\n this.autofill.style.display = 'none';\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Selection.prototype.updateAutoFillPosition = function () {\n if (this.parent.enableAutoFill && !this.parent.isEdit &&\n this.selectionSettings.cellSelectionMode.indexOf('Box') > -1 && !this.isRowType() && !this.isSingleSel()\n && this.selectedRowCellIndexes.length) {\n var index = parseInt(this.target.getAttribute(literals.dataColIndex), 10);\n var rindex = parseInt(this.target.getAttribute('index'), 10);\n var rowIndex = this.selectedRowCellIndexes[this.selectedRowCellIndexes.length - 1].rowIndex;\n var cells = this.getAutoFillCells(rowIndex, index).filter(function (ele) { return ele.style.display === ''; });\n var col = this.parent.getColumnByIndex(index);\n var isFrozenCol = col.getFreezeTableName() === 'movable';\n var isFrozenRow = rindex < this.parent.frozenRows;\n var isFrozenRight = this.parent.getFrozenMode() === literals.leftRight\n && col.getFreezeTableName() === literals.frozenRight;\n if (!select('#' + this.parent.element.id + '_autofill', parentsUntil(this.target, literals.table))) {\n if (select('#' + this.parent.element.id + '_autofill', this.parent.element)) {\n select('#' + this.parent.element.id + '_autofill', this.parent.element).remove();\n }\n this.autofill = createElement('div', { className: 'e-autofill', id: this.parent.element.id + '_autofill' });\n this.autofill.style.display = 'none';\n if (this.target.classList.contains('e-leftfreeze') || this.target.classList.contains('e-rightfreeze') ||\n this.target.classList.contains('e-fixedfreeze')) {\n this.autofill.classList.add('e-freeze-autofill');\n }\n if (!isFrozenRow) {\n if (!isFrozenCol) {\n this.parent.getContentTable().parentElement.appendChild(this.autofill);\n }\n else {\n this.parent.getContentTable().parentElement.appendChild(this.autofill);\n }\n }\n else {\n if (!isFrozenCol) {\n this.parent.getHeaderTable().parentElement.appendChild(this.autofill);\n }\n else {\n this.parent.getHeaderTable().parentElement.appendChild(this.autofill);\n }\n }\n if (isFrozenRight) {\n if (isFrozenRow) {\n this.parent.getHeaderTable().parentElement.appendChild(this.autofill);\n }\n else {\n this.parent.getContentTable().parentElement.appendChild(this.autofill);\n }\n }\n }\n var cell = cells[cells.length - 1];\n if (cell && cell.offsetParent) {\n var clientRect = cell.getBoundingClientRect();\n var parentOff = cell.offsetParent.getBoundingClientRect();\n if (cell.offsetParent.classList.contains('e-content') || cell.offsetParent.classList.contains('e-headercontent')) {\n parentOff = cell.offsetParent.querySelector('table').getBoundingClientRect();\n }\n var colWidth = this.isLastCell(cell) ? 4 : 0;\n var rowHeight = this.isLastRow(cell) ? 3 : 0;\n if (!this.parent.enableRtl) {\n this.autofill.style.left = clientRect.left - parentOff.left + clientRect.width - 4 - colWidth + 'px';\n }\n else {\n this.autofill.style.right = parentOff.right - clientRect.right + clientRect.width - 4 - colWidth + 'px';\n }\n this.autofill.style.top = clientRect.top - parentOff.top + clientRect.height - 5 - rowHeight + 'px';\n }\n this.autofill.style.display = '';\n }\n else {\n this.hideAutoFill();\n }\n };\n Selection.prototype.mouseDownHandler = function (e) {\n this.mouseButton = e.button;\n var target = e.target;\n var gObj = this.parent;\n var isDrag;\n var gridElement = parentsUntil(target, 'e-grid');\n if (gridElement && gridElement.id !== gObj.element.id || parentsUntil(target, literals.headerContent) && !this.parent.frozenRows ||\n parentsUntil(target, 'e-editedbatchcell') || parentsUntil(target, literals.editedRow)) {\n return;\n }\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (parentsUntil(target, literals.rowCell) && !e.shiftKey && !e.ctrlKey) {\n if (gObj.selectionSettings.cellSelectionMode.indexOf('Box') > -1 && !this.isRowType() && !this.isSingleSel()) {\n this.isCellDrag = true;\n isDrag = true;\n }\n else if (gObj.allowRowDragAndDrop && !gObj.isEdit && !this.parent.selectionSettings.checkboxOnly) {\n this.isRowDragSelected = false;\n if (!this.isRowType() || this.isSingleSel() || closest(target, 'td').classList.contains('e-selectionbackground')) {\n this.isDragged = false;\n return;\n }\n isDrag = true;\n this.element = this.parent.createElement('div', { className: 'e-griddragarea' });\n gObj.getContent().appendChild(this.element);\n }\n if (isDrag) {\n this.enableDrag(e, true);\n }\n }\n this.updateStartEndCells();\n if (target.classList.contains('e-autofill') || target.classList.contains('e-xlsel')) {\n this.isCellDrag = true;\n this.isAutoFillSel = true;\n this.enableDrag(e);\n }\n };\n Selection.prototype.updateStartEndCells = function () {\n var cells = [].slice.call(this.parent.element.getElementsByClassName('e-cellselectionbackground'));\n this.startCell = cells[0];\n this.endCell = cells[cells.length - 1];\n if (this.startCell) {\n this.startIndex = parseInt(this.startCell.parentElement.getAttribute(literals.dataRowIndex), 10);\n this.startCellIndex = parseInt(parentsUntil(this.startCell, literals.rowCell).getAttribute(literals.dataColIndex), 10);\n }\n };\n Selection.prototype.updateStartCellsIndex = function () {\n if (this.startCell) {\n this.startIndex = parseInt(this.startCell.parentElement.getAttribute(literals.dataRowIndex), 10);\n this.startCellIndex = parseInt(parentsUntil(this.startCell, literals.rowCell).getAttribute(literals.dataColIndex), 10);\n }\n };\n Selection.prototype.enableDrag = function (e, isUpdate) {\n var gObj = this.parent;\n if (isUpdate) {\n var tr = closest(e.target, 'tr');\n this.startDIndex = parseInt(tr.getAttribute(literals.dataRowIndex), 10);\n this.startDCellIndex = parseInt(parentsUntil(e.target, literals.rowCell).getAttribute(literals.dataColIndex), 10);\n }\n document.body.classList.add('e-disableuserselect');\n var gBRect = gObj.element.getBoundingClientRect();\n var postion = getPosition(e);\n this.x = postion.x - gBRect.left;\n this.y = postion.y - gBRect.top;\n EventHandler.add(gObj.getContent(), 'mousemove', this.mouseMoveHandler, this);\n if (this.parent.frozenRows) {\n EventHandler.add(gObj.getHeaderContent(), 'mousemove', this.mouseMoveHandler, this);\n }\n EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);\n };\n Selection.prototype.clearSelAfterRefresh = function (e) {\n var isInfiniteScroll = this.parent.enableInfiniteScrolling && e.requestType === 'infiniteScroll';\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection && !isInfiniteScroll) {\n this.clearSelection();\n }\n if ((e.requestType === 'virtualscroll' || isInfiniteScroll) && this.parent.isPersistSelection && this.isPartialSelection\n && this.isHdrSelectAllClicked) {\n var rowObj = this.parent.getRowsObject().filter(function (e) { return e.isSelectable; });\n var indexes = [];\n this.selectedRowState = {};\n this.persistSelectedData = [];\n for (var i = 0; i < rowObj.length; i++) {\n indexes.push(rowObj[parseInt(i.toString(), 10)].index);\n var pkValue = this.getPkValue(this.primaryKey, rowObj[parseInt(i.toString(), 10)].data);\n this.selectedRowState[\"\" + pkValue] = true;\n this.persistSelectedData.push(rowObj[parseInt(i.toString(), 10)].data);\n }\n this.selectedRowIndexes = indexes;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Selection.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.evtHandlers = [{ event: events.uiUpdate, handler: this.enableAfterRender },\n { event: events.initialEnd, handler: this.initializeSelection },\n { event: events.rowSelectionComplete, handler: this.onActionComplete },\n { event: events.cellSelectionComplete, handler: this.onActionComplete },\n { event: events.inBoundModelChanged, handler: this.onPropertyChanged },\n { event: events.cellFocused, handler: this.onCellFocused },\n { event: events.beforeFragAppend, handler: this.clearSelAfterRefresh },\n { event: events.columnPositionChanged, handler: this.columnPositionChanged },\n { event: events.contentReady, handler: this.initialEnd },\n { event: events.rowsRemoved, handler: this.rowsRemoved },\n { event: events.headerRefreshed, handler: this.refreshHeader },\n { event: events.destroyAutoFillElements, handler: this.destroyAutoFillElements },\n { event: events.destroy, handler: this.destroy }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n this.actionBeginFunction = this.actionBegin.bind(this);\n this.actionCompleteFunction = this.actionComplete.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunction);\n this.addEventListener_checkbox();\n };\n /**\n * @returns {void}\n * @hidden\n */\n Selection.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n EventHandler.remove(document, 'mouseup', this.mouseUpHandler);\n EventHandler.remove(this.parent.getContent(), 'mousedown', this.mouseDownHandler);\n EventHandler.remove(this.parent.getHeaderContent(), 'mousedown', this.mouseDownHandler);\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunction);\n this.removeEventListener_checkbox();\n this.parent.off(events.destroyAutoFillElements, this.destroyAutoFillElements);\n };\n Selection.prototype.wireEvents = function () {\n this.isMacOS = navigator.userAgent.indexOf('Mac OS') !== -1;\n if (this.isMacOS) {\n EventHandler.add(this.parent.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.parent.element, 'keyup', this.keyUpHandler, this);\n }\n else {\n if (!this.parent.allowKeyboard) {\n EventHandler.add(this.parent.element, 'keydown', this.keyDownHandler, this);\n }\n }\n };\n Selection.prototype.unWireEvents = function () {\n if (this.isMacOS) {\n EventHandler.remove(this.parent.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.parent.element, 'keyup', this.keyUpHandler);\n }\n else {\n if (!this.parent.allowKeyboard) {\n EventHandler.remove(this.parent.element, 'keydown', this.keyDownHandler);\n }\n }\n };\n Selection.prototype.columnPositionChanged = function () {\n if (!this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n Selection.prototype.refreshHeader = function () {\n this.setCheckAllState();\n };\n Selection.prototype.rowsRemoved = function (e) {\n for (var i = 0; i < e.records.length; i++) {\n var pkValue = this.getPkValue(this.primaryKey, e.records[parseInt(i.toString(), 10)]);\n delete (this.selectedRowState[\"\" + pkValue]);\n --this.totalRecordsCount;\n }\n this.setCheckAllState();\n };\n Selection.prototype.beforeFragAppend = function (e) {\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n Selection.prototype.getCheckAllBox = function () {\n return this.parent.getHeaderContent().querySelector('.e-checkselectall');\n };\n Selection.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.render();\n this.initPerisistSelection();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Selection.prototype.render = function (e) {\n EventHandler.add(this.parent.getContent(), 'mousedown', this.mouseDownHandler, this);\n EventHandler.add(this.parent.getHeaderContent(), 'mousedown', this.mouseDownHandler, this);\n };\n Selection.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n var gObj = this.parent;\n if (!isNullOrUndefined(e.properties.type)) {\n if (this.selectionSettings.type === 'Single') {\n gObj.element.removeAttribute('aria-multiselectable');\n if (this.selectedRowCellIndexes.length > 1) {\n this.clearCellSelection();\n this.prevCIdxs = undefined;\n }\n if (this.selectedRowIndexes.length > 1) {\n this.clearRowSelection();\n this.prevRowIndex = undefined;\n }\n if (this.selectedColumnsIndexes.length > 1) {\n this.clearColumnSelection();\n this.prevColIndex = undefined;\n }\n this.enableSelectMultiTouch = false;\n this.hidePopUp();\n }\n else if (this.selectionSettings.type === 'Multiple') {\n gObj.element.setAttribute('aria-multiselectable', 'true');\n }\n }\n if (!isNullOrUndefined(e.properties.mode) ||\n !isNullOrUndefined(e.properties.cellSelectionMode)) {\n this.clearSelection();\n this.prevRowIndex = undefined;\n this.prevCIdxs = undefined;\n this.prevColIndex = undefined;\n }\n this.isPersisted = true;\n this.checkBoxSelectionChanged();\n this.isPersisted = false;\n if (!this.parent.isCheckBoxSelection) {\n this.initPerisistSelection();\n }\n var checkboxColumn = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length) {\n gObj.isCheckBoxSelection = !(this.selectionSettings.checkboxMode === 'ResetOnRowClick');\n }\n this.drawBorders();\n };\n Selection.prototype.hidePopUp = function () {\n if (this.parent.element.querySelector('.e-gridpopup').getElementsByClassName('e-rowselect').length) {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Selection.prototype.initialEnd = function () {\n if (!this.selectedRowIndexes.length) {\n this.parent.off(events.contentReady, this.initialEnd);\n this.selectRow(this.parent.selectedRowIndex);\n }\n };\n Selection.prototype.checkBoxSelectionChanged = function () {\n var gobj = this.parent;\n gobj.off(events.contentReady, this.checkBoxSelectionChanged);\n var checkboxColumn = gobj.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length > 0) {\n gobj.isCheckBoxSelection = true;\n this.chkField = checkboxColumn[0].field;\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n if (isNullOrUndefined(this.totalRecordsCount)) {\n this.totalRecordsCount = this.getCurrentBatchRecordChanges().length;\n }\n if (this.isSingleSel()) {\n gobj.selectionSettings.type = 'Multiple';\n gobj.dataBind();\n }\n else {\n this.initPerisistSelection();\n }\n }\n if (!gobj.isCheckBoxSelection && !this.isPersisted) {\n this.chkField = null;\n this.initPerisistSelection();\n }\n };\n Selection.prototype.initPerisistSelection = function () {\n var gobj = this.parent;\n if (this.parent.selectionSettings.persistSelection && this.parent.getPrimaryKeyFieldNames().length > 0) {\n gobj.isPersistSelection = true;\n this.ensureCheckboxFieldSelection();\n }\n else if (this.parent.getPrimaryKeyFieldNames().length > 0) {\n gobj.isPersistSelection = false;\n this.ensureCheckboxFieldSelection();\n }\n else {\n gobj.isPersistSelection = false;\n this.selectedRowState = {};\n }\n };\n Selection.prototype.ensureCheckboxFieldSelection = function () {\n var gobj = this.parent;\n this.primaryKey = this.parent.getPrimaryKeyFieldNames()[0];\n if (!gobj.enableVirtualization && this.chkField\n && ((gobj.isPersistSelection && Object.keys(this.selectedRowState).length === 0) ||\n !gobj.isPersistSelection)) {\n var data = this.parent.getDataModule();\n var query = new Query().where(this.chkField, 'equal', true);\n if (!query.params) {\n query.params = this.parent.query.params;\n }\n var dataManager = data.getData({}, query);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n this.parent.showSpinner();\n dataManager.then(function (e) {\n proxy_1.dataSuccess(e.result);\n proxy_1.refreshPersistSelection();\n proxy_1.parent.hideSpinner();\n });\n }\n };\n Selection.prototype.dataSuccess = function (res) {\n var data = (this.parent.getDataModule().isRemote() && !isNullOrUndefined(res['result'])) ? res['result'] : res;\n for (var i = 0; i < data.length; i++) {\n var pkValue = this.getPkValue(this.primaryKey, data[parseInt(i.toString(), 10)]);\n if (isNullOrUndefined(this.selectedRowState[\"\" + pkValue]) && data[parseInt(i.toString(), 10)][this.chkField]) {\n this.selectedRowState[\"\" + pkValue] = data[parseInt(i.toString(), 10)][this.chkField];\n }\n }\n this.persistSelectedData = data;\n };\n Selection.prototype.setRowSelection = function (state) {\n if (!(this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result))) {\n if (state) {\n if (this.isPartialSelection && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n var rowObj = this.parent.getRowsObject().filter(function (e) { return e.isSelectable; });\n for (var _i = 0, rowObj_1 = rowObj; _i < rowObj_1.length; _i++) {\n var row = rowObj_1[_i];\n this.selectedRowState[this.getPkValue(this.primaryKey, row.data)] = true;\n }\n }\n else {\n var selectedData = this.isPartialSelection ? this.parent.partialSelectedRecords : this.getData();\n if (this.parent.groupSettings.columns.length) {\n for (var _a = 0, _b = this.isPartialSelection ? selectedData : selectedData.records; _a < _b.length; _a++) {\n var data = _b[_a];\n this.selectedRowState[this.getPkValue(this.primaryKey, data)] = true;\n }\n }\n else {\n for (var _c = 0, selectedData_1 = selectedData; _c < selectedData_1.length; _c++) {\n var data = selectedData_1[_c];\n this.selectedRowState[this.getPkValue(this.primaryKey, data)] = true;\n }\n }\n }\n }\n else {\n this.selectedRowState = {};\n }\n // (this.getData()).forEach(function (data) {\n // this.selectedRowState[data[this.primaryKey]] = true;\n // })\n }\n else {\n if (state) {\n var selectedStateKeys = Object.keys(this.selectedRowState);\n var unSelectedRowStateKeys = Object.keys(this.unSelectedRowState);\n if (!this.isCheckboxReset) {\n var rowData = (this.parent.groupSettings.columns.length && this.parent.isPersistSelection) ?\n this.parent.currentViewData['records'] : this.parent.currentViewData;\n for (var _d = 0, rowData_1 = rowData; _d < rowData_1.length; _d++) {\n var data = rowData_1[_d];\n if (!isNullOrUndefined(data[this.primaryKey])) {\n var key = data[this.primaryKey].toString();\n if (selectedStateKeys.indexOf(key) === -1 && unSelectedRowStateKeys.indexOf(key) === -1) {\n this.selectedRowState[data[this.primaryKey]] = true;\n }\n }\n }\n }\n }\n else {\n this.selectedRowState = {};\n this.unSelectedRowState = {};\n this.rmtHdrChkbxClicked = false;\n }\n }\n };\n Selection.prototype.getData = function () {\n return this.parent.getDataModule().dataManager.executeLocal(this.parent.getDataModule().generateQuery(true));\n };\n Selection.prototype.getAvailableSelectedData = function () {\n var filteredSearchedSelectedData = new DataManager(this.persistSelectedData).executeLocal(this.parent.getDataModule().generateQuery(true));\n if (this.parent.groupSettings.columns.length && filteredSearchedSelectedData &&\n filteredSearchedSelectedData.records) {\n filteredSearchedSelectedData = filteredSearchedSelectedData.records.slice();\n }\n return filteredSearchedSelectedData;\n };\n Selection.prototype.refreshPersistSelection = function () {\n var rows = this.parent.getRows();\n this.totalRecordsCount = this.parent.getCurrentViewRecords().length;\n if (this.parent.allowPaging) {\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n }\n if (!isNullOrUndefined(rows) && rows.length > 0 && (this.parent.isPersistSelection || this.chkField)) {\n var indexes = [];\n for (var j = 0; j < rows.length; j++) {\n var rowObj = this.getRowObj(rows[parseInt(j.toString(), 10)]);\n var pKey = rowObj ? rowObj.data ? this.getPkValue(this.primaryKey, rowObj.data) : null : null;\n if (pKey === null) {\n return;\n }\n if (this.isPartialSelection && !rowObj.isSelectable) {\n continue;\n }\n var checkState = void 0;\n var chkBox = rows[parseInt(j.toString(), 10)].querySelector('.e-checkselect');\n if (this.selectedRowState[\"\" + pKey] || (this.parent.checkAllRows === 'Check' && this.selectedRowState[\"\" + pKey] &&\n this.totalRecordsCount === Object.keys(this.selectedRowState).length && this.chkAllCollec.indexOf(pKey) < 0)\n || (this.parent.checkAllRows === 'Uncheck' && this.chkAllCollec.indexOf(pKey) > 0 && !this.parent.selectedRowIndex)\n || (this.parent.checkAllRows === 'Intermediate' && !isNullOrUndefined(this.chkField) && rowObj.data[this.chkField])) {\n indexes.push(parseInt(rows[parseInt(j.toString(), 10)].getAttribute(literals.dataRowIndex), 10));\n checkState = true;\n }\n else {\n checkState = false;\n if (this.checkedTarget !== chkBox && this.parent.isCheckBoxSelection && chkBox) {\n removeAddCboxClasses(chkBox.nextElementSibling, checkState);\n }\n }\n this.updatePersistCollection(rows[parseInt(j.toString(), 10)], checkState);\n }\n if (this.isSingleSel() && indexes.length > 0) {\n this.selectRow(indexes[0], true);\n }\n else {\n this.selectRows(indexes);\n }\n }\n if ((this.parent.isCheckBoxSelection || this.parent.selectionSettings.checkboxMode === 'ResetOnRowClick') && this.getCurrentBatchRecordChanges().length > 0) {\n this.setCheckAllState();\n }\n };\n Selection.prototype.actionBegin = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n var editChkBox = this.parent.element.querySelector('.e-edit-checkselect');\n if (!isNullOrUndefined(editChkBox)) {\n var row = closest(editChkBox, '.' + literals.editedRow);\n if (row) {\n if (this.parent.editSettings.mode === 'Dialog') {\n row = this.parent.element.querySelector('.e-dlgeditrow');\n }\n var rowObj = this.getRowObj(row);\n if (!rowObj) {\n return;\n }\n this.selectedRowState[this.getPkValue(this.primaryKey, rowObj.data)] = rowObj.isSelected = editChkBox.checked;\n }\n else {\n this.isCheckedOnAdd = editChkBox.checked;\n }\n }\n }\n if (this.parent.isPersistSelection && this.isPartialSelection) {\n if (e.requestType === 'paging' && (this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result))) {\n this.selectedRowIndexes = [];\n }\n if (e.requestType === 'filtering' || e.requestType === 'searching') {\n this.parent.partialSelectedRecords = [];\n this.parent.disableSelectedRecords = [];\n }\n }\n };\n Selection.prototype.actionComplete = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n if (e.action === 'add') {\n if (this.isCheckedOnAdd) {\n var rowObj = this.parent.getRowObjectFromUID(this.parent.getRows()[e.selectedRow].getAttribute('data-uid'));\n this.selectedRowState[this.getPkValue(this.primaryKey, rowObj.data)] = rowObj.isSelected = this.isCheckedOnAdd;\n }\n this.isHdrSelectAllClicked = false;\n this.setCheckAllState();\n }\n this.refreshPersistSelection();\n }\n if (e.requestType === 'delete' && this.parent.isPersistSelection) {\n var records = e.data;\n var data = records.slice();\n for (var i = 0; i < data.length; i++) {\n var pkValue = this.getPkValue(this.primaryKey, data[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(pkValue)) {\n this.updatePersistDelete(pkValue, this.isPartialSelection);\n }\n }\n this.isHdrSelectAllClicked = false;\n this.setCheckAllState();\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n }\n if (e.requestType === 'paging') {\n if (this.parent.isPersistSelection && this.isPartialSelection && this.isHdrSelectAllClicked) {\n var rows = this.parent.getRowsObject();\n var indexes = [];\n for (var i = 0; i < rows.length; i++) {\n if (rows[parseInt(i.toString(), 10)].isSelectable) {\n indexes.push(rows[parseInt(i.toString(), 10)].index);\n }\n }\n if (indexes.length) {\n this.selectRows(indexes);\n }\n }\n this.prevRowIndex = undefined;\n this.prevCIdxs = undefined;\n this.prevECIdxs = undefined;\n }\n };\n Selection.prototype.onDataBound = function () {\n if (!this.parent.enableVirtualization && this.parent.isPersistSelection) {\n if (this.selectedRecords.length) {\n this.isPrevRowSelection = true;\n }\n }\n if ((this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result)) && this.rmtHdrChkbxClicked) {\n if (this.parent.checkAllRows === 'Intermediate') {\n this.setRowSelection(true);\n }\n else if (this.parent.checkAllRows === 'Uncheck') {\n this.setRowSelection(false);\n }\n }\n if (this.parent.enableVirtualization) {\n this.setCheckAllState();\n }\n if (this.parent.isPersistSelection) {\n this.refreshPersistSelection();\n }\n this.initialRowSelection = this.isRowType() && this.parent.element.querySelectorAll('.e-selectionbackground') &&\n this.parent.getSelectedRows().length ? true : false;\n if (this.parent.isCheckBoxSelection && !this.initialRowSelection) {\n var totalRecords = this.parent.getRowsObject();\n var indexes = [];\n for (var i = 0; i < totalRecords.length; i++) {\n if (totalRecords[parseInt(i.toString(), 10)].isSelected) {\n indexes.push(i);\n }\n }\n if (indexes.length) {\n this.selectRows(indexes);\n }\n this.initialRowSelection = true;\n }\n };\n Selection.prototype.updatePersistSelectedData = function (checkState) {\n if (this.parent.isPersistSelection) {\n var rows = this.parent.getRows();\n for (var i = 0; i < rows.length; i++) {\n this.updatePersistCollection(rows[parseInt(i.toString(), 10)], checkState);\n }\n if (this.parent.checkAllRows === 'Uncheck') {\n this.setRowSelection(false);\n this.persistSelectedData = (this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result))\n ? this.persistSelectedData : [];\n }\n else if (this.parent.checkAllRows === 'Check') {\n this.setRowSelection(true);\n this.persistSelectedData = !(this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result))\n && !this.isPartialSelection ?\n this.parent.groupSettings.columns.length ? this.getData().records.slice() :\n this.getData().slice() : this.persistSelectedData;\n }\n }\n };\n Selection.prototype.checkSelectAllAction = function (checkState) {\n var cRenderer = this.getRenderer();\n var editForm = this.parent.element.querySelector('.e-gridform');\n this.checkedTarget = this.getCheckAllBox();\n if (checkState && this.getCurrentBatchRecordChanges().length) {\n this.parent.checkAllRows = 'Check';\n this.updatePersistSelectedData(checkState);\n this.selectRowsByRange(cRenderer.getVirtualRowIndex(0), cRenderer.getVirtualRowIndex(this.getCurrentBatchRecordChanges().length - 1));\n }\n else {\n this.parent.checkAllRows = 'Uncheck';\n this.updatePersistSelectedData(checkState);\n this.clearSelection();\n }\n this.chkAllCollec = [];\n if (!isNullOrUndefined(editForm)) {\n var editChkBox = editForm.querySelector('.e-edit-checkselect');\n if (!isNullOrUndefined(editChkBox)) {\n removeAddCboxClasses(editChkBox.nextElementSibling, checkState);\n }\n }\n };\n Selection.prototype.checkSelectAll = function (checkBox) {\n var _this = this;\n var stateStr = this.getCheckAllStatus(checkBox);\n var state = stateStr === 'Check';\n this.isHeaderCheckboxClicked = true;\n if ((this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result)) && ((stateStr === 'Uncheck' || this.isCheckboxReset) ||\n (stateStr === 'Intermediate' && this.parent.isPersistSelection))) {\n this.rmtHdrChkbxClicked = true;\n }\n else {\n this.rmtHdrChkbxClicked = false;\n }\n if (this.rmtHdrChkbxClicked && this.isCheckboxReset) {\n this.unSelectedRowState = {};\n }\n this.isCheckboxReset = false;\n if (stateStr === 'Intermediate') {\n if (!this.chkField && !this.parent.isPersistSelection) {\n state = this.getCurrentBatchRecordChanges().some(function (data) {\n return _this.getPkValue(_this.primaryKey, data) in _this.selectedRowState;\n });\n }\n if ((this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result)) && this.parent.isPersistSelection) {\n for (var i = 0; i < this.getCurrentBatchRecordChanges().length; i++) {\n if (!isNullOrUndefined(this.getPkValue(this.primaryKey, this.getCurrentBatchRecordChanges()[\"\" + i]))) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (Object.keys(this.selectedRowState).includes((this.getPkValue(this.primaryKey, this.getCurrentBatchRecordChanges()[\"\" + i])).toString())) {\n state = true;\n }\n else {\n state = false;\n break;\n }\n }\n }\n }\n }\n if (this.parent.isPersistSelection && this.parent.allowPaging) {\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n }\n this.checkSelectAllAction(!state);\n this.target = null;\n if (this.getCurrentBatchRecordChanges().length > 0) {\n this.setCheckAllState();\n this.updateSelectedRowIndexes();\n }\n this.triggerChkChangeEvent(checkBox, !state);\n };\n Selection.prototype.getCheckAllStatus = function (ele) {\n var classes = ele ? ele.nextElementSibling.classList :\n this.getCheckAllBox().nextElementSibling.classList;\n var status;\n if (classes.contains('e-check')) {\n status = 'Check';\n }\n else if (classes.contains('e-uncheck')) {\n status = 'Uncheck';\n }\n else if (classes.contains('e-stop')) {\n status = 'Intermediate';\n }\n else {\n status = 'None';\n }\n return status;\n };\n Selection.prototype.checkSelect = function (checkBox) {\n var target = closest(this.checkedTarget, '.' + literals.rowCell);\n var gObj = this.parent;\n this.isMultiCtrlRequest = true;\n var rIndex = 0;\n this.isHeaderCheckboxClicked = false;\n if (isGroupAdaptive(gObj)) {\n var uid = target.parentElement.getAttribute('data-uid');\n if (this.parent.enableVirtualization && this.parent.groupSettings.columns.length) {\n rIndex = parseInt(target.parentElement.getAttribute(literals.dataRowIndex), 10);\n }\n else {\n rIndex = gObj.getRows().map(function (m) { return m.getAttribute('data-uid'); }).indexOf(uid);\n }\n }\n else {\n rIndex = parseInt(target.parentElement.getAttribute(literals.dataRowIndex), 10);\n }\n if (this.parent.isPersistSelection && this.parent.element.getElementsByClassName(literals.addedRow).length > 0 &&\n this.parent.editSettings.newRowPosition === 'Top' && !this.parent.editSettings.showAddNewRow) {\n ++rIndex;\n }\n this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute(literals.dataColIndex), 10));\n this.moveIntoUncheckCollection(closest(target, '.' + literals.row));\n this.setCheckAllState();\n this.isMultiCtrlRequest = false;\n this.triggerChkChangeEvent(checkBox, checkBox.nextElementSibling.classList.contains('e-check'));\n };\n Selection.prototype.moveIntoUncheckCollection = function (row) {\n if (this.parent.checkAllRows === 'Check' || this.parent.checkAllRows === 'Uncheck') {\n var rowObj = this.getRowObj(row);\n var pKey = rowObj && rowObj.data ? this.getPkValue(this.primaryKey, rowObj.data) : null;\n if (!pKey) {\n return;\n }\n if (this.chkAllCollec.indexOf(pKey) < 0) {\n this.chkAllCollec.push(pKey);\n }\n else {\n this.chkAllCollec.splice(this.chkAllCollec.indexOf(pKey), 1);\n }\n }\n };\n Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState) {\n this.parent.trigger(events.checkBoxChange, {\n checked: checkState, selectedRowIndexes: this.parent.getSelectedRowIndexes(),\n target: checkBox\n });\n if (!this.parent.isEdit) {\n this.checkedTarget = null;\n }\n };\n Selection.prototype.updateSelectedRowIndexes = function () {\n if (this.parent.isCheckBoxSelection && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling) &&\n this.isPartialSelection && !(this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result))\n && this.parent.selectionSettings.persistSelection) {\n if (this.parent.checkAllRows !== 'Uncheck') {\n var rowObj = this.parent.getRowsObject().filter(function (e) { return e.isSelectable; });\n for (var _i = 0, rowObj_2 = rowObj; _i < rowObj_2.length; _i++) {\n var row = rowObj_2[_i];\n this.selectedRowIndexes.push(row.index);\n }\n }\n }\n if (this.parent.isCheckBoxSelection && this.parent.enableVirtualization && !this.isPartialSelection &&\n (this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result))\n && !this.parent.isPersistSelection && this.parent.checkAllRows === 'Check') {\n var rowObj = this.parent.getRowsObject().filter(function (e) { return e.isSelectable; });\n if (rowObj.length !== this.selectedRowIndexes.length) {\n for (var _a = 0, rowObj_3 = rowObj; _a < rowObj_3.length; _a++) {\n var row = rowObj_3[_a];\n if (this.selectedRowIndexes.indexOf(row.index) <= -1) {\n this.selectedRowIndexes.push(row.index);\n }\n }\n }\n }\n };\n Selection.prototype.updateSelectedRowIndex = function (index) {\n if (this.parent.isCheckBoxSelection && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && !(this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result))\n && !this.isPartialSelection) {\n if (this.parent.checkAllRows === 'Check') {\n this.selectedRowIndexes = [];\n var dataLength = this.parent.groupSettings.columns.length ? this.getData()['records'].length :\n this.getData().length;\n for (var data = 0; data < dataLength; data++) {\n this.selectedRowIndexes.push(data);\n }\n }\n else if (this.parent.checkAllRows === 'Uncheck') {\n this.selectedRowIndexes = [];\n }\n else {\n var row = this.parent.getRowByIndex(index);\n if (index && row && row.getAttribute('aria-selected') === 'false') {\n var selectedVal = this.selectedRowIndexes.indexOf(index);\n this.selectedRowIndexes.splice(selectedVal, 1);\n }\n }\n }\n };\n Selection.prototype.isAllSelected = function (count) {\n if (this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result)) {\n return this.getAvailableSelectedData().length === (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling\n ? this.parent.totalDataRecordsCount : this.totalRecordsCount);\n }\n else {\n if (this.isPartialSelection) {\n if (this.parent.allowPaging && this.parent.pageSettings.pageSize < this.parent.pageSettings.totalRecordsCount) {\n var data = this.parent.partialSelectedRecords;\n for (var i = 0; i < data.length; i++) {\n var pKey = this.getPkValue(this.primaryKey, data[parseInt(i.toString(), 10)]);\n if (!this.selectedRowState[\"\" + pKey]) {\n return false;\n }\n }\n return true;\n }\n else {\n return this.isSelectAllRowCount(count);\n }\n }\n else {\n var data = (this.parent.groupSettings.columns.length) ? this.getData()['records'] : this.getData();\n for (var i = 0; i < data.length; i++) {\n var pKey = this.getPkValue(this.primaryKey, data[parseInt(i.toString(), 10)]);\n if (!this.selectedRowState[\"\" + pKey]) {\n return false;\n }\n }\n return true;\n }\n }\n };\n Selection.prototype.someDataSelected = function () {\n if ((this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result))\n && (this.parent.searchSettings.key.length || this.parent.filterSettings.columns.length)) {\n var filteredSearchedSelectedData = this.getAvailableSelectedData();\n for (var i = 0; i < filteredSearchedSelectedData.length; i++) {\n var pKey = this.getPkValue(this.primaryKey, filteredSearchedSelectedData[parseInt(i.toString(), 10)]);\n if (this.selectedRowState[\"\" + pKey]) {\n return false;\n }\n }\n }\n var data = this.isPartialSelection ? this.parent.partialSelectedRecords\n : (this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result)) ? [] : this.getData();\n for (var i = 0; i < data.length; i++) {\n var pKey = this.getPkValue(this.primaryKey, data[parseInt(i.toString(), 10)]);\n if (this.selectedRowState[\"\" + pKey]) {\n return false;\n }\n }\n return true;\n };\n Selection.prototype.setCheckAllState = function (index, isInteraction) {\n if (this.parent.isCheckBoxSelection || this.parent.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n var checkToSelectAll = false;\n var isFiltered = false;\n var checkedLen = Object.keys(this.selectedRowState).length;\n if (!this.parent.isPersistSelection) {\n checkedLen = this.selectedRowIndexes.length;\n this.totalRecordsCount = this.getCurrentBatchRecordChanges().length;\n }\n if (this.parent.isPersistSelection && !((this.parent.getDataModule().isRemote() ||\n (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result)) &&\n this.isPartialSelection)\n && (this.parent.searchSettings.key.length || this.parent.filterSettings.columns.length)) {\n isFiltered = true;\n checkToSelectAll = this.isAllSelected(checkedLen);\n }\n var input = this.getCheckAllBox();\n if (input) {\n var spanEle = input.nextElementSibling;\n removeClass([spanEle], ['e-check', 'e-stop', 'e-uncheck']);\n setChecked(input, false);\n input.indeterminate = false;\n var getRecord = this.parent.getDataModule().isRemote() ? [] :\n (this.parent.groupSettings.columns.length) ? this.getData()['records'] : this.getData();\n if ((checkToSelectAll && isFiltered && (this.parent.getDataModule().isRemote() ||\n (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result) ||\n getRecord.length)) || (!isFiltered && ((checkedLen === this.totalRecordsCount && this.totalRecordsCount\n && !this.isPartialSelection && (!(this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result))\n || this.parent.allowPaging)) ||\n (!this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling\n && this.isPartialSelection && (this.isSelectAllRowCount(checkedLen) || this.isHdrSelectAllClicked))\n || ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && !this.parent.allowPaging && ((!(this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result)) &&\n getRecord.length && checkedLen === getRecord.length) || ((this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result)) &&\n !this.isPartialSelection && ((checkedLen === this.parent.totalDataRecordsCount) || ((this.\n isSelectAllRowCount(checkedLen) || checkedLen === this.totalRecordsCount) && !this.parent.isPersistSelection))) ||\n (this.isPartialSelection && (this.isHdrSelectAllClicked || this.isSelectAllRowCount(checkedLen)))))\n || (checkedLen === this.totalRecordsCount && this.totalRecordsCount && !this.isPartialSelection &&\n !this.parent.allowPaging && !this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling)))) {\n addClass([spanEle], ['e-check']);\n setChecked(input, true);\n if (isInteraction) {\n this.getRenderer().setSelection(null, true, true);\n }\n this.parent.checkAllRows = 'Check';\n }\n else if (((!this.selectedRowIndexes.length && (!this.parent.enableVirtualization ||\n (!this.persistSelectedData.length && !isFiltered) || (isFiltered && this.someDataSelected())) ||\n checkedLen === 0 && this.getCurrentBatchRecordChanges().length === 0) && !this.parent.allowPaging) ||\n (this.parent.allowPaging && (checkedLen === 0 || (checkedLen && isFiltered && this.someDataSelected())))) {\n addClass([spanEle], ['e-uncheck']);\n if (isInteraction) {\n this.getRenderer().setSelection(null, false, true);\n }\n this.parent.checkAllRows = 'Uncheck';\n }\n else {\n addClass([spanEle], ['e-stop']);\n this.parent.checkAllRows = 'Intermediate';\n input.indeterminate = true;\n }\n if (checkedLen === 0 && this.getCurrentBatchRecordChanges().length === 0) {\n addClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n else {\n removeClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n if (this.isPartialSelection) {\n var rowCount = this.parent.getRowsObject().filter(function (e) { return e.isSelectable; }).length;\n if (rowCount === 0 && spanEle.parentElement.querySelector('.e-frame').classList.contains('e-uncheck')) {\n addClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n else {\n removeClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n }\n if ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && !this.parent.allowPaging && !(this.parent.getDataModule().isRemote()\n || (!isNullOrUndefined(this.parent.dataSource) && this.parent.dataSource.result))) {\n this.updateSelectedRowIndex(index);\n }\n }\n }\n };\n Selection.prototype.isSelectAllRowCount = function (count) {\n var rowCount = 0;\n var rowObj = this.parent.getRowsObject();\n if (this.parent.selectionSettings.persistSelection && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n var dataLen = (this.parent.getDataModule().isRemote() || (!isNullOrUndefined(this.parent.dataSource)\n && this.parent.dataSource.result)) ?\n this.parent.totalDataRecordsCount : this.getData() && this.getData().length;\n if (dataLen === rowObj.length) {\n rowCount = rowObj.filter(function (e) { return e.isSelectable; }).length;\n return rowCount && count === rowCount;\n }\n else {\n return false;\n }\n }\n else {\n if (this.parent.allowPaging && this.parent.selectionSettings.persistSelection) {\n rowCount = this.parent.partialSelectedRecords.length + this.parent.disableSelectedRecords.length;\n if (rowCount === this.totalRecordsCount) {\n return this.parent.partialSelectedRecords.length && count === this.parent.partialSelectedRecords.length;\n }\n else {\n return false;\n }\n }\n else {\n rowCount = rowObj.filter(function (e) { return e.isSelectable; }).length;\n return rowCount && count === rowCount;\n }\n }\n };\n Selection.prototype.keyDownHandler = function (e) {\n // Below are keyCode for command key in MAC OS. Safari/Chrome(91-Left command, 93-Right Command), Opera(17), FireFox(224)\n if ((((Browser.info.name === 'chrome') || (Browser.info.name === 'safari')) && (e.keyCode === 91 || e.keyCode === 93)) ||\n (Browser.info.name === 'opera' && e.keyCode === 17) || (Browser.info.name === 'mozilla' && e.keyCode === 224)) {\n this.cmdKeyPressed = true;\n }\n var targetHeadCell = parentsUntil(e.target, 'e-headercell');\n var targetRowCell = parentsUntil(e.target, literals.rowCell);\n var isCheckBox = targetHeadCell ? targetHeadCell.children[0].classList.contains('e-headerchkcelldiv') :\n targetRowCell ? targetRowCell.classList.contains('e-gridchkbox') : false;\n if (isCheckBox && !this.parent.allowKeyboard && e.keyCode === 32) {\n e.preventDefault();\n }\n };\n Selection.prototype.keyUpHandler = function (e) {\n if ((((Browser.info.name === 'chrome') || (Browser.info.name === 'safari')) && (e.keyCode === 91 || e.keyCode === 93)) ||\n (Browser.info.name === 'opera' && e.keyCode === 17) || (Browser.info.name === 'mozilla' && e.keyCode === 224)) {\n this.cmdKeyPressed = false;\n }\n };\n Selection.prototype.clickHandler = function (e) {\n var target = e.target;\n this.actualTarget = target;\n if (!this.isAutoFillSel && !e.ctrlKey && !e.shiftKey) {\n this.startAFCell = this.endAFCell = null;\n }\n if (this.selectionSettings.persistSelection) {\n this.deSelectedData = iterateExtend(this.persistSelectedData);\n }\n if (parentsUntil(target, literals.row) || parentsUntil(target, 'e-headerchkcelldiv') ||\n (this.selectionSettings.allowColumnSelection && target.classList.contains('e-headercell'))) {\n this.isInteracted = true;\n }\n this.cmdKeyPressed = e.metaKey;\n this.isMultiCtrlRequest = e.ctrlKey || this.enableSelectMultiTouch ||\n (this.isMacOS && this.cmdKeyPressed);\n if (!this.parent.allowKeyboard) {\n this.isMultiShiftRequest = false;\n this.isMultiCtrlRequest = false;\n }\n else {\n this.isMultiShiftRequest = e.shiftKey;\n }\n this.isMultiCtrlRequestCell = this.isMultiCtrlRequest;\n this.popUpClickHandler(e);\n var chkSelect = false;\n this.preventFocus = true;\n var checkBox;\n var checkWrap = parentsUntil(target, 'e-checkbox-wrapper');\n this.checkSelectAllClicked = checkWrap && checkWrap.getElementsByClassName('e-checkselectall') ||\n (this.selectionSettings.persistSelection && parentsUntil(target, literals.row)) ? true : false;\n if (this.selectionSettings.persistSelection && this.isPartialSelection && parentsUntil(target, 'e-headerchkcelldiv')\n && !target.querySelector('.e-checkbox-disabled')) {\n this.isHdrSelectAllClicked = true;\n }\n if (checkWrap && checkWrap.querySelectorAll('.e-checkselect,.e-checkselectall').length > 0) {\n checkBox = checkWrap.querySelector('input[type=\"checkbox\"]');\n chkSelect = true;\n }\n this.drawBorders();\n this.updateAutoFillPosition();\n target = parentsUntil(target, literals.rowCell);\n if (this.parent.isReact && (target && !target.parentElement && target.classList.contains('e-rowcell'))) {\n target = this.parent.getCellFromIndex(parseInt(target.getAttribute('index'), 10), parseInt(target.getAttribute('data-colindex'), 10));\n }\n if (this.isRowDragSelected && isNullOrUndefined(target) && this.parent.allowRowDragAndDrop &&\n this.selectionSettings.persistSelection && this.checkSelectAllClicked) {\n this.isRowDragSelected = false;\n }\n if (((target && target.parentElement.classList.contains(literals.row) && !this.parent.selectionSettings.checkboxOnly) || chkSelect)\n && !this.isRowDragSelected) {\n if (this.parent.isCheckBoxSelection) {\n this.isMultiCtrlRequest = true;\n }\n this.target = target;\n if (!isNullOrUndefined(checkBox)) {\n this.checkedTarget = checkBox;\n if (checkBox.classList.contains('e-checkselectall')) {\n this.checkSelectAll(checkBox);\n }\n else {\n this.checkSelect(checkBox);\n }\n }\n else {\n var rIndex = 0;\n rIndex = parseInt(target.parentElement.getAttribute(literals.dataRowIndex), 10);\n if (this.parent.isPersistSelection && !this.parent.editSettings.showAddNewRow\n && this.parent.element.getElementsByClassName(literals.addedRow).length > 0) {\n ++rIndex;\n }\n if (!this.mUPTarget || !this.mUPTarget.isEqualNode(target)) {\n this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute(literals.dataColIndex), 10));\n }\n if (this.parent.isCheckBoxSelection) {\n this.moveIntoUncheckCollection(closest(target, '.' + literals.row));\n this.setCheckAllState();\n }\n }\n if (!this.parent.isCheckBoxSelection && Browser.isDevice && !this.isSingleSel()) {\n this.showPopup(e);\n }\n }\n else if (e.target.classList.contains('e-headercell') &&\n !e.target.classList.contains('e-stackedheadercell')) {\n var uid = e.target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n this.headerSelectionHandler(this.parent.getColumnIndexByUid(uid));\n }\n this.isMultiCtrlRequest = false;\n this.isMultiCtrlRequestCell = this.isMultiCtrlRequest;\n this.isMultiShiftRequest = false;\n if (isNullOrUndefined(closest(e.target, '.e-unboundcell'))) {\n this.preventFocus = false;\n }\n };\n Selection.prototype.popUpClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.e-headercell') || e.target.classList.contains(literals.rowCell) ||\n closest(target, '.e-gridpopup')) {\n if (target.classList.contains('e-rowselect')) {\n if (!target.classList.contains('e-spanclicked')) {\n target.classList.add('e-spanclicked');\n this.enableSelectMultiTouch = true;\n }\n else {\n target.classList.remove('e-spanclicked');\n this.enableSelectMultiTouch = false;\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n }\n }\n else {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Selection.prototype.showPopup = function (e) {\n if (!this.selectionSettings.enableSimpleMultiRowSelection) {\n setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-rowselect e-icons e-icon-rowselect' +\n (!this.isSingleSel() && (this.selectedRecords.length > 1\n || this.selectedRowCellIndexes.length > 1) ? ' e-spanclicked' : ''));\n }\n };\n Selection.prototype.rowCellSelectionHandler = function (rowIndex, cellIndex) {\n if ((!this.isMultiCtrlRequest && !this.isMultiShiftRequest) || this.isSingleSel()) {\n if (!this.isDragged) {\n this.selectRow(rowIndex, this.selectionSettings.enableToggle);\n }\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, this.selectionSettings.enableToggle);\n if (this.selectedRowCellIndexes.length) {\n this.updateAutoFillPosition();\n }\n this.drawBorders();\n }\n else if (this.isMultiShiftRequest) {\n if (this.parent.isCheckBoxSelection || (!this.parent.isCheckBoxSelection &&\n !closest(this.target, '.' + literals.rowCell).classList.contains(literals.gridChkBox))) {\n this.selectRowsByRange(isUndefined(this.prevRowIndex) ? rowIndex : this.prevRowIndex, rowIndex);\n }\n else {\n this.addRowsToSelection([rowIndex]);\n }\n this.selectCellsByRange(isUndefined(this.prevCIdxs) ? { rowIndex: rowIndex, cellIndex: cellIndex } : this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });\n this.updateAutoFillPosition();\n this.drawBorders();\n }\n else {\n this.addRowsToSelection([rowIndex]);\n if (this.selectionSettings.mode === 'Both') {\n var checkboxColumn = this.parent.getColumns().find(function (col) { return col.type === 'checkbox'; });\n var checkboxColumnIndexCheck = checkboxColumn && checkboxColumn.index !== cellIndex;\n if (checkboxColumnIndexCheck && !this.isMultiCtrlRequestCell) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, this.selectionSettings.enableToggle);\n }\n else if (!checkboxColumn || checkboxColumnIndexCheck) {\n this.addCellsToSelection([{ rowIndex: rowIndex, cellIndex: cellIndex }]);\n }\n }\n else {\n this.addCellsToSelection([{ rowIndex: rowIndex, cellIndex: cellIndex }]);\n }\n this.showHideBorders('none');\n }\n this.isDragged = false;\n };\n Selection.prototype.onCellFocused = function (e) {\n if (this.parent.frozenRows && e.container.isHeader && e.byKey) {\n if (e.keyArgs.action === 'upArrow') {\n if (this.parent.allowFiltering) {\n e.isJump = e.element.tagName === 'INPUT' ? true : false;\n }\n else {\n e.isJump = e.element.tagName === 'TH' ? true : false;\n }\n }\n else {\n if (e.keyArgs.action === 'downArrow') {\n var rIdx = Number(e.element.parentElement.getAttribute(literals.dataRowIndex));\n e.isJump = rIdx === 0 ? true : false;\n }\n else {\n if (e.keyArgs.action === 'ctrlHome') {\n e.isJump = true;\n }\n }\n }\n }\n var clear = ((e.container.isHeader && e.isJump) ||\n (e.container.isContent && !e.container.isSelectable)) && !(e.byKey && e.keyArgs.action === 'space')\n && !(e.element.classList.contains('e-detailrowexpand') || e.element.classList.contains('e-detailrowcollapse'));\n var headerAction = (e.container.isHeader && e.element.tagName !== 'TD' && !closest(e.element, '.' + literals.rowCell))\n && !(e.byKey && e.keyArgs.action === 'space');\n if (!e.byKey || clear) {\n if (clear && !this.parent.isCheckBoxSelection) {\n this.clearSelection();\n }\n return;\n }\n var _a = e.container.isContent ? e.container.indexes : e.indexes, rowIndex = _a[0], cellIndex = _a[1];\n var prev = this.focus.getPrevIndexes();\n if (e.element.parentElement.querySelector('.e-rowcelldrag') || e.element.parentElement.querySelector('.e-dtdiagonalright')\n || e.element.parentElement.querySelector('.e-dtdiagonaldown')) {\n prev.cellIndex = prev.cellIndex - 1;\n }\n if (this.parent.frozenRows) {\n if (e.container.isHeader && (e.element.tagName === 'TD' || closest(e.element, '.' + literals.rowCell))) {\n var hdrLength = this.parent.getHeaderTable().querySelector('thead').childElementCount;\n if (this.parent.editSettings.showAddNewRow && this.parent.editSettings.newRowPosition === 'Top' &&\n e.keyArgs.action === 'upArrow') {\n hdrLength++;\n }\n rowIndex -= hdrLength;\n prev.rowIndex = !isNullOrUndefined(prev.rowIndex) ? prev.rowIndex - hdrLength : null;\n }\n else {\n rowIndex += this.parent.frozenRows;\n prev.rowIndex = prev.rowIndex === 0 || !isNullOrUndefined(prev.rowIndex) ? prev.rowIndex + this.parent.frozenRows : null;\n }\n }\n if (this.parent.enableInfiniteScrolling && this.parent.infiniteScrollSettings.enableCache) {\n rowIndex = parseInt(e.element.parentElement.getAttribute('data-rowindex'), 10);\n }\n if ((headerAction || (['ctrlPlusA', 'escape'].indexOf(e.keyArgs.action) === -1 &&\n e.keyArgs.action !== 'space' && rowIndex === prev.rowIndex && cellIndex === prev.cellIndex)) &&\n !this.selectionSettings.allowColumnSelection) {\n return;\n }\n if (this.parent.editSettings.showAddNewRow && this.parent.editSettings.newRowPosition === 'Top' &&\n (!this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling) && e.keyArgs.action === 'downArrow') {\n rowIndex--;\n }\n this.preventFocus = true;\n var columnIndex = this.getKeyColIndex(e);\n if (this.needColumnSelection) {\n cellIndex = columnIndex;\n }\n if (this.parent.element.classList.contains('e-gridcell-read') && (e.keyArgs.action === 'tab' || e.keyArgs.action === 'shiftTab'\n || e.keyArgs.action === 'rightArrow' || e.keyArgs.action === 'leftArrow')) {\n var targetLabel = this.target.getAttribute('aria-label');\n targetLabel = this.target.innerHTML + ' column header ' + this.parent.getColumnByIndex(cellIndex).field;\n this.target.setAttribute('aria-label', targetLabel);\n }\n switch (e.keyArgs.action) {\n case 'downArrow':\n case 'upArrow':\n case 'enter':\n case 'shiftEnter':\n this.target = e.element;\n this.isKeyAction = true;\n this.applyDownUpKey(rowIndex, cellIndex);\n break;\n case 'rightArrow':\n case 'leftArrow':\n this.applyRightLeftKey(rowIndex, cellIndex);\n break;\n case 'shiftDown':\n case 'shiftUp':\n this.shiftDownKey(rowIndex, cellIndex);\n break;\n case 'shiftLeft':\n case 'shiftRight':\n this.applyShiftLeftRightKey(rowIndex, cellIndex);\n break;\n case 'home':\n case 'end':\n cellIndex = e.keyArgs.action === 'end' ? this.getLastColIndex(rowIndex) : 0;\n this.applyHomeEndKey(rowIndex, cellIndex);\n break;\n case 'ctrlHome':\n case 'ctrlEnd':\n this.applyCtrlHomeEndKey(rowIndex, cellIndex);\n break;\n case 'escape':\n this.clearSelection();\n if (this.parent.clipboardModule) {\n window.navigator['clipboard'].writeText('');\n }\n break;\n case 'ctrlPlusA':\n this.ctrlPlusA();\n break;\n case 'space':\n this.applySpaceSelection(e.element);\n break;\n case 'tab':\n if (this.parent.editSettings.allowNextRowEdit) {\n this.selectRow(rowIndex);\n }\n break;\n }\n this.needColumnSelection = false;\n this.preventFocus = false;\n this.positionBorders();\n if (this.parent.isFrozenGrid()) {\n this.showHideBorders('none', true);\n this.refreshFrozenBorders();\n }\n this.updateAutoFillPosition();\n };\n Selection.prototype.getKeyColIndex = function (e) {\n var uid;\n var index = null;\n var stackedHeader = e.element.querySelector('.e-stackedheadercelldiv');\n if (this.selectionSettings.allowColumnSelection && parentsUntil(e.element, 'e-columnheader')) {\n this.needColumnSelection = e.container.isHeader ? true : false;\n if (stackedHeader) {\n if (e.keyArgs.action === 'rightArrow' || e.keyArgs.action === 'leftArrow') {\n return index;\n }\n uid = stackedHeader.getAttribute('e-mappinguid');\n var innerColumn = this.getstackedColumns(this.parent.getColumnByUid(uid).columns);\n var lastIndex = this.parent.getColumnIndexByUid(innerColumn[innerColumn.length - 1].uid);\n var firstIndex = this.parent.getColumnIndexByUid(innerColumn[0].uid);\n index = this.prevColIndex >= lastIndex ? firstIndex : lastIndex;\n }\n else {\n index = this.parent.getColumnIndexByUid(e.element\n .querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));\n }\n }\n return index;\n };\n /**\n * Apply ctrl + A key selection\n *\n * @returns {void}\n * @hidden\n */\n Selection.prototype.ctrlPlusA = function () {\n if (this.isRowType() && !this.isSingleSel()) {\n this.selectRowsByRange(0, this.getCurrentBatchRecordChanges().length - 1);\n }\n if (this.isCellType() && !this.isSingleSel()) {\n this.selectCellsByRange({ rowIndex: 0, cellIndex: 0 }, { rowIndex: this.parent.getRows().length - 1, cellIndex: this.parent.getColumns().length - 1 });\n }\n };\n Selection.prototype.applySpaceSelection = function (target) {\n if (target.classList.contains('e-checkselectall')) {\n this.checkedTarget = target;\n this.checkSelectAll(this.checkedTarget);\n }\n else {\n if (target.classList.contains('e-checkselect')) {\n this.checkedTarget = target;\n this.checkSelect(this.checkedTarget);\n }\n }\n };\n Selection.prototype.applyDownUpKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n if (this.parent.isCheckBoxSelection && this.parent.checkAllRows === 'Check' && !this.selectionSettings.persistSelection &&\n !this.selectionSettings.checkboxOnly) {\n this.checkSelectAllAction(false);\n this.checkedTarget = null;\n }\n if (this.isRowType() && !this.selectionSettings.checkboxOnly) {\n if (this.parent.frozenRows) {\n this.selectRow(rowIndex, true);\n this.applyUpDown(gObj.selectedRowIndex);\n }\n else {\n this.selectRow(rowIndex, true);\n this.applyUpDown(gObj.selectedRowIndex);\n }\n }\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n if (this.selectionSettings.allowColumnSelection && this.needColumnSelection) {\n this.selectColumn(cellIndex);\n }\n };\n Selection.prototype.applyUpDown = function (rowIndex) {\n if (rowIndex < 0) {\n return;\n }\n if (!this.target) {\n this.target = this.parent.getRows()[0].children[this.parent.groupSettings.columns.length || 0];\n }\n var cIndex = parseInt(this.target.getAttribute(literals.dataColIndex), 10);\n var row = this.contentRenderer.getRowByIndex(rowIndex);\n if (row) {\n this.target = row.getElementsByClassName(literals.rowCell)[parseInt(cIndex.toString(), 10)];\n }\n this.addAttribute(this.target);\n if (this.parent.element.classList.contains('e-gridcell-read')) {\n var targetLabel = this.target.getAttribute('aria-label');\n targetLabel = this.target.innerHTML;\n this.target.setAttribute('aria-label', targetLabel);\n }\n };\n Selection.prototype.applyRightLeftKey = function (rowIndex, cellIndex) {\n if (this.selectionSettings.allowColumnSelection && this.needColumnSelection) {\n this.selectColumn(cellIndex);\n }\n else if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n this.addAttribute(this.target);\n }\n };\n Selection.prototype.applyHomeEndKey = function (rowIndex, cellIndex) {\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n else {\n this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));\n }\n };\n /**\n * Apply shift+down key selection\n *\n * @param {number} rowIndex - specfies the rowIndex\n * @param {number} cellIndex - specifies the CellIndex\n * @returns {void}\n * @hidden\n */\n Selection.prototype.shiftDownKey = function (rowIndex, cellIndex) {\n this.isMultiShiftRequest = true;\n if (this.isRowType() && !this.isSingleSel()) {\n if (!isUndefined(this.prevRowIndex)) {\n this.selectRowsByRange(this.prevRowIndex, rowIndex);\n this.applyUpDown(rowIndex);\n }\n else if (this.isPartialSelection) {\n this.selectRow(rowIndex, true);\n }\n else {\n this.selectRow(0, true);\n }\n }\n if (this.isCellType() && !this.isSingleSel()) {\n this.selectCellsByRange(this.prevCIdxs || { rowIndex: 0, cellIndex: 0 }, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isMultiShiftRequest = false;\n };\n Selection.prototype.applyShiftLeftRightKey = function (rowIndex, cellIndex) {\n this.isMultiShiftRequest = true;\n if (this.selectionSettings.allowColumnSelection && this.needColumnSelection) {\n this.selectColumnsByRange(this.prevColIndex, cellIndex);\n }\n else {\n this.selectCellsByRange(this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isMultiShiftRequest = false;\n };\n Selection.prototype.getstackedColumns = function (column) {\n var innerColumnIndexes = [];\n for (var i = 0, len = column.length; i < len; i++) {\n if (column[parseInt(i.toString(), 10)].columns) {\n this.getstackedColumns(column[parseInt(i.toString(), 10)].columns);\n }\n else {\n innerColumnIndexes.push(column[parseInt(i.toString(), 10)]);\n }\n }\n return innerColumnIndexes;\n };\n Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, cellIndex) {\n if (this.isRowType()) {\n this.selectRow(rowIndex, true);\n this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));\n }\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n };\n Selection.prototype.addRemoveClassesForRow = function (row, isAdd, clearAll) {\n var args = [];\n for (var _i = 3; _i < arguments.length; _i++) {\n args[_i - 3] = arguments[_i];\n }\n if (row) {\n var cells = [].slice.call(row.getElementsByClassName(literals.rowCell));\n var detailIndentCell = row.querySelector('.e-detailrowcollapse') || row.querySelector('.e-detailrowexpand');\n var dragdropIndentCell = row.querySelector('.e-rowdragdrop');\n if (detailIndentCell) {\n cells.push(detailIndentCell);\n }\n if (dragdropIndentCell) {\n cells.push(dragdropIndentCell);\n }\n addRemoveActiveClasses.apply(void 0, [cells, isAdd].concat(args));\n }\n this.getRenderer().setSelection(row ? row.getAttribute('data-uid') : null, isAdd, clearAll);\n };\n Selection.prototype.isRowType = function () {\n return this.selectionSettings.mode === 'Row' || this.selectionSettings.mode === 'Both';\n };\n Selection.prototype.isCellType = function () {\n return this.selectionSettings.mode === 'Cell' || this.selectionSettings.mode === 'Both';\n };\n Selection.prototype.isSingleSel = function () {\n return this.selectionSettings.type === 'Single';\n };\n Selection.prototype.getRenderer = function () {\n if (isNullOrUndefined(this.contentRenderer)) {\n this.contentRenderer = this.factory.getRenderer(RenderType.Content);\n }\n return this.contentRenderer;\n };\n /**\n * Gets the collection of selected records.\n *\n * @returns {Object[]} returns the Object\n */\n Selection.prototype.getSelectedRecords = function () {\n var selectedData = [];\n if (!this.selectionSettings.persistSelection && this.selectedRecords.length) {\n selectedData = this.parent.getRowsObject().filter(function (row) { return row.isSelected; })\n .map(function (m) { return m.data; });\n }\n else {\n selectedData = this.persistSelectedData;\n }\n return selectedData;\n };\n /**\n * Select the column by passing start column index\n *\n * @param {number} index - specifies the index\n * @returns {void}\n */\n Selection.prototype.selectColumn = function (index) {\n var gObj = this.parent;\n if (isNullOrUndefined(gObj.getColumns()[parseInt(index.toString(), 10)])) {\n return;\n }\n var column = gObj.getColumnByIndex(index);\n var selectedCol = gObj.getColumnHeaderByUid(column.uid);\n var isColSelected = selectedCol.classList.contains('e-columnselection');\n if ((!gObj.selectionSettings.allowColumnSelection)) {\n return;\n }\n var isMultiColumns = this.selectedColumnsIndexes.length > 1 &&\n this.selectedColumnsIndexes.indexOf(index) > -1;\n this.clearColDependency();\n if (!isColSelected || !this.selectionSettings.enableToggle || isMultiColumns) {\n var args = {\n columnIndex: index, headerCell: selectedCol,\n column: column,\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n this.onActionBegin(args, events.columnSelecting);\n if (args.cancel) {\n this.disableInteracted();\n return;\n }\n if (!(gObj.selectionSettings.enableToggle && index === this.prevColIndex && isColSelected) || isMultiColumns) {\n this.updateColSelection(selectedCol, index);\n }\n var selectedArgs = {\n columnIndex: index, headerCell: selectedCol,\n column: column,\n target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex\n };\n this.onActionComplete(selectedArgs, events.columnSelected);\n }\n this.updateColProps(index);\n };\n /**\n * Select the columns by passing start and end column index\n *\n * @param {number} startIndex - specifies the start index\n * @param {number} endIndex - specifies the end index\n * @returns {void}\n */\n Selection.prototype.selectColumnsByRange = function (startIndex, endIndex) {\n var gObj = this.parent;\n if (isNullOrUndefined(gObj.getColumns()[parseInt(startIndex.toString(), 10)])) {\n return;\n }\n var indexes = [];\n if (gObj.selectionSettings.type === 'Single' || isNullOrUndefined(endIndex)) {\n indexes[0] = startIndex;\n }\n else {\n var min = startIndex < endIndex;\n for (var i = startIndex; min ? i <= endIndex : i >= endIndex; min ? i++ : i--) {\n indexes.push(i);\n }\n }\n this.selectColumns(indexes);\n };\n /**\n * Select the columns by passing column indexes\n *\n * @param {number[]} columnIndexes - specifies the columnIndexes\n * @returns {void}\n */\n Selection.prototype.selectColumns = function (columnIndexes) {\n var gObj = this.parent;\n var selectedCol = this.getselectedCols();\n if (gObj.selectionSettings.type === 'Single') {\n columnIndexes = [columnIndexes[0]];\n }\n if (!gObj.selectionSettings.allowColumnSelection) {\n return;\n }\n this.clearColDependency();\n var selectingArgs = {\n columnIndex: columnIndexes[0], headerCell: selectedCol,\n columnIndexes: columnIndexes,\n column: gObj.getColumnByIndex(columnIndexes[0]),\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n this.onActionBegin(selectingArgs, events.columnSelecting);\n if (selectingArgs.cancel) {\n this.disableInteracted();\n return;\n }\n for (var i = 0, len = columnIndexes.length; i < len; i++) {\n this.updateColSelection(gObj.getColumnHeaderByUid(gObj.getColumnByIndex(columnIndexes[parseInt(i.toString(), 10)]).uid), columnIndexes[parseInt(i.toString(), 10)]);\n }\n selectedCol = this.getselectedCols();\n var selectedArgs = {\n columnIndex: columnIndexes[0], headerCell: selectedCol,\n columnIndexes: columnIndexes,\n column: gObj.getColumnByIndex(columnIndexes[0]),\n target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex\n };\n this.onActionComplete(selectedArgs, events.columnSelected);\n this.updateColProps(columnIndexes[0]);\n };\n /**\n * Select the column with existing column by passing column index\n *\n * @param {number} startIndex - specifies the start index\n * @returns {void}\n */\n Selection.prototype.selectColumnWithExisting = function (startIndex) {\n var gObj = this.parent;\n if (isNullOrUndefined(gObj.getColumns()[parseInt(startIndex.toString(), 10)])) {\n return;\n }\n var newCol = gObj.getColumnHeaderByUid(gObj.getColumnByIndex(startIndex).uid);\n var selectedCol = this.getselectedCols();\n if (gObj.selectionSettings.type === 'Single') {\n this.clearColDependency();\n }\n if (!gObj.selectionSettings.allowColumnSelection) {\n return;\n }\n if (this.selectedColumnsIndexes.indexOf(startIndex) > -1) {\n this.clearColumnSelection(startIndex);\n }\n else {\n var selectingArgs = {\n columnIndex: startIndex, headerCell: selectedCol,\n columnIndexes: this.selectedColumnsIndexes,\n column: gObj.getColumnByIndex(startIndex),\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n this.onActionBegin(selectingArgs, events.columnSelecting);\n if (selectingArgs.cancel) {\n this.disableInteracted();\n return;\n }\n this.updateColSelection(newCol, startIndex);\n selectedCol = this.getselectedCols();\n var selectedArgs = {\n columnIndex: startIndex, headerCell: selectedCol,\n column: gObj.getColumnByIndex(startIndex),\n columnIndexes: this.selectedColumnsIndexes,\n target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex\n };\n this.onActionComplete(selectedArgs, events.columnSelected);\n }\n this.updateColProps(startIndex);\n };\n /**\n * Clear the column selection\n *\n * @param {number} clearIndex - specifies the clearIndex\n * @returns {void}\n */\n Selection.prototype.clearColumnSelection = function (clearIndex) {\n if (this.isColumnSelected) {\n var gObj = this.parent;\n if (!isNullOrUndefined(clearIndex) && this.selectedColumnsIndexes.indexOf(clearIndex) === -1) {\n return;\n }\n var index = !isNullOrUndefined(clearIndex) ? clearIndex :\n this.selectedColumnsIndexes[this.selectedColumnsIndexes.length - 1];\n var column = gObj.getColumnByIndex(index);\n var selectedCol = gObj.getColumnHeaderByUid(column.uid);\n var deselectedArgs = {\n columnIndex: index, headerCell: selectedCol,\n columnIndexes: this.selectedColumnsIndexes,\n column: column,\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted\n };\n var isCanceled = this.columnDeselect(deselectedArgs, events.columnDeselecting);\n if (isCanceled) {\n this.disableInteracted();\n return;\n }\n var selectedHeader = !isNullOrUndefined(clearIndex) ? [selectedCol] :\n [].slice.call(gObj.getHeaderContent().getElementsByClassName('e-columnselection'));\n var selectedCells = this.getSelectedColumnCells(clearIndex);\n for (var i = 0, len = selectedHeader.length; i < len; i++) {\n addRemoveActiveClasses([selectedHeader[parseInt(i.toString(), 10)]], false, 'e-columnselection');\n }\n for (var i = 0, len = selectedCells.length; i < len; i++) {\n addRemoveActiveClasses([selectedCells[parseInt(i.toString(), 10)]], false, 'e-columnselection');\n }\n if (!isNullOrUndefined(clearIndex)) {\n this.selectedColumnsIndexes.splice(this.selectedColumnsIndexes.indexOf(clearIndex), 1);\n this.parent.getColumns()[parseInt(clearIndex.toString(), 10)].isSelected = false;\n }\n else {\n this.columnDeselect(deselectedArgs, events.columnDeselected);\n this.selectedColumnsIndexes = [];\n this.isColumnSelected = false;\n this.parent.getColumns().filter(function (col) { return col.isSelected = false; });\n }\n }\n };\n Selection.prototype.getselectedCols = function () {\n var gObj = this.parent;\n var selectedCol;\n if (this.selectedColumnsIndexes.length > 1) {\n selectedCol = [];\n for (var i = 0; i < this.selectedColumnsIndexes.length; i++) {\n (selectedCol).push(gObj.getColumnHeaderByUid(gObj.getColumnByIndex(this.selectedColumnsIndexes[parseInt(i.toString(), 10)]).uid));\n }\n }\n else {\n selectedCol = gObj.getColumnHeaderByUid(gObj.getColumnByIndex(this.selectedColumnsIndexes[0]).uid);\n }\n return selectedCol;\n };\n Selection.prototype.getSelectedColumnCells = function (clearIndex) {\n var gObj = this.parent;\n var isRowTemplate = !isNullOrUndefined(this.parent.rowTemplate);\n var rows = isRowTemplate ? gObj.getRows() : gObj.getDataRows();\n var seletedcells = [];\n var selectionString = !isNullOrUndefined(clearIndex) ? '[data-colindex=\"' + clearIndex + '\"]' : '.e-columnselection';\n for (var i = 0, len = rows.length; i < len; i++) {\n seletedcells = seletedcells.concat([].slice.call(rows[parseInt(i.toString(), 10)].querySelectorAll(selectionString)));\n }\n return seletedcells;\n };\n Selection.prototype.columnDeselect = function (args, event) {\n if (event === 'columnDeselected') {\n delete args.cancel;\n }\n this.onActionComplete(args, event);\n return args.cancel;\n };\n Selection.prototype.updateColProps = function (startIndex) {\n this.prevColIndex = startIndex;\n this.isColumnSelected = this.selectedColumnsIndexes.length && true;\n };\n Selection.prototype.clearColDependency = function () {\n this.clearColumnSelection();\n this.selectedColumnsIndexes = [];\n };\n Selection.prototype.updateColSelection = function (selectedCol, startIndex) {\n if (isNullOrUndefined(this.parent.getColumns()[parseInt(startIndex.toString(), 10)])) {\n return;\n }\n var isRowTemplate = !isNullOrUndefined(this.parent.rowTemplate);\n var rows = isRowTemplate ? this.parent.getRows() : this.parent.getDataRows();\n this.selectedColumnsIndexes.push(startIndex);\n this.parent.getColumns()[parseInt(startIndex.toString(), 10)].isSelected = true;\n startIndex = startIndex + this.parent.getIndentCount();\n addRemoveActiveClasses([selectedCol], true, 'e-columnselection');\n for (var j = 0, len = rows.length; j < len; j++) {\n if (rows[parseInt(j.toString(), 10)].classList.contains(literals.row)) {\n if ((rows[parseInt(j.toString(), 10)].classList.contains(literals.editedRow)\n || rows[parseInt(j.toString(), 10)].classList.contains(literals.addedRow))\n && this.parent.editSettings.mode === 'Normal'\n && !isNullOrUndefined(rows[parseInt(j.toString(), 10)].querySelector('tr').childNodes[parseInt(startIndex.toString(), 10)])) {\n addRemoveActiveClasses([rows[parseInt(j.toString(), 10)].querySelector('tr').childNodes[parseInt(startIndex.toString(), 10)]], true, 'e-columnselection');\n }\n else {\n if (this.parent.isSpan && this.parent.isFrozenGrid()) {\n var cells = rows[parseInt(j.toString(), 10)].querySelectorAll('.e-rowcell');\n for (var i = 0; i < cells.length; i++) {\n if (cells[parseInt(i.toString(), 10)].getAttribute('aria-colindex') === selectedCol.getAttribute('aria-colindex')) {\n addRemoveActiveClasses([cells[parseInt(i.toString(), 10)]], true, 'e-columnselection');\n }\n }\n }\n else if (!isNullOrUndefined(rows[parseInt(j.toString(), 10)].childNodes[parseInt(startIndex.toString(), 10)])) {\n addRemoveActiveClasses([rows[parseInt(j.toString(), 10)].childNodes[parseInt(startIndex.toString(), 10)]], true, 'e-columnselection');\n }\n }\n }\n }\n };\n Selection.prototype.headerSelectionHandler = function (colIndex) {\n if ((!this.isMultiCtrlRequest && !this.isMultiShiftRequest) || this.isSingleSel()) {\n this.selectColumn(colIndex);\n }\n else if (this.isMultiShiftRequest) {\n this.selectColumnsByRange(isUndefined(this.prevColIndex) ? colIndex : this.prevColIndex, colIndex);\n }\n else {\n this.selectColumnWithExisting(colIndex);\n }\n };\n // eslint-disable-next-line camelcase\n Selection.prototype.addEventListener_checkbox = function () {\n var _this = this;\n this.parent.on(events.dataReady, this.dataReady, this);\n this.onDataBoundFunction = this.onDataBound.bind(this);\n this.parent.addEventListener(events.dataBound, this.onDataBoundFunction);\n this.parent.on(events.refreshInfinitePersistSelection, this.onDataBoundFunction);\n this.parent.on(events.contentReady, this.checkBoxSelectionChanged, this);\n this.parent.on(events.beforeRefreshOnDataChange, this.initPerisistSelection, this);\n this.parent.on(events.onEmpty, this.setCheckAllForEmptyGrid, this);\n this.actionCompleteFunc = this.actionCompleteHandler.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.on(events.click, this.clickHandler, this);\n this.resizeEndFn = function () {\n _this.updateAutoFillPosition();\n _this.drawBorders();\n };\n this.resizeEndFn.bind(this);\n this.parent.addEventListener(events.resizeStop, this.resizeEndFn);\n };\n // eslint-disable-next-line camelcase\n Selection.prototype.removeEventListener_checkbox = function () {\n this.parent.off(events.dataReady, this.dataReady);\n this.parent.removeEventListener(events.dataBound, this.onDataBoundFunction);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.off(events.refreshInfinitePersistSelection, this.onDataBoundFunction);\n this.parent.off(events.onEmpty, this.setCheckAllForEmptyGrid);\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.beforeRefreshOnDataChange, this.initPerisistSelection);\n };\n Selection.prototype.setCheckAllForEmptyGrid = function () {\n var checkAllBox = this.getCheckAllBox();\n if (checkAllBox) {\n this.parent.isCheckBoxSelection = true;\n var spanEle = checkAllBox.nextElementSibling;\n removeClass([spanEle], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n };\n Selection.prototype.dataReady = function (e) {\n this.isHeaderCheckboxClicked = false;\n var isInfinitecroll = this.parent.enableInfiniteScrolling && e.requestType === 'infiniteScroll';\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection && !isInfinitecroll) {\n this.disableUI = !this.parent.enableImmutableMode && !(e.requestType === 'save' && e['action'] === 'add');\n this.clearSelection();\n this.setCheckAllState();\n this.disableUI = false;\n }\n };\n Selection.prototype.actionCompleteHandler = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n this.refreshPersistSelection();\n }\n };\n Selection.prototype.selectRowIndex = function (index) {\n this.parent.isSelectedRowIndexUpdating = true;\n if ((isNullOrUndefined(this.parent.selectedRowIndex) || this.parent.selectedRowIndex === -1) || !this.parent.enablePersistence) {\n this.parent.selectedRowIndex = index;\n }\n else {\n this.parent.selectedRowIndex = -1;\n }\n };\n Selection.prototype.disableInteracted = function () {\n this.isInteracted = false;\n };\n Selection.prototype.activeTarget = function () {\n this.actualTarget = this.isInteracted ? this.actualTarget : null;\n };\n return Selection;\n}());\nexport { Selection };\n","import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\n/**\n * The `Search` module is used to handle search action.\n */\nvar Search = /** @class */ (function () {\n /**\n * Constructor for Grid search module.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Search(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * Checks if the input string contains non-numeric characters.\n *\n * @param input The string to be checked for non-numeric characters.\n * @returns `true` if the input string contains non-numeric characters, `false` otherwise.\n */\n Search.prototype.hasNonNumericCharacters = function (searchString) {\n var decimalFound = false;\n for (var _i = 0, searchString_1 = searchString; _i < searchString_1.length; _i++) {\n var char = searchString_1[_i];\n if ((char < '0' || char > '9') && char !== '.') {\n return true;\n }\n if (char === '.') {\n if (decimalFound) {\n // If decimal is found more than once, it's not valid\n return true;\n }\n decimalFound = true;\n }\n }\n return false;\n };\n /**\n * Searches Grid records by given key.\n *\n * > You can customize the default search action by using [`searchSettings`](./searchsettings/).\n *\n * @param {string} searchString - Defines the key.\n * @returns {void}\n */\n Search.prototype.search = function (searchString) {\n var gObj = this.parent;\n searchString = isNullOrUndefined(searchString) ? '' : searchString;\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.search, arg1: searchString });\n return;\n }\n if (searchString !== gObj.searchSettings.key) {\n // Check searchString is number and parseFloat to remove trailing zeros\n gObj.searchSettings.key = (searchString !== \"\" && !this.hasNonNumericCharacters(searchString)) ? parseFloat(searchString).toString() : searchString.toString();\n gObj.dataBind();\n }\n else if (this.refreshSearch) {\n gObj.refresh();\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Search.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.searchComplete, this.onSearchComplete, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.actionCompleteFunc = this.onActionComplete.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.on(events.cancelBegin, this.cancelBeginEvent, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Search.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.searchComplete, this.onSearchComplete);\n this.parent.off(events.destroy, this.destroy);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.off(events.cancelBegin, this.cancelBeginEvent);\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n Search.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * @param {NotifyArgs} e - specfies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Search.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (!isNullOrUndefined(e.properties.key)) {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin, searchString: this.parent.searchSettings.key\n });\n }\n else {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin\n });\n }\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Search.prototype.onSearchComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, {\n searchString: this.parent.searchSettings.key, requestType: 'searching', type: events.actionComplete\n }));\n };\n /**\n * The function used to store the requestType\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Search.prototype.onActionComplete = function (e) {\n this.refreshSearch = e.requestType !== 'searching';\n };\n Search.prototype.cancelBeginEvent = function (e) {\n if (e.requestType === 'searching') {\n this.parent.setProperties({ searchSettings: { key: '' } }, true);\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Search.prototype.getModuleName = function () {\n return 'search';\n };\n return Search;\n}());\nexport { Search };\n","import { isNullOrUndefined, remove } from '@syncfusion/ej2-base';\nimport { iterateArrayOrObject, isGroupAdaptive, isActionPrevent, addRemoveEventListener } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * The `ShowHide` module is used to control column visibility.\n */\nvar ShowHide = /** @class */ (function () {\n /**\n * Constructor for the show hide module.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function ShowHide(parent) {\n this.colName = [];\n this.isShowHide = false;\n this.parent = parent;\n this.addEventListener();\n }\n ShowHide.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.evtHandlers = [{ event: events.batchCancel, handler: this.batchChanges },\n { event: events.batchCnfrmDlgCancel, handler: this.resetColumnState }\n ];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n ShowHide.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n };\n ShowHide.prototype.batchChanges = function () {\n if (this.isShowHide) {\n this.isShowHide = false;\n this.setVisible(this.colName, this.changedCol);\n this.changedCol = this.colName = [];\n }\n };\n /**\n * Shows a column by column name.\n *\n * @param {string|string[]} columnName - Defines a single or collection of column names to show.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @returns {void}\n */\n ShowHide.prototype.show = function (columnName, showBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, showBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n for (var i = 0; i < columns.length; i++) {\n columns[parseInt(i.toString(), 10)].visible = true;\n }\n this.setVisible(columns);\n };\n /**\n * Hides a column by column name.\n *\n * @param {string|string[]} columnName - Defines a single or collection of column names to hide.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @returns {void}\n */\n ShowHide.prototype.hide = function (columnName, hideBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, hideBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n for (var i = 0; i < columns.length; i++) {\n columns[parseInt(i.toString(), 10)].visible = false;\n }\n this.setVisible(columns);\n };\n ShowHide.prototype.getToggleFields = function (key) {\n var finalized = [];\n if (typeof key === 'string') {\n finalized = [key];\n }\n else {\n finalized = key;\n }\n return finalized;\n };\n ShowHide.prototype.getColumns = function (keys, getKeyBy) {\n var _this = this;\n var columns = iterateArrayOrObject(keys, function (key) {\n return iterateArrayOrObject(_this.parent.columnModel, function (item) {\n if (item[\"\" + getKeyBy] === key) {\n return item;\n }\n return undefined;\n })[0];\n });\n return columns;\n };\n ShowHide.prototype.batchActionPrevent = function (columns, changedStateColumns) {\n if (changedStateColumns === void 0) { changedStateColumns = []; }\n if (isActionPrevent(this.parent)) {\n this.colName = columns;\n this.changedCol = changedStateColumns;\n this.parent.closeEdit();\n return false;\n }\n return true;\n };\n ShowHide.prototype.resetColumnState = function () {\n if (this.isShowHide) {\n for (var i = 0; i < this.colName.length; i++) {\n this.colName[parseInt(i.toString(), 10)].visible = !this.colName[parseInt(i.toString(), 10)].visible;\n }\n }\n };\n /**\n * Shows or hides columns by given column collection.\n *\n * @private\n * @param {Column[]} columns - Specifies the columns.\n * @param {Column[]} changedStateColumns - specifies the changedStateColumns\n * @returns {void}\n */\n ShowHide.prototype.setVisible = function (columns, changedStateColumns) {\n var _this = this;\n if (changedStateColumns === void 0) { changedStateColumns = []; }\n this.isShowHide = true;\n if (!this.batchActionPrevent(columns, changedStateColumns)) {\n return;\n }\n changedStateColumns = (changedStateColumns.length > 0) ? changedStateColumns : columns;\n var args = {\n requestType: 'columnstate',\n cancel: false,\n columns: changedStateColumns\n };\n var cancel = 'cancel';\n if (this.parent.enableInfiniteScrolling && this.parent.allowGrouping\n && this.parent.groupModule.groupSettings.columns.length > 0) {\n this.parent.contentModule.visibleRows = [];\n }\n this.parent.trigger(events.actionBegin, args, function (showHideArgs) {\n var currentViewCols = _this.parent.getColumns();\n columns = isNullOrUndefined(columns) ? currentViewCols : columns;\n if (showHideArgs[\"\" + cancel]) {\n _this.parent.notify(events.resetColumns, { showHideArgs: showHideArgs });\n if (columns.length > 0) {\n columns[0].visible = true;\n }\n return;\n }\n if (isGroupAdaptive(_this.parent)) {\n _this.parent.contentModule.emptyVcRows();\n }\n var addedRow = _this.parent.element.querySelector('.e-addedrow');\n if (_this.parent.editSettings.showAddNewRow && addedRow) {\n remove(addedRow);\n if (_this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling) {\n _this.parent.isAddNewRow = true;\n }\n _this.parent.addNewRowFocus = true;\n _this.parent.isEdit = false;\n }\n if (_this.parent.allowSelection && _this.parent.getSelectedRecords().length &&\n !_this.parent.selectionSettings.persistSelection) {\n _this.parent.clearSelection();\n }\n if (_this.parent.enableColumnVirtualization) {\n var colsInCurrentView = columns.filter(function (col1) { return (currentViewCols.some(function (col2) { return col1.field === col2.field; })); });\n if (colsInCurrentView.length) {\n _this.parent.notify(events.columnVisibilityChanged, columns);\n }\n }\n else {\n if (_this.parent.isFrozenGrid() && columns.length) {\n _this.parent.notify(events.refreshFrozenPosition, { isModeChg: true });\n }\n _this.parent.notify(events.columnVisibilityChanged, columns);\n }\n var params = {\n requestType: 'columnstate',\n columns: changedStateColumns\n };\n _this.parent.trigger(events.actionComplete, params);\n var startAdd = !_this.parent.element.querySelector('.e-addedrow');\n if (_this.parent.editSettings.showAddNewRow && startAdd) {\n _this.parent.isEdit = false;\n _this.parent.addRecord();\n if (!(_this.parent.enableVirtualization || _this.parent.enableInfiniteScrolling)) {\n _this.parent.notify(events.showAddNewRowFocus, {});\n }\n }\n if (_this.parent.columnQueryMode !== 'All') {\n _this.parent.refresh();\n }\n });\n if (this.parent.autoFit && !this.parent.groupSettings.columns.length) {\n this.parent.preventAdjustColumns();\n }\n };\n return ShowHide;\n}());\nexport { ShowHide };\n","import { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getScrollBarWidth, getUpdateUsingRaf } from '../base/util';\nimport { scroll, contentReady, uiUpdate, onEmpty, headerRefreshed, textWrapRefresh, virtualScrollEdit, infiniteScrollHandler, closeFilterDialog } from '../base/constant';\nimport { lazyLoadScrollHandler, checkScrollReset } from '../base/constant';\nimport { ColumnWidthService } from '../services/width-controller';\nimport * as literals from '../base/string-literals';\nimport * as events from '../base/constant';\n/**\n * The `Scroll` module is used to handle scrolling behaviour.\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the Grid scrolling.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Scroll(parent) {\n //To maintain scroll state on grid actions.\n this.previousValues = { top: 0, left: 0 };\n this.oneTimeReady = true;\n this.parent = parent;\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * @param {boolean} uiupdate - specifies the uiupdate\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setWidth = function (uiupdate) {\n this.parent.element.style.width = formatUnit(this.parent.width);\n if (uiupdate) {\n this.widthService.setWidthToColumns();\n }\n if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&\n this.parent.toolbarModule.toolbar.element) {\n var tlbrElement = this.parent.toolbarModule.toolbar.element;\n var tlbrLeftElement = tlbrElement.querySelector('.e-toolbar-left');\n var tlbrCenterElement = tlbrElement.querySelector('.e-toolbar-center');\n var tlbrRightElement = tlbrElement.querySelector('.e-toolbar-right');\n var tlbrItems = tlbrElement.querySelector('.e-toolbar-items');\n var tlbrLeftWidth = tlbrLeftElement ? tlbrLeftElement.clientWidth : 0;\n var tlbrCenterWidth = tlbrCenterElement ? tlbrCenterElement.clientWidth : 0;\n var tlbrRightWidth = tlbrRightElement ? tlbrRightElement.clientWidth : 0;\n var tlbrItemsWidth = tlbrItems ? tlbrItems.clientWidth : 0;\n var tlbrWidth = tlbrElement ? tlbrElement.clientWidth : 0;\n if (!this.parent.enableAdaptiveUI || tlbrLeftWidth > tlbrWidth || tlbrCenterWidth > tlbrWidth || tlbrRightWidth > tlbrWidth ||\n tlbrItemsWidth > tlbrWidth) {\n this.parent.toolbarModule.toolbar.refreshOverflow();\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setHeight = function () {\n var mHdrHeight = 0;\n var content = this.parent.getContent().querySelector('.' + literals.content);\n var height = this.parent.height;\n if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid() && this.parent.height !== 'auto'\n && this.parent.height.toString().indexOf('%') < 0) {\n height = parseInt(height, 10) - Scroll.getScrollBarWidth();\n }\n if (!this.parent.enableVirtualization && this.parent.frozenRows && this.parent.height !== 'auto') {\n var tbody = this.parent.getHeaderContent()\n .querySelector(literals.tbody + ':not(.e-masked-tbody)');\n mHdrHeight = tbody ? tbody.offsetHeight : 0;\n if (tbody && mHdrHeight) {\n var add = tbody.getElementsByClassName(literals.addedRow).length;\n var height_1 = add * this.parent.getRowHeight();\n mHdrHeight -= height_1;\n }\n else if (!this.parent.isInitialLoad && this.parent.loadingIndicator.indicatorType === 'Shimmer'\n && this.parent.getHeaderContent().querySelector('.e-masked-table')) {\n height = parseInt(height, 10) - (this.parent.frozenRows * this.parent.getRowHeight());\n }\n content.style.height = formatUnit(height - mHdrHeight);\n }\n else {\n content.style.height = formatUnit(height);\n }\n this.ensureOverflow(content);\n if (this.parent.isFrozenGrid()) {\n this.refresh();\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setPadding = function () {\n var content = this.parent.getHeaderContent();\n var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();\n var cssProps = this.getCssProperties();\n content.querySelector('.' + literals.headerContent).style[cssProps.border] = scrollWidth > 0 ? '1px' : '0px';\n content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';\n };\n /**\n * @param {boolean} rtl - specifies the rtl\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.removePadding = function (rtl) {\n var cssProps = this.getCssProperties(rtl);\n var hDiv = this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n hDiv.style[cssProps.border] = '';\n hDiv.parentElement.style[cssProps.padding] = '';\n var footerDiv = this.parent.getFooterContent();\n if (footerDiv && footerDiv.classList.contains('e-footerpadding')) {\n footerDiv.classList.remove('e-footerpadding');\n }\n };\n /**\n * Refresh makes the Grid adoptable with the height of parent container.\n *\n * > The [`height`](./#height) must be set to 100%.\n *\n * @returns {void}\n */\n Scroll.prototype.refresh = function () {\n if (this.parent.height !== '100%') {\n return;\n }\n var content = this.parent.getContent();\n this.parent.element.style.height = '100%';\n var height = this.widthService.getSiblingsHeight(content);\n content.style.height = 'calc(100% - ' + height + 'px)'; //Set the height to the '.' + literals.gridContent;\n };\n Scroll.prototype.getThreshold = function () {\n /* Some browsers places the scroller outside the content,\n * hence the padding should be adjusted.*/\n var appName = Browser.info.name;\n if (appName === 'mozilla') {\n return 0.5;\n }\n return 1;\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(onEmpty, this.wireEvents, this);\n this.parent.on(contentReady, this.wireEvents, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n this.parent.on(textWrapRefresh, this.wireEvents, this);\n this.parent.on(headerRefreshed, this.setScrollLeft, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(onEmpty, this.wireEvents);\n this.parent.off(contentReady, this.wireEvents);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n this.parent.off(textWrapRefresh, this.wireEvents);\n this.parent.off(headerRefreshed, this.setScrollLeft);\n this.unwireEvents();\n };\n Scroll.prototype.unwireEvents = function () {\n if (this.parent.frozenRows && this.header) {\n EventHandler.remove(this.header, 'touchstart pointerdown', this.setPageXY);\n EventHandler.remove(this.header, 'touchmove pointermove', this.onTouchScroll);\n }\n var mScrollBar = this.parent.getContent() ? this.parent.getContent().querySelector('.e-movablescrollbar') : null;\n if (this.parent.isFrozenGrid() && this.parent.enableColumnVirtualization) {\n if (mScrollBar) {\n EventHandler.remove(mScrollBar, 'scroll', this.onCustomScrollbarScroll);\n }\n if (this.content) {\n EventHandler.remove(this.content, 'scroll', this.onCustomScrollbarScroll);\n EventHandler.remove(this.content, 'touchstart pointerdown', this.setPageXY);\n if (!(/macintosh|ipad/.test(Browser.userAgent.toLowerCase()) && Browser.isDevice)) {\n EventHandler.remove(this.content, 'touchmove pointermove', this.onTouchScroll);\n }\n }\n if (this.header) {\n EventHandler.remove(this.header, 'scroll', this.onCustomScrollbarScroll);\n EventHandler.remove(this.header, 'touchstart pointerdown', this.setPageXY);\n EventHandler.remove(this.header, 'touchmove pointermove', this.onTouchScroll);\n }\n }\n if (this.content) {\n EventHandler.remove(this.content, 'scroll', this.contentScrollHandler);\n }\n if (this.header) {\n EventHandler.remove(this.header, 'scroll', this.headerScrollHandler);\n }\n this.contentScrollHandler = null;\n this.headerScrollHandler = null;\n if (this.parent.aggregates.length && this.parent.getFooterContent()) {\n EventHandler.remove(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll);\n }\n };\n Scroll.prototype.setScrollLeft = function () {\n this.parent.getHeaderContent().querySelector('.' + literals.headerContent).scrollLeft = this.previousValues.left;\n };\n Scroll.prototype.onContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n var isHeader = element.classList.contains(literals.headerContent);\n return function (e) {\n if (_this.content.querySelector(literals.tbody) === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n var target = e.target;\n if (_this.parent.frozenRows) {\n if (_this.content.scrollTop > 0 && _this.parent.frozenRows) {\n addClass([_this.parent.element], 'e-top-shadow');\n }\n else {\n removeClass([_this.parent.element], 'e-top-shadow');\n }\n }\n if (_this.parent.element.querySelectorAll('.e-leftfreeze,.e-fixedfreeze,.e-rightfreeze').length) {\n var errorFreeze = _this.parent.getContent().querySelectorAll('.e-freezeerror:not([style*=\"display: none\"])');\n var errorFixed = _this.parent.getContent().querySelectorAll('.e-fixederror:not([style*=\"display: none\"])');\n if (target.scrollLeft !== 0 && _this.parent.getVisibleFrozenLeftCount()) {\n addClass([_this.parent.element], 'e-left-shadow');\n }\n else {\n removeClass([_this.parent.element], 'e-left-shadow');\n }\n var widthVal = Math.round((_this.parent.enableRtl ? target.scrollWidth + target.scrollLeft : target.scrollWidth -\n target.scrollLeft) + (_this.parent.height === 'auto' ? 0 : 1));\n if (widthVal === target.offsetWidth && _this.parent.getVisibleFrozenRightCount()) {\n removeClass([_this.parent.element], 'e-right-shadow');\n }\n else {\n addClass([_this.parent.element], 'e-right-shadow');\n }\n var rows = [].slice.call(_this.parent.getContent().querySelectorAll('.e-row:not(.e-hiddenrow)'));\n if (((rows.length === 1 && errorFreeze.length) ||\n (_this.parent.element.querySelector('.e-freeze-autofill:not([style*=\"display: none\"])')) ||\n errorFixed.length) && target.scrollLeft !== _this.previousValues.left) {\n target.scrollLeft = _this.previousValues.left;\n return;\n }\n if (rows.length !== 1 && (errorFreeze.length || errorFixed.length) && target.scrollTop !== _this.previousValues.top) {\n target.scrollTop = _this.previousValues.top;\n return;\n }\n }\n var left = target.scrollLeft;\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling && (!_this.parent.isEdit\n || (_this.parent.editSettings.showAddNewRow && !_this.parent.element.querySelector('.e-editedrow')))) {\n _this.parent.notify(infiniteScrollHandler, { target: e.target, isLeft: _this.previousValues.left !== left });\n }\n if (_this.parent.groupSettings.columns.length && _this.parent.groupSettings.enableLazyLoading) {\n var isDown = _this.previousValues.top < _this.parent.getContent().firstElementChild.scrollTop;\n _this.parent.notify(lazyLoadScrollHandler, { scrollDown: isDown });\n }\n _this.parent.notify(virtualScrollEdit, {});\n var isFooter = target.classList.contains('e-summarycontent');\n if (_this.previousValues.left === left) {\n _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;\n return;\n }\n _this.parent.notify(closeFilterDialog, e);\n element.scrollLeft = left;\n if (isFooter) {\n _this.header.scrollLeft = left;\n }\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n };\n };\n Scroll.prototype.onCustomScrollbarScroll = function (cont, hdr) {\n var _this = this;\n var content = cont;\n var header = hdr;\n return function (e) {\n if (_this.content.querySelector(literals.tbody) === null) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (_this.previousValues.left === left) {\n return;\n }\n content.scrollLeft = left;\n header.scrollLeft = left;\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n if (_this.parent.isDestroyed) {\n return;\n }\n };\n };\n Scroll.prototype.onTouchScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n var isFrozen = _this.parent.isFrozenGrid();\n var pageXY = _this.getPointXY(e);\n var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);\n var mHdr = _this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n var mCont = _this.parent.getContent().querySelector('.' + literals.content);\n if (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {\n return;\n }\n e.preventDefault();\n mHdr.scrollLeft = left;\n mCont.scrollLeft = left;\n if (isFrozen && _this.parent.enableColumnVirtualization) {\n var scrollBar = _this.parent.getContent().querySelector('.e-movablescrollbar');\n scrollBar.scrollLeft = left;\n }\n _this.pageXY.x = pageXY.x;\n _this.previousValues.left = left;\n };\n };\n Scroll.prototype.setPageXY = function () {\n var _this = this;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n _this.pageXY = _this.getPointXY(e);\n };\n };\n Scroll.prototype.getPointXY = function (e) {\n var pageXY = { x: 0, y: 0 };\n if (e.touches && e.touches.length) {\n pageXY.x = e.touches[0].pageX;\n pageXY.y = e.touches[0].pageY;\n }\n else {\n pageXY.x = e.pageX;\n pageXY.y = e.pageY;\n }\n return pageXY;\n };\n Scroll.prototype.getScrollbleParent = function (node) {\n if (node === null) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var parent = isNullOrUndefined(node.tagName) ? node.scrollingElement : node;\n var overflowY = document.defaultView.getComputedStyle(parent, null).overflowY;\n if (parent.scrollHeight > parent.clientHeight && overflowY !== 'hidden'\n && overflowY !== 'visible' || node.tagName === 'HTML' || node.tagName === 'BODY') {\n return node;\n }\n else {\n return this.getScrollbleParent(node.parentNode);\n }\n };\n /**\n * @param {boolean} isAdd - specifies whether adding/removing the event\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.addStickyListener = function (isAdd) {\n this.parentElement = this.getScrollbleParent(this.parent.element.parentElement);\n if (isAdd && this.parentElement) {\n this.eventElement = this.parentElement.tagName === 'HTML' || this.parentElement.tagName === 'BODY' ? document :\n this.parentElement;\n EventHandler.add(this.eventElement, 'scroll', this.makeStickyHeader, this);\n }\n else if (this.eventElement) {\n EventHandler.remove(this.eventElement, 'scroll', this.makeStickyHeader);\n this.eventElement = null;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.resizeFrozenRowBorder = function () {\n var div;\n if (!this.parent.element.querySelector('.e-frozenrow-border')) {\n div = this.parent.createElement('div', { className: 'e-frozenrow-border' });\n this.parent.element.insertBefore(div, this.parent.element.querySelector('.e-gridcontent'));\n }\n else {\n div = this.parent.element.querySelector('.e-frozenrow-border');\n }\n var scrollWidth = this.parent.height !== 'auto' ? Scroll.getScrollBarWidth() : 0;\n div.style.width = (this.parent.element.offsetWidth - scrollWidth) - 0.5 + 'px';\n };\n Scroll.prototype.wireEvents = function () {\n var _this = this;\n if (this.oneTimeReady) {\n var frzCols = this.parent.isFrozenGrid();\n this.content = this.parent.getContent().querySelector('.' + literals.content);\n this.header = this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n var mScrollBar = this.parent.getContent().querySelector('.e-movablescrollbar');\n if (this.parent.frozenRows && this.header && this.content) {\n EventHandler.add(this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(this.header, 'touchmove pointermove', this.onTouchScroll(this.content), this);\n }\n if (frzCols && mScrollBar && this.parent.enableColumnVirtualization) {\n EventHandler.add(mScrollBar, 'scroll', this.onCustomScrollbarScroll(this.content, this.header), this);\n EventHandler.add(this.content, 'scroll', this.onCustomScrollbarScroll(mScrollBar, this.header), this);\n EventHandler.add(this.header, 'scroll', this.onCustomScrollbarScroll(mScrollBar, this.content), this);\n EventHandler.add(this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(this.header, 'touchmove pointermove', this.onTouchScroll(this.content), this);\n EventHandler.add(this.content, 'touchstart pointerdown', this.setPageXY(), this);\n if (!(/macintosh|ipad/.test(Browser.userAgent.toLowerCase()) && Browser.isDevice)) {\n EventHandler.add(this.content, 'touchmove pointermove', this.onTouchScroll(this.header), this);\n }\n }\n this.contentScrollHandler = this.onContentScroll(this.header);\n this.headerScrollHandler = this.onContentScroll(this.content);\n EventHandler.add(this.content, 'scroll', this.contentScrollHandler, this);\n EventHandler.add(this.header, 'scroll', this.headerScrollHandler, this);\n if (this.parent.aggregates.length) {\n EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);\n }\n if (this.parent.enableStickyHeader) {\n this.addStickyListener(true);\n }\n this.refresh();\n this.oneTimeReady = false;\n }\n var table = this.parent.getContentTable();\n var sLeft;\n var sHeight;\n var clientHeight;\n getUpdateUsingRaf(function () {\n sLeft = _this.header.scrollLeft;\n sHeight = table.scrollHeight;\n clientHeight = _this.parent.getContent().clientHeight;\n }, function () {\n var args = { cancel: false };\n _this.parent.notify(checkScrollReset, args);\n if (sHeight < clientHeight && _this.parent.height !== 'auto') {\n _this.setLastRowCell();\n }\n if (_this.parent.frozenRows) {\n _this.resizeFrozenRowBorder();\n }\n if (!_this.parent.enableVirtualization && !_this.parent.enableInfiniteScrolling) {\n if (!args.cancel) {\n _this.header.scrollLeft = _this.previousValues.left;\n _this.content.scrollLeft = _this.previousValues.left;\n _this.content.scrollTop = _this.previousValues.top;\n }\n }\n if (!_this.parent.enableColumnVirtualization) {\n _this.content.scrollLeft = sLeft;\n if (_this.parent.isFrozenGrid()) {\n _this.previousValues.left = sLeft;\n }\n }\n });\n this.parent.isPreventScrollEvent = false;\n };\n /**\n * @returns {void} returns void\n * @hidden\n */\n Scroll.prototype.setLastRowCell = function () {\n var table = this.parent.getContentTable();\n if (table.querySelector('tr:nth-last-child(2)')) {\n removeClass(table.querySelector('tr:nth-last-child(2)').querySelectorAll('td'), 'e-lastrowcell');\n if (this.parent.isSpan) {\n removeClass(table.querySelectorAll('.e-row-span-lastrowcell'), 'e-lastrowcell');\n }\n if (this.parent.editSettings.showAddNewRow && this.parent.editSettings.newRowPosition === 'Bottom') {\n addClass(table.querySelector('tr:nth-last-child(2)').querySelectorAll('td'), 'e-lastrowcell');\n }\n }\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n if (this.parent.isSpan) {\n addClass(table.querySelectorAll('.e-row-span-lastrowcell'), 'e-lastrowcell');\n }\n };\n /**\n * @param {boolean} rtl - specifies the rtl\n * @returns {ScrollCss} returns the ScrollCss\n * @hidden\n */\n Scroll.prototype.getCssProperties = function (rtl) {\n var css = {};\n var enableRtl = isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;\n css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';\n css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';\n return css;\n };\n Scroll.prototype.ensureOverflow = function (content) {\n content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n };\n Scroll.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.setPadding();\n this.oneTimeReady = true;\n if (this.parent.height === 'auto') {\n this.removePadding();\n }\n this.wireEvents();\n this.setHeight();\n var width = 'width';\n this.setWidth(!isNullOrUndefined(e.properties[\"\" + width]));\n };\n Scroll.prototype.makeStickyHeader = function () {\n if (this.parent.enableStickyHeader && this.parent.element && this.parent.getContent()) {\n var contentRect = this.parent.getContent().getClientRects()[0];\n if (contentRect) {\n var headerEle = this.parent.getHeaderContent();\n var toolbarEle = this.parent.element.querySelector('.e-toolbar');\n var groupHeaderEle = this.parent.element.querySelector('.e-groupdroparea');\n var height = headerEle.offsetHeight + (toolbarEle ? toolbarEle.offsetHeight : 0) +\n (groupHeaderEle ? groupHeaderEle.offsetHeight : 0);\n var parentTop = this.parentElement.getClientRects()[0].top;\n var top_1 = contentRect.top - (parentTop < 0 ? 0 : parentTop);\n var left = contentRect.left;\n var colMenuEle = document.body.querySelector('#' + this.parent.element.id + '_columnmenu');\n if (top_1 < height && contentRect.bottom > 0) {\n headerEle.classList.add('e-sticky');\n var elemTop = 0;\n if (groupHeaderEle && this.parent.groupSettings.showDropArea) {\n this.setSticky(groupHeaderEle, elemTop, contentRect.width, left, true);\n elemTop += groupHeaderEle.getClientRects()[0].height;\n }\n if (toolbarEle) {\n this.setSticky(toolbarEle, elemTop, contentRect.width, left, true);\n elemTop += toolbarEle.getClientRects()[0].height;\n }\n this.setSticky(headerEle, elemTop, contentRect.width, left, true);\n if (!isNullOrUndefined(colMenuEle)) {\n colMenuEle.style.position = 'fixed';\n colMenuEle.style.top = height + 'px';\n }\n }\n else {\n if (headerEle.classList.contains('e-sticky')) {\n this.setSticky(headerEle, null, null, null, false);\n if (toolbarEle) {\n this.setSticky(toolbarEle, null, null, null, false);\n }\n if (groupHeaderEle) {\n this.setSticky(groupHeaderEle, null, null, null, false);\n }\n var ccDlg = this.parent.element.querySelector('.e-ccdlg');\n if (ccDlg) {\n ccDlg.classList.remove('e-sticky');\n }\n if (!isNullOrUndefined(colMenuEle)) {\n colMenuEle.style.position = 'absolute';\n var topStyle = contentRect.top - parentTop;\n colMenuEle.style.top = topStyle + 'px';\n }\n }\n }\n this.parent.notify(events.stickyScrollComplete, {});\n }\n }\n };\n Scroll.prototype.setSticky = function (ele, top, width, left, isAdd) {\n if (isAdd) {\n ele.style.width = width + 'px';\n ele.classList.add('e-sticky');\n }\n else {\n ele.classList.remove('e-sticky');\n }\n ele.style.top = top != null ? top + 'px' : '';\n ele.style.left = left !== null ? parseInt(ele.style.left, 10) !== left ? left + 'px' : ele.style.left : '';\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.removeEventListener();\n //Remove Dom event\n var cont = this.parent.getContent().querySelector('.' + literals.content);\n EventHandler.remove(cont, 'scroll', this.onContentScroll);\n if (this.parent.enableStickyHeader) {\n this.addStickyListener(false);\n }\n //Remove padding\n this.removePadding();\n removeClass([this.parent.getHeaderContent().querySelector('.' + literals.headerContent)], literals.headerContent);\n removeClass([cont], literals.content);\n //Remove height\n cont.style.height = '';\n //Remove width\n this.parent.element.style.width = '';\n };\n /**\n * Function to get the scrollbar width of the browser.\n *\n * @returns {number} return the width\n * @hidden\n */\n Scroll.getScrollBarWidth = function () {\n return getScrollBarWidth();\n };\n return Scroll;\n}());\nexport { Scroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { compile } from '@syncfusion/ej2-base';\nimport { getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { Property, Collection, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the Grid's aggregate column.\n */\nvar AggregateColumn = /** @class */ (function (_super) {\n __extends(AggregateColumn, _super);\n function AggregateColumn() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.templateFn = {};\n return _this;\n }\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n AggregateColumn.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /**\n * @returns {Function} returns the Function\n * @hidden\n */\n AggregateColumn.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @param {Object} helper - specifies the helper\n * @returns {void}\n * @hidden\n */\n AggregateColumn.prototype.setTemplate = function (helper) {\n if (helper === void 0) { helper = {}; }\n if (this.footerTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.Summary)] = { fn: compile(this.footerTemplate, helper),\n property: 'footerTemplate' };\n }\n if (this.groupFooterTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.GroupSummary)] = { fn: compile(this.groupFooterTemplate, helper),\n property: 'groupFooterTemplate' };\n }\n if (this.groupCaptionTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.CaptionSummary)] = { fn: compile(this.groupCaptionTemplate, helper),\n property: 'groupCaptionTemplate' };\n }\n };\n /**\n * @param {CellType} type - specifies the cell type\n * @returns {Object} returns the object\n * @hidden\n */\n AggregateColumn.prototype.getTemplate = function (type) {\n return this.templateFn[getEnumValue(CellType, type)];\n };\n /**\n * @param {Object} prop - returns the Object\n * @returns {void}\n * @hidden\n */\n AggregateColumn.prototype.setPropertiesSilent = function (prop) {\n this.setProperties(prop, true);\n };\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"columnName\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"format\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupFooterTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupCaptionTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"customAggregate\", void 0);\n return AggregateColumn;\n}(ChildProperty));\nexport { AggregateColumn };\n/**\n * Configures the aggregate rows.\n */\nvar AggregateRow = /** @class */ (function (_super) {\n __extends(AggregateRow, _super);\n function AggregateRow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], AggregateColumn)\n ], AggregateRow.prototype, \"columns\", void 0);\n return AggregateRow;\n}(ChildProperty));\nexport { AggregateRow };\n","import { Browser, remove, EventHandler, isUndefined, closest, classList } from '@syncfusion/ej2-base';\nimport { parentsUntil, isGroupAdaptive } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * The `Clipboard` module is used to handle clipboard copy action.\n */\nvar Clipboard = /** @class */ (function () {\n /**\n * Constructor for the Grid clipboard module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n * @hidden\n */\n function Clipboard(parent, serviceLocator) {\n this.copyContent = '';\n this.isSelect = false;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n }\n /**\n * @returns {void}\n * @hidden\n */\n Clipboard.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.keyPressed, this.keyDownHandler, this);\n this.parent.on(events.click, this.clickHandler, this);\n this.parent.on(events.onEmpty, this.initialEnd, this);\n EventHandler.add(this.parent.element, 'keydown', this.pasteHandler, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Clipboard.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.keyPressed, this.keyDownHandler);\n this.parent.off(events.contentReady, this.initialEnd);\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.onEmpty, this.initialEnd);\n EventHandler.remove(this.parent.element, 'keydown', this.pasteHandler);\n };\n Clipboard.prototype.clickHandler = function (e) {\n var target = e.target;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n target = parentsUntil(target, 'e-rowcell');\n };\n Clipboard.prototype.pasteHandler = function (e) {\n var _this = this;\n var grid = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n var selectedRowCellIndexes = this.parent.getSelectedRowCellIndexes();\n if (e.keyCode === 67 && isMacLike && e.metaKey && !grid.isEdit) {\n this.copy();\n }\n if (selectedRowCellIndexes.length && e.keyCode === 86 && ((!isMacLike && e.ctrlKey) || (isMacLike && e.metaKey)) && !grid.isEdit) {\n var target = closest(document.activeElement, '.' + literals.rowCell);\n if (!this.clipBoardTextArea || !target || !grid.editSettings.allowEditing || grid.editSettings.mode !== 'Batch' ||\n grid.selectionSettings.mode !== 'Cell' || grid.selectionSettings.cellSelectionMode === 'Flow') {\n return;\n }\n this.activeElement = document.activeElement;\n var x_1 = window.scrollX;\n var y_1 = window.scrollY;\n this.clipBoardTextArea.focus();\n setTimeout(function () {\n _this.activeElement.focus();\n window.scrollTo(x_1, y_1);\n _this.paste(_this.clipBoardTextArea.value, selectedRowCellIndexes[0].rowIndex, selectedRowCellIndexes[0].cellIndexes[0]);\n }, isMacLike ? 100 : 10);\n }\n };\n /**\n * Paste data from clipboard to selected cells.\n *\n * @param {boolean} data - Specifies the date for paste.\n * @param {boolean} rowIndex - Specifies the row index.\n * @param {boolean} colIndex - Specifies the column index.\n * @returns {void}\n */\n Clipboard.prototype.paste = function (data, rowIndex, colIndex) {\n var grid = this.parent;\n var cIdx = colIndex;\n var rIdx = rowIndex;\n var col;\n var value;\n var isAvail;\n var rows = data.split('\\n');\n var cols;\n for (var r = 0; r < rows.length; r++) {\n cols = rows[parseInt(r.toString(), 10)].split('\\t');\n cIdx = colIndex;\n if ((r === rows.length - 1 && rows[parseInt(r.toString(), 10)] === '') || isUndefined(grid.getRowByIndex(rIdx))) {\n cIdx++;\n break;\n }\n for (var c = 0; c < cols.length; c++) {\n isAvail = grid.getCellFromIndex(rIdx, cIdx);\n if (!isAvail) {\n cIdx++;\n break;\n }\n col = grid.getColumnByIndex(cIdx);\n value = col.getParser() ? col.getParser()(cols[parseInt(c.toString(), 10)]) : cols[parseInt(c.toString(), 10)];\n if (col.allowEditing && !col.isPrimaryKey && !col.template) {\n var args = {\n column: col,\n data: value,\n rowIndex: rIdx\n };\n this.parent.trigger(events.beforePaste, args);\n rIdx = args.rowIndex;\n if (!args.cancel) {\n if (grid.editModule) {\n if (col.type === 'number') {\n this.parent.editModule.updateCell(rIdx, col.field, parseFloat(args.data));\n }\n else {\n grid.editModule.updateCell(rIdx, col.field, args.data);\n }\n }\n }\n }\n cIdx++;\n }\n rIdx++;\n }\n grid.selectionModule.selectCellsByRange({ rowIndex: rowIndex, cellIndex: colIndex }, { rowIndex: rIdx - 1, cellIndex: cIdx - 1 });\n var cell = this.parent.getCellFromIndex(rIdx - 1, cIdx - 1);\n if (cell) {\n classList(cell, ['e-focus', 'e-focused'], []);\n }\n this.clipBoardTextArea.value = '';\n };\n Clipboard.prototype.initialEnd = function () {\n this.l10n = this.serviceLocator.getService('localization');\n this.parent.off(events.contentReady, this.initialEnd);\n this.clipBoardTextArea = this.parent.createElement('textarea', {\n className: 'e-clipboard',\n styles: 'opacity: 0',\n attrs: { tabindex: '-1', 'aria-label': this.l10n.getConstant('ClipBoard') }\n });\n this.parent.element.appendChild(this.clipBoardTextArea);\n };\n Clipboard.prototype.keyDownHandler = function (e) {\n if (e.action === 'ctrlPlusC') {\n this.copy();\n }\n else if (e.action === 'ctrlShiftPlusH') {\n this.copy(true);\n }\n };\n Clipboard.prototype.setCopyData = function (withHeader) {\n if (window.getSelection().toString() === '') {\n this.clipBoardTextArea.value = this.copyContent = '';\n var rows = this.parent.getDataRows();\n if (this.parent.selectionSettings.mode !== 'Cell') {\n var selectedIndexes = this.parent.getSelectedRowIndexes().sort(function (a, b) { return a - b; });\n if (withHeader) {\n var headerTextArray = [];\n for (var i = 0; i < this.parent.getVisibleColumns().length; i++) {\n headerTextArray[parseInt(i.toString(), 10)] = this.parent\n .getVisibleColumns()[parseInt(i.toString(), 10)].headerText;\n }\n this.getCopyData(headerTextArray, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < selectedIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var leftCols = [];\n var idx = selectedIndexes[parseInt(i.toString(), 10)];\n if (!isGroupAdaptive(this.parent) && (this.parent.enableVirtualization ||\n (this.parent.enableInfiniteScrolling && this.parent.infiniteScrollSettings.enableCache) ||\n (this.parent.groupSettings.columns.length && this.parent.groupSettings.enableLazyLoading))) {\n idx = rows.map(function (m) { return m.getAttribute('data-rowindex'); }).indexOf(selectedIndexes[parseInt(i.toString(), 10)].toString());\n }\n leftCols.push.apply(leftCols, [].slice.call(rows[parseInt(idx.toString(), 10)].querySelectorAll('.e-rowcell:not(.e-hide)')));\n this.getCopyData(leftCols, false, '\\t', withHeader);\n }\n }\n else {\n var obj = this.checkBoxSelection();\n if (obj.status) {\n if (withHeader) {\n var headers = [];\n for (var i = 0; i < obj.colIndexes.length; i++) {\n var colHeader = this.parent\n .getColumnHeaderByIndex(obj.colIndexes[parseInt(i.toString(), 10)]);\n if (!colHeader.classList.contains('e-hide')) {\n headers.push(colHeader);\n }\n }\n this.getCopyData(headers, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < obj.rowIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[obj.rowIndexes[parseInt(i.toString(), 10)]].\n querySelectorAll('.e-cellselectionbackground:not(.e-hide)'));\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n this.getCopyData([].slice.call(this.parent.element.getElementsByClassName('e-cellselectionbackground')), true, '\\n', withHeader);\n }\n }\n var args = {\n data: this.copyContent,\n cancel: false\n };\n this.parent.trigger(events.beforeCopy, args);\n if (args.cancel) {\n return;\n }\n this.clipBoardTextArea.value = this.copyContent = args.data;\n if (!Browser.userAgent.match(/ipad|ipod|iphone/i)) {\n this.clipBoardTextArea.select();\n }\n else {\n this.clipBoardTextArea.setSelectionRange(0, this.clipBoardTextArea.value.length);\n }\n this.isSelect = true;\n }\n };\n Clipboard.prototype.getCopyData = function (cells, isCell, splitKey, withHeader) {\n var isElement = typeof cells[0] !== 'string';\n for (var j = 0; j < cells.length; j++) {\n if (withHeader && isCell) {\n var colIdx = parseInt(cells[parseInt(j.toString(), 10)].getAttribute(literals.dataColIndex), 10);\n this.copyContent += this.parent.getColumns()[parseInt(colIdx.toString(), 10)].headerText + '\\n';\n }\n if (isElement) {\n if (!cells[parseInt(j.toString(), 10)].classList.contains('e-hide')) {\n this.copyContent += cells[parseInt(j.toString(), 10)].innerText;\n }\n }\n else {\n this.copyContent += cells[parseInt(j.toString(), 10)];\n }\n if (j < cells.length - 1) {\n this.copyContent += splitKey;\n }\n }\n };\n /**\n * Copy selected rows or cells data into clipboard.\n *\n * @returns {void}\n * @param {boolean} withHeader - Specifies whether the column header data need to be copied or not.\n */\n Clipboard.prototype.copy = function (withHeader) {\n if (document.queryCommandSupported('copy') && this.clipBoardTextArea) {\n this.setCopyData(withHeader);\n document.execCommand('copy');\n this.clipBoardTextArea.blur();\n }\n if (this.isSelect) {\n window.getSelection().removeAllRanges();\n this.isSelect = false;\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Clipboard.prototype.getModuleName = function () {\n return 'clipboard';\n };\n /**\n * To destroy the clipboard\n *\n * @returns {void}\n * @hidden\n */\n Clipboard.prototype.destroy = function () {\n this.removeEventListener();\n if (this.clipBoardTextArea) {\n remove(this.clipBoardTextArea);\n this.clipBoardTextArea = null;\n }\n };\n Clipboard.prototype.checkBoxSelection = function () {\n var gridObj = this.parent;\n var obj = { status: false };\n if (gridObj.selectionSettings.mode === 'Cell') {\n var rowCellIndxes = gridObj.getSelectedRowCellIndexes();\n var str = void 0;\n var rowIndexes = [];\n var i = void 0;\n for (i = 0; i < rowCellIndxes.length; i++) {\n if (rowCellIndxes[parseInt(i.toString(), 10)].cellIndexes.length) {\n rowIndexes.push(rowCellIndxes[parseInt(i.toString(), 10)].rowIndex);\n }\n if (rowCellIndxes[parseInt(i.toString(), 10)].cellIndexes.length) {\n if (!str) {\n str = JSON.stringify(rowCellIndxes[parseInt(i.toString(), 10)].cellIndexes.sort());\n }\n if (str !== JSON.stringify(rowCellIndxes[parseInt(i.toString(), 10)].cellIndexes.sort())) {\n break;\n }\n }\n }\n rowIndexes.sort(function (a, b) { return a - b; });\n if (i === rowCellIndxes.length) {\n obj = { status: true, rowIndexes: rowIndexes, colIndexes: rowCellIndxes[0].cellIndexes };\n }\n }\n return obj;\n };\n return Clipboard;\n}());\nexport { Clipboard };\n","/**\n *\n * `Logger` class\n */\nimport { isNullOrUndefined, L10n, isUndefined } from '@syncfusion/ej2-base';\nimport { DataUtil, DataManager } from '@syncfusion/ej2-data';\nvar BASE_DOC_URL = 'https://ej2.syncfusion.com/documentation/grid';\nvar DOC_URL = 'https://ej2.syncfusion.com/documentation/';\nvar WARNING = '[EJ2Grid.Warning]';\nvar ERROR = '[EJ2Grid.Error]';\nvar INFO = '[EJ2Grid.Info]';\nvar Logger = /** @class */ (function () {\n function Logger(parent) {\n this.parent = parent;\n this.parent.on('initial-end', this.patchadaptor, this);\n }\n Logger.prototype.getModuleName = function () {\n return 'logger';\n };\n Logger.prototype.log = function (types, args) {\n if (!(types instanceof Array)) {\n types = [types];\n }\n var type = types;\n for (var i = 0; i < type.length; i++) {\n var item = detailLists[type[parseInt(i.toString(), 10)]];\n var cOp = item.check(args, this.parent);\n if (cOp.success) {\n // eslint-disable-next-line no-console\n console[item.logType](item.generateMessage(args, this.parent, cOp.options));\n }\n }\n };\n Logger.prototype.patchadaptor = function () {\n var adaptor = this.parent.getDataModule().dataManager.adaptor;\n var original = adaptor.beforeSend;\n if (original) {\n adaptor.beforeSend = function (dm, request, settings) {\n original.call(adaptor, dm, request, settings);\n };\n }\n };\n Logger.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('initial-end', this.patchadaptor);\n };\n return Logger;\n}());\nexport { Logger };\nexport var detailLists = {\n // eslint-disable-next-line camelcase\n module_missing: {\n type: 'module_missing',\n logType: 'warn',\n check: function (args, parent) {\n var injected = parent.getInjectedModules().map(function (m) { return m.prototype.getModuleName(); });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var modules = parent.requiredModules().map(function (m) { return m.member; })\n .filter(function (name) { return injected.indexOf(name) === -1; });\n return { success: modules.filter(function (m) { return m !== 'resize'; }).length > 0, options: modules };\n },\n generateMessage: function (args, parent, modules) {\n modules = modules.filter(function (m) { return m !== 'resize'; })\n .reduce(function (prev, cur) { return prev + (\"* \" + cur + \"\\n\"); }, '');\n return WARNING + ': MODULES MISSING\\n' + 'The following modules are not injected:.\\n' +\n (\"\" + modules) +\n (\"Refer to \" + BASE_DOC_URL + \"/module.html for documentation on importing feature modules.\");\n }\n },\n // eslint-disable-next-line camelcase\n promise_enabled: {\n type: 'promise_enabled',\n logType: 'error',\n check: function () {\n return { success: typeof Promise === 'undefined' };\n },\n generateMessage: function () {\n return ERROR + ': PROMISE UNDEFINED\\n' +\n 'Promise object is not present in the global environment,' +\n 'please use polyfil to support Promise object in your environment.\\n' +\n (\"Refer to \" + DOC_URL + \"/base/browser.html?#required-polyfills for more information.\");\n }\n },\n // eslint-disable-next-line camelcase\n primary_column_missing: {\n type: 'primary_column_missing',\n logType: 'warn',\n check: function (args, parent) {\n return { success: parent.enableColumnVirtualization\n ? parent.getPrimaryKeyFieldNames().length === 0\n : parent.getColumns().filter(function (column) { return column.isPrimaryKey; }).length === 0 };\n },\n generateMessage: function () {\n return WARNING + ': PRIMARY KEY MISSING\\n' + 'Editing is enabled but primary key column is not specified.\\n' +\n (\"Refer to \" + BASE_DOC_URL + \"/api-column.html?#isprimarykey for documentation on providing primary key columns.\");\n }\n },\n // eslint-disable-next-line camelcase\n selection_key_missing: {\n type: 'selection_key_missing',\n logType: 'warn',\n check: function (args, parent) {\n return { success: parent.selectionSettings.persistSelection &&\n parent.getColumns().filter(function (column) { return column.isPrimaryKey; }).length === 0 };\n },\n generateMessage: function () {\n return WARNING + ': PRIMARY KEY MISSING\\n' +\n 'selectionSettings.persistSelection property is enabled. It requires one primary key column to persist selection.\\n' +\n (\"Refer to \" + BASE_DOC_URL + \"/api-column.html?#isprimarykey for documentation on providing primary key columns.\");\n }\n },\n actionfailure: {\n type: 'actionfailure',\n logType: 'error',\n check: function () {\n return { success: true };\n },\n generateMessage: function (args, parent) {\n var message = '';\n var formatError = formatErrorHandler(args, parent);\n var ajaxError = ajaxErrorHandler(args, parent);\n if (ajaxError !== '') {\n message = ajaxError;\n }\n else if (formatError !== '') {\n message = formatError;\n }\n else {\n message = args.error;\n }\n return WARNING + ': ' + message;\n }\n },\n // eslint-disable-next-line camelcase\n locale_missing: {\n type: 'locale_missing',\n logType: 'warn',\n check: function (args, parent) {\n var lObj = DataUtil.getObject(\"locale.\" + parent.locale + \".grid\", L10n);\n return { success: parent.locale !== 'en-US' && isNullOrUndefined(lObj) };\n },\n generateMessage: function (args, parent) {\n return WARNING + ': LOCALE CONFIG MISSING\\n' + (\"Locale configuration for '\" + parent.locale + \"' is not provided.\\n\") +\n (\"Refer to \" + BASE_DOC_URL + \"/globalization-and-localization.html?#localization \\n for documentation on setting locale configuration.\");\n }\n },\n limitation: {\n type: 'limitation',\n logType: 'warn',\n check: function (args, parent) {\n var name = args;\n var opt;\n switch (name) {\n case 'freeze':\n opt = {\n success: !isUndefined(parent.detailTemplate) || !isUndefined(parent.childGrid),\n options: { name: 'freeze' }\n };\n break;\n case 'virtualization':\n opt = {\n success: !isUndefined(parent.detailTemplate) || !isUndefined(parent.childGrid),\n options: { name: 'virtualization' }\n };\n break;\n default:\n opt = { success: false };\n break;\n }\n return opt;\n },\n generateMessage: function (args, parent, options) {\n var name = options.name;\n var opt;\n switch (name) {\n case 'freeze':\n opt = 'Frozen rows and columns do not support the following features:\\n' +\n '* Details Template\\n' +\n '* Hierarchy Grid\\n';\n break;\n case 'virtualization':\n opt = 'Virtualization does not support the following features.\\n' +\n '* Details Template.\\n' +\n '* Hierarchy Grid.\\n';\n break;\n default:\n opt = '';\n break;\n }\n return WARNING + (\": \" + name.toUpperCase() + \" LIMITATIONS\\n\") + opt;\n }\n },\n // eslint-disable-next-line camelcase\n check_datasource_columns: {\n type: 'check_datasource_columns',\n logType: 'warn',\n check: function (args, parent) {\n return { success: !(parent.columns.length ||\n (parent.dataSource instanceof DataManager) ||\n (!isNullOrUndefined(parent.dataSource) && parent.dataSource.length)) };\n },\n generateMessage: function () {\n return WARNING + ': GRID CONFIG MISSING\\n' + 'dataSource and columns are not provided in the grid. ' +\n 'At least one of either must be provided for grid configuration.\\n' +\n (\"Refer to \" + BASE_DOC_URL + \"/columns.html for documentation on configuring the grid data and columns.\");\n }\n },\n // eslint-disable-next-line camelcase\n virtual_height: {\n type: 'virtual_height',\n logType: 'error',\n check: function (args, parent) {\n return { success: isNullOrUndefined(parent.height) || parent.height === 'auto' };\n },\n generateMessage: function () {\n return ERROR + ': GRID HEIGHT MISSING \\n' + 'height property is required to use virtualization.\\n' +\n (\"Refer to \" + BASE_DOC_URL + \"/virtual.html for documentation on configuring the virtual grid.\");\n }\n },\n // eslint-disable-next-line camelcase\n grid_remote_edit: {\n type: 'grid_remote_edit',\n logType: 'error',\n check: function (args) {\n return { success: Array.isArray(args) || Array.isArray(args.result) };\n },\n generateMessage: function () {\n return ERROR + ': RETRUN VALUE MISSING \\n' +\n 'Remote service returns invalid data. \\n' +\n (\"Refer to \" + BASE_DOC_URL + \"/edit.html for documentation on configuring editing with remote data.\");\n }\n },\n // eslint-disable-next-line camelcase\n grid_sort_comparer: {\n type: 'grid_sort_comparer',\n logType: 'warn',\n check: function (args, parent) {\n return { success: parent.getDataModule().isRemote() };\n },\n generateMessage: function () {\n return WARNING + ': SORT COMPARER NOT WORKING \\n' + 'Sort comparer will not work with remote data.' +\n (\"Refer to \" + BASE_DOC_URL + \"/sorting/#custom-sort-comparer for documentation on using the sort comparer.\");\n }\n },\n // eslint-disable-next-line camelcase\n resize_min_max: {\n type: 'resize_min_max',\n logType: 'info',\n check: function (args) {\n return { success: (args.column.minWidth && args.column.minWidth >= args.width) ||\n (args.column.maxWidth && args.column.maxWidth <= args.width) };\n },\n generateMessage: function () {\n return INFO + ': RESIZING COLUMN REACHED MIN OR MAX \\n' + 'The column resizing width is at its min or max.';\n }\n },\n // eslint-disable-next-line camelcase\n action_disabled_column: {\n type: 'action_disabled_column',\n logType: 'info',\n check: function (args) {\n var success = true;\n var fn;\n switch (args.moduleName) {\n case 'reorder':\n if (isNullOrUndefined(args.destColumn)) {\n fn = \"reordering action is disabled for the \" + args.column.headerText + \" column\";\n }\n else {\n fn = \"reordering action is disabled for the \" + (args.column.allowReordering ?\n args.destColumn.headerText : args.column.headerText) + \" column\";\n }\n break;\n case 'group':\n fn = \"grouping action is disabled for the \" + args.columnName + \" column.\";\n break;\n case 'filter':\n fn = \"filtering action is disabled for the \" + args.columnName + \" column.\";\n break;\n case 'sort':\n fn = \"sorting action is disabled for the \" + args.columnName + \" column.\";\n break;\n }\n return { success: success, options: { fn: fn } };\n },\n generateMessage: function (args, parent, options) {\n return INFO + (\": ACTION DISABLED \\n \" + options.fn);\n }\n },\n // eslint-disable-next-line camelcase\n exporting_begin: {\n type: 'exporting_begin',\n logType: 'info',\n check: function (args) {\n return { success: true, options: { args: args } };\n },\n generateMessage: function (args, parent, options) {\n return INFO + (\": EXPORTNIG INPROGRESS \\n Grid \" + options.args + \"ing is in progress\");\n }\n },\n // eslint-disable-next-line camelcase\n exporting_complete: {\n type: 'exporting_complete',\n logType: 'info',\n check: function (args) {\n return { success: true, options: { args: args } };\n },\n generateMessage: function (args, parent, options) {\n return INFO + (\": EXPORTNIG COMPLETED \\n Grid \" + options.args + \"ing is complete\");\n }\n },\n // eslint-disable-next-line camelcase\n foreign_key_failure: {\n type: 'foreign_key_failure',\n logType: 'error',\n check: function () {\n return { success: true };\n },\n generateMessage: function () {\n return ERROR + ': FOREIGNKEY CONFIG \\n Grid foreign key column needs a valid data source/service.' +\n (\"Refer to \" + BASE_DOC_URL + \"/columns/#foreign-key-column for documentation on configuring foreign key columns.\");\n }\n },\n // eslint-disable-next-line camelcase\n initial_action: {\n type: 'initial_action',\n logType: 'error',\n check: function (args) {\n var success = true;\n var fn;\n switch (args.moduleName) {\n case 'group':\n fn = \"The \" + args.columnName + \" column is not available in the grid's column model.\" +\n 'Please provide a valid field name to group the column';\n break;\n case 'filter':\n fn = \"The \" + args.columnName + \" column is not available in the grid's column model.\" +\n 'Please provide a valid field name to filter the column.';\n break;\n case 'sort':\n fn = \"The \" + args.columnName + \" column is not available in the grid's column model.\" +\n 'Please provide a valid field name to sort the column.';\n break;\n }\n return { success: success, options: { fn: fn } };\n },\n generateMessage: function (args, parent, options) {\n return ERROR + (\": INITIAL ACTION FAILURE \\n \" + options.fn);\n }\n },\n // eslint-disable-next-line camelcase\n frozen_rows_columns: {\n type: 'frozen_rows_columns',\n logType: 'error',\n check: function (args, parent) {\n return { success: parent.getColumns().length <= parent.frozenColumns\n || (parent.currentViewData.length && parent.frozenRows >= parent.currentViewData.length) };\n },\n generateMessage: function (args, parent) {\n return ERROR + (\": OUT OF RANGE ERROR-\\n \" + (parent.getColumns().length <= parent.frozenColumns ? 'FROZEN COLUMNS,' : '')) +\n ((parent.frozenRows >= parent.currentViewData.length ? 'FROZEN ROWS' : '') + \" invalid\");\n }\n },\n // eslint-disable-next-line camelcase\n column_type_missing: {\n type: 'column_type_missing',\n logType: 'error',\n check: function (args) {\n return { success: isNullOrUndefined(args.column.type), options: args.column.headerText };\n },\n generateMessage: function (args, parent, options) {\n return ERROR + (\": COLUMN TYPE MISSING-\\n \" + options + \" column type was invalid or not defined.\") +\n (\"Please go through below help link: \" + DOC_URL + \"/grid/columns/#column-type\");\n }\n },\n // eslint-disable-next-line camelcase\n datasource_syntax_mismatch: {\n type: 'datasource_syntax_mismatch',\n logType: 'warn',\n check: function (args) {\n return { success: args.dataState.dataSource && !(args.dataState.dataSource instanceof DataManager ||\n 'result' in args.dataState.dataSource || args.dataState.dataSource instanceof Array) &&\n !(isNullOrUndefined(args.dataState.dataStateChange)) };\n },\n generateMessage: function () {\n return WARNING + ': DATASOURCE SYNTAX WARNING\\n' +\n 'DataSource should be in the form of {result: Object[], count: number}' +\n 'when dataStateChangeEvent used';\n }\n }\n};\nvar formatErrorHandler = function (args) {\n var error = args.error;\n if (error.indexOf && error.indexOf('Format options') !== 0) {\n return '';\n }\n return 'INVALID FORMAT\\n' +\n 'For more information, refer to the following documentation links:\\n' +\n (\"Number format: \" + DOC_URL + \"/common/internationalization#supported-format-string\\n\") +\n (\"Date format: \" + DOC_URL + \"/common/internationalization#manipulating-datetime\\n\") +\n (\"Message: \" + error);\n};\nvar ajaxErrorHandler = function (args) {\n var error = DataUtil.getObject('error.error', args);\n if (isNullOrUndefined(error)) {\n return '';\n }\n var jsonResult = '';\n try {\n jsonResult = JSON.parse(error.responseText);\n }\n catch (_a) {\n jsonResult = '';\n }\n return 'XMLHTTPREQUEST FAILED\\n' +\n (\"Url: \" + error.responseURL + \"\\n\") +\n (\"Status: \" + error.status + \" - \" + error.statusText + \"\\n\") +\n (\"\" + (jsonResult !== '' ? 'Message: ' + jsonResult : ''));\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { isNullOrUndefined, setValue, getValue, defaultCurrencyCode } from '@syncfusion/ej2-base';\nimport { Component, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, append, remove, classList, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { Property, Collection, Complex, Event, NotifyPropertyChanges, L10n } from '@syncfusion/ej2-base';\nimport { EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { DataManager, DataUtil, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';\nimport { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, isGroupAdaptive, refreshForeignData, getScrollBarWidth } from './util';\nimport { getRowHeight, setColumnIndex, Global, ispercentageWidth, getNumberFormat, getTransformValues } from './util';\nimport { setRowElements, resetRowIndex, compareChanges, getCellByColAndRowIndex, performComplexDataOperation } from './util';\nimport * as events from '../base/constant';\nimport { Render } from '../renderer/render';\nimport { Column } from '../models/column';\nimport { RenderType } from './enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { CellRendererFactory } from '../services/cell-render-factory';\nimport { ServiceLocator } from '../services/service-locator';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RendererFactory } from '../services/renderer-factory';\nimport { ColumnWidthService } from '../services/width-controller';\nimport { AriaService } from '../services/aria-service';\nimport { FocusStrategy } from '../services/focus-strategy';\nimport { PageSettings } from '../models/page-settings';\nimport { ColumnChooserSettings } from '../models/column-chooser-settings';\nimport { Selection } from '../actions/selection';\nimport { Search } from '../actions/search';\nimport { ShowHide } from '../actions/show-hide';\nimport { Scroll } from '../actions/scroll';\nimport { Print } from '../actions/print';\nimport { AggregateRow } from '../models/aggregate';\nimport { Clipboard } from '../actions/clipboard';\nimport { Logger } from '../actions/logger';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport * as literals from '../base/string-literals';\nimport { HeaderCellRenderer } from '../renderer/header-cell-renderer';\n/**\n * Represents the field name and direction of sort column.\n */\nvar SortDescriptor = /** @class */ (function (_super) {\n __extends(SortDescriptor, _super);\n function SortDescriptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"direction\", void 0);\n __decorate([\n Property(false)\n ], SortDescriptor.prototype, \"isFromGroup\", void 0);\n return SortDescriptor;\n}(ChildProperty));\nexport { SortDescriptor };\n/**\n * Configures the sorting behavior of Grid.\n */\nvar SortSettings = /** @class */ (function (_super) {\n __extends(SortSettings, _super);\n function SortSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], SortDescriptor)\n ], SortSettings.prototype, \"columns\", void 0);\n __decorate([\n Property(true)\n ], SortSettings.prototype, \"allowUnsort\", void 0);\n return SortSettings;\n}(ChildProperty));\nexport { SortSettings };\n/**\n * Represents the predicate for the filter column.\n */\nvar Predicate = /** @class */ (function (_super) {\n __extends(Predicate, _super);\n function Predicate() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Predicate.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"operator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"matchCase\", void 0);\n __decorate([\n Property(false)\n ], Predicate.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"predicate\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualFilterValue\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualOperator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"ejpredicate\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"uid\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"isForeignKey\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"condition\", void 0);\n return Predicate;\n}(ChildProperty));\nexport { Predicate };\n/**\n * Configures the infinite scroll behavior of Grid.\n */\nvar InfiniteScrollSettings = /** @class */ (function (_super) {\n __extends(InfiniteScrollSettings, _super);\n function InfiniteScrollSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], InfiniteScrollSettings.prototype, \"enableCache\", void 0);\n __decorate([\n Property(3)\n ], InfiniteScrollSettings.prototype, \"maxBlocks\", void 0);\n __decorate([\n Property(3)\n ], InfiniteScrollSettings.prototype, \"initialBlocks\", void 0);\n return InfiniteScrollSettings;\n}(ChildProperty));\nexport { InfiniteScrollSettings };\n/**\n * Configures the filtering behavior of the Grid.\n */\nvar FilterSettings = /** @class */ (function (_super) {\n __extends(FilterSettings, _super);\n function FilterSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], Predicate)\n ], FilterSettings.prototype, \"columns\", void 0);\n __decorate([\n Property('FilterBar')\n ], FilterSettings.prototype, \"type\", void 0);\n __decorate([\n Property('OnEnter')\n ], FilterSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], FilterSettings.prototype, \"showFilterBarStatus\", void 0);\n __decorate([\n Property(1500)\n ], FilterSettings.prototype, \"immediateModeDelay\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"operators\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"enableInfiniteScrolling\", void 0);\n __decorate([\n Property(50)\n ], FilterSettings.prototype, \"itemsCount\", void 0);\n __decorate([\n Property('Shimmer')\n ], FilterSettings.prototype, \"loadingIndicator\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"enableCaseSensitivity\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"showFilterBarOperator\", void 0);\n return FilterSettings;\n}(ChildProperty));\nexport { FilterSettings };\n/**\n * Configures the selection behavior of the Grid.\n */\nvar SelectionSettings = /** @class */ (function (_super) {\n __extends(SelectionSettings, _super);\n function SelectionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Row')\n ], SelectionSettings.prototype, \"mode\", void 0);\n __decorate([\n Property('Flow')\n ], SelectionSettings.prototype, \"cellSelectionMode\", void 0);\n __decorate([\n Property('Single')\n ], SelectionSettings.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"checkboxOnly\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"persistSelection\", void 0);\n __decorate([\n Property('Default')\n ], SelectionSettings.prototype, \"checkboxMode\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"enableSimpleMultiRowSelection\", void 0);\n __decorate([\n Property(true)\n ], SelectionSettings.prototype, \"enableToggle\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"allowColumnSelection\", void 0);\n return SelectionSettings;\n}(ChildProperty));\nexport { SelectionSettings };\n/**\n * Configures the search behavior of the Grid.\n */\nvar SearchSettings = /** @class */ (function (_super) {\n __extends(SearchSettings, _super);\n function SearchSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property([])\n ], SearchSettings.prototype, \"fields\", void 0);\n __decorate([\n Property('')\n ], SearchSettings.prototype, \"key\", void 0);\n __decorate([\n Property('contains')\n ], SearchSettings.prototype, \"operator\", void 0);\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], SearchSettings.prototype, \"ignoreAccent\", void 0);\n return SearchSettings;\n}(ChildProperty));\nexport { SearchSettings };\n/**\n * Configures the row drop settings of the Grid.\n */\nvar RowDropSettings = /** @class */ (function (_super) {\n __extends(RowDropSettings, _super);\n function RowDropSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], RowDropSettings.prototype, \"targetID\", void 0);\n return RowDropSettings;\n}(ChildProperty));\nexport { RowDropSettings };\n/**\n * Configures the text wrap settings of the Grid.\n */\nvar TextWrapSettings = /** @class */ (function (_super) {\n __extends(TextWrapSettings, _super);\n function TextWrapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Both')\n ], TextWrapSettings.prototype, \"wrapMode\", void 0);\n return TextWrapSettings;\n}(ChildProperty));\nexport { TextWrapSettings };\n/**\n * Configures the resize behavior of the Grid.\n */\nvar ResizeSettings = /** @class */ (function (_super) {\n __extends(ResizeSettings, _super);\n function ResizeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Normal')\n ], ResizeSettings.prototype, \"mode\", void 0);\n return ResizeSettings;\n}(ChildProperty));\nexport { ResizeSettings };\n/**\n * Configures the group behavior of the Grid.\n */\nvar GroupSettings = /** @class */ (function (_super) {\n __extends(GroupSettings, _super);\n function GroupSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showDropArea\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"allowReordering\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showToggleButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showGroupedColumn\", void 0);\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showUngroupButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"disablePageWiseAggregates\", void 0);\n __decorate([\n Property([])\n ], GroupSettings.prototype, \"columns\", void 0);\n __decorate([\n Property()\n ], GroupSettings.prototype, \"captionTemplate\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"enableLazyLoading\", void 0);\n return GroupSettings;\n}(ChildProperty));\nexport { GroupSettings };\n/**\n * Configures the edit behavior of the Grid.\n */\nvar EditSettings = /** @class */ (function (_super) {\n __extends(EditSettings, _super);\n function EditSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowAdding\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowDeleting\", void 0);\n __decorate([\n Property('Normal')\n ], EditSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"allowEditOnDblClick\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"showConfirmDialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"showDeleteConfirmDialog\", void 0);\n __decorate([\n Property()\n ], EditSettings.prototype, \"template\", void 0);\n __decorate([\n Property()\n ], EditSettings.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property()\n ], EditSettings.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property('Top')\n ], EditSettings.prototype, \"newRowPosition\", void 0);\n __decorate([\n Property({})\n ], EditSettings.prototype, \"dialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowNextRowEdit\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"showAddNewRow\", void 0);\n return EditSettings;\n}(ChildProperty));\nexport { EditSettings };\n/**\n * Configures the Loading Indicator of the Grid.\n */\nvar LoadingIndicator = /** @class */ (function (_super) {\n __extends(LoadingIndicator, _super);\n function LoadingIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Spinner')\n ], LoadingIndicator.prototype, \"indicatorType\", void 0);\n return LoadingIndicator;\n}(ChildProperty));\nexport { LoadingIndicator };\n/**\n * Represents the Grid component.\n * ```html\n *
\n * \n * ```\n */\nvar Grid = /** @class */ (function (_super) {\n __extends(Grid, _super);\n /**\n * Constructor for creating the component\n *\n * @param {GridModel} options - specifies the options\n * @param {string | HTMLElement} element - specifies the element\n * @hidden\n */\n function Grid(options, element) {\n var _this_1 = _super.call(this, options, element) || this;\n _this_1.isPreventScrollEvent = false;\n _this_1.inViewIndexes = [];\n _this_1.keyA = false;\n _this_1.frozenRightCount = 0;\n _this_1.freezeColumnRefresh = true;\n _this_1.rightcount = 0;\n _this_1.frozenLeftCount = 0;\n _this_1.leftcount = 0;\n _this_1.tablesCount = 1;\n _this_1.movableCount = 0;\n _this_1.movablecount = 0;\n _this_1.fixedcount = 0;\n _this_1.fixedCount = 0;\n _this_1.visibleFrozenLeft = 0;\n _this_1.visibleFrozenFixed = 0;\n _this_1.isPreparedFrozenColumns = false;\n _this_1.visibleFrozenRight = 0;\n _this_1.visibleMovable = 0;\n _this_1.frozenLeftColumns = [];\n _this_1.frozenRightColumns = [];\n _this_1.movableColumns = [];\n _this_1.fixedColumns = [];\n _this_1.stackedLeft = [];\n _this_1.stackedRight = [];\n _this_1.stackedFixed = [];\n _this_1.stackedMovable = [];\n _this_1.stackedarrayLeft = [];\n _this_1.stackedarrayRight = [];\n _this_1.stackedarrayFixed = [];\n _this_1.stackedarrayMovable = [];\n _this_1.media = {};\n _this_1.autoFitColumnsResize = false;\n /** @hidden */\n _this_1.tableIndex = 0;\n _this_1.componentRefresh = Component.prototype.refresh;\n _this_1.isChangeDataSourceCall = false;\n _this_1.mergedColumns = false;\n /** @hidden */\n _this_1.isVirtualAdaptive = false;\n /** @hidden */\n /**\n * * If `requireTemplateRef` is set to false in the load event, then the template element can't be accessed in grid queryCellInfo, and rowDataBound events.\n * * By default, React's grid queryCellInfo and rowDataBound events allow access to the template element.\n * * Avoid accessing the template elements in the grid queryCellInfo and rowDataBound events to improve rendering performance by setting this value as false.\n *\n * @default true\n */\n _this_1.requireTemplateRef = true;\n /** @hidden */\n _this_1.vRows = [];\n /** @hidden */\n _this_1.vcRows = [];\n /** @hidden */\n _this_1.vGroupOffsets = {};\n /** @hidden */\n _this_1.rowUid = 0;\n /** @hidden */\n _this_1.translateX = 0;\n /** @hidden */\n _this_1.isManualRefresh = false;\n /** @hidden */\n _this_1.isAutoFitColumns = false;\n /** @hidden */\n _this_1.enableDeepCompare = false;\n /** @hidden */\n _this_1.totalDataRecordsCount = 0;\n /** @hidden */\n _this_1.disableSelectedRecords = [];\n /** @hidden */\n _this_1.partialSelectedRecords = [];\n /** @hidden */\n _this_1.isSpan = false;\n /** @hidden */\n _this_1.islazyloadRequest = false;\n /** @hidden */\n _this_1.isAddNewRow = false;\n /** @hidden */\n _this_1.addNewRowFocus = true;\n /** @hidden */\n _this_1.lockcolPositionCount = 0;\n /** @hidden */\n _this_1.prevPageMoving = false;\n /** @hidden */\n _this_1.pageTemplateChange = false;\n /** @hidden */\n _this_1.isAutoGen = false;\n /** @hidden */\n _this_1.isAutoGenerateColumns = false;\n _this_1.mediaBindInstance = {};\n /** @hidden */\n _this_1.commandDelIndex = undefined;\n /** @hidden */\n _this_1.asyncTimeOut = 50;\n /** @hidden */\n _this_1.isExportGrid = false;\n _this_1.enableLogger = false;\n _this_1.needsID = true;\n Grid_1.Inject(Selection);\n setValue('mergePersistData', _this_1.mergePersistGridData, _this_1);\n return _this_1;\n }\n Grid_1 = Grid;\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} returns the persist data\n */\n Grid.prototype.getPersistData = function () {\n var keyEntity = ['pageSettings', 'sortSettings',\n 'filterSettings', 'groupSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'scrollPosition'];\n var ignoreOnPersist = {\n pageSettings: ['template', 'pageSizes', 'enableQueryString', 'totalRecordsCount', 'pageCount'],\n filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent'],\n groupSettings: ['showDropArea', 'showToggleButton', 'showGroupedColumn', 'showUngroupButton',\n 'disablePageWiseAggregates', 'hideCaptionCount'],\n searchSettings: ['fields', 'operator', 'ignoreCase'],\n sortSettings: [], columns: [], selectedRowIndex: [], scrollPosition: []\n };\n for (var i = 0; i < keyEntity.length; i++) {\n var currentObject = this[keyEntity[parseInt(i.toString(), 10)]];\n for (var _i = 0, _a = ignoreOnPersist[keyEntity[parseInt(i.toString(), 10)]]; _i < _a.length; _i++) {\n var val = _a[_i];\n delete currentObject[\"\" + val];\n }\n }\n var temp = this.pageSettings.template;\n var settings = Object.assign({ template: undefined }, this.pageSettings);\n this.setProperties({ pageSettings: settings }, true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isAngular) {\n delete this.groupSettings['properties']['captionTemplate'];\n }\n this.pageTemplateChange = !isNullOrUndefined(this.pagerTemplate);\n var persistData = this.addOnPersist(keyEntity);\n settings.template = temp;\n this.setProperties({ pageSettings: settings }, true);\n return persistData;\n };\n /**\n * To provide the array of modules needed for component rendering\n *\n * @returns {ModuleDeclaration[]} Returns the module Declaration\n * @hidden\n */\n Grid.prototype.requiredModules = function () {\n this.setFrozenCount();\n this.enableInfiniteAggrgate();\n var modules = [];\n if (this.isDestroyed) {\n return modules;\n }\n if (this.allowFiltering) {\n modules.push({\n member: 'filter',\n args: [this, this.filterSettings, this.serviceLocator],\n name: 'Filter'\n });\n }\n if (this.allowExcelExport) {\n modules.push({\n member: 'ExcelExport',\n args: [this, this.serviceLocator],\n name: 'ExcelExport'\n });\n }\n if (this.allowPdfExport) {\n modules.push({\n member: 'PdfExport',\n args: [this],\n name: 'PdfExport'\n });\n }\n if (this.allowSorting) {\n modules.push({\n member: 'sort',\n args: [this, this.sortSettings, this.sortedColumns, this.serviceLocator],\n name: 'Sort'\n });\n }\n if (this.allowPaging) {\n modules.push({\n member: 'pager',\n args: [this, this.pageSettings],\n name: 'Page'\n });\n }\n if (this.allowSelection) {\n modules.push({\n member: 'selection',\n args: [this, this.selectionSettings, this.serviceLocator],\n name: 'Selection'\n });\n }\n if (this.resizeCheck()) {\n modules.push({\n member: 'resize',\n args: [this],\n name: 'Resize'\n });\n }\n if (this.allowReordering) {\n modules.push({\n member: 'reorder',\n args: [this],\n name: 'Reorder'\n });\n }\n if (this.allowRowDragAndDrop) {\n modules.push({\n member: 'rowDragAndDrop',\n args: [this],\n name: 'RowDD'\n });\n }\n if (this.allowGrouping) {\n modules.push({\n member: 'group',\n args: [this, this.groupSettings, this.sortedColumns, this.serviceLocator],\n name: 'Group'\n });\n }\n if (this.aggregates.length) {\n modules.push({ member: 'aggregate', args: [this, this.serviceLocator], name: 'Aggregate' });\n }\n if (this.isDetail()) {\n modules.push({\n member: 'detailRow',\n args: [this, this.serviceLocator],\n name: 'DetailRow'\n });\n }\n if (this.toolbar || this.toolbarTemplate) {\n modules.push({\n member: 'toolbar',\n args: [this, this.serviceLocator],\n name: 'Toolbar'\n });\n }\n if (this.enableVirtualization || this.enableColumnVirtualization) {\n modules.push({\n member: 'virtualscroll',\n args: [this, this.serviceLocator],\n name: 'VirtualScroll'\n });\n }\n if (this.getFrozenColumns() || this.frozenRows || this.frozenRightCount || this.frozenLeftCount) {\n modules.push({ member: 'freeze', args: [this, this.serviceLocator], name: 'Freeze' });\n }\n if (!isNullOrUndefined(this.columns) && this.isCommandColumn(this.columns)) {\n modules.push({\n member: 'commandColumn',\n args: [this, this.serviceLocator],\n name: 'CommandColumn'\n });\n }\n if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {\n modules.push({\n member: 'edit',\n args: [this, this.serviceLocator],\n name: 'Edit'\n });\n }\n this.extendRequiredModules(modules);\n return modules;\n };\n Grid.prototype.extendRequiredModules = function (modules) {\n if (this.enableInfiniteScrolling) {\n modules.push({\n member: 'infiniteScroll',\n args: [this, this.serviceLocator],\n name: 'InfiniteScroll'\n });\n }\n if (this.groupSettings.enableLazyLoading) {\n modules.push({\n member: 'lazyLoadGroup',\n args: [this, this.serviceLocator],\n name: 'LazyLoadGroup'\n });\n }\n if (this.contextMenuItems) {\n modules.push({\n member: 'contextMenu',\n args: [this, this.serviceLocator],\n name: 'ContextMenu'\n });\n }\n if (this.showColumnMenu) {\n modules.push({\n member: 'columnMenu',\n args: [this, this.serviceLocator],\n name: 'ColumnMenu'\n });\n }\n if (this.showColumnChooser) {\n modules.push({\n member: 'columnChooser',\n args: [this, this.serviceLocator],\n name: 'ColumnChooser'\n });\n }\n if (!isNullOrUndefined(this.columns) && this.isForeignKeyEnabled(this.columns)) {\n modules.push({ member: 'foreignKey', args: [this, this.serviceLocator], name: 'ForeignKey' });\n }\n if (this.enableLogger) {\n modules.push({ member: 'logger', args: [this], name: 'Logger' });\n }\n };\n Grid.prototype.resizeCheck = function () {\n var autoFitColumns = this.getColumns().filter(function (c) { return c.autoFit === true; }).length ? true : false;\n if (!isNullOrUndefined(this.columnModel) && this.columnModel.length && !(this.columnModel[0] instanceof Column)) {\n this.columnModel = [];\n }\n var columnMenu = this.showColumnMenu && (!this.columnMenuItems || this.columnMenuItems\n .filter(function (c) { return c === 'AutoFit' || c === 'AutoFitAll'; }).length) ? true : false;\n var contextMenu = this.contextMenuItems && this.contextMenuItems\n .filter(function (c) { return c === 'AutoFit' || c === 'AutoFitAll'; }).length ? true : false;\n return this.allowResizing || this.autoFitColumnsResize || autoFitColumns || columnMenu || contextMenu;\n };\n /**\n * For internal use only - Initialize the event handler;\n *\n * @returns {void}\n * @private\n */\n Grid.prototype.preRender = function () {\n this.serviceLocator = new ServiceLocator;\n this.initProperties();\n this.initializeServices();\n };\n Grid.prototype.initProperties = function () {\n this.isInitial = true;\n this.sortedColumns = [];\n this.inViewIndexes = [];\n this.mediaCol = [];\n this.isInitialLoad = false;\n this.allowServerDataBinding = false;\n this.ignoreCollectionWatch = true;\n this.mergeCells = {};\n this.isEdit = false;\n this.checkAllRows = 'None';\n this.isCheckBoxSelection = false;\n this.isPersistSelection = false;\n this.componentRefresh = Component.prototype.refresh;\n this.freezeColumnRefresh = true;\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith', wildCard: 'wildcard',\n isNull: 'isnull', notNull: 'notnull', like: 'like'\n };\n this.defaultLocale = {\n EmptyRecord: 'No records to display',\n True: 'true',\n False: 'false',\n InvalidFilterMessage: 'Invalid Filter Data',\n GroupDropArea: 'Drag a column header here to group its column',\n UnGroup: 'Click here to ungroup',\n UnGroupButton: 'Click here to ungroup',\n GroupDisable: 'Grouping is disabled for this column',\n FilterbarTitle: '\\'s filter bar cell',\n EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',\n // Toolbar Items\n Add: 'Add',\n Edit: 'Edit',\n Cancel: 'Cancel',\n Update: 'Update',\n Delete: 'Delete',\n Print: 'Print',\n Pdfexport: 'PDF Export',\n Excelexport: 'Excel Export',\n Wordexport: 'Word Export',\n Csvexport: 'CSV Export',\n Search: 'Search',\n Columnchooser: 'Columns',\n Save: 'Save',\n Item: 'item',\n Items: 'items',\n EditOperationAlert: 'No records selected for edit operation',\n DeleteOperationAlert: 'No records selected for delete operation',\n SaveButton: 'Save',\n OKButton: 'OK',\n CancelButton: 'Cancel',\n EditFormTitle: 'Details of ',\n AddFormTitle: 'Add New Record',\n BatchSaveConfirm: 'Are you sure you want to save changes?',\n BatchSaveLostChanges: 'Unsaved changes will be lost. Are you sure you want to continue?',\n ConfirmDelete: 'Are you sure you want to Delete Record?',\n CancelEdit: 'Are you sure you want to Cancel the changes?',\n ChooseColumns: 'Choose Column',\n ColumnMenu: 'Column Menu',\n SearchColumns: 'search columns',\n Matchs: 'No matches found',\n FilterButton: 'Filter',\n ClearButton: 'Clear',\n StartsWith: 'Starts With',\n NotStartsWith: 'Does Not Start With',\n Like: 'Like',\n EndsWith: 'Ends With',\n NotEndsWith: 'Does Not End With',\n Contains: 'Contains',\n NotContains: 'Does Not Contain',\n IsNull: 'Null',\n NotNull: 'Not Null',\n IsEmpty: 'Empty',\n IsNotEmpty: 'Not Empty',\n Equal: 'Equal',\n NotEqual: 'Not Equal',\n LessThan: 'Less Than',\n LessThanOrEqual: 'Less Than Or Equal',\n GreaterThan: 'Greater Than',\n GreaterThanOrEqual: 'Greater Than Or Equal',\n ChooseDate: 'Choose a Date',\n EnterValue: 'Enter the value',\n Copy: 'Copy',\n Group: 'Group by this column',\n Ungroup: 'Ungroup by this column',\n GroupButton: 'Group button',\n UnGroupAria: 'ungroup button',\n GroupSeperator: 'Separator for the grouped columns',\n UnGroupIcon: 'ungroup the grouped column ',\n GroupedSortIcon: 'sort the grouped column ',\n GroupedDrag: 'Drag the grouped column',\n GroupCaption: ' is groupcaption cell',\n CheckBoxLabel: 'checkbox',\n SelectAllCheckbox: 'Select all checkbox',\n SelectRow: 'Select row',\n autoFitAll: 'Autofit all columns',\n autoFit: 'Autofit this column',\n AutoFitAll: 'Autofit all columns',\n AutoFit: 'Autofit this column',\n Export: 'Export',\n FirstPage: 'First Page',\n LastPage: 'Last Page',\n PreviousPage: 'Previous Page',\n NextPage: 'Next Page',\n SortAscending: 'Sort Ascending',\n SortDescending: 'Sort Descending',\n EditRecord: 'Edit Record',\n DeleteRecord: 'Delete Record',\n FilterMenu: 'Filter',\n SelectAll: 'Select All',\n AddCurrentSelection: 'Add current selection to filter',\n Blanks: 'Blanks',\n FilterTrue: 'True',\n FilterFalse: 'False',\n NoResult: 'No matches found',\n ClearFilter: 'Clear Filter',\n Clear: 'Clear',\n NumberFilter: 'Number Filters',\n TextFilter: 'Text Filters',\n DateFilter: 'Date Filters',\n DateTimeFilter: 'DateTime Filters',\n MatchCase: 'Match Case',\n Between: 'Between',\n CustomFilter: 'Custom Filter',\n CustomFilterPlaceHolder: 'Enter the value',\n CustomFilterDatePlaceHolder: 'Choose a date',\n AND: 'AND',\n OR: 'OR',\n ShowRowsWhere: 'Show rows where:',\n ToolbarMenuDialogARIA: 'Toolbar menu dialog',\n FilterMenuDialogARIA: 'Filter menu',\n ExcelFilterDialogARIA: 'Excel filter',\n CheckBoxFilterDialogARIA: 'Checkbox filter',\n DialogEditARIA: 'Edit dialog',\n ColumnMenuDialogARIA: 'Column menu dialog',\n CustomFilterDialogARIA: 'Customer filter dialog',\n SortAtoZ: 'Sort A to Z',\n SortZtoA: 'Sort Z to A',\n SortByOldest: 'Sort by Oldest',\n SortByNewest: 'Sort by Newest',\n SortSmallestToLargest: 'Sort Smallest to Largest',\n SortLargestToSmallest: 'Sort Largest to Smallest',\n Sort: 'Sort',\n FilterDescription: 'Press Alt Down to open filter Menu',\n SortDescription: 'Press Enter to sort',\n ColumnMenuDescription: 'Press Alt Down to open Column Menu',\n GroupDescription: 'Press Ctrl space to group',\n ColumnHeader: ' column header ',\n TemplateCell: ' is template cell',\n CommandColumnAria: 'is Command column column header ',\n DialogEdit: 'Dialog edit',\n ClipBoard: 'clipboard',\n AscendingText: 'Ascending',\n DescendingText: 'Descending',\n NoneText: 'None',\n Expanded: 'Expanded',\n Collapsed: 'Collapsed'\n };\n this.keyConfigs = {\n downArrow: 'downarrow',\n upArrow: 'uparrow',\n rightArrow: 'rightarrow',\n leftArrow: 'leftarrow',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftRight: 'shift+rightarrow',\n shiftLeft: 'shift+leftarrow',\n home: 'home',\n end: 'end',\n escape: 'escape',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n ctrlAltPageUp: 'ctrl+alt+pageup',\n ctrlAltPageDown: 'ctrl+alt+pagedown',\n altPageUp: 'alt+pageup',\n altPageDown: 'alt+pagedown',\n altDownArrow: 'alt+downarrow',\n altUpArrow: 'alt+uparrow',\n ctrlDownArrow: 'ctrl+downarrow',\n ctrlUpArrow: 'ctrl+uparrow',\n ctrlPlusA: 'ctrl+A',\n ctrlPlusP: 'ctrl+P',\n insert: 'insert',\n delete: 'delete',\n f2: 'f2',\n enter: 'enter',\n ctrlEnter: 'ctrl+enter',\n shiftEnter: 'shift+enter',\n tab: 'tab',\n shiftTab: 'shift+tab',\n space: 'space',\n ctrlPlusC: 'ctrl+C',\n ctrlShiftPlusH: 'ctrl+shift+H',\n ctrlSpace: 'ctrl+space',\n ctrlLeftArrow: 'ctrl+leftarrow',\n ctrlRightArrow: 'ctrl+rightarrow'\n };\n };\n /**\n * For internal use only - To Initialize the component rendering.\n *\n * @returns {void}\n * @private\n */\n Grid.prototype.render = function () {\n this.log(['module_missing', 'promise_enabled', 'locale_missing', 'check_datasource_columns']);\n this.ariaService.setOptions(this.element, { role: 'grid' });\n createSpinner({ target: this.element, cssClass: this.cssClass ? this.cssClass : null }, this.createElement);\n this.renderModule = new Render(this, this.serviceLocator);\n this.searchModule = new Search(this);\n this.scrollModule = new Scroll(this);\n this.notify(events.initialLoad, {});\n if ((this.getDataModule().dataManager.dataSource.offline === true || this.getDataModule().dataManager.dataSource.url === undefined)\n && !(!isNullOrUndefined(this.dataSource) && this.dataSource.result)) {\n this.isVirtualAdaptive = true;\n }\n if (this.isReact) {\n var args = { requireTemplateRef: this.requireTemplateRef };\n this.trigger(events.load, args);\n if (!args.requireTemplateRef) {\n this.requireTemplateRef = args.requireTemplateRef;\n }\n }\n else {\n this.trigger(events.load);\n }\n prepareColumns(this.columns, this.enableColumnVirtualization, this);\n if (this.enableColumnVirtualization && this.isChangeDataSourceCall && this.columnModel) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n this.isPreparedFrozenColumns = true;\n if (this.enablePersistence) {\n this.notify(events.columnsPrepared, {});\n }\n this.getMediaColumns();\n setColumnIndex(this.columns);\n if (this.isFrozenGrid() && !this.mergedColumns) {\n this.setInitialFrozenColumnIndex(this.columns);\n }\n this.checkLockColumns(this.columns);\n this.getColumns();\n this.processModel();\n this.gridRender();\n this.wireEvents();\n this.addListener();\n this.updateDefaultCursor();\n this.updateStackedFilter();\n if (this.loadingIndicator.indicatorType === 'Spinner') {\n this.showSpinner();\n }\n this.notify(events.initialEnd, {});\n if (this.loadingIndicator.indicatorType === 'Shimmer') {\n this.refreshMaskRow();\n }\n if (this.refreshing) {\n this.trigger('created');\n }\n };\n Grid.prototype.setInitialFrozenColumnIndex = function (columns) {\n for (var i = 0; i < columns.length; i++) {\n var column = columns[parseInt(i.toString(), 10)];\n column[\"\" + literals.initialFrozenColumnIndex] = column.index;\n if (column.columns) {\n this.setInitialFrozenColumnIndex(column.columns);\n }\n }\n };\n /**\n * By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.\n *\n * @returns {void}\n */\n Grid.prototype.showSpinner = function () {\n if (!this.isExportGrid) {\n showSpinner(this.element);\n }\n };\n /**\n * By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.\n *\n * @returns {void}\n */\n Grid.prototype.hideSpinner = function () {\n if (!this.isExportGrid) {\n hideSpinner(this.element);\n }\n };\n Grid.prototype.showMaskRow = function (axisDirection, dialogElement) {\n if (isNullOrUndefined(this.headerModule) || isNullOrUndefined(this.contentModule)) {\n return;\n }\n var gridHeader = this.getHeaderContent().firstChild;\n var gridContent = this.getContent().firstChild;\n var gridFooter = this.getFooterContent();\n if (dialogElement) {\n var dialogHolder = dialogElement.querySelector('.e-checkboxlist');\n var maskRowCount = Math.floor(dialogHolder.getBoundingClientRect().height / this.getRowHeight());\n var maskTemplate = '
'\n + '
'\n + this.getShimmerTemplate() + this.getShimmerTemplate() + '
';\n dialogHolder.innerHTML = '';\n for (var i = 0; i < maskRowCount; i++) {\n dialogHolder.innerHTML += maskTemplate;\n var maskSpan = [].slice.call(dialogHolder\n .querySelectorAll('.e-mask:not(.e-mask-checkbox-filter-intent):not(.e-mask-checkbox-filter-span-intent)'));\n maskSpan[0].classList.add('e-mask-checkbox-filter-intent');\n maskSpan[1].classList.add('e-mask-checkbox-filter-span-intent');\n }\n return;\n }\n if ((!this.enableRtl && !this.getHeaderContent().style.paddingRight)\n || (this.enableRtl && !this.getHeaderContent().style.paddingLeft)) {\n gridContent.style.overflowY = 'hidden';\n }\n if (!this.isInitialLoad && !this.getColumns().length) {\n var contentHeight = gridContent.getBoundingClientRect().height;\n var maskTableHeight = contentHeight === 0 ? this.allowPaging ? this.pageSettings.pageSize * this.getRowHeight()\n : window.innerHeight : contentHeight;\n var contentRowCount = Math.ceil(maskTableHeight / this.getRowHeight());\n if (this.rowRenderingMode !== 'Vertical') {\n this.headerMaskTable = this.createEmptyMaskTable(gridHeader, 1);\n }\n this.contentMaskTable = this.createEmptyMaskTable(gridContent, contentRowCount);\n return;\n }\n this.maskRowContentScroll = (this.enableVirtualization || this.enableColumnVirtualization) && axisDirection ? true : false;\n if (!this.contentMaskTable) {\n var content = gridContent;\n if (this.enableVirtualization || this.enableColumnVirtualization) {\n content = content.querySelector('.e-virtualtable');\n }\n if (!isNullOrUndefined(content.querySelector('tbody'))) {\n this.contentMaskTable = this.createMaskTable(content, this.getContentMaskColumns(), axisDirection);\n }\n }\n if (!this.headerMaskTable && (this.isFrozenGrid() || (this.enableColumnVirtualization && axisDirection === 'X'))) {\n var content = gridHeader;\n if (this.enableColumnVirtualization && axisDirection === 'X') {\n content = content.querySelector('.e-virtualtable');\n }\n this.headerMaskTable = this.createMaskTable(content, this.getContentMaskColumns(), axisDirection);\n }\n if (gridFooter && gridFooter.querySelector('.e-summaryrow')) {\n var gridFooterContent = gridFooter.firstChild;\n if (!this.footerContentMaskTable) {\n var footerContent = gridFooterContent;\n this.footerContentMaskTable = this.createMaskTable(footerContent);\n }\n }\n if (!(this.enableVirtualization && axisDirection)) {\n EventHandler.add(gridContent, 'scroll', this.translateMaskRow, this);\n }\n };\n Grid.prototype.getContentMaskColumns = function () {\n return this.getColumns();\n };\n Grid.prototype.createEmptyMaskTable = function (maskElement, rowCount) {\n var table = this.createElement('table', { className: 'e-table e-masked-table' });\n var tbody = this.createElement('tbody', { className: 'e-masked-tbody' });\n var row = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {\n style: 'height: ' + this.getRowHeight() + 'px;'\n } });\n var cell = this.createElement('td', { className: 'e-masked-cell e-rowcell' });\n cell.innerHTML = this.getShimmerTemplate();\n row.appendChild(cell);\n for (var i = 0; i < rowCount; i++) {\n tbody.appendChild(row.cloneNode(true));\n }\n table.appendChild(tbody);\n maskElement.appendChild(table);\n return table;\n };\n Grid.prototype.createMaskTable = function (element, columns, axisDirection) {\n var parentElement = element;\n var header = closest(parentElement, '.e-gridheader') ? true : false;\n var content = closest(parentElement, '.e-gridcontent') ? true : false;\n var footer = closest(parentElement, '.e-gridfooter') ? true : false;\n var gridContent = this.getContent().firstChild;\n var gridContentScrollHeight = gridContent.scrollHeight;\n var table = parentElement.querySelector('table');\n var maskTable = table.cloneNode();\n maskTable.removeAttribute('role');\n maskTable.removeAttribute('id');\n maskTable.style.position = 'absolute';\n maskTable.style.zIndex = '5';\n maskTable.style.width = table.getBoundingClientRect().width + 'px';\n if (header && !(this.enableColumnVirtualization && axisDirection === 'X')) {\n maskTable.style.transform = 'translate(0px,'\n + table.querySelector('thead').getBoundingClientRect().height + 'px)';\n }\n maskTable.setAttribute('class', 'e-table e-masked-table');\n var maskColgroup = table.querySelector('colgroup').cloneNode(true);\n maskColgroup.removeAttribute('id');\n maskColgroup.setAttribute('class', 'e-masked-colgroup');\n maskTable.appendChild(maskColgroup);\n if (header && this.enableColumnVirtualization && axisDirection === 'X') {\n var row = this.createMaskRow(maskColgroup, columns);\n if (this.isFrozenGrid()) {\n var frzTd = [].slice.call(row.querySelectorAll('.e-rowcell'));\n for (var i = 0; i < frzTd.length; i++) {\n if (i < this.frozenLeftCount) {\n if (this.frozenLeftCount - 1 === i) {\n frzTd[parseInt(i.toString(), 10)].classList.add('e-freezeleftborder');\n }\n frzTd[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n frzTd[parseInt(i.toString(), 10)].setAttribute('data-colindex', i.toString());\n frzTd[parseInt(i.toString(), 10)].style.left = (columns[parseInt(i.toString(), 10)].valueX -\n this.translateX) + 'px';\n }\n else if ((frzTd.length - this.frozenRightCount) <= i && columns[parseInt(i.toString(), 10)]) {\n if ((frzTd.length - this.frozenRightCount) === i) {\n frzTd[parseInt(i.toString(), 10)].classList.add('e-freezerightborder');\n }\n frzTd[parseInt(i.toString(), 10)].classList.add('e-rightfreeze');\n frzTd[parseInt(i.toString(), 10)].setAttribute('data-colindex', i.toString());\n frzTd[parseInt(i.toString(), 10)].style.right = (this.translateX +\n columns[parseInt(i.toString(), 10)].valueX) + 'px';\n }\n }\n }\n var thead = table.querySelector('thead');\n var rows = [].slice.call(thead.querySelectorAll('tr'));\n var maskTHead = thead.cloneNode();\n maskTHead.removeAttribute('role');\n maskTHead.setAttribute('class', 'e-masked-thead');\n var rowCount = rows.length;\n for (var i = 0; i < rowCount; i++) {\n maskTHead.appendChild(row.cloneNode(true));\n maskTHead.childNodes[parseInt(i.toString(), 10)].style\n .height = rows[parseInt(i.toString(), 10)].getBoundingClientRect().height + 'px';\n }\n maskTable.appendChild(maskTHead);\n }\n var maskTBody = table.querySelector('tbody').cloneNode();\n maskTBody.removeAttribute('role');\n maskTBody.setAttribute('class', 'e-masked-tbody');\n var tbody = table.querySelector('tbody');\n if (content || header) {\n var rowCountElement = gridContent;\n var rowCount = Math.ceil(rowCountElement.getBoundingClientRect().height / this.getRowHeight());\n if (tbody.querySelector('.e-emptyrow') || !tbody.childNodes.length || (content && this.childGrid)) {\n var row = this.createMaskRow(maskColgroup, columns);\n var altRow = row.cloneNode(true);\n altRow.classList.add('e-altrow');\n for (var i = 0; i < rowCount; i++) {\n var altNumber = 1;\n maskTBody.appendChild((i + altNumber) % 2 === 0 ? altRow.cloneNode(true) : row.cloneNode(true));\n }\n }\n else {\n var rowsQuery = 'tr:not([style*=\"display:none\"]):not([style*=\"display: none\"])';\n var rows = [].slice.call(tbody.querySelectorAll(rowsQuery));\n var addEditRow = tbody.querySelector('.e-addedrow, .e-editedrow');\n var addEditRowIndex = void 0;\n if (addEditRow) {\n addEditRowIndex = rows.indexOf(addEditRow);\n if (this.isFrozenGrid() && this.enableColumnVirtualization) {\n var frzTd = [].slice.call(rows[addEditRowIndex + 1].querySelectorAll('.e-rowcell'));\n for (var i = 0; i < frzTd.length; i++) {\n if (i < this.frozenLeftCount) {\n frzTd[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n frzTd[parseInt(i.toString(), 10)].setAttribute('data-colindex', i.toString());\n frzTd[parseInt(i.toString(), 10)].style.left = (columns[parseInt(i.toString(), 10)].valueX - this.translateX) + 'px';\n }\n else if ((frzTd.length - this.frozenRightCount) <= i && columns[parseInt(i.toString(), 10)]) {\n frzTd[parseInt(i.toString(), 10)].classList.add('e-rightfreeze');\n frzTd[parseInt(i.toString(), 10)].setAttribute('data-colindex', i.toString());\n frzTd[parseInt(i.toString(), 10)].style.right = (this.translateX +\n columns[parseInt(i.toString(), 10)].valueX) + 'px';\n }\n }\n }\n if (addEditRow.classList.contains('e-addedrow')) {\n rows.splice(addEditRowIndex, 2);\n }\n else {\n rows.splice(addEditRowIndex, 1);\n }\n }\n rowCount = (this.enableVirtualization || this.enableColumnVirtualization) && axisDirection ? rows.length\n : rowCount <= rows.length ? rowCount : rows.length;\n for (var i = 0; i < rowCount; i++) {\n maskTBody.appendChild(this.applyMaskRow(rows[parseInt(i.toString(), 10)].cloneNode(true), rows[parseInt(i.toString(), 10)].getBoundingClientRect().height));\n }\n if (addEditRow && addEditRow.classList.contains('e-editedrow') && addEditRowIndex < rowCount) {\n var addEditMaskRow = maskTBody.childNodes[parseInt(addEditRowIndex.toString(), 10)];\n addEditMaskRow.style.height = this.getRowHeight() + 'px';\n addEditMaskRow.classList.add('e-row');\n if (addEditRow.classList.contains('e-altrow')) {\n addEditMaskRow.classList.add('e-altrow');\n }\n }\n }\n }\n maskTable.appendChild(maskTBody);\n if (footer) {\n var tfoot = table.querySelector('tfoot');\n var maskTFoot = tfoot.cloneNode();\n maskTFoot.setAttribute('class', 'e-masked-tfoot');\n var rows = [].slice.call(tfoot.querySelectorAll('tr'));\n for (var i = 0; i < rows.length; i++) {\n maskTFoot.appendChild(this.applyMaskRow(rows[parseInt(i.toString(), 10)].cloneNode(true), rows[parseInt(i.toString(), 10)].getBoundingClientRect().height));\n }\n maskTable.appendChild(maskTFoot);\n }\n if (header && this.isFrozenGrid() && !this.enableColumnVirtualization) {\n this.getHeaderContent().querySelector('.' + literals.headerContent).style.position = 'relative';\n }\n parentElement.insertBefore(maskTable, parentElement.firstChild);\n if (content && !(this.enableVirtualization && axisDirection)) {\n var minScrollTop = gridContentScrollHeight - maskTable.getBoundingClientRect().height;\n minScrollTop = minScrollTop < 0 ? 0 : minScrollTop;\n var scrollTop = gridContent.scrollTop <= minScrollTop ? gridContent.scrollTop : minScrollTop;\n if (this.enableVirtualization) {\n scrollTop -= getTransformValues(closest(parentElement, '.e-virtualtable')).height;\n }\n maskTable.style.transform = 'translate(0px,' + scrollTop + 'px)';\n }\n return maskTable;\n };\n Grid.prototype.applyMaskRow = function (row, rowHeight) {\n var maskRow = row;\n maskRow.removeAttribute('role');\n maskRow.removeAttribute('aria-rowindex');\n maskRow.removeAttribute('data-rowindex');\n maskRow.removeAttribute('data-uid');\n maskRow.classList.add('e-masked-row');\n maskRow.style.height = rowHeight + 'px';\n var maskCells = [].slice.call(maskRow.childNodes);\n for (var i = 0; i < maskCells.length; i++) {\n var maskCell = maskCells[parseInt(i.toString(), 10)];\n var displayAsCheckBoxCell = maskCell.firstChild && maskCell.firstChild.classList\n && maskCell.firstChild.classList.contains('e-checkbox-wrapper');\n maskCell.removeAttribute('role');\n maskCell.removeAttribute('tabindex');\n maskCell.removeAttribute('aria-label');\n if (this.enableColumnVirtualization && maskCell.classList.contains('e-fixedfreeze')) {\n removeClass([maskCell], ['e-fixedfreeze', 'e-freezeleftborder', 'e-freezerightborder']);\n addClass([maskCell], ['e-unfreeze']);\n }\n if (!(this.enableColumnVirtualization && (maskCell.classList.contains('e-leftfreeze') ||\n maskCell.classList.contains('e-rightfreeze')))) {\n maskCell.removeAttribute('data-colindex');\n }\n maskCell.removeAttribute('aria-colindex');\n maskCell.removeAttribute('index');\n maskCell.removeAttribute('ej-mappingname');\n maskCell.removeAttribute('ej-mappingvalue');\n maskCell.removeAttribute('e-mappinguid');\n maskCell.removeAttribute('aria-expanded');\n maskCell.classList.add('e-masked-cell');\n maskCell.innerHTML = this.getShimmerTemplate();\n if (maskCell.classList.contains('e-recordplusexpand') || maskCell.classList.contains('e-recordpluscollapse')) {\n maskCell.firstChild.classList.add('e-mask-group-intent');\n }\n else if (maskCell.classList.contains('e-gridchkbox') || displayAsCheckBoxCell) {\n maskCell.firstChild.classList.add('e-mask-checkbox-intent');\n }\n else if (maskCell.classList.contains('e-rowdragdrop')) {\n maskCell.firstChild.classList.add('e-mask-drag-intent');\n }\n else if (maskCell.classList.contains('e-indentcell')) {\n maskCell.innerHTML = '';\n }\n }\n return maskRow;\n };\n Grid.prototype.createMaskRow = function (refColgroup, refColumns) {\n var colgroup = refColgroup;\n var columns = refColumns;\n var row = this.createElement('tr', { className: 'e-masked-row e-row' });\n if (this.rowRenderingMode !== 'Vertical') {\n row.style.height = this.getRowHeight() + 'px';\n }\n var td = this.createElement('td', { className: 'e-masked-cell e-rowcell' });\n for (var i = 0, colIndex = 0; i < colgroup.childNodes.length; i++) {\n var col = colgroup.childNodes[parseInt(i.toString(), 10)];\n var localTD = td.cloneNode();\n localTD.innerHTML = this.getShimmerTemplate();\n if (!(col.classList.contains('e-group-intent') || col.classList.contains('e-detail-intent')\n || col.classList.contains('e-drag-intent'))) {\n if (this.rowRenderingMode === 'Vertical' && columns[parseInt(colIndex.toString(), 10)]) {\n localTD.setAttribute('data-cell', columns[parseInt(colIndex.toString(), 10)].headerText ?\n columns[parseInt(colIndex.toString(), 10)].headerText : columns[parseInt(colIndex.toString(), 10)].field);\n }\n if (col.style.display === 'none') {\n localTD.classList.add('e-hide');\n }\n else {\n localTD.style.textAlign = columns[parseInt(colIndex.toString(), 10)]\n && columns[parseInt(colIndex.toString(), 10)].textAlign ?\n columns[parseInt(colIndex.toString(), 10)].textAlign.toLowerCase()\n : this.enableRtl ? 'right' : 'left';\n if (columns[parseInt(colIndex.toString(), 10)] && (columns[parseInt(colIndex.toString(), 10)].type === 'checkbox'\n || columns[parseInt(colIndex.toString(), 10)].displayAsCheckBox)) {\n localTD.firstChild.classList.add('e-mask-checkbox-intent');\n }\n }\n colIndex++;\n }\n else {\n if (col.classList.contains('e-group-intent')) {\n localTD.firstChild.classList.add('e-mask-group-intent');\n }\n else if (col.classList.contains('e-detail-intent')) {\n localTD.firstChild.classList.add('e-mask-detail-intent');\n }\n else if (col.classList.contains('e-drag-intent')) {\n localTD.firstChild.classList.add('e-mask-drag-intent');\n }\n }\n row.appendChild(localTD);\n }\n return row;\n };\n Grid.prototype.getShimmerTemplate = function () {\n if (this.maskRowContentScroll) {\n return '';\n }\n return '';\n };\n Grid.prototype.addShimmerEffect = function () {\n this.maskRowContentScroll = false;\n var maskSpan = [].slice.call(this.element.querySelectorAll('.e-mask:not(.e-shimmer-wave)'));\n for (var i = 0; i < maskSpan.length; i++) {\n if (maskSpan[parseInt(i.toString(), 10)]) {\n maskSpan[parseInt(i.toString(), 10)].classList.add('e-shimmer-wave');\n }\n }\n };\n Grid.prototype.translateMaskRow = function (e) {\n var target = e.target;\n var maskTables = target.querySelectorAll('.e-masked-table');\n for (var i = 0; i < maskTables.length; i++) {\n var maskTable = maskTables[parseInt(i.toString(), 10)];\n if (maskTable) {\n var minScrollTop = target.scrollHeight - maskTable.getBoundingClientRect().height;\n minScrollTop = minScrollTop < 0 ? 0 : minScrollTop;\n var scrollTop = target.scrollTop <= minScrollTop ? target.scrollTop : minScrollTop;\n if (this.enableVirtualization) {\n scrollTop -= getTransformValues(closest(maskTable, '.e-virtualtable')).height;\n }\n maskTable.style.transform = 'translate(0px,' + scrollTop + 'px)';\n }\n }\n };\n Grid.prototype.removeMaskRow = function () {\n if (!isNullOrUndefined(this.contentModule)) {\n var gridContent = this.getContent().firstChild;\n EventHandler.remove(gridContent, 'scroll', this.translateMaskRow);\n }\n if (this.headerMaskTable && this.isFrozenGrid() && !this.enableColumnVirtualization) {\n this.getHeaderContent().querySelector('.' + literals.headerContent).style.position = '';\n }\n var maskTables = [this.headerMaskTable,\n this.contentMaskTable, this.footerContentMaskTable];\n for (var i = 0; i < maskTables.length; i++) {\n var maskTable = maskTables[parseInt(i.toString(), 10)];\n if (maskTable) {\n remove(maskTable);\n }\n }\n this.headerMaskTable = null;\n this.contentMaskTable = null;\n this.footerContentMaskTable = null;\n };\n Grid.prototype.refreshMaskRow = function () {\n var gridContent = this.getContent().firstChild;\n if (!this.isInitialLoad && !this.getColumns().length) {\n return;\n }\n if (this.contentMaskTable && gridContent.querySelector('.e-masked-table')) {\n var content = gridContent;\n if (this.enableVirtualization) {\n content = content.querySelector('.e-virtualtable');\n }\n this.refreshMaskRowColgroupWidth(content);\n }\n };\n Grid.prototype.refreshMaskRowColgroupWidth = function (content) {\n var table = content.querySelector('table:not(.e-masked-table)');\n var colgroup = table.querySelector(literals.colGroup).cloneNode(true);\n var maskTable = content.querySelector('.e-masked-table');\n colgroup.removeAttribute('id');\n colgroup.setAttribute('class', 'e-masked-colgroup');\n for (var i = 0; i < colgroup.childNodes.length; i++) {\n colgroup.childNodes[parseInt(i.toString(), 10)].removeAttribute('class');\n }\n remove(maskTable.querySelector('.e-masked-colgroup'));\n maskTable.insertBefore(colgroup, maskTable.firstChild);\n maskTable.style.width = table.getBoundingClientRect().width + 'px';\n };\n Grid.prototype.updateStackedFilter = function () {\n if (this.allowFiltering && this.filterSettings.type === 'FilterBar' &&\n this.getHeaderContent().getElementsByClassName('e-stackedheadercell').length) {\n this.getHeaderContent().classList.add('e-stackedfilter');\n }\n else {\n this.getHeaderContent().classList.remove('e-stackedfilter');\n }\n };\n Grid.prototype.getMediaColumns = function () {\n if (!this.enableColumnVirtualization) {\n var gcol = this.getColumns();\n this.getShowHideService = this.serviceLocator.getService('showHideService');\n if (!isNullOrUndefined(gcol)) {\n for (var index = 0; index < gcol.length; index++) {\n if (!isNullOrUndefined(gcol[parseInt(index.toString(), 10)].hideAtMedia)\n && (isNullOrUndefined(gcol[parseInt(index.toString(), 10)].visible)\n || gcol[parseInt(index.toString(), 10)].visible)) {\n this.pushMediaColumn(gcol[parseInt(index.toString(), 10)], index);\n }\n }\n }\n }\n this.updateFrozenColumnsWidth();\n };\n Grid.prototype.pushMediaColumn = function (col, index) {\n this.mediaCol.push(col);\n this.media[col.uid] = window.matchMedia(col.hideAtMedia);\n this.mediaQueryUpdate(index, this.media[col.uid]);\n this.mediaBindInstance[parseInt(index.toString(), 10)] = this.mediaQueryUpdate.bind(this, index);\n this.media[col.uid].addListener(this.mediaBindInstance[parseInt(index.toString(), 10)]);\n };\n /**\n * @param {Column} col - specifies the column\n * @returns {void}\n * @hidden\n */\n Grid.prototype.updateMediaColumns = function (col) {\n if (!this.enableColumnVirtualization) {\n var index = this.getColumnIndexByUid(col.uid);\n for (var i = 0; i < this.mediaCol.length; i++) {\n if (col.uid === this.mediaCol[parseInt(i.toString(), 10)].uid) {\n this.mediaCol.splice(i, 1);\n return;\n }\n }\n this.pushMediaColumn(col, index);\n }\n };\n /**\n * @param {number} columnIndex - specifies the column index\n * @param {MediaQueryList} e - specifies the MediaQueryList\n * @returns {void}\n * @hidden\n */\n Grid.prototype.mediaQueryUpdate = function (columnIndex, e) {\n var col = this.getColumns()[parseInt(columnIndex.toString(), 10)];\n if (this.mediaCol.some(function (mediaColumn) { return mediaColumn.uid === col.uid; })) {\n col.visible = e.matches;\n if (this.isInitialLoad) {\n this.invokedFromMedia = true;\n if (col.visible) {\n this.showHider.show(col.headerText, 'headerText');\n }\n else {\n this.showHider.hide(col.headerText, 'headerText');\n }\n }\n }\n };\n Grid.prototype.refreshMediaCol = function () {\n this.isInitialLoad = true;\n var footerContent = this.element.querySelector('.' + literals.gridFooter);\n if (this.aggregates.length && this.element.scrollHeight > parseInt(this.height.toString(), 10) && footerContent) {\n addClass([footerContent], ['e-footerpadding']);\n }\n var checkboxColumn = this.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length === 0 || checkboxColumn.length && this.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n this.isCheckBoxSelection = false;\n }\n if (this.rowRenderingMode === 'Vertical') {\n if (this.enableHover) {\n this.setProperties({ enableAdaptiveUI: true, enableHover: false }, true);\n removeClass([this.element], 'e-gridhover');\n }\n }\n if (this.enableAdaptiveUI && this.scrollModule) {\n this.scrollModule.refresh();\n }\n if (this.isFrozenGrid() && this.isAutoGenerateColumns) {\n this.widthService.setWidthToColumns();\n this.isAutoGenerateColumns = false;\n }\n };\n Grid.prototype.removeMediaListener = function () {\n for (var i = 0; i < this.mediaCol.length; i++) {\n this.media[this.mediaCol[parseInt(i.toString(), 10)].uid]\n .removeListener(this.mediaBindInstance[this.mediaCol[parseInt(i.toString(), 10)].index]);\n }\n };\n /**\n * For internal use only - Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Grid.prototype.eventInitializer = function () {\n //eventInitializer\n };\n /**\n * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).\n *\n * @function destroy\n * @returns {void}\n */\n Grid.prototype.destroy = function () {\n var gridElement = this.element;\n if (!gridElement) {\n return;\n }\n var hasGridChild = gridElement.querySelector('.' + literals.gridHeader) &&\n gridElement.querySelector('.' + literals.gridContent) ? true : false;\n if (hasGridChild) {\n this.unwireEvents();\n }\n this.removeListener();\n this.removeMediaListener();\n this.notify(events.destroy, {});\n this.destroyDependentModules();\n if (this.isReact) {\n this.destroyTemplate(['template']);\n }\n if (this.isVue) {\n this.destroyTemplate();\n }\n if (hasGridChild) {\n _super.prototype.destroy.call(this);\n }\n this.toolTipObj.destroy();\n if (this.isReact && !Browser.isIE) {\n this.element.innerHTML = '';\n }\n var modules = ['renderModule', 'headerModule', 'contentModule', 'valueFormatterService',\n 'serviceLocator', 'ariaService', 'keyboardModule', 'widthService', 'searchModule', 'showHider',\n 'scrollModule', 'printModule', 'clipboardModule', 'focusModule'];\n for (var i = 0; i < modules.length; i++) {\n if (this[modules[parseInt(i.toString(), 10)]]) {\n this[modules[parseInt(i.toString(), 10)]] = null;\n }\n }\n this.element.innerHTML = '';\n classList(this.element, [], ['e-rtl', 'e-gridhover', 'e-responsive', 'e-default', 'e-device', 'e-grid-min-height']);\n };\n Grid.prototype.destroyDependentModules = function () {\n var gridElement = this.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.scrollModule.destroy();\n this.keyboardModule.destroy();\n this.focusModule.destroy();\n this.clipboardModule.destroy();\n this.printModule.destroy();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Grid.prototype.getModuleName = function () {\n return 'grid';\n };\n Grid.prototype.enableBoxSelection = function () {\n if (this.enableAutoFill) {\n this.selectionSettings.cellSelectionMode = 'BoxWithBorder';\n this.element.classList.add('e-afenabled');\n }\n else {\n this.element.classList.remove('e-afenabled');\n this.notify(events.destroyAutoFillElements, {});\n }\n };\n Grid.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {GridModel} newProp - Defines new properties\n * @param {GridModel} oldProp - Defines old properties\n * @returns {void}\n * @hidden\n */\n Grid.prototype.onPropertyChanged = function (newProp, oldProp) {\n var requireRefresh = false;\n var requireGridRefresh = false;\n var freezeRefresh = false;\n var checkCursor;\n var args = { requestType: 'refresh' };\n var childGridParent = null;\n var parentInstance = null;\n if (this.isDestroyed) {\n return;\n }\n this.log('module_missing');\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n var properties = Object.keys(newProp);\n if (properties.indexOf('columns') > -1) {\n if (this.enableColumnVirtualization) {\n this.columnModel = [];\n }\n this.updateColumnObject();\n requireGridRefresh = true;\n }\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var prop = properties_1[_i];\n switch (prop) {\n case 'allowPaging':\n this.notify(events.uiUpdate, { module: 'pager', enable: this.allowPaging });\n requireRefresh = true;\n if (this.height === '100%') {\n this.scrollModule.refresh();\n }\n break;\n case 'pageSettings':\n if (this.pageTemplateChange) {\n this.pageTemplateChange = false;\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n break;\n }\n if (this.pagerModule && this.pagerModule.isCancel) {\n this.pagerModule.isCancel = false;\n return;\n }\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n if (isNullOrUndefined(newProp.pageSettings.currentPage) && isNullOrUndefined(newProp.pageSettings.pageSize)\n && isNullOrUndefined(newProp.pageSettings.totalRecordsCount)\n || !isNullOrUndefined(oldProp.pageSettings) &&\n ((newProp.pageSettings.currentPage !== oldProp.pageSettings.currentPage)\n && !this.enableColumnVirtualization && !this.enableVirtualization\n && this.pageSettings.totalRecordsCount <= this.pageSettings.pageSize)) {\n requireRefresh = true;\n }\n if (this.pagerModule && this.pagerModule.isCancel) {\n this.pagerModule.isCancel = false;\n }\n break;\n case 'allowSorting':\n this.notify(events.uiUpdate, { module: 'sort', enable: this.allowSorting });\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'allowFiltering':\n this.updateStackedFilter();\n this.notify(events.uiUpdate, { module: 'filter', enable: this.allowFiltering });\n requireRefresh = true;\n if (this.filterSettings.type !== 'FilterBar' || (this.editSettings.showAddNewRow && this.filterSettings.type === 'FilterBar')) {\n this.refreshHeader();\n }\n else {\n if (this.height === '100%') {\n this.scrollModule.refresh();\n }\n }\n break;\n case 'height':\n case 'width':\n this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });\n if (this.allowPaging) {\n this.pagerModule.refresh();\n }\n break;\n case 'allowReordering':\n this.headerModule.refreshUI();\n checkCursor = true;\n break;\n case 'allowRowDragAndDrop':\n this.notify(events.uiUpdate, { module: 'rowDragAndDrop', enable: this.allowRowDragAndDrop });\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'allowSelection':\n this.notify(events.uiUpdate, { module: 'selection', enable: this.allowSelection });\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'enableAutoFill':\n if (this.selectionModule) {\n this.enableBoxSelection();\n this.selectionModule.updateAutoFillPosition();\n }\n break;\n case 'rowTemplate':\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n requireRefresh = true;\n break;\n case 'emptyRecordTemplate':\n this.emptyRecordTemplateFn = templateCompiler(this.emptyRecordTemplate);\n requireRefresh = true;\n break;\n case 'detailTemplate':\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n requireRefresh = true;\n break;\n case 'allowGrouping':\n this.notify(events.uiUpdate, { module: 'group', enable: this.allowGrouping });\n this.headerModule.refreshUI();\n requireRefresh = true;\n checkCursor = true;\n if (this.height === '100%') {\n this.scrollModule.refresh();\n }\n break;\n case 'enableInfiniteScrolling':\n case 'childGrid':\n requireRefresh = true;\n childGridParent = this.parentDetails ? document.querySelector(\"#\" + this.parentDetails.parentID) : null;\n parentInstance = childGridParent ? childGridParent.ej2_instances[0] : null;\n if (this.childGrid && parentInstance && isNullOrUndefined(parentInstance.childGrid.childGrid)) {\n var childGridObject = Object.assign({}, parentInstance.childGrid, { childGrid: newProp.childGrid });\n parentInstance.setProperties({ childGrid: childGridObject }, true);\n while (!isNullOrUndefined(parentInstance.parentDetails)) {\n var currentParent = document.querySelector(\"#\" + parentInstance.parentDetails.parentID);\n var currentParentInstance = currentParent ? currentParent.ej2_instances[0] : null;\n if (currentParentInstance) {\n var currentChildObject = Object.assign({}, currentParentInstance.childGrid);\n currentChildObject.childGrid = parentInstance.childGrid;\n currentParentInstance.setProperties({ childGrid: currentChildObject }, true);\n }\n parentInstance = currentParentInstance;\n }\n }\n this.headerModule.refreshUI();\n break;\n case 'toolbar':\n this.notify(events.uiUpdate, { module: 'toolbar' });\n if (this.height === '100%') {\n this.scrollModule.refresh();\n }\n break;\n case 'groupSettings':\n this.notify(events.inBoundModelChanged, {\n module: 'group', properties: newProp.groupSettings,\n oldProperties: oldProp.groupSettings\n });\n break;\n case 'aggregates':\n if (!this.aggregates.length && this.allowGrouping && this.groupSettings.columns.length) {\n requireRefresh = true;\n }\n this.notify(events.uiUpdate, { module: 'aggregate', properties: newProp });\n if (this.height === '100%') {\n this.scrollModule.refresh();\n }\n break;\n case 'frozenColumns':\n case 'frozenRows':\n case 'enableVirtualization':\n case 'enableColumnVirtualization':\n case 'currencyCode':\n case 'locale':\n if (this.isFrozenGrid()) {\n this.log('frozen_rows_columns');\n }\n freezeRefresh = true;\n requireGridRefresh = true;\n this.addNewRowFocus = true;\n break;\n case 'query':\n if (!this.getDataModule().isQueryInvokedFromData) {\n requireRefresh = true;\n }\n this.getDataModule().isQueryInvokedFromData = false;\n break;\n case 'autoFit':\n if (this.autoFit) {\n this.preventAdjustColumns();\n }\n else {\n this.restoreAdjustColumns();\n }\n break;\n default:\n this.extendedPropertyChange(prop, newProp, requireGridRefresh);\n }\n }\n if (checkCursor) {\n this.updateDefaultCursor();\n }\n if (requireGridRefresh) {\n if (freezeRefresh || this.getFrozenColumns() || this.frozenRows\n || (this.frozenLeftColumns.length || this.frozenRightColumns.length)) {\n this.freezeRefresh();\n }\n else {\n this.refresh();\n }\n }\n else if (requireRefresh) {\n this.notify(events.modelChanged, args);\n requireRefresh = false;\n this.maintainSelection(newProp.selectedRowIndex);\n }\n };\n Grid.prototype.extendedPropertyChange = function (prop, newProp, requireGridRefresh) {\n switch (prop) {\n case 'enableRtl':\n this.updateRTL();\n if (this.allowPaging) {\n this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;\n this.element.querySelector('.e-gridpager').ej2_instances[0].dataBind();\n }\n if (this.height !== 'auto') {\n this.scrollModule.removePadding(!newProp.enableRtl);\n this.scrollModule.setPadding();\n }\n if (this.toolbar && this.toolbarModule) {\n this.toolbarModule.getToolbar().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.toolbarModule.getToolbar().ej2_instances[0].dataBind();\n }\n if (this.contextMenuItems && this.contextMenuModule) {\n this.contextMenuModule.getContextMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.contextMenuModule.getContextMenu().ej2_instances[0].dataBind();\n }\n if (this.showColumnMenu && this.columnMenuModule && !this.enableAdaptiveUI) {\n this.columnMenuModule.getColumnMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.columnMenuModule.getColumnMenu().ej2_instances[0].dataBind();\n }\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n this.refreshHeader();\n }\n this.notify(events.rtlUpdated, {});\n break;\n case 'enableAltRow':\n this.renderModule.refresh();\n break;\n case 'allowResizing':\n this.headerModule.refreshUI();\n this.updateResizeLines();\n break;\n case 'rowHeight':\n if (this.rowHeight) {\n addClass([this.element], 'e-grid-min-height');\n }\n else {\n removeClass([this.element], 'e-grid-min-height');\n }\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'gridLines':\n this.updateGridLines();\n break;\n case 'showColumnMenu':\n this.headerModule.refreshUI();\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: true });\n break;\n case 'columnMenuItems':\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: this.columnMenuItems });\n break;\n case 'contextMenuItems':\n this.notify(events.uiUpdate, { module: 'contextMenu', enable: this.contextMenuItems });\n break;\n case 'showColumnChooser':\n this.notify(events.uiUpdate, { module: 'columnChooser', enable: this.showColumnChooser });\n break;\n case 'filterSettings':\n this.updateStackedFilter();\n this.notify(events.inBoundModelChanged, { module: 'filter', properties: newProp.filterSettings });\n break;\n case 'searchSettings':\n this.notify(events.inBoundModelChanged, { module: 'search', properties: newProp.searchSettings });\n break;\n case 'sortSettings':\n this.notify(events.inBoundModelChanged, { module: 'sort' });\n break;\n case 'selectionSettings':\n this.notify(events.inBoundModelChanged, { module: 'selection', properties: newProp.selectionSettings });\n break;\n case 'editSettings':\n this.notify(events.inBoundModelChanged, { module: 'edit', properties: newProp.editSettings });\n break;\n case 'allowTextWrap':\n case 'textWrapSettings':\n if (this.allowTextWrap) {\n this.applyTextWrap();\n }\n else {\n this.removeTextWrap();\n }\n this.notify(events.freezeRender, { case: 'textwrap', isModeChg: (prop === 'textWrapSettings') });\n break;\n case 'dataSource':\n // eslint-disable-next-line no-case-declarations\n var pending_1 = this.getDataModule().getState();\n if (this.allowSelection && this.isPersistSelection && !(pending_1 && pending_1.isPending)) {\n this.clearSelection();\n }\n if (!isNullOrUndefined(this.dataSource) && this.dataSource.result) {\n this.isVirtualAdaptive = false;\n }\n if (Object.getPrototypeOf(newProp).deepWatch) {\n var pKeyField = this.getPrimaryKeyFieldNames()[0];\n for (var i = 0, props = Object.keys(newProp.dataSource); i < props.length; i++) {\n this.setRowData(getValue(pKeyField, this.dataSource[props[parseInt(i.toString(), 10)]]), this.dataSource[props[parseInt(i.toString(), 10)]]);\n }\n }\n else if (pending_1.isPending) {\n var gResult = !isNullOrUndefined(this.dataSource) ? this.dataSource.result : [];\n var names = (pending_1.group || []);\n if (names.length && !this.groupSettings.enableLazyLoading && !(gResult.length && gResult[0].field)) {\n for (var i = 0; i < names.length; i++) {\n gResult = DataUtil.group(gResult, names[parseInt(i.toString(), 10)], pending_1.aggregates || []);\n }\n }\n this.dataSource = {\n result: gResult, count: this.dataSource.count,\n aggregates: this.dataSource.aggregates\n };\n this.getDataModule().setState({});\n pending_1.resolver(this.dataSource);\n }\n else {\n if ((!isNullOrUndefined(this.dataSource) && this.dataSource.result\n && this.dataSource.count && this.groupSettings.columns.length)) {\n var gResult = this.dataSource.result;\n var names = this.groupSettings.columns;\n if (names.length && !(gResult.length && gResult[0].field)) {\n for (var i = 0; i < names.length; i++) {\n gResult = DataUtil.group(gResult, names[parseInt(i.toString(), 10)]);\n }\n }\n this.dataSource = {\n result: gResult, count: this.dataSource.count\n };\n }\n this.getDataModule().setState({ isDataChanged: false });\n this.notify(events.dataSourceModified, {});\n if (!requireGridRefresh) {\n this.renderModule.refresh();\n if (this.isCheckBoxSelection) {\n this.notify(events.beforeRefreshOnDataChange, {});\n }\n }\n }\n this.scrollRefresh();\n break;\n case 'enableHover':\n // eslint-disable-next-line no-case-declarations\n var action = newProp.enableHover ? addClass : removeClass;\n action([this.element], 'e-gridhover');\n break;\n case 'selectedRowIndex':\n if (!this.isSelectedRowIndexUpdating) {\n this.selectRow(newProp.selectedRowIndex);\n }\n this.isSelectedRowIndexUpdating = false;\n break;\n case 'resizeSettings':\n this.widthService.setWidthToTable();\n break;\n case 'enableAdaptiveUI':\n this.notify(events.setFullScreenDialog, {});\n break;\n case 'rowRenderingMode':\n this.enableVerticalRendering();\n this.notify(events.rowModeChange, {});\n this.refresh();\n break;\n case 'enableStickyHeader':\n this.scrollModule.addStickyListener(newProp.enableStickyHeader);\n break;\n }\n };\n Grid.prototype.maintainSelection = function (index) {\n var _this_1 = this;\n if (index !== -1) {\n var fn_1 = function () {\n _this_1.selectRow(index);\n _this_1.off(events.contentReady, fn_1);\n };\n this.on(events.contentReady, fn_1, this);\n }\n };\n /**\n * @param {Object} prop - Defines the property\n * @param {boolean} muteOnChange - Defines the mute on change\n * @returns {void}\n * @private\n */\n Grid.prototype.setProperties = function (prop, muteOnChange) {\n _super.prototype.setProperties.call(this, prop, muteOnChange);\n var filterSettings = 'filterSettings';\n if (prop[\"\" + filterSettings] && this.filterModule && muteOnChange) {\n this.filterModule.refreshFilter();\n }\n };\n /**\n * @hidden\n * @returns {number} - Returns the tables count\n */\n Grid.prototype.getTablesCount = function () {\n return this.tablesCount;\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.updateDefaultCursor = function () {\n var headerCells = [].slice.call(this.getHeaderContent().querySelectorAll('.e-headercell:not(.e-stackedheadercell)'));\n var stdHdrCell = [].slice.call(this.getHeaderContent().getElementsByClassName('e-stackedheadercell'));\n var cols = this.getColumns();\n for (var i = 0; i < headerCells.length; i++) {\n var cell = headerCells[parseInt(i.toString(), 10)];\n if (this.allowGrouping || this.allowReordering || this.allowSorting) {\n if (!cols[parseInt(i.toString(), 10)].allowReordering || !cols[parseInt(i.toString(), 10)].allowSorting\n || !cols[parseInt(i.toString(), 10)].allowGrouping) {\n cell.classList.add('e-defaultcursor');\n }\n else {\n cell.classList.add('e-mousepointer');\n }\n }\n }\n for (var count = 0; count < stdHdrCell.length; count++) {\n if (this.allowReordering) {\n stdHdrCell[parseInt(count.toString(), 10)].classList.add('e-mousepointer');\n }\n }\n };\n Grid.prototype.updateColumnModel = function (columns, isRecursion) {\n for (var i = 0, len = (!isNullOrUndefined(columns) ? columns.length : 0); i < len; i++) {\n if (columns[parseInt(i.toString(), 10)].columns) {\n this.updateColumnModel(columns[parseInt(i.toString(), 10)].columns, true);\n }\n else {\n this.columnModel.push(columns[parseInt(i.toString(), 10)]);\n }\n }\n if (isNullOrUndefined(isRecursion) || !isRecursion) {\n this.updateLockableColumns();\n }\n };\n Grid.prototype.getFrozenLeftCount = function () {\n return this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n };\n Grid.prototype.isFrozenGrid = function () {\n return this.getFrozenColumns() !== 0 || this.frozenLeftColumns.length !== 0 || this.frozenRightColumns.length !== 0 ||\n this.fixedColumns.length !== 0;\n };\n Grid.prototype.getFrozenMode = function () {\n return this.frozenName;\n };\n Grid.prototype.updateLockableColumns = function () {\n var cols = this.columnModel;\n var frozenCount = 0;\n var movableCount = 0;\n var frozenColumns = this.getFrozenColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].lockColumn) {\n if (i < frozenColumns) {\n cols.splice(frozenCount, 0, cols.splice(i, 1)[0]);\n frozenCount++;\n }\n else {\n cols.splice(frozenColumns + movableCount, 0, cols.splice(i, 1)[0]);\n movableCount++;\n }\n }\n }\n };\n Grid.prototype.checkLockColumns = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].columns) {\n this.checkLockColumns(cols[parseInt(i.toString(), 10)].columns);\n }\n else if (cols[parseInt(i.toString(), 10)].lockColumn) {\n this.lockcolPositionCount++;\n }\n }\n };\n /**\n * @param {string} position - specifies position\n * @returns {number} returns the width\n * @hidden\n */\n Grid.prototype.leftrightColumnWidth = function (position) {\n var cols = position === 'left' ? this.getFrozenLeftColumns() : position === 'right' ? this.getFrozenRightColumns() : [];\n var width = 0;\n cols.filter(function (col) {\n if (col.visible) {\n width += parseInt(col.width.toString(), 10);\n }\n });\n return width;\n };\n /**\n * Gets the columns from the Grid.\n *\n * @param {boolean} isRefresh - Defines the boolean whether to refresh\n * @returns {Column[]} - returns the column\n */\n Grid.prototype.getColumns = function (isRefresh) {\n var _this_1 = this;\n var inview = this.inViewIndexes.map(function (v) { return v - _this_1.groupSettings.columns.length; }).filter(function (v) { return v > -1; });\n var vLen = inview.length;\n if (!this.enableColumnVirtualization || isNullOrUndefined(this.columnModel) || this.columnModel.length === 0 || isRefresh) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n var columns = vLen === 0 ? this.columnModel :\n this.columnModel.slice(inview[0], inview[vLen - 1] + 1);\n var left = [];\n var right = [];\n var movable = [];\n var isLeftRightFrozen = this.enableColumnVirtualization && this.isPreparedFrozenColumns && vLen === 0;\n if (isLeftRightFrozen) {\n this.frozenRightColumns = [];\n this.frozenLeftColumns = [];\n }\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].freeze === 'Left' || columns[parseInt(i.toString(), 10)].isFrozen) {\n left.push(columns[parseInt(i.toString(), 10)]);\n if (isLeftRightFrozen) {\n this.frozenLeftColumns.push(columns[parseInt(i.toString(), 10)]);\n }\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Right') {\n right.push(columns[parseInt(i.toString(), 10)]);\n if (isLeftRightFrozen) {\n this.frozenRightColumns.push(columns[parseInt(i.toString(), 10)]);\n }\n }\n else {\n movable.push(columns[parseInt(i.toString(), 10)]);\n }\n }\n if (this.enableColumnVirtualization && this.isFrozenGrid()) {\n if (this.frozenLeftColumns.length) {\n left = this.frozenLeftColumns;\n }\n if (this.frozenRightColumns.length) {\n right = this.frozenRightColumns;\n }\n }\n return left.concat(movable).concat(right);\n };\n /**\n * @private\n * @param {string} stackedHeader - Defines the stacked header\n * @param {Column[]} col - Defines the column\n * @returns {Column} Returns the Column\n */\n Grid.prototype.getStackedHeaderColumnByHeaderText = function (stackedHeader, col) {\n for (var i = 0; i < col.length; i++) {\n var individualColumn = col[parseInt(i.toString(), 10)];\n if (individualColumn.field === stackedHeader || individualColumn.headerText === stackedHeader) {\n this.stackedColumn = individualColumn;\n break;\n }\n else if (individualColumn.columns) {\n this.getStackedHeaderColumnByHeaderText(stackedHeader, individualColumn.columns);\n }\n }\n return this.stackedColumn;\n };\n /**\n * @private\n * @returns {number[]} Returns the column indexes\n */\n Grid.prototype.getColumnIndexesInView = function () {\n return this.inViewIndexes;\n };\n /**\n * @private\n * @returns {Query} - returns the query\n */\n Grid.prototype.getQuery = function () {\n return this.query;\n };\n /**\n * @private\n * @returns {object} - returns the locale constants\n */\n Grid.prototype.getLocaleConstants = function () {\n return this.defaultLocale;\n };\n /**\n * @param {number[]} indexes - specifies the indexes\n * @returns {void}\n * @private\n */\n Grid.prototype.setColumnIndexesInView = function (indexes) {\n this.inViewIndexes = indexes;\n };\n /**\n * Gets the visible columns from the Grid.\n *\n * @returns {Column[]} returns the column\n */\n Grid.prototype.getVisibleColumns = function () {\n return this.getCurrentVisibleColumns();\n };\n /**\n * Gets the header div of the Grid.\n *\n * @returns {Element} - Returns the element\n */\n Grid.prototype.getHeaderContent = function () {\n return this.headerModule.getPanel();\n };\n /**\n * Sets the header div of the Grid to replace the old header.\n *\n * @param {Element} element - Specifies the Grid header.\n *\n * @returns {void}\n */\n Grid.prototype.setGridHeaderContent = function (element) {\n this.headerModule.setPanel(element);\n };\n /**\n * Gets the content table of the Grid.\n *\n * @returns {Element} - Returns the element\n */\n Grid.prototype.getContentTable = function () {\n return this.contentModule.getTable();\n };\n /**\n * Sets the content table of the Grid to replace the old content table.\n *\n * @param {Element} element - Specifies the Grid content table.\n *\n * @returns {void}\n */\n Grid.prototype.setGridContentTable = function (element) {\n this.contentModule.setTable(element);\n };\n /**\n * Gets the content div of the Grid.\n *\n * @returns {Element} Returns the element\n */\n Grid.prototype.getContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * Sets the content div of the Grid to replace the old Grid content.\n *\n * @param {Element} element - Specifies the Grid content.\n *\n * @returns {void}\n */\n Grid.prototype.setGridContent = function (element) {\n this.contentModule.setPanel(element);\n };\n /**\n * Gets the header table element of the Grid.\n *\n * @returns {Element} returns the element\n */\n Grid.prototype.getHeaderTable = function () {\n return this.headerModule.getTable();\n };\n /**\n * Sets the header table of the Grid to replace the old one.\n *\n * @param {Element} element - Specifies the Grid header table.\n *\n * @returns {void}\n */\n Grid.prototype.setGridHeaderTable = function (element) {\n this.headerModule.setTable(element);\n };\n /**\n * Gets the footer div of the Grid.\n *\n * @returns {Element} returns the element\n */\n Grid.prototype.getFooterContent = function () {\n this.footerElement = this.element.getElementsByClassName(literals.gridFooter)[0];\n return this.footerElement;\n };\n /**\n * Gets the footer table element of the Grid.\n *\n * @returns {Element} returns the element\n */\n Grid.prototype.getFooterContentTable = function () {\n this.footerElement = this.element.getElementsByClassName(literals.gridFooter)[0];\n return this.footerElement.firstChild.firstChild;\n };\n /**\n * Gets the pager of the Grid.\n *\n * @returns {Element} returns the element\n */\n Grid.prototype.getPager = function () {\n return this.gridPager; //get element from pager\n };\n /**\n * Sets the pager of the Grid to replace the old pager.\n *\n * @param {Element} element - Specifies the Grid pager.\n *\n * @returns {void}\n */\n Grid.prototype.setGridPager = function (element) {\n this.gridPager = element;\n };\n /**\n * Gets a row by index.\n *\n * @param {number} index - Specifies the row index.\n *\n * @returns {Element} returns the element\n */\n Grid.prototype.getRowByIndex = function (index) {\n if (this.enableVirtualization && this.groupSettings.enableLazyLoading) {\n return this.lazyLoadRender.getRowByIndex(index);\n }\n else {\n return this.contentModule.getRowByIndex(index);\n }\n };\n /**\n * Gets a movable tables row by index.\n *\n * @param {number} index - Specifies the row index.\n *\n * @returns {Element} returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getRowByIndex()` method instead, and apply the `e-unfreeze` class to select the movable cell within the tr element.\n */\n Grid.prototype.getMovableRowByIndex = function (index) {\n return this.contentModule.getRowByIndex(index);\n };\n /**\n * Gets a frozen tables row by index.\n *\n * @param {number} index - Specifies the row index.\n * @returns {Element} returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getRowByIndex()` method instead, and apply the `e-leftfreeze` class to select the frozen cell within the tr element.\n */\n Grid.prototype.getFrozenRowByIndex = function (index) {\n return this.contentModule.getRowByIndex(index);\n };\n /**\n * Gets all the data rows of the Grid.\n *\n * @returns {Element[]} returns the element\n */\n Grid.prototype.getRows = function () {\n return this.contentModule.getRowElements();\n };\n /**\n * Gets a frozen right tables row element by index.\n *\n * @param {number} index - Specifies the row index.\n * @returns {Element} returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getRowByIndex()` method instead, and apply the `e-rightfreeze` class to select the frozen right cell within the tr element.\n */\n Grid.prototype.getFrozenRightRowByIndex = function (index) {\n return this.contentModule.getRowByIndex(index);\n };\n /**\n * Get a row information based on cell\n *\n * @param {Element | EventTarget} target - specifies the element\n *\n * @returns {RowInfo} returns the row info\n */\n Grid.prototype.getRowInfo = function (target) {\n var ele = target;\n var args = { target: target };\n if (!isNullOrUndefined(target) && isNullOrUndefined(parentsUntil(ele, 'e-detailrowcollapse')\n && isNullOrUndefined(parentsUntil(ele, 'e-recordplusexpand')))) {\n var cell = closest(ele, '.' + literals.rowCell);\n if (!cell) {\n var row_1 = closest(ele, '.' + literals.row);\n if (!isNullOrUndefined(row_1) && !row_1.classList.contains('e-addedrow')) {\n var rowObj = this.getRowObjectFromUID(row_1.getAttribute('data-uid'));\n var rowIndex = parseInt(row_1.getAttribute(literals.dataRowIndex), 10);\n args = { row: row_1, rowData: rowObj.data, rowIndex: rowIndex };\n }\n return args;\n }\n var cellIndex = parseInt(cell.getAttribute(literals.dataColIndex), 10);\n var row_2 = closest(cell, '.' + literals.row);\n if (!isNullOrUndefined(cell) && !isNaN(cellIndex) && !isNullOrUndefined(row_2)) {\n var rowIndex = parseInt(row_2.getAttribute(literals.dataRowIndex), 10);\n var rows = this.contentModule.getRows();\n var index = cellIndex + this.getIndentCount();\n var rowsObject = rows.filter(function (r) { return r.uid === row_2.getAttribute('data-uid'); });\n var rowData = {};\n var column = void 0;\n if (Object.keys(rowsObject).length) {\n rowData = rowsObject[0].data;\n column = rowsObject[0].cells[parseInt(index.toString(), 10)].column;\n }\n args = { cell: cell, cellIndex: cellIndex, row: row_2, rowIndex: rowIndex, rowData: rowData, column: column, target: target };\n }\n }\n return args;\n };\n /**\n * Gets the Grid's movable content rows from frozen grid.\n *\n * @returns {Element[]} returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getRows()` method instead, and apply the `e-unfreeze` class to select the movable cell within the tr element.\n */\n Grid.prototype.getMovableRows = function () {\n return this.contentModule.getRowElements();\n };\n /**\n * Gets the Grid's frozen right content rows from frozen grid.\n *\n * @returns {Element[]} returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getRows()` method instead, and apply the `e-rightfreeze` class to select the frozen right cell within the tr element.\n */\n Grid.prototype.getFrozenRightRows = function () {\n return this.contentModule.getRowElements();\n };\n /**\n * Gets all the Grid's data rows.\n *\n * @returns {Element[]} returns the element\n */\n Grid.prototype.getDataRows = function () {\n return this.getAllDataRows();\n };\n /**\n * @param {boolean} includeAdd - specifies includeAdd\n * @returns {Element[]} returns the element\n * @hidden\n */\n Grid.prototype.getAllDataRows = function (includeAdd) {\n if (isNullOrUndefined(this.getContentTable().querySelector(literals.tbody))) {\n return [];\n }\n var tbody = this.getContentTable().querySelector(literals.tbody);\n var rows = [].slice.call(tbody.children);\n if (this.editSettings.showAddNewRow) {\n if (rows[0].classList.contains('e-addedrow')) {\n rows.shift();\n }\n else if (rows[rows.length - 1].classList.contains('e-addedrow')) {\n rows.pop();\n }\n }\n if (this.frozenRows) {\n var hdrTbody = this.getHeaderTable().querySelector(literals.tbody);\n var freezeRows = [].slice.call(hdrTbody.children);\n rows = this.addMovableRows(freezeRows, rows);\n if (this.editSettings.showAddNewRow && freezeRows[0].classList.contains('e-addedrow')) {\n freezeRows.shift();\n }\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * @param {HTMLElement[]} fRows - Defines the frozen Rows\n * @param {HTMLElement[]} mrows - Defines the movable Rows\n * @returns {HTMLElement[]} Returns the element\n * @hidden\n */\n Grid.prototype.addMovableRows = function (fRows, mrows) {\n for (var i = 0, len = mrows.length; i < len; i++) {\n fRows.push(mrows[parseInt(i.toString(), 10)]);\n }\n return fRows;\n };\n Grid.prototype.generateDataRows = function (rows, includAdd) {\n var dRows = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n if (rows[parseInt(i.toString(), 10)].classList.contains(literals.row)\n && (!rows[parseInt(i.toString(), 10)].classList.contains('e-hiddenrow') || includAdd)) {\n if (this.isCollapseStateEnabled()) {\n dRows[parseInt(rows[parseInt(i.toString(), 10)].getAttribute('data-rowindex'), 10)] = rows[parseInt(i.toString(), 10)];\n }\n else {\n dRows.push(rows[parseInt(i.toString(), 10)]);\n }\n }\n }\n return dRows;\n };\n /**\n * Gets all the Grid's movable table data rows.\n *\n * @returns {Element[]} Returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getDataRows()` method instead, and apply the `e-unfreeze` class to select the movable cell within the tr element.\n */\n Grid.prototype.getMovableDataRows = function () {\n return this.getAllMovableDataRows();\n };\n /**\n * @param {boolean} includeAdd Defines the include add in boolean\n * @returns {Element[]} Returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getAllDataRows()` method instead, and apply the `e-unfreeze` class to select the movable cell within the tr element.\n * @hidden\n */\n Grid.prototype.getAllMovableDataRows = function (includeAdd) {\n return this.getAllDataRows(includeAdd);\n };\n /**\n * Gets all the Grid's frozen table data rows.\n *\n * @returns {Element[]} returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getDataRows()` method instead, and apply the `e-leftfreeze` class to select the frozen cell within the tr element.\n */\n Grid.prototype.getFrozenDataRows = function () {\n return this.getAllFrozenDataRows();\n };\n /**\n * @param {boolean} includeAdd Defines the include add in boolean\n * @returns {Element[]} Returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getAllDataRows()` method instead, and apply the `e-leftfreeze` class to select the frozen cell within the tr element.\n * @hidden\n */\n Grid.prototype.getAllFrozenDataRows = function (includeAdd) {\n return this.getAllDataRows(includeAdd);\n };\n /**\n * Gets all the Grid's frozen right table data rows.\n *\n * @returns {Element[]} Returns the Element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getDataRows()` method instead, and apply the `e-rightfreeze` class to select the frozen right cell within the tr element.\n */\n Grid.prototype.getFrozenRightDataRows = function () {\n return this.getAllFrozenRightDataRows();\n };\n /**\n * @param {boolean} includeAdd Defines the include add in boolean\n * @returns {Element[]} Returns the element\n * @deprecated This method has been marked as deprecated. It is recommended to utilize the `getAllDataRows()` method instead, and apply the `e-rightfreeze` class to select the frozen right cell within the tr element.\n * @hidden\n */\n Grid.prototype.getAllFrozenRightDataRows = function (includeAdd) {\n return this.getAllDataRows(includeAdd);\n };\n /**\n * Updates particular cell value based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n *\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {string } field - Specifies the field name which you want to update.\n * @param {string | number | boolean | Date} value - To update new value for the particular cell.\n *\n * @returns {void}\n */\n Grid.prototype.setCellValue = function (key, field, value) {\n var cells = 'cells';\n var rowData = 'data';\n var rowIdx = 'index';\n var rowuID = 'uid';\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var cell = new CellRenderer(this, this.serviceLocator);\n var fieldIdx = this.getColumnIndexByField(field);\n var col = this.getColumnByField(field);\n var rowObjects = this.contentModule.getRows();\n var selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n var tr = selectedRow ? this.element.querySelector('[data-uid=' + selectedRow[\"\" + rowuID] + ']') : null;\n if (!isNullOrUndefined(tr)) {\n if (typeof value === 'string') {\n value = this.sanitize(value);\n }\n setValue(field, value, selectedRow[\"\" + rowData]);\n var td = this.enableVirtualization ? tr.children[parseInt(fieldIdx.toString(), 10)]\n : this.getCellFromIndex(selectedRow[\"\" + rowIdx], fieldIdx);\n if (!isNullOrUndefined(td)) {\n var Idx = 0;\n if (this.groupSettings.columns.length) {\n fieldIdx = fieldIdx + this.groupSettings.columns.length;\n }\n if (this.childGrid || this.detailTemplate) {\n fieldIdx++;\n }\n if (this.isRowDragable()) {\n fieldIdx++;\n }\n var sRow = selectedRow[\"\" + cells][fieldIdx - Idx];\n cell.refreshTD(td, sRow, selectedRow[\"\" + rowData], { index: selectedRow[\"\" + rowIdx] });\n if (this.isReact) {\n td = this.enableVirtualization ? tr.children[parseInt(fieldIdx.toString(), 10)]\n : this.getCellFromIndex(selectedRow[\"\" + rowIdx], fieldIdx);\n }\n if (this.aggregates.length > 0) {\n this.notify(events.refreshFooterRenderer, {});\n if (this.groupSettings.columns.length > 0) {\n this.notify(events.groupAggregates, {});\n }\n }\n /* tslint:disable:no-string-literal */\n if (!isNullOrUndefined(selectedRow) && !isNullOrUndefined(selectedRow['changes'])) {\n selectedRow['changes'][\"\" + field] = value;\n }\n /* tslint:disable:no-string-literal */\n this.trigger(events.queryCellInfo, {\n cell: td, column: col, data: selectedRow[\"\" + rowData]\n });\n if (this.isReact && td.getAttribute('tabindex') === '0' && td.classList.contains('e-focused')) {\n td.focus();\n }\n }\n }\n else {\n return;\n }\n };\n /**\n * @param {string} columnUid - Defines column uid\n * @param {boolean} renderTemplates - Defines renderTemplates need to invoke\n * @returns {void}\n * @hidden\n */\n Grid.prototype.refreshReactColumnTemplateByUid = function (columnUid, renderTemplates) {\n var _this_1 = this;\n if (this.isReact) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.clearTemplate(['columnTemplate'], undefined, function () {\n var isChildGrid = _this_1.childGrid && _this_1.element.querySelectorAll('.e-childgrid').length ? true : false;\n var rows = isChildGrid ? _this_1.getContentTable().querySelectorAll('.e-row') :\n _this_1.getDataRows();\n _this_1.refreshReactTemplateTD(rows, isChildGrid);\n if (renderTemplates) {\n _this_1.renderTemplates();\n }\n });\n }\n };\n /**\n * @param {Element[] | NodeListOf} rows - Defines the rows\n * @param {boolean} isChildGrid - Defines whether it is a Hierarchy Grid.\n * @param {boolean} isFrozen - Defines whether it is a Frozen Grid\n * @returns {void}\n * @hidden\n */\n Grid.prototype.refreshReactTemplateTD = function (rows, isChildGrid, isFrozen) {\n var cells = 'cells';\n var rowIdx = 'index';\n var indent = this.getIndentCount();\n var childIndent = 0;\n var isChildRow = false;\n for (var j = 0; j < rows.length; j++) {\n var rowsObj = this.getRowObjectFromUID(rows[parseInt(j.toString(), 10)].getAttribute('data-uid'));\n if (isChildGrid && !rowsObj && parentsUntil(rows[parseInt(j.toString(), 10)], 'e-childgrid')) {\n var gridObj = parentsUntil(rows[parseInt(j.toString(), 10)], 'e-childgrid').ej2_instances[0];\n rowsObj = gridObj.getRowObjectFromUID(rows[parseInt(j.toString(), 10)].getAttribute('data-uid'));\n childIndent = gridObj.getIndentCount();\n isChildRow = true;\n }\n if (rowsObj && rowsObj.isDataRow && !isNullOrUndefined(rowsObj.index) &&\n !rows[parseInt(j.toString(), 10)].classList.contains('e-editedrow')) {\n for (var i = 0; i < rowsObj[\"\" + cells].length; i++) {\n var cell = rowsObj[\"\" + cells][parseInt(i.toString(), 10)];\n if (cell.isTemplate) {\n var cellRenderer = new CellRenderer(this, this.serviceLocator);\n var td = isChildGrid ? rows[parseInt(j.toString(), 10)]\n .children[cell.index + (isChildRow ? childIndent : indent)] : this.getCellFromIndex(j, isFrozen ? cell.index : i - indent);\n cellRenderer.refreshTD(td, cell, rowsObj.data, { index: rowsObj[\"\" + rowIdx] });\n }\n }\n }\n isChildRow = false;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Grid.prototype.refreshGroupCaptionFooterTemplate = function () {\n var isChildGrid = this.childGrid && this.element.querySelectorAll('.e-childgrid').length ? true : false;\n var rows = this.getContentTable().querySelectorAll('.e-groupcaptionrow, .e-groupfooterrow');\n for (var i = 0; i < rows.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var gridObj = this;\n var rowsObj = this.getRowObjectFromUID(rows[parseInt(i.toString(), 10)].getAttribute('data-uid'));\n if (isChildGrid && !rowsObj && parentsUntil(rows[parseInt(i.toString(), 10)], 'e-childgrid')) {\n gridObj = parentsUntil(rows[parseInt(i.toString(), 10)], 'e-childgrid').ej2_instances[0];\n rowsObj = gridObj.getRowObjectFromUID(rows[parseInt(i.toString(), 10)].getAttribute('data-uid'));\n }\n if (rowsObj) {\n var cells = rowsObj.cells.filter(function (cell) { return cell.isDataCell; });\n var args = { cells: cells, data: rowsObj.data, dataUid: rowsObj.uid };\n gridObj.notify(events.refreshAggregateCell, args);\n }\n }\n };\n /**\n * @param {string} columnUid - Defines column uid\n * @returns {void}\n * @hidden\n */\n Grid.prototype.refreshReactHeaderTemplateByUid = function (columnUid) {\n if (this.isReact) {\n var cells = 'cells';\n var rowsObj = this.headerModule.rows;\n var cellIndex = this.getNormalizedColumnIndex(columnUid);\n var _loop_1 = function (j) {\n var cell = rowsObj[parseInt(j.toString(), 10)][\"\" + cells][parseInt(cellIndex.toString(), 10)];\n if (cell && cell.column.uid === columnUid) {\n var headerCellRenderer = new HeaderCellRenderer(this_1, this_1.serviceLocator);\n var td = parentsUntil(this_1.element.querySelectorAll('[e-mappinguid=' + columnUid + ']')[0], 'e-templatecell');\n headerCellRenderer.refresh(cell, td);\n var cols = this_1.sortSettings.columns;\n var columnIndex = cols.findIndex(function (col) {\n return col.field === cell\n .column.field;\n });\n if (columnIndex !== -1) {\n var header = this_1.getColumnHeaderByField(cell.column.field);\n this_1.ariaService.setSort(header, (cols[parseInt(columnIndex.toString(), 10)].direction).toLowerCase());\n if (cols.length > 1) {\n header.querySelector('.e-headercelldiv').insertBefore(this_1.createElement('span', { className: 'e-sortnumber', innerHTML: (columnIndex + 1).toString() }), header.querySelector('.e-headertext'));\n }\n var filterElement = header.querySelector('.e-sortfilterdiv');\n if (cols[parseInt(columnIndex.toString(), 10)].direction === 'Ascending') {\n classList(filterElement, ['e-ascending', 'e-icon-ascending'], []);\n }\n else {\n classList(filterElement, ['e-descending', 'e-icon-descending'], []);\n }\n }\n }\n };\n var this_1 = this;\n for (var j = 0; j < rowsObj.length; j++) {\n _loop_1(j);\n }\n }\n };\n /**\n * Updates and refresh the particular row values based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n *\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {Object} rowData - To update new data for the particular row.\n *\n * @returns {void}\n */\n Grid.prototype.setRowData = function (key, rowData) {\n var rowuID = 'uid';\n var rowObjects = this.contentModule.getRows();\n var pkName = this.getPrimaryKeyFieldNames()[0];\n if (this.groupSettings.columns.length > 0 && this.aggregates.length > 0) {\n rowObjects = rowObjects.filter(function (row) { return row.isDataRow; });\n }\n var selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n var selectRowEle = selectedRow ? [].slice.call(this.element.querySelectorAll('[data-uid=' + selectedRow[\"\" + rowuID] + ']')) : undefined;\n if (!isNullOrUndefined(selectedRow) && selectRowEle.length) {\n selectedRow.changes = rowData;\n if (this.frozenRows) {\n var fRowTr = this.getRowsObject()[selectedRow.index];\n this.setFrozenRowData(fRowTr, rowData);\n }\n else {\n this.setFrozenRowData(selectedRow, rowData);\n }\n if (this.aggregates.length > 0) {\n this.notify(events.refreshFooterRenderer, {});\n if (this.groupSettings.columns.length > 0) {\n this.notify(events.groupAggregates, {});\n }\n }\n }\n else {\n return;\n }\n };\n Grid.prototype.setFrozenRowData = function (fTr, rowData) {\n var rowRenderer = new RowRenderer(this.serviceLocator, null, this);\n fTr.changes = rowData;\n refreshForeignData(fTr, this.getForeignKeyColumns(), fTr.changes);\n rowRenderer.refresh(fTr, this.getColumns(), true);\n };\n /**\n * Gets a cell by row and column index.\n *\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n *\n * @returns {Element} Returns the Element\n */\n Grid.prototype.getCellFromIndex = function (rowIndex, columnIndex) {\n var col = this.getColumnByIndex(columnIndex);\n return getCellByColAndRowIndex(this, col, rowIndex, columnIndex);\n };\n /**\n * Gets a movable table cell by row and column index.\n *\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n *\n * @returns {Element} Returns the Element\n * @deprecated This method is deprecated. Use `getCellFromIndex()` method instead\n */\n Grid.prototype.getMovableCellFromIndex = function (rowIndex, columnIndex) {\n return this.getCellFromIndex(rowIndex, columnIndex);\n };\n /**\n * Gets a frozen right table cell by row and column index.\n *\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @returns {Element} Returns the Element\n * @deprecated This method is deprecated. Use `getCellFromIndex()` method instead.\n */\n Grid.prototype.getFrozenRightCellFromIndex = function (rowIndex, columnIndex) {\n return this.getCellFromIndex(rowIndex, columnIndex);\n };\n /**\n * Gets a column header by column index.\n *\n * @param {number} index - Specifies the column index.\n *\n * @returns {Element} Returns the Element\n */\n Grid.prototype.getColumnHeaderByIndex = function (index) {\n return this.getHeaderTable().getElementsByClassName('e-headercell')[parseInt(index.toString(), 10)];\n };\n /**\n * Gets a movable column header by column index.\n *\n * @param {number} index - Specifies the column index.\n * @returns {Element} Returns the Element\n * @deprecated This method is deprecated. Use `getColumnHeaderByIndex()` method instead.\n */\n Grid.prototype.getMovableColumnHeaderByIndex = function (index) {\n return this.getColumnHeaderByIndex(index);\n };\n /**\n * Gets a frozen right column header by column index.\n *\n * @param {number} index - Specifies the column index.\n * @returns {Element} Returns the Element\n * @deprecated This method is deprecated. Use `getColumnHeaderByIndex()` method instead.\n */\n Grid.prototype.getFrozenRightColumnHeaderByIndex = function (index) {\n return this.getColumnHeaderByIndex(index);\n };\n /**\n * Gets a frozen left column header by column index.\n *\n * @param {number} index - Specifies the column index.\n * @returns {Element} Returns the Element\n * @deprecated This method is deprecated. Use `getColumnHeaderByIndex()` method instead.\n */\n Grid.prototype.getFrozenLeftColumnHeaderByIndex = function (index) {\n return this.getColumnHeaderByIndex(index);\n };\n /**\n * @param {string} uid - Defines the uid\n * @returns {Row} Returns the row object\n * @hidden\n */\n Grid.prototype.getRowObjectFromUID = function (uid) {\n var rows = this.contentModule.getRows();\n var row = this.rowObject(rows, uid);\n if (isNullOrUndefined(row) && this.enableVirtualization && this.groupSettings.columns.length > 0) {\n row = this.rowObject(this.vRows, uid);\n return row;\n }\n return row;\n };\n Grid.prototype.rowObject = function (rows, uid) {\n if (rows) {\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.uid === uid) {\n return row;\n }\n }\n }\n return null;\n };\n /**\n * @hidden\n * @returns {Row[]} Returns the Row object\n */\n Grid.prototype.getRowsObject = function () {\n return this.contentModule.getRows();\n };\n /**\n * @hidden\n * @returns {Row[]} Returns the Row object\n * @deprecated This method is deprecated. Use `getRowsObject()` method instead.\n */\n Grid.prototype.getMovableRowsObject = function () {\n return this.contentModule.getRows();\n };\n /**\n * @hidden\n * @returns {Row[]} Returns the Row object\n * @deprecated This method is deprecated. Use `getRowsObject()` method instead.\n */\n Grid.prototype.getFrozenRightRowsObject = function () {\n return this.contentModule.getRows();\n };\n /**\n * Gets a column header by column name.\n *\n * @param {string} field - Specifies the column name.\n *\n * @returns {Element} - Returns the element\n */\n Grid.prototype.getColumnHeaderByField = function (field) {\n var column = this.getColumnByField(field);\n return column ? this.getColumnHeaderByUid(column.uid) : undefined;\n };\n /**\n * Gets a column header by UID.\n *\n * @param {string} uid - Specifies the column uid.\n *\n * @returns {Element} - Returns the element\n */\n Grid.prototype.getColumnHeaderByUid = function (uid) {\n var element = this.getHeaderContent().querySelector('[e-mappinguid=' + uid + ']');\n return element ? element.parentElement : undefined;\n };\n /**\n * @hidden\n * @param {number} index - Defines the index\n * @returns {Column} Returns the column\n */\n Grid.prototype.getColumnByIndex = function (index) {\n var column;\n this.getColumns().some(function (col, i) {\n column = col;\n return i === index;\n });\n return column;\n };\n /**\n * Gets a Column by column name.\n *\n * @param {string} field - Specifies the column name.\n *\n * @returns {Column} Returns the column\n */\n Grid.prototype.getColumnByField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item) {\n if (item.field === field) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets a column index by column name.\n *\n * @param {string} field - Specifies the column name.\n *\n * @returns {number} Returns the index by field\n */\n Grid.prototype.getColumnIndexByField = function (field) {\n var cols = this.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === field) {\n return i;\n }\n }\n return -1;\n };\n /**\n * Gets a column by UID.\n *\n * @param {string} uid - Specifies the column UID.\n *\n * @returns {Column} Returns the column\n */\n Grid.prototype.getColumnByUid = function (uid) {\n return iterateArrayOrObject(this.getColumns().concat(this.getStackedColumns(this.columns)), function (item) {\n if (item.uid === uid) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * @param {Column[]} columns - Defines the columns\n * @param {Column[]} stackedColumn - Defines the stacked columns\n * @returns {Column[]} Returns the columns\n * @hidden\n */\n Grid.prototype.getStackedColumns = function (columns, stackedColumn) {\n if (stackedColumn === void 0) { stackedColumn = []; }\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (column.columns) {\n stackedColumn.push(column);\n this.getStackedColumns(column.columns, stackedColumn);\n }\n }\n return stackedColumn;\n };\n /**\n * Gets a column index by UID.\n *\n * @param {string} uid - Specifies the column UID.\n *\n * @returns {number} Returns the column by index\n */\n Grid.prototype.getColumnIndexByUid = function (uid) {\n var index = iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.uid === uid) {\n return index;\n }\n return undefined;\n })[0];\n return !isNullOrUndefined(index) ? index : -1;\n };\n /**\n * Gets UID by column name.\n *\n * @param {string} field - Specifies the column name.\n *\n * @returns {string} Returns the column by field\n */\n Grid.prototype.getUidByColumnField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item) {\n if (item.field === field) {\n return item.uid;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets column index by column uid value.\n *\n * @private\n * @param {string} uid - Specifies the column uid.\n * @returns {number} Returns the column by field\n */\n Grid.prototype.getNormalizedColumnIndex = function (uid) {\n var index = this.getColumnIndexByUid(uid);\n return index + this.getIndentCount();\n };\n /**\n * Gets indent cell count.\n *\n * @private\n * @returns {number} Returns the indent count\n */\n Grid.prototype.getIndentCount = function () {\n var index = 0;\n if (this.allowGrouping) {\n index += this.groupSettings.columns.length;\n }\n if (this.isDetail()) {\n index++;\n }\n if (this.isRowDragable() && isNullOrUndefined(this.rowDropSettings.targetID)) {\n index++;\n }\n /**\n * TODO: index normalization based on the stacked header, grouping and detailTemplate\n * and frozen should be handled here\n */\n return index;\n };\n /**\n * Gets the collection of column fields.\n *\n * @returns {string[]} Returns the Field names\n */\n Grid.prototype.getColumnFieldNames = function () {\n var columnNames = [];\n var column;\n for (var i = 0, len = this.getColumns().length; i < len; i++) {\n column = this.getColumns()[parseInt(i.toString(), 10)];\n if (column.visible) {\n columnNames.push(column.field);\n }\n }\n return columnNames;\n };\n /**\n * Gets a compiled row template.\n *\n * @returns {Function} Returns the row TEmplate\n * @private\n */\n Grid.prototype.getRowTemplate = function () {\n return this.rowTemplateFn;\n };\n /**\n * Gets a compiled empty Record template.\n *\n * @returns {Function} Returns the empty Record template\n * @private\n */\n Grid.prototype.getEmptyRecordTemplate = function () {\n return this.emptyRecordTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n *\n * @private\n * @returns {Function} Returns the Detail template\n */\n Grid.prototype.getDetailTemplate = function () {\n return this.detailTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n *\n * @private\n * @returns {Function}Returns the Edit template\n */\n Grid.prototype.getEditTemplate = function () {\n return this.editTemplateFn;\n };\n /**\n * Gets a compiled dialog edit header template.\n *\n * @private\n * @returns {Function} returns template function\n */\n Grid.prototype.getEditHeaderTemplate = function () {\n return this.editHeaderTemplateFn;\n };\n /**\n * Gets a compiled dialog edit footer template.\n *\n * @private\n * @returns {Function} Returns the Footer template\n */\n Grid.prototype.getEditFooterTemplate = function () {\n return this.editFooterTemplateFn;\n };\n /**\n * Get the names of the primary key columns of the Grid.\n *\n * @returns {string[]} Returns the field names\n */\n Grid.prototype.getPrimaryKeyFieldNames = function () {\n var keys = [];\n for (var k = 0; k < this.columnModel.length; k++) {\n if (this.columnModel[parseInt(k.toString(), 10)].isPrimaryKey) {\n keys.push(this.columnModel[parseInt(k.toString(), 10)].field);\n }\n }\n return keys;\n };\n /**\n * Refreshes the Grid header and content.\n *\n * @returns {void}\n */\n Grid.prototype.refresh = function () {\n if (!this.isDestroyed) {\n this.isManualRefresh = true;\n this.headerModule.refreshUI();\n this.updateStackedFilter();\n this.renderModule.refresh();\n }\n };\n /**\n * Refreshes the Grid header.\n *\n * @returns {void}\n */\n Grid.prototype.refreshHeader = function () {\n this.headerModule.refreshUI();\n };\n /**\n * Gets the collection of selected rows.\n *\n * @returns {Element[]} Returns the element\n */\n Grid.prototype.getSelectedRows = function () {\n return this.selectionModule ? this.selectionModule.selectedRecords : [];\n };\n /**\n * Gets the collection of selected row indexes.\n *\n * @returns {number[]} Returns the Selected row indexes\n */\n Grid.prototype.getSelectedRowIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowIndexes : [];\n };\n /**\n * Gets the collection of selected row and cell indexes.\n *\n * @returns {number[]} Returns the Selected row cell indexes\n */\n Grid.prototype.getSelectedRowCellIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowCellIndexes : [];\n };\n /**\n * Gets the collection of selected records.\n *\n * @returns {Object[]} Returns the selected records\n * @isGenericType true\n */\n Grid.prototype.getSelectedRecords = function () {\n return this.selectionModule ? this.selectionModule.getSelectedRecords() : [];\n };\n /**\n * Gets the collection of selected columns uid.\n *\n * @returns {string[]} Returns the selected column uid\n * @isGenericType true\n */\n Grid.prototype.getSelectedColumnsUid = function () {\n var _this_1 = this;\n var uid = [];\n if (this.selectionModule) {\n this.selectionModule.selectedColumnsIndexes.filter(function (i) { return uid.push(_this_1.getColumns()[parseInt(i.toString(), 10)].uid); });\n }\n return uid;\n };\n /**\n * Gets the data module.\n *\n * @returns {Data} Returns the data\n */\n Grid.prototype.getDataModule = function () {\n return this.renderModule.data;\n };\n /**\n * Shows a column by its column name.\n *\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} showBy - Defines the column key either as field name or header text.\n *\n * @returns {void}\n */\n Grid.prototype.showColumns = function (keys, showBy) {\n showBy = showBy ? showBy : 'headerText';\n this.showHider.show(keys, showBy);\n };\n /**\n * Hides a column by column name.\n *\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n *\n * @returns {void}\n */\n Grid.prototype.hideColumns = function (keys, hideBy) {\n hideBy = hideBy ? hideBy : 'headerText';\n this.showHider.hide(keys, hideBy);\n };\n /**\n * @hidden\n * @returns {number} Returns the Frozen column\n */\n Grid.prototype.getFrozenColumns = function () {\n return this.frozenColumns + this.getFrozenCount(this.columns, 0, 0);\n };\n /**\n * @hidden\n * @returns {number} Returns the Frozen Right column count\n */\n Grid.prototype.getFrozenRightColumnsCount = function () {\n return this.frozenRightCount || this.rightcount;\n };\n /**\n * @hidden\n * @returns {number} Returns the Frozen Left column\n */\n Grid.prototype.getFrozenLeftColumnsCount = function () {\n return this.frozenLeftCount || this.leftcount;\n };\n /**\n * @hidden\n * @returns {number} Returns the movable column count\n */\n Grid.prototype.getMovableColumnsCount = function () {\n return this.movableCount || this.movablecount;\n };\n Grid.prototype.updateFrozenColumnsWidth = function () {\n if (this.isFrozenGrid() && !this.enableColumnVirtualization) {\n var gcol = this.getColumns();\n var isAutoWidth = true;\n var autoCol_1 = 0;\n var difference_1 = 0;\n var autoWidth_1 = 0;\n var _loop_2 = function (i) {\n var col = gcol[parseInt(i.toString(), 10)];\n if (isNullOrUndefined(col.width) && (col.freeze === 'Left' || col.freeze === 'Right' || col.freeze === 'Fixed' || col.isFrozen)) {\n col.width = Math.max(200, col.minWidth ? parseFloat(col.minWidth.toString()) : 0);\n }\n if (col.width === 'auto') {\n var tWidth_1 = 0;\n if (isAutoWidth) {\n gcol.filter(function (cols) {\n if (cols.visible) {\n if (cols.width === 'auto') {\n autoCol_1++;\n }\n if (cols.width !== 'auto') {\n var width = !isNullOrUndefined(cols.width) ? parseFloat(cols.width.toString()) :\n Math.max(200, cols.minWidth ? parseFloat(cols.minWidth.toString()) : 0);\n tWidth_1 += width;\n }\n }\n });\n var gWidth = this_2.isPercentageWidthGrid() || this_2.width === 'auto' ? this_2.element.getBoundingClientRect().width :\n parseFloat(this_2.width.toString());\n difference_1 = this_2.height === 'auto' ? gWidth - tWidth_1 : ((gWidth - tWidth_1) - getScrollBarWidth());\n if (difference_1 < 0) {\n difference_1 = 0;\n }\n autoWidth_1 = parseFloat((difference_1 / autoCol_1).toString());\n gcol.filter(function (col) {\n if (col.visible) {\n if (col.minWidth && parseFloat(col.minWidth.toString()) > autoWidth_1) {\n difference_1 = difference_1 - parseFloat(col.minWidth.toString());\n autoCol_1--;\n }\n }\n });\n isAutoWidth = false;\n }\n if (col.minWidth && parseFloat(col.minWidth.toString()) > autoWidth_1) {\n col.width = parseFloat(col.minWidth.toString());\n }\n else {\n col.width = difference_1 / autoCol_1;\n }\n }\n };\n var this_2 = this;\n for (var i = 0; i < gcol.length; i++) {\n _loop_2(i);\n }\n }\n };\n Grid.prototype.refreshSplitFrozenColumn = function () {\n this.splitFrozenCount(this.columns);\n this.updateFrozenColumnsWidth();\n this.isAutoGenerateColumns = true;\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.setFrozenCount = function () {\n this.frozenLeftCount = this.frozenRightCount = this.movableCount = 0;\n this.visibleFrozenLeft = this.visibleFrozenRight = this.visibleMovable = 0;\n this.frozenLeftColumns = [];\n this.frozenRightColumns = [];\n this.movableColumns = [];\n this.fixedColumns = [];\n this.splitFrozenCount(this.columns);\n this.leftcount = this.frozenLeftCount;\n this.rightcount = this.frozenRightCount;\n this.movablecount = this.movableCount;\n // if (this.frozenColumns && (this.frozenLeftCount || this.frozenRightCount)) {\n // this.setProperties({ frozenColumns: 0 }, true);\n // }\n if (this.frozenLeftCount && !this.frozenRightCount) {\n this.frozenName = 'Left';\n }\n else if (this.frozenRightCount && !this.frozenLeftCount) {\n this.frozenName = 'Right';\n }\n else if (this.frozenLeftCount && this.frozenRightCount) {\n this.frozenName = 'Left-Right';\n }\n else if (this.frozenColumns || this.frozenRows) {\n this.frozenName = 'Left';\n }\n else {\n this.frozenName = undefined;\n }\n };\n /**\n * @hidden\n * @returns {number} Returns the visible Frozen left count\n */\n Grid.prototype.getVisibleFrozenLeftCount = function () {\n return this.visibleFrozenLeft;\n };\n /**\n * @hidden\n * @returns {number} Returns the visible Frozen Right count\n */\n Grid.prototype.getVisibleFrozenRightCount = function () {\n return this.visibleFrozenRight;\n };\n /**\n * @hidden\n * @returns {number} Returns the visible movable count\n */\n Grid.prototype.getVisibleMovableCount = function () {\n return this.visibleMovable;\n };\n /**\n * @hidden\n * @returns {Column[]} Returns the column\n */\n Grid.prototype.getFrozenRightColumns = function () {\n return this.frozenRightColumns;\n };\n /**\n * @hidden\n * @returns {Column[]} Returns the column\n */\n Grid.prototype.getFrozenLeftColumns = function () {\n return this.frozenLeftColumns;\n };\n /**\n * @hidden\n * @returns {Column[]} Returns the column\n */\n Grid.prototype.getMovableColumns = function () {\n return this.movableColumns;\n };\n Grid.prototype.splitStackedColumns = function (columns) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].columns) {\n this.splitStackedColumns(columns[parseInt(i.toString(), 10)].columns);\n }\n else {\n if (columns[parseInt(i.toString(), 10)].freeze === 'Left' || columns[parseInt(i.toString(), 10)].isFrozen) {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleFrozenLeft++;\n }\n this.leftcount++;\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Right') {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleFrozenRight++;\n }\n this.rightcount++;\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleFrozenFixed++;\n }\n this.fixedcount++;\n }\n else {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleMovable++;\n }\n this.movablecount++;\n }\n }\n }\n };\n Grid.prototype.pushStackedColumns = function (columns, index, arr, col, stackedcol) {\n arr[parseInt(index.toString(), 10)] = col.headerText;\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].columns) {\n index = index + 1;\n this.pushStackedColumns(columns[parseInt(i.toString(), 10)].columns, index, arr, columns[parseInt(i.toString(), 10)], stackedcol);\n index = index - 1;\n }\n else {\n var stockCol = [];\n stockCol = arr.slice().slice(0, index + 1);\n if (columns[parseInt(i.toString(), 10)].freeze === 'Left' || columns[parseInt(i.toString(), 10)].isFrozen) {\n this.stackedLeft.push(stockCol);\n this.stackedarrayLeft.push(columns[parseInt(i.toString(), 10)]);\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Right') {\n this.stackedRight.push(stockCol);\n this.stackedarrayRight.push(columns[parseInt(i.toString(), 10)]);\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n this.stackedFixed.push(stockCol);\n this.stackedarrayFixed.push(columns[parseInt(i.toString(), 10)]);\n }\n else {\n this.stackedMovable.push(stockCol);\n this.stackedarrayMovable.push(columns[parseInt(i.toString(), 10)]);\n }\n }\n }\n };\n Grid.prototype.pushallcol = function (text, text1, col, columns, isTrue) {\n if (col.headerText === text1) {\n if (isTrue) {\n col.columns.push(columns);\n }\n else {\n col.columns.push({ headerText: text, columns: [] });\n }\n }\n else {\n if (col.columns && col.columns.length) {\n for (var i = 0; i < col.columns.length; i++) {\n this.pushallcol(text, text1, col.columns[parseInt(i.toString(), 10)], columns, isTrue);\n }\n }\n }\n };\n Grid.prototype.resetStackedColumns = function (headercol, gridcolumns, freeze) {\n var col = {};\n var tempHead = [];\n for (var i = 1; i <= headercol.length; i++) {\n var firstcol = headercol[i - 1];\n for (var j = 0; j < firstcol.length; j++) {\n if (!col.columns && i === 1) {\n col = { headerText: firstcol[parseInt(j.toString(), 10)], columns: [] };\n tempHead.push(firstcol[parseInt(j.toString(), 10)]);\n }\n else {\n if (tempHead.indexOf(firstcol[parseInt(j.toString(), 10)]) === -1) {\n this.pushallcol(firstcol[parseInt(j.toString(), 10)], firstcol[j - 1], col);\n tempHead.push(firstcol[parseInt(j.toString(), 10)]);\n }\n }\n if (j === firstcol.length - 1) {\n this.pushallcol(null, firstcol[parseInt(j.toString(), 10)], col, gridcolumns[i - 1], true);\n var count = 0;\n while (count !== headercol.length - 1 && i !== headercol.length) {\n if (firstcol.toString() === headercol[parseInt(i.toString(), 10)].toString()) {\n i++;\n this.pushallcol(null, firstcol[parseInt(j.toString(), 10)], col, gridcolumns[i - 1], true);\n }\n count++;\n }\n }\n }\n }\n if (freeze === 'Left') {\n this.frozenLeftColumns.push(col);\n }\n else if (freeze === 'Right') {\n this.frozenRightColumns.push(col);\n }\n else {\n this.movableColumns.push(col);\n }\n };\n Grid.prototype.splitFrozenCount = function (columns) {\n if (this.frozenColumns || (this.changedProperties && this.changedProperties.frozenColumns === 0)) {\n var cols = !this.enableColumnVirtualization || (this.enableColumnVirtualization && this.isPreparedFrozenColumns) ?\n this.enableColumnVirtualization && this.columnModel && this.columnModel.length ? this.columnModel :\n this.getColumns() : this.columns;\n if (!this.changedProperties || (this.changedProperties && !this.changedProperties.frozenColumns)) {\n for (var i = 0; i < cols.length; i++) {\n if (this.frozenColumns > i) {\n cols[parseInt(i.toString(), 10)].freeze = 'Left';\n }\n else if (cols[parseInt(i.toString(), 10)].freeze === 'Right' || cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n cols[parseInt(i.toString(), 10)].freeze = cols[parseInt(i.toString(), 10)].freeze;\n }\n else {\n cols[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n }\n }\n for (var i = 0; i < (!isNullOrUndefined(columns) ? columns.length : 0); i++) {\n if (columns[parseInt(i.toString(), 10)].columns) {\n this.leftcount = 0;\n this.rightcount = 0;\n this.movablecount = 0;\n this.fixedcount = 0;\n var arr = [];\n this.splitStackedColumns(columns[parseInt(i.toString(), 10)].columns);\n if (this.leftcount && !this.rightcount && !this.movablecount && !this.fixedcount) {\n this.frozenLeftCount += this.leftcount;\n this.frozenLeftColumns.push(columns[parseInt(i.toString(), 10)]);\n }\n else if (this.rightcount && !this.leftcount && !this.movablecount && !this.fixedcount) {\n this.frozenRightCount += this.rightcount;\n this.frozenRightColumns.push(columns[parseInt(i.toString(), 10)]);\n }\n else if (this.movablecount && !this.leftcount && !this.rightcount && !this.fixedcount) {\n this.movableCount += this.movablecount;\n this.movableColumns.push(columns[parseInt(i.toString(), 10)]);\n }\n else if (this.fixedcount && !this.leftcount && !this.rightcount && !this.movablecount) {\n this.fixedCount += this.fixedcount;\n this.fixedColumns.push(columns[parseInt(i.toString(), 10)]);\n this.movableCount += this.movablecount;\n this.movableColumns.push(columns[parseInt(i.toString(), 10)]);\n }\n else {\n this.frozenLeftCount += this.leftcount;\n this.frozenRightCount += this.rightcount;\n this.movableCount += this.movablecount;\n this.fixedCount += this.fixedcount;\n this.leftcount = 0;\n this.rightcount = 0;\n this.movablecount = 0;\n this.fixedcount = 0;\n this.stackedLeft = [];\n this.stackedRight = [];\n this.stackedFixed = [];\n this.stackedMovable = [];\n this.stackedarrayLeft = [];\n this.stackedarrayRight = [];\n this.stackedarrayFixed = [];\n this.stackedarrayMovable = [];\n this.pushStackedColumns(columns[parseInt(i.toString(), 10)].columns, 0, arr, columns[parseInt(i.toString(), 10)], { headerText: columns[parseInt(i.toString(), 10)].headerText, columns: [] });\n if (this.stackedarrayLeft.length) {\n this.resetStackedColumns(this.stackedLeft, this.stackedarrayLeft, 'Left');\n }\n if (this.stackedarrayRight.length) {\n this.resetStackedColumns(this.stackedRight, this.stackedarrayRight, 'Right');\n }\n if (this.stackedarrayFixed.length) {\n this.resetStackedColumns(this.stackedFixed, this.stackedarrayFixed, 'Fixed');\n }\n if (this.stackedarrayMovable.length) {\n this.resetStackedColumns(this.stackedMovable, this.stackedarrayMovable, 'Movable');\n }\n this.stackedLeft = [];\n this.stackedRight = [];\n this.stackedMovable = [];\n this.stackedFixed = [];\n this.stackedarrayLeft = [];\n this.stackedarrayRight = [];\n this.stackedarrayMovable = [];\n this.stackedarrayFixed = [];\n }\n }\n else {\n if (columns[parseInt(i.toString(), 10)].freeze === 'Right') {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleFrozenRight++;\n }\n this.frozenRightColumns.push(columns[parseInt(i.toString(), 10)]);\n this.frozenRightCount++;\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Left' || columns[parseInt(i.toString(), 10)].isFrozen) {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleFrozenLeft++;\n }\n this.frozenLeftColumns.push(columns[parseInt(i.toString(), 10)]);\n this.frozenLeftCount++;\n }\n else if (columns[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n this.fixedColumns.push(columns[parseInt(i.toString(), 10)]);\n this.fixedCount++;\n this.movableColumns.push(columns[parseInt(i.toString(), 10)]);\n this.movableCount++;\n }\n else {\n if (columns[parseInt(i.toString(), 10)].visible !== false) {\n this.visibleMovable++;\n }\n this.movableColumns.push(columns[parseInt(i.toString(), 10)]);\n this.movableCount++;\n }\n }\n }\n if (this.frozenLeftColumns.length) {\n var cols = this.frozenLeftColumns[this.frozenLeftColumns.length - 1];\n this.removeBorder(this.frozenLeftColumns);\n this.frozenLeftBorderColumns(cols instanceof Column ? this.lastVisibleLeftCol(this.frozenLeftColumns) : cols);\n }\n if (this.frozenRightColumns.length) {\n var cols = this.frozenRightColumns[0];\n this.removeBorder(this.frozenRightColumns);\n this.frozenRightBorderColumns(cols instanceof Column ? this.firstVisibleRightCol(this.frozenRightColumns) : cols);\n }\n if ((this.frozenLeftColumns.length || this.frozenRightColumns.length) && this.freezeColumnRefresh) {\n var cols = (this.frozenLeftColumns.concat(this.movableColumns)).concat(this.frozenRightColumns);\n this.setProperties({ columns: cols }, true);\n this.freezeColumnRefresh = false;\n }\n };\n Grid.prototype.removeBorder = function (columns) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].columns && columns[parseInt(i.toString(), 10)].columns.length) {\n if (columns[parseInt(i.toString(), 10)].border === 'Right' ||\n columns[parseInt(i.toString(), 10)].border === 'Left') {\n columns[parseInt(i.toString(), 10)].border = undefined;\n }\n this.removeBorder(columns[parseInt(i.toString(), 10)].columns);\n }\n else {\n if (columns[parseInt(i.toString(), 10)].border === 'Right' ||\n columns[parseInt(i.toString(), 10)].border === 'Left') {\n columns[parseInt(i.toString(), 10)].border = undefined;\n }\n }\n }\n };\n Grid.prototype.isVisibleColumns = function (column, arr) {\n if (column.columns && column.columns.length) {\n for (var i = 0; i < column.columns.length; i++) {\n this.isVisibleColumns(column.columns[parseInt(i.toString(), 10)], arr);\n if (column.columns[parseInt(i.toString(), 10)].visible &&\n isNullOrUndefined(column.columns[parseInt(i.toString(), 10)].columns) &&\n (!isNullOrUndefined(column.columns[parseInt(i.toString(), 10)].freeze) ||\n column.columns[parseInt(i.toString(), 10)].isFrozen)) {\n arr.push('true');\n }\n }\n }\n else {\n if (column.visible && (!isNullOrUndefined(column.freeze) || column.isFrozen)) {\n arr.push('true');\n }\n }\n };\n Grid.prototype.lastVisibleLeftCol = function (columns) {\n var column;\n for (var i = columns.length - 1; i >= 0; i--) {\n var arr = [];\n this.isVisibleColumns(columns[parseInt(i.toString(), 10)], arr);\n if (columns[parseInt(i.toString(), 10)].visible && arr.indexOf('true') !== -1) {\n column = columns[parseInt(i.toString(), 10)];\n break;\n }\n }\n return column;\n };\n Grid.prototype.firstVisibleRightCol = function (columns) {\n var column;\n for (var i = 0; i < columns.length; i++) {\n var arr = [];\n this.isVisibleColumns(columns[parseInt(i.toString(), 10)], arr);\n if (columns[parseInt(i.toString(), 10)].visible && arr.indexOf('true') !== -1) {\n column = columns[parseInt(i.toString(), 10)];\n break;\n }\n }\n return column;\n };\n Grid.prototype.frozenLeftBorderColumns = function (columns) {\n if (isNullOrUndefined(columns)) {\n return;\n }\n if (columns.columns && columns.columns.length) {\n columns.border = 'Left';\n var cols = columns.columns[columns.columns.length - 1];\n this.frozenLeftBorderColumns(cols instanceof Column && cols.columns ? this.lastVisibleLeftCol(columns.columns) : cols);\n }\n else {\n columns.border = 'Left';\n }\n };\n Grid.prototype.frozenRightBorderColumns = function (columns) {\n if (isNullOrUndefined(columns)) {\n return;\n }\n if (columns.columns && columns.columns.length) {\n columns.border = 'Right';\n var cols = columns.columns[0];\n this.frozenRightBorderColumns(cols instanceof Column && cols.columns ? this.firstVisibleRightCol(columns.columns) : cols);\n }\n else {\n columns.border = 'Right';\n }\n };\n /**\n * @hidden\n * @returns {number} Returns the visible frozen columns count\n */\n Grid.prototype.getVisibleFrozenColumns = function () {\n return this.getVisibleFrozenColumnsCount() + this.getVisibleFrozenCount(this.columns, 0);\n };\n /**\n * Get the current Filter operator and field.\n *\n * @returns {FilterUI} Returns the filter UI\n */\n Grid.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n Grid.prototype.getVisibleFrozenColumnsCount = function () {\n var visibleFrozenColumns = 0;\n var columns = this.columnModel;\n for (var i = 0; i < this.frozenColumns; i++) {\n if (columns[parseInt(i.toString(), 10)].visible) {\n visibleFrozenColumns++;\n }\n }\n if ((this.frozenLeftCount || this.leftcount) || (this.frozenRightCount || this.rightcount)) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].visible && (columns[parseInt(i.toString(), 10)].freeze === 'Left'\n || columns[parseInt(i.toString(), 10)].freeze === 'Right')) {\n visibleFrozenColumns++;\n }\n }\n }\n return visibleFrozenColumns;\n };\n Grid.prototype.getVisibleFrozenCount = function (cols, cnt) {\n if ((!this.frozenLeftCount && !this.leftcount) && (!this.frozenRightCount || !this.rightcount)) {\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].columns) {\n cnt = this.getVisibleFrozenCount(cols[parseInt(i.toString(), 10)].columns, cnt);\n }\n else {\n if (cols[parseInt(i.toString(), 10)].isFrozen && cols[parseInt(i.toString(), 10)].visible) {\n cnt++;\n }\n }\n }\n }\n return cnt;\n };\n Grid.prototype.getFrozenCount = function (cols, cnt, index) {\n for (var i = 0, len = (!isNullOrUndefined(cols) ? cols.length : 0); i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].columns) {\n cnt = this.getFrozenCount(cols[parseInt(i.toString(), 10)].columns, cnt, index);\n }\n else {\n if (cols[parseInt(i.toString(), 10)].isFrozen && index > this.frozenColumns - 1) {\n cnt++;\n }\n index++;\n }\n }\n return cnt;\n };\n /**\n * Navigates to the specified target page.\n *\n * @param {number} pageNo - Defines the page number to navigate.\n *\n * @returns {void}\n */\n Grid.prototype.goToPage = function (pageNo) {\n if (this.pagerModule) {\n this.pagerModule.goToPage(pageNo);\n }\n };\n /**\n * Defines the text of external message.\n *\n * @param {string} message - Defines the message to update.\n *\n * @returns {void}\n */\n Grid.prototype.updateExternalMessage = function (message) {\n if (this.pagerModule && !this.pagerTemplate) {\n this.pagerModule.updateExternalMessage(message);\n }\n };\n /**\n * Sorts a column with the given options.\n *\n * @param {string} columnName - Defines the column name to be sorted.\n * @param {SortDirection} direction - Defines the direction of sorting field.\n * @param {boolean} isMultiSort - Specifies whether the previous sorted columns are to be maintained.\n *\n * @returns {void}\n */\n Grid.prototype.sortColumn = function (columnName, direction, isMultiSort) {\n if (this.sortModule) {\n this.sortModule.sortColumn(columnName, direction, isMultiSort);\n }\n };\n /**\n * Remove the existing columns along with the grid actions like sorting, filtering, searching, grouping, aggregate, etc., and grid will refresh with new columns based on the updated new data source.\n * > * If no columns are specified while changing the data source, then the columns are auto generated in the Grid based on the list of columns in the updated data source.\n *\n * @param {Object | DataManager | DataResult} dataSource - Assign the new datasource.\n * @param {Column[] | string[] | ColumnModel[]} columns - Defines columns.\n * @returns {void}\n *\n *\n * ```typescript\n * \n *
\n * \n * ```\n *\n */\n Grid.prototype.changeDataSource = function (dataSource, columns) {\n this.isChangeDataSourceCall = true;\n this.setProperties({ sortSettings: { columns: [] } }, true);\n this.setProperties({ filterSettings: { columns: [] } }, true);\n this.setProperties({ searchSettings: { key: '' } }, true);\n if (this.allowGrouping) {\n this.setProperties({ groupSettings: { columns: [] } }, true);\n }\n if (columns && columns.length) {\n this.setProperties({ columns: columns }, true);\n }\n if (dataSource) {\n if (isNullOrUndefined(columns)) {\n this.setProperties({ columns: [] }, true);\n }\n this.setProperties({ dataSource: dataSource }, true);\n }\n this.freezeRefresh();\n this.isChangeDataSourceCall = false;\n };\n /**\n * Clears all the sorted columns of the Grid.\n *\n * @returns {void}\n */\n Grid.prototype.clearSorting = function () {\n if (this.sortModule) {\n this.sortModule.clearSorting();\n }\n };\n /**\n * Remove sorted column by field name.\n *\n * @param {string} field - Defines the column field name to remove sort.\n * @returns {void}\n * @hidden\n */\n Grid.prototype.removeSortColumn = function (field) {\n if (this.sortModule) {\n this.sortModule.removeSortColumn(field);\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.clearGridActions = function () {\n this.setProperties({ sortSettings: { columns: [] } }, true);\n this.setProperties({ filterSettings: { columns: [] } }, true);\n this.setProperties({ searchSettings: { key: '' } }, true);\n if (this.allowGrouping) {\n this.setProperties({ groupSettings: { columns: [] } }, false);\n }\n else {\n this.freezeRefresh();\n }\n };\n /**\n * Filters grid row by column name with the given options.\n *\n * @param {string} fieldName - Defines the field name of the column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query and another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, the grid filters the records with exact match. if false, it filters case\n * insensitive records (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true,\n * then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n *\n * @returns {void}\n */\n Grid.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {\n if (this.filterModule) {\n this.filterModule.filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator);\n }\n };\n /**\n * Clears all the filtered rows of the Grid.\n *\n * @param {string[]} fields - Defines the Fields\n * @returns {void}\n */\n Grid.prototype.clearFiltering = function (fields) {\n if (this.filterModule) {\n this.filterModule.clearFiltering(fields);\n }\n };\n /**\n * Removes filtered column by field name.\n *\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @returns {void}\n * @hidden\n */\n Grid.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n if (this.filterModule) {\n this.filterModule.removeFilteredColsByField(field, isClearFilterBar);\n }\n };\n /**\n * Selects a row by given index.\n *\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n *\n * @returns {void}\n */\n Grid.prototype.selectRow = function (index, isToggle) {\n if (this.selectionModule) {\n this.selectionModule.selectRow(index, isToggle);\n }\n };\n /**\n * Selects a collection of rows by indexes.\n *\n * @param {number[]} rowIndexes - Specifies the row indexes.\n *\n * @returns {void}\n */\n Grid.prototype.selectRows = function (rowIndexes) {\n if (this.selectionModule) {\n this.selectionModule.selectRows(rowIndexes);\n }\n };\n /**\n * Deselects the current selected rows and cells.\n *\n * @returns {void}\n */\n Grid.prototype.clearSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearSelection();\n }\n };\n /**\n * Selects a cell by the given index.\n *\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n *\n * @returns {void}\n */\n Grid.prototype.selectCell = function (cellIndex, isToggle) {\n if (this.selectionModule) {\n this.selectionModule.selectCell(cellIndex, isToggle);\n }\n };\n /**\n * Selects a range of cells from start and end indexes.\n *\n * @param {IIndex} startIndex - Specifies the row and column's start index.\n * @param {IIndex} endIndex - Specifies the row and column's end index.\n *\n * @returns {void}\n */\n Grid.prototype.selectCellsByRange = function (startIndex, endIndex) {\n this.selectionModule.selectCellsByRange(startIndex, endIndex);\n };\n /**\n * Searches Grid records using the given key.\n * You can customize the default search option by using the\n * [`searchSettings`](./#searchsettings/).\n *\n * @param {string} searchString - Defines the key.\n *\n * @returns {void}\n */\n Grid.prototype.search = function (searchString) {\n if (this.searchModule) {\n this.searchModule.search(searchString);\n }\n };\n /**\n * By default, prints all the pages of the Grid and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./#printmode).\n *\n * @returns {void}\n */\n Grid.prototype.print = function () {\n if (this.printModule) {\n this.printModule.print();\n }\n };\n /**\n * Delete a record with Given options. If fieldname and data is not given then grid will delete the selected record.\n * > `editSettings.allowDeleting` should be true.\n *\n * @param {string} fieldname - Defines the primary key field, 'Name of the column'.\n * @param {Object} data - Defines the JSON data of the record to be deleted.\n * @returns {void}\n */\n Grid.prototype.deleteRecord = function (fieldname, data) {\n if (this.editModule) {\n this.editModule.deleteRecord(fieldname, data);\n }\n };\n /**\n * Starts edit the selected row. At least one row must be selected before invoking this method.\n * `editSettings.allowEditing` should be true.\n * {% codeBlock src='grid/startEdit/index.md' %}{% endcodeBlock %}\n *\n * @returns {void}\n */\n Grid.prototype.startEdit = function () {\n if (this.editModule) {\n this.editModule.startEdit();\n }\n };\n /**\n * If Grid is in editable state, you can save a record by invoking endEdit.\n *\n * @returns {void}\n */\n Grid.prototype.endEdit = function () {\n if (this.editModule) {\n this.editModule.endEdit();\n }\n };\n /**\n * Cancels edited state.\n *\n * @returns {void}\n */\n Grid.prototype.closeEdit = function () {\n if (this.editModule) {\n this.editModule.closeEdit();\n }\n };\n /**\n * Adds a new record to the Grid. Without passing parameters, it adds empty rows.\n * > `editSettings.allowEditing` should be true.\n *\n * @param {Object} data - Defines the new add record data.\n * @param {number} index - Defines the row index to be added\n * @returns {void}\n */\n Grid.prototype.addRecord = function (data, index) {\n if (this.editModule) {\n this.editModule.addRecord(data, index);\n }\n };\n /**\n * Delete any visible row by TR element.\n *\n * @param {HTMLTableRowElement} tr - Defines the table row element.\n * @returns {void}\n */\n Grid.prototype.deleteRow = function (tr) {\n if (this.editModule) {\n this.editModule.deleteRow(tr);\n }\n };\n /**\n * Changes a particular cell into edited state based on the row index and field name provided in the `batch` mode.\n *\n * @param {number} index - Defines row index to edit a particular cell.\n * @param {string} field - Defines the field name of the column to perform batch edit.\n *\n * @returns {void}\n */\n Grid.prototype.editCell = function (index, field) {\n if (this.editModule) {\n this.editModule.editCell(index, field);\n }\n };\n /**\n * Saves the cell that is currently edited. It does not save the value to the DataSource.\n *\n * @returns {void}\n * {% codeBlock src='grid/saveCell/index.md' %}{% endcodeBlock %}\n */\n Grid.prototype.saveCell = function () {\n if (this.editModule) {\n this.editModule.saveCell();\n }\n };\n /**\n * To update the specified cell by given value without changing into edited state.\n *\n * @param {number} rowIndex Defines the row index.\n * @param {string} field Defines the column field.\n * @param {string | number | boolean | Date} value - Defines the value to be changed.\n *\n * @returns {void}\n */\n Grid.prototype.updateCell = function (rowIndex, field, value) {\n if (this.editModule) {\n this.editModule.updateCell(rowIndex, field, value);\n }\n };\n /**\n * To update the specified row by given values without changing into edited state.\n *\n * {% codeBlock src='grid/updateRow/index.md' %}{% endcodeBlock %}\n *\n * @param {number} index Defines the row index.\n * @param {Object} data Defines the data object to be updated.\n *\n * @returns {void}\n */\n Grid.prototype.updateRow = function (index, data) {\n if (this.editModule) {\n this.editModule.updateRow(index, data);\n }\n };\n /**\n * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.\n *\n * @returns {Object} Returns the batch changes\n */\n Grid.prototype.getBatchChanges = function () {\n if (this.editModule) {\n return this.editModule.getBatchChanges();\n }\n return {};\n };\n /**\n * Enables or disables ToolBar items.\n *\n * @param {string[]} items - Defines the collection of itemID of ToolBar items.\n * @param {boolean} isEnable - Defines the items to be enabled or disabled.\n *\n * @returns {void}\n */\n Grid.prototype.enableToolbarItems = function (items, isEnable) {\n if (this.toolbarModule) {\n this.toolbarModule.enableItems(items, isEnable);\n }\n };\n /**\n * Copy the selected rows or cells data into clipboard.\n *\n * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.\n * @returns {void}\n */\n Grid.prototype.copy = function (withHeader) {\n if (this.clipboardModule) {\n this.clipboardModule.copy(withHeader);\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.recalcIndentWidth = function () {\n var _this_1 = this;\n if (!this.getHeaderTable().querySelector('.e-emptycell')) {\n return;\n }\n if ((!this.groupSettings.columns.length && !this.isDetail() && !this.isRowDragable()) ||\n this.getHeaderTable().querySelector('.e-emptycell').getAttribute('indentRefreshed') ||\n !this.getContentTable()) {\n return;\n }\n var indentWidth = this.getHeaderTable().querySelector('.e-emptycell').parentElement.offsetWidth;\n var headerCol = [].slice.call(this.getHeaderTable().querySelector(literals.colGroup).childNodes);\n var contentCol = [].slice.call(this.getContentTable().querySelector(literals.colGroup).childNodes);\n var perPixel = indentWidth / 30;\n var i = this.getFrozenMode() === 'Right' ? this.groupSettings.columns.length + this.getColumns().length : 0;\n var parentOffset = this.element.offsetWidth;\n var applyWidth = function (index, width) {\n if (ispercentageWidth(_this_1)) {\n var newWidth = (width / parentOffset * 100).toFixed(1) + '%';\n headerCol[parseInt(index.toString(), 10)].style.width = newWidth;\n contentCol[parseInt(index.toString(), 10)].style.width = newWidth;\n }\n else {\n headerCol[parseInt(index.toString(), 10)].style.width = width + 'px';\n contentCol[parseInt(index.toString(), 10)].style.width = width + 'px';\n }\n _this_1.notify(events.columnWidthChanged, { index: index, width: width });\n };\n if (perPixel >= 1) {\n indentWidth = (30 / perPixel);\n }\n if (indentWidth < 1) {\n indentWidth = 1;\n }\n if (this.enableColumnVirtualization || this.isAutoGen || (this.columns.length === this.groupSettings.columns.length)) {\n indentWidth = 30;\n }\n while (i < this.groupSettings.columns.length) {\n applyWidth(i, indentWidth);\n i++;\n }\n if (this.isDetail()) {\n applyWidth(i, indentWidth);\n i++;\n }\n if (this.isRowDragable()) {\n applyWidth(i, indentWidth);\n }\n this.isAutoGen = false;\n this.getHeaderTable().querySelector('.e-emptycell').setAttribute('indentRefreshed', 'true');\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.resetIndentWidth = function () {\n if (this.isDestroyed) {\n return;\n }\n if (ispercentageWidth(this)) {\n this.getHeaderTable().querySelector('.e-emptycell').removeAttribute('indentRefreshed');\n this.widthService.setWidthToColumns();\n this.recalcIndentWidth();\n if (this.autoFit) {\n this.preventAdjustColumns();\n }\n }\n if ((this.width === 'auto' || typeof (this.width) === 'string' && this.width.indexOf('%') !== -1)\n && this.getColumns().filter(function (col) { return (!col.width || col.width === 'auto') && col.minWidth; }).length > 0) {\n var tgridWidth = this.widthService.getTableWidth(this.getColumns());\n this.widthService.setMinwidthBycalculation(tgridWidth);\n }\n if (this.isFrozenGrid() && this.enableColumnVirtualization && this.widthService) {\n this.widthService.refreshFrozenScrollbar();\n }\n if (this.allowTextWrap && this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n if (this.frozenRows && this.scrollModule) {\n this.scrollModule.resizeFrozenRowBorder();\n }\n };\n /**\n * @hidden\n * @returns {boolean} Returns isRowDragable\n */\n Grid.prototype.isRowDragable = function () {\n return this.allowRowDragAndDrop && !this.rowDropSettings.targetID;\n };\n /**\n * Changes the Grid column positions by field names.\n *\n * @param {string} fromFName - Defines the origin field name.\n * @param {string} toFName - Defines the destination field name.\n *\n * @returns {void}\n */\n Grid.prototype.reorderColumns = function (fromFName, toFName) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumns(fromFName, toFName);\n }\n };\n /**\n * Changes the Grid column positions by field index. If you invoke reorderColumnByIndex multiple times,\n * then you won't get the same results every time.\n *\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n *\n * @returns {void}\n */\n Grid.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumnByIndex(fromIndex, toIndex);\n }\n };\n /**\n * Changes the Grid column positions by field index. If you invoke reorderColumnByTargetIndex multiple times,\n * then you will get the same results every time.\n *\n * @param {string} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n *\n * @returns {void}\n */\n Grid.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumnByTargetIndex(fieldName, toIndex);\n }\n };\n /**\n * Changes the Grid Row position with given indexes.\n *\n * @param {number} fromIndexes - Defines the origin Indexes.\n * @param {number} toIndex - Defines the destination Index.\n *\n * @returns {void}\n */\n Grid.prototype.reorderRows = function (fromIndexes, toIndex) {\n if (this.rowDragAndDropModule) {\n this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex);\n }\n };\n /**\n * @param {ReturnType} e - Defines the Return type\n * @returns {void}\n * @hidden\n */\n Grid.prototype.refreshDataSource = function (e) {\n this.notify('refreshdataSource', e);\n };\n /**\n * @param {boolean} enable -Defines the enable\n * @returns {void}\n * @hidden\n */\n Grid.prototype.disableRowDD = function (enable) {\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n var headerRows = headerTable.querySelectorAll('th.e-rowdragheader, th.e-mastercell');\n var rows = this.getRows();\n var disValue = enable ? 'none' : '';\n setStyleAttribute(headerTable.querySelector(literals.colGroup).childNodes[0], { 'display': disValue });\n setStyleAttribute(contentTable.querySelector(literals.colGroup).childNodes[0], { 'display': disValue });\n for (var i = 0; i < this.getRows().length; i++) {\n var ele = rows[parseInt(i.toString(), 10)].firstElementChild;\n if (enable) {\n addClass([ele], 'e-hide');\n }\n else {\n removeClass([ele], ['e-hide']);\n }\n }\n for (var j = 0; j < headerTable.querySelectorAll('th.e-rowdragheader, th.e-mastercell').length; j++) {\n var ele = headerRows[parseInt(j.toString(), 10)];\n if (enable) {\n addClass([ele], 'e-hide');\n }\n else {\n removeClass([ele], ['e-hide']);\n }\n }\n };\n /**\n * Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.\n * > * This method ignores the hidden columns.\n * > * Uses the `autoFitColumns` method in the `dataBound` event to resize at initial rendering.\n * > * By specifying the start row index and end row index, providing the range within which the maximum width for that column should be considered when applying `autoFitColumns`.\n * > * The width of header rows is always calculated. If the width of a header row exceeds the specified range, its width will be allocated to the specific content rows.\n *\n * @param {string |string[]} fieldNames - Defines the column names.\n * @param {number} startRowIndex - Specifies the start index of the content row.\n * @param {number} endRowIndex - Specifies the end index of content row.\n * @returns {void}\n *\n *\n * ```typescript\n *
\n * \n * ```\n *\n */\n Grid.prototype.autoFitColumns = function (fieldNames, startRowIndex, endRowIndex) {\n var injectedModules = this.getInjectedModules();\n var resize = injectedModules.find(function (item) {\n if (typeof item === 'function' && !isNullOrUndefined(item.prototype)) {\n return item.prototype.getModuleName() === 'resize';\n }\n else {\n return item.name === 'Resize';\n }\n });\n if (!this.resizeModule && resize) {\n this.autoFitColumnsResize = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.injectModules();\n }\n if (this.resizeModule) {\n this.resizeModule.autoFitColumns(fieldNames, startRowIndex, endRowIndex);\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Grid.prototype.preventAdjustColumns = function () {\n if ((this.enableAdaptiveUI && this.rowRenderingMode === 'Vertical')\n || (this.allowResizing && this.resizeSettings.mode === 'Auto')) {\n return;\n }\n var columns = this.getColumns();\n var headerTable = this.getHeaderTable();\n var tableWidth = 0;\n for (var i = 0; i < columns.length; i++) {\n if (columns[parseInt(i.toString(), 10)].visible) {\n if (this.groupSettings.columns.length\n && this.groupSettings.columns.indexOf(columns[parseInt(i.toString(), 10)].field) > -1) {\n var headerCol = [].slice.call(headerTable.querySelector('colgroup')\n .querySelectorAll(':not(.e-group-intent):not(.e-detail-intent):not(.e-drag-intent)'));\n if (headerCol[parseInt(i.toString(), 10)].style.display === 'none') {\n continue;\n }\n }\n if (columns[parseInt(i.toString(), 10)].width) {\n tableWidth += parseFloat(columns[parseInt(i.toString(), 10)].width.toString());\n }\n else {\n tableWidth = 0;\n break;\n }\n }\n }\n if (tableWidth) {\n var percentageWidth = this.isPercentageWidthGrid();\n var unit = this.widthUnit(percentageWidth);\n var contentTable = this.getContentTable();\n if (this.groupSettings.columns.length || this.isDetail() || this.isRowDragable()) {\n var indentWidth = this.defaultIndentWidth(percentageWidth);\n var indentWidthUnitFormat = indentWidth.toString() + unit;\n var headerIndentCol = [].slice.call(headerTable.querySelector('colgroup')\n .querySelectorAll('.e-group-intent, .e-detail-intent, .e-drag-intent'));\n var contentIndentCol = [].slice.call(contentTable.querySelector('colgroup')\n .querySelectorAll('.e-group-intent, .e-detail-intent, .e-drag-intent'));\n for (var i = 0; i < headerIndentCol.length; i++) {\n headerIndentCol[parseInt(i.toString(), 10)].style.setProperty('width', indentWidthUnitFormat);\n contentIndentCol[parseInt(i.toString(), 10)].style.setProperty('width', indentWidthUnitFormat);\n tableWidth += indentWidth;\n }\n }\n if ((percentageWidth && tableWidth < 100)\n || (!percentageWidth && tableWidth < contentTable.parentElement.clientWidth)) {\n if (!isNullOrUndefined(contentTable.querySelector('.e-emptyrow'))) {\n addClass([headerTable], ['e-tableborder']);\n removeClass([contentTable], ['e-tableborder']);\n }\n else {\n addClass([headerTable, contentTable], ['e-tableborder']);\n }\n }\n var tableWidthUnitFormat = tableWidth.toString() + unit;\n headerTable.style.setProperty('width', tableWidthUnitFormat);\n contentTable.style.setProperty('width', tableWidthUnitFormat);\n }\n else {\n this.restoreAdjustColumns();\n }\n };\n Grid.prototype.restoreAdjustColumns = function () {\n if ((this.enableAdaptiveUI && this.rowRenderingMode === 'Vertical')\n || (this.allowResizing && this.resizeSettings.mode === 'Auto')) {\n return;\n }\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n removeClass([headerTable, contentTable], ['e-tableborder']);\n headerTable.style.removeProperty('width');\n contentTable.style.removeProperty('width');\n if (this.groupSettings.columns.length || this.isDetail() || this.isRowDragable()) {\n var percentageWidth = this.isPercentageWidthGrid();\n var indentWidthUnitFormat_1 = this.defaultIndentWidth(percentageWidth).toString() + this.widthUnit(percentageWidth);\n var headerIndentCol = [].slice.call(headerTable.querySelector('colgroup')\n .querySelectorAll('.e-group-intent, .e-detail-intent, .e-drag-intent'));\n headerIndentCol.forEach(function (element) {\n element.style.setProperty('width', indentWidthUnitFormat_1);\n });\n headerTable.querySelector('.e-emptycell').removeAttribute('indentRefreshed');\n this.recalcIndentWidth();\n }\n };\n Grid.prototype.widthUnit = function (percentageWidth) {\n return percentageWidth ? '%' : 'px';\n };\n Grid.prototype.defaultIndentWidth = function (percentageWidth) {\n return percentageWidth ? parseFloat((30 / this.element.offsetWidth * 100).toFixed(1)) : 30;\n };\n Grid.prototype.isPercentageWidthGrid = function () {\n return this.getColumns()[0].width.toString().indexOf('%') > -1;\n };\n /**\n * @param {number} x - Defines the number\n * @param {number} y - Defines the number\n * @param {Element} target - Defines the Element\n * @returns {void}\n * @hidden\n */\n Grid.prototype.createColumnchooser = function (x, y, target) {\n if (this.columnChooserModule) {\n this.columnChooserModule.renderColumnChooser(x, y, target);\n }\n };\n Grid.prototype.initializeServices = function () {\n this.serviceLocator.register('widthService', this.widthService = new ColumnWidthService(this));\n this.serviceLocator.register('cellRendererFactory', new CellRendererFactory);\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n this.serviceLocator.register('localization', this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale));\n this.serviceLocator.register('valueFormatter', this.valueFormatterService = new ValueFormatter(this.locale));\n this.serviceLocator.register('showHideService', this.showHider = new ShowHide(this));\n this.serviceLocator.register('ariaService', this.ariaService = new AriaService());\n this.serviceLocator.register('focus', this.focusModule = new FocusStrategy(this));\n };\n Grid.prototype.processModel = function () {\n var gCols = this.groupSettings.columns;\n var sCols = this.sortSettings.columns;\n var flag;\n var j;\n if (this.allowGrouping) {\n var _loop_3 = function (i, len) {\n j = 0;\n for (var sLen = sCols.length; j < sLen; j++) {\n if (sCols[parseInt(j.toString(), 10)].field === gCols[parseInt(i.toString(), 10)]) {\n flag = true;\n break;\n }\n }\n if (!flag) {\n sCols.push({ field: gCols[parseInt(i.toString(), 10)], direction: 'Ascending', isFromGroup: true });\n }\n else {\n if (this_3.allowSorting) {\n this_3.sortedColumns.push(sCols[parseInt(j.toString(), 10)].field);\n }\n else {\n sCols[parseInt(j.toString(), 10)].direction = 'Ascending';\n }\n }\n if (!this_3.groupSettings.showGroupedColumn) {\n var column = this_3.enableColumnVirtualization ?\n this_3.columns.filter(function (c) { return c.field === gCols[parseInt(i.toString(), 10)]; })[0]\n : this_3.getColumnByField(gCols[parseInt(i.toString(), 10)]);\n if (column) {\n column.visible = false;\n }\n else {\n this_3.log('initial_action', { moduleName: 'group', columnName: gCols[parseInt(i.toString(), 10)] });\n }\n }\n };\n var this_3 = this;\n for (var i = 0, len = gCols.length; i < len; i++) {\n _loop_3(i, len);\n }\n }\n if (!gCols.length) {\n for (var i = 0; i < sCols.length; i++) {\n this.sortedColumns.push(sCols[parseInt(i.toString(), 10)].field);\n }\n }\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n this.emptyRecordTemplateFn = templateCompiler(this.emptyRecordTemplate);\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n this.editTemplateFn = templateCompiler(this.editSettings.template);\n this.editHeaderTemplateFn = templateCompiler(this.editSettings.headerTemplate);\n this.editFooterTemplateFn = templateCompiler(this.editSettings.footerTemplate);\n if (!isNullOrUndefined(this.parentDetails)) {\n var value = isNullOrUndefined(this.parentDetails.parentKeyFieldValue) ? 'undefined' :\n this.parentDetails.parentKeyFieldValue;\n this.query.where(this.queryString, 'equal', value, true);\n }\n this.initForeignColumn();\n };\n Grid.prototype.initForeignColumn = function () {\n if (this.isForeignKeyEnabled(this.getColumns())) {\n this.notify(events.initForeignKeyColumn, this.getForeignKeyColumns());\n }\n };\n Grid.prototype.enableVerticalRendering = function () {\n if (this.rowRenderingMode === 'Vertical') {\n this.element.classList.add('e-row-responsive');\n }\n else {\n this.element.classList.remove('e-row-responsive');\n }\n };\n Grid.prototype.gridRender = function () {\n var _a;\n this.updateRTL();\n if (this.rowRenderingMode === 'Vertical') {\n this.element.classList.add('e-row-responsive');\n }\n if (this.enableHover) {\n this.element.classList.add('e-gridhover');\n }\n if (Browser.isDevice) {\n this.element.classList.add('e-device');\n }\n if (this.rowHeight) {\n this.element.classList.add('e-grid-min-height');\n }\n if (this.cssClass) {\n if (this.cssClass.indexOf(' ') !== -1) {\n (_a = this.element.classList).add.apply(_a, this.cssClass.split(' '));\n }\n else {\n this.element.classList.add(this.cssClass);\n }\n }\n // If the below if statement is removed, then drag and drop between grids will not work in firefox browser.\n if (this.allowRowDragAndDrop && this.rowDropSettings.targetID && Browser.info.name === 'mozilla') {\n this.element.classList.add('e-disableuserselect');\n }\n if (this.editSettings.showAddNewRow && (this.enableVirtualization || this.enableInfiniteScrolling)) {\n this.editSettings.newRowPosition = 'Top';\n }\n classList(this.element, ['e-responsive', 'e-default'], []);\n var rendererFactory = this.serviceLocator.getService('rendererFactory');\n this.headerModule = rendererFactory.getRenderer(RenderType.Header);\n this.contentModule = rendererFactory.getRenderer(RenderType.Content);\n this.printModule = new Print(this, this.scrollModule);\n this.clipboardModule = new Clipboard(this, this.serviceLocator);\n this.renderModule.render();\n this.eventInitializer();\n this.createGridPopUpElement();\n this.widthService.setWidthToColumns();\n this.updateGridLines();\n this.applyTextWrap();\n this.createTooltip(); //for clip mode ellipsis\n this.enableBoxSelection();\n };\n Grid.prototype.dataReady = function () {\n this.scrollModule.setWidth();\n this.scrollModule.setHeight();\n if (this.height !== 'auto') {\n this.scrollModule.setPadding();\n }\n };\n Grid.prototype.updateRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n Grid.prototype.createGridPopUpElement = function () {\n var popup = this.createElement('div', { className: 'e-gridpopup', styles: 'display:none;' });\n var content = this.createElement('div', { className: literals.content, attrs: { tabIndex: '-1' } });\n append([content, this.createElement('div', { className: 'e-uptail e-tail' })], popup);\n content.appendChild(this.createElement('span'));\n append([content, this.createElement('div', { className: 'e-downtail e-tail' })], popup);\n this.element.appendChild(popup);\n };\n Grid.prototype.updateGridLines = function () {\n classList(this.element, [], ['e-verticallines', 'e-horizontallines', 'e-hidelines', 'e-bothlines']);\n switch (this.gridLines) {\n case 'Horizontal':\n this.element.classList.add('e-horizontallines');\n break;\n case 'Vertical':\n this.element.classList.add('e-verticallines');\n break;\n case 'None':\n this.element.classList.add('e-hidelines');\n break;\n case 'Both':\n this.element.classList.add('e-bothlines');\n break;\n }\n this.updateResizeLines();\n };\n Grid.prototype.updateResizeLines = function () {\n if (this.allowResizing &&\n !(this.gridLines === 'Vertical' || this.gridLines === 'Both')) {\n this.element.classList.add('e-resize-lines');\n }\n else {\n this.element.classList.remove('e-resize-lines');\n }\n };\n /**\n * The function is used to apply text wrap\n *\n * @returns {void}\n * @hidden\n */\n Grid.prototype.applyTextWrap = function () {\n if (this.allowTextWrap) {\n var headerRows = [].slice.call(this.element.getElementsByClassName('e-columnheader'));\n switch (this.textWrapSettings.wrapMode) {\n case 'Header':\n wrap(this.element, false);\n wrap(this.getContent(), false);\n wrap(headerRows, true);\n break;\n case 'Content':\n wrap(this.getContent(), true);\n wrap(this.element, false);\n wrap(headerRows, false);\n break;\n default:\n wrap(this.element, true);\n wrap(this.getContent(), false);\n wrap(headerRows, false);\n }\n if (this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n }\n };\n /**\n * The function is used to remove text wrap\n *\n * @returns {void}\n * @hidden\n */\n Grid.prototype.removeTextWrap = function () {\n wrap(this.element, false);\n var headerRows = [].slice.call(this.element.getElementsByClassName('e-columnheader'));\n wrap(headerRows, false);\n wrap(this.getContent(), false);\n if (this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n };\n /**\n * The function is used to add Tooltip to the grid cell that has ellipsiswithtooltip clip mode.\n *\n * @returns {void}\n * @hidden\n */\n Grid.prototype.createTooltip = function () {\n this.toolTipObj = new Tooltip({\n opensOn: 'custom',\n content: '',\n cssClass: this.cssClass ? this.cssClass : null\n }, this.element);\n };\n /** @hidden\n * @returns {void}\n */\n Grid.prototype.freezeRefresh = function () {\n if (this.enableVirtualization || this.enableInfiniteScrolling) {\n this.pageSettings.currentPage = 1;\n }\n this.componentRefresh();\n };\n Grid.prototype.getTooltipStatus = function (element) {\n var headerTable = this.getHeaderTable();\n var headerDivTag = this.enableAdaptiveUI && this.rowRenderingMode === 'Vertical' ? 'e-gridcontent' : 'e-gridheader';\n var htable = this.createTable(headerTable, headerDivTag, 'header');\n var ctable = this.createTable(headerTable, headerDivTag, 'content');\n var table = element.classList.contains('e-headercell') ? htable : ctable;\n var ele = element.classList.contains('e-headercell') ? 'th' : 'tr';\n table.querySelector(ele).className = element.className;\n table.querySelector(ele).innerHTML = element.innerHTML;\n var width = table.querySelector(ele).getBoundingClientRect().width;\n document.body.removeChild(htable);\n document.body.removeChild(ctable);\n if ((width > element.getBoundingClientRect().width && !element.classList.contains('e-editedbatchcell')) ||\n (this.enableAdaptiveUI && this.rowRenderingMode === 'Vertical' &&\n width > (element.getBoundingClientRect().width * 0.55) - (this.height !== 'auto' ? 16 : 0))) {\n // 0.55 - defines the width of adaptive content cell, 16 - defines the scrollbar width\n return true;\n }\n return false;\n };\n Grid.prototype.mouseMoveHandler = function (e) {\n if (this.isEllipsisTooltip()) {\n var element = parentsUntil(e.target, 'e-ellipsistooltip');\n if (this.prevElement !== element || e.type === 'mouseout') {\n this.toolTipObj.close();\n }\n var tagName = e.target.tagName;\n var elemNames = ['A', 'BUTTON', 'INPUT'];\n if (element && e.type !== 'mouseout' && !(Browser.isDevice && elemNames.indexOf(tagName) !== -1)) {\n if (this.getTooltipStatus(element)) {\n var col = this.getColumns()[parseInt(element.getAttribute(literals.dataColIndex), 10)];\n var domSetter = col.disableHtmlEncode ? 'innerText' : 'innerHTML';\n var contentDiv = this.createElement('div');\n if (element.getElementsByClassName('e-headertext').length) {\n var innerElement = element.getElementsByClassName('e-headertext')[0];\n contentDiv[\"\" + domSetter] = this.sanitize(innerElement.innerText);\n this.toolTipObj.content = contentDiv;\n }\n else {\n contentDiv[\"\" + domSetter] = this.sanitize(element.innerText);\n this.toolTipObj.content = contentDiv;\n }\n this.prevElement = element;\n if (this.enableHtmlSanitizer) {\n this.toolTipObj.enableHtmlSanitizer = true;\n }\n if (col.disableHtmlEncode) {\n this.toolTipObj.enableHtmlParse = false;\n }\n this.toolTipObj['open'](element);\n }\n }\n }\n };\n Grid.prototype.isEllipsisTooltip = function () {\n var cols = this.getColumns();\n if (this.clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n }\n return false;\n };\n Grid.prototype.scrollHandler = function () {\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n };\n /**\n * To create table for ellipsiswithtooltip\n *\n * @param {Element} table - Defines the table\n * @param {string} tag - Defines the tag\n * @param {string} type - Defines the type\n * @returns {HTMLDivElement} Returns the HTML div ELement\n * @hidden\n */\n Grid.prototype.createTable = function (table, tag, type) {\n var myTableDiv = this.createElement('div');\n myTableDiv.className = this.element.className;\n myTableDiv.style.cssText = 'display: inline-block;visibility:hidden;position:absolute';\n var mySubDiv = this.createElement('div');\n mySubDiv.className = tag;\n var myTable = this.createElement('table');\n myTable.className = table.className;\n myTable.style.cssText = 'table-layout: auto;width: auto';\n var ele = (type === 'header') ? 'th' : 'td';\n var myTr = this.createElement('tr', { attrs: { role: 'row' } });\n var mytd = this.createElement(ele);\n myTr.appendChild(mytd);\n myTable.appendChild(myTr);\n mySubDiv.appendChild(myTable);\n myTableDiv.appendChild(mySubDiv);\n document.body.appendChild(myTableDiv);\n return myTableDiv;\n };\n Grid.prototype.onKeyPressed = function (e) {\n if (e.action === 'tab' || e.action === 'shiftTab') {\n this.toolTipObj.close();\n }\n };\n /**\n * Binding events to the element while component creation.\n *\n * @hidden\n * @returns {void}\n */\n Grid.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'touchend', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'dblclick', this.dblClickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyPressHandler, this);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.add(window, 'resize', this.resetIndentWidth, this);\n if (this.allowKeyboard) {\n this.element.tabIndex = this.element.tabIndex === -1 ? 0 : this.element.tabIndex;\n }\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n EventHandler.add(this.getContent().firstElementChild, 'scroll', this.scrollHandler, this);\n EventHandler.add(this.element, 'mouseover', this.mouseMoveHandler, this);\n EventHandler.add(this.element, 'mouseout', this.mouseMoveHandler, this);\n EventHandler.add(this.getContent(), 'touchstart', this.tapEvent, this);\n EventHandler.add(document.body, 'keydown', this.keyDownHandler, this);\n };\n /**\n * Unbinding events from the element while component destroy.\n *\n * @hidden\n * @returns {void}\n */\n Grid.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.mouseClickHandler);\n EventHandler.remove(this.element, 'touchend', this.mouseClickHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'dblclick', this.dblClickHandler);\n EventHandler.remove(this.getContent().firstElementChild, 'scroll', this.scrollHandler);\n EventHandler.remove(this.element, 'mouseover', this.mouseMoveHandler);\n EventHandler.remove(this.element, 'mouseout', this.mouseMoveHandler);\n EventHandler.remove(this.element, 'keydown', this.keyPressHandler);\n EventHandler.remove(this.getContent(), 'touchstart', this.tapEvent);\n EventHandler.remove(document.body, 'keydown', this.keyDownHandler);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.remove(window, 'resize', this.resetIndentWidth);\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.addListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.on(events.dataReady, this.dataReady, this);\n this.on(events.contentReady, this.recalcIndentWidth, this);\n this.on(events.headerRefreshed, this.recalcIndentWidth, this);\n this.on(events.refreshFrozenPosition, this.refreshFrozenPosition, this);\n this.on(events.refreshSplitFrozenColumn, this.refreshSplitFrozenColumn, this);\n this.dataBoundFunction = this.refreshMediaCol.bind(this);\n this.addEventListener(events.dataBound, this.dataBoundFunction);\n this.on(events.keyPressed, this.onKeyPressed, this);\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.removeListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.off(events.dataReady, this.dataReady);\n this.off(events.contentReady, this.recalcIndentWidth);\n this.off(events.headerRefreshed, this.recalcIndentWidth);\n this.on(events.refreshFrozenPosition, this.refreshFrozenPosition, this);\n this.on(events.refreshSplitFrozenColumn, this.refreshSplitFrozenColumn, this);\n this.removeEventListener(events.dataBound, this.dataBoundFunction);\n this.off(events.keyPressed, this.onKeyPressed);\n };\n /**\n * Get current visible data of grid.\n *\n * @returns {Object[]} Returns the current view records\n *\n * @isGenericType true\n */\n Grid.prototype.getCurrentViewRecords = function () {\n if (isGroupAdaptive(this)) {\n return isNullOrUndefined(this.currentViewData.records) ?\n this.currentViewData : this.currentViewData.records;\n }\n if (this.groupSettings.enableLazyLoading) {\n return this.currentViewData;\n }\n return (this.allowGrouping && this.groupSettings.columns.length && this.currentViewData.length\n && this.currentViewData.records) ? this.currentViewData.records\n : this.currentViewData;\n };\n Grid.prototype.mouseClickHandler = function (e) {\n if (this.isChildGrid(e) || (parentsUntil(e.target, 'e-gridpopup') && e.touches) ||\n this.element.getElementsByClassName('e-cloneproperties').length || this.checkEdit(e)) {\n return;\n }\n if (((!this.allowRowDragAndDrop && (parentsUntil(e.target, literals.gridContent) ||\n e.target.tagName === 'TD')) || (parentsUntil(e.target, 'e-headercell') &&\n parentsUntil(e.target, 'e-headercell').querySelector('.e-checkselectall')) ||\n (!(this.allowGrouping || this.allowReordering) && parentsUntil(e.target, 'e-gridheader'))) &&\n e.touches) {\n return;\n }\n if (parentsUntil(e.target, 'e-gridheader') && this.allowRowDragAndDrop &&\n !(parentsUntil(e.target, 'e-filterbarcell')) && (e.target &&\n ['A', 'BUTTON', 'INPUT'].indexOf(e.target.tagName) === -1)) {\n e.preventDefault();\n }\n var args = this.getRowInfo(e.target);\n var cancel = 'cancel';\n args[\"\" + cancel] = false;\n var isDataRow = false;\n var tr = closest(e.target, 'tr');\n if (tr && tr.getAttribute('data-uid')) {\n var rowObj = this.getRowObjectFromUID(tr.getAttribute('data-uid'));\n isDataRow = rowObj ? rowObj.isDataRow : false;\n }\n if (isDataRow) {\n this.trigger(events.recordClick, args);\n }\n this.notify(events.click, e);\n };\n Grid.prototype.checkEdit = function (e) {\n var tr = parentsUntil(e.target, literals.row);\n var isEdit = this.editSettings.mode !== 'Batch' &&\n this.isEdit && tr && (tr.classList.contains(literals.editedRow) || (tr.classList.contains(literals.addedRow)) &&\n !this.editSettings.showAddNewRow);\n return !parentsUntil(e.target, 'e-unboundcelldiv') && (isEdit || (parentsUntil(e.target, literals.rowCell) &&\n parentsUntil(e.target, literals.rowCell).classList.contains('e-editedbatchcell')));\n };\n Grid.prototype.dblClickHandler = function (e) {\n var grid = parentsUntil(e.target, 'e-grid');\n if (isNullOrUndefined(grid) || grid.id !== this.element.id || closest(e.target, '.e-unboundcelldiv')) {\n return;\n }\n var dataRow = false;\n var tr = closest(e.target, 'tr');\n if (tr && tr.getAttribute('data-uid')) {\n var rowObj = this.getRowObjectFromUID(tr.getAttribute('data-uid'));\n dataRow = rowObj ? rowObj.isDataRow : false;\n }\n var args = this.getRowInfo(e.target);\n args.target = e.target;\n if (dataRow) {\n this.trigger(events.recordDoubleClick, args);\n }\n this.notify(events.dblclick, e);\n };\n Grid.prototype.focusOutHandler = function (e) {\n if (this.isChildGrid(e)) {\n return;\n }\n if (!parentsUntil(e.target, 'e-grid')) {\n this.element.querySelector('.e-gridpopup').style.display = 'None';\n }\n var filterClear = this.element.querySelector('.e-cancel:not(.e-hide)');\n if (filterClear && !filterClear.parentElement.classList.contains('e-tbar-btn')) {\n filterClear.classList.add('e-hide');\n }\n var relatedTarget = e.relatedTarget;\n var ariaOwns = relatedTarget ? relatedTarget.getAttribute('aria-owns') : null;\n if ((!relatedTarget || (!parentsUntil(relatedTarget, 'e-grid') &&\n (!isNullOrUndefined(ariaOwns) &&\n (ariaOwns)) !== e.target.getAttribute('aria-owns')))\n && !this.keyPress && this.isEdit && !Browser.isDevice) {\n if (this.editSettings.mode === 'Batch' && !(((parentsUntil(relatedTarget, 'e-ddl') || parentsUntil(relatedTarget, 'e-ddt')) &&\n (parentsUntil(relatedTarget, 'e-multi-select-list-wrapper') || parentsUntil(relatedTarget, 'e-input-filter'))) &&\n parentsUntil(relatedTarget, 'e-input-group')) && (parentsUntil(relatedTarget, 'e-uploader') || !(relatedTarget &&\n isNullOrUndefined(parentsUntil(relatedTarget, 'e-input-group'))))) {\n this.editModule.saveCell();\n this.notify(events.editNextValCell, {});\n }\n if (this.editSettings.mode === 'Normal') {\n this.editModule.editFormValidate();\n }\n }\n if (this.editSettings.showAddNewRow) {\n this.editModule.isShowAddedRowValidate = false;\n }\n this.keyPress = false;\n };\n Grid.prototype.isChildGrid = function (e) {\n var gridElement = parentsUntil(e.target, 'e-grid');\n if ((gridElement && gridElement.id !== this.element.id) || (parentsUntil(e.target, 'e-unboundcelldiv') &&\n isNullOrUndefined(gridElement))) {\n return true;\n }\n return false;\n };\n /**\n * @param {Object} persistedData - Defines the persisted data\n * @returns {void}\n * @hidden\n */\n Grid.prototype.mergePersistGridData = function (persistedData) {\n var data = this.getLocalData();\n if (!(isNullOrUndefined(data) || (data === '')) || !isNullOrUndefined(persistedData)) {\n var dataObj = !isNullOrUndefined(persistedData) ? persistedData : JSON.parse(data);\n if (this.enableVirtualization && dataObj.pageSettings) {\n dataObj.pageSettings.currentPage = 1;\n }\n var keys = Object.keys(dataObj);\n this.isProtectedOnChange = true;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if ((typeof this[\"\" + key] === 'object') && !isNullOrUndefined(this[\"\" + key])) {\n if (Array.isArray(this[\"\" + key]) && key === 'columns') {\n this.setFrozenCount();\n setColumnIndex(this[\"\" + key]);\n this.mergeColumns(dataObj[\"\" + key], this[\"\" + key]);\n this.mergedColumns = true;\n this[\"\" + key] = dataObj[\"\" + key];\n }\n else {\n extend(this[\"\" + key], dataObj[\"\" + key]);\n }\n }\n else {\n this[\"\" + key] = dataObj[\"\" + key];\n }\n }\n this.isProtectedOnChange = false;\n }\n };\n Grid.prototype.mergeColumns = function (storedColumn, columns) {\n var storedColumns = storedColumn;\n var isFrozenGrid = this.isFrozenGrid();\n var _loop_4 = function (i) {\n var localCol = columns.filter(function (tCol) { return isFrozenGrid ?\n tCol.index === storedColumns[parseInt(i.toString(), 10)][\"\" + literals.initialFrozenColumnIndex] :\n tCol.index === storedColumns[parseInt(i.toString(), 10)].index; })[0];\n if (!isNullOrUndefined(localCol)) {\n if (isFrozenGrid) {\n localCol = extend({}, localCol, {}, true);\n localCol.freeze = storedColumns[parseInt(i.toString(), 10)].freeze;\n }\n if (localCol.columns && localCol.columns.length) {\n this_4.mergeColumns(storedColumns[parseInt(i.toString(), 10)].columns, localCol.columns);\n storedColumns[parseInt(i.toString(), 10)] = extend(localCol, storedColumns[parseInt(i.toString(), 10)], {}, true);\n }\n else {\n storedColumns[parseInt(i.toString(), 10)] = extend(localCol, storedColumns[parseInt(i.toString(), 10)], {}, true);\n }\n }\n };\n var this_4 = this;\n for (var i = 0; i < storedColumns.length; i++) {\n _loop_4(i);\n }\n };\n /**\n * @hidden\n * @returns {boolean} Returns the isDetail\n */\n Grid.prototype.isDetail = function () {\n return !isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.childGrid);\n };\n Grid.prototype.isCommandColumn = function (columns) {\n var _this_1 = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this_1.isCommandColumn(col.columns);\n }\n return !!(col.commands || col.commandsTemplate);\n });\n };\n Grid.prototype.isForeignKeyEnabled = function (columns) {\n var _this_1 = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this_1.isForeignKeyEnabled(col.columns);\n }\n return !!(col.dataSource && col.foreignKeyValue);\n });\n };\n Grid.prototype.keyPressHandler = function (e) {\n var presskey = extend(e, { cancel: false });\n this.trigger('keyPressed', presskey);\n if (presskey.cancel === true) {\n e.stopImmediatePropagation();\n }\n };\n Grid.prototype.keyDownHandler = function (e) {\n if (e.altKey) {\n if (e.keyCode === 74) { //alt j\n if (this.keyA) { //alt A J\n this.notify(events.groupCollapse, { target: e.target, collapse: false });\n this.keyA = false;\n }\n else {\n if (this.focusModule && this.focusModule.currentInfo && this.focusModule.currentInfo.element) {\n removeClass([this.focusModule.currentInfo.element, this.focusModule.currentInfo.elementToFocus], ['e-focused', 'e-focus']);\n this.focusModule.currentInfo.element.tabIndex = -1;\n }\n if (!this.element.classList.contains('e-childgrid')) {\n this.element.focus();\n }\n }\n }\n if (e.keyCode === 87) { //alt w\n var focusModule = this.focusModule;\n if (focusModule) {\n if (!this.currentViewData.length) {\n return;\n }\n focusModule.focusContent();\n focusModule.addOutline();\n }\n }\n if (e.keyCode === 65) { //alt A\n this.keyA = true;\n }\n if (e.keyCode === 72 && this.keyA) { //alt A H\n this.notify(events.groupCollapse, { target: e.target, collapse: true });\n this.keyA = false;\n }\n }\n if (e.keyCode === 13) {\n this.notify(events.enterKeyHandler, e);\n }\n };\n Grid.prototype.keyActionHandler = function (e) {\n if (this.isChildGrid(e) ||\n ((this.isEdit && (!this.editSettings.showAddNewRow || (this.editSettings.showAddNewRow &&\n this.element.querySelector(literals.editedRow)))) && e.action !== 'escape' && e.action !== 'enter'\n && e.action !== 'shiftEnter' && e.action !== 'tab' && e.action !== 'shiftTab')) {\n return;\n }\n else {\n this.keyPress = true;\n }\n if (this.allowKeyboard) {\n if (e.action === 'ctrlPlusP') {\n e.preventDefault();\n this.print();\n }\n this.notify(events.keyPressed, e);\n }\n };\n /**\n * @param {Function[]} modules - Defines the modules\n * @returns {void}\n * @hidden\n */\n Grid.prototype.setInjectedModules = function (modules) {\n this.injectedModules = modules;\n };\n Grid.prototype.updateColumnObject = function () {\n prepareColumns(this.columns, this.enableColumnVirtualization, this);\n setColumnIndex(this.columns);\n this.initForeignColumn();\n this.notify(events.autoCol, {});\n };\n Grid.prototype.refreshFrozenPosition = function (obj) {\n if (obj && obj.isModeChg) {\n this.refreshColumns();\n this.notify(events.refreshResizePosition, {});\n }\n else {\n this.refreshColumns();\n }\n };\n /**\n * Gets the foreign columns from Grid.\n *\n * @returns {Column[]} Returns Foreign key column\n */\n Grid.prototype.getForeignKeyColumns = function () {\n return this.getColumns().filter(function (col) {\n return col.isForeignColumn();\n });\n };\n /**\n * @hidden\n * @returns {number} Returns row height\n */\n Grid.prototype.getRowHeight = function () {\n return this.rowHeight ? this.rowHeight : getRowHeight(this.element);\n };\n /**\n * Refreshes the Grid column changes.\n *\n * @returns {void}\n */\n Grid.prototype.refreshColumns = function () {\n this.freezeColumnRefresh = true;\n this.setFrozenCount();\n this.updateFrozenColumnsWidth();\n if (this.isFrozenGrid()) {\n this.isPreventScrollEvent = true;\n }\n this.updateColumnObject();\n this.checkLockColumns(this.getColumns());\n this.refresh();\n if (this.isFrozenGrid() && this.enableColumnVirtualization) {\n var left = this.getContent().querySelector('.e-movablescrollbar').scrollLeft;\n this.getHeaderContent().querySelector('.' + literals.headerContent).scrollLeft = left;\n this.getContent().querySelector('.' + literals.content).scrollLeft = left;\n }\n };\n /**\n * Export Grid data to Excel file(.xlsx).\n *\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {Workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @returns {Promise} Returns the excelexport\n */\n Grid.prototype.excelExport = function (excelExportProperties, isMultipleExport, \n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n workbook, isBlob) {\n if (this.exportGrids && this.exportGrids.length) {\n var gridIds = this.exportGrids.slice();\n return this.exportMultipleExcelGrids(gridIds, excelExportProperties, isMultipleExport, workbook, isBlob);\n }\n else {\n return this.excelExportModule ?\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, false, isBlob) : null;\n }\n };\n /**\n * Export Grid data to CSV file.\n *\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {Workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @returns {Promise} Returns csv export\n */\n Grid.prototype.csvExport = function (excelExportProperties, \n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isMultipleExport, workbook, isBlob) {\n return this.excelExportModule ?\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, true, isBlob) : null;\n };\n /**\n * Export Grid data to PDF document.\n *\n * @param {pdfExportProperties} pdfExportProperties - Defines the export properties of the Grid.\n * @param {isMultipleExport} isMultipleExport - Define to enable multiple export.\n * @param {pdfDoc} pdfDoc - Defined the Pdf Document if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n *\n * @returns {Promise} Returns pdfexport\n */\n Grid.prototype.pdfExport = function (pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {\n if (this.exportGrids && this.exportGrids.length) {\n var gridIds = this.exportGrids.slice();\n return this.exportMultiplePdfGrids(gridIds, pdfExportProperties, isMultipleExport, pdfDoc, isBlob);\n }\n else {\n return this.pdfExportModule ? this.pdfExportModule.Map(this, pdfExportProperties, isMultipleExport, pdfDoc, isBlob) : null;\n }\n };\n Grid.prototype.exportMultiplePdfGrids = function (gridIds, pdfExportProperties, isMultipleExport, \n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n pdfDoc, isBlob) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var _this = this;\n if (gridIds.length !== 0) {\n var currentGridId = gridIds.shift();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var currentGridInstance = document.getElementById(currentGridId).ej2_instances[0];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var exportPromise = currentGridInstance.pdfExportModule ?\n currentGridInstance.pdfExportModule.Map(currentGridInstance, pdfExportProperties, isMultipleExport, pdfDoc, isBlob)\n : Promise.resolve();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return exportPromise.then(function (exportedGridResults) {\n isMultipleExport = gridIds.length === 1 ? false : true;\n return _this.exportMultiplePdfGrids(gridIds, pdfExportProperties, isMultipleExport, exportedGridResults, isBlob);\n });\n }\n return null;\n };\n Grid.prototype.exportMultipleExcelGrids = function (gridIds, excelExportProperties, isMultipleExport, \n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n workbook, isBlob) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var _this = this;\n if (gridIds.length !== 0) {\n var currentGridId = gridIds.shift();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var currentGridInstance = document.getElementById(currentGridId).ej2_instances[0];\n var exportPromise = currentGridInstance.excelExportModule ?\n currentGridInstance.excelExportModule.Map(currentGridInstance, excelExportProperties, isMultipleExport, workbook, false, isBlob) : null;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return exportPromise.then(function (exportedGridResults) {\n isMultipleExport = gridIds.length === 1 ? false : true;\n return _this.exportMultipleExcelGrids(gridIds, excelExportProperties, isMultipleExport, exportedGridResults, isBlob);\n });\n }\n return null;\n };\n /**\n * Groups a column by column name.\n *\n * @param {string} columnName - Defines the column name to group.\n *\n * @returns {void}\n */\n Grid.prototype.groupColumn = function (columnName) {\n if (this.groupModule) {\n this.groupModule.groupColumn(columnName);\n }\n };\n /**\n * Expands all the grouped rows of the Grid.\n *\n * @returns {void}\n */\n Grid.prototype.groupExpandAll = function () {\n if (this.groupModule) {\n this.groupModule.expandAll();\n }\n };\n /**\n * Collapses all the grouped rows of the Grid.\n *\n * @returns {void}\n */\n Grid.prototype.groupCollapseAll = function () {\n if (this.groupModule) {\n this.groupModule.collapseAll();\n }\n };\n /**\n * Expands or collapses grouped rows by target element.\n *\n * @param {Element} target - Defines the target element of the grouped row.\n * @returns {void}\n */\n // public expandCollapseRows(target: Element): void {\n // if (this.groupModule) {\n // this.groupModule.expandCollapseRows(target);\n // }\n // }\n /**\n * Clears all the grouped columns of the Grid.\n *\n * @returns {void}\n */\n Grid.prototype.clearGrouping = function () {\n if (this.groupModule) {\n this.groupModule.clearGrouping();\n }\n };\n /**\n * Ungroups a column by column name.\n *\n * {% codeBlock src='grid/ungroupColumn/index.md' %}{% endcodeBlock %}\n *\n * @param {string} columnName - Defines the column name to ungroup.\n *\n * @returns {void}\n */\n Grid.prototype.ungroupColumn = function (columnName) {\n if (this.groupModule) {\n this.groupModule.ungroupColumn(columnName);\n }\n };\n /**\n * Column chooser can be displayed on screen by given position(X and Y axis).\n *\n * @param {number} x - Defines the X axis.\n * @param {number} y - Defines the Y axis.\n *\n * @returns {void}\n */\n Grid.prototype.openColumnChooser = function (x, y) {\n if (this.columnChooserModule) {\n this.columnChooserModule.openColumnChooser(x, y);\n }\n };\n Grid.prototype.scrollRefresh = function () {\n var _this_1 = this;\n var refresh = function () {\n _this_1.scrollModule.refresh();\n _this_1.off(events.contentReady, refresh);\n };\n this.on(events.contentReady, refresh, this);\n };\n /**\n * Collapses a detail row with the given target.\n *\n * @param {Element} target - Defines the expanded element to collapse.\n * @returns {void}\n */\n // public detailCollapse(target: number | Element): void {\n // if (this.detailRowModule) {\n // this.detailRowModule.collapse(target);\n // }\n // }\n /**\n * Collapses all the detail rows of the Grid.\n *\n * @returns {void}\n */\n Grid.prototype.detailCollapseAll = function () {\n if (this.detailRowModule) {\n this.detailRowModule.collapseAll();\n }\n };\n /**\n * Expands a detail row with the given target.\n *\n * @param {Element} target - Defines the collapsed element to expand.\n * @returns {void}\n */\n // public detailExpand(target: number | Element): void {\n // if (this.detailRowModule) {\n // this.detailRowModule.expand(target);\n // }\n // }\n /**\n * Expands all the detail rows of the Grid.\n *\n * @returns {void}\n */\n Grid.prototype.detailExpandAll = function () {\n if (this.detailRowModule) {\n this.detailRowModule.expandAll();\n }\n };\n /**\n * Deselects the currently selected cells.\n *\n * @returns {void}\n */\n Grid.prototype.clearCellSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearCellSelection();\n }\n };\n /**\n * Deselects the currently selected rows.\n *\n * @returns {void}\n */\n Grid.prototype.clearRowSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearRowSelection();\n }\n };\n /**\n * Selects a collection of cells by row and column indexes.\n *\n * @param {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.\n *\n * @returns {void}\n */\n Grid.prototype.selectCells = function (rowCellIndexes) {\n if (this.selectionModule) {\n this.selectionModule.selectCells(rowCellIndexes);\n }\n };\n /**\n * Selects a range of rows from start and end row indexes.\n *\n * @param {number} startIndex - Specifies the start row index.\n * @param {number} endIndex - Specifies the end row index.\n *\n * @returns {void}\n */\n Grid.prototype.selectRowsByRange = function (startIndex, endIndex) {\n if (this.selectionModule) {\n this.selectionModule.selectRowsByRange(startIndex, endIndex);\n }\n };\n /**\n * @hidden\n * @returns {boolean} Returns whether context menu is open or not\n */\n Grid.prototype.isContextMenuOpen = function () {\n return this.contextMenuModule && this.contextMenuModule.isOpen;\n };\n /**\n * @param {Function} module - Defines the module\n * @returns {boolean} return the injected modules\n * @hidden\n */\n Grid.prototype.ensureModuleInjected = function (module) {\n return this.getInjectedModules().indexOf(module) >= 0;\n };\n /**\n * Destroys the given template reference.\n *\n * @param {string[]} propertyNames - Defines the collection of template name.\n * @param {any} index - specifies the index\n *\n * @returns {void}\n */\n // eslint-disable-next-line\n Grid.prototype.destroyTemplate = function (propertyNames, index) {\n this.clearTemplate(propertyNames, index);\n };\n /**\n * @param {string | string[]} type - Defines the type\n * @param {Object} args - Defines the arguments\n * @returns {void}\n * @hidden\n * @private\n */\n Grid.prototype.log = function (type, args) {\n var injectedModules = this.getInjectedModules();\n var logger = injectedModules.find(function (item) { return item.name === 'Logger'; });\n if (!logger) {\n Grid_1.Inject(Logger);\n this.enableLogger = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.injectModules();\n }\n // eslint-disable-next-line\n this.loggerModule ? this.loggerModule.log(type, args) : (function () { return 0; })();\n };\n /**\n * @param {Element} element - Defines the element\n * @returns {void}\n * @hidden\n */\n Grid.prototype.applyBiggerTheme = function (element) {\n if (this.element.classList.contains('e-bigger')) {\n element.classList.add('e-bigger');\n }\n };\n /**\n * @hidden\n * @returns {Object} Returns the previous row data\n */\n Grid.prototype.getPreviousRowData = function () {\n var previousRowData = this.getRowsObject()[this.getRows().length - 1].data;\n return previousRowData;\n };\n /**\n * Hides the scrollbar placeholder of Grid content when grid content is not overflown.\n *\n * @returns {void}\n */\n Grid.prototype.hideScroll = function () {\n var content = this.getContent().querySelector('.' + literals.content);\n if (content.scrollHeight <= content.clientHeight) {\n this.scrollModule.removePadding();\n content.style.overflowY = 'auto';\n }\n };\n /**\n * Get row index by primary key or row data.\n *\n * @param {string | Object} value - Defines the primary key value.\n *\n * @returns {number} Returns the index\n */\n Grid.prototype.getRowIndexByPrimaryKey = function (value) {\n var pkName = this.getPrimaryKeyFieldNames()[0];\n value = typeof value === 'object' ? value[\"\" + pkName] : value;\n var rows = this.getRowsObject();\n for (var i = 0; i < rows.length; i++) {\n if (rows[parseInt(i.toString(), 10)].isDetailRow || rows[parseInt(i.toString(), 10)].isCaptionRow) {\n continue;\n }\n var pKvalue = rows[parseInt(i.toString(), 10)].data[\"\" + pkName];\n if (pkName.split('.').length > 1) {\n pKvalue = performComplexDataOperation(pkName, rows[parseInt(i.toString(), 10)].data);\n }\n if (pKvalue === value) {\n return rows[parseInt(i.toString(), 10)].index;\n }\n }\n return -1;\n };\n /**\n * @param {string} field - Defines the field name\n * @param {boolean} isForeignKey - Defines the foreign key\n * @returns {Column} returns the column\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n Grid.prototype.grabColumnByFieldFromAllCols = function (field, isForeignKey) {\n var column;\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n var gCols = this.columnModel;\n for (var i = 0; i < gCols.length; i++) {\n if ((!isForeignKey && field === gCols[parseInt(i.toString(), 10)].field) ||\n (isForeignKey && gCols[parseInt(i.toString(), 10)].isForeignColumn() &&\n field === gCols[parseInt(i.toString(), 10)].foreignKeyValue)) {\n column = gCols[parseInt(i.toString(), 10)];\n break;\n }\n }\n return column;\n };\n /**\n * @param {string} uid - Defines the uid\n * @returns {Column} returns the column\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n Grid.prototype.grabColumnByUidFromAllCols = function (uid) {\n var column;\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n var gCols = this.columnModel;\n for (var i = 0; i < gCols.length; i++) {\n if (uid === gCols[parseInt(i.toString(), 10)].uid) {\n column = gCols[parseInt(i.toString(), 10)];\n }\n }\n return column;\n };\n /**\n * Get all filtered records from the Grid and it returns array of objects for the local dataSource, returns a promise object if the Grid has remote data.\n *\n * @returns {Object[] | Promise} Returns the filtered records\n */\n Grid.prototype.getFilteredRecords = function () {\n if ((this.allowFiltering && this.filterSettings.columns.length) || this.searchSettings.key.length) {\n var query = this.renderModule.data.generateQuery(true);\n if (this.dataSource && this.renderModule.data.isRemote() && this.dataSource instanceof DataManager) {\n return this.renderModule.data.getData(this.dataSource, query);\n }\n else {\n if (this.dataSource instanceof DataManager) {\n return this.dataSource.executeLocal(query);\n }\n else {\n return new DataManager(this.dataSource, query).executeLocal(query);\n }\n }\n }\n return [];\n };\n Grid.prototype.getUserAgent = function () {\n var userAgent = Browser.userAgent.toLowerCase();\n return /iphone|ipod|ipad|macintosh/.test(userAgent);\n };\n /**\n * @param {TouchEventArgs} e - Defines the TouchEventArgs\n * @returns {void}\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n // eslint-disable-next-line\n Grid.prototype.tapEvent = function (e) {\n if (this.getUserAgent()) {\n if (!Global.timer) {\n Global.timer = setTimeout(function () {\n Global.timer = null;\n }, 300);\n }\n else {\n clearTimeout(Global.timer);\n Global.timer = null;\n this.dblClickHandler(e);\n this.notify(events.doubleTap, e);\n }\n }\n };\n /**\n * @param {string} prefix - specifies the prefix\n * @returns {string} returns the row uid\n * @hidden\n */\n Grid.prototype.getRowUid = function (prefix) {\n return \"\" + prefix + this.rowUid++;\n };\n /**\n * @param {string} uid - specifies the uid\n * @returns {Element} returns the element\n * @hidden\n */\n Grid.prototype.getRowElementByUID = function (uid) {\n var rowEle;\n var rows = [];\n var cntRows = [].slice.call(this.getContent().querySelector(literals.tbody).children);\n if (this.frozenRows) {\n rows = [].slice.call(this.getHeaderContent().querySelector(literals.tbody).children);\n rows = rows.concat(cntRows);\n }\n else {\n rows = cntRows;\n }\n for (var _i = 0, rows_2 = rows; _i < rows_2.length; _i++) {\n var row = rows_2[_i];\n if (row.getAttribute('data-uid') === uid) {\n rowEle = row;\n break;\n }\n }\n return rowEle;\n };\n /**\n * Gets the hidden columns from the Grid.\n *\n * @returns {Column[]} Returns the Column\n */\n Grid.prototype.getHiddenColumns = function () {\n var cols = [];\n for (var _i = 0, _a = this.columnModel; _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.visible === false) {\n cols.push(col);\n }\n }\n return cols;\n };\n /**\n * Calculates the page size by parent element height\n *\n * @param {number | string } containerHeight - specifies the container height\n * @returns {number} returns the page size\n */\n Grid.prototype.calculatePageSizeByParentHeight = function (containerHeight) {\n if (this.allowPaging) {\n if ((this.allowTextWrap && this.textWrapSettings.wrapMode === 'Header') || (!this.allowTextWrap)) {\n var pagesize = 0;\n if (containerHeight.indexOf('%') !== -1) {\n containerHeight = parseInt(containerHeight, 10) / 100 * this.element.clientHeight;\n }\n var nonContentHeight = this.getNoncontentHeight() + this.getRowHeight();\n if (containerHeight > nonContentHeight) {\n var contentHeight = 0;\n contentHeight = containerHeight - this.getNoncontentHeight();\n pagesize = (contentHeight / this.getRowHeight());\n }\n if (pagesize > 0) {\n return Math.floor(pagesize);\n }\n }\n }\n return 0;\n };\n Grid.prototype.getNoncontentHeight = function () {\n var height = 0;\n if (!isNullOrUndefined(this.getHeaderContent().clientHeight)) {\n height += this.getHeaderContent().clientHeight;\n }\n if (this.toolbar && !isNullOrUndefined(this.element.querySelector('.e-toolbar').clientHeight)) {\n height += this.element.querySelector('.e-toolbar').clientHeight;\n }\n if (this.allowPaging && !isNullOrUndefined(this.element.querySelector('.e-gridpager').clientHeight)) {\n height += this.element.querySelector('.e-gridpager').clientHeight;\n }\n if (this.showColumnChooser && !isNullOrUndefined(this.element.querySelector('.e-columnheader').clientHeight)) {\n height += this.element.querySelector('.e-columnheader').clientHeight;\n }\n if (this.allowGrouping && this.groupSettings.showDropArea && !isNullOrUndefined(this.element.querySelector('.e-groupdroparea').clientHeight)) {\n height += this.element.querySelector('.e-groupdroparea').clientHeight;\n }\n if (this.aggregates.length > 0 && !isNullOrUndefined(this.element.querySelector('.e-summaryrow').clientHeight)) {\n for (var i = 0; i < this.element.getElementsByClassName('e-summaryrow').length; i++) {\n height += this.element.getElementsByClassName('e-summaryrow')[parseInt(i.toString(), 10)].clientHeight;\n }\n }\n return height;\n };\n /**\n *To perform aggregate operation on a column.\n *\n * @param {AggregateColumnModel} summaryCol - Pass Aggregate Column details.\n * @param {Object} summaryData - Pass JSON Array for which its field values to be calculated.\n *\n * @returns {number} returns the summary values\n */\n Grid.prototype.getSummaryValues = function (summaryCol, summaryData) {\n return DataUtil.aggregates[summaryCol.type.toLowerCase()](summaryData, summaryCol.field);\n };\n /**\n * Sends a Post request to export Grid to Excel file in server side.\n *\n * @param {string} url - Pass Url for server side excel export action.\n *\n * @returns {void}\n */\n Grid.prototype.serverExcelExport = function (url) {\n this.isExcel = true;\n this.exportGrid(url);\n };\n /**\n * Sends a Post request to export Grid to Pdf file in server side.\n *\n * @param {string} url - Pass Url for server side pdf export action.\n *\n * @returns {void}\n */\n Grid.prototype.serverPdfExport = function (url) {\n this.isExcel = false;\n this.exportGrid(url);\n };\n /**\n * Sends a Post request to export Grid to CSV file in server side.\n *\n * @param {string} url - Pass Url for server side pdf export action.\n *\n * @returns {void}\n */\n Grid.prototype.serverCsvExport = function (url) {\n this.isExcel = true;\n this.exportGrid(url);\n };\n /**\n * @param {string} url - Defines exporting url\n * @returns {void}\n * @hidden\n */\n Grid.prototype.exportGrid = function (url) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var grid = this;\n var query = grid.getDataModule().generateQuery(true);\n var state = new UrlAdaptor().processQuery(new DataManager({ url: '' }), query);\n var queries = JSON.parse(state.data);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var gridModel = JSON.parse(this.addOnPersist(['allowGrouping', 'allowPaging', 'pageSettings', 'sortSettings', 'allowPdfExport', 'allowExcelExport', 'aggregates',\n 'filterSettings', 'groupSettings', 'columns', 'locale', 'searchSettings']));\n var include = ['field', 'headerText', 'type', 'format', 'visible', 'foreignKeyValue', 'foreignKeyField',\n 'template', 'index', 'width', 'textAlign', 'headerTextAlign', 'columns'];\n gridModel.filterSettings.columns = queries.where;\n gridModel.searchSettings.fields = queries.search && queries.search[0]['fields'] || [];\n gridModel.sortSettings.columns = queries.sorted;\n gridModel.columns = this.setHeaderText(gridModel.columns, include);\n var form = this.createElement('form', { id: 'ExportForm', styles: 'display:none;' });\n var gridInput = this.createElement('input', { id: 'gridInput', attrs: { name: 'gridModel' } });\n gridInput.value = JSON.stringify(gridModel);\n form.method = 'POST';\n form.action = url;\n form.appendChild(gridInput);\n document.body.appendChild(form);\n form.submit();\n form.remove();\n };\n /**\n * @param {Column[]} columns - Defines array of columns\n * @param {string[]} include - Defines array of sting\n * @returns {Column[]} returns array of columns\n * @hidden\n */\n Grid.prototype.setHeaderText = function (columns, include) {\n for (var i = 0; i < columns.length; i++) {\n var column = this.getColumnByUid(columns[parseInt(i.toString(), 10)].uid);\n columns[parseInt(i.toString(), 10)].headerText = column.headerText;\n if (!isNullOrUndefined(column.template)) {\n columns[parseInt(i.toString(), 10)].template = 'true';\n }\n if (columns[parseInt(i.toString(), 10)].format) {\n columns[parseInt(i.toString(), 10)].format = getNumberFormat(this.getFormat(columns[parseInt(i.toString(), 10)].format), columns[parseInt(i.toString(), 10)].type, this.isExcel, defaultCurrencyCode);\n }\n if (columns[parseInt(i.toString(), 10)].columns) {\n this.setHeaderText(columns[parseInt(i.toString(), 10)].columns, include);\n }\n var keys = Object.keys(columns[parseInt(i.toString(), 10)]);\n for (var j = 0; j < keys.length; j++) {\n if (include.indexOf(keys[parseInt(j.toString(), 10)]) < 0) {\n delete columns[parseInt(i.toString(), 10)][keys[parseInt(j.toString(), 10)]];\n }\n }\n }\n return columns;\n };\n Grid.prototype.getFormat = function (format) {\n return typeof (format) === 'object' ? !isNullOrUndefined(format.format) ?\n format.format : format.skeleton : format;\n };\n /**\n * @hidden\n * @returns {boolean} returns the isCollapseStateEnabled\n */\n Grid.prototype.isCollapseStateEnabled = function () {\n var isExpanded = 'isExpanded';\n return this[\"\" + isExpanded] === false;\n };\n /**\n * @param {number} key - Defines the primary key value.\n * @param {Object} rowData - Defines the rowData\n * @returns {void}\n */\n Grid.prototype.updateRowValue = function (key, rowData) {\n var args = {\n requestType: 'save', data: rowData\n };\n this.showSpinner();\n this.notify(events.updateData, args);\n this.refresh();\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.setForeignKeyData = function () {\n this.dataBind();\n var colpending = this.getDataModule().getForeignKeyDataState();\n if (colpending.isPending) {\n this.getDataModule().setForeignKeyDataState({});\n colpending.resolver();\n }\n else {\n this.getDataModule().setForeignKeyDataState({ isDataChanged: false });\n if (this.contentModule || this.headerModule) {\n this.renderModule.render();\n }\n }\n };\n /**\n * @param {string} field - specifies the field\n * @returns {void}\n * @hidden\n */\n Grid.prototype.resetFilterDlgPosition = function (field) {\n var header = this.getColumnHeaderByField(field);\n if (header) {\n var target = header.querySelector('.e-filtermenudiv');\n var filterDlg = this.element.querySelector('.e-filter-popup');\n if (target && filterDlg) {\n var gClient = this.element.getBoundingClientRect();\n var fClient = target.getBoundingClientRect();\n if (filterDlg) {\n if ((filterDlg.offsetWidth + fClient.right) > gClient.right) {\n filterDlg.style.left = ((fClient.right - filterDlg.offsetWidth) - gClient.left).toString() + 'px';\n }\n else {\n filterDlg.style.left = (fClient.right - gClient.left).toString() + 'px';\n }\n }\n }\n }\n };\n /**\n * @param {any} callBack - specifies the callBack method\n * @returns {void}\n * @hidden\n */\n // eslint-disable-next-line\n Grid.prototype.renderTemplates = function (callBack) {\n var isReactChild = this.parentDetails && this.parentDetails.parentInstObj && this.parentDetails.parentInstObj.isReact;\n if (isReactChild && this['portals']) {\n this.parentDetails.parentInstObj['portals'] = this.parentDetails.parentInstObj['portals']\n .concat(this['portals']);\n this.parentDetails.parentInstObj.renderTemplates(callBack);\n this['portals'] = undefined;\n }\n else {\n var portals = 'portals';\n this.notify('reactTemplateRender', this[\"\" + portals]);\n this.renderReactTemplates(callBack);\n }\n };\n /**\n * Apply the changes to the Grid without refreshing the rows.\n *\n * @param {BatchChanges} changes - Defines changes to be updated.\n * @returns {void}\n */\n Grid.prototype.batchUpdate = function (changes) {\n this.processRowChanges(changes);\n };\n /**\n * Apply the changes to the Grid in one batch after 50ms without refreshing the rows.\n *\n * @param {BatchChanges} changes - Defines changes to be updated.\n * @returns {void}\n */\n Grid.prototype.batchAsyncUpdate = function (changes) {\n this.processBulkRowChanges(changes);\n };\n Grid.prototype.processBulkRowChanges = function (changes) {\n var _this_1 = this;\n if (!this.dataToBeUpdated) {\n this.dataToBeUpdated = Object.assign({ addedRecords: [], changedRecords: [], deletedRecords: [] }, changes);\n setTimeout(function () {\n _this_1.processRowChanges(_this_1.dataToBeUpdated);\n _this_1.dataToBeUpdated = null;\n }, this.asyncTimeOut);\n }\n else {\n var loopstring = [literals.addedRecords, literals.changedRecords, literals.deletedRecords];\n var keyField = this.getPrimaryKeyFieldNames()[0];\n for (var i = 0; i < loopstring.length; i++) {\n if (changes[loopstring[parseInt(i.toString(), 10)]]) {\n compareChanges(this, changes, loopstring[parseInt(i.toString(), 10)], keyField);\n }\n }\n }\n };\n Grid.prototype.processRowChanges = function (changes) {\n var _this_1 = this;\n var keyField = this.getPrimaryKeyFieldNames()[0];\n changes = Object.assign({ addedRecords: [], changedRecords: [], deletedRecords: [] }, changes);\n var promise = this.getDataModule().saveChanges(changes, keyField, {}, this.getDataModule().generateQuery().requiresCount());\n if (this.getDataModule().isRemote()) {\n promise.then(function () {\n _this_1.setNewData();\n });\n }\n else {\n this.setNewData();\n }\n };\n Grid.prototype.setNewData = function () {\n var _this_1 = this;\n var oldValues = JSON.parse(JSON.stringify(this.getCurrentViewRecords()));\n var getData = this.getDataModule().getData({}, this.getDataModule().generateQuery().requiresCount());\n getData.then(function (e) {\n _this_1.bulkRefresh(e.result, oldValues, e.count);\n });\n };\n Grid.prototype.deleteRowElement = function (row) {\n var tr = this.getRowElementByUID(row.uid);\n remove(tr);\n };\n Grid.prototype.bulkRefresh = function (result, oldValues, count) {\n var _this_1 = this;\n var rowObj = this.getRowsObject();\n var keyField = this.getPrimaryKeyFieldNames()[0];\n var _loop_5 = function (i) {\n if (!result.filter(function (e) { return e[\"\" + keyField] === rowObj[parseInt(i.toString(), 10)].data[\"\" + keyField]; }).length) {\n this_5.deleteRowElement(rowObj[parseInt(i.toString(), 10)]);\n rowObj.splice(i, 1);\n i--;\n }\n out_i_1 = i;\n };\n var this_5 = this, out_i_1;\n for (var i = 0; i < rowObj.length; i++) {\n _loop_5(i);\n i = out_i_1;\n }\n var _loop_6 = function (i) {\n var isRowExist;\n oldValues.filter(function (e) {\n if (e[\"\" + keyField] === result[parseInt(i.toString(), 10)][\"\" + keyField]) {\n if (e !== result[parseInt(i.toString(), 10)]) {\n _this_1.setRowData(result[parseInt(i.toString(), 10)][\"\" + keyField], result[parseInt(i.toString(), 10)]);\n }\n isRowExist = true;\n }\n });\n if (!isRowExist) {\n this_6.renderRowElement(result[parseInt(i.toString(), 10)], i);\n }\n };\n var this_6 = this;\n for (var i = 0; i < result.length; i++) {\n _loop_6(i);\n }\n this.currentViewData = result;\n var rows = [].slice.call(this.getContentTable().getElementsByClassName(literals.row));\n resetRowIndex(this, this.getRowsObject(), rows);\n setRowElements(this);\n if (this.allowPaging) {\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: { totalRecordsCount: count } });\n }\n };\n Grid.prototype.renderRowElement = function (data, index) {\n var row = new RowRenderer(this.serviceLocator, null, this);\n var model = new RowModelGenerator(this);\n var modelData = model.generateRows([data]);\n var tr = row.render(modelData[0], this.getColumns());\n this.addRowObject(modelData[0], index);\n var tbody = this.getContentTable().querySelector(literals.tbody);\n if (tbody.querySelector('.e-emptyrow')) {\n var emptyRow = tbody.querySelector('.e-emptyrow');\n emptyRow.parentNode.removeChild(emptyRow);\n if (this.frozenRows && this.element.querySelector('.e-frozenrow-empty')) {\n this.element.querySelector('.e-frozenrow-empty').classList.remove('e-frozenrow-empty');\n }\n }\n if (this.frozenRows && index < this.frozenRows) {\n tbody = this.getHeaderContent().querySelector(literals.tbody);\n }\n else {\n tbody = this.getContent().querySelector(literals.tbody);\n }\n tbody = this.getContent().querySelector(literals.tbody);\n tbody.appendChild(tr);\n };\n Grid.prototype.addRowObject = function (row, index) {\n this.getRowsObject().splice(index, 1, row);\n };\n /**\n * @hidden\n * @returns {void}\n */\n Grid.prototype.updateVisibleExpandCollapseRows = function () {\n var rows = this.getRowsObject();\n for (var i = 0, len = rows.length; i < len; i++) {\n if ((rows[parseInt(i.toString(), 10)].isDataRow || rows[parseInt(i.toString(), 10)].isAggregateRow)\n && this.getRowElementByUID(rows[parseInt(i.toString(), 10)].uid).style.display === 'none') {\n rows[parseInt(i.toString(), 10)].visible = false;\n }\n else {\n rows[parseInt(i.toString(), 10)].visible = true;\n }\n }\n };\n /**\n * Method to sanitize any suspected untrusted strings and scripts before rendering them.\n *\n * @param {string} value - Specifies the html value to sanitize\n * @returns {string} Returns the sanitized html string\n * @hidden\n */\n Grid.prototype.sanitize = function (value) {\n if (this.enableHtmlSanitizer) {\n return SanitizeHtmlHelper.sanitize(value);\n }\n return value;\n };\n /**\n * @param {string | number} height - specifies the height\n * @returns {number | string} - specifies the height number\n * @hidden\n */\n Grid.prototype.getHeight = function (height) {\n if (!Number.isInteger(height) && height.indexOf('%') !== -1) {\n height = parseInt(height, 10) / 100 * this.element.clientHeight;\n }\n else if (!Number.isInteger(height) && this.height !== 'auto') {\n height = parseInt(height, 10);\n }\n else {\n height = this.height;\n }\n return height;\n };\n /**\n * @hidden\n * @returns {Element} - returns frozen right content\n * @deprecated This method is deprecated. Use `getContent()` method instead.\n */\n Grid.prototype.getFrozenRightContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * @hidden\n * @returns {Element} - returns frozen right header\n * @deprecated This method is deprecated. Use `getHeaderContent()` method instead.\n */\n Grid.prototype.getFrozenRightHeader = function () {\n return this.headerModule.getPanel();\n };\n /**\n * @hidden\n * @returns {Element} - returns movable header tbody\n * @deprecated This method is deprecated. Use `getHeaderContent().querySelector('tbody')` method instead.\n */\n Grid.prototype.getMovableHeaderTbody = function () {\n return this.getHeaderContent().querySelector(literals.tbody);\n };\n /**\n * @hidden\n * @returns {Element} - returns movable content tbody\n * @deprecated This method is deprecated. Use `getContent().querySelector('tbody')` method instead.\n */\n Grid.prototype.getMovableContentTbody = function () {\n return this.getContent().querySelector(literals.tbody);\n };\n /**\n * @hidden\n * @returns {Element} - returns frozen header tbody\n * @deprecated This method is deprecated. Use `getHeaderContent().querySelector('tbody')` method instead.\n */\n Grid.prototype.getFrozenHeaderTbody = function () {\n return this.getHeaderContent().querySelector(literals.tbody);\n };\n /**\n * @hidden\n * @returns {Element} - returns frozen left content tbody\n * @deprecated This method is deprecated. Use `getContent().querySelector('tbody')` method instead.\n */\n Grid.prototype.getFrozenLeftContentTbody = function () {\n return this.getContent().querySelector(literals.tbody);\n };\n /**\n * @hidden\n * @returns {Element} - returns frozen right header tbody\n * @deprecated This method is deprecated. Use `getHeaderContent().querySelector('tbody')` method instead.\n */\n Grid.prototype.getFrozenRightHeaderTbody = function () {\n return this.getHeaderContent().querySelector(literals.tbody);\n };\n /**\n * @returns {Element} returns frozen right content tbody\n * @deprecated This method is deprecated. Use `getContent().querySelector('tbody')` method instead.\n * @hidden\n */\n Grid.prototype.getFrozenRightContentTbody = function () {\n return this.getContent().querySelector(literals.tbody);\n };\n /**\n * @param {boolean} isCustom - Defines custom filter dialog open\n * @returns {void}\n * @hidden\n */\n Grid.prototype.showResponsiveCustomFilter = function (isCustom) {\n if (this.filterModule) {\n this.filterModule.showCustomFilter(isCustom || this.rowRenderingMode === 'Vertical');\n }\n };\n /**\n * @param {boolean} isCustom - Defines custom sort dialog open\n * @returns {void}\n * @hidden\n */\n Grid.prototype.showResponsiveCustomSort = function (isCustom) {\n if (this.sortModule) {\n this.sortModule.showCustomSort(isCustom || this.rowRenderingMode === 'Vertical');\n }\n };\n /**\n * @param {boolean} isCustom - Defines custom column chooser dialog open\n * @returns {void}\n * @hidden\n */\n Grid.prototype.showResponsiveCustomColumnChooser = function (isCustom) {\n if (this.columnChooserModule) {\n this.columnChooserModule.showCustomColumnChooser(isCustom || this.rowRenderingMode === 'Vertical');\n }\n };\n /**\n * To manually show the vertical row mode filter dialog\n *\n * @returns {void}\n */\n Grid.prototype.showAdaptiveFilterDialog = function () {\n if (this.enableAdaptiveUI) {\n this.showResponsiveCustomFilter(true);\n }\n };\n /**\n * To manually show the vertical row sort filter dialog\n *\n * @returns {void}\n */\n Grid.prototype.showAdaptiveSortDialog = function () {\n if (this.enableAdaptiveUI) {\n this.showResponsiveCustomSort(true);\n }\n };\n /**\n * @param {boolean} isColVirtualization - Defines column virtualization\n * @returns {Column[]} returns array of column models\n * @hidden\n */\n Grid.prototype.getCurrentVisibleColumns = function (isColVirtualization) {\n var cols = [];\n var gridCols = isColVirtualization ? this.getColumns() : this.columnModel;\n for (var _i = 0, gridCols_1 = gridCols; _i < gridCols_1.length; _i++) {\n var col = gridCols_1[_i];\n if (col.visible) {\n cols.push(col);\n }\n }\n return cols;\n };\n Grid.prototype.enableInfiniteAggrgate = function () {\n if (this.enableInfiniteScrolling && this.groupSettings.columns.length && !this.groupSettings.disablePageWiseAggregates\n && !this.groupSettings.enableLazyLoading) {\n this.setProperties({ groupSettings: { disablePageWiseAggregates: true } }, true);\n }\n };\n var Grid_1;\n __decorate([\n Property([])\n ], Grid.prototype, \"currentViewData\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"parentDetails\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"showHider\", void 0);\n __decorate([\n Property([])\n ], Grid.prototype, \"columns\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"enableAltRow\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"enableHover\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableAutoFill\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableStickyHeader\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowTextWrap\", void 0);\n __decorate([\n Complex({}, TextWrapSettings)\n ], Grid.prototype, \"textWrapSettings\", void 0);\n __decorate([\n Complex({}, ResizeSettings)\n ], Grid.prototype, \"resizeSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowPaging\", void 0);\n __decorate([\n Complex({}, PageSettings)\n ], Grid.prototype, \"pageSettings\", void 0);\n __decorate([\n Complex({}, LoadingIndicator)\n ], Grid.prototype, \"loadingIndicator\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"enableVirtualMaskRow\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableVirtualization\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableColumnVirtualization\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableInfiniteScrolling\", void 0);\n __decorate([\n Complex({}, SearchSettings)\n ], Grid.prototype, \"searchSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowSorting\", void 0);\n __decorate([\n Property('Ellipsis')\n ], Grid.prototype, \"clipMode\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"allowMultiSorting\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowExcelExport\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowPdfExport\", void 0);\n __decorate([\n Complex({}, SortSettings)\n ], Grid.prototype, \"sortSettings\", void 0);\n __decorate([\n Complex({}, InfiniteScrollSettings)\n ], Grid.prototype, \"infiniteScrollSettings\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"allowSelection\", void 0);\n __decorate([\n Property(-1)\n ], Grid.prototype, \"selectedRowIndex\", void 0);\n __decorate([\n Complex({}, SelectionSettings)\n ], Grid.prototype, \"selectionSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property('Horizontal')\n ], Grid.prototype, \"rowRenderingMode\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableAdaptiveUI\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowReordering\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowResizing\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowRowDragAndDrop\", void 0);\n __decorate([\n Complex({}, RowDropSettings)\n ], Grid.prototype, \"rowDropSettings\", void 0);\n __decorate([\n Complex({}, FilterSettings)\n ], Grid.prototype, \"filterSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowGrouping\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableImmutableMode\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"showColumnMenu\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"autoFit\", void 0);\n __decorate([\n Complex({}, GroupSettings)\n ], Grid.prototype, \"groupSettings\", void 0);\n __decorate([\n Complex({}, EditSettings)\n ], Grid.prototype, \"editSettings\", void 0);\n __decorate([\n Collection([], AggregateRow)\n ], Grid.prototype, \"aggregates\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"showColumnChooser\", void 0);\n __decorate([\n Complex({}, ColumnChooserSettings)\n ], Grid.prototype, \"columnChooserSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableHeaderFocus\", void 0);\n __decorate([\n Property('auto')\n ], Grid.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Grid.prototype, \"width\", void 0);\n __decorate([\n Property('Default')\n ], Grid.prototype, \"gridLines\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"rowTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"emptyRecordTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"detailTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"childGrid\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"queryString\", void 0);\n __decorate([\n Property('AllPages')\n ], Grid.prototype, \"printMode\", void 0);\n __decorate([\n Property('Expanded')\n ], Grid.prototype, \"hierarchyPrintMode\", void 0);\n __decorate([\n Property([])\n ], Grid.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], Grid.prototype, \"rowHeight\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"query\", void 0);\n __decorate([\n Property('USD')\n ], Grid.prototype, \"currencyCode\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"exportGrids\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"toolbar\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"contextMenuItems\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"columnMenuItems\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"toolbarTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"pagerTemplate\", void 0);\n __decorate([\n Property(0)\n ], Grid.prototype, \"frozenRows\", void 0);\n __decorate([\n Property(0)\n ], Grid.prototype, \"frozenColumns\", void 0);\n __decorate([\n Property('')\n ], Grid.prototype, \"cssClass\", void 0);\n __decorate([\n Property('All')\n ], Grid.prototype, \"columnQueryMode\", void 0);\n __decorate([\n Property({})\n ], Grid.prototype, \"currentAction\", void 0);\n __decorate([\n Property('')\n ], Grid.prototype, \"ej2StatePersistenceVersion\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"queryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"headerCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"recordDoubleClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"recordClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowSelecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowSelected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDeselecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDeselected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSelecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSelected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellDeselecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellDeselected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnSelecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnSelected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDeselecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDeselected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDragStart\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDrag\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDrop\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"printComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforePrint\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"pdfQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"pdfHeaderQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"pdfAggregateQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"excelAggregateQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"exportDetailDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"exportDetailTemplate\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"excelQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"excelHeaderQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeExcelExport\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"excelExportComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforePdfExport\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"pdfExportComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDragStartHelper\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"detailDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDragStart\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDrag\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDrop\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"toolbarClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeOpenColumnChooser\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeOpenAdaptiveDialog\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"batchAdd\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"batchDelete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"batchCancel\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeBatchAdd\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeBatchDelete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeBatchSave\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beginEdit\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"commandClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellEdit\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSave\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSaved\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"keyPressed\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"contextMenuOpen\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"contextMenuClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnMenuOpen\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnMenuClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"checkBoxChange\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeCopy\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforePaste\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeAutoFill\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDataStateChange\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"dataStateChange\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"dataSourceChanged\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"exportGroupCaption\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"lazyLoadGroupExpand\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"lazyLoadGroupCollapse\", void 0);\n Grid = Grid_1 = __decorate([\n NotifyPropertyChanges\n ], Grid);\n return Grid;\n}(Component));\nexport { Grid };\n","/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue, createElement } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, appendChildren, getDatePredicate, getObject, extendObjWithFn, eventPromise, setChecked, clearReactVueTemplates, padZero, Global } from '../base/util';\nimport { remove, debounce, Internationalization, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilterBase` module is used to handle filtering action.\n */\nvar CheckBoxFilterBase = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n *\n * @param {IXLFilter} parent - specifies the IXLFilter\n * @hidden\n */\n function CheckBoxFilterBase(parent) {\n this.isExecuteLocal = false;\n this.existingPredicate = {};\n this.foreignKeyQuery = new Query();\n /** @hidden */\n this.filterState = true;\n this.values = {};\n this.renderEmpty = false;\n this.isCheckboxFilterTemplate = false;\n this.infiniteRenderMod = false;\n // for infinite scroll ui\n this.infiniteInitialLoad = false;\n this.infiniteSearchValChange = false;\n this.infinitePermenantLocalData = [];\n this.infiniteQueryExecutionPending = false;\n this.infiniteSkipCnt = 0;\n this.infiniteScrollAppendDiff = 0;\n this.prevInfiniteScrollDirection = '';\n this.infiniteLoadedElem = [];\n this.infiniteDataCount = 0;\n this.infiniteLocalSelectAll = true;\n this.localInfiniteSelectAllClicked = false;\n this.localInfiniteSelectionInteracted = false;\n this.infiniteManualSelectMaintainPred = [];\n this.parent = parent;\n this.id = this.parent.element.id;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue = createCheckBox(this.parent.createElement, false, { checked: true, label: ' ' });\n this.cBoxFalse = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n this.cBoxTrue.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden', attrs: { type: 'checkbox' }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden', attrs: { 'type': 'checkbox' }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n if (this.parent.cssClass) {\n if (this.parent.cssClass.indexOf(' ') !== -1) {\n addClass([this.cBoxTrue, this.cBoxFalse], this.parent.cssClass.split(' '));\n }\n else {\n addClass([this.cBoxTrue, this.cBoxFalse], [this.parent.cssClass]);\n }\n }\n }\n /**\n * @returns {void}\n * @hidden\n */\n CheckBoxFilterBase.prototype.destroy = function () {\n this.closeDialog();\n };\n CheckBoxFilterBase.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n EventHandler.add(this.dlg, 'keyup', this.keyupHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n var elem = this.dialogObj.element.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.add(elem, 'keyup', this.searchHandler, this);\n EventHandler.add(elem, 'input', this.searchHandler, this);\n }\n };\n CheckBoxFilterBase.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n EventHandler.remove(this.dlg, 'keyup', this.keyupHandler);\n var elem = this.dialogObj.element.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n EventHandler.remove(elem, 'input', this.searchHandler);\n }\n };\n CheckBoxFilterBase.prototype.foreignKeyFilter = function (args, fColl, mPredicate) {\n var _this = this;\n var fPredicate = {};\n var filterCollection = [];\n var query = this.foreignKeyQuery.clone();\n this.options.column.dataSource.\n executeQuery(query.where(mPredicate)).then(function (e) {\n _this.options.column.columnData = e.result;\n _this.parent.notify(events.generateQuery, { predicate: fPredicate, column: _this.options.column });\n args.ejpredicate = fPredicate.predicate.predicates;\n var fpred = fPredicate.predicate.predicates;\n for (var i = 0; i < fpred.length; i++) {\n filterCollection.push({\n field: fpred[parseInt(i.toString(), 10)].field,\n predicate: 'or',\n matchCase: fpred[parseInt(i.toString(), 10)].ignoreCase,\n ignoreAccent: fpred[parseInt(i.toString(), 10)].ignoreAccent,\n operator: fpred[parseInt(i.toString(), 10)].operator,\n value: fpred[parseInt(i.toString(), 10)].value,\n type: _this.options.type\n });\n }\n args.filterCollection = filterCollection.length ? filterCollection :\n fColl.filter(function (col) { return col.field = _this.options.field; });\n _this.options.handler(args);\n });\n };\n CheckBoxFilterBase.prototype.searchBoxClick = function (e) {\n var target = e.target;\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = target.classList.contains('e-chkcancel-icon') ? '' : this.sInput.value;\n if (this.isCheckboxFilterTemplate) {\n this.parent.notify('refreshCheckbox', { event: e });\n }\n else {\n this.refreshCheckboxes();\n }\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n CheckBoxFilterBase.prototype.searchBoxKeyUp = function (e) {\n if (isNullOrUndefined(e) || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown' && e.key !== 'Tab' && !(e.key === 'Tab' && e.shiftKey))) {\n if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === 'Shimmer') {\n this.parent.showMaskRow(undefined, this.dialogObj.element);\n }\n if (this.isCheckboxFilterTemplate) {\n this.parent.notify('refreshCheckbox', { event: e });\n }\n else {\n this.refreshCheckboxes();\n }\n this.updateSearchIcon();\n }\n };\n CheckBoxFilterBase.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n if (!isNullOrUndefined(document.body.querySelector('.e-chkcancel-icon'))) {\n document.body.querySelector('.e-chkcancel-icon').setAttribute('title', this.localeObj.getConstant('Clear'));\n }\n }\n else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n if (!isNullOrUndefined(document.body.querySelector('.e-searchclear.e-search-icon'))) {\n document.body.querySelector('.e-searchclear.e-search-icon').setAttribute('title', this.localeObj.getConstant('Search'));\n }\n }\n };\n /**\n * Gets the localized label by locale keyword.\n *\n * @param {string} key - Defines localization key\n * @returns {string} - returns localization label\n */\n CheckBoxFilterBase.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n CheckBoxFilterBase.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n var str = 'object';\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n // eslint-disable-next-line valid-typeof\n if (typeof dataSource !== str) {\n var obj = {};\n obj[this.options.field] = dataSource[parseInt(i.toString(), 10)];\n dataSource[parseInt(i.toString(), 10)] = obj;\n }\n }\n }\n };\n CheckBoxFilterBase.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.options.dataManager = options.dataManager ? options.dataManager : options.dataSource;\n this.updateDataSource();\n this.options.type = options.type;\n this.options.format = options.format || '';\n this.options.ignoreAccent = options.ignoreAccent || false;\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.options.uid = options.column.uid;\n this.options.disableHtmlEncode = options.column.disableHtmlEncode || false;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n this.infiniteRenderMod = this.parent.filterSettings && this.parent.filterSettings.enableInfiniteScrolling ? true : false;\n this.infiniteUnloadParentExistPred = this.infiniteRenderMod && this.existingPredicate[this.options.column.field] ? this.existingPredicate[this.options.column.field].slice() : [];\n };\n CheckBoxFilterBase.prototype.getAndSetChkElem = function (options) {\n this.dlg = this.parent.createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n attrs: { uid: this.options.column.uid },\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = this.parent.createElement('div', { className: 'e-searchcontainer' });\n if (!options.hideSearchbox) {\n this.sInput = this.parent.createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = this.parent.createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {\n type: 'text', title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = this.parent.createElement('span', { className: 'e-searchbox e-fields' });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n var inputargs = {\n element: this.sInput, floatLabelType: 'Never', properties: {\n placeholder: this.getLocalizedLabel('Search'),\n cssClass: this.parent.cssClass\n }\n };\n Input.createInput(inputargs, this.parent.createElement);\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n this.spinner = this.parent.createElement('div', { className: 'e-spinner' }); //for spinner\n this.cBox = this.parent.createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n CheckBoxFilterBase.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: this.options.field, columnType: this.options.type, cancel: false\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.parent.notify(events.cBoxFltrBegin, args);\n if (args.cancel) {\n options.cancel = args.cancel;\n return;\n }\n this.dialogObj = new Dialog({\n visible: false, content: this.sBox,\n close: this.closeDialog.bind(this),\n enableRtl: this.parent.enableRtl,\n width: (!isNullOrUndefined(parentsUntil(options.target, 'e-bigger')))\n || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element, animationSettings: { effect: 'None' },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: {\n content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: this.parent.cssClass ? 'e-primary' + ' ' + this.parent.cssClass : 'e-primary',\n isPrimary: true\n }\n },\n {\n click: this.btnClick.bind(this),\n buttonModel: { cssClass: this.parent.cssClass ? 'e-flat' + ' ' + this.parent.cssClass : 'e-flat',\n content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton') }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this),\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n var isStringTemplate = 'isStringTemplate';\n this.dialogObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveFilter(options);\n var dialogLabel = this.parent.filterSettings && this.parent.filterSettings.type === 'CheckBox' ?\n this.getLocalizedLabel('CheckBoxFilterDialogARIA') : this.getLocalizedLabel('ExcelFilterDialogARIA');\n this.dlg.setAttribute('aria-label', dialogLabel);\n if (options.isResponsiveFilter) {\n var responsiveCnt = document.querySelector('.e-responsive-dialog > .e-dlg-content > .e-mainfilterdiv');\n responsiveCnt.appendChild(this.dlg);\n }\n else {\n this.parent.element.appendChild(this.dlg);\n }\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = options.isResponsiveFilter ? 'none' : this.options.height + 'px';\n this.dialogObj.show();\n var content = this.dialogObj.element.querySelector('.e-dlg-content');\n content.appendChild(this.sBox);\n this.wireEvents();\n if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === 'Shimmer'\n && !this.infiniteRenderMod) {\n this.parent.showMaskRow(undefined, this.dialogObj.element);\n }\n else if (this.infiniteRenderMod && this.parent.filterSettings && this.parent.filterSettings.loadingIndicator === 'Shimmer') {\n this.showMask();\n }\n else {\n if (this.infiniteRenderMod) {\n this.cBox.style.marginTop = this.getListHeight(this.cBox) + 'px';\n }\n createSpinner({ target: this.spinner, cssClass: this.parent.cssClass ? this.parent.cssClass : null }, this.parent.createElement);\n showSpinner(this.spinner);\n }\n this.getAllData();\n };\n CheckBoxFilterBase.prototype.renderResponsiveFilter = function (options) {\n if (options.isResponsiveFilter) {\n this.dialogObj.buttons = [{}];\n this.dialogObj.position = { X: '', Y: '' };\n this.dialogObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n this.dialogObj.width = '100%';\n }\n };\n CheckBoxFilterBase.prototype.dialogCreated = function (e) {\n if (this.options.isResponsiveFilter) {\n this.dialogObj.element.style.left = '0px';\n }\n else {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj);\n }\n else {\n this.dialogObj.position = { X: 'center', Y: 'center' };\n }\n }\n if (this.options.column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, e);\n }\n };\n CheckBoxFilterBase.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n CheckBoxFilterBase.prototype.closeDialog = function () {\n if (this.infiniteRenderMod && this.infinitePermenantLocalData.length && !this.options.isRemote) {\n this.options.dataSource.dataSource.json = this.infinitePermenantLocalData;\n }\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n this.isBlanks = false;\n var filterTemplateCol = this.options.columns.filter(function (col) { return col.getFilterItemTemplate(); });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var registeredTemplate = this.parent.registeredTemplate;\n if (filterTemplateCol.length && !isNullOrUndefined(registeredTemplate) && registeredTemplate.filterItemTemplate) {\n this.parent.destroyTemplate(['filterItemTemplate']);\n }\n if ((this.parent.isReact || this.parent.isVue) && this.parent.destroyTemplate !== undefined) {\n clearReactVueTemplates(this.parent, ['filterItemTemplate']);\n }\n this.parent.notify(events.filterMenuClose, { field: this.options.field });\n this.unWireEvents();\n if (this.parent.isReact && this.options.column.filter && typeof (this.options.column.filter.itemTemplate) !== 'string'\n && (this.options.column.filter.type === 'CheckBox' || this.options.column.filter.type === 'Excel')) {\n this.dialogObj.element.querySelector('.e-dlg-content').innerHTML = '';\n }\n this.dialogObj.destroy();\n if (this.dlg && this.dlg.parentElement) {\n remove(this.dlg);\n }\n this.dlg = null;\n this.parent.notify(events.filterDialogClose, {});\n }\n };\n /**\n * @param {Column} col - Defines column details\n * @returns {void}\n * @hidden\n */\n CheckBoxFilterBase.prototype.clearFilter = function (col) {\n // eslint-disable-next-line max-len\n var args = { instance: this, handler: this.clearFilter, cancel: false };\n this.parent.notify(events.fltrPrevent, args);\n if (args.cancel) {\n return;\n }\n this.options.handler({ action: 'clear-filter', field: col ? col.field : this.options.field });\n };\n CheckBoxFilterBase.prototype.btnClick = function (e) {\n if (this.filterState) {\n if ((e.target.tagName.toLowerCase() === 'input' && e.target.classList.contains('e-searchinput')) ||\n e.keyCode === 13) {\n if (!this.isCheckboxFilterTemplate) {\n this.fltrBtnHandler();\n }\n }\n else {\n var text = e.target.firstChild.textContent.toLowerCase();\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n if (!this.isCheckboxFilterTemplate) {\n this.fltrBtnHandler();\n }\n }\n else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n this.closeDialog();\n }\n else if (e.target && e.target.firstChild &&\n e.target.firstChild.textContent.toLowerCase() === this.getLocalizedLabel('CancelButton').toLowerCase()) {\n this.closeDialog();\n }\n else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n if (this.options.column.showColumnMenu) {\n this.parent.notify(events.afterFilterColumnMenuClose, {});\n }\n if (!isNullOrUndefined(this.parent.focusModule)) {\n this.parent.focusModule.filterfocus();\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n CheckBoxFilterBase.prototype.fltrBtnHandler = function () {\n var _this = this;\n if (this.infiniteRenderMod) {\n this.cBox.innerHTML = '';\n appendChildren(this.cBox, this.infiniteLoadedElem.slice());\n }\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall):not(.e-add-current)'));\n var check = checked;\n var optr = 'equal';\n var ddlValue = this.dialogObj.element.querySelector('.e-dropdownlist');\n if (ddlValue) {\n this.options.operator = optr = ddlValue.ej2_instances[0].value;\n }\n this.isMenuNotEqual = this.options.operator === 'notequal';\n var searchInput;\n if (!this.options.hideSearchbox) {\n searchInput = this.searchBox.querySelector('.e-searchinput');\n }\n var caseSen = this.options.allowCaseSensitive;\n var defaults = {\n field: this.options.field, predicate: this.isMenuNotEqual ? 'and' : 'or', uid: this.options.uid,\n operator: optr, type: this.options.type, matchCase: caseSen, ignoreAccent: this.options.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n if (isNotEqual && searchInput && searchInput.value === '') {\n optr = this.isMenuNotEqual ? 'equal' : 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = this.isMenuNotEqual ? 'or' : 'and';\n defaults.operator = optr;\n }\n var value;\n var val;\n var length;\n var fObj;\n var coll = [];\n if ((checked.length !== this.itemsCnt || (searchInput && searchInput.value && searchInput.value !== ''))\n || this.infiniteRenderMod) {\n if (!this.infiniteRenderMod) {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[parseInt(i.toString(), 10)], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, { value: value }, defaults);\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n if (value === '' || isNullOrUndefined(value)) {\n coll = coll.concat(CheckBoxFilterBase.generateNullValuePredicates(defaults));\n }\n else {\n coll.push(fObj);\n }\n this.notifyFilterPrevEvent(fObj);\n }\n }\n else if (this.infiniteRenderMod) {\n this.infiniteFltrBtnHandler(coll);\n }\n if ((this.options.type === 'date' || this.options.type === 'datetime') && check.length) {\n length = check.length - 1;\n val = this.values[parentsUntil(check[parseInt(length.toString(), 10)], 'e-ftrchk').getAttribute('uid')];\n if (isNullOrUndefined(val) && isNotEqual) {\n coll.push({\n field: defaults.field, matchCase: defaults.matchCase, operator: 'equal',\n predicate: 'and', value: null\n });\n }\n }\n var addCurrSelection = this.infiniteRenderMod ? this.sBox.querySelector('.e-add-current') :\n this.cBox.querySelector('.e-add-current');\n if (addCurrSelection && addCurrSelection.classList.contains('e-check')) {\n var existingPredicate_1 = this.existingPredicate[this.options.field];\n if (existingPredicate_1) {\n var _loop_1 = function (j) {\n if (!coll.some(function (data) {\n return data\n .value === existingPredicate_1[parseInt(j.toString(), 10)].value;\n })) {\n coll.push(existingPredicate_1[parseInt(j.toString(), 10)]);\n }\n };\n for (var j = 0; j < existingPredicate_1.length; j++) {\n _loop_1(j);\n }\n }\n else {\n return;\n }\n }\n if (!this.infiniteRenderMod) {\n this.initiateFilter(coll);\n }\n else if (coll.length) {\n this.initiateFilter(coll);\n }\n else if (this.sBox.querySelector('.e-selectall').classList.contains('e-check') && !coll.length) {\n var isClearFilter = this.options.filteredColumns.some(function (value) {\n return _this.options.field === value.field;\n });\n if (isClearFilter) {\n this.clearFilter();\n }\n }\n }\n else {\n var isClearFilter = this.options.filteredColumns.some(function (value) {\n return _this.options.field === value.field;\n });\n if (isClearFilter) {\n this.clearFilter();\n }\n }\n };\n CheckBoxFilterBase.prototype.infiniteFltrBtnHandler = function (coll) {\n var value;\n if (this.infiniteManualSelectMaintainPred.length) {\n for (var i = 0; i < this.infiniteManualSelectMaintainPred.length; i++) {\n var pred = this.infiniteManualSelectMaintainPred[i];\n value = pred.value + '';\n if (value === '' || isNullOrUndefined(value)) {\n var dummyDefaults = { predicate: pred.predicate, field: pred.field, type: pred.type, uid: pred.uid, operator: pred.operator,\n matchCase: pred.matchCase, ignoreAccent: pred.ignoreAccent };\n coll.push.apply(coll, CheckBoxFilterBase.generateNullValuePredicates(dummyDefaults));\n }\n else {\n coll.push(this.infiniteManualSelectMaintainPred[i]);\n }\n this.notifyFilterPrevEvent(this.infiniteManualSelectMaintainPred[i]);\n }\n }\n if (!this.localInfiniteSelectAllClicked && this.sInput.value === '' && !(!this.options.parentCurrentViewDataCount && coll.length)) {\n for (var i = 0; i < this.infiniteUnloadParentExistPred.length; i++) {\n coll.unshift(this.infiniteUnloadParentExistPred[i]);\n this.notifyFilterPrevEvent(this.existingPredicate[this.options.field][i]);\n }\n }\n if (this.sInput.value !== '' && (!this.localInfiniteSelectAllClicked || this.infiniteLocalSelectAll)) {\n this.infiniteSearchPred['predicate'] = 'or';\n coll.unshift(this.infiniteSearchPred);\n this.notifyFilterPrevEvent(this.infiniteSearchPred);\n }\n };\n CheckBoxFilterBase.prototype.notifyFilterPrevEvent = function (predicate) {\n var args = {\n instance: this, handler: this.fltrBtnHandler, arg1: predicate.field, arg2: predicate.predicate, arg3: predicate.operator,\n arg4: predicate.matchCase, arg5: predicate.ignoreAccent, arg6: predicate.value, cancel: false\n };\n this.parent.notify(events.fltrPrevent, args);\n if (args.cancel) {\n return;\n }\n };\n // eslint-disable-next-line\n /** @hidden */\n CheckBoxFilterBase.generateNullValuePredicates = function (defaults) {\n var coll = [];\n if (defaults.type === 'string') {\n coll.push({\n field: defaults.field, ignoreAccent: defaults.ignoreAccent, matchCase: defaults.matchCase,\n operator: defaults.operator, predicate: defaults.predicate, value: ''\n });\n }\n coll.push({\n field: defaults.field,\n matchCase: defaults.matchCase, operator: defaults.operator, predicate: defaults.predicate, value: null\n });\n coll.push({\n field: defaults.field, matchCase: defaults.matchCase, operator: defaults.operator,\n predicate: defaults.predicate, value: undefined\n });\n return coll;\n };\n // eslint-disable-next-line\n /** @hidden */\n CheckBoxFilterBase.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate :\n new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[parseInt(j.toString(), 10)].ejpredicate !== undefined ?\n predicate[fColl[parseInt(j.toString(), 10)].predicate](fColl[parseInt(j.toString(), 10)].ejpredicate) :\n predicate[fColl[parseInt(j.toString(), 10)].predicate](fColl[parseInt(j.toString(), 10)].field, fColl[parseInt(j.toString(), 10)].operator, fColl[parseInt(j.toString(), 10)].value, !fColl[parseInt(j.toString(), 10)].matchCase, fColl[parseInt(j.toString(), 10)].ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n CheckBoxFilterBase.prototype.isForeignColumn = function (col) {\n return col.isForeignColumn ? col.isForeignColumn() : false;\n };\n CheckBoxFilterBase.prototype.refreshCheckboxes = function () {\n var _this = this;\n var val = this.sInput.value;\n var column = this.options.column;\n var query = this.isForeignColumn(column) ? this.foreignKeyQuery.clone() : this.options.query.clone();\n var foreignQuery = this.options.query.clone();\n var pred = query.queries.filter(function (e) { return e && e.fn === 'onWhere'; })[0];\n query.queries = [];\n foreignQuery.queries = [];\n var parsed = (this.options.type !== 'string' && parseFloat(val)) ? parseFloat(val) : val;\n var operator = this.options.isRemote ?\n (this.options.type === 'string' ? 'contains' : 'equal') : (this.options.type ? 'contains' : 'equal');\n var matchCase = true;\n var ignoreAccent = this.options.ignoreAccent;\n var field = this.isForeignColumn(column) ? column.foreignKeyValue : column.field;\n parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;\n var coll = [];\n var defaults = {\n field: field, predicate: 'or', uid: this.options.uid,\n operator: 'equal', type: this.options.type, matchCase: matchCase, ignoreAccent: ignoreAccent\n };\n var predicte;\n var moduleName = this.options.dataManager.adaptor.getModuleName;\n if (this.options.type === 'boolean') {\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'false';\n }\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1 && moduleName) {\n // eslint-disable-next-line no-constant-condition\n parsed = (moduleName() === 'ODataAdaptor' || 'ODataV4Adaptor') ? true : 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1 && moduleName) {\n // eslint-disable-next-line no-constant-condition\n parsed = (moduleName() === 'ODataAdaptor' || 'ODataV4Adaptor') ? false : 'false';\n }\n operator = 'equal';\n }\n if ((this.options.type === 'date' || this.options.type === 'datetime' || this.options.type === 'dateonly') && this.options.format) {\n var intl = new Internationalization();\n var format = typeof (this.options.format) === 'string' ? this.options.format :\n this.options.format.format;\n if (format) {\n parsed = intl.parseDate(val, { format: format }) || new Date(val);\n }\n else {\n parsed = new Date(val);\n }\n if (this.options.type === 'dateonly') {\n parsed = parsed.getFullYear() + '-' + padZero(parsed.getMonth() + 1) + '-' + padZero(parsed.getDate());\n }\n }\n this.infiniteSearchValChange = true;\n this.infiniteLoadedElem = [];\n this.infiniteLocalSelectAll = true;\n this.localInfiniteSelectAllClicked = false;\n this.localInfiniteSelectionInteracted = false;\n this.infiniteSkipCnt = 0;\n this.infiniteDataCount = 0;\n this.infiniteManualSelectMaintainPred = [];\n if (this.sInput.value === '') {\n this.infiniteUnloadParentExistPred = this.infiniteRenderMod && this.existingPredicate[this.options.column.field] ? this.existingPredicate[this.options.column.field].slice() : [];\n }\n else {\n this.infiniteUnloadParentExistPred = [];\n }\n this.addDistinct(query);\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this, columnName: field, column: column,\n operator: operator, matchCase: matchCase, ignoreAccent: ignoreAccent, filterChoiceCount: null,\n query: query, value: parsed\n };\n if (this.infiniteRenderMod && this.parent.filterSettings.itemsCount) {\n args.filterChoiceCount = this.parent.filterSettings.itemsCount;\n }\n this.parent.trigger(events.actionBegin, args, function (filterargs) {\n // eslint-disable-next-line no-self-assign\n filterargs.operator = filterargs.operator;\n predicte = new Predicate(field, filterargs.operator, args.value, filterargs.matchCase, filterargs.ignoreAccent);\n if (_this.options.type === 'date' || _this.options.type === 'datetime' || _this.options.type === 'dateonly') {\n operator = 'equal';\n var filterObj = {\n field: field, operator: operator, value: parsed, matchCase: matchCase,\n ignoreAccent: ignoreAccent\n };\n if (!isNullOrUndefined(parsed)) {\n predicte = getDatePredicate(filterObj, _this.options.type);\n }\n }\n if (val && typeof val === 'string' && _this.isBlanks &&\n _this.getLocalizedLabel('Blanks').toLowerCase().indexOf(val.toLowerCase()) >= 0) {\n coll = coll.concat(CheckBoxFilterBase.generateNullValuePredicates(defaults));\n var emptyValPredicte = CheckBoxFilterBase.generatePredicate(coll);\n emptyValPredicte.predicates.push(predicte);\n predicte = emptyValPredicte;\n query.where(emptyValPredicte);\n }\n else if (val.length) {\n predicte = !isNullOrUndefined(pred) ? predicte.and(pred.e) : predicte;\n query.where(predicte);\n }\n else if (!isNullOrUndefined(pred)) {\n predicte = pred.e;\n query.where(pred.e);\n }\n _this.infiniteSearchPred = predicte;\n filterargs.filterChoiceCount = !isNullOrUndefined(filterargs.filterChoiceCount) ? filterargs.filterChoiceCount : 1000;\n if (_this.infiniteRenderMod && _this.parent.filterSettings.itemsCount !== filterargs.filterChoiceCount) {\n _this.parent.filterSettings.itemsCount = args.filterChoiceCount;\n }\n var fPredicate = {};\n showSpinner(_this.spinner);\n _this.renderEmpty = false;\n if (_this.isForeignColumn(column) && val.length) {\n var colData = ('result' in column.dataSource) ? new DataManager(column.dataSource.result) :\n column.dataSource;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n colData.executeQuery(query).then(function (e) {\n var columnData = _this.options.column.columnData;\n _this.options.column.columnData = e.result;\n _this.parent.notify(events.generateQuery, { predicate: fPredicate, column: column });\n if (fPredicate.predicate.predicates.length) {\n foreignQuery.where(fPredicate.predicate);\n }\n else {\n _this.renderEmpty = true;\n }\n _this.options.column.columnData = columnData;\n if (_this.infiniteRenderMod) {\n _this.infiniteInitialLoad = isNullOrUndefined(_this.fullData) ? true : false;\n _this.makeInfiniteScrollRequest(foreignQuery);\n foreignQuery.requiresCount();\n }\n else {\n foreignQuery.take(filterargs.filterChoiceCount);\n }\n _this.search(filterargs, foreignQuery);\n });\n }\n else {\n if (_this.infiniteRenderMod && _this.parent.filterSettings.itemsCount) {\n _this.infiniteInitialLoad = isNullOrUndefined(_this.fullData) ? true : false;\n _this.makeInfiniteScrollRequest(query);\n query.requiresCount();\n }\n else {\n query.take(filterargs.filterChoiceCount);\n }\n _this.search(filterargs, query);\n }\n });\n };\n CheckBoxFilterBase.prototype.search = function (args, query) {\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n }\n else {\n this.processSearch(query);\n }\n };\n CheckBoxFilterBase.prototype.getPredicateFromCols = function (columns, isExecuteLocal) {\n var predicates = CheckBoxFilterBase.getPredicate(columns, isExecuteLocal);\n var predicateList = [];\n var fPredicate = {};\n var isGrid = this.parent.getForeignKeyColumns !== undefined;\n var foreignColumn = isGrid ? this.parent.getForeignKeyColumns() : [];\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = void 0;\n if (isGrid && !this.parent.getColumnByField(prop)) {\n col = getColumnByForeignKeyValue(prop, foreignColumn);\n }\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n }\n else {\n predicateList.push(predicates[\"\" + prop]);\n }\n }\n return predicateList.length && Predicate.and(predicateList);\n };\n CheckBoxFilterBase.prototype.getQuery = function () {\n return this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n };\n CheckBoxFilterBase.prototype.getAllData = function () {\n var _this = this;\n this.customQuery = false;\n var query = this.getQuery();\n query.requiresCount(); //consider take query\n this.addDistinct(query);\n var args = {\n requestType: events.filterChoiceRequest, query: query, filterChoiceCount: null\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n if (this.infiniteRenderMod && this.parent.filterSettings.itemsCount) {\n args.filterChoiceCount = this.parent.filterSettings.itemsCount;\n }\n this.parent.trigger(events.actionBegin, args, function (args) {\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n if (_this.infiniteRenderMod && _this.parent.filterSettings.itemsCount !== args.filterChoiceCount) {\n _this.parent.filterSettings.itemsCount = args.filterChoiceCount;\n }\n if (!_this.infiniteRenderMod) {\n query.take(args.filterChoiceCount);\n }\n if (!args.query.distincts.length || _this.infiniteRenderMod) {\n _this.customQuery = true;\n _this.queryGenerate(query);\n }\n if (_this.infiniteRenderMod) {\n _this.infiniteInitialLoad = isNullOrUndefined(_this.fullData) ? true : false;\n _this.makeInfiniteScrollRequest(query);\n }\n if (_this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.filterEvent(args, query);\n }\n else {\n _this.processDataOperation(query, true);\n }\n });\n };\n CheckBoxFilterBase.prototype.addDistinct = function (query) {\n var _this = this;\n var _a;\n var filteredColumn = DataUtil.distinct(this.options.filteredColumns, 'field');\n if (filteredColumn.indexOf(this.options.column.field) <= -1) {\n filteredColumn = filteredColumn.concat(this.options.column.field);\n }\n if (!this.infiniteRenderMod) {\n query.distinct(filteredColumn);\n }\n if (this.infiniteRenderMod && !this.options.isRemote && this.sInput.value === '') {\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n this.infinitePermenantLocalData = this.options.dataSource.dataSource.json.slice();\n this.options.dataSource.dataSource.json = DataUtil.distinct((_a = this.options.parentFilteredLocalRecords).concat.apply(_a, this.infinitePermenantLocalData), this.options.column.field, true);\n if (this.isForeignColumn(this.options.column)) {\n this.options.column.dataSource = this.options.column.dataSource instanceof DataManager ?\n this.options.column.dataSource : new DataManager(this.options.column.dataSource);\n this.options.dataSource.dataSource.json = this.options.dataSource.dataSource.json.map(function (item, i) {\n return Object.assign({}, item, _this.options.column.dataSource.dataSource.json[i]);\n });\n }\n }\n else if (this.infiniteRenderMod && this.options.isRemote) {\n query.select(this.options.column.field);\n query.sortBy(this.options.column.field, 'ascending');\n var moduleName = this.options.dataManager.adaptor.getModuleName;\n if (moduleName && moduleName() && (moduleName() === 'ODataV4Adaptor' || moduleName() === 'WebApiAdaptor'\n || moduleName() === 'CustomDataAdaptor' || moduleName() === 'GraphQLAdaptor' || moduleName() === 'ODataAdaptor')) {\n query.distinct(filteredColumn);\n }\n }\n return query;\n };\n CheckBoxFilterBase.prototype.filterEvent = function (args, query) {\n var _this = this;\n var defObj = eventPromise(args, query);\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n _this.dataSuccess(e);\n });\n };\n CheckBoxFilterBase.prototype.infiniteScrollMouseKeyDownHandler = function () {\n EventHandler.remove(this.cBox, 'scroll', this.infiniteScrollHandler);\n };\n CheckBoxFilterBase.prototype.infiniteScrollMouseKeyUpHandler = function (e) {\n var _this = this;\n EventHandler.add(this.cBox, 'scroll', this.infiniteScrollHandler, this);\n var target = this.cBox;\n if (target.children.length > 1 && (target.scrollTop >= target.scrollHeight - target.offsetHeight || target.scrollTop <= 0)) {\n this.infiniteScrollHandler();\n }\n Global.timer = setTimeout(function () { _this.clickHandler(e); Global.timer = null; }, 0);\n };\n CheckBoxFilterBase.prototype.getListHeight = function (element) {\n var listDiv = createElement('div', { className: 'e-ftrchk', styles: 'visibility: hidden' });\n listDiv.innerHTML = '
A
';\n element.appendChild(listDiv);\n var rect = listDiv.getBoundingClientRect();\n element.removeChild(listDiv);\n var listHeight = Math.round(rect.height);\n return listHeight;\n };\n CheckBoxFilterBase.prototype.getShimmerTemplate = function () {\n return '';\n };\n CheckBoxFilterBase.prototype.showMask = function () {\n var maskRowCount = 5;\n var maskItemHeight;\n var maskList = this.parent.createElement('div', { id: this.id + this.options.type + '_CheckBoxMaskList',\n className: 'e-checkboxlist e-fields e-infinite-list e-masklist', styles: 'z-index: 10;' });\n var wrapperElem = this.cBox;\n this.removeMask();\n if (wrapperElem) {\n var computedStyle = getComputedStyle(wrapperElem);\n var height = wrapperElem.children.length ? parseInt(computedStyle.height, 10) :\n Math.floor(parseInt(computedStyle.height.split('px')[0], 10)) - 5;\n var backgroundColor = this.isExcel && !wrapperElem.children.length && !this.dlg.classList.contains('e-excelfilter') ?\n '' : getComputedStyle(this.dlg.querySelector('.e-dlg-content')).backgroundColor;\n maskList.style.cssText = 'width: ' + computedStyle.width + '; min-height: ' + computedStyle.minHeight + '; height: ' +\n height + 'px; margin: ' + computedStyle.margin + '; border-style: ' + computedStyle.borderStyle + '; border-width: '\n + computedStyle.borderWidth + '; border-color: ' + computedStyle.borderColor + '; position: absolute; background-color: ' +\n backgroundColor + ';';\n var liHeight = this.getListHeight(wrapperElem);\n maskRowCount = Math.floor(height / liHeight);\n maskRowCount = wrapperElem.children.length > maskRowCount ? wrapperElem.children.length : maskRowCount;\n maskItemHeight = liHeight + 'px';\n }\n var maskTemplate = '
'\n + '
'\n + this.getShimmerTemplate() + this.getShimmerTemplate() + '
';\n maskList.innerHTML = '';\n if (!wrapperElem.children.length) {\n this.spinner.insertAdjacentHTML('beforebegin', maskTemplate);\n var maskSpan = [].slice.call(this.spinner.parentElement\n .querySelectorAll('.e-mask:not(.e-mask-checkbox-filter-intent):not(.e-mask-checkbox-filter-span-intent)'));\n maskSpan[0].classList.add('e-mask-checkbox-filter-intent');\n maskSpan[1].classList.add('e-mask-checkbox-filter-span-intent');\n }\n this.spinner.insertBefore(maskList, this.cBox);\n for (var i = 0; maskRowCount && i < maskRowCount; i++) {\n maskList.innerHTML += maskTemplate;\n var maskSpan = [].slice.call(maskList\n .querySelectorAll('.e-mask:not(.e-mask-checkbox-filter-intent):not(.e-mask-checkbox-filter-span-intent)'));\n maskSpan[0].classList.add('e-mask-checkbox-filter-intent');\n maskSpan[1].classList.add('e-mask-checkbox-filter-span-intent');\n }\n if (this.cBox) {\n maskList.scrollTop = this.cBox.scrollTop;\n }\n };\n CheckBoxFilterBase.prototype.removeMask = function () {\n var maskLists = this.dialogObj.element.querySelectorAll('.e-mask-ftrchk');\n if (maskLists.length) {\n for (var i = 0; i < maskLists.length; i++) {\n remove(maskLists[i]);\n }\n }\n var maskParent = this.dialogObj.element.querySelector('.e-checkboxlist.e-masklist');\n if (maskParent) {\n remove(this.dialogObj.element.querySelector('.e-checkboxlist.e-masklist'));\n }\n };\n CheckBoxFilterBase.prototype.infiniteScrollHandler = function () {\n var target = this.cBox;\n if (target.scrollTop >= target.scrollHeight - target.offsetHeight && !this.infiniteQueryExecutionPending\n && this.infiniteLoadedElem.length <= (this.infiniteSkipCnt + this.parent.filterSettings.itemsCount)\n && this.cBox.children.length === this.parent.filterSettings.itemsCount * 3\n && (!this.infiniteDataCount || this.infiniteDataCount > (this.infiniteSkipCnt + this.parent.filterSettings.itemsCount))) {\n this.makeInfiniteScrollRequest();\n this.prevInfiniteScrollDirection = 'down';\n }\n else if (target.scrollTop >= target.scrollHeight - target.offsetHeight && !this.infiniteQueryExecutionPending\n && this.infiniteLoadedElem.length > (this.infiniteSkipCnt + this.parent.filterSettings.itemsCount)\n && this.cBox.children.length === this.parent.filterSettings.itemsCount * 3) {\n this.infiniteRemoveElements(([].slice.call(this.cBox.children)).splice(0, this.parent.filterSettings.itemsCount));\n this.infiniteSkipCnt += this.prevInfiniteScrollDirection === 'down' ? this.parent.filterSettings.itemsCount :\n (this.parent.filterSettings.itemsCount * 3);\n appendChildren(this.cBox, this.infiniteLoadedElem.slice(this.infiniteSkipCnt, this.parent.filterSettings.itemsCount +\n this.infiniteSkipCnt));\n this.prevInfiniteScrollDirection = 'down';\n }\n else if (target.scrollTop === 0 && !this.infiniteInitialLoad && !this.infiniteSearchValChange && this.infiniteSkipCnt\n && this.infiniteLoadedElem.length && this.infiniteLoadedElem.length > this.parent.filterSettings.itemsCount * 3\n && this.cBox.children.length === this.parent.filterSettings.itemsCount * 3) {\n this.infiniteRemoveElements(([].slice.call(this.cBox.children)).splice((this.parent.filterSettings\n .itemsCount * 2), this.parent.filterSettings.itemsCount));\n this.infiniteSkipCnt -= this.prevInfiniteScrollDirection === 'up' ? this.parent.filterSettings.itemsCount :\n (this.parent.filterSettings.itemsCount * 3);\n this.infiniteAppendElements([].slice.call(this.infiniteLoadedElem.slice(this.infiniteSkipCnt, this.infiniteSkipCnt +\n this.parent.filterSettings.itemsCount)));\n this.cBox.scrollTop = this.infiniteScrollAppendDiff;\n this.prevInfiniteScrollDirection = 'up';\n }\n else if (target.scrollTop === 0 && !this.infiniteInitialLoad && !this.infiniteSearchValChange && this.infiniteSkipCnt\n && this.infiniteLoadedElem.length && this.cBox.children.length < this.parent.filterSettings.itemsCount * 3) {\n this.infiniteRemoveElements(([].slice.call(this.cBox.children)).splice((this.parent.filterSettings\n .itemsCount * 2), this.infiniteDataCount % this.parent.filterSettings.itemsCount));\n this.infiniteSkipCnt = (Math.floor(this.infiniteDataCount / this.parent.filterSettings.itemsCount) - 3) *\n this.parent.filterSettings.itemsCount;\n this.infiniteAppendElements([].slice.call(this.infiniteLoadedElem.slice(this.infiniteSkipCnt, this.infiniteSkipCnt +\n this.parent.filterSettings.itemsCount)));\n this.cBox.scrollTop = this.infiniteScrollAppendDiff;\n this.prevInfiniteScrollDirection = 'up';\n }\n };\n CheckBoxFilterBase.prototype.infiniteRemoveElements = function (removeElem) {\n for (var i = 0; i < removeElem.length; i++) {\n remove(removeElem[i]);\n }\n };\n CheckBoxFilterBase.prototype.infiniteAppendElements = function (appendElem) {\n for (var i = 0; i < appendElem.length; i++) {\n this.cBox.insertBefore(appendElem[i], this.cBox.children[i]);\n }\n };\n CheckBoxFilterBase.prototype.makeInfiniteScrollRequest = function (query) {\n var _this = this;\n if (!this.infiniteInitialLoad && this.parent.filterSettings && this.parent.filterSettings.loadingIndicator === 'Shimmer') {\n setTimeout(function () {\n if (_this.infiniteQueryExecutionPending) {\n _this.showMask();\n }\n }, 500);\n }\n else if (!this.infiniteInitialLoad) {\n createSpinner({ target: this.spinner, cssClass: this.parent.cssClass ? this.parent.cssClass : null }, this.parent\n .createElement);\n showSpinner(this.spinner);\n }\n var fName = 'fn';\n if (this.infiniteQuery && this.infiniteQuery.queries && this.infiniteQuery.queries.length) {\n for (var i = 0; i < this.infiniteQuery.queries.length; i++) {\n if (this.infiniteQuery.queries[i][\"\" + fName] === 'onTake'\n || this.infiniteQuery.queries[i][\"\" + fName] === 'onSkip') {\n this.infiniteQuery.queries.splice(i, 1);\n i--;\n }\n }\n }\n var existQuery = query ? true : false;\n query = query ? query : this.infiniteQuery;\n if (this.infiniteInitialLoad || this.infiniteSearchValChange) {\n this.infiniteSkipCnt = 0;\n }\n else {\n this.infiniteSkipCnt += this.parent.filterSettings.itemsCount;\n }\n query.skip(this.infiniteSkipCnt);\n if (this.infiniteInitialLoad || this.infiniteSearchValChange) {\n query.take(this.parent.filterSettings.itemsCount * 3);\n this.infiniteSkipCnt += this.parent.filterSettings.itemsCount * 2;\n }\n else {\n query.take(this.parent.filterSettings.itemsCount);\n }\n if (!existQuery) {\n this.processDataOperation(query);\n this.infiniteQueryExecutionPending = true;\n }\n };\n CheckBoxFilterBase.prototype.processDataOperation = function (query, isInitial) {\n var _this = this;\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n if (this.isForeignColumn(this.options.column) && isInitial) {\n var colData = ('result' in this.options.column.dataSource) ?\n new DataManager(this.options.column.dataSource.result) :\n this.options.column.dataSource;\n this.foreignKeyQuery.params = query.params;\n allPromise.push(colData.executeQuery(this.foreignKeyQuery));\n runArray.push(function (data) { return _this.foreignKeyData = data; });\n }\n if (this.infiniteRenderMod) {\n this.infiniteQuery = query.clone();\n if (this.infiniteInitialLoad) {\n this.cBox.classList.add('e-checkbox-infinitescroll');\n EventHandler.add(this.cBox, 'scroll', this.infiniteScrollHandler, this);\n EventHandler.add(this.cBox, 'mouseup', this.infiniteScrollMouseKeyUpHandler, this);\n EventHandler.add(this.cBox, 'mousedown', this.infiniteScrollMouseKeyDownHandler, this);\n }\n else if (this.infiniteSearchValChange) {\n this.cBox.innerHTML = '';\n }\n }\n if (this.infiniteRenderMod && this.infiniteInitialLoad && !this.options.isRemote) {\n var field = this.isForeignColumn(this.options.column) ? this.options.foreignKeyValue :\n this.options.column.field;\n this.options.dataSource.executeQuery(new Query().sortBy(field, DataUtil.fnAscending)).then(function (e) {\n _this.options.dataSource.dataSource.json = e.result;\n _this.executeQueryOperations(query, allPromise, runArray);\n });\n }\n else {\n this.executeQueryOperations(query, allPromise, runArray);\n }\n };\n CheckBoxFilterBase.prototype.executeQueryOperations = function (query, allPromise, runArray) {\n var _this = this;\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n _this.infiniteQueryExecutionPending = _this.infiniteRenderMod ? false : _this.infiniteQueryExecutionPending;\n for (var j = 0; j < e.length; j++) {\n _this.infiniteDataCount = _this.infiniteRenderMod && !_this.infiniteDataCount ? e[j].count : _this.infiniteDataCount;\n runArray[i++](e[parseInt(j.toString(), 10)].result);\n }\n }).catch(function () {\n if (_this.infiniteRenderMod && _this.parent.filterSettings && _this.parent.filterSettings.loadingIndicator === 'Shimmer') {\n _this.parent.showMaskRow(undefined, _this.dialogObj.element);\n }\n });\n };\n CheckBoxFilterBase.prototype.dataSuccess = function (e) {\n if (!this.infiniteInitialLoad && this.infiniteDataCount && ((this.infiniteSkipCnt >= this.infiniteDataCount\n && !this.infiniteSearchValChange) || (e.length === 0))) {\n return;\n }\n this.fullData = e;\n var args1 = { dataSource: this.fullData, executeQuery: true, field: this.options.field };\n this.parent.notify(events.beforeCheckboxRenderer, args1);\n if (args1.executeQuery) {\n var query = new Query();\n if (!this.customQuery) {\n this.isExecuteLocal = true;\n this.queryGenerate(query);\n this.isExecuteLocal = false;\n }\n // query.select(this.options.field);\n var result = new DataManager(args1.dataSource).executeLocal(query);\n var col = this.options.column;\n this.filteredData = CheckBoxFilterBase.getDistinct(result, this.options.field, col, this.foreignKeyData, this).records || [];\n }\n var data = args1.executeQuery ? this.filteredData : args1.dataSource;\n this.processDataSource(null, true, data, args1);\n if (this.sInput && ((this.infiniteRenderMod && this.infiniteInitialLoad) || !this.infiniteRenderMod)) {\n this.sInput.focus();\n }\n if (this.infiniteInitialLoad || this.infiniteSearchValChange) {\n this.infiniteInitialLoad = false;\n this.infiniteSearchValChange = false;\n }\n var args = {\n requestType: events.filterAfterOpen,\n columnName: this.options.field, columnType: this.options.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.parent.notify(events.cBoxFltrComplete, args);\n if (this.isCheckboxFilterTemplate) {\n hideSpinner(this.spinner);\n }\n };\n CheckBoxFilterBase.prototype.queryGenerate = function (query) {\n if (this.parent.searchSettings && this.parent.searchSettings.key.length) {\n var moduleName = this.options.dataManager.adaptor.getModuleName;\n if (!isNullOrUndefined(this.parent.getDataModule) && moduleName && moduleName() === 'ODataV4Adaptor') {\n this.parent.getDataModule().searchQuery(query);\n }\n else {\n var searchSettings = this.parent.searchSettings;\n var fields = searchSettings.fields.length ? searchSettings.fields\n : this.options.columns.map(function (f) { return f.field; });\n query.search(searchSettings.key, fields, searchSettings.operator, searchSettings.ignoreCase, searchSettings.ignoreAccent);\n }\n }\n if ((this.options.filteredColumns.length)) {\n var cols = [];\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n var filterColumn = this.options.filteredColumns[parseInt(i.toString(), 10)];\n if (this.options.uid) {\n filterColumn.uid = filterColumn.uid || this.parent.getColumnByField(filterColumn.field).uid;\n if (filterColumn.uid !== this.options.uid) {\n cols.push(this.options.filteredColumns[parseInt(i.toString(), 10)]);\n }\n }\n else {\n if (filterColumn.field !== this.options.field) {\n cols.push(this.options.filteredColumns[parseInt(i.toString(), 10)]);\n }\n }\n }\n var predicate = this.getPredicateFromCols(cols, this.isExecuteLocal);\n if (predicate) {\n query.where(predicate);\n }\n }\n };\n CheckBoxFilterBase.prototype.processDataSource = function (query, isInitial, dataSource, args) {\n showSpinner(this.spinner);\n // query = query ? query : this.options.query.clone();\n // query.requiresCount();\n // let result: Object = new DataManager(dataSource as JSON[]).executeLocal(query);\n // let res: { result: Object[] } = result as { result: Object[] };\n this.isExecuteLocal = true;\n this.updateResult();\n this.isExecuteLocal = false;\n var args1 = { dataSource: this.fullData, isCheckboxFilterTemplate: false, column: this.options.column,\n element: this.cBox, type: this.options.type, format: this.options.type, btnObj: this.options.isResponsiveFilter ? null :\n this.dialogObj.btnObj[0], searchBox: this.searchBox };\n this.parent.notify(events.beforeCheckboxfilterRenderer, args1);\n this.isCheckboxFilterTemplate = args1.isCheckboxFilterTemplate;\n if (!this.isCheckboxFilterTemplate) {\n this.createFilterItems(dataSource, isInitial, args);\n }\n else if (this.infiniteRenderMod && this.parent.filterSettings && this.parent.filterSettings.loadingIndicator === 'Shimmer') {\n this.removeMask();\n }\n };\n CheckBoxFilterBase.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n CheckBoxFilterBase.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.infiniteRenderMod && this.existingPredicate[this.options.field] ?\n this.getPredicateFromCols(this.existingPredicate[this.options.field], this.isExecuteLocal) :\n this.getPredicateFromCols(this.options.filteredColumns, this.isExecuteLocal);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n this.parent.notify(events.beforeCheckboxRendererQuery, { query: query });\n var result = new DataManager(this.fullData).executeLocal(query);\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getObject(this.options.field, res)] = true;\n }\n };\n CheckBoxFilterBase.prototype.clickHandler = function (e) {\n var _a;\n if (!isNullOrUndefined(Global.timer)) {\n clearTimeout(Global.timer);\n }\n var target = e.target;\n if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === 'Shimmer'\n && parentsUntil(target, 'e-mask-ftrchk')) {\n return;\n }\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n if (elem && !this.isCheckboxFilterTemplate) {\n var selectAll = elem.querySelector('.e-selectall');\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n }\n else {\n toogleCheckbox(elem.parentElement);\n if (this.infiniteRenderMod && !elem.parentElement.querySelector('.e-add-current')) {\n this.localInfiniteSelectionInteracted = true;\n var caseSen = this.options.allowCaseSensitive;\n var span = elem.parentElement.querySelector('.e-frame');\n var input = span.previousSibling;\n var optr = input.checked ? 'equal' : 'notequal';\n var pred = input.checked ? 'or' : 'and';\n var defaults = { field: this.options.field, predicate: pred, uid: this.options.uid,\n operator: optr, type: this.options.type, matchCase: caseSen, ignoreAccent: this.options.ignoreAccent\n };\n var value = this.values[parentsUntil(input, 'e-ftrchk').getAttribute('uid')];\n this.updateInfiniteManualSelectPred(defaults, value);\n if (this.infiniteRenderMod && !this.options.isRemote && this.options.parentTotalDataCount\n && this.infiniteUnloadParentExistPred.length) {\n var predicate = this.getPredicateFromCols((_a = this.options.filteredColumns).concat.apply(_a, this.infiniteManualSelectMaintainPred), true);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n var result = new DataManager(this.infinitePermenantLocalData).executeLocal(query);\n if (this.options.parentTotalDataCount !== result.length) {\n this.options.parentTotalDataCount = result.length;\n }\n if (!this.options.parentTotalDataCount && this.infiniteUnloadParentExistPred.length) {\n this.infiniteUnloadParentExistPred = [];\n }\n }\n if (this.infiniteUnloadParentExistPred.length && (this.options.parentTotalDataCount === this.infiniteDataCount\n || !this.options.parentTotalDataCount)) {\n this.infiniteUnloadParentExistPred = [];\n }\n }\n }\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n this.setFocus(parentsUntil(elem, 'e-ftrchk'));\n };\n CheckBoxFilterBase.prototype.updateInfiniteManualSelectPred = function (defaults, value) {\n for (var i = 0; i < this.infiniteManualSelectMaintainPred.length; i++) {\n var predmdl = this.infiniteManualSelectMaintainPred[i];\n if (predmdl.value + '' === value + '' && (predmdl.operator === 'equal' || predmdl.operator === 'notequal')) {\n this.infiniteManualSelectMaintainPred.splice(i, 1);\n break;\n }\n }\n if ((defaults.predicate === 'or' && (!this.localInfiniteSelectAllClicked || !this.infiniteLocalSelectAll))\n || (defaults.predicate === 'and' && (!this.localInfiniteSelectAllClicked || this.infiniteLocalSelectAll))) {\n this.infiniteManualSelectMaintainPred.push(extend({}, { value: value }, defaults));\n if (defaults.predicate === 'or') {\n this.options.parentTotalDataCount++;\n }\n else {\n this.options.parentTotalDataCount--;\n }\n }\n };\n /**\n * Method to set the next target element on keyboard navigation using arrow keys.\n *\n * @param {KeyboardEventArgs} e - Defines the Keyboard event argument\n * @param {HTMLElement[]} focusableElements - Defines the Focusable elements\n * @returns {void}\n */\n CheckBoxFilterBase.prototype.focusNextOrPrev = function (e, focusableElements) {\n var nextIndex = (e.key === 'ArrowUp') ? focusableElements.indexOf(document.activeElement) - 1\n : focusableElements.indexOf(document.activeElement) + 1;\n var nextElement = focusableElements[((nextIndex + focusableElements.length) % focusableElements.length)];\n // Set focus on the next / previous element\n if (nextElement) {\n nextElement.focus();\n var target = nextElement.classList.contains('e-chk-hidden') ? parentsUntil(nextElement, 'e-ftrchk') : nextElement;\n this.setFocus(target);\n }\n };\n CheckBoxFilterBase.prototype.keyupHandler = function (e) {\n if (e.key === 'Tab' || ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.altKey)) {\n this.setFocus(parentsUntil(e.target, 'e-ftrchk'));\n }\n if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.altKey && this.parent.filterSettings.type === 'CheckBox') {\n e.preventDefault();\n var focusableElements = Array.from(this.dlg.querySelectorAll('input, button, [tabindex]:not([tabindex=\"-1\"])'));\n this.focusNextOrPrev(e, focusableElements);\n }\n };\n CheckBoxFilterBase.prototype.setFocus = function (elem) {\n var prevElem = this.dlg.querySelector('.e-chkfocus');\n if (prevElem) {\n prevElem.classList.remove('e-chkfocus');\n }\n if (elem && elem !== prevElem) {\n elem.classList.add('e-chkfocus');\n }\n };\n CheckBoxFilterBase.prototype.updateAllCBoxes = function (checked) {\n if (this.infiniteRenderMod) {\n this.localInfiniteSelectAllClicked = true;\n this.infiniteLocalSelectAll = checked;\n this.infiniteUnloadParentExistPred = [];\n this.infiniteManualSelectMaintainPred = [];\n }\n var cBoxes = this.infiniteRenderMod ?\n this.infiniteLoadedElem.map(function (arr) {\n return arr.querySelector('.e-frame');\n }) : [].slice.call(this.cBox.querySelectorAll('.e-frame:not(.e-add-current)'));\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n setChecked(cBox.previousSibling, checked);\n }\n };\n CheckBoxFilterBase.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n if (!this.options.isResponsiveFilter) {\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n }\n };\n CheckBoxFilterBase.prototype.createCheckbox = function (value, checked, data) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) :\n this.cBoxFalse.cloneNode(true);\n setChecked(elem.querySelector('input'), checked);\n var label = elem.querySelector('.e-label');\n var dummyData = extendObjWithFn({}, data, { column: this.options.column, parent: this.parent });\n var innerText = this.options.disableHtmlEncode ? 'textContent' : 'innerHTML';\n label[\"\" + innerText] = !isNullOrUndefined(value) && value.toString().length ?\n this.parent.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value : this.getLocalizedLabel('Blanks');\n var checkboxUid = getUid('cbox');\n label.setAttribute('id', checkboxUid + 'cboxLabel');\n elem.querySelector('input').setAttribute('aria-labelledby', label.id);\n if (label.innerHTML === this.getLocalizedLabel('Blanks')) {\n this.isBlanks = true;\n }\n if (typeof value === 'boolean') {\n label.innerHTML = value === true ? this.getLocalizedLabel('FilterTrue') : this.getLocalizedLabel('FilterFalse');\n }\n addClass([label], ['e-checkboxfiltertext']);\n if (this.options.template && data[this.options.column.field] !== this.getLocalizedLabel('SelectAll')\n && data[this.options.column.field] !== this.getLocalizedLabel('AddCurrentSelection')) {\n label.innerHTML = '';\n var isReactCompiler = this.parent.isReact && this.options.column.filter\n && typeof (this.options.column.filter.itemTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n this.options.template(dummyData, this.parent, 'filterItemTemplate', null, null, null, label);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(label, this.options.template(dummyData, this.parent, 'filterItemTemplate'));\n }\n }\n return elem;\n };\n CheckBoxFilterBase.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.infiniteRenderMod ? this.infiniteLoadedElem.length : this.cBox.children.length - 1;\n var className = [];\n var disabled = false;\n var elem = this.infiniteRenderMod ? this.sBox.querySelector('.e-selectall') : this.cBox.querySelector('.e-selectall');\n var selected = this.infiniteRenderMod ? this.infiniteLoadedElem.filter(function (arr) { return arr.querySelector('.e-check'); }).length :\n this.cBox.querySelectorAll('.e-check:not(.e-selectall):not(.e-add-current)').length;\n if (this.cBox.querySelector('.e-add-current')) {\n cnt -= 1;\n }\n var btn;\n if (!this.options.isResponsiveFilter) {\n btn = this.dialogObj.btnObj[0];\n btn.disabled = false;\n }\n var input = elem.previousSibling;\n setChecked(input, false);\n input.indeterminate = false;\n if (this.infiniteRenderMod && this.sInput.value === '' && !this.options.parentCurrentViewDataCount && !this.localInfiniteSelectionInteracted\n && (!this.localInfiniteSelectAllClicked || (!this.infiniteLocalSelectAll && !selected)) && (cnt !== selected || cnt === selected)) {\n selected = 0;\n }\n else if (this.infiniteRenderMod && this.infiniteLoadedElem.length < this.infiniteDataCount\n && this.infiniteUnloadParentExistPred.length && (!selected || cnt === selected) && this.infiniteLocalSelectAll) {\n if (!selected) {\n selected += this.infiniteUnloadParentExistPred.length;\n }\n else {\n cnt += this.infiniteUnloadParentExistPred.length;\n }\n }\n if (cnt === selected) {\n if (this.infiniteRenderMod) {\n this.infiniteLocalSelectAll = true;\n this.localInfiniteSelectAllClicked = true;\n this.infiniteManualSelectMaintainPred = [];\n }\n className = ['e-check'];\n setChecked(input, true);\n }\n else if (selected) {\n className = ['e-stop'];\n input.indeterminate = true;\n }\n else {\n if (this.infiniteRenderMod) {\n this.infiniteLocalSelectAll = false;\n this.localInfiniteSelectAllClicked = true;\n this.infiniteManualSelectMaintainPred = [];\n }\n className = ['e-uncheck'];\n disabled = true;\n if (btn) {\n btn.disabled = true;\n }\n }\n if (btn) {\n this.filterState = !btn.disabled;\n btn.dataBind();\n }\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: disabled });\n };\n CheckBoxFilterBase.prototype.createFilterItems = function (data, isInitial, args1) {\n var _a, _b, _c;\n var cBoxes = this.parent.createElement('div');\n var btn;\n var disabled = false;\n if (!this.options.isResponsiveFilter) {\n btn = this.dialogObj.btnObj[0];\n }\n var nullCounter = -1;\n var key = 'ejValue';\n if (!args1.executeQuery) {\n key = args1.field;\n }\n for (var i = 0; i < data.length; i++) {\n var val = getValue(key, data[parseInt(i.toString(), 10)]);\n if (val === '' || isNullOrUndefined(val)) {\n nullCounter = nullCounter + 1;\n }\n }\n if (!this.infiniteRenderMod) {\n this.itemsCnt = nullCounter !== -1 ? data.length - nullCounter : data.length;\n }\n if (this.infiniteRenderMod && this.parent.filterSettings && this.parent.filterSettings.loadingIndicator === 'Shimmer') {\n this.removeMask();\n }\n if (data.length && !this.renderEmpty) {\n var selectAllValue = this.getLocalizedLabel('SelectAll');\n var innerDiv = this.cBox.querySelector('.e-checkfltrnmdiv');\n if (innerDiv) {\n innerDiv.classList.remove('e-checkfltrnmdiv');\n }\n var checkBox = this.createCheckbox(selectAllValue, false, (_a = {}, _a[this.options.field] = selectAllValue, _a));\n if (this.parent.cssClass) {\n if (this.parent.cssClass.indexOf(' ') !== -1) {\n addClass([checkBox], this.parent.cssClass.split(' '));\n }\n else {\n addClass([checkBox], [this.parent.cssClass]);\n }\n }\n if (this.infiniteInitialLoad || !this.infiniteRenderMod) {\n var selectAll = createCboxWithWrap(getUid('cbox'), checkBox, 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n if (this.infiniteRenderMod) {\n selectAll.classList.add('e-infinitescroll');\n this.sBox.insertBefore(selectAll, this.spinner);\n }\n else {\n cBoxes.appendChild(selectAll);\n }\n }\n else if (this.sBox.querySelector('.e-ftrchk .e-selectall')) {\n this.sBox.querySelector('.e-ftrchk .e-selectall').previousSibling.disabled = false;\n this.sBox.querySelector('.e-ftrchk .e-selectall').parentElement.classList.remove('e-checkbox-disabled');\n }\n var predicate = new Predicate('field', 'equal', this.options.field);\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n if (this.sInput.value) {\n var predicateCheckBox = this.createCheckbox(this.getLocalizedLabel('AddCurrentSelection'), false, (_b = {},\n _b[this.options.field] = this.getLocalizedLabel('AddCurrentSelection'),\n _b));\n if (this.parent.cssClass) {\n if (this.parent.cssClass.indexOf(' ') !== -1) {\n addClass([predicateCheckBox], this.parent.cssClass.split(' '));\n }\n else {\n addClass([predicateCheckBox], [this.parent.cssClass]);\n }\n }\n if ((this.infiniteRenderMod && (!isNullOrUndefined(this.sBox.children[2])\n && this.sBox.children[2].innerText !== 'Add current selection to filter')) || !this.infiniteRenderMod) {\n var predicateElement = createCboxWithWrap(getUid('cbox'), predicateCheckBox, 'e-ftrchk');\n predicateElement.querySelector('.e-frame').classList.add('e-add-current');\n if (this.infiniteRenderMod) {\n this.sBox.insertBefore(predicateElement, this.spinner);\n var checkBoxListElem = this.spinner.querySelector('.e-checkboxlist');\n var reduceHeight = Math.ceil(predicateElement.getBoundingClientRect().height);\n checkBoxListElem.style.height = (parseInt(getComputedStyle(checkBoxListElem).height.split('px')[0], 10) - reduceHeight)\n + 'px';\n checkBoxListElem.style.minHeight = checkBoxListElem.style.height;\n }\n else {\n cBoxes.appendChild(predicateElement);\n }\n }\n else if (this.sBox.querySelector('.e-ftrchk .e-add-current')) {\n this.sBox.querySelector('.e-ftrchk .e-add-current').previousSibling.disabled = false;\n this.sBox.querySelector('.e-ftrchk .e-add-current').parentElement.classList.remove('e-checkbox-disabled');\n }\n }\n else if (this.infiniteRenderMod && !isNullOrUndefined(this.sBox.children[2])\n && this.sBox.children[2].innerText === 'Add current selection to filter') {\n var checkBoxListElem = this.spinner.querySelector('.e-checkboxlist');\n var increaseHeight = Math.ceil(this.sBox.children[2].getBoundingClientRect().height);\n checkBoxListElem.style.height = (parseInt(getComputedStyle(checkBoxListElem).height.split('px')[0], 10) + increaseHeight)\n + 'px';\n checkBoxListElem.style.minHeight = checkBoxListElem.style.height;\n remove(this.sBox.children[2]);\n }\n var isRndere = void 0;\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[\"\" + uid] = getValue(key, data[parseInt(i.toString(), 10)]);\n var value = getValue(this.options.field, data[parseInt(i.toString(), 10)]);\n if (this.options.formatFn) {\n value = this.valueFormatter.toView(value, this.options.formatFn);\n }\n var args_1 = { value: value, column: this.options.column, data: data[parseInt(i.toString(), 10)] };\n this.parent.notify(events.filterCboxValue, args_1);\n value = args_1.value;\n if ((value === '' || isNullOrUndefined(value))) {\n if (isRndere) {\n continue;\n }\n isRndere = true;\n }\n if (this.infiniteRenderMod) {\n this.updateInfiniteUnLoadedCheckboxExistPred(value, this.infiniteUnloadParentExistPred);\n }\n var checkbox = this.localInfiniteSelectAllClicked ?\n this.createCheckbox(value, this.infiniteLocalSelectAll, getValue('dataObj', data[i])) :\n this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[\"\" + uid]), getValue('dataObj', data[i]));\n cBoxes.appendChild(createCboxWithWrap(uid, checkbox, 'e-ftrchk'));\n if (this.infiniteRenderMod) {\n cBoxes.lastChild.style.height = this.getListHeight(this.cBox) + 'px';\n }\n }\n var scrollTop = this.cBox.scrollTop;\n if (!this.infiniteRenderMod || this.infiniteSearchValChange) {\n this.cBox.innerHTML = '';\n }\n else if (this.infiniteRenderMod && this.cBox.children.length) {\n this.infiniteRemoveElements(([].slice.call(this.cBox.children)).splice(0, this.parent.filterSettings.itemsCount));\n }\n if (this.infiniteRenderMod) {\n (_c = this.infiniteLoadedElem).push.apply(_c, [].slice.call(cBoxes.children));\n this.itemsCnt = nullCounter !== -1 ? this.infiniteLoadedElem.length - nullCounter : this.infiniteLoadedElem.length;\n }\n if (this.infiniteUnloadParentExistPred.length && (this.infiniteLoadedElem.length >= this.infiniteDataCount\n || !this.options.parentCurrentViewDataCount || (this.options.parentTotalDataCount === this.infiniteDataCount\n && this.options.parentCurrentViewDataCount))) {\n this.infiniteUnloadParentExistPred = [];\n }\n appendChildren(this.cBox, [].slice.call(cBoxes.children));\n if (this.infiniteRenderMod && !this.infiniteScrollAppendDiff) {\n this.infiniteScrollAppendDiff = Math.round(scrollTop - this.cBox.scrollTop);\n }\n this.updateIndeterminatenBtn();\n if (!this.infiniteRenderMod) {\n if (btn) {\n btn.disabled = false;\n }\n disabled = false;\n }\n else {\n if (btn.disabled) {\n disabled = true;\n }\n else {\n disabled = false;\n }\n }\n }\n else {\n cBoxes.appendChild(this.parent.createElement('span', { innerHTML: this.getLocalizedLabel('NoResult') }));\n this.cBox.innerHTML = '';\n if (this.infiniteRenderMod) {\n var selectAll = this.sBox.querySelector('.e-ftrchk .e-selectall');\n if (selectAll) {\n var selectAllParent = selectAll.parentElement.parentElement;\n if (selectAll.classList.contains('e-check')) {\n toogleCheckbox(selectAllParent);\n }\n else if (selectAll.classList.contains('e-stop')) {\n toogleCheckbox(selectAllParent);\n selectAll.classList.remove('e-stop');\n toogleCheckbox(selectAllParent);\n }\n selectAll.previousSibling.disabled = true;\n selectAll.parentElement.classList.add('e-checkbox-disabled');\n }\n var addCurrSelection = this.sBox.querySelector('.e-ftrchk .e-add-current');\n if (addCurrSelection) {\n var addCurrSelectionParent = addCurrSelection.parentElement.parentElement;\n if (addCurrSelection.classList.contains('e-check')) {\n toogleCheckbox(addCurrSelectionParent);\n }\n addCurrSelection.previousSibling.disabled = true;\n addCurrSelection.parentElement.classList.add('e-checkbox-disabled');\n }\n }\n this.cBox.appendChild(this.parent.createElement('div', { className: 'e-checkfltrnmdiv' }));\n appendChildren(this.cBox.children[0], [].slice.call(cBoxes.children));\n if (btn) {\n btn.disabled = true;\n }\n disabled = true;\n this.filterState = !disabled;\n }\n if (btn && data.length) {\n this.filterState = !btn.disabled;\n btn.dataBind();\n }\n var args = { requestType: events.filterChoiceRequest, dataSource: this.renderEmpty ? [] : data };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.parent.notify(events.cBoxFltrComplete, args);\n this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: disabled });\n if (this.infiniteRenderMod && this.infiniteInitialLoad) {\n this.cBox.style.marginTop = '0px';\n }\n hideSpinner(this.spinner);\n };\n CheckBoxFilterBase.prototype.updateInfiniteUnLoadedCheckboxExistPred = function (value, updatePredArr) {\n for (var j = 0; j < updatePredArr.length; j++) {\n var pred = updatePredArr[j];\n if (value === pred.value && (pred.operator === 'equal' || pred.operator === 'notequal')) {\n this.infiniteManualSelectMaintainPred.push(updatePredArr[j]);\n updatePredArr.splice(j, 1);\n j--;\n }\n }\n };\n CheckBoxFilterBase.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n }\n else {\n var checkState = this.sInput.value ? true : this.result[\"\" + value];\n if (this.infiniteRenderMod) {\n return checkState;\n }\n else {\n return this.options.operator === 'notequal' ? !checkState : checkState;\n }\n }\n };\n CheckBoxFilterBase.getDistinct = function (json, field, column, foreignKeyData, checkboxFilter) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn ? column.isForeignColumn() : false;\n while (len--) {\n value = json[parseInt(len.toString(), 10)];\n if (column && column.type === 'dateonly' && typeof value[\"\" + field] === 'string' && value[\"\" + field]) {\n var arr = value[\"\" + field].split(/[^0-9.]/);\n value[\"\" + field] = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));\n }\n value = getObject(field, value); //local remote diff, check with mdu\n var currentFilterValue = (typeof value === 'string') && !(isNullOrUndefined(checkboxFilter)) &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !(isNullOrUndefined(checkboxFilter.parent)) && !(isNullOrUndefined(checkboxFilter.parent.filterSettings)) &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !(isNullOrUndefined(checkboxFilter.parent.filterSettings.enableCaseSensitivity)) ? value.toLowerCase() : value;\n if (!(currentFilterValue in lookup)) {\n var obj = {};\n obj[\"\" + ejValue] = value;\n lookup[\"\" + currentFilterValue] = true;\n if (isForeignKey) {\n var foreignDataObj = getForeignData(column, {}, value, foreignKeyData)[0];\n setValue(events.foreignKeyData, foreignDataObj, json[parseInt(len.toString(), 10)]);\n value = getValue(column.foreignKeyValue, foreignDataObj);\n }\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n setValue('dataObj', json[parseInt(len.toString(), 10)], obj);\n result.push(obj);\n }\n }\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n CheckBoxFilterBase.getPredicate = function (columns, isExecuteLocal) {\n var cols = DataUtil.distinct(columns, 'field', true) || [];\n var collection = [];\n var pred = {};\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[parseInt(i.toString(), 10)].field));\n if (collection.length !== 0) {\n pred[cols[parseInt(i.toString(), 10)].field] = CheckBoxFilterBase.generatePredicate(collection, isExecuteLocal);\n }\n }\n return pred;\n };\n CheckBoxFilterBase.generatePredicate = function (cols, isExecuteLocal) {\n var len = cols ? cols.length : 0;\n var predicate;\n var operate = 'or';\n var first = CheckBoxFilterBase.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n if (first.type === 'date' || first.type === 'datetime' || first.type === 'dateonly') {\n predicate = getDatePredicate(first, first.type, isExecuteLocal);\n }\n else {\n predicate = first.ejpredicate ? first.ejpredicate :\n new Predicate(first.field, first.operator, first.value, !CheckBoxFilterBase.getCaseValue(first), first.ignoreAccent);\n }\n for (var p = 1; p < len; p++) {\n cols[parseInt(p.toString(), 10)] = CheckBoxFilterBase.updateDateFilter(cols[parseInt(p.toString(), 10)]);\n if (len > 2 && p > 1 && ((cols[p].predicate === 'or' && cols[p - 1].predicate === 'or')\n || (cols[p].predicate === 'and' && cols[p - 1].predicate === 'and'))) {\n if (cols[p].type === 'date' || cols[p].type === 'datetime' || cols[p].type === 'dateonly') {\n predicate.predicates.push(getDatePredicate(cols[parseInt(p.toString(), 10)], cols[p].type, isExecuteLocal));\n }\n else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[parseInt(p.toString(), 10)].operator, cols[parseInt(p.toString(), 10)].value, !CheckBoxFilterBase.getCaseValue(cols[parseInt(p.toString(), 10)]), cols[parseInt(p.toString(), 10)].ignoreAccent));\n }\n }\n else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime' || cols[p].type === 'dateonly') {\n if (cols[parseInt(p.toString(), 10)].predicate === 'and' && cols[parseInt(p.toString(), 10)].operator === 'equal') {\n predicate = predicate[\"\" + operate](getDatePredicate(cols[parseInt(p.toString(), 10)], cols[parseInt(p.toString(), 10)].type, isExecuteLocal), cols[parseInt(p.toString(), 10)].type, cols[parseInt(p.toString(), 10)].ignoreAccent);\n }\n else {\n predicate = predicate[(cols[parseInt(p.toString(), 10)].predicate)](getDatePredicate(cols[parseInt(p.toString(), 10)], cols[parseInt(p.toString(), 10)].type, isExecuteLocal), cols[parseInt(p.toString(), 10)].type, cols[parseInt(p.toString(), 10)].ignoreAccent);\n }\n }\n else {\n predicate = cols[parseInt(p.toString(), 10)].ejpredicate ?\n predicate[cols[parseInt(p.toString(), 10)]\n .predicate](cols[parseInt(p.toString(), 10)].ejpredicate) :\n predicate[(cols[parseInt(p.toString(), 10)].predicate)](cols[parseInt(p.toString(), 10)].field, cols[parseInt(p.toString(), 10)].operator, cols[parseInt(p.toString(), 10)].value, !CheckBoxFilterBase.getCaseValue(cols[parseInt(p.toString(), 10)]), cols[parseInt(p.toString(), 10)].ignoreAccent);\n }\n }\n }\n return predicate || null;\n };\n CheckBoxFilterBase.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n if (filter.type === 'string' || isNullOrUndefined(filter.type) && typeof (filter.value) === 'string') {\n return false;\n }\n else {\n return true;\n }\n }\n else {\n return filter.matchCase;\n }\n };\n CheckBoxFilterBase.updateDateFilter = function (filter) {\n if ((filter.type === 'date' || filter.type === 'datetime' || filter.type === 'dateonly' || filter.value instanceof Date)) {\n filter.type = filter.type || 'date';\n }\n return filter;\n };\n return CheckBoxFilterBase;\n}());\nexport { CheckBoxFilterBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { EventHandler, remove, Browser } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { RadioButton, CheckBox } from '@syncfusion/ej2-buttons';\nimport { distinctStringValues, isComplexField, getComplexFieldID, getCustomDateFormat, applyBiggerTheme, performComplexDataOperation, registerEventHandlers, removeEventHandlers, clearReactVueTemplates } from '../base/util';\nimport { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { parentsUntil, appendChildren, extend, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport { ContextMenu } from '@syncfusion/ej2-navigations';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\nimport * as literals from '../base/string-literals';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilterBase = /** @class */ (function (_super) {\n __extends(ExcelFilterBase, _super);\n /**\n * Constructor for excel filtering module\n *\n * @param {IXLFilter} parent - parent details\n * @param {Object} customFltrOperators - operator details\n * @hidden\n */\n function ExcelFilterBase(parent, customFltrOperators) {\n var _this = _super.call(this, parent) || this;\n _this.childRefs = [];\n _this.eventHandlers = {};\n _this.isDevice = false;\n _this.focusedMenuItem = null;\n _this.customFilterOperators = customFltrOperators;\n _this.isExcel = true;\n return _this;\n }\n ExcelFilterBase.prototype.getCMenuDS = function (type, operator) {\n var options = {\n number: ['Equal', 'NotEqual', '', 'LessThan', 'LessThanOrEqual', 'GreaterThan',\n 'GreaterThanOrEqual', 'Between', '', 'CustomFilter'],\n string: ['Equal', 'NotEqual', '', 'StartsWith', 'EndsWith', '', 'Contains', 'NotContains', '', 'CustomFilter']\n };\n options.date = options.number;\n options.datetime = options.number;\n options.dateonly = options.number;\n var model = [];\n for (var i = 0; i < options[\"\" + type].length; i++) {\n if (options[\"\" + type][parseInt(i.toString(), 10)].length) {\n if (operator) {\n model.push({\n text: this.getLocalizedLabel(options[\"\" + type][parseInt(i.toString(), 10)]) + '...',\n iconCss: 'e-icons e-icon-check ' + (operator === options[\"\" + type][parseInt(i.toString(), 10)].toLowerCase() ? '' : 'e-emptyicon')\n });\n }\n else {\n model.push({\n text: this.getLocalizedLabel(options[\"\" + type][parseInt(i.toString(), 10)]) + '...'\n });\n }\n }\n else {\n model.push({ separator: true });\n }\n }\n return model;\n };\n /**\n * To destroy the filter bar.\n *\n * @returns {void}\n * @hidden\n */\n ExcelFilterBase.prototype.destroy = function () {\n if (this.dlg) {\n this.unwireExEvents();\n _super.prototype.closeDialog.call(this);\n }\n if (!this.isDevice && this.menuObj) {\n var li = this.menuObj.element.querySelector('li.e-focused');\n if (!(li && parentsUntil(li, 'e-excel-menu'))) {\n this.destroyCMenu();\n }\n }\n if (this.dlgObj && !this.dlgObj.isDestroyed) {\n this.removeDialog();\n }\n };\n ExcelFilterBase.prototype.createMenu = function (type, isFiltered, isCheckIcon, eleOptions) {\n var options = { string: 'TextFilter', date: 'DateFilter', dateonly: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n this.menu = this.parent.createElement('div', { className: 'e-contextmenu-wrapper' });\n if (this.parent.enableRtl) {\n this.menu.classList.add('e-rtl');\n }\n else {\n this.menu.classList.remove('e-rtl');\n }\n if (this.parent.cssClass) {\n this.menu.classList.add(this.parent.cssClass);\n }\n var ul = this.parent.createElement('ul');\n var icon = isFiltered ? 'e-excl-filter-icon e-filtered' : 'e-excl-filter-icon';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.parent.allowSorting && this.parent.getModuleName() === 'grid'\n && !this.options.isResponsiveFilter) {\n var hdrele = this.parent.getColumnHeaderByUid(eleOptions.uid).getAttribute('aria-sort');\n var colIsSort = this.parent.getColumnByField(eleOptions.field).allowSorting;\n var isAsc = (!colIsSort || hdrele === 'ascending') ? 'e-disabled e-excel-ascending' : 'e-excel-ascending';\n var isDesc = (!colIsSort || hdrele === 'descending') ? 'e-disabled e-excel-descending' : 'e-excel-descending';\n var ascName = (type === 'string') ? this.getLocalizedLabel('SortAtoZ') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByOldest') : this.getLocalizedLabel('SortSmallestToLargest');\n var descName = (type === 'string') ? this.getLocalizedLabel('SortZtoA') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByNewest') : this.getLocalizedLabel('SortLargestToSmallest');\n ul.appendChild(this.createMenuElem(ascName, isAsc, 'e-sortascending'));\n ul.appendChild(this.createMenuElem(descName, isDesc, 'e-sortdescending'));\n var separator = this.parent.createElement('li', { className: 'e-separator e-menu-item e-excel-separator' });\n ul.appendChild(separator);\n }\n if (!this.options.isResponsiveFilter) {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel('ClearFilter'), isFiltered ? '' : 'e-disabled', icon));\n }\n if (type !== 'boolean') {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options[\"\" + type]), 'e-submenu', isCheckIcon && this.ensureTextFilter() ? 'e-icon-check' : icon + ' e-emptyicon', true));\n }\n this.menu.appendChild(ul);\n this.parent.notify(events.beforeFltrcMenuOpen, { element: this.menu });\n this.parent.notify(events.refreshCustomFilterClearBtn, { isFiltered: isFiltered });\n };\n ExcelFilterBase.prototype.createMenuElem = function (val, className, iconName, isSubMenu) {\n var li = this.parent.createElement('li', { className: className + ' e-menu-item' });\n li.innerHTML = val;\n li.tabIndex = li.classList.contains('e-disabled') ? -1 : 0;\n li.insertBefore(this.parent.createElement('span', { className: 'e-menu-icon e-icons ' + iconName, attrs: { 'aria-hidden': 'true' } }), li.firstChild);\n if (isSubMenu) {\n li.appendChild(this.parent.createElement('span', { className: 'e-icons e-caret' }));\n }\n return li;\n };\n ExcelFilterBase.prototype.wireExEvents = function () {\n if (!Browser.isDevice) {\n EventHandler.add(this.dlg, 'mouseover', this.hoverHandler, this);\n }\n EventHandler.add(this.dlg, 'click', this.clickExHandler, this);\n EventHandler.add(this.dlg, 'keyup', this.keyUp, this);\n EventHandler.add(this.dlg, 'keydown', this.keyDown, this);\n };\n ExcelFilterBase.prototype.unwireExEvents = function () {\n if (!Browser.isDevice) {\n EventHandler.remove(this.dlg, 'mouseover', this.hoverHandler);\n }\n EventHandler.remove(this.dlg, 'click', this.clickExHandler);\n EventHandler.remove(this.dlg, 'keyup', this.keyUp);\n EventHandler.remove(this.dlg, 'keydown', this.keyDown);\n };\n ExcelFilterBase.prototype.clickExHandler = function (e) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var menuItem = parentsUntil(e.target, 'e-menu-item');\n if (menuItem) {\n if (this.getLocalizedLabel('ClearFilter') === menuItem.innerText.trim()) {\n this.clearFilter();\n this.closeDialog();\n }\n else if ((this.options.isResponsiveFilter || Browser.isDevice)\n && this.getLocalizedLabel(options[this.options.type]) === menuItem.innerText.trim()) {\n this.hoverHandler(e);\n }\n }\n };\n ExcelFilterBase.prototype.focusNextOrPrevElement = function (e, focusableElements, focusClassName) {\n var nextIndex = (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) ? focusableElements.indexOf(document.activeElement) - 1\n : focusableElements.indexOf(document.activeElement) + 1;\n var nextElement = focusableElements[((nextIndex + focusableElements.length) % focusableElements.length)];\n // Set focus on the next / previous element\n if (nextElement) {\n nextElement.focus();\n var focusClass = nextElement.classList.contains('e-chk-hidden') ? 'e-chkfocus' : focusClassName;\n var target = nextElement.classList.contains('e-chk-hidden') ? parentsUntil(nextElement, 'e-ftrchk') : parentsUntil(nextElement, 'e-menu-item');\n this.excelSetFocus(target, focusClass);\n }\n };\n ExcelFilterBase.prototype.keyUp = function (e) {\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {\n var focusClass = e.target.classList.contains('e-chk-hidden') ? 'e-chkfocus' : 'e-menufocus';\n var target = e.target.classList.contains('e-menu-item')\n ? parentsUntil(e.target, 'e-menu-item') : parentsUntil(e.target, 'e-ftrchk');\n this.excelSetFocus(target, focusClass);\n }\n else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.altKey) {\n e.preventDefault();\n var focusableElements = Array.from(this.dlg.querySelectorAll('input, button, [tabindex]:not([tabindex=\"-1\"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));\n this.focusNextOrPrevElement(e, focusableElements, 'e-menufocus');\n }\n else if ((e.key === 'Enter' || e.code === 'ArrowRight') && e.target.classList.contains('e-menu-item')) {\n e.preventDefault();\n e.target.click();\n if (e.target.classList.contains('e-submenu')) {\n this.hoverHandler(e);\n this.menuObj.element.querySelector('.e-menu-item').focus();\n this.excelSetFocus(parentsUntil(this.menuObj.element.querySelector('.e-menu-item'), 'e-menu-item'), 'e-focused');\n this.focusedMenuItem = this.menuObj.element.querySelector('.e-menu-item');\n }\n }\n };\n ExcelFilterBase.prototype.keyDown = function (e) {\n //prevented up and down arrow key press default functionality to prevent the browser scroll when performing keyboard navigation in excel filter element.\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n }\n };\n ExcelFilterBase.prototype.excelSetFocus = function (elem, className) {\n var prevElem = this.cmenu.querySelector('.' + className);\n if (prevElem) {\n prevElem.classList.remove(className);\n }\n if (elem) {\n elem.classList.add(className);\n }\n };\n ExcelFilterBase.prototype.destroyCMenu = function () {\n this.isCMenuOpen = false;\n if (this.menuObj && !this.menuObj.isDestroyed) {\n this.menuObj.destroy();\n EventHandler.remove(this.menuObj.element, 'keydown', this.contextKeyDownHandler);\n remove(this.cmenu);\n this.parent.notify(events.renderResponsiveCmenu, { target: null, header: '', isOpen: false, col: this.options.column });\n }\n };\n ExcelFilterBase.prototype.hoverHandler = function (e) {\n if (this.options.isResponsiveFilter && e.type === 'mouseover') {\n return;\n }\n var target = e.target.querySelector('.e-contextmenu');\n var li = parentsUntil(e.target, 'e-menu-item');\n var focused = this.menu.querySelector('.e-focused');\n var isSubMenu;\n if (focused) {\n focused.classList.remove('e-focused');\n }\n if (li) {\n li.classList.add('e-focused');\n isSubMenu = li.classList.contains('e-submenu');\n }\n if (target) {\n return;\n }\n if (!isSubMenu) {\n var submenu = this.menu.querySelector('.e-submenu');\n if (!isNullOrUndefined(submenu)) {\n submenu.classList.remove('e-selected');\n }\n this.destroyCMenu();\n }\n var selectedMenu = this.ensureTextFilter();\n if (!this.isCMenuOpen && isSubMenu) {\n li.classList.add('e-selected');\n this.isCMenuOpen = true;\n var menuOptions = {\n items: this.getCMenuDS(this.options.type, selectedMenu ? selectedMenu.replace(/\\s/g, '') : undefined),\n select: this.selectHandler.bind(this),\n onClose: this.destroyCMenu.bind(this),\n enableRtl: this.parent.enableRtl,\n animationSettings: { effect: 'None' },\n beforeClose: this.preventClose.bind(this),\n cssClass: this.options.isResponsiveFilter && this.parent.cssClass ?\n 'e-res-contextmenu-wrapper' + ' ' + this.parent.cssClass : this.options.isResponsiveFilter ?\n 'e-res-contextmenu-wrapper' : this.parent.cssClass ? this.parent.cssClass : ''\n };\n this.parent.element.appendChild(this.cmenu);\n this.menuObj = new ContextMenu(menuOptions, this.cmenu);\n EventHandler.add(this.menuObj.element, 'keydown', this.contextKeyDownHandler, this);\n var client = this.menu.querySelector('.e-submenu').getBoundingClientRect();\n var pos = { top: 0, left: 0 };\n if (this.options.isResponsiveFilter) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.menuObj.element.style.height = 'calc(100% - ' + height + 'px)';\n this.menuObj['open'](height, 0, document.body);\n var header = this.getLocalizedLabel(options[this.options.type]);\n this.parent.notify(events.renderResponsiveCmenu, {\n target: this.menuObj.element.parentElement, header: header, isOpen: true\n });\n }\n else {\n if (Browser.isDevice) {\n this.isDevice = true;\n var contextRect = this.getContextBounds();\n pos.top = (window.innerHeight - contextRect.height) / 2;\n pos.left = (window.innerWidth - contextRect.width) / 2;\n this.closeDialog();\n this.isDevice = false;\n }\n else {\n pos.top = Browser.isIE ? window.pageYOffset + client.top : window.scrollY + client.top;\n pos.left = this.getCMenuYPosition(this.dlg);\n }\n this.menuObj['open'](pos.top, pos.left, e.target);\n }\n applyBiggerTheme(this.parent.element, this.menuObj.element.parentElement);\n }\n };\n ExcelFilterBase.prototype.contextKeyDownHandler = function (e) {\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {\n e.preventDefault();\n var focusableElements = Array.from(this.menuObj.element.querySelectorAll('[tabindex]:not([tabindex=\"-1\"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));\n // Focus the next / previous context menu item\n this.focusNextOrPrevElement(e, focusableElements, 'e-focused');\n }\n else if (e.key === 'ArrowLeft' || e.key === 'Escape') {\n e.preventDefault();\n this.menuObj.close();\n this.focusedMenuItem = null;\n document.querySelector('.e-submenu.e-menu-item').classList.remove('e-selected');\n document.querySelector('.e-submenu.e-menu-item').focus();\n }\n };\n ExcelFilterBase.prototype.ensureTextFilter = function () {\n var selectedMenu;\n var predicates = this.existingPredicate[this.options.field];\n if (predicates && predicates.length === 2) {\n if (predicates[0].operator === 'greaterthanorequal' && predicates[1].operator === 'lessthanorequal') {\n selectedMenu = 'between';\n }\n else {\n selectedMenu = 'customfilter';\n }\n }\n else {\n if (predicates && predicates.length === 1) {\n this.optrData = this.customFilterOperators[this.options.type + 'Operator'];\n selectedMenu = predicates[0].operator;\n }\n }\n return selectedMenu;\n };\n ExcelFilterBase.prototype.preventClose = function (args) {\n if (this.options && this.options.isResponsiveFilter && args.event) {\n var target = args.event.target;\n var isFilterBack = target.classList.contains('e-resfilterback')\n || target.classList.contains('e-res-back-btn') || target.classList.contains('e-menu-item');\n args.cancel = !isFilterBack;\n }\n else {\n if (args.event instanceof MouseEvent && args.event.target.classList.contains('e-submenu')) {\n args.cancel = true;\n }\n }\n };\n ExcelFilterBase.prototype.getContextBounds = function () {\n this.menuObj.element.style.display = 'block';\n return this.menuObj.element.getBoundingClientRect();\n };\n ExcelFilterBase.prototype.getCMenuYPosition = function (target) {\n var contextWidth = this.getContextBounds().width;\n var targetPosition = target.getBoundingClientRect();\n var leftPos = targetPosition.right + contextWidth - this.parent.element.clientWidth;\n var targetBorder = target.offsetWidth - target.clientWidth;\n targetBorder = targetBorder ? targetBorder + 1 : 0;\n return (leftPos < 1) ? (targetPosition.right + 1 - targetBorder) : (targetPosition.left - contextWidth - 1 + targetBorder);\n };\n ExcelFilterBase.prototype.openDialog = function (options) {\n var _this = this;\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n if (options.cancel) {\n return;\n }\n this.dialogObj.dataBind();\n var filterLength = (this.existingPredicate[options.field] && this.existingPredicate[options.field].length) ||\n this.options.filteredColumns.filter(function (col) {\n return _this.options.field === col.field;\n }).length;\n this.createMenu(options.type, filterLength > 0, (filterLength === 1 || filterLength === 2), options);\n this.dlg.insertBefore(this.menu, this.dlg.firstChild);\n this.dlg.classList.add('e-excelfilter');\n if (this.parent.enableRtl) {\n this.dlg.classList.add('e-rtl');\n }\n this.dlg.classList.remove('e-checkboxfilter');\n this.cmenu = this.parent.createElement('ul', { className: 'e-excel-menu' });\n var menuItems = this.dlg.querySelectorAll('.e-menu-item');\n menuItems.forEach(function (menuItem) {\n if (menuItem.scrollWidth > menuItem.clientWidth) {\n menuItem.setAttribute('title', menuItem.textContent);\n }\n });\n if (options.column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, {});\n }\n this.wireExEvents();\n };\n ExcelFilterBase.prototype.closeDialog = function () {\n this.destroy();\n };\n ExcelFilterBase.prototype.selectHandler = function (e) {\n if (e.item) {\n this.parent.notify(events.filterCmenuSelect, {});\n this.menuItem = e.item;\n this.closeDialog();\n this.renderDialogue(e);\n }\n };\n /**\n * @hidden\n * @param {MenuEventArgs} e - event args\n * @returns {void}\n */\n ExcelFilterBase.prototype.renderDialogue = function (e) {\n var _this = this;\n var target = e ? e.element : undefined;\n var column = this.options.field;\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var mainDiv = this.parent.createElement('div', {\n className: 'e-xlfl-maindiv',\n id: isComplex ? complexFieldName + '-xlflmenu' : column + '-xlflmenu'\n });\n this.dlgDiv = this.parent.createElement('div', {\n className: 'e-xlflmenu',\n id: isComplex ? complexFieldName + '-xlfldlg' : column + '-xlfldlg'\n });\n if (this.options.isResponsiveFilter) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n header: this.getLocalizedLabel('CustomFilter'),\n isModal: true,\n overlayClick: this.removeDialog.bind(this),\n showCloseIcon: true,\n locale: this.parent.locale,\n closeOnEscape: true,\n target: document.body,\n // target: this.parent.element,\n visible: false,\n enableRtl: this.parent.enableRtl,\n open: function () {\n var rows = [].slice.call(_this.dlgObj.element.querySelectorAll('table.e-xlfl-table tr.e-xlfl-fields'));\n for (var i = 0; i < rows.length; i++) {\n var valInput = rows[i].children[1].querySelector('.e-control');\n var dropDownList = rows[i]\n .querySelector('.e-dropdownlist.e-control')['ej2_instances'][0];\n if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||\n dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (valInput && !isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n }\n var row = _this.dlgObj.element.querySelector('table.e-xlfl-table>tr');\n if (_this.options.column.filterTemplate) {\n var templateField_1 = isComplexField(_this.options.column.field) ?\n getComplexFieldID(_this.options.column.field) : _this.options.column.field;\n var isReactCompiler = _this.parent.isReact && typeof (_this.options.column.filterTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = _this.parent.parentDetails && _this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n _this.parent.renderTemplates(function () {\n row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();\n });\n }\n else {\n row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();\n }\n }\n else {\n //(row.cells[1].querySelector('input:not([type=hidden])') as HTMLElement).focus();\n }\n },\n close: this.removeDialog.bind(this),\n created: this.createdDialog.bind(this, target, column),\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.getLocalizedLabel('OKButton'), isPrimary: true,\n cssClass: this.parent.cssClass ? 'e-xlfl-okbtn' + ' ' + this.parent.cssClass : 'e-xlfl-okbtn'\n }\n },\n {\n click: this.removeDialog.bind(this),\n buttonModel: { content: this.getLocalizedLabel('CancelButton'),\n cssClass: this.parent.cssClass ? 'e-xlfl-cancelbtn' + ' ' + this.parent.cssClass : 'e-xlfl-cancelbtn' }\n }],\n content: mainDiv,\n width: 430,\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgDiv.setAttribute('aria-label', this.getLocalizedLabel('CustomFilterDialogARIA'));\n this.childRefs.unshift(this.dlgObj);\n this.dlgObj.appendTo(this.dlgDiv);\n };\n ExcelFilterBase.prototype.renderResponsiveDialog = function () {\n if (this.options.isResponsiveFilter) {\n var rowResponsiveDlg = document.querySelector('.e-row-responsive-filter');\n if (rowResponsiveDlg) {\n rowResponsiveDlg.classList.remove('e-row-responsive-filter');\n }\n this.dlgObj.buttons = [{}];\n this.dlgObj.header = undefined;\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.showCloseIcon = false;\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n ExcelFilterBase.prototype.removeDialog = function () {\n this.parent.notify(events.customFilterClose, {});\n if ((this.parent.isReact || this.parent.isVue) && this.parent.destroyTemplate !== undefined) {\n clearReactVueTemplates(this.parent, ['filterTemplate']);\n }\n this.removeObjects(this.childRefs);\n remove(this.dlgDiv);\n this.parent.notify(events.filterDialogClose, {});\n };\n ExcelFilterBase.prototype.createdDialog = function (target, column) {\n this.renderCustomFilter(target, column);\n this.dlgObj.element.style.left = '0px';\n if (!this.options.isResponsiveFilter) {\n this.dlgObj.element.style.top = '0px';\n }\n else {\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.dlgObj.element.style.top = height + 'px';\n }\n if (!this.options.isResponsiveFilter && Browser.isDevice && window.innerWidth < 440) {\n this.dlgObj.element.style.width = '90%';\n }\n this.parent.notify(events.beforeCustomFilterOpen, { column: column, dialog: this.dialogObj });\n this.dlgObj.show();\n applyBiggerTheme(this.parent.element, this.dlgObj.element.parentElement);\n };\n ExcelFilterBase.prototype.renderCustomFilter = function (target, column) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-xlfl-maindiv');\n var dlgFields = this.parent.createElement('div', { innerHTML: this.getLocalizedLabel('ShowRowsWhere'), className: 'e-xlfl-dlgfields' });\n dlgConetntEle.appendChild(dlgFields);\n //column name\n var fieldSet = this.parent.createElement('div', { innerHTML: this.options.displayName, className: 'e-xlfl-fieldset' });\n dlgConetntEle.appendChild(fieldSet);\n this.renderFilterUI(column, dlgConetntEle);\n };\n /**\n * @hidden\n * @param {string} col - Defines column details\n * @returns {void}\n */\n ExcelFilterBase.prototype.filterBtnClick = function (col) {\n var isComplex = !isNullOrUndefined(col) && isComplexField(col);\n var complexFieldName = !isNullOrUndefined(col) && getComplexFieldID(col);\n var colValue = isComplex ? complexFieldName : col;\n var fValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstvalue').ej2_instances[0];\n var fOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstoptr').ej2_instances[0];\n var sValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndvalue').ej2_instances[0];\n var sOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndoptr').ej2_instances[0];\n var checkBoxValue;\n if (this.options.type === 'string') {\n var checkBox = this.dlgDiv.querySelector('#' + colValue + '-xlflmtcase').ej2_instances[0];\n checkBoxValue = checkBox.checked;\n }\n var andRadio = this.dlgDiv.querySelector('#' + colValue + 'e-xlfl-frstpredicate').ej2_instances[0];\n var predicate = (andRadio.checked ? 'and' : 'or');\n if (sValue.value === null) {\n predicate = 'or';\n }\n this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, this.options.ignoreAccent, sOperator.value, sValue.value);\n this.removeDialog();\n };\n /**\n * @hidden\n * Filters grid row by column name with given options.\n *\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} firstOperator - Defines the first operator by how to filter records.\n * @param {string | number | Date | boolean} firstValue - Defines the first value which is used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If ignore case set to true, then filter records with exact match or else\n * filter records with case insensitive(uppercase and lowercase letters treated as same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.\n * @param {string} secondOperator - Defines the second operator by how to filter records.\n * @param {string | number | Date | boolean} secondValue - Defines the first value which is used to filter records.\n * @returns {void}\n */\n ExcelFilterBase.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n var col = this.parent.getColumnByField ? this.parent.getColumnByField(fieldName) : this.options.column;\n var field = this.isForeignColumn(col) ? col.foreignKeyValue : fieldName;\n var fColl = [];\n var mPredicate;\n var arg = {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: firstOperator, arg3: firstValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: secondOperator, arg8: secondValue, cancel: false\n };\n this.parent.notify(events.fltrPrevent, arg);\n if (arg.cancel) {\n return;\n }\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: firstOperator,\n value: arg.arg3,\n type: this.options.type\n });\n mPredicate = new Predicate(field, firstOperator.toLowerCase(), arg.arg3, !matchCase, ignoreAccent);\n if (!isNullOrUndefined(secondValue) && !isNullOrUndefined(secondOperator)) {\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: secondOperator,\n value: arg.arg8,\n type: this.options.type\n });\n mPredicate = mPredicate[\"\" + predicate](field, secondOperator.toLowerCase(), secondValue, !matchCase, ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: mPredicate, actualPredicate: fColl\n };\n if (this.isForeignColumn(col)) {\n this.foreignKeyFilter(args, fColl, mPredicate);\n }\n else {\n this.options.handler(args);\n }\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderOperatorUI = function (column, table, elementID, predicates, isFirst) {\n var fieldElement = this.parent.createElement('tr', { className: 'e-xlfl-fields', attrs: { role: 'row' } });\n table.appendChild(fieldElement);\n var xlfloptr = this.parent.createElement('td', { className: 'e-xlfl-optr' });\n fieldElement.appendChild(xlfloptr);\n var optrDiv = this.parent.createElement('div', { className: 'e-xlfl-optrdiv' });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var optrInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementID : column + elementID });\n optrDiv.appendChild(optrInput);\n xlfloptr.appendChild(optrDiv);\n var optr = this.options.type + 'Operator';\n var dropDatasource = this.customFilterOperators[\"\" + optr];\n this.optrData = dropDatasource;\n var selectedValue = this.dropSelectedVal(this.options.column, predicates, isFirst);\n //Trailing three dots are sliced.\n var menuText = '';\n if (this.menuItem) {\n menuText = this.menuItem.text.slice(0, -3);\n if (menuText !== this.getLocalizedLabel('CustomFilter')) {\n selectedValue = isFirst ? menuText : undefined;\n }\n if (menuText === this.getLocalizedLabel('Between')) {\n selectedValue = this.getLocalizedLabel(isFirst ? 'GreaterThanOrEqual' : 'LessThanOrEqual');\n }\n }\n var col = this.options.column;\n var dropOptr = new DropDownList(extend({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n text: selectedValue,\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, col.filter.params));\n this.childRefs.unshift(dropOptr);\n var evt = { 'open': this.dropDownOpen.bind(this), 'change': this.dropDownValueChange.bind(this) };\n registerEventHandlers(optrInput.id, [literals.open, literals.change], evt, this);\n dropOptr.addEventListener(literals['open'], this.eventHandlers[optrInput.id][literals.open]);\n dropOptr.addEventListener(literals.change, this.eventHandlers[optrInput.id][literals.change]);\n dropOptr.appendTo(optrInput);\n var operator = this.getSelectedValue(selectedValue);\n return { fieldElement: fieldElement, operator: operator };\n };\n ExcelFilterBase.prototype.removeHandlersFromComponent = function (component) {\n if (component.element.classList.contains('e-dropdownlist')) {\n removeEventHandlers(component, [literals.open, literals.change], this);\n }\n else if (component.element.classList.contains('e-autocomplete')) {\n removeEventHandlers(component, [events.actionComplete, literals.focus], this);\n }\n };\n ExcelFilterBase.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n ExcelFilterBase.prototype.dropDownValueChange = function (args) {\n if (args.element.id.includes('-xlfl-frstoptr')) {\n this.firstOperator = args.value.toString();\n }\n else {\n this.secondOperator = args.value.toString();\n }\n var valInput = args.element.closest('.e-xlfl-fields').children[1].querySelector('.e-control');\n var dropDownList = args.element['ej2_instances'][0];\n if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||\n dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n };\n /**\n * @hidden\n * @returns {FilterUI} returns filter UI\n */\n ExcelFilterBase.prototype.getFilterUIInfo = function () {\n return { firstOperator: this.firstOperator, secondOperator: this.secondOperator, field: this.options.field };\n };\n ExcelFilterBase.prototype.getSelectedValue = function (text) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('text', 'equal', text));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].value : '';\n };\n ExcelFilterBase.prototype.dropSelectedVal = function (col, predicates, isFirst) {\n var operator;\n if (predicates && predicates.length > 0) {\n operator = predicates.length === 2 ?\n (isFirst ? predicates[0].operator : predicates[1].operator) :\n (isFirst ? predicates[0].operator : undefined);\n }\n else if (isFirst && col.type === 'string' && !col.filter.operator) {\n operator = 'startswith';\n }\n else {\n operator = isFirst ? col.filter.operator || 'equal' : undefined;\n }\n return this.getSelectedText(operator);\n };\n ExcelFilterBase.prototype.getSelectedText = function (operator) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', operator));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n };\n ExcelFilterBase.prototype.renderFilterUI = function (column, dlgConetntEle) {\n var predicates = this.existingPredicate[\"\" + column];\n var table = this.parent.createElement('table', { className: 'e-xlfl-table', attrs: { role: 'grid' } });\n dlgConetntEle.appendChild(table);\n var colGroup = this.parent.createElement(literals.colGroup);\n colGroup.innerHTML = '';\n table.appendChild(colGroup);\n //Renders first dropdown\n var optr = this.renderOperatorUI(column, table, '-xlfl-frstoptr', predicates, true);\n this.firstOperator = optr.operator;\n //Renders first value\n this.renderFlValueUI(column, optr, '-xlfl-frstvalue', predicates, true);\n var predicate = this.parent.createElement('tr', { className: 'e-xlfl-predicate', attrs: { role: 'row' } });\n table.appendChild(predicate);\n //Renders first radion button\n this.renderRadioButton(column, predicate, predicates);\n //Renders second dropdown\n optr = this.renderOperatorUI(column, table, '-xlfl-secndoptr', predicates, false);\n this.secondOperator = optr.operator;\n //Renders second text box\n this.renderFlValueUI(column, optr, '-xlfl-secndvalue', predicates, false);\n };\n ExcelFilterBase.prototype.renderRadioButton = function (column, tr, predicates) {\n var td = this.parent.createElement('td', { className: 'e-xlfl-radio', attrs: { 'colSpan': '2' } });\n tr.appendChild(td);\n var radioDiv = this.parent\n .createElement('div', { className: 'e-xlfl-radiodiv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var frstpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-frstpredicate' : column + 'e-xlfl-frstpredicate', attrs: { 'type': 'radio' } });\n var secndpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-secndpredicate' : column + 'e-xlfl-secndpredicate', attrs: { 'type': 'radio' } });\n //appends into div\n radioDiv.appendChild(frstpredicate);\n radioDiv.appendChild(secndpredicate);\n td.appendChild(radioDiv);\n if (this.options.type === 'string') {\n this.renderMatchCase(column, tr, td, '-xlflmtcase', predicates);\n }\n // Initialize AND RadioButton component.\n var andRadio = new RadioButton({\n label: this.getLocalizedLabel('AND'),\n name: 'default', checked: true,\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.unshift(andRadio);\n // Initialize OR RadioButton component.\n var orRadio = new RadioButton({\n label: this.getLocalizedLabel('OR'),\n name: 'default',\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.unshift(orRadio);\n var flValue = predicates && predicates.length === 2 ? predicates[1].predicate : 'and';\n if (flValue === 'and') {\n andRadio.checked = true;\n orRadio.checked = false;\n }\n else {\n orRadio.checked = true;\n andRadio.checked = false;\n }\n // Render initialized RadioButton.\n andRadio.appendTo(frstpredicate);\n orRadio.appendTo(secndpredicate);\n andRadio.element.nextElementSibling.classList.add('e-xlfl-radio-and');\n orRadio.element.nextElementSibling.classList.add('e-xlfl-radio-or');\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ExcelFilterBase.prototype.removeObjects = function (elements) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var obj = elements_1[_i];\n if (obj && !obj.isDestroyed) {\n this.removeHandlersFromComponent(obj);\n obj.destroy();\n }\n }\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderFlValueUI = function (column, optr, elementId, predicates, isFirst) {\n var value = this.parent.createElement('td', { className: 'e-xlfl-value' });\n optr.fieldElement.appendChild(value);\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var valueDiv = this.parent.createElement('div', { className: 'e-xlfl-valuediv' });\n var isFilteredCol = this.options.filteredColumns.some(function (col) { return column === col.field; });\n var fltrPredicates = this.options.filteredColumns.filter(function (col) { return col.field === column; });\n if (this.options.column.filterTemplate) {\n var data = {};\n var columnObj = this.options.column;\n if (isFilteredCol && elementId) {\n data = this.getExcelFilterData(elementId, data, columnObj, predicates, fltrPredicates);\n }\n var isReactCompiler = this.parent.isReact && typeof (this.options.column.filterTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + columnObj.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n }\n else {\n var element = this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, element);\n }\n if (isReactCompiler || isReactChild) {\n this.parent.renderTemplates(function () {\n valueDiv.querySelector('input').id = isComplex ? complexFieldName + elementId : column + elementId;\n value.appendChild(valueDiv);\n });\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this.parent.isAngular ? valueDiv.children[0] : valueDiv.querySelector('input')).id = isComplex ?\n complexFieldName + elementId : column + elementId;\n value.appendChild(valueDiv);\n }\n }\n else {\n var valueInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId });\n valueDiv.appendChild(valueInput);\n value.appendChild(valueDiv);\n var flValue = void 0;\n var predicate = void 0;\n if (predicates && predicates.length > 0) {\n predicate = predicates.length === 2 ?\n (isFirst ? predicates[0] : predicates[1]) :\n (isFirst ? predicates[0] : undefined);\n flValue = (predicate && predicate.operator === optr.operator) ? predicate.value : undefined;\n if (isNullOrUndefined(flValue)) {\n flValue = undefined;\n }\n }\n var types = {\n 'string': this.renderAutoComplete.bind(this),\n 'number': this.renderNumericTextBox.bind(this),\n 'date': this.renderDate.bind(this),\n 'dateonly': this.renderDate.bind(this),\n 'datetime': this.renderDateTime.bind(this)\n };\n types[this.options.type](this.options, column, valueInput, flValue, this.parent.enableRtl);\n }\n };\n ExcelFilterBase.prototype.getExcelFilterData = function (elementId, data, columnObj, predicates, fltrPredicates) {\n var predIndex = elementId === '-xlfl-frstvalue' ? 0 : 1;\n if (elementId === '-xlfl-frstvalue' || fltrPredicates.length > 1) {\n data = { column: predicates instanceof Array ? predicates[parseInt(predIndex.toString(), 10)] : predicates };\n var indx = this.options.column.columnData && fltrPredicates.length > 1 ?\n (this.options.column.columnData.length === 1 ? 0 : 1) : predIndex;\n data[this.options.field] = columnObj.foreignKeyValue ?\n this.options.column.columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue] :\n fltrPredicates[parseInt(indx.toString(), 10)].value;\n if (this.options.foreignKeyValue) {\n data[this.options.foreignKeyValue] = this.options.column\n .columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue];\n }\n }\n return data;\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderMatchCase = function (column, tr, matchCase, elementId, predicates) {\n var matchCaseDiv = this.parent.createElement('div', { className: 'e-xlfl-matchcasediv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var matchCaseInput = this.parent.createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId, attrs: { 'type': 'checkbox' } });\n matchCaseDiv.appendChild(matchCaseInput);\n matchCase.appendChild(matchCaseDiv);\n var flValue = predicates && predicates.length > 0 ?\n (predicates && predicates.length === 2 ? predicates[1].matchCase : predicates[0].matchCase) :\n false;\n // Initialize Match Case check box.\n var checkbox = new CheckBox({\n label: this.getLocalizedLabel('MatchCase'),\n enableRtl: this.parent.enableRtl, checked: flValue,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.unshift(checkbox);\n // Render initialized CheckBox.\n checkbox.appendTo(matchCaseInput);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderDate = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type) || options.format;\n var datePicker = new DatePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale\n }, options.column.filter.params));\n this.childRefs.unshift(datePicker);\n datePicker.appendTo(inputValue);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderDateTime = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type);\n var dateTimePicker = new DateTimePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale\n }, options.column.filter.params));\n this.childRefs.unshift(dateTimePicker);\n dateTimePicker.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.completeAction = function (e) {\n e.result = distinctStringValues(e.result);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderNumericTextBox = function (options, column, inputValue, fValue, isRtl) {\n var numericTextBox = new NumericTextBox(extend({\n format: options.format,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n value: fValue,\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, options.column.filter.params));\n this.childRefs.unshift(numericTextBox);\n numericTextBox.appendTo(inputValue);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderAutoComplete = function (options, column, inputValue, fValue, isRtl) {\n var colObj = this.options.column;\n var isForeignColumn = this.isForeignColumn(colObj);\n var dataSource = isForeignColumn ? colObj.dataSource : options.dataSource;\n var fields = { value: isForeignColumn ? colObj.foreignKeyValue : column };\n var actObj = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n query: this.getQuery(),\n sortOrder: 'Ascending',\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n autofill: true,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n text: fValue\n }, colObj.filter.params));\n if (dataSource && 'result' in dataSource) {\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, this.getQuery());\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n actObj.dataSource = new DataManager(e);\n });\n }\n this.childRefs.unshift(actObj);\n var evt = { 'actionComplete': this.acActionComplete(actObj, column), 'focus': this.acFocus(actObj, column, options, inputValue) };\n registerEventHandlers(inputValue.id, [events.actionComplete, literals.focus], evt, this);\n actObj.addEventListener(literals.focus, this.eventHandlers[inputValue.id][literals.focus]);\n actObj.addEventListener(events.actionComplete, this.eventHandlers[inputValue.id][events.actionComplete]);\n actObj.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.acActionComplete = function (actObj, column) {\n return function (e) {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObject) {\n return isComplex ? performComplexDataOperation(actObj.fields.value, mapObject)\n : mapObject[actObj.fields.value];\n }).indexOf(isComplex ? performComplexDataOperation(actObj.fields.value, obj) :\n obj[actObj.fields.value]) === index;\n });\n };\n };\n ExcelFilterBase.prototype.acFocus = function (actObj, column, options, inputValue) {\n var _this = this;\n return function () {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var columnvalue = isComplex ? complexFieldName : column;\n actObj.filterType = _this.dlgDiv.querySelector('#' + columnvalue +\n (inputValue.id === (columnvalue + '-xlfl-frstvalue') ?\n '-xlfl-frstoptr' :\n '-xlfl-secndoptr')).ej2_instances[0].value;\n actObj.ignoreCase = options.type === 'string' ?\n !_this.dlgDiv.querySelector('#' + columnvalue + '-xlflmtcase').ej2_instances[0].checked :\n true;\n actObj.filterType = !isNullOrUndefined(actObj.filterType) ? actObj.filterType :\n 'equal';\n };\n };\n return ExcelFilterBase;\n}(CheckBoxFilterBase));\nexport { ExcelFilterBase };\n","import { Browser } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { closest, classList } from '@syncfusion/ej2-base';\nimport { ResponsiveDialogAction } from '../base/enum';\nimport { setCssInGridPopUp, getActualPropFromColl, isActionPrevent, iterateExtend, parentsUntil } from '../base/util';\nimport { addRemoveEventListener } from '../base/util';\nimport * as events from '../base/constant';\nimport { AriaService } from '../services/aria-service';\nimport * as literals from '../base/string-literals';\n/**\n *\n * The `Sort` module is used to handle sorting action.\n */\nvar Sort = /** @class */ (function () {\n /**\n * Constructor for Grid sorting module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {SortSettings} sortSettings - specifies the SortSettings\n * @param {string[]} sortedColumns - specifies the string\n * @param {ServiceLocator} locator - specifies the ServiceLocator\n * @hidden\n */\n function Sort(parent, sortSettings, sortedColumns, locator) {\n this.contentRefresh = true;\n this.isModelChanged = true;\n this.aria = new AriaService();\n this.currentTarget = null;\n this.parent = parent;\n this.sortSettings = sortSettings;\n this.sortedColumns = sortedColumns;\n this.serviceLocator = locator;\n this.focus = locator.getService('focus');\n this.addEventListener();\n this.setFullScreenDialog();\n }\n /**\n * The function used to update sortSettings\n *\n * @returns {void}\n * @hidden\n */\n Sort.prototype.updateModel = function () {\n var sortedColumn = { field: this.columnName, direction: this.direction };\n var index;\n var gCols = this.parent.groupSettings.columns;\n var flag = false;\n if (!this.isMultiSort) {\n if (!gCols.length) {\n this.sortSettings.columns = [sortedColumn];\n }\n else {\n var sortedCols = [];\n for (var i = 0, len = gCols.length; i < len; i++) {\n index = this.getSortedColsIndexByField(gCols[parseInt(i.toString(), 10)], sortedCols);\n if (this.columnName === gCols[parseInt(i.toString(), 10)]) {\n flag = true;\n sortedCols.push(sortedColumn);\n }\n else {\n var sCol = this.getSortColumnFromField(gCols[parseInt(i.toString(), 10)]);\n sortedCols.push({ field: sCol.field, direction: sCol.direction, isFromGroup: sCol.isFromGroup });\n }\n }\n if (!flag) {\n sortedCols.push(sortedColumn);\n }\n this.sortSettings.columns = sortedCols;\n }\n }\n else {\n index = this.getSortedColsIndexByField(this.columnName);\n if (index > -1) {\n this.sortSettings.columns.splice(index, 1);\n }\n this.sortSettings.columns.push(sortedColumn);\n // eslint-disable-next-line no-self-assign\n this.sortSettings.columns = this.sortSettings.columns;\n }\n this.parent.dataBind();\n this.lastSortedCol = this.columnName;\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Sort.prototype.onActionComplete = function (e) {\n var args = !this.isRemove ? {\n columnName: this.columnName, direction: this.direction, requestType: 'sorting', type: events.actionComplete\n } : { requestType: 'sorting', type: events.actionComplete };\n this.isRemove = false;\n this.parent.trigger(events.actionComplete, extend(e, args));\n };\n /**\n * Sorts a column with the given options.\n *\n * @param {string} columnName - Defines the column name to sort.\n * @param {SortDirection} direction - Defines the direction of sorting field.\n * @param {boolean} isMultiSort - Specifies whether the previously sorted columns are to be maintained.\n * @returns {void}\n */\n Sort.prototype.sortColumn = function (columnName, direction, isMultiSort) {\n var gObj = this.parent;\n if (this.parent.getColumnByField(columnName).allowSorting === false || this.parent.isContextMenuOpen()) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: columnName });\n return;\n }\n if (!gObj.allowMultiSorting) {\n isMultiSort = gObj.allowMultiSorting;\n }\n if (this.isActionPrevent()) {\n gObj.notify(events.preventBatch, {\n instance: this, handler: this.sortColumn,\n arg1: columnName, arg2: direction, arg3: isMultiSort\n });\n return;\n }\n this.backupSettings();\n this.columnName = columnName;\n this.direction = direction;\n this.isMultiSort = isMultiSort;\n this.removeSortIcons();\n this.updateSortedCols(columnName, isMultiSort);\n this.updateModel();\n };\n Sort.prototype.setFullScreenDialog = function () {\n if (this.serviceLocator) {\n this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, ResponsiveDialogAction.isSort);\n }\n };\n Sort.prototype.backupSettings = function () {\n this.lastSortedCols = iterateExtend(this.sortSettings.columns);\n this.lastCols = this.sortedColumns;\n };\n Sort.prototype.restoreSettings = function () {\n this.isModelChanged = false;\n this.isMultiSort = true;\n this.parent.setProperties({ sortSettings: { columns: this.lastSortedCols } }, true);\n //this.parent.sortSettings.columns = this.lastSortedCols;\n this.sortedColumns = this.lastCols;\n this.isModelChanged = true;\n };\n Sort.prototype.updateSortedCols = function (columnName, isMultiSort) {\n if (!isMultiSort) {\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.sortedColumns.length; i < len; i++) {\n if (this.parent.groupSettings.columns.indexOf(this.sortedColumns[parseInt(i.toString(), 10)]) < 0) {\n this.sortedColumns.splice(i, 1);\n len--;\n i--;\n }\n }\n }\n else {\n this.sortedColumns.splice(0, this.sortedColumns.length);\n }\n }\n if (this.sortedColumns.indexOf(columnName) < 0) {\n this.sortedColumns.push(columnName);\n }\n };\n /**\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Sort.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (this.contentRefresh) {\n var args = this.sortSettings.columns.length ? {\n columnName: this.columnName, direction: this.direction, requestType: 'sorting',\n type: events.actionBegin, target: this.currentTarget, cancel: false\n } : {\n requestType: 'sorting', type: events.actionBegin, cancel: false,\n target: this.currentTarget\n };\n this.parent.notify(events.modelChanged, args);\n }\n this.refreshSortSettings();\n this.removeSortIcons();\n this.addSortIcons();\n };\n Sort.prototype.refreshSortSettings = function () {\n this.sortedColumns.length = 0;\n var sortColumns = this.sortSettings.columns;\n for (var i = 0; i < sortColumns.length; i++) {\n if (!sortColumns[parseInt(i.toString(), 10)].isFromGroup) {\n this.sortedColumns.push(sortColumns[parseInt(i.toString(), 10)].field);\n }\n }\n };\n /**\n * Clears all the sorted columns of the Grid.\n *\n * @returns {void}\n */\n Sort.prototype.clearSorting = function () {\n var cols = getActualPropFromColl(this.sortSettings.columns);\n if (this.isActionPrevent()) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearSorting });\n return;\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n this.removeSortColumn(cols[parseInt(i.toString(), 10)].field);\n }\n };\n Sort.prototype.isActionPrevent = function () {\n return isActionPrevent(this.parent);\n };\n /**\n * Remove sorted column by field name.\n *\n * @param {string} field - Defines the column field name to remove sort.\n * @returns {void}\n * @hidden\n */\n Sort.prototype.removeSortColumn = function (field) {\n var gObj = this.parent;\n var cols = this.sortSettings.columns;\n if (cols.length === 0 && this.sortedColumns.indexOf(field) < 0) {\n return;\n }\n if (this.isActionPrevent()) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.removeSortColumn, arg1: field });\n return;\n }\n this.backupSettings();\n this.removeSortIcons();\n var args = { requestType: 'sorting', type: events.actionBegin, target: this.currentTarget };\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].field === field) {\n if (gObj.allowGrouping && gObj.groupSettings.columns.indexOf(cols[parseInt(i.toString(), 10)].field) > -1) {\n continue;\n }\n this.sortedColumns.splice(this.sortedColumns.indexOf(cols[parseInt(i.toString(), 10)].field), 1);\n cols.splice(i, 1);\n this.isRemove = true;\n if (this.isModelChanged) {\n this.parent.notify(events.modelChanged, args);\n }\n break;\n }\n }\n if (!args.cancel) {\n this.addSortIcons();\n }\n };\n Sort.prototype.getSortedColsIndexByField = function (field, sortedColumns) {\n var cols = sortedColumns ? sortedColumns : this.sortSettings.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].field === field) {\n return i;\n }\n }\n return -1;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Sort.prototype.getModuleName = function () {\n return 'sort';\n };\n Sort.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n if (this.parent.getColumns().length && this.sortSettings.columns.length) {\n var gObj = this.parent;\n this.contentRefresh = false;\n this.isMultiSort = this.sortSettings.columns.length > 1;\n for (var _i = 0, _a = gObj.sortSettings.columns.slice(); _i < _a.length; _i++) {\n var col = _a[_i];\n if (this.sortedColumns.indexOf(col.field) > -1) {\n this.sortColumn(col.field, col.direction, true);\n }\n }\n this.isMultiSort = false;\n this.contentRefresh = true;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Sort.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.evtHandlers = [{ event: events.setFullScreenDialog, handler: this.setFullScreenDialog },\n { event: events.renderResponsiveChangeAction, handler: this.renderResponsiveChangeAction },\n { event: events.contentReady, handler: this.initialEnd },\n { event: events.sortComplete, handler: this.onActionComplete },\n { event: events.inBoundModelChanged, handler: this.onPropertyChanged },\n { event: events.click, handler: this.clickHandler },\n { event: events.headerRefreshed, handler: this.refreshSortIcons },\n { event: events.keyPressed, handler: this.keyPressed },\n { event: events.cancelBegin, handler: this.cancelBeginEvent },\n { event: events.destroy, handler: this.destroy }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Sort.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n };\n /**\n * To destroy the sorting\n *\n * @returns {void}\n * @hidden\n */\n Sort.prototype.destroy = function () {\n this.isModelChanged = false;\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.parent.element.querySelector('.e-gridpopup').getElementsByClassName('e-sortdirect').length) {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.parent.refreshing && (this.parent.isDestroyed || !this.parent.allowSorting)) {\n this.clearSorting();\n }\n this.isModelChanged = true;\n this.removeEventListener();\n };\n Sort.prototype.cancelBeginEvent = function (e) {\n if (e.requestType === 'sorting') {\n this.restoreSettings();\n this.refreshSortIcons();\n this.isMultiSort = true;\n }\n };\n Sort.prototype.clickHandler = function (e) {\n var gObj = this.parent;\n this.currentTarget = null;\n this.popUpClickHandler(e);\n var target = closest(e.target, '.e-headercell');\n if (target && !e.target.classList.contains('e-grptogglebtn') &&\n !(target.classList.contains('e-resized')) &&\n !e.target.classList.contains('e-rhandler') &&\n !e.target.classList.contains('e-columnmenu') &&\n !e.target.classList.contains('e-filtermenudiv') &&\n !parentsUntil(e.target, 'e-stackedheadercell') &&\n !(gObj.allowSelection && gObj.selectionSettings.allowColumnSelection &&\n e.target.classList.contains('e-headercell'))) {\n var gObj_1 = this.parent;\n var colObj = gObj_1.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));\n if (colObj.type !== 'checkbox') {\n this.initiateSort(target, e, colObj);\n if (Browser.isDevice) {\n this.showPopUp(e);\n }\n }\n }\n if (target) {\n target.classList.remove('e-resized');\n }\n if (parentsUntil(e.target, 'e-excel-ascending') ||\n parentsUntil(e.target, 'e-excel-descending')) {\n var colUid = closest(e.target, '.e-filter-popup').getAttribute('uid');\n var direction = isNullOrUndefined(parentsUntil(e.target, 'e-excel-descending')) ?\n 'Ascending' : 'Descending';\n this.sortColumn(gObj.getColumnByUid(colUid).field, direction, false);\n }\n };\n Sort.prototype.keyPressed = function (e) {\n var ele = e.target;\n if (!this.parent.isEdit && (e.action === 'enter' || e.action === 'ctrlEnter' || e.action === 'shiftEnter')\n && closest(ele, '.e-headercell')) {\n var target = this.focus.getFocusedElement();\n if (isNullOrUndefined(target) || !target.classList.contains('e-headercell')\n || !target.querySelector('.e-headercelldiv')) {\n return;\n }\n var col = this.parent.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));\n this.initiateSort(target, e, col);\n }\n };\n Sort.prototype.initiateSort = function (target, e, column) {\n var gObj = this.parent;\n var field = column.field;\n this.currentTarget = e.target;\n var direction = !target.getElementsByClassName('e-ascending').length ? 'Ascending' :\n 'Descending';\n this.isMultiSort = e.ctrlKey || this.enableSortMultiTouch ||\n (navigator.userAgent.indexOf('Mac OS') !== -1 && e.metaKey);\n if (e.shiftKey || (this.sortSettings.allowUnsort && target.getElementsByClassName('e-descending').length)\n && !(gObj.groupSettings.columns.indexOf(field) > -1)) {\n this.removeSortColumn(field);\n }\n else {\n this.sortColumn(field, direction, this.isMultiSort);\n }\n };\n Sort.prototype.showPopUp = function (e) {\n var target = closest(e.target, '.e-headercell');\n if (this.parent.allowMultiSorting && (!isNullOrUndefined(target) || this.parent.isContextMenuOpen())) {\n setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-sortdirect e-icons e-icon-sortdirect' + (this.sortedColumns.length > 1 ? ' e-spanclicked' : ''));\n }\n };\n Sort.prototype.popUpClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.e-headercell') || e.target.classList.contains(literals.rowCell) ||\n closest(target, '.e-gridpopup')) {\n if (target.classList.contains('e-sortdirect')) {\n if (!target.classList.contains('e-spanclicked')) {\n target.classList.add('e-spanclicked');\n this.enableSortMultiTouch = true;\n }\n else {\n target.classList.remove('e-spanclicked');\n this.enableSortMultiTouch = false;\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n }\n }\n else {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Sort.prototype.addSortIcons = function () {\n var gObj = this.parent;\n var header;\n var filterElement;\n var cols = this.sortSettings.columns;\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n for (var i = 0, len = cols.length; i < len; i++) {\n header = gObj.getColumnHeaderByField(cols[parseInt(i.toString(), 10)].field);\n if (fieldNames.indexOf(cols[parseInt(i.toString(), 10)].field) === -1 || isNullOrUndefined(header)) {\n continue;\n }\n this.aria.setSort(header, (cols[parseInt(i.toString(), 10)].direction).toLowerCase());\n if (cols.length > 1) {\n header.querySelector('.e-headercelldiv').insertBefore(this.parent.createElement('span', { className: 'e-sortnumber', innerHTML: (i + 1).toString() }), header.querySelector('.e-headertext'));\n }\n filterElement = header.querySelector('.e-sortfilterdiv');\n if (cols[parseInt(i.toString(), 10)].direction === 'Ascending') {\n classList(filterElement, ['e-ascending', 'e-icon-ascending'], []);\n }\n else {\n classList(filterElement, ['e-descending', 'e-icon-descending'], []);\n }\n }\n };\n Sort.prototype.removeSortIcons = function (position) {\n var gObj = this.parent;\n var header;\n var cols = this.sortSettings.columns;\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n for (var i = position ? position : 0, len = !isNullOrUndefined(position) ? position + 1 : cols.length; i < len; i++) {\n header = gObj.getColumnHeaderByField(cols[parseInt(i.toString(), 10)].field);\n if (isNullOrUndefined(header) || (gObj.allowGrouping\n && gObj.groupSettings.columns.indexOf(cols[parseInt(i.toString(), 10)].field) > -1\n && !header.querySelector('.e-sortfilterdiv'))) {\n continue;\n }\n if (fieldNames.indexOf(cols[parseInt(i.toString(), 10)].field) === -1) {\n continue;\n }\n this.aria.setSort(header, 'none');\n classList(header.querySelector('.e-sortfilterdiv'), [], ['e-descending', 'e-icon-descending', 'e-ascending', 'e-icon-ascending']);\n if (header.querySelector('.e-sortnumber')) {\n header.querySelector('.e-headercelldiv').removeChild(header.querySelector('.e-sortnumber'));\n }\n }\n };\n Sort.prototype.getSortColumnFromField = function (field) {\n for (var i = 0, len = this.sortSettings.columns.length; i < len; i++) {\n if (this.sortSettings.columns[parseInt(i.toString(), 10)].field === field) {\n return this.sortSettings.columns[parseInt(i.toString(), 10)];\n }\n }\n return false;\n };\n Sort.prototype.updateAriaAttr = function () {\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n for (var _i = 0, _a = this.sortedColumns; _i < _a.length; _i++) {\n var col = _a[_i];\n if (fieldNames.indexOf(col) === -1) {\n continue;\n }\n var header = this.parent.getColumnHeaderByField(col);\n this.aria.setSort(header, this.getSortColumnFromField(col).direction);\n }\n };\n Sort.prototype.refreshSortIcons = function () {\n this.removeSortIcons();\n this.isMultiSort = true;\n this.removeSortIcons();\n this.addSortIcons();\n this.isMultiSort = false;\n this.updateAriaAttr();\n };\n Sort.prototype.renderResponsiveChangeAction = function (args) {\n this.responsiveDialogRenderer.action = args.action;\n };\n /**\n * To show the responsive custom sort dialog\n *\n * @param {boolean} enable - specifes dialog open\n * @returns {void}\n * @hidden\n */\n Sort.prototype.showCustomSort = function (enable) {\n this.responsiveDialogRenderer.isCustomDialog = enable;\n this.responsiveDialogRenderer.showResponsiveDialog();\n };\n return Sort;\n}());\nexport { Sort };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { attributes, createElement, classList, append } from '@syncfusion/ej2-base';\n/**\n * `NumericContainer` module handles rendering and refreshing numeric container.\n */\nvar NumericContainer = /** @class */ (function () {\n /**\n * Constructor for numericContainer module\n *\n * @param {Pager} pagerModule - specifies the pagerModule\n * @hidden\n */\n function NumericContainer(pagerModule) {\n this.pagerModule = pagerModule;\n }\n /**\n * The function is used to render numericContainer\n *\n * @returns {void}\n * @hidden\n */\n NumericContainer.prototype.render = function () {\n this.pagerElement = this.pagerModule.element;\n this.renderNumericContainer();\n this.refreshNumericLinks();\n this.wireEvents();\n };\n /**\n * Refreshes the numeric container of Pager.\n *\n * @returns {void}\n */\n NumericContainer.prototype.refresh = function () {\n this.pagerModule.updateTotalPages();\n if (this.links.length) {\n this.updateLinksHtml();\n }\n this.refreshAriaAttrLabel();\n this.updateStyles();\n };\n /**\n * The function is used to refresh refreshNumericLinks\n *\n * @returns {void}\n * @hidden\n */\n NumericContainer.prototype.refreshNumericLinks = function () {\n var link;\n var pagerObj = this.pagerModule;\n var div = pagerObj.element.querySelector('.e-numericcontainer');\n var frag = document.createDocumentFragment();\n div.innerHTML = '';\n for (var i = 1; i <= pagerObj.pageCount; i++) {\n link = createElement('a', {\n className: 'e-link e-numericitem e-spacing e-pager-default',\n attrs: { tabindex: '-1', 'aria-label': pagerObj.getLocalizedLabel('Page') + i + pagerObj.getLocalizedLabel('Of') +\n pagerObj.totalPages + pagerObj.getLocalizedLabel('Pages'), href: '#' }\n });\n if (pagerObj.currentPage === i) {\n classList(link, ['e-currentitem', 'e-active'], ['e-pager-default']);\n link.setAttribute('aria-current', 'page');\n }\n frag.appendChild(link);\n }\n div.appendChild(frag);\n this.links = [].slice.call(div.childNodes);\n };\n /**\n * Binding events to the element while component creation\n *\n * @returns {void}\n * @hidden\n */\n NumericContainer.prototype.wireEvents = function () {\n EventHandler.add(this.pagerElement, 'click', this.clickHandler, this);\n EventHandler.add(this.pagerElement, 'auxclick', this.auxiliaryClickHandler, this);\n };\n /**\n * Unbinding events from the element while component destroy\n *\n * @returns {void}\n * @hidden\n */\n NumericContainer.prototype.unwireEvents = function () {\n EventHandler.remove(this.pagerModule.element, 'click', this.clickHandler);\n EventHandler.remove(this.pagerModule.element, 'auxclick', this.auxiliaryClickHandler);\n };\n /**\n * To destroy the PagerMessage\n *\n * @function destroy\n * @returns {void}\n * @hidden\n */\n NumericContainer.prototype.destroy = function () {\n this.unwireEvents();\n };\n NumericContainer.prototype.refreshAriaAttrLabel = function () {\n var pagerObj = this.pagerModule;\n var numericContainer = pagerObj.element.querySelector('.e-numericcontainer');\n var links = numericContainer.querySelectorAll('a');\n for (var i = 0; i < links.length; i++) {\n if (links[parseInt(i.toString(), 10)].hasAttribute('aria-label') && links[parseInt(i.toString(), 10)].hasAttribute('index')) {\n links[parseInt(i.toString(), 10)].setAttribute('aria-label', pagerObj.getLocalizedLabel('Page') + links[parseInt(i.toString(), 10)].getAttribute('index')\n + pagerObj.getLocalizedLabel('Of') + pagerObj.totalPages + pagerObj.getLocalizedLabel('Pages'));\n }\n }\n };\n NumericContainer.prototype.renderNumericContainer = function () {\n this.element = createElement('div', {\n className: 'e-pagercontainer', attrs: { 'role': 'navigation' }\n });\n this.renderFirstNPrev(this.element);\n this.renderPrevPagerSet(this.element);\n this.element.appendChild(createElement('div', { className: 'e-numericcontainer' }));\n this.renderNextPagerSet(this.element);\n this.renderNextNLast(this.element);\n this.pagerModule.element.appendChild(this.element);\n };\n NumericContainer.prototype.renderFirstNPrev = function (pagerContainer) {\n this.first = createElement('div', {\n className: 'e-first e-icons e-icon-first',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('firstPageTooltip'),\n tabindex: '-1', role: 'button'\n }\n });\n this.prev = createElement('div', {\n className: 'e-prev e-icons e-icon-prev',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('previousPageTooltip'),\n tabindex: '-1', role: 'button'\n }\n });\n append([this.first, this.prev], pagerContainer);\n };\n NumericContainer.prototype.renderPrevPagerSet = function (pagerContainer) {\n var prevPager = createElement('div');\n this.PP = createElement('a', {\n className: 'e-link e-pp e-spacing', innerHTML: '...',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('previousPagerTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),\n tabindex: '-1',\n href: '#'\n }\n });\n prevPager.appendChild(this.PP);\n pagerContainer.appendChild(prevPager);\n };\n NumericContainer.prototype.renderNextPagerSet = function (pagerContainer) {\n var nextPager = createElement('div');\n this.NP = createElement('a', {\n className: 'e-link e-np e-spacing',\n innerHTML: '...', attrs: {\n title: this.pagerModule.getLocalizedLabel('nextPagerTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),\n tabindex: '-1',\n href: '#'\n }\n });\n nextPager.appendChild(this.NP);\n pagerContainer.appendChild(nextPager);\n };\n NumericContainer.prototype.renderNextNLast = function (pagerContainer) {\n this.next = createElement('div', {\n className: 'e-next e-icons e-icon-next',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('nextPageTooltip'),\n tabindex: '-1', role: 'button'\n }\n });\n this.last = createElement('div', {\n className: 'e-last e-icons e-icon-last',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('lastPageTooltip'),\n tabindex: '-1', role: 'button'\n }\n });\n append([this.next, this.last], pagerContainer);\n };\n NumericContainer.prototype.clickHandler = function (e) {\n var pagerObj = this.pagerModule;\n this.target = e.target;\n if (this.target.classList.contains('e-numericitem')) {\n e.preventDefault();\n }\n pagerObj.previousPageNo = pagerObj.currentPage;\n if (!this.target.classList.contains('e-disable') && !isNullOrUndefined(this.target.getAttribute('index'))) {\n pagerObj.currentPage = parseInt(this.target.getAttribute('index'), 10);\n pagerObj.dataBind();\n }\n return false;\n };\n NumericContainer.prototype.auxiliaryClickHandler = function (e) {\n this.target = e.target;\n if (this.target.classList.contains('e-numericitem') && (e.button === 1)) {\n e.preventDefault();\n }\n };\n NumericContainer.prototype.updateLinksHtml = function () {\n var pagerObj = this.pagerModule;\n var currentPageSet;\n var isLastSet;\n var pageNo;\n var numItems = this.pagerElement.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n pagerObj.currentPage = pagerObj.totalPages === 1 ? 1 : pagerObj.currentPage;\n if (pagerObj.currentPage > pagerObj.totalPages && pagerObj.totalPages) {\n pagerObj.currentPage = pagerObj.totalPages;\n }\n currentPageSet = parseInt((pagerObj.currentPage / pagerObj.pageCount).toString(), 10);\n if (pagerObj.currentPage % pagerObj.pageCount === 0 && currentPageSet > 0) {\n currentPageSet = currentPageSet - 1;\n }\n for (var i = 0; i < pagerObj.pageCount; i++) {\n if (pagerObj.isPagerResized) {\n var focusedItem = this.pagerElement.querySelector('.e-focus');\n var focusedorTarget = this.target ? this.target : focusedItem ? focusedItem : null;\n var prevFocused = false;\n var nextFocused = false;\n var firstFocused = false;\n var lastFocused = false;\n var numItemFocused = false;\n var npFocused = false;\n var ppFocused = false;\n if (focusedorTarget) {\n var classList_1 = focusedorTarget.classList;\n if (classList_1.contains('e-icons')) {\n switch (true) {\n case classList_1.contains('e-prev'):\n prevFocused = true;\n break;\n case classList_1.contains('e-next'):\n nextFocused = true;\n break;\n case classList_1.contains('e-first'):\n firstFocused = true;\n break;\n case classList_1.contains('e-last'):\n lastFocused = true;\n break;\n }\n }\n else if (classList_1.contains('e-numericitem')) {\n switch (true) {\n case classList_1.contains('e-np'):\n npFocused = true;\n break;\n case classList_1.contains('e-pp'):\n ppFocused = true;\n break;\n default:\n numItemFocused = classList_1.contains('e-numericitem');\n break;\n }\n }\n }\n isLastSet = lastFocused || (this.pagerModule.keyAction === 'End');\n numItems = this.pagerElement.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n var isPageAvailable = Array.from(numItems).some(function (item) { return parseInt(item.getAttribute('index'), 10) === pagerObj.currentPage; });\n //Setting pageNo to render based on key action or click action.\n if (firstFocused || this.pagerModule.keyAction === 'Home') {\n pageNo = 1 + i;\n }\n else if (lastFocused || this.pagerModule.keyAction === 'End') {\n pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;\n }\n else if (nextFocused || this.pagerModule.keyAction === 'ArrowRight' || prevFocused || this.pagerModule.keyAction === 'ArrowLeft') {\n if (isPageAvailable) {\n pageNo = parseInt(numItems[0].getAttribute('index'), 10) + i;\n }\n else if (prevFocused || this.pagerModule.keyAction === 'ArrowLeft') {\n pageNo = parseInt(this.PP.getAttribute('index'), 10) + i;\n }\n else {\n pageNo = pagerObj.currentPage + i;\n }\n }\n else if (npFocused || ppFocused) {\n pageNo = pagerObj.currentPage + i;\n }\n else if (numItemFocused) {\n pageNo = (parseInt(numItems[0].getAttribute('index'), 10) + i);\n }\n else {\n pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;\n }\n }\n else {\n pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;\n }\n if (pageNo <= pagerObj.totalPages) {\n this.links[parseInt(i.toString(), 10)].classList.remove('e-hide');\n this.links[parseInt(i.toString(), 10)].style.display = '';\n this.links[parseInt(i.toString(), 10)].setAttribute('index', pageNo.toString());\n this.links[parseInt(i.toString(), 10)].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;\n if (pagerObj.currentPage !== pageNo) {\n this.links[parseInt(i.toString(), 10)].classList.add('e-pager-default');\n }\n else {\n this.links[parseInt(i.toString(), 10)].classList.remove('e-pager-default');\n }\n }\n else {\n this.links[parseInt(i.toString(), 10)].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;\n this.links[parseInt(i.toString(), 10)].style.display = 'none';\n }\n classList(this.links[parseInt(i.toString(), 10)], [], ['e-currentitem', 'e-active']);\n this.links[parseInt(i.toString(), 10)].removeAttribute('aria-current');\n }\n attributes(this.first, {\n 'index': '1',\n 'title': this.pagerModule.getLocalizedLabel('firstPageTooltip')\n });\n attributes(this.pagerElement.querySelector('.e-mfirst'), {\n 'index': '1',\n 'title': this.pagerModule.getLocalizedLabel('firstPageTooltip')\n });\n attributes(this.last, {\n 'index': pagerObj.totalPages.toString(),\n 'title': this.pagerModule.getLocalizedLabel('lastPageTooltip')\n });\n attributes(this.pagerElement.querySelector('.e-mlast'), {\n 'index': pagerObj.totalPages.toString(),\n 'title': this.pagerModule.getLocalizedLabel('lastPageTooltip')\n });\n attributes(this.prev, {\n 'index': (pagerObj.currentPage - 1).toString(),\n 'title': this.pagerModule.getLocalizedLabel('previousPageTooltip')\n });\n attributes(this.pagerElement.querySelector('.e-mprev'), {\n 'index': (pagerObj.currentPage - 1).toString(),\n 'title': this.pagerModule.getLocalizedLabel('previousPageTooltip')\n });\n attributes(this.next, {\n 'index': (pagerObj.currentPage + 1).toString(),\n 'title': this.pagerModule.getLocalizedLabel('nextPageTooltip')\n });\n attributes(this.pagerElement.querySelector('.e-mnext'), {\n 'index': (pagerObj.currentPage + 1).toString(),\n 'title': this.pagerModule.getLocalizedLabel('nextPageTooltip')\n });\n var ppIndex = (this.pagerModule.isPagerResized && numItems.length)\n ? isLastSet\n ? parseInt(numItems[0].getAttribute('index'), 10) - pagerObj.avgNumItems\n : parseInt(numItems[0].getAttribute('index'), 10) - numItems.length\n : parseInt(this.links[0].getAttribute('index'), 10) - pagerObj.pageCount;\n attributes(this.PP, {\n 'index': ((ppIndex < 1) ? '1' : ppIndex.toString()),\n 'title': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip')\n });\n var NPIndex = (this.pagerModule.isPagerResized && numItems.length)\n ? parseInt(numItems[numItems.length - 1].getAttribute('index'), 10)\n : parseInt(this.links[this.links.length - 1].getAttribute('index'), 10);\n attributes(this.NP, {\n 'index': (NPIndex + 1).toString(),\n 'title': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip')\n });\n this.target = undefined;\n };\n NumericContainer.prototype.updateStyles = function () {\n var _this = this;\n this.updateFirstNPrevStyles();\n this.updatePrevPagerSetStyles();\n this.updateNextPagerSetStyles();\n this.updateNextNLastStyles();\n if (this.links.length) {\n var currentPageIndex = this.links.findIndex(function (link) { return link.getAttribute('index') === _this.pagerModule.currentPage.toString(); });\n var currentPage = (this.pagerModule.isPagerResized && currentPageIndex !== -1) ? currentPageIndex\n : ((this.pagerModule.currentPage - 1) % this.pagerModule.pageCount);\n classList(this.links[parseInt(currentPage.toString(), 10)], ['e-currentitem', 'e-active'], []);\n this.links[parseInt(currentPage.toString(), 10)].setAttribute('aria-current', 'page');\n }\n };\n NumericContainer.prototype.updateFirstNPrevStyles = function () {\n var firstPage = ['e-firstpage', 'e-pager-default'];\n var firstPageDisabled = ['e-firstpagedisabled', 'e-disable'];\n var prevPage = ['e-prevpage', 'e-pager-default'];\n var prevPageDisabled = ['e-prevpagedisabled', 'e-disable'];\n if (this.pagerModule.totalPages > 0 && this.pagerModule.currentPage > 1) {\n classList(this.prev, prevPage, prevPageDisabled);\n classList(this.first, firstPage, firstPageDisabled);\n classList(this.pagerElement.querySelector('.e-mfirst'), firstPage, firstPageDisabled);\n classList(this.pagerElement.querySelector('.e-mprev'), prevPage, prevPageDisabled);\n }\n else {\n classList(this.prev, prevPageDisabled, prevPage);\n classList(this.first, firstPageDisabled, firstPage);\n classList(this.pagerElement.querySelector('.e-mprev'), prevPageDisabled, prevPage);\n classList(this.pagerElement.querySelector('.e-mfirst'), firstPageDisabled, firstPage);\n }\n };\n NumericContainer.prototype.updatePrevPagerSetStyles = function () {\n if (this.pagerModule.currentPage > this.pagerModule.pageCount || (this.pagerModule.isPagerResized\n && this.links.findIndex(function (link) { return parseInt(link.getAttribute('index'), 10) === 1; }))) {\n classList(this.PP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);\n }\n else {\n classList(this.PP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);\n }\n };\n NumericContainer.prototype.updateNextPagerSetStyles = function () {\n var pagerObj = this.pagerModule;\n var firstPage = this.links[0].innerHTML.replace(pagerObj.customText, '');\n var numItems = this.pagerElement.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n if (!firstPage.length || !this.links.length || (parseInt(firstPage, 10) + pagerObj.pageCount > pagerObj.totalPages)\n || (pagerObj.isPagerResized && Array.from(numItems).some(function (item) { return parseInt(item.getAttribute('index'), 10) === pagerObj.totalPages; }))) {\n classList(this.NP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);\n }\n else {\n classList(this.NP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);\n }\n };\n NumericContainer.prototype.updateNextNLastStyles = function () {\n var lastPage = ['e-lastpage', 'e-pager-default'];\n var lastPageDisabled = ['e-lastpagedisabled', 'e-disable'];\n var nextPage = ['e-nextpage', 'e-pager-default'];\n var nextPageDisabled = ['e-nextpagedisabled', 'e-disable'];\n var pagerObj = this.pagerModule;\n if (pagerObj.currentPage === pagerObj.totalPages || pagerObj.totalRecordsCount === 0) {\n classList(this.last, lastPageDisabled, lastPage);\n classList(this.next, nextPageDisabled, nextPage);\n classList(this.pagerElement.querySelector('.e-mlast'), lastPageDisabled, lastPage);\n classList(this.pagerElement.querySelector('.e-mnext'), nextPageDisabled, nextPage);\n }\n else {\n classList(this.last, lastPage, lastPageDisabled);\n classList(this.next, nextPage, nextPageDisabled);\n classList(this.pagerElement.querySelector('.e-mlast'), lastPage, lastPageDisabled);\n classList(this.pagerElement.querySelector('.e-mnext'), nextPage, nextPageDisabled);\n }\n };\n return NumericContainer;\n}());\nexport { NumericContainer };\n","import { createElement, append } from '@syncfusion/ej2-base';\n/**\n * `PagerMessage` module is used to display pager information.\n */\nvar PagerMessage = /** @class */ (function () {\n /**\n * Constructor for externalMessage module\n *\n * @param {Pager} pagerModule - specifies the pager Module\n * @hidden\n */\n function PagerMessage(pagerModule) {\n this.pagerModule = pagerModule;\n }\n /**\n * The function is used to render pager message\n *\n * @returns {void}\n * @hidden\n */\n PagerMessage.prototype.render = function () {\n var div = createElement('div', { className: 'e-parentmsgbar' });\n this.pageNoMsgElem = createElement('span', { className: 'e-pagenomsg', styles: 'textalign:right' });\n this.pageCountMsgElem = createElement('span', { className: 'e-pagecountmsg', styles: 'textalign:right' });\n append([this.pageNoMsgElem, this.pageCountMsgElem], div);\n this.pagerModule.element.appendChild(div);\n this.refresh();\n };\n /**\n * Refreshes the pager information.\n *\n * @returns {void}\n */\n PagerMessage.prototype.refresh = function () {\n var pagerObj = this.pagerModule;\n this.pageNoMsgElem.textContent = this.format(pagerObj.getLocalizedLabel('currentPageInfo'), [pagerObj.totalRecordsCount === 0 ? 0 :\n pagerObj.currentPage, pagerObj.totalPages || 0, pagerObj.totalRecordsCount || 0]) + ' ';\n this.pageCountMsgElem.textContent = this.format(pagerObj.getLocalizedLabel(pagerObj.totalRecordsCount <= 1 ? 'totalItemInfo' : 'totalItemsInfo'), [pagerObj.totalRecordsCount || 0, pagerObj.totalRecordsCount ? (pagerObj.pageSize * (pagerObj.currentPage - 1)) + 1 : 0,\n pagerObj.pageSize * pagerObj.currentPage > pagerObj.totalRecordsCount ? pagerObj.totalRecordsCount :\n pagerObj.pageSize * pagerObj.currentPage]);\n this.pageNoMsgElem.parentElement.classList.remove('e-hide');\n };\n /**\n * Hides the Pager information.\n *\n * @returns {void}\n */\n PagerMessage.prototype.hideMessage = function () {\n if (this.pageNoMsgElem) {\n this.pageNoMsgElem.style.display = 'none';\n }\n if (this.pageCountMsgElem) {\n this.pageCountMsgElem.style.display = 'none';\n }\n };\n /**\n * Shows the Pager information.\n *\n * @returns {void}\n */\n PagerMessage.prototype.showMessage = function () {\n if (!this.pageNoMsgElem) {\n this.render();\n }\n this.pageNoMsgElem.style.display = '';\n this.pageCountMsgElem.style.display = '';\n };\n /**\n * To destroy the PagerMessage\n *\n * @function destroy\n * @returns {void}\n * @hidden\n */\n PagerMessage.prototype.destroy = function () {\n //destroy\n };\n /**\n * To format the PagerMessage\n *\n * @function format\n * @param {string} str - specifies the string\n * @param {number[]} args - specifies the argument\n * @returns {string} returns the format string\n * @hidden\n */\n PagerMessage.prototype.format = function (str, args) {\n var regx;\n var regExp = RegExp;\n for (var i = 0; i < args.length; i++) {\n regx = new regExp('\\\\{' + (i) + '\\\\}', 'gm');\n str = str.replace(regx, args[parseInt(i.toString(), 10)].toString());\n }\n return str;\n };\n return PagerMessage;\n}());\nexport { PagerMessage };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, L10n, Browser, addClass, removeClass, classList } from '@syncfusion/ej2-base';\nimport { createElement, compile as templateCompiler, EventHandler, extend } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Property, Event, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { NumericContainer } from './numeric-container';\nimport { PagerMessage } from './pager-message';\nimport { appendChildren, parentsUntil } from '../grid/base/util';\nimport * as events from '../grid/base/constant';\n/**\n * Represents the `Pager` component.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Pager = /** @class */ (function (_super) {\n __extends(Pager, _super);\n /**\n * Constructor for creating the component.\n *\n * @param {PagerModel} options - specifies the options\n * @param {string} element - specifies the element\n * @param {string} parent - specifies the pager parent\n * @hidden\n */\n function Pager(options, element, parent) {\n var _this = _super.call(this, options, element) || this;\n /** @hidden */\n _this.hasParent = false;\n _this.checkAll = true;\n _this.pageRefresh = 'pager-refresh';\n _this.firstPagerFocus = false;\n /** @hidden */\n _this.isCancel = false;\n _this.parent = parent;\n return _this;\n }\n /**\n * To provide the array of modules needed for component rendering\n *\n * @returns {ModuleDeclaration[]} returns the modules declaration\n * @hidden\n */\n Pager.prototype.requiredModules = function () {\n var modules = [];\n if (this.enableExternalMessage) {\n modules.push({\n member: 'externalMessage',\n args: [this],\n name: 'ExternalMessage'\n });\n }\n if (this.checkpagesizes()) {\n modules.push({\n member: 'pagerdropdown',\n args: [this],\n name: 'PagerDropDown'\n });\n }\n return modules;\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @hidden\n */\n Pager.prototype.preRender = function () {\n //preRender\n this.defaultConstants = {\n currentPageInfo: '{0} of {1} pages',\n totalItemsInfo: '({0} items)',\n totalItemInfo: '({0} item)',\n firstPageTooltip: 'Go to first page',\n lastPageTooltip: 'Go to last page',\n nextPageTooltip: 'Go to next page',\n previousPageTooltip: 'Go to previous page',\n nextPagerTooltip: 'Go to next pager items',\n previousPagerTooltip: 'Go to previous pager items',\n pagerDropDown: 'Items per page',\n pagerAllDropDown: 'Items',\n CurrentPageInfo: '{0} of {1} pages',\n TotalItemsInfo: '({0} items)',\n FirstPageTooltip: 'Go to first page',\n LastPageTooltip: 'Go to last page',\n NextPageTooltip: 'Go to next page',\n PreviousPageTooltip: 'Go to previous page',\n NextPagerTooltip: 'Go to next pager items',\n PreviousPagerTooltip: 'Go to previous pager items',\n PagerDropDown: 'Items per page',\n PagerAllDropDown: 'Items',\n All: 'All',\n Container: 'Pager Container',\n Information: 'Pager Information',\n ExternalMsg: 'Pager external message',\n Page: 'Page ',\n Of: ' of ',\n Pages: ' Pages'\n };\n this.containerModule = new NumericContainer(this);\n this.pagerMessageModule = new PagerMessage(this);\n };\n /**\n * To Initialize the component rendering\n *\n * @returns {void}\n */\n Pager.prototype.render = function () {\n this.element.setAttribute('data-role', 'pager');\n this.element.setAttribute('tabindex', '-1');\n this.initLocalization();\n if (this.cssClass) {\n if (this.cssClass.indexOf(' ') !== -1) {\n addClass([this.element], this.cssClass.split(' '));\n }\n else {\n addClass([this.element], [this.cssClass]);\n }\n }\n if (!this.hasParent) {\n this.element.setAttribute('tabindex', '0');\n }\n if (this.template) {\n if (this.isReactTemplate()) {\n this.on(this.pageRefresh, this.pagerTemplate, this);\n this.notify(this.pageRefresh, {});\n }\n else {\n this.pagerTemplate();\n }\n }\n else {\n this.updateRTL();\n this.totalRecordsCount = this.totalRecordsCount || 0;\n this.renderFirstPrevDivForDevice();\n this.containerModule.render();\n if (this.enablePagerMessage) {\n this.pagerMessageModule.render();\n }\n this.renderNextLastDivForDevice();\n if (this.checkpagesizes() && this.pagerdropdownModule) {\n this.pagerdropdownModule.render();\n }\n this.addAriaLabel();\n if (this.enableExternalMessage && this.externalMessageModule) {\n this.externalMessageModule.render();\n }\n this.refresh();\n this.trigger('created', { 'currentPage': this.currentPage, 'totalRecordsCount': this.totalRecordsCount });\n }\n this.wireEvents();\n this.addListener();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} returns the persist data\n * @hidden\n */\n Pager.prototype.getPersistData = function () {\n var keyEntity = ['currentPage', 'pageSize'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To destroy the Pager component.\n *\n * @method destroy\n * @returns {void}\n */\n Pager.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n if (this.isReactTemplate()) {\n this.off(this.pageRefresh, this.pagerTemplate);\n if (!this.hasParent) {\n this.destroyTemplate(['template']);\n }\n }\n this.removeListener();\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n this.containerModule.destroy();\n this.pagerMessageModule.destroy();\n if (!this.isReactTemplate()) {\n this.element.innerHTML = '';\n }\n };\n /**\n * Destroys the given template reference.\n *\n * @param {string[]} propertyNames - Defines the collection of template name.\n * @param {any} index - Defines the index\n */\n // eslint-disable-next-line\n Pager.prototype.destroyTemplate = function (propertyNames, index) {\n this.clearTemplate(propertyNames, index);\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Pager.prototype.getModuleName = function () {\n return 'pager';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {PagerModel} newProp - specifies the new property\n * @param {PagerModel} oldProp - specifies the old propety\n * @returns {void}\n * @hidden\n */\n Pager.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.isDestroyed) {\n return;\n }\n if ((newProp.pageSize === this.getLocalizedLabel('All')) && oldProp.pageSize === this.totalRecordsCount) {\n this.pageSize = this.totalRecordsCount;\n return;\n }\n if (newProp.pageCount !== oldProp.pageCount) {\n this.containerModule.refreshNumericLinks();\n this.containerModule.refresh();\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'currentPage':\n if (this.checkGoToPage(newProp.currentPage, oldProp.currentPage)) {\n this.currentPageChanged(newProp, oldProp);\n }\n break;\n case 'pageSize':\n case 'totalRecordsCount':\n case 'customText':\n if (this.checkpagesizes() && this.pagerdropdownModule) {\n if (oldProp.pageSize !== newProp.pageSize) {\n this.currentPage = 1;\n }\n this.pagerdropdownModule.setDropDownValue('value', this.pageSize);\n }\n if (newProp.pageSize !== oldProp.pageSize) {\n this.pageSize = newProp.pageSize;\n this.currentPageChanged(newProp, oldProp);\n if (this.isCancel && this.hasParent) {\n this.parent\n .setProperties({ pageSettings: { pageSize: oldProp.pageSize } }, true);\n }\n }\n else {\n this.refresh();\n }\n break;\n case 'pageSizes':\n if (this.checkpagesizes() && this.pagerdropdownModule) {\n this.pagerdropdownModule.destroy();\n this.pagerdropdownModule.render();\n }\n this.refresh();\n break;\n case 'template':\n this.templateFn = this.compile(this.template);\n this.refresh();\n break;\n case 'locale':\n this.initLocalization();\n this.refresh();\n break;\n case 'enableExternalMessage':\n if (this.enableExternalMessage && this.externalMessageModule) {\n this.externalMessageModule.render();\n }\n break;\n case 'externalMessage':\n if (this.externalMessageModule) {\n this.externalMessageModule.refresh();\n }\n break;\n case 'enableRtl':\n this.updateRTL();\n break;\n case 'enablePagerMessage':\n if (this.enablePagerMessage) {\n this.pagerMessageModule.showMessage();\n }\n else {\n this.pagerMessageModule.hideMessage();\n }\n break;\n }\n }\n this.resizePager();\n };\n Pager.prototype.wireEvents = function () {\n if (!this.hasParent) {\n EventHandler.add(this.element, 'keydown', this.keyPressHandler, this);\n EventHandler.add(document.body, 'keydown', this.keyDownHandler, this);\n }\n EventHandler.add(this.element, 'focusin', this.onFocusIn, this);\n EventHandler.add(this.element, 'focusout', this.onFocusOut, this);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.add(window, 'resize', this.resizePager, this);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.add(window, 'load', this.resizePager, this);\n };\n Pager.prototype.unwireEvents = function () {\n if (!this.hasParent) {\n EventHandler.remove(this.element, 'keydown', this.keyPressHandler);\n EventHandler.remove(document.body, 'keydown', this.keyDownHandler);\n }\n EventHandler.remove(this.element, 'focusin', this.onFocusIn);\n EventHandler.remove(this.element, 'focusout', this.onFocusOut);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.remove(window, 'resize', this.resizePager);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n EventHandler.remove(window, 'load', this.resizePager);\n };\n Pager.prototype.onFocusIn = function (e) {\n var focusedTabIndexElement = this.getFocusedTabindexElement();\n if (isNullOrUndefined(focusedTabIndexElement)) {\n var target = e.target;\n var dropDownPage = this.getDropDownPage();\n if (!this.hasParent) {\n this.element.tabIndex = -1;\n }\n if (target === this.element && !this.hasParent) {\n var focusablePagerElements = this.getFocusablePagerElements(this.element, []);\n this.addFocus(focusablePagerElements[0], true);\n return;\n }\n if (target === this.element) {\n this.element.tabIndex = 0;\n return;\n }\n if (target !== dropDownPage && !target.classList.contains('e-disable')) {\n this.addFocus(target, true);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Pager.prototype.onFocusOut = function (e) {\n var focusedElement = this.getFocusedElement();\n var dropDownPage = this.getDropDownPage();\n if (!isNullOrUndefined(focusedElement)) {\n this.removeFocus(focusedElement, true);\n }\n if (this.pageSizes && dropDownPage && dropDownPage.classList.contains('e-input-focus')) {\n this.removeFocus(dropDownPage, true);\n }\n this.setTabIndexForFocusLastElement();\n if (!this.hasParent) {\n this.element.tabIndex = 0;\n }\n if (this.hasParent) {\n this.element.tabIndex = -1;\n }\n };\n Pager.prototype.keyDownHandler = function (e) {\n if (e.altKey) {\n if (e.keyCode === 74) {\n var focusablePagerElements = this.getFocusablePagerElements(this.element, []);\n if (focusablePagerElements.length > 0) {\n focusablePagerElements[0].focus();\n }\n }\n }\n };\n Pager.prototype.keyPressHandler = function (e) {\n var presskey = extend(e, { cancel: false });\n this.notify(events.keyPressed, presskey);\n if (presskey.cancel === true) {\n e.stopImmediatePropagation();\n }\n };\n Pager.prototype.addListener = function () {\n if (this.isDestroyed) {\n return;\n }\n if (!this.hasParent) {\n this.on(events.keyPressed, this.onKeyPress, this);\n }\n };\n Pager.prototype.removeListener = function () {\n if (this.isDestroyed) {\n return;\n }\n if (!this.hasParent) {\n this.off(events.keyPressed, this.onKeyPress);\n }\n };\n Pager.prototype.onKeyPress = function (e) {\n if (!this.hasParent) {\n if (this.checkPagerHasFocus()) {\n this.changePagerFocus(e);\n }\n else {\n e.preventDefault();\n this.setPagerFocus();\n }\n }\n };\n /**\n * @returns {boolean} - Return the true value if pager has focus\n * @hidden */\n Pager.prototype.checkPagerHasFocus = function () {\n return this.getFocusedTabindexElement() ? true : false;\n };\n /**\n * @returns {void}\n * @hidden */\n Pager.prototype.setPagerContainerFocus = function () {\n this.element.focus();\n };\n /**\n * @returns {void}\n * @hidden */\n Pager.prototype.setPagerFocus = function () {\n var focusablePagerElements = this.getFocusablePagerElements(this.element, []);\n if (focusablePagerElements.length > 0) {\n focusablePagerElements[0].focus();\n }\n };\n Pager.prototype.setPagerFocusForActiveElement = function () {\n var currentActivePage = this.getActiveElement();\n if (currentActivePage) {\n currentActivePage.focus();\n }\n };\n Pager.prototype.setTabIndexForFocusLastElement = function () {\n var focusablePagerElements = this.getFocusablePagerElements(this.element, []);\n var dropDownPage = this.getDropDownPage();\n if (this.pageSizes && dropDownPage && !isNullOrUndefined(dropDownPage.offsetParent)) {\n dropDownPage.tabIndex = 0;\n }\n else if (focusablePagerElements.length > 0) {\n focusablePagerElements[focusablePagerElements.length - 1].tabIndex = 0;\n }\n };\n /**\n * @param {KeyboardEventArgs} e - Keyboard Event Args\n * @returns {void}\n * @hidden */\n Pager.prototype.changePagerFocus = function (e) {\n this.keyAction = e.key;\n if (e.shiftKey && e.keyCode === 9) {\n this.changeFocusByShiftTab(e);\n }\n else if (e.keyCode === 9) {\n this.changeFocusByTab(e);\n }\n else if (e.keyCode === 13 || e.keyCode === 32) {\n this.navigateToPageByEnterOrSpace(e);\n }\n else if (e.keyCode === 37 || e.keyCode === 39 || e.keyCode === 35 || e.keyCode === 36) {\n this.navigateToPageByKey(e);\n }\n this.keyAction = '';\n };\n Pager.prototype.getFocusedTabindexElement = function () {\n var focusedTabIndexElement;\n var tabindexElements = this.element.querySelectorAll('[tabindex]:not([tabindex=\"-1\"])');\n for (var i = 0; i < tabindexElements.length; i++) {\n var element = tabindexElements[parseInt(i.toString(), 10)];\n if (element && (element.classList.contains('e-focused') || element.classList.contains('e-input-focus'))) {\n focusedTabIndexElement = element;\n break;\n }\n }\n return focusedTabIndexElement;\n };\n Pager.prototype.changeFocusByTab = function (e) {\n var currentItemPagerFocus = this.getFocusedTabindexElement();\n var focusablePagerElements = this.getFocusablePagerElements(this.element, []);\n var dropDownPage = this.getDropDownPage();\n if (focusablePagerElements.length > 0) {\n if (this.pageSizes && dropDownPage && currentItemPagerFocus === focusablePagerElements[focusablePagerElements.length - 1]) {\n dropDownPage.tabIndex = 0;\n }\n else {\n for (var i = 0; i < focusablePagerElements.length; i++) {\n if (currentItemPagerFocus === focusablePagerElements[parseInt(i.toString(), 10)]) {\n var incrementNumber = i + 1;\n if (incrementNumber < focusablePagerElements.length) {\n e.preventDefault();\n focusablePagerElements[parseInt(incrementNumber.toString(), 10)].focus();\n }\n break;\n }\n }\n }\n }\n };\n Pager.prototype.changeFocusByShiftTab = function (e) {\n var currentItemPagerFocus = this.getFocusedTabindexElement();\n var focusablePagerElements = this.getFocusablePagerElements(this.element, []);\n var dropDownPage = this.getDropDownPage();\n if (this.pageSizes && dropDownPage && dropDownPage.classList.contains('e-input-focus')) {\n dropDownPage.tabIndex = -1;\n this.addFocus(focusablePagerElements[focusablePagerElements.length - 1], true);\n }\n else if (focusablePagerElements.length > 0) {\n for (var i = 0; i < focusablePagerElements.length; i++) {\n if (currentItemPagerFocus === focusablePagerElements[parseInt(i.toString(), 10)]) {\n var decrementNumber = i - 1;\n if (decrementNumber >= 0) {\n e.preventDefault();\n focusablePagerElements[parseInt(decrementNumber.toString(), 10)].focus();\n }\n else if (this.hasParent) {\n var rows = this.parent.getRows();\n var lastRow = rows[rows.length - 1];\n var lastCell = lastRow.lastChild;\n e.preventDefault();\n lastCell.focus();\n this.firstPagerFocus = true;\n }\n break;\n }\n }\n }\n };\n /**\n * @returns {void}\n * @hidden */\n Pager.prototype.checkFirstPagerFocus = function () {\n if (this.firstPagerFocus) {\n this.firstPagerFocus = false;\n return true;\n }\n return false;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Pager.prototype.navigateToPageByEnterOrSpace = function (e) {\n var currentItemPagerFocus = this.getFocusedElement();\n if (currentItemPagerFocus) {\n this.goToPage(parseInt(currentItemPagerFocus.getAttribute('index'), 10));\n var currentActivePage = this.getActiveElement();\n var selectedClass = this.getClass(currentItemPagerFocus);\n var classElement = this.getElementByClass(selectedClass);\n if ((selectedClass === 'e-first' || selectedClass === 'e-prev' || selectedClass === 'e-next'\n || selectedClass === 'e-last' || selectedClass === 'e-pp' || selectedClass === 'e-np')\n && classElement && !classElement.classList.contains('e-disable')) {\n classElement.focus();\n }\n else if (this.checkFocusInAdaptiveMode(currentItemPagerFocus)) {\n this.changeFocusInAdaptiveMode(currentItemPagerFocus);\n }\n else {\n if (currentActivePage) {\n currentActivePage.focus();\n }\n }\n }\n };\n Pager.prototype.navigateToPageByKey = function (e) {\n var actionClass = e.keyCode === 37 ? '.e-prev' : e.keyCode === 39 ? '.e-next'\n : e.keyCode === 35 ? '.e-last' : e.keyCode === 36 ? '.e-first' : '';\n var pagingItem = this.element.querySelector(actionClass);\n var currentItemPagerFocus = this.getFocusedElement();\n if (!isNullOrUndefined(pagingItem) && pagingItem.hasAttribute('index')\n && !isNaN(parseInt(pagingItem.getAttribute('index'), 10))) {\n this.goToPage(parseInt(pagingItem.getAttribute('index'), 10));\n var currentActivePage = this.getActiveElement();\n if (this.checkFocusInAdaptiveMode(currentItemPagerFocus)) {\n this.changeFocusInAdaptiveMode(currentItemPagerFocus);\n }\n else {\n if (currentActivePage) {\n currentActivePage.focus();\n }\n }\n }\n };\n Pager.prototype.checkFocusInAdaptiveMode = function (element) {\n var selectedClass = this.getClass(element);\n return selectedClass === 'e-mfirst' || selectedClass === 'e-mprev' || selectedClass === 'e-mnext'\n || selectedClass === 'e-mlast' ? true : false;\n };\n Pager.prototype.changeFocusInAdaptiveMode = function (element) {\n var selectedClass = this.getClass(element);\n var classElement = this.getElementByClass(selectedClass);\n if (classElement && classElement.classList.contains('e-disable')) {\n if (selectedClass === 'e-mnext' || selectedClass === 'e-mlast') {\n var mPrev = this.element.querySelector('.e-mprev');\n mPrev.focus();\n }\n else {\n this.setPagerFocus();\n }\n }\n };\n Pager.prototype.removeTabindexLastElements = function () {\n var tabIndexElements = this.element.querySelectorAll('[tabindex]:not([tabindex=\"-1\"])');\n if (tabIndexElements.length > 1) {\n for (var i = 1; i < tabIndexElements.length; i++) {\n var element = tabIndexElements[parseInt(i.toString(), 10)];\n if (element) {\n element.tabIndex = -1;\n }\n }\n }\n };\n Pager.prototype.getActiveElement = function () {\n return this.element.querySelector('.e-active');\n };\n /**\n * @returns {Element} - Returns DropDown Page\n * @hidden */\n Pager.prototype.getDropDownPage = function () {\n var dropDownPageHolder = this.element.querySelector('.e-pagerdropdown');\n var dropDownPage;\n if (dropDownPageHolder) {\n dropDownPage = dropDownPageHolder.children[0];\n }\n return dropDownPage;\n };\n Pager.prototype.getFocusedElement = function () {\n return this.element.querySelector('.e-focused');\n };\n Pager.prototype.getClass = function (element) {\n var currentClass;\n var classList = ['e-mfirst', 'e-mprev', 'e-first', 'e-prev', 'e-pp',\n 'e-np', 'e-next', 'e-last', 'e-mnext', 'e-mlast'];\n for (var i = 0; i < classList.length; i++) {\n if (element && element.classList.contains(classList[parseInt(i.toString(), 10)])) {\n currentClass = classList[parseInt(i.toString(), 10)];\n return currentClass;\n }\n }\n return currentClass;\n };\n Pager.prototype.getElementByClass = function (className) {\n return this.element.querySelector('.' + className);\n };\n /**\n * @param {Element} element - Pager element\n * @param {Element[]} previousElements - Iterating pager element\n * @returns {Element[]} - Returns focusable pager element\n * @hidden */\n Pager.prototype.getFocusablePagerElements = function (element, previousElements) {\n var target = element;\n var targetChildrens = target.children;\n var pagerElements = previousElements;\n for (var i = 0; i < targetChildrens.length; i++) {\n var element_1 = targetChildrens[parseInt(i.toString(), 10)];\n if (element_1.children.length > 0 && !element_1.classList.contains('e-pagesizes')) {\n pagerElements = this.getFocusablePagerElements(element_1, pagerElements);\n }\n else {\n var tabindexElement = targetChildrens[parseInt(i.toString(), 10)];\n if (tabindexElement.hasAttribute('tabindex') && !element_1.classList.contains('e-disable')\n && element_1.style.display !== 'none'\n && !isNullOrUndefined(element_1.offsetParent)) {\n pagerElements.push(tabindexElement);\n }\n }\n }\n return pagerElements;\n };\n Pager.prototype.addFocus = function (element, addFocusClass) {\n if (!isNullOrUndefined(element)) {\n if (addFocusClass) {\n addClass([element], ['e-focused', 'e-focus']);\n }\n element.tabIndex = 0;\n }\n };\n Pager.prototype.removeFocus = function (element, removeFocusClass) {\n if (removeFocusClass) {\n removeClass([element], ['e-focused', 'e-focus']);\n }\n element.tabIndex = -1;\n };\n /**\n * Gets the localized label by locale keyword.\n *\n * @param {string} key - specifies the key\n * @returns {string} returns the localized label\n */\n Pager.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n /**\n * Navigate to target page by given number.\n *\n * @param {number} pageNo - Defines page number.\n * @returns {void}\n */\n Pager.prototype.goToPage = function (pageNo) {\n if (this.checkGoToPage(pageNo)) {\n this.currentPage = pageNo;\n this.dataBind();\n }\n };\n /**\n * @param {number} pageSize - specifies the pagesize\n * @returns {void}\n * @hidden\n */\n Pager.prototype.setPageSize = function (pageSize) {\n this.pageSize = pageSize;\n this.dataBind();\n };\n Pager.prototype.checkpagesizes = function () {\n if (this.pageSizes === true || this.pageSizes.length) {\n return true;\n }\n return false;\n };\n Pager.prototype.checkGoToPage = function (newPageNo, oldPageNo) {\n if (newPageNo !== this.currentPage) {\n this.previousPageNo = this.currentPage;\n }\n if (!isNullOrUndefined(oldPageNo)) {\n this.previousPageNo = oldPageNo;\n }\n if (this.previousPageNo !== newPageNo && (newPageNo >= 1 && newPageNo <= this.totalPages)) {\n return true;\n }\n return false;\n };\n Pager.prototype.currentPageChanged = function (newProp, oldProp) {\n if (this.enableQueryString) {\n this.updateQueryString(this.currentPage);\n }\n if (newProp.currentPage !== oldProp.currentPage || newProp.pageSize !== oldProp.pageSize) {\n var args = {\n currentPage: this.currentPage,\n newProp: newProp, oldProp: oldProp, cancel: false\n };\n this.trigger('click', args);\n if (!args.cancel) {\n this.isCancel = false;\n this.refresh();\n }\n else {\n this.isCancel = true;\n if (oldProp && oldProp.pageSize) {\n this.setProperties({ pageSize: oldProp.pageSize }, true);\n if (this.pagerdropdownModule) {\n this.pagerdropdownModule.setDropDownValue('value', oldProp.pageSize);\n this.pagerdropdownModule['dropDownListObject'].text = oldProp.pageSize + '';\n }\n }\n }\n }\n };\n Pager.prototype.pagerTemplate = function () {\n if (this.isReactTemplate() && this.hasParent) {\n return;\n }\n var result;\n this.element.classList.add('e-pagertemplate');\n this.compile(this.template);\n var data = {\n currentPage: this.currentPage, pageSize: this.pageSize, pageCount: this.pageCount,\n totalRecordsCount: this.totalRecordsCount, totalPages: this.totalPages\n };\n var tempId = this.element.parentElement.id + '_template';\n if (this.isReactTemplate() && !this.isVue) {\n this.getPagerTemplate()(data, this, 'template', tempId, null, null, this.element);\n this.renderReactTemplates();\n }\n else {\n result = this.isVue ? this.getPagerTemplate()(data, this, 'template') : this.getPagerTemplate()(data);\n appendChildren(this.element, result);\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Pager.prototype.updateTotalPages = function () {\n this.totalPages = this.isAllPage ? 1 : (this.totalRecordsCount % this.pageSize === 0) ? (this.totalRecordsCount / this.pageSize) :\n (parseInt((this.totalRecordsCount / this.pageSize).toString(), 10) + 1);\n };\n /**\n * @returns {Function} returns the function\n * @hidden\n */\n Pager.prototype.getPagerTemplate = function () {\n return this.templateFn;\n };\n /**\n * @param {string | Function} template - specifies the template\n * @returns {Function} returns the function\n * @hidden\n */\n Pager.prototype.compile = function (template) {\n if (template) {\n try {\n if (typeof template === 'function') {\n this.templateFn = templateCompiler(template);\n }\n else {\n if (document.querySelectorAll(template).length) {\n this.templateFn = templateCompiler(document.querySelector(template).innerHTML.trim());\n }\n }\n }\n catch (e) {\n this.templateFn = templateCompiler(template);\n }\n }\n return undefined;\n };\n /**\n * Refreshes page count, pager information and external message.\n *\n * @returns {void}\n */\n Pager.prototype.refresh = function () {\n if (this.template) {\n if (this.isReactTemplate()) {\n this.updateTotalPages();\n this.notify(this.pageRefresh, {});\n }\n else {\n this.element.innerHTML = '';\n this.updateTotalPages();\n this.pagerTemplate();\n }\n }\n else {\n this.updateRTL();\n var focusedTabIndexElement = this.getFocusedTabindexElement();\n this.containerModule.refresh();\n this.removeTabindexLastElements();\n if (focusedTabIndexElement && focusedTabIndexElement.classList.contains('e-disable')) {\n if (this.checkFocusInAdaptiveMode(focusedTabIndexElement)) {\n this.changeFocusInAdaptiveMode(focusedTabIndexElement);\n }\n else {\n this.setPagerFocusForActiveElement();\n }\n }\n if (this.enablePagerMessage) {\n this.pagerMessageModule.refresh();\n }\n if (this.pagerdropdownModule) {\n this.pagerdropdownModule.refresh();\n }\n if (this.enableExternalMessage && this.externalMessageModule) {\n this.externalMessageModule.refresh();\n }\n this.setTabIndexForFocusLastElement();\n this.resizePager();\n }\n };\n Pager.prototype.updateRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n Pager.prototype.initLocalization = function () {\n this.localeObj = new L10n(this.getModuleName(), this.defaultConstants, this.locale);\n };\n Pager.prototype.updateQueryString = function (value) {\n var updatedUrl = this.getUpdatedURL(window.location.href, 'page', value.toString());\n window.history.pushState({ path: updatedUrl }, '', updatedUrl);\n };\n Pager.prototype.getUpdatedURL = function (uri, key, value) {\n var regExp = RegExp;\n var regx = new regExp('([?|&])' + key + '=.*?(&|#|$)', 'i');\n if (uri.match(regx)) {\n return uri.replace(regx, '$1' + key + '=' + value + '$2');\n }\n else {\n var hash = '';\n if (uri.indexOf('#') !== -1) {\n hash = uri.replace(/.*#/, '#');\n uri = uri.replace(/#.*/, '');\n }\n return uri + (uri.indexOf('?') !== -1 ? '&' : '?') + key + '=' + value + hash;\n }\n };\n Pager.prototype.renderFirstPrevDivForDevice = function () {\n this.element.appendChild(createElement('div', {\n className: 'e-mfirst e-icons e-icon-first',\n attrs: { title: this.getLocalizedLabel('firstPageTooltip'), tabindex: '-1' }\n }));\n this.element.appendChild(createElement('div', {\n className: 'e-mprev e-icons e-icon-prev',\n attrs: { title: this.getLocalizedLabel('previousPageTooltip'), tabindex: '-1' }\n }));\n };\n Pager.prototype.renderNextLastDivForDevice = function () {\n this.element.appendChild(createElement('div', {\n className: 'e-mnext e-icons e-icon-next',\n attrs: { title: this.getLocalizedLabel('nextPageTooltip'), tabindex: '-1' }\n }));\n this.element.appendChild(createElement('div', {\n className: 'e-mlast e-icons e-icon-last',\n attrs: { title: this.getLocalizedLabel('lastPageTooltip'), tabindex: '-1' }\n }));\n };\n Pager.prototype.addAriaLabel = function () {\n var classList = ['.e-mfirst', '.e-mprev', '.e-mnext', '.e-mlast'];\n if (!Browser.isDevice) {\n for (var i = 0; i < classList.length; i++) {\n var element = this.element.querySelector(classList[parseInt(i.toString(), 10)]);\n element.setAttribute('aria-label', element.getAttribute('title'));\n }\n }\n };\n Pager.prototype.isReactTemplate = function () {\n return (this.isReact || this.isVue) && this.template && typeof (this.template) !== 'string';\n };\n /**\n * Loop through all the inner elements of pager to calculate the required width for pager child elements.\n *\n * @returns {number} returns the actual width occupied by pager elements.\n */\n Pager.prototype.calculateActualWidth = function () {\n var pagerElements = this.element.querySelectorAll(\n /* tslint:disable-next-line:max-line-length */\n '.e-mfirst, .e-mprev, .e-icon-first, .e-icon-prev, .e-pp:not(.e-disable), .e-numericitem:not(.e-hide), .e-numericitem.e-active.e-hide, .e-np:not(.e-disable), .e-icon-next, .e-icon-last, .e-parentmsgbar, .e-mnext, .e-mlast, .e-pagerdropdown, .e-pagerconstant');\n var actualWidth = 0;\n for (var i = 0; i < pagerElements.length; i++) {\n if (getComputedStyle(pagerElements[parseInt(i.toString(), 10)]).display !== 'none') {\n actualWidth += pagerElements[parseInt(i.toString(), 10)].offsetWidth\n + parseFloat(getComputedStyle(pagerElements[parseInt(i.toString(), 10)]).marginLeft)\n + parseFloat(getComputedStyle(pagerElements[parseInt(i.toString(), 10)]).marginRight);\n }\n }\n var pagerContainer = this.element.querySelector('.e-pagercontainer');\n actualWidth += parseFloat(getComputedStyle(pagerContainer).marginLeft)\n + parseFloat(getComputedStyle(pagerContainer).marginRight);\n return actualWidth;\n };\n /**\n * Resize pager component by hiding pager component's numeric items based on total width available for pager.\n *\n * @returns {void}\n */\n Pager.prototype.resizePager = function () {\n var _this = this;\n var isStyleApplied = this.element.classList.contains('e-pager') ? getComputedStyle(this.element).getPropertyValue('border-style').includes('solid') : null;\n if (!(this.template) && isStyleApplied) {\n var pagerContainer = this.element.querySelector('.e-pagercontainer');\n var actualWidth = this.calculateActualWidth();\n var pagerWidth = this.element.clientWidth\n - parseFloat(getComputedStyle(this.element).paddingLeft)\n - parseFloat(getComputedStyle(this.element).paddingRight)\n - parseFloat(getComputedStyle(this.element).marginLeft)\n - parseFloat(getComputedStyle(this.element).marginRight);\n var numItems = pagerContainer.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n var hiddenNumItems = pagerContainer.querySelectorAll('.e-numericitem.e-hide:not([style*=\"display: none\"])');\n var hideFrom = numItems.length;\n var showFrom = 1;\n var bufferWidth = (!isNullOrUndefined(parentsUntil(this.element, 'e-bigger'))) ? 10 : 5;\n var NP = pagerContainer.querySelector('.e-np');\n var PP = pagerContainer.querySelector('.e-pp');\n var detailItems = this.element.querySelectorAll('.e-parentmsgbar:not(.e-hide):not([style*=\"display: none\"]), .e-pagesizes:not(.e-hide):not([style*=\"display: none\"])');\n var totDetailWidth_1 = 0;\n if (detailItems.length) {\n detailItems.forEach(function (item) {\n totDetailWidth_1 += item.offsetWidth;\n });\n this.averageDetailWidth = totDetailWidth_1 / detailItems.length;\n }\n var totalWidth = 0;\n /**\n * Loop to calculate average width of numeric item.\n */\n for (var i = 0; i < numItems.length; i++) {\n totalWidth += numItems[parseInt(i.toString(), 10)].offsetWidth\n + parseFloat(getComputedStyle(numItems[parseInt(i.toString(), 10)]).marginLeft)\n + parseFloat(getComputedStyle(numItems[parseInt(i.toString(), 10)]).marginRight);\n }\n var numericItemWidth = totalWidth / numItems.length;\n /**\n * Condition to hide numeric items when calculated actual width exceeds available pager space.\n */\n if (pagerWidth > 0 && (actualWidth >= (pagerWidth - (numericItemWidth ? numericItemWidth : 0)))) {\n this.isPagerResized = true;\n if (this.currentPage !== this.totalPages) {\n classList(NP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);\n }\n actualWidth = this.calculateActualWidth();\n var diff = Math.abs((actualWidth) - pagerWidth);\n // To calculate number of numeric items need to be hidden.\n var numToHide = Math.ceil(diff / (numericItemWidth));\n numToHide = (numToHide === 0) ? 1 : (numToHide > numItems.length) ? (numItems.length - 1) : numToHide;\n for (var i = 1; i <= numToHide; i++) {\n var hideIndex = hideFrom - parseInt(i.toString(), 10);\n numItems = pagerContainer.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n if (this.currentPage !== 1 && ((parseInt(numItems[Math.abs(hideIndex)].getAttribute('index'), 10) === this.currentPage)\n || parseInt(numItems[numItems.length - 1].getAttribute('index'), 10) === this.currentPage)) {\n hideIndex = 0;\n classList(PP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);\n }\n if (numItems[Math.abs(hideIndex)] && !(numItems[Math.abs(hideIndex)].classList.contains('e-currentitem'))) {\n numItems[Math.abs(hideIndex)].classList.add('e-hide');\n }\n }\n numItems = pagerContainer.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n // To hide Pager message elements when no more numeric items available to hide.\n if (numItems.length <= 1 && detailItems.length && window.innerWidth >= 768) {\n var pagerDetailItemsWidth = this.calculateActualWidth();\n if ((pagerDetailItemsWidth) > (pagerWidth - bufferWidth)) {\n var detailtoHide = Math.floor((pagerWidth - (pagerDetailItemsWidth - totDetailWidth_1))\n / this.averageDetailWidth);\n detailtoHide = detailItems.length - detailtoHide;\n for (var i = 0; i < (detailtoHide > detailItems.length ? detailItems.length : detailtoHide); i++) {\n detailItems[parseInt(i.toString(), 10)].classList.add('e-hide');\n }\n }\n }\n }\n /**\n * Condition to show numeric items when space availble in pager at dom.\n */\n else if (actualWidth < (pagerWidth) && hiddenNumItems.length) {\n var diff = Math.abs(pagerWidth - (actualWidth));\n var hiddenDetailItems = this.element.querySelectorAll('.e-parentmsgbar.e-hide, .e-pagesizes.e-hide');\n // To show Pager message elements.\n if (hiddenDetailItems.length && (diff > (this.averageDetailWidth + (this.averageDetailWidth / 4)))) {\n hiddenDetailItems[(hiddenDetailItems.length - 1)].classList.remove('e-hide');\n }\n if ((diff > (numericItemWidth * 2) && !hiddenDetailItems.length && window.innerWidth >= 768)) {\n // To calculate number of numeric items need to be shown.\n var numToShow = Math.floor((diff) / (numericItemWidth + bufferWidth));\n numToShow = (numToShow > hiddenNumItems.length) ? hiddenNumItems.length : (numToShow - 1);\n //Seggregating hidden num items as less index and greater index values than current page value.\n var lesserIndexItems = Array.from(hiddenNumItems).filter(function (item) { return parseInt(item.getAttribute('index'), 10) < _this.currentPage; }).sort(function (a, b) { return parseInt(b.getAttribute('index'), 10) - parseInt(a.getAttribute('index'), 10); });\n var greaterIndexItems = Array.from(hiddenNumItems).filter(function (item) { return parseInt(item.getAttribute('index'), 10) > _this.currentPage; });\n var showItems = (lesserIndexItems.length && lesserIndexItems)\n || (greaterIndexItems.length && greaterIndexItems);\n for (var i = 1; i <= numToShow; i++) {\n var showItem = showItems && showItems[Math.abs(showFrom - i)];\n if (showItem) {\n showItem.classList.remove('e-hide');\n if (showItem === showItems[showItems.length - 1]) {\n showItems = null;\n }\n }\n }\n }\n }\n numItems = pagerContainer.querySelectorAll('.e-numericitem:not(.e-hide):not([style*=\"display: none\"]):not(.e-np):not(.e-pp)');\n if (numItems.length) {\n if (parseInt(numItems[numItems.length - 1].getAttribute('index'), 10) === this.totalPages) {\n classList(NP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);\n }\n if (parseInt(numItems[0].getAttribute('index'), 10) === 1) {\n classList(PP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);\n }\n var isLastSet = Array.from(numItems).some(function (item) { return parseInt(item.getAttribute('index'), 10) === _this.totalPages; });\n var ppIndex = (parseInt(numItems[0].getAttribute('index'), 10) - (isLastSet ? this.avgNumItems : numItems.length));\n PP.setAttribute('index', (ppIndex < 1) ? '1' : ppIndex.toString());\n NP.setAttribute('index', (parseInt(numItems[numItems.length - 1].getAttribute('index'), 10) + 1).toString());\n this.avgNumItems = isLastSet ? this.avgNumItems : numItems.length;\n }\n /**\n * Condition to add adaptive class name and set pagermessage content with \"/\" when media query css has been applied.\n */\n if (((this.element.offsetWidth < 769) && window.getComputedStyle(this.element.querySelector('.e-mfirst')).getPropertyValue('display') !== 'none') && this.pageSizes) {\n this.element.querySelector('.e-pagesizes').classList.remove('e-hide');\n this.element.querySelector('.e-parentmsgbar').classList.remove('e-hide');\n this.element.classList.add('e-adaptive');\n this.element.querySelector('.e-pagenomsg').innerHTML = this.element.offsetWidth < 481 ? (this.currentPage + ' / ' + this.totalPages) : this.pagerMessageModule.format(this.getLocalizedLabel('currentPageInfo'), [this.totalRecordsCount === 0 ? 0 :\n this.currentPage, this.totalPages || 0, this.totalRecordsCount || 0]) + ' ';\n }\n else {\n this.element.classList.remove('e-adaptive');\n this.element.querySelector('.e-pagenomsg').innerHTML = this.pagerMessageModule.format(this.getLocalizedLabel('currentPageInfo'), [this.totalRecordsCount === 0 ? 0 :\n this.currentPage, this.totalPages || 0, this.totalRecordsCount || 0]) + ' ';\n }\n }\n };\n __decorate([\n Property(false)\n ], Pager.prototype, \"enableQueryString\", void 0);\n __decorate([\n Property(false)\n ], Pager.prototype, \"enableExternalMessage\", void 0);\n __decorate([\n Property(true)\n ], Pager.prototype, \"enablePagerMessage\", void 0);\n __decorate([\n Property(12)\n ], Pager.prototype, \"pageSize\", void 0);\n __decorate([\n Property(10)\n ], Pager.prototype, \"pageCount\", void 0);\n __decorate([\n Property(1)\n ], Pager.prototype, \"currentPage\", void 0);\n __decorate([\n Property()\n ], Pager.prototype, \"totalRecordsCount\", void 0);\n __decorate([\n Property()\n ], Pager.prototype, \"externalMessage\", void 0);\n __decorate([\n Property(false)\n ], Pager.prototype, \"pageSizes\", void 0);\n __decorate([\n Property()\n ], Pager.prototype, \"template\", void 0);\n __decorate([\n Property('')\n ], Pager.prototype, \"customText\", void 0);\n __decorate([\n Event()\n ], Pager.prototype, \"click\", void 0);\n __decorate([\n Property('')\n ], Pager.prototype, \"cssClass\", void 0);\n __decorate([\n Event()\n ], Pager.prototype, \"dropDownChanged\", void 0);\n __decorate([\n Event()\n ], Pager.prototype, \"created\", void 0);\n Pager = __decorate([\n NotifyPropertyChanges\n ], Pager);\n return Pager;\n}(Component));\nexport { Pager };\n","import { createElement, remove } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\n/**\n * `PagerDropDown` module handles selected pageSize from DropDownList.\n */\nvar PagerDropDown = /** @class */ (function () {\n /**\n * Constructor for pager module\n *\n * @param {Pager} pagerModule - specifies the pagermodule\n * @hidden\n */\n function PagerDropDown(pagerModule) {\n this.pagerModule = pagerModule;\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n * @hidden\n */\n PagerDropDown.prototype.getModuleName = function () {\n return 'pagerdropdown';\n };\n /**\n * The function is used to render pager dropdown\n *\n * @returns {void}\n * @hidden\n */\n PagerDropDown.prototype.render = function () {\n var pagerObj = this.pagerModule;\n this.pagerDropDownDiv = createElement('div', { className: 'e-pagesizes' });\n var dropDownDiv = createElement('div', { className: 'e-pagerdropdown' });\n var defaultTextDiv = createElement('div', { className: 'e-pagerconstant' });\n var input = createElement('input', { attrs: { type: 'text', tabindex: '-1' } });\n this.pagerCons = createElement('span', {\n className: 'e-constant', innerHTML: this.pagerModule.getLocalizedLabel('pagerDropDown')\n });\n dropDownDiv.appendChild(input);\n defaultTextDiv.appendChild(this.pagerCons);\n this.pagerDropDownDiv.appendChild(dropDownDiv);\n this.pagerDropDownDiv.appendChild(defaultTextDiv);\n this.pagerModule.element.appendChild(this.pagerDropDownDiv);\n var pageSizesModule = this.pagerModule.pageSizes;\n var pageSizesArray = (pageSizesModule.length ? this.convertValue(pageSizesModule) :\n [this.pagerModule.getLocalizedLabel('All'), '5', '10', '12', '20']);\n var defaultValue = this.pagerModule.pageSize;\n this.dropDownListObject = new DropDownList({\n dataSource: pageSizesArray,\n value: defaultValue.toString(),\n change: this.onChange.bind(this),\n placeholder: this.pagerModule.getLocalizedLabel('pagerDropDown'),\n cssClass: this.pagerModule.cssClass ? 'e-alldrop' + ' ' + this.pagerModule.cssClass : 'e-alldrop'\n });\n this.dropDownListObject.appendTo(input);\n if (pageSizesModule.length) {\n this.dropDownListObject.element.value = this.pagerModule.pageSize.toString();\n }\n pagerObj.pageSize = defaultValue;\n pagerObj.dataBind();\n pagerObj.trigger('dropDownChanged', { pageSize: defaultValue });\n this.addEventListener();\n };\n /**\n * For internal use only - Get the pagesize.\n *\n * @param {ChangeEventArgs} e - specifies the changeeventargs\n * @returns {void}\n * @private\n * @hidden\n */\n PagerDropDown.prototype.onChange = function (e) {\n if (this.dropDownListObject.value === this.pagerModule.getLocalizedLabel('All')) {\n this.pagerModule.pageSize = this.pagerModule.totalRecordsCount;\n this.pagerModule.isAllPage = true;\n this.refresh();\n e.value = this.pagerModule.pageSize;\n if (document.getElementsByClassName('e-popup-open e-alldrop').length) {\n document.getElementsByClassName('e-popup-open e-alldrop')[0].style.display = 'none';\n }\n }\n else {\n this.pagerModule.pageSize = parseInt(this.dropDownListObject.value, 10);\n this.pagerModule.isAllPage = false;\n if (this.pagerCons.innerHTML !== this.pagerModule.getLocalizedLabel('pagerDropDown')) {\n this.refresh();\n }\n }\n this.pagerModule.dataBind();\n if (!this.pagerModule.isCancel) {\n this.pagerModule.trigger('dropDownChanged', {\n pageSize: this.pagerModule.isAllPage ||\n (this.pagerModule.isAllPage === undefined && this.dropDownListObject.value === this.pagerModule.getLocalizedLabel('All')) ?\n this.pagerModule.totalRecordsCount : parseInt(this.dropDownListObject.value, 10)\n });\n }\n };\n PagerDropDown.prototype.refresh = function () {\n if (this.pagerCons) {\n if (this.isPageSizeAll(this.pagerModule.pageSize)) {\n this.pagerCons.innerHTML = this.pagerModule.getLocalizedLabel('pagerAllDropDown');\n this.pagerCons.parentElement.classList.add('e-page-all');\n }\n else {\n this.pagerCons.innerHTML = this.pagerModule.getLocalizedLabel('pagerDropDown');\n this.pagerCons.parentElement.classList.remove('e-page-all');\n }\n this.pagerDropDownDiv.classList.remove('e-hide');\n }\n };\n PagerDropDown.prototype.beforeValueChange = function (prop) {\n if (typeof prop.newProp.value === 'number') {\n var val = prop.newProp.value.toString();\n prop.newProp.value = val;\n }\n };\n PagerDropDown.prototype.convertValue = function (pageSizeValue) {\n var item = pageSizeValue;\n for (var i = 0; i < item.length; i++) {\n item[parseInt(i.toString(), 10)] = parseInt(item[parseInt(i.toString(), 10)], 10) ?\n item[parseInt(i.toString(), 10)].toString() : (this.pagerModule.getLocalizedLabel(item[parseInt(i.toString(), 10)]) !== '')\n ? this.pagerModule.getLocalizedLabel(item[parseInt(i.toString(), 10)]) : item[parseInt(i.toString(), 10)];\n }\n return item;\n };\n PagerDropDown.prototype.isPageSizeAll = function (value) {\n var pageSizeNum = typeof (value) === 'string' && value !== this.pagerModule.getLocalizedLabel('All') ?\n parseInt(value, 10) : value;\n if (pageSizeNum === this.pagerModule.totalRecordsCount || value === this.pagerModule.getLocalizedLabel('All')) {\n return true;\n }\n else {\n return false;\n }\n };\n PagerDropDown.prototype.setDropDownValue = function (prop, value) {\n if (this.dropDownListObject) {\n var isbeforeAll = this.pagerModule.isAllPage;\n this.pagerModule.isAllPage = this.isPageSizeAll(value);\n this.pagerModule.checkAll = (isbeforeAll && this.pagerModule.isAllPage) ? true : false;\n this.dropDownListObject[\"\" + prop] = this.pagerModule.isAllPage ? this.pagerModule.getLocalizedLabel('All') : value;\n }\n };\n PagerDropDown.prototype.addEventListener = function () {\n this.dropDownListObject.on('beforeValueChange', this.beforeValueChange, this);\n };\n PagerDropDown.prototype.removeEventListener = function () {\n this.dropDownListObject.off('beforeValueChange', this.beforeValueChange);\n };\n /**\n * To destroy the Pagerdropdown\n *\n * @param {string} args - specifies the arguments\n * @param {string} args.requestType - specfies the request type\n * @returns {void}\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n PagerDropDown.prototype.destroy = function (args) {\n if (this.dropDownListObject && !this.dropDownListObject.isDestroyed) {\n this.removeEventListener();\n this.dropDownListObject.destroy();\n remove(this.pagerDropDownDiv);\n }\n };\n return PagerDropDown;\n}());\nexport { PagerDropDown };\n","import { createElement, remove, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * `ExternalMessage` module is used to display user provided message.\n */\nvar ExternalMessage = /** @class */ (function () {\n /**\n * Constructor for externalMessage module\n *\n * @param {Pager} pagerModule - specifies the pagermodule\n * @hidden\n */\n function ExternalMessage(pagerModule) {\n this.pagerModule = pagerModule;\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n ExternalMessage.prototype.getModuleName = function () {\n return 'externalMessage';\n };\n /**\n * The function is used to render pager externalMessage\n *\n * @returns {void}\n * @hidden\n */\n ExternalMessage.prototype.render = function () {\n this.element = createElement('div', { className: 'e-pagerexternalmsg', attrs: { 'aria-label': this.pagerModule.getLocalizedLabel('ExternalMsg') } });\n this.pagerModule.element.appendChild(this.element);\n this.refresh();\n };\n /**\n * Refreshes the external message of Pager.\n *\n * @returns {void}\n */\n ExternalMessage.prototype.refresh = function () {\n if (this.pagerModule.externalMessage && this.pagerModule.externalMessage.toString().length) {\n this.showMessage();\n this.element.innerHTML = this.pagerModule.externalMessage;\n }\n else {\n this.hideMessage();\n }\n };\n /**\n * Hides the external message of Pager.\n *\n * @returns {void}\n */\n ExternalMessage.prototype.hideMessage = function () {\n if (!isNullOrUndefined(this.element)) {\n this.element.style.display = 'none';\n }\n };\n /**\n * Shows the external message of the Pager.\n *\n * @returns {void}s\n */\n ExternalMessage.prototype.showMessage = function () {\n this.element.style.display = '';\n };\n /**\n * To destroy the PagerMessage\n *\n * @function destroy\n * @returns {void}\n * @hidden\n */\n ExternalMessage.prototype.destroy = function () {\n if (this.element && this.element.parentElement) {\n remove(this.element);\n }\n };\n return ExternalMessage;\n}());\nexport { ExternalMessage };\n","import { extend } from '@syncfusion/ej2-base';\nimport { remove, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Pager } from '../../pager/pager';\nimport { PagerDropDown } from '../../pager/pager-dropdown';\nimport { ExternalMessage } from '../../pager/external-message';\nimport { extend as gridExtend, getActualProperties, isActionPrevent, addRemoveEventListener, appendChildren } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * The `Page` module is used to render pager and handle paging action.\n */\nvar Page = /** @class */ (function () {\n /**\n * Constructor for the Grid paging module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {PageSettingsModel} pageSettings - specifies the PageSettingsModel\n * @hidden\n */\n function Page(parent, pageSettings) {\n this.isInitialRender = true;\n /** @hidden */\n this.isCancel = false;\n Pager.Inject(ExternalMessage, PagerDropDown);\n this.parent = parent;\n this.pageSettings = pageSettings;\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Page.prototype.getModuleName = function () {\n return 'pager';\n };\n /**\n * The function used to render pager from grid pageSettings\n *\n * @returns {void}\n * @hidden\n */\n Page.prototype.render = function () {\n var gObj = this.parent;\n this.pagerDestroy();\n if (!isNullOrUndefined(this.parent.pagerTemplate)) {\n this.pageSettings.template = this.parent.pagerTemplate;\n this.parent.pageTemplateChange = true;\n }\n this.element = this.parent.createElement('div', { className: 'e-gridpager' });\n var pagerObj = gridExtend({}, extend({}, getActualProperties(this.pageSettings)), {\n click: this.clickHandler.bind(this),\n dropDownChanged: this.onSelect.bind(this),\n enableRtl: gObj.enableRtl, locale: gObj.locale,\n created: this.addAriaAttr.bind(this)\n }, ['parentObj', 'propName']);\n pagerObj.cssClass = this.parent.cssClass ? this.parent.cssClass : '';\n this.pagerObj = new Pager(pagerObj, undefined, this.parent);\n this.pagerObj.hasParent = true;\n this.pagerObj.on(events.pagerRefresh, this.renderReactPagerTemplate, this);\n this.pagerObj.allowServerDataBinding = false;\n };\n Page.prototype.onSelect = function (e) {\n this.pageSettings.pageSize = e.pageSize;\n if (!this.isInitialLoad) {\n this.pageSettings.currentPage = 1;\n }\n };\n Page.prototype.addAriaAttr = function () {\n if (!(this.pageSettings.template)) {\n var numericContainerNew = this.parent.createElement('div', { className: 'e-numericcontainer' });\n var pagerContainer = this.element.querySelector('.e-pagercontainer');\n var frag = document.createDocumentFragment();\n var numericContainer = this.element.querySelector('.e-numericcontainer');\n var links = numericContainer.querySelectorAll('a');\n for (var i = 0; i < links.length; i++) {\n if (this.parent.getContentTable()) {\n links[parseInt(i.toString(), 10)].setAttribute('aria-owns', this.parent.getContentTable().id + ' ' + (i + 1));\n }\n else {\n links[parseInt(i.toString(), 10)].setAttribute('aria-owns', this.parent.element.getAttribute('id') + '_content_table' + ' ' + (i + 1));\n }\n var numericContainerDiv = this.parent.createElement('div');\n numericContainerDiv.appendChild(links[parseInt(i.toString(), 10)]);\n frag.appendChild(numericContainerDiv);\n }\n numericContainerNew.appendChild(frag);\n pagerContainer.replaceChild(numericContainerNew, numericContainer);\n var classList = ['.e-mfirst', '.e-mprev', '.e-first', '.e-prev', '.e-next', '.e-last', '.e-mnext', '.e-mlast'];\n for (var j = 0; j < classList.length; j++) {\n var element = this.element.querySelector(classList[parseInt(j.toString(), 10)]);\n if (this.parent.getContentTable()) {\n element.setAttribute('aria-owns', this.parent.getContentTable().id + classList[parseInt(j.toString(), 10)].replace('.e-', ' '));\n }\n }\n }\n };\n Page.prototype.dataReady = function (e) {\n this.updateModel(e);\n };\n /**\n * Refreshes the page count, pager information, and external message.\n *\n * @returns {void}\n */\n Page.prototype.refresh = function () {\n this.pagerObj.refresh();\n };\n /**\n * Navigates to the target page according to the given number.\n *\n * @param {number} pageNo - Defines the page number to navigate.\n * @returns {void}\n */\n Page.prototype.goToPage = function (pageNo) {\n this.pagerObj.goToPage(pageNo);\n };\n /**\n * @param {number} pageSize - specifies the page size\n * @returns {void}\n * @hidden\n */\n Page.prototype.setPageSize = function (pageSize) {\n this.pagerObj.setPageSize(pageSize);\n };\n /**\n * The function used to update pageSettings model\n *\n * @param {NotifyArgs} e - specfies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Page.prototype.updateModel = function (e) {\n this.parent.pageSettings.totalRecordsCount = e.count;\n if (this.pagerObj.isAllPage) {\n this.parent.pageSettings.pageSize = this.parent.pageSettings.totalRecordsCount;\n }\n if ((e.action === 'add' && e.requestType === 'save') || (e.requestType === 'batchsave')) {\n if (this.pagerObj.isAllPage && (e.count === this.pageSettings.pageSize)) {\n this.pagerObj.setProperties({ pageSize: e.count }, true);\n }\n }\n this.parent.dataBind();\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Page.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, {\n currentPage: this.parent.pageSettings.currentPage, requestType: 'paging',\n type: events.actionComplete\n }));\n };\n /**\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Page.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n var newProp = e.properties;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n this.pagerObj[\"\" + prop] = newProp[\"\" + prop];\n }\n this.pagerObj.dataBind();\n };\n Page.prototype.clickHandler = function (e) {\n var gObj = this.parent;\n if (this.isForceCancel || isActionPrevent(gObj) && !gObj.prevPageMoving && !this.isCancel) {\n if (!this.isForceCancel) {\n if (!isNullOrUndefined(e.newProp) && !isNullOrUndefined(e.newProp.pageSize)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.setPageSize, arg1: e.newProp.pageSize });\n this.pagerObj.setProperties({ pageSize: e.oldProp.pageSize }, true);\n this.parent.setProperties({ pageSettings: { pageSize: e.oldProp.pageSize } }, true);\n this.pagerObj.setProperties({\n currentPage: gObj.pageSettings.currentPage === this.pagerObj.currentPage ?\n this.pagerObj.previousPageNo : gObj.pageSettings.currentPage\n }, true);\n }\n else if (e.currentPage) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.goToPage, arg1: e.currentPage });\n this.pagerObj.currentPage = gObj.pageSettings.currentPage === this.pagerObj.currentPage ?\n this.pagerObj.previousPageNo : gObj.pageSettings.currentPage;\n }\n this.isForceCancel = true;\n this.pagerObj.dataBind();\n }\n else {\n this.isForceCancel = false;\n }\n e.cancel = true;\n return;\n }\n gObj.pageSettings.pageSize = this.pagerObj.pageSize;\n gObj.prevPageMoving = false;\n var prevPage = this.pageSettings.currentPage;\n var args = {\n cancel: false, requestType: 'paging', previousPage: prevPage,\n currentPage: e.currentPage, pageSize: gObj.pageSettings.pageSize, type: events.actionBegin\n };\n if (!this.isCancel) {\n this.pageSettings.currentPage = e.currentPage;\n this.parent.notify(events.modelChanged, args);\n }\n if (args.cancel) {\n e.cancel = true;\n this.parent.setProperties({ pageSettings: { currentPage: prevPage } }, true);\n this.pagerObj.setProperties({ currentPage: prevPage }, true);\n this.isCancel = true;\n return;\n }\n this.isCancel = false;\n this.parent.requestTypeAction = 'paging';\n };\n Page.prototype.keyPressHandler = function (e) {\n if (e.action in keyActions) {\n e.preventDefault();\n this.element.querySelector(keyActions[e.action]).click();\n }\n };\n /**\n * Defines the text of the external message.\n *\n * @param {string} message - Defines the message to update.\n * @returns {void}\n */\n Page.prototype.updateExternalMessage = function (message) {\n if (!this.pagerObj.enableExternalMessage) {\n this.pagerObj.enableExternalMessage = true;\n this.pagerObj.dataBind();\n }\n this.pagerObj.externalMessage = message;\n this.pagerObj.dataBind();\n };\n Page.prototype.appendToElement = function () {\n this.isInitialLoad = true;\n this.parent.element.appendChild(this.element);\n this.parent.setGridPager(this.element);\n this.pagerObj.isReact = this.parent.isReact;\n this.pagerObj.isVue = this.parent.isVue;\n this.pagerObj.appendTo(this.element);\n this.isInitialLoad = false;\n };\n Page.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.render();\n this.appendToElement();\n if (this.isReactTemplate()) {\n this.pagerObj.updateTotalPages();\n this.created();\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Page.prototype.addEventListener = function () {\n this.handlers = {\n load: this.render,\n end: this.appendToElement,\n ready: this.dataReady,\n complete: this.onActionComplete,\n updateLayout: this.enableAfterRender,\n inboundChange: this.onPropertyChanged,\n keyPress: this.keyPressHandler,\n created: this.created\n };\n if (this.parent.isDestroyed) {\n return;\n }\n if (this.parent.isReact || this.parent.isVue) {\n this.parent.addEventListener(literals.create, this.handlers.created.bind(this));\n }\n this.evtHandlers = [{ event: events.initialLoad, handler: this.handlers.load },\n { event: events.initialEnd, handler: this.handlers.end },\n { event: events.dataReady, handler: this.handlers.ready },\n { event: events.pageComplete, handler: this.handlers.complete },\n { event: events.uiUpdate, handler: this.handlers.updateLayout },\n { event: events.inBoundModelChanged, handler: this.handlers.inboundChange },\n { event: events.keyPressed, handler: this.handlers.keyPress },\n { event: events.destroy, handler: this.destroy }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n };\n Page.prototype.created = function () {\n if (this.isInitialRender && this.isReactTemplate()) {\n this.isInitialRender = false;\n this.renderReactPagerTemplate();\n }\n };\n Page.prototype.isReactTemplate = function () {\n return (this.parent.isReact || this.parent.isVue) && this.pagerObj.template && typeof (this.pagerObj.template) !== 'string';\n };\n Page.prototype.renderReactPagerTemplate = function () {\n if (!this.isInitialRender && this.isReactTemplate()) {\n var result = void 0;\n this.parent.destroyTemplate(['pagerTemplate']);\n this.element.classList.add('e-pagertemplate');\n this.pagerObj.compile(this.pagerObj.template);\n var page = this.parent.pageSettings;\n var data = {\n currentPage: page.currentPage, pageSize: page.pageSize, pageCount: page.pageCount,\n totalRecordsCount: page.totalRecordsCount, totalPages: this.pagerObj.totalPages\n };\n var tempId = this.parent.id + '_pagertemplate';\n if (this.parent.isReact) {\n this.pagerObj.templateFn(data, this.parent, 'pagerTemplate', tempId, null, null, this.pagerObj.element);\n this.parent.renderTemplates();\n }\n else {\n result = this.pagerObj.templateFn(data, this.parent, 'pagerTemplate');\n appendChildren(this.pagerObj.element, result);\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Page.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n if (this.parent.isReact || this.parent.isVue) {\n this.parent.removeEventListener(literals.create, this.handlers.created);\n }\n this.parent.off(events.pagerRefresh, this.renderReactPagerTemplate);\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n };\n /**\n * To destroy the pager\n *\n * @returns {void}\n * @hidden\n */\n Page.prototype.destroy = function () {\n this.removeEventListener();\n if (this.isReactTemplate()) {\n this.parent.destroyTemplate(['pagerTemplate']);\n }\n this.pagerObj.destroy();\n };\n Page.prototype.pagerDestroy = function () {\n if (this.pagerObj && !this.pagerObj.isDestroyed) {\n this.pagerObj.destroy();\n remove(this.element);\n }\n };\n return Page;\n}());\nexport { Page };\n/**\n * @hidden\n */\nvar keyActions = {\n pageUp: '.e-prev',\n pageDown: '.e-next',\n ctrlAltPageDown: '.e-last',\n ctrlAltPageUp: '.e-first',\n altPageUp: '.e-pp',\n altPageDown: '.e-np'\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, getValue, closest } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { appendChildren, addStickyColumnPosition } from '../base/util';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport * as events from '../base/constant';\n/**\n * FilterCellRenderer class which responsible for building filter cell.\n *\n * @hidden\n */\nvar FilterCellRenderer = /** @class */ (function (_super) {\n __extends(FilterCellRenderer, _super);\n function FilterCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-filterbarcell', attrs: { role: 'columnheader' } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n *\n * @returns {string} returns the gui\n */\n FilterCellRenderer.prototype.getGui = function () {\n return this.parent.createElement('div');\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell\n * @param {Object} data\n */\n /* tslint:disable-next-line:max-func-body-length */\n FilterCellRenderer.prototype.render = function (cell, data) {\n var tr = this.parent.element.querySelector('.e-filterbar');\n var node = this.element.cloneNode();\n var innerDIV = this.getGui();\n var input;\n var column = cell.column;\n tr.appendChild(node);\n node.setAttribute('e-mappinguid', column.uid);\n if (column.filterTemplate) {\n var fltrData = {};\n if (data) {\n fltrData[column.field] = data[column.field];\n }\n var col = 'column';\n fltrData[\"\" + col] = column;\n if (column.visible) {\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else {\n var element = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(node, element);\n }\n }\n else {\n node.classList.add('e-hide');\n }\n }\n else {\n if (column.type !== 'checkbox') {\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n node.classList.add('e-fltrtemp');\n attributes(innerDIV, {\n 'class': 'e-fltrtempdiv'\n });\n if (isNullOrUndefined(column.filterBarTemplate.create)) {\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',\n attrs: { type: 'search', title: column.headerText }\n });\n innerDIV.appendChild(input);\n }\n else {\n var args = { column: column, node: Element };\n var temp = column.filterBarTemplate.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n input = temp(args);\n if (typeof input === 'string') {\n var div = this.parent.createElement('div');\n div.innerHTML = input;\n input = div.firstChild;\n }\n attributes(innerDIV, {\n class: 'e-filterUi_input e-filtertext e-fltrTemp',\n title: column.headerText,\n id: column.field + '_filterBarcell'\n });\n innerDIV.appendChild(input);\n }\n }\n else {\n attributes(innerDIV, {\n 'class': 'e-filterdiv e-fltrinputdiv'\n });\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filtertext',\n attrs: {\n type: 'search', title: column.headerText + cell.attributes.title,\n value: data[cell.column.field] ? data[cell.column.field] : ''\n }\n });\n innerDIV.appendChild(input);\n var args = {\n element: input, floatLabelType: 'Never',\n properties: {\n enableRtl: this.parent.enableRtl, showClearButton: true, cssClass: this.parent.cssClass\n }\n };\n Input.createInput(args, this.parent.createElement);\n }\n //TODO: apply intial filtering\n if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {\n input.setAttribute('disabled', 'true');\n input.classList.add('e-disable');\n }\n var clearIconElem = innerDIV.querySelector('.e-clear-icon');\n if (clearIconElem) {\n clearIconElem.setAttribute('title', this.parent.localeObj.getConstant('ClearButton'));\n }\n if (!column.visible) {\n node.classList.add('e-hide');\n }\n this.appendHtml(node, innerDIV);\n // render's the dropdownlist component if showFilterBarOperator sets to true\n if (this.parent.filterSettings.showFilterBarOperator && this.parent.filterSettings.type === 'FilterBar' &&\n !this.parent.isPrinting && isNullOrUndefined(column.filterTemplate) && isNullOrUndefined(column.filterBarTemplate)) {\n this.operatorIconRender(innerDIV, column, cell);\n }\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n var templateWrite = column.filterBarTemplate.write;\n var args = { element: input, column: column };\n if (typeof templateWrite === 'string') {\n templateWrite = getValue(templateWrite, window);\n }\n templateWrite.call(this, args);\n }\n }\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHTML\n * @returns {Element} retruns the element\n */\n FilterCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n FilterCellRenderer.prototype.operatorIconRender = function (innerDIV, column, cell) {\n var gObj = this.parent;\n var operators;\n var fbicon = this.parent.createElement('input', {\n className: ' e-filterbaroperator e-icons e-icon-filter',\n id: cell.column.uid\n });\n innerDIV.querySelector('span').appendChild(fbicon);\n if (column.filter && column.filter.operator) {\n operators = column.filter.operator;\n }\n else if (gObj.filterSettings.columns.length) {\n for (var i = 0, a = gObj.filterSettings.columns; i < a.length; i++) {\n var col = a[parseInt(i.toString(), 10)];\n if (col.field === column.field) {\n operators = col.operator;\n break;\n }\n else {\n operators = 'equal';\n }\n }\n }\n else {\n operators = 'equal';\n }\n if (!isNullOrUndefined(gObj.filterModule.operators[column.field])) {\n operators = gObj.filterModule.operators[column.field];\n }\n this.dropOptr = new DropDownList({\n fields: { text: 'text', value: 'value' },\n popupHeight: 'auto',\n value: operators,\n width: '0px',\n enabled: column.allowFiltering,\n popupWidth: 'auto',\n enableRtl: this.parent.enableRtl,\n change: this.internalEvent.bind(this),\n beforeOpen: function () {\n var operator = gObj.filterModule.customOperators;\n this.dataSource = operator[gObj.getColumnByUid(this.element.id).type + 'Operator'];\n for (var i = 0; i < this.dataSource.length; i++) {\n if (column.filter && column.filter.operator && isNullOrUndefined(gObj.filterModule.operators[column.field]) &&\n this.dataSource[parseInt(i.toString(), 10)].value === column.filter.operator) {\n this.value = column.filter.operator;\n }\n }\n },\n cssClass: this.parent.cssClass ? 'e-popup-flbar' + ' ' + this.parent.cssClass : 'e-popup-flbar'\n });\n this.dropOptr.appendTo(fbicon);\n var spanElmt = closest(this.dropOptr.element, 'span');\n spanElmt.classList.add('e-filterbardropdown');\n spanElmt.removeAttribute('tabindex');\n };\n FilterCellRenderer.prototype.internalEvent = function (e) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(e.element.getAttribute('id'));\n e.column = col;\n gObj.filterModule.operators[col.field] = e.value;\n gObj.notify(events.getFilterBarOperator, e);\n };\n return FilterCellRenderer;\n}(CellRenderer));\nexport { FilterCellRenderer };\n","import { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `filter operators` render boolean column.\n *\n * @hidden\n */\nvar FlMenuOptrUI = /** @class */ (function () {\n function FlMenuOptrUI(parent, customFltrOperators, serviceLocator, filterSettings) {\n this.ddOpen = this.dropDownOpen.bind(this);\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.customFilterOperators = customFltrOperators;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroyDropDownList, this);\n this.parent.on(events.destroy, this.destroyDropDownList, this);\n }\n }\n /**\n * @param {Element} dlgConetntEle - specifies the content element\n * @param {Element} target - specifies the target\n * @param {Column} column - specifies the column\n * @param {Dialog} dlgObj - specifies the dialog\n * @param {Object[]} operator - specifies the operator list\n * @returns {void}\n * @hidden\n */\n // eslint-disable-next-line max-len\n FlMenuOptrUI.prototype.renderOperatorUI = function (dlgConetntEle, target, column, dlgObj, operator) {\n this.dialogObj = dlgObj;\n var optr = column.type + 'Operator';\n this.optrData = this.customOptr = !isNullOrUndefined(operator) ? operator :\n (!isNullOrUndefined(this.parent.filterSettings.operators) && !isNullOrUndefined(this.parent.filterSettings.operators[\"\" + optr])) ?\n this.parent.filterSettings.operators[\"\" + optr] : this.customFilterOperators[\"\" + optr];\n var dropDatasource = this.customOptr;\n var selectedValue = this.dropSelectedVal(column, optr);\n var optrDiv = this.parent.createElement('div', { className: 'e-flm_optrdiv' });\n dlgConetntEle.appendChild(optrDiv);\n var optrInput = this.parent.createElement('input', { id: column.uid + '-floptr' });\n optrDiv.appendChild(optrInput);\n this.dropOptr = new DropDownList({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n enableRtl: this.parent.enableRtl,\n text: selectedValue,\n // eslint-disable-next-line @typescript-eslint/tslint/config\n change: function () {\n var valInput = document.querySelector('.e-flmenu-valuediv').querySelector('input');\n if (this.value === 'isempty' || this.value === 'isnotempty' ||\n this.value === 'isnull' || this.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n }\n });\n this.dropOptr.addEventListener(literals['open'], this.ddOpen);\n this.dropOptr.appendTo('#' + column.uid + '-floptr');\n };\n FlMenuOptrUI.prototype.renderResponsiveDropDownList = function (args) {\n args.popup.element.style.width = '100%';\n };\n FlMenuOptrUI.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n if (this.parent.enableAdaptiveUI) {\n this.renderResponsiveDropDownList(args);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FlMenuOptrUI.prototype.dropSelectedVal = function (col, optr) {\n var selValue = '';\n var columns = this.parent.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.field === column.field || (col.isForeignColumn() && col.foreignKeyValue === column.field)) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', column.operator));\n selValue = !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n }\n }\n if (selValue === '') { // rewuired or not\n if (col.filter.operator) {\n var optrLen = Object.keys(this.optrData).length;\n for (var i = 0; i < optrLen; i++) {\n if (this.optrData[parseInt(i.toString(), 10)].value === col.filter.operator) {\n selValue = this.optrData[parseInt(i.toString(), 10)].text;\n }\n }\n }\n else {\n selValue = this.optrData[0].text;\n }\n }\n return selValue;\n };\n /**\n * @returns {string} returns the operator\n * @hidden\n */\n FlMenuOptrUI.prototype.getFlOperator = function () {\n return this.dropOptr.value;\n };\n FlMenuOptrUI.prototype.destroyDropDownList = function () {\n if (this.dropOptr.isDestroyed) {\n return;\n }\n this.dropOptr.removeEventListener(literals['open'], this.ddOpen);\n this.dropOptr.destroy();\n this.parent.off(events.filterMenuClose, this.destroyDropDownList);\n this.parent.off(events.destroy, this.destroyDropDownList);\n };\n return FlMenuOptrUI;\n}());\nexport { FlMenuOptrUI };\n","import { AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\nimport { Browser, isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';\nimport { getZIndexCalcualtion, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `string filterui` render string column.\n *\n * @hidden\n */\nvar StringFilterUI = /** @class */ (function () {\n function StringFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serLocator = serviceLocator;\n this.filterSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n StringFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'strui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.dialogObj = args.dialogObj;\n this.processDataOperation(args);\n };\n StringFilterUI.prototype.processDataOperation = function (args) {\n var _this = this;\n if (args.column.isForeignColumn()) {\n this.parent.getDataModule().dataManager.executeQuery(this.parent.getDataModule().generateQuery(true))\n .then(function (result) { _this.getAutoCompleteOptions(args, result); });\n return;\n }\n this.getAutoCompleteOptions(args);\n };\n StringFilterUI.prototype.getAutoCompleteOptions = function (args, result) {\n var isForeignColumn = args.column.isForeignColumn();\n var foreignColumnQuery;\n if (isForeignColumn) {\n var filteredData = CheckBoxFilterBase.getDistinct(result.result, args.column.field)\n .records || [];\n var filterQuery = void 0;\n for (var i = 0; i < filteredData.length; i++) {\n if (filterQuery) {\n filterQuery = filterQuery.or(args.column.field, 'contains', filteredData[parseInt(i.toString(), 10)][args.column.field], this.parent\n .filterSettings.enableCaseSensitivity, this.parent.filterSettings.ignoreAccent);\n }\n else {\n filterQuery = new Predicate(args.column.field, 'contains', filteredData[parseInt(i.toString(), 10)][args.column.field], this.parent\n .filterSettings.enableCaseSensitivity, this.parent.filterSettings.ignoreAccent);\n }\n }\n foreignColumnQuery = new Query().where(filterQuery);\n foreignColumnQuery.params = this.parent.query.params;\n }\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = { value: isForeignColumn ? args.column.foreignKeyValue : args.column.field };\n var autoComplete = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n query: isForeignColumn ? foreignColumnQuery : this.parent.getDataModule().generateQuery(true, true),\n sortOrder: 'Ascending',\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n autofill: true,\n placeholder: args.localizeText.getConstant('EnterValue'),\n actionBegin: function () {\n if (this.query.queries.length && this.query.queries[0].fn === 'onWhere' && this.query.queries[0].e\n && this.query.queries[0].e.predicates) {\n for (var i = 0; i < this.query.queries[0].e.predicates.length; i++) {\n if (this.properties.fields.value === this.query.queries[0].e.predicates[\"\" + i].field) {\n this.query.queries[0].e.predicates.splice(i, 1);\n i = i - 1;\n }\n }\n if (!this.query.queries[0].e.predicates.length) {\n this.query.queries.splice(0, 1);\n }\n }\n }\n }, args.column.filter.params));\n this.acFocus = this.focus(autoComplete, args);\n this.acComplete = this.actionComplete(autoComplete);\n this.acOpen = this.openPopup.bind(this);\n autoComplete.addEventListener(literals.focus, this.acFocus);\n autoComplete.addEventListener(literals['open'], this.acOpen);\n autoComplete.addEventListener(events.actionComplete, this.acComplete);\n if (dataSource && 'result' in dataSource) {\n var query = this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, query);\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n autoComplete.dataSource = new DataManager(e);\n });\n }\n this.actObj = autoComplete;\n this.actObj.appendTo(this.instance);\n if (isForeignColumn) {\n this.parent.filterModule.filterModule.afterRenderFilterUI();\n }\n };\n StringFilterUI.prototype.write = function (args) {\n if (args.filteredValue !== '' && !isNullOrUndefined(args.filteredValue)) {\n var struiObj = document.querySelector('#strui-' + args.column.uid).ej2_instances[0];\n struiObj.value = args.filteredValue;\n }\n };\n StringFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var actuiObj = document.querySelector('#strui-' + column.uid).ej2_instances[0];\n if (Browser.isDevice) {\n actuiObj.hidePopup();\n actuiObj.focusOut();\n }\n var filterValue = actuiObj.value;\n if (isNullOrUndefined(filterValue) || filterValue === '') {\n filterValue = null;\n }\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', this.parent.filterSettings.enableCaseSensitivity);\n };\n StringFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n StringFilterUI.prototype.focus = function (actObj, args) {\n return function () {\n actObj.filterType = args.getOptrInstance.getFlOperator();\n };\n };\n StringFilterUI.prototype.actionComplete = function (actObj) {\n return function (e) {\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObj) {\n return (getValue(actObj.fields.value, mapObj));\n }).indexOf(getValue((actObj.fields.value), obj)) === index;\n });\n };\n };\n StringFilterUI.prototype.destroy = function () {\n if (!this.actObj || this.actObj.isDestroyed) {\n return;\n }\n this.actObj.removeEventListener(literals.focus, this.acFocus);\n this.actObj.removeEventListener(literals['open'], this.acOpen);\n this.actObj.removeEventListener(events.actionComplete, this.acComplete);\n this.actObj.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return StringFilterUI;\n}());\nexport { StringFilterUI };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { extend, isUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * `numberfilterui` render number column.\n *\n * @hidden\n */\nvar NumberFilterUI = /** @class */ (function () {\n function NumberFilterUI(parent, serviceLocator, filterSettings) {\n this.filterSettings = filterSettings;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n NumberFilterUI.prototype.keyEventHandler = function (args) {\n if (args.keyCode === 13 || args.keyCode === 9) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent('change', false, true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.dispatchEvent(evt);\n }\n };\n NumberFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'numberui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.numericTxtObj = new NumericTextBox(extend({\n format: typeof (args.column.format) === 'string' || isUndefined(args.column.format) ? args.column.format :\n args.column.format.format,\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('EnterValue'),\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n this.numericTxtObj.appendTo(this.instance);\n };\n NumberFilterUI.prototype.write = function (args) {\n var numberuiObj = document.querySelector('#numberui-' + args.column.uid).ej2_instances[0];\n numberuiObj.element.addEventListener('keydown', this.keyEventHandler);\n numberuiObj.value = args.filteredValue;\n };\n NumberFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var numberuiObj = document.querySelector('#numberui-' + column.uid).ej2_instances[0];\n var filterValue = numberuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n NumberFilterUI.prototype.destroy = function () {\n if (!this.numericTxtObj || this.numericTxtObj.isDestroyed) {\n return;\n }\n this.numericTxtObj.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return NumberFilterUI;\n}());\nexport { NumberFilterUI };\n","import { getZIndexCalcualtion } from '../base/util';\nimport { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `boolfilterui` render boolean column.\n *\n * @hidden\n */\nvar BooleanFilterUI = /** @class */ (function () {\n function BooleanFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n BooleanFilterUI.prototype.create = function (args) {\n var isForeignColumn = args.column.isForeignColumn();\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = isForeignColumn ? args.column.foreignKeyValue : args.column.field;\n this.elem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'bool-ui-' + args.column.uid });\n args.target.appendChild(this.elem);\n this.dialogObj = args.dialogObj;\n this.dropInstance = new DropDownList(extend({\n dataSource: dataSource instanceof DataManager ?\n dataSource : new DataManager(dataSource),\n query: new Query().select(fields),\n fields: { text: fields, value: fields },\n placeholder: args.localizeText.getConstant('SelectValue'),\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n this.ddOpen = this.openPopup.bind(this);\n this.ddComplete = this.actionComplete(fields);\n this.dropInstance.addEventListener(literals['open'], this.ddOpen);\n this.dropInstance.addEventListener(events.actionComplete, this.ddComplete);\n this.dropInstance.appendTo(this.elem);\n };\n BooleanFilterUI.prototype.write = function (args) {\n var drpuiObj = document.querySelector('#bool-ui-' + args.column.uid).ej2_instances[0];\n if (!isNullOrUndefined(args.filteredValue)) {\n drpuiObj.value = args.filteredValue;\n }\n };\n BooleanFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var drpuiObj = document.querySelector('#bool-ui-' + column.uid).ej2_instances[0];\n var filterValue = (drpuiObj.value);\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', false);\n };\n BooleanFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n BooleanFilterUI.prototype.actionComplete = function (fields) {\n return function (e) {\n e.result = DataUtil.distinct(e.result, fields, true);\n };\n };\n BooleanFilterUI.prototype.destroy = function () {\n if (!this.dropInstance || this.dropInstance.isDestroyed) {\n return;\n }\n this.dropInstance.removeEventListener(literals['open'], this.ddOpen);\n this.dropInstance.removeEventListener(events.actionComplete, this.ddComplete);\n this.dropInstance.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return BooleanFilterUI;\n}());\nexport { BooleanFilterUI };\n","import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { getCustomDateFormat } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `datefilterui` render date column.\n *\n * @hidden\n */\nvar DateFilterUI = /** @class */ (function () {\n function DateFilterUI(parent, serviceLocator, filterSettings) {\n this.dpOpen = this.openPopup.bind(this);\n this.parent = parent;\n this.locator = serviceLocator;\n this.fltrSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n DateFilterUI.prototype.create = function (args) {\n var format = getCustomDateFormat(args.column.format, args.column.type);\n this.dialogObj = args.dialogObj;\n this.inputElem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'dateui-' + args.column.uid });\n args.target.appendChild(this.inputElem);\n if (args.column.type === 'date' || args.column.type === 'dateonly') {\n this.datePickerObj = new DatePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n }\n else if (args.column.type === 'datetime') {\n this.datePickerObj = new DateTimePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n }\n this.datePickerObj.addEventListener(literals['open'], this.dpOpen);\n this.datePickerObj.appendTo(this.inputElem);\n };\n DateFilterUI.prototype.write = function (args) {\n var dateuiObj = document.querySelector('#dateui-' + args.column.uid).ej2_instances[0];\n dateuiObj.value = !isNullOrUndefined(args.filteredValue) ? new Date(args.filteredValue) : null;\n };\n DateFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var dateuiObj = document.querySelector('#dateui-' + column.uid).ej2_instances[0];\n var filterValue = dateuiObj.value;\n filterValue = isNullOrUndefined(filterValue) ? null : filterValue;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n DateFilterUI.prototype.openPopup = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n DateFilterUI.prototype.destroy = function () {\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n if (isNullOrUndefined(this.datePickerObj) || this.datePickerObj.isDestroyed) {\n return;\n }\n this.datePickerObj.removeEventListener(literals['open'], this.dpOpen);\n this.datePickerObj.destroy();\n };\n return DateFilterUI;\n}());\nexport { DateFilterUI };\n","import { isNullOrUndefined, getValue, remove } from '@syncfusion/ej2-base';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { FlMenuOptrUI } from './filter-menu-operator';\nimport { StringFilterUI } from './string-filter-ui';\nimport { NumberFilterUI } from './number-filter-ui';\nimport { BooleanFilterUI } from './boolean-filter-ui';\nimport { DateFilterUI } from './date-filter-ui';\nimport { getFilterMenuPostion, parentsUntil, appendChildren, clearReactVueTemplates } from '../base/util';\nimport * as events from '../base/constant';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `filter menu` render boolean column.\n *\n * @hidden\n */\nvar FilterMenuRenderer = /** @class */ (function () {\n function FilterMenuRenderer(parent, filterSettings, serviceLocator, customFltrOperators, fltrObj) {\n this.isDialogOpen = false;\n this.maxHeight = '350px';\n this.isMenuCheck = false;\n this.colTypes = {\n 'string': StringFilterUI, 'number': NumberFilterUI, 'date': DateFilterUI, 'dateonly': DateFilterUI, 'boolean': BooleanFilterUI, 'datetime': DateFilterUI\n };\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.customFilterOperators = customFltrOperators;\n this.filterObj = fltrObj;\n this.flMuiObj = new FlMenuOptrUI(this.parent, this.customFilterOperators, this.serviceLocator);\n this.l10n = this.serviceLocator.getService('localization');\n this.menuFilterBase = new CheckBoxFilterBase(parent);\n }\n FilterMenuRenderer.prototype.clearCustomFilter = function (col) {\n this.clearBtnClick(col);\n };\n FilterMenuRenderer.prototype.applyCustomFilter = function (args) {\n this.filterBtnClick(args.col);\n };\n FilterMenuRenderer.prototype.openDialog = function (args) {\n this.options = args;\n this.col = this.parent.getColumnByField(args.field);\n if (isNullOrUndefined(this.col.filter) || (isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'Menu')) { ///\n this.renderDlgContent(args.target, this.col);\n }\n };\n FilterMenuRenderer.prototype.closeDialog = function (target) {\n if (!this.dlgObj) {\n return;\n }\n if (this.parent.isReact || this.parent.isVue) {\n clearReactVueTemplates(this.parent, ['filterTemplate']);\n }\n var elem = document.getElementById(this.dlgObj.element.id);\n if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {\n var argument = { cancel: false, column: this.col, target: target, element: elem };\n this.parent.notify(events.filterMenuClose, argument);\n if (argument.cancel) {\n return;\n }\n this.isDialogOpen = false;\n if (this.isMenuCheck) {\n this.menuFilterBase.unWireEvents();\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.isMenuCheck = false;\n }\n this.dlgObj.destroy();\n remove(elem);\n }\n this.parent.notify(events.filterDialogClose, {});\n };\n FilterMenuRenderer.prototype.renderDlgContent = function (target, column) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: column.field, columnType: column.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.parent.trigger(events.actionBegin, args);\n var mainDiv = this.parent.createElement('div', { className: 'e-flmenu-maindiv', id: column.uid + '-flmenu' });\n this.dlgDiv = this.parent.createElement('div', { className: 'e-flmenu', id: column.uid + '-flmdlg' });\n this.dlgDiv.setAttribute('aria-label', this.l10n.getConstant('FilterMenuDialogARIA'));\n if (this.parent.enableAdaptiveUI) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n showCloseIcon: false,\n closeOnEscape: false,\n locale: this.parent.locale,\n visible: false,\n enableRtl: this.parent.enableRtl,\n created: this.dialogCreated.bind(this, target, column),\n position: this.parent.element.classList.contains('e-device') ? { X: 'center', Y: 'center' } : { X: '', Y: '' },\n target: this.parent.element.classList.contains('e-device') ? document.body : this.parent.element,\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.l10n.getConstant('FilterButton'), isPrimary: true,\n cssClass: this.parent.cssClass ? 'e-flmenu-okbtn' + ' ' + this.parent.cssClass : 'e-flmenu-okbtn'\n }\n },\n {\n click: this.clearBtnClick.bind(this, column),\n buttonModel: { content: this.l10n.getConstant('ClearButton'),\n cssClass: this.parent.cssClass ? 'e-flmenu-cancelbtn' + ' ' + this.parent.cssClass : 'e-flmenu-cancelbtn' }\n }],\n content: mainDiv,\n width: (!isNullOrUndefined(parentsUntil(target, 'e-bigger'))) || this.parent.element.classList.contains('e-device') ? 260 : 250,\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? 'e-filter-popup' + ' ' + this.parent.cssClass : 'e-filter-popup'\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgObj.appendTo(this.dlgDiv);\n };\n FilterMenuRenderer.prototype.renderResponsiveDialog = function () {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.buttons = [{}];\n }\n };\n FilterMenuRenderer.prototype.dialogCreated = function (target, column) {\n if (!Browser.isDevice && target) {\n getFilterMenuPostion(target, this.dlgObj);\n }\n this.currentDialogCreatedColumn = column;\n this.renderFilterUI(target, column);\n if (!(column.isForeignColumn() && !(!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)))) {\n this.afterRenderFilterUI();\n }\n if (!isNullOrUndefined(column.filterTemplate)) {\n this.dlgDiv.querySelector('.e-flmenu-valuediv').firstElementChild.focus();\n this.dlgDiv.querySelector('.e-flmenu-valuediv').firstElementChild.classList.add('e-input-focus');\n }\n else if (!isNullOrUndefined(this.dlgDiv.querySelector('.e-flmenu-input'))) {\n this.dlgDiv.querySelector('.e-flmenu-input').focus();\n this.dlgDiv.querySelector('.e-flmenu-input').parentElement.classList.add('e-input-focus');\n }\n };\n /**\n * Function to notify filterDialogCreated and trigger actionComplete\n *\n * @returns {void}\n * @hidden\n */\n FilterMenuRenderer.prototype.afterRenderFilterUI = function () {\n var column = this.currentDialogCreatedColumn;\n if (column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, {});\n }\n if (this.parent.enableAdaptiveUI) {\n this.dlgObj.element.style.left = '0px';\n this.dlgObj.element.style.maxHeight = 'none';\n }\n else {\n this.dlgObj.element.style.maxHeight = this.maxHeight;\n }\n this.dlgObj.show();\n var optrInput = this.dlgObj.element.querySelector('.e-flm_optrdiv').querySelector('input');\n var valInput = this.dlgObj.element.querySelector('.e-flmenu-valuediv').querySelector('input');\n if (optrInput.value === 'Empty' || optrInput.value === 'Not Empty' ||\n optrInput.value === 'Null' || optrInput.value === 'Not Null') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput && valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n if (!column.filterTemplate) {\n this.writeMethod(column, this.dlgObj.element.querySelector('#' + column.uid + '-flmenu'));\n }\n var args = {\n requestType: events.filterAfterOpen,\n columnName: column.field, columnType: column.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.isDialogOpen = true;\n if (!this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n FilterMenuRenderer.prototype.renderFilterUI = function (target, col) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-flmenu-maindiv');\n this.parent.log('column_type_missing', { column: col });\n this.renderOperatorUI(dlgConetntEle, target, col);\n this.renderFlValueUI(dlgConetntEle, target, col);\n };\n FilterMenuRenderer.prototype.renderOperatorUI = function (dlgConetntEle, target, column) {\n this.flMuiObj.renderOperatorUI(dlgConetntEle, target, column, this.dlgObj, this.filterObj.menuOperator);\n };\n FilterMenuRenderer.prototype.renderFlValueUI = function (dlgConetntEle, target, column) {\n var valueDiv = this.parent.createElement('div', { className: 'e-flmenu-valuediv' });\n var fObj = this.filterObj;\n dlgConetntEle.appendChild(valueDiv);\n var instanceofFilterUI = new this.colTypes[column.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (column.filterTemplate) {\n var fltrData = {};\n var valueInString = 'value';\n fltrData[column.field] = fltrData[\"\" + valueInString] = fObj.values[column.field];\n if (column.foreignKeyValue) {\n fltrData[column.foreignKeyValue] = fObj.values[column.field];\n fltrData[column.field] = undefined;\n }\n var col = 'column';\n fltrData[\"\" + col] = column;\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n this.parent.renderTemplates();\n }\n else {\n var compElement = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, compElement);\n }\n if (this.isMenuCheck) {\n this.menuFilterBase.cBox = this.dlgObj.element.querySelector('.e-checkboxlist.e-fields');\n this.menuFilterBase.wireEvents();\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.menuFilterBase.getAllData();\n }\n }\n else {\n if (!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)) {\n var temp = column.filter.ui.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj\n });\n }\n else {\n instanceofFilterUI.create({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, localizeText: this.l10n, dialogObj: this.dlgObj\n });\n }\n }\n };\n FilterMenuRenderer.prototype.writeMethod = function (col, dlgContentEle) {\n var flValue;\n var target = dlgContentEle.querySelector('.e-flmenu-valinput');\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.uid === column.uid) {\n flValue = column.value;\n }\n }\n if (!isNullOrUndefined(col.filter) && !isNullOrUndefined(col.filter.ui)\n && !isNullOrUndefined(col.filter.ui.write)) {\n var temp = col.filter.ui.write;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n else {\n instanceofFilterUI.write({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n };\n FilterMenuRenderer.prototype.filterBtnClick = function (col) {\n var flValue;\n var targ = this.dlgObj.element.querySelector('.e-flmenu-valuediv input');\n var flOptrValue = this.flMuiObj.getFlOperator();\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (col.filterTemplate) {\n var element = this.dlgDiv.querySelector('.e-flmenu-valuediv');\n var fltrValue = void 0;\n if (element.children[0].value) {\n fltrValue = element.children[0].value;\n }\n else {\n if (!isNullOrUndefined(element.children[0].ej2_instances)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n fltrValue = (this.parent.isAngular ? element.children[0] :\n element.querySelector('input')).ej2_instances[0].value;\n }\n else {\n var eControl = element.querySelector('.e-control');\n if (!isNullOrUndefined(eControl)) {\n fltrValue = col.type === 'boolean' ? eControl.checked :\n !isNullOrUndefined(eControl.ej2_instances) ?\n eControl.ej2_instances[0].value :\n eControl.value;\n }\n }\n }\n this.filterObj.filterByColumn(col.field, flOptrValue, fltrValue);\n }\n else {\n if (!isNullOrUndefined(col.filter) &&\n !isNullOrUndefined(col.filter.ui) && !isNullOrUndefined(col.filter.ui.read)) {\n var temp = col.filter.ui.read;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n // eslint-disable-next-line\n flValue = temp({ element: targ, column: col, operator: flOptrValue, fltrObj: this.filterObj });\n }\n else {\n instanceofFilterUI.read(targ, col, flOptrValue, this.filterObj);\n }\n }\n this.closeDialog();\n if (this.parent.showColumnMenu) {\n this.parent.notify(events.afterFilterColumnMenuClose, {});\n }\n };\n FilterMenuRenderer.prototype.closeResponsiveDialog = function () {\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.clearBtnClick = function (column) {\n this.filterObj.removeFilteredColsByField(column.field);\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.destroy = function () {\n this.closeDialog();\n };\n /**\n * @returns {FilterUI} returns the filterUI\n * @hidden\n */\n FilterMenuRenderer.prototype.getFilterUIInfo = function () {\n return { field: this.col.field, operator: this.flMuiObj.getFlOperator() };\n };\n FilterMenuRenderer.prototype.renderCheckBoxMenu = function () {\n this.isMenuCheck = true;\n this.menuFilterBase.updateModel(this.options);\n this.menuFilterBase.getAndSetChkElem(this.options);\n this.dlgObj.buttons = [{\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: {\n content: this.menuFilterBase.getLocalizedLabel('FilterButton'),\n cssClass: 'e-primary', isPrimary: true\n }\n },\n {\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: { cssClass: 'e-flat', content: this.menuFilterBase.getLocalizedLabel('ClearButton') }\n }];\n this.menuFilterBase.dialogObj = this.dlgObj;\n this.menuFilterBase.dlg = this.dlgObj.element;\n this.menuFilterBase.dlg.classList.add('e-menucheckbox');\n this.menuFilterBase.dlg.classList.remove('e-checkboxfilter');\n this.maxHeight = '800px';\n return this.menuFilterBase.sBox.innerHTML;\n };\n FilterMenuRenderer.prototype.actionComplete = function (args) {\n if (this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n return FilterMenuRenderer;\n}());\nexport { FilterMenuRenderer };\n","import * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the filtersettings\n * @param {ServiceLocator} serviceLocator - specifies the ServiceLocator\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.parent = parent;\n this.isresetFocus = true;\n this.checkBoxBase = new CheckBoxFilterBase(parent);\n this.addEventListener();\n }\n /**\n * To destroy the check box filter.\n *\n * @returns {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.removeEventListener();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.checkBoxBase.openDialog(options);\n this.parent.log('column_type_missing', { column: options.column });\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n this.destroy();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n CheckBoxFilter.prototype.closeResponsiveDialog = function () {\n this.checkBoxBase.closeDialog();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} - returns the module name\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n CheckBoxFilter.prototype.actionBegin = function (args) {\n this.parent.trigger(events.actionBegin, args);\n };\n CheckBoxFilter.prototype.actionComplete = function (args) {\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.actionPrevent = function (args) {\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, args);\n args.cancel = true;\n }\n };\n CheckBoxFilter.prototype.clearCustomFilter = function (col) {\n this.checkBoxBase.clearFilter(col);\n };\n CheckBoxFilter.prototype.applyCustomFilter = function () {\n this.checkBoxBase.fltrBtnHandler();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.cBoxFltrBegin, this.actionBegin, this);\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.parent.on(events.fltrPrevent, this.actionPrevent, this);\n };\n CheckBoxFilter.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.cBoxFltrBegin, this.actionBegin);\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.parent.off(events.fltrPrevent, this.actionPrevent);\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { ExcelFilterBase } from '../common/excel-filter-base';\nimport { CheckBoxFilter } from './checkbox-filter';\nimport * as events from '../base/constant';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilter = /** @class */ (function (_super) {\n __extends(ExcelFilter, _super);\n /**\n * Constructor for excelbox filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the Filtersettings\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n * @param {object} customFltrOperators - specifies the customFltrOperators\n * @hidden\n */\n function ExcelFilter(parent, filterSettings, serviceLocator, customFltrOperators) {\n var _this = _super.call(this, parent, filterSettings, serviceLocator) || this;\n _this.parent = parent;\n _this.isresetFocus = true;\n _this.excelFilterBase = new ExcelFilterBase(parent, customFltrOperators);\n return _this;\n }\n /**\n * To destroy the excel filter.\n *\n * @returns {void}\n * @hidden\n */\n ExcelFilter.prototype.destroy = function () {\n this.excelFilterBase.closeDialog();\n };\n ExcelFilter.prototype.openDialog = function (options) {\n this.excelFilterBase.openDialog(options);\n };\n ExcelFilter.prototype.closeDialog = function () {\n this.excelFilterBase.closeDialog();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n ExcelFilter.prototype.clearCustomFilter = function (col) {\n this.excelFilterBase.clearFilter(col);\n };\n ExcelFilter.prototype.closeResponsiveDialog = function (isCustomFilter) {\n if (isCustomFilter) {\n this.excelFilterBase.removeDialog();\n }\n else {\n this.closeDialog();\n }\n };\n ExcelFilter.prototype.applyCustomFilter = function (args) {\n if (!args.isCustomFilter) {\n this.excelFilterBase.fltrBtnHandler();\n this.excelFilterBase.closeDialog();\n }\n else {\n this.excelFilterBase.filterBtnClick(args.col.field);\n }\n };\n ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n this.excelFilterBase.filterByColumn(fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue);\n };\n /**\n * @returns {FilterUI} returns the filterUI\n * @hidden\n */\n ExcelFilter.prototype.getFilterUIInfo = function () {\n return this.excelFilterBase.getFilterUIInfo();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n ExcelFilter.prototype.getModuleName = function () {\n return 'excelFilter';\n };\n return ExcelFilter;\n}(CheckBoxFilter));\nexport { ExcelFilter };\n","import { EventHandler, isNullOrUndefined, extend, closest, getValue } from '@syncfusion/ej2-base';\nimport { getActualPropFromColl, isActionPrevent, getColumnByForeignKeyValue } from '../base/util';\nimport { remove, matches } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport { CellType, ResponsiveDialogAction } from '../base/enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport { FilterCellRenderer } from '../renderer/filter-cell-renderer';\nimport { parentsUntil, addFixedColumnBorder, applyStickyLeftRightPosition } from '../base/util';\nimport { FilterMenuRenderer } from '../renderer/filter-menu-renderer';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\nimport { ExcelFilter } from '../actions/excel-filter';\nimport * as literals from '../base/string-literals';\nimport { Input } from '@syncfusion/ej2-inputs';\n/**\n *\n * The `Filter` module is used to handle filtering action.\n */\nvar Filter = /** @class */ (function () {\n /**\n * Constructor for Grid filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the filterSettings\n * @param {ServiceLocator} serviceLocator - specifes the serviceLocator\n * @hidden\n */\n function Filter(parent, filterSettings, serviceLocator) {\n this.predicate = 'and';\n this.contentRefresh = true;\n this.filterByMethod = true;\n this.refresh = true;\n this.values = {};\n this.operators = {};\n this.cellText = {};\n this.nextFlMenuOpen = '';\n this.type = { 'Menu': FilterMenuRenderer, 'CheckBox': CheckBoxFilter, 'Excel': ExcelFilter };\n /** @hidden */\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith', wildCard: 'wildcard',\n isNull: 'isnull', notNull: 'notnull', like: 'like'\n };\n this.fltrDlgDetails = { field: '', isOpen: false };\n /** @hidden */\n this.skipNumberInput = ['=', ' ', '!'];\n this.skipStringInput = ['>', '<', '='];\n this.actualPredicate = {};\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n this.setFullScreenDialog();\n }\n /**\n * To render filter bar when filtering enabled.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Filter.prototype.render = function (e) {\n if (DataUtil.getObject('args.isFrozen', e)) {\n return;\n }\n var gObj = this.parent;\n this.l10n = this.serviceLocator.getService('localization');\n this.getLocalizedCustomOperators();\n if (this.parent.filterSettings.type === 'FilterBar') {\n if (gObj.columns.length) {\n var fltrElem = this.parent.element.querySelector('.e-filterbar');\n if (fltrElem) {\n remove(fltrElem);\n }\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Filter, gObj);\n var cellrender = this.serviceLocator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Filter, new FilterCellRenderer(this.parent, this.serviceLocator));\n this.valueFormatter = this.serviceLocator.getService('valueFormatter');\n rowRenderer.element = this.parent.createElement('tr', { className: 'e-filterbar', attrs: { role: 'row' } });\n var row = this.generateRow();\n row.data = this.values;\n this.parent.getHeaderContent().querySelector('thead:not(.e-masked-thead)').appendChild(rowRenderer.element);\n var rowdrag = this.parent.element.querySelector('.e-rowdragheader');\n this.element = rowRenderer.render(row, gObj.getColumns(), null, null, rowRenderer.element);\n if (this.element.querySelectorAll('.e-leftfreeze').length &&\n (this.element.querySelectorAll('.e-indentcell').length || this.element.querySelectorAll('.e-grouptopleftcell').length)) {\n var td = this.element.querySelectorAll('.e-indentcell, .e-grouptopleftcell');\n for (var i = 0; i < td.length; i++) {\n td[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td[parseInt(i.toString(), 10)], i * 30, this.parent.enableRtl, 'Left');\n }\n }\n addFixedColumnBorder(this.element);\n var detail = this.element.querySelector('.e-detailheadercell');\n if (detail) {\n detail.className = 'e-filterbarcell e-mastercell';\n }\n if (rowdrag) {\n if (rowdrag.classList.contains('e-leftfreeze')) {\n rowdrag.className = 'e-dragheadercell e-mastercell e-leftfreeze';\n }\n else {\n rowdrag.className = 'e-filterbarcell e-mastercell';\n }\n }\n var gCells = [].slice.call(this.element.getElementsByClassName('e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n this.wireEvents();\n this.parent.notify(events.freezeRender, { case: 'filter' });\n }\n }\n };\n /**\n * To show the responsive custom filter dialog\n *\n * @param {boolean} enable - specifes dialog open\n * @returns {void}\n * @hidden\n */\n Filter.prototype.showCustomFilter = function (enable) {\n this.responsiveDialogRenderer.isCustomDialog = enable;\n this.responsiveDialogRenderer.showResponsiveDialog(this.column);\n };\n Filter.prototype.renderResponsiveChangeAction = function (args) {\n this.responsiveDialogRenderer.action = args.action;\n };\n /**\n * To create the filter module.\n *\n * @param {Column} col - specifies the filtering column name\n * @returns {void}\n * @hidden\n */\n Filter.prototype.setFilterModel = function (col) {\n var type = col.filter.type || this.parent.filterSettings.type;\n this.filterModule = new this.type[\"\" + type](this.parent, this.parent.filterSettings, this.serviceLocator, this.customOperators, this);\n };\n /**\n * To destroy the filter bar.\n *\n * @returns {void}\n * @hidden\n */\n Filter.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.destroy();\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.parent.refreshing && (this.parent.isDestroyed || !this.parent.allowFiltering)) {\n this.filterSettings.columns = [];\n }\n this.updateFilterMsg();\n this.removeEventListener();\n this.unWireEvents();\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n var dropdownlist = [].slice.call(this.element.getElementsByClassName('e-filterbaroperator'));\n for (var i = 0; i < dropdownlist.length; i++) {\n if (dropdownlist[parseInt(i.toString(), 10)].ej2_instances[0]) {\n dropdownlist[parseInt(i.toString(), 10)].ej2_instances[0].destroy();\n }\n }\n }\n if (this.element) {\n if (this.element.parentElement) {\n remove(this.element);\n }\n var filterBarElement = this.parent.getHeaderContent().querySelector('.e-filterbar');\n if (filterBarElement) {\n remove(filterBarElement);\n }\n }\n };\n Filter.prototype.setFullScreenDialog = function () {\n if (this.serviceLocator) {\n this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, ResponsiveDialogAction.isFilter);\n }\n };\n Filter.prototype.generateRow = function () {\n var options = {};\n var row = new Row(options);\n row.cells = this.generateCells();\n return row;\n };\n Filter.prototype.generateCells = function () {\n //TODO: generate dummy column for group, detail, stacked row here for filtering;\n var cells = [];\n if (this.parent.allowGrouping) {\n for (var c = 0, len = this.parent.groupSettings.columns.length; c < len; c++) {\n cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n cells.push(this.generateCell({}, CellType.DetailHeader));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n for (var _i = 0, _a = this.parent.getColumns(); _i < _a.length; _i++) {\n var dummy = _a[_i];\n cells.push(this.generateCell(dummy));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n return cells;\n };\n Filter.prototype.generateCell = function (column, cellType) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'rowId': '',\n 'column': column,\n 'cellType': cellType ? cellType : CellType.Filter,\n 'attributes': { title: this.l10n.getConstant('FilterbarTitle') }\n };\n return new Cell(opt);\n };\n /**\n * To update filterSettings when applying filter.\n *\n * @returns {void}\n * @hidden\n */\n Filter.prototype.updateModel = function () {\n var col = this.column.isForeignColumn() ? this.parent.getColumnByUid(this.column.uid) :\n this.parent.getColumnByField(this.fieldName);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n var arrayVal = Array.isArray(this.value) ? this.value : [this.value];\n var moduleName = this.parent.dataSource.adaptor && this.parent.dataSource.adaptor.getModuleName ? this.parent.dataSource.adaptor.getModuleName() : undefined;\n for (var i = 0, len = arrayVal.length; i < len; i++) {\n var field = col.isForeignColumn() ? col.foreignKeyValue : this.fieldName;\n var isMenuNotEqual = this.operator === 'notequal';\n this.currentFilterObject = {\n field: field, uid: col.uid, isForeignKey: col.isForeignColumn(), operator: this.operator,\n value: arrayVal[parseInt(i.toString(), 10)], predicate: this.predicate,\n matchCase: this.matchCase, ignoreAccent: this.ignoreAccent, actualFilterValue: {}, actualOperator: {}\n };\n var index = this.getFilteredColsIndexByField(col);\n if (index > -1 && !Array.isArray(this.value)) {\n this.filterSettings.columns[parseInt(index.toString(), 10)] = this.currentFilterObject;\n }\n else {\n this.filterSettings.columns.push(this.currentFilterObject);\n }\n if (!this.column.isForeignColumn() && isNullOrUndefined(this.value) && (this.operator === 'equal' ||\n this.operator === 'notequal') && (moduleName !== 'ODataAdaptor' && moduleName !== 'ODataV4Adaptor')) {\n for (var i_1 = 0; i_1 < this.filterSettings.columns.length; i_1++) {\n if (this.filterSettings.columns[\"\" + i_1].field === field &&\n (this.filterSettings.columns[\"\" + i_1].operator === 'equal' || this.filterSettings.columns[\"\" + i_1].operator === 'notequal')\n && isNullOrUndefined(this.filterSettings.columns[\"\" + i_1].value)) {\n this.filterSettings.columns.splice(i_1, 1);\n i_1 = i_1 - 1;\n }\n }\n if (col.type === 'string') {\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: ''\n });\n }\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: undefined\n });\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: null\n });\n }\n }\n // eslint-disable-next-line no-self-assign\n this.filterSettings.columns = this.filterSettings.columns;\n this.parent.dataBind();\n };\n Filter.prototype.getFilteredColsIndexByField = function (col) {\n var cols = this.filterSettings.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].uid === col.uid || (col.isForeignColumn()\n && this.parent.getColumnByUid(col.uid).field === col.foreignKeyValue)) {\n return i;\n }\n }\n return -1;\n };\n /**\n * To trigger action complete event.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Filter.prototype.onActionComplete = function (e) {\n var args = !this.isRemove ? {\n currentFilterObject: this.currentFilterObject,\n /* tslint:disable:no-string-literal */\n currentFilteringColumn: !isNullOrUndefined(this.column) ? this.column.field : undefined,\n /* tslint:enable:no-string-literal */\n columns: this.filterSettings.columns, requestType: 'filtering', type: events.actionComplete\n } : {\n requestType: 'filtering', type: events.actionComplete\n };\n this.parent.trigger(events.actionComplete, extend(e, args));\n this.isRemove = false;\n };\n Filter.prototype.wireEvents = function () {\n EventHandler.add(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate, this);\n };\n Filter.prototype.unWireEvents = function () {\n EventHandler.remove(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate);\n };\n Filter.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.parent.getHeaderTable().classList.add('e-sortfilter');\n this.render();\n }\n };\n Filter.prototype.refreshFilterValue = function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!isNullOrUndefined(this.parent.modelObserver.boundedEvents)) {\n this.parent.removeEventListener(events.beforeDataBound, this.refreshFilterValueFn);\n }\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.columns.length &&\n !this.parent.getCurrentViewRecords().length) {\n this.initialEnd();\n }\n };\n Filter.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n if (this.parent.getColumns().length && this.filterSettings.columns.length) {\n var gObj = this.parent;\n this.contentRefresh = false;\n this.initialLoad = true;\n for (var _i = 0, _a = gObj.filterSettings.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n this.filterByColumn(col.field, col.operator, col.value, col.predicate, col.matchCase, col.ignoreAccent, col.actualFilterValue, col.actualOperator, col.isForeignKey);\n }\n this.initialLoad = false;\n this.updateFilterMsg();\n this.contentRefresh = true;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Filter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.filterComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.keyPressed, this.keyUpHandler, this);\n this.parent.on(events.columnPositionChanged, this.columnPositionChanged, this);\n this.parent.on(events.headerRefreshed, this.render, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.filterMenuClose, this.filterMenuClose, this);\n this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);\n this.docClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.docClickHandler, this);\n EventHandler.add(this.parent.element, 'mousedown', this.refreshClearIcon, this);\n this.parent.on(events.filterOpen, this.columnMenuFilter, this);\n this.parent.on(events.click, this.filterIconClickHandler, this);\n this.parent.on('persist-data-changed', this.initialEnd, this);\n this.parent.on(events.closeFilterDialog, this.clickHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.refreshFilterValueFn = this.refreshFilterValue.bind(this);\n this.parent.addEventListener(events.beforeDataBound, this.refreshFilterValueFn);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Filter.prototype.removeEventListener = function () {\n EventHandler.remove(document, 'click', this.docClickHandler);\n EventHandler.remove(this.parent.element, 'mousedown', this.refreshClearIcon);\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.filterComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.keyPressed, this.keyUpHandler);\n this.parent.off(events.columnPositionChanged, this.columnPositionChanged);\n this.parent.off(events.headerRefreshed, this.render);\n this.parent.off(events.filterOpen, this.columnMenuFilter);\n this.parent.off(events.filterMenuClose, this.filterMenuClose);\n this.parent.off(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction);\n this.parent.off(events.click, this.filterIconClickHandler);\n this.parent.off(events.closeFilterDialog, this.clickHandler);\n this.parent.off(events.destroy, this.destroy);\n };\n Filter.prototype.refreshClearIcon = function (e) {\n if (this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar' &&\n e.target.closest('th') && e.target.closest('th').classList.contains('e-filterbarcell') &&\n e.target.classList.contains('e-clear-icon')) {\n var targetText = e.target.previousElementSibling;\n Input.setValue(null, targetText, 'Never', true);\n if (this.filterSettings.mode === 'Immediate') {\n this.removeFilteredColsByField(targetText.id.slice(0, -14)); //Length of _filterBarcell = 14\n }\n }\n };\n Filter.prototype.filterMenuClose = function () {\n this.fltrDlgDetails.isOpen = false;\n };\n /**\n * Filters the Grid row by fieldName, filterOperator, and filterValue.\n *\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value which is used to filter records.\n * @param {string} predicate - Defines the relationship of one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, then the filter records\n * the exact match or
filters records that are case insensitive (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @param {boolean} isForeignColumn - Defines whether it is a foreign key column.\n * @returns {void}\n */\n Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator, isForeignColumn) {\n var _this = this;\n var gObj = this.parent;\n var filterCell;\n this.column = gObj.grabColumnByFieldFromAllCols(fieldName, isForeignColumn);\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator\n && isNullOrUndefined(this.column.filterBarTemplate) && isNullOrUndefined(this.column.filterTemplate)) {\n filterOperator = this.getOperatorName(fieldName);\n }\n if (filterOperator === 'like' && filterValue && filterValue.indexOf('%') === -1) {\n filterValue = '%' + filterValue + '%';\n }\n if (!this.column) {\n return;\n }\n if (this.filterSettings.type === 'FilterBar') {\n filterCell = gObj.getHeaderContent().querySelector('[id=\\'' + this.column.field + '_filterBarcell\\']');\n }\n if (!isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: this.column.headerText });\n return;\n }\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: filterOperator, arg3: filterValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: actualFilterValue, arg8: actualOperator\n });\n return;\n }\n this.predicate = predicate ? predicate : Array.isArray(filterValue) ? 'or' : 'and';\n this.value = filterValue;\n this.matchCase = matchCase || false;\n this.ignoreAccent = this.ignoreAccent = !isNullOrUndefined(ignoreAccent) ? ignoreAccent : this.parent.filterSettings.ignoreAccent;\n this.fieldName = fieldName;\n this.operator = filterOperator;\n filterValue = !isNullOrUndefined(filterValue) ? filterValue.toString() : filterValue;\n if (filterValue === '') {\n filterValue = null;\n }\n if (this.column.type === 'number' || this.column.type === 'date') {\n this.matchCase = true;\n }\n if (filterCell && this.filterSettings.type === 'FilterBar') {\n if ((filterValue && filterValue.length < 1) || (!this.filterByMethod &&\n this.checkForSkipInput(this.column, filterValue))) {\n this.filterStatusMsg = (filterValue && filterValue.length < 1) ? '' : this.l10n.getConstant('InvalidFilterMessage');\n this.updateFilterMsg();\n return;\n }\n if (filterCell.value !== filterValue) {\n filterCell.value = filterValue;\n }\n }\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n if (this.initialLoad && this.filterSettings.type === 'FilterBar') {\n filterCell.value = this.values[this.column.field];\n }\n }\n else {\n this.values[this.column.field] = filterValue; //this line should be above updateModel\n }\n var predObj = {\n field: this.fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: this.operator,\n value: this.value,\n type: this.column.type\n };\n var filterColumn = this.parent.filterSettings.columns.filter(function (fColumn) {\n return (fColumn.field === _this.fieldName);\n });\n if (filterColumn.length > 1 && !isNullOrUndefined(this.actualPredicate[this.fieldName])) {\n this.actualPredicate[this.fieldName].push(predObj);\n }\n else {\n this.actualPredicate[this.fieldName] = [predObj];\n }\n if (this.checkAlreadyColFiltered(this.column.field)) {\n return;\n }\n this.updateModel();\n };\n Filter.prototype.applyColumnFormat = function (filterValue) {\n var _this = this;\n var getFlvalue = (this.column.type === 'date' || this.column.type === 'datetime' || this.column.type === 'dateonly') ?\n new Date(filterValue) : parseFloat(filterValue);\n if ((this.column.type === 'date' || this.column.type === 'datetime' || this.column.type === 'dateonly') && filterValue &&\n Array.isArray(this.value) && filterValue.split(',').length > 1) {\n this.values[this.column.field] = ((filterValue).split(',')).map(function (val) {\n if (val === '') {\n val = null;\n }\n return _this.setFormatForFlColumn(new Date(val), _this.column);\n });\n }\n else {\n this.values[this.column.field] = this.setFormatForFlColumn(getFlvalue, this.column);\n }\n };\n // To skip the second time request to server while applying initial filtering - EJ2-44361\n Filter.prototype.skipUid = function (col) {\n var flag = true;\n var colLen = Object.keys((col));\n for (var i = 0; i < colLen.length; i++) {\n var key = Object.keys(col[colLen[parseInt(i.toString(), 10)]]);\n if (key.length === 1 && key[0] === 'uid') {\n flag = false;\n }\n }\n return flag;\n };\n Filter.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n for (var _i = 0, _a = Object.keys(e.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'columns':\n // eslint-disable-next-line no-case-declarations\n var col = 'columns';\n // eslint-disable-next-line no-case-declarations\n var args = {\n currentFilterObject: this.currentFilterObject, currentFilteringColumn: this.column ?\n this.column.field : undefined, action: 'filter', columns: this.filterSettings.columns,\n requestType: 'filtering', type: events.actionBegin, cancel: false\n };\n if (this.contentRefresh && this.skipUid(e.properties[\"\" + col])) {\n this.parent.notify(events.modelChanged, args);\n if (args.cancel) {\n if ((this.filterSettings.type === 'CheckBox' || this.filterSettings.type === 'Excel')) {\n this.filterSettings.columns = (this.actualData.length <= 1) ? this.checkboxPrevFilterObject :\n this.checkboxFilterObject;\n this.actualPredicate[this.column.field] = this.filterSettings.columns;\n var col_1 = this.parent.getColumnByField(this.column.field);\n var iconClass = this.parent.showColumnMenu && col_1.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var filterIconElement = this.parent.getColumnHeaderByField(this.column.field)\n .querySelector(iconClass);\n if (this.checkboxPrevFilterObject.length === 0) {\n filterIconElement.classList.remove('e-filtered');\n }\n else {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (isNullOrUndefined(this.prevFilterObject)) {\n this.filterSettings.columns.splice(this.filterSettings.columns.length - 1, 1);\n }\n else {\n this.filterSettings.columns[this.filterObjIndex] = this.prevFilterObject;\n }\n }\n return;\n }\n this.updateFilterIcon();\n this.refreshFilterSettings();\n this.updateFilterMsg();\n this.updateFilter();\n }\n break;\n case 'showFilterBarStatus':\n if (e.properties[\"\" + prop]) {\n this.updateFilterMsg();\n }\n else if (this.parent.allowPaging) {\n this.parent.updateExternalMessage('');\n }\n break;\n case 'showFilterBarOperator':\n case 'type':\n this.parent.refreshHeader();\n this.refreshFilterSettings();\n if (this.parent.height === '100%') {\n this.parent.scrollModule.refresh();\n }\n break;\n }\n }\n };\n Filter.prototype.refreshFilterSettings = function () {\n if (this.filterSettings.type === 'FilterBar') {\n for (var i = 0; i < this.filterSettings.columns.length; i++) {\n this.column = this.parent.grabColumnByUidFromAllCols(this.filterSettings.columns[parseInt(i.toString(), 10)].uid);\n var filterValue = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n filterValue = !isNullOrUndefined(filterValue) && filterValue.toString();\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n }\n else {\n var key = this.filterSettings.columns[parseInt(i.toString(), 10)].field;\n this.values[\"\" + key] = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n }\n var filterElement = this.getFilterBarElement(this.column.field);\n if (filterElement) {\n if (this.cellText[this.filterSettings.columns[parseInt(i.toString(), 10)].field] !== ''\n && !isNullOrUndefined(this.cellText[this.filterSettings.columns[parseInt(i.toString(), 10)].field])) {\n filterElement.value = this.cellText[this.column.field];\n }\n else {\n filterElement.value = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n }\n }\n }\n if (this.filterSettings.columns.length === 0) {\n var col = this.parent.getColumns();\n for (var i = 0; i < col.length; i++) {\n var filterElement = this.getFilterBarElement(col[parseInt(i.toString(), 10)].field);\n if (filterElement && filterElement.value !== '') {\n filterElement.value = '';\n delete this.values[col[parseInt(i.toString(), 10)].field];\n }\n }\n }\n }\n };\n Filter.prototype.updateFilterIcon = function () {\n if (this.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrIconElement = [].slice.call(this.parent.element.getElementsByClassName('e-filtered'));\n for (var i = 0, len = fltrIconElement.length; i < len; i++) {\n fltrIconElement[parseInt(i.toString(), 10)].classList.remove('e-filtered');\n }\n }\n };\n Filter.prototype.getFilterBarElement = function (col) {\n var selector = '[id=\\'' + col + '_filterBarcell\\']';\n var filterElement;\n if (selector && !isNullOrUndefined(this.element)) {\n filterElement = this.element.querySelector(selector);\n }\n return filterElement;\n };\n /**\n * @private\n * @returns {void}\n */\n Filter.prototype.refreshFilter = function () {\n this.refreshFilterSettings();\n this.updateFilterMsg();\n };\n /**\n * Clears all the filtered rows of the Grid.\n *\n * @param {string[]} fields - returns the fields\n * @returns {void}\n */\n Filter.prototype.clearFiltering = function (fields) {\n var _this = this;\n var cols = getActualPropFromColl(this.filterSettings.columns);\n if (!isNullOrUndefined(fields)) {\n this.refresh = false;\n fields.forEach(function (field) { _this.removeFilteredColsByField(field, false); });\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n this.parent.renderModule.refresh();\n this.refresh = true;\n return;\n }\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearFiltering });\n return;\n }\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].uid = cols[parseInt(i.toString(), 10)].uid\n || this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field).uid;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredcols = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n this.refresh = false;\n for (var i = 0, len = filteredcols.length; i < len; i++) {\n this.removeFilteredColsByField(this.parent.getColumnByUid(filteredcols[parseInt(i.toString(), 10)]).field, false);\n }\n this.refresh = true;\n if (filteredcols.length) {\n this.parent.renderModule.refresh();\n }\n if (this.parent.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrElement = [].slice.call(this.parent.element.getElementsByClassName('e-filtered'));\n for (var i = 0, len = fltrElement.length; i < len; i++) {\n fltrElement[0].classList.remove('e-filtered');\n }\n }\n this.isRemove = true;\n this.filterStatusMsg = '';\n this.updateFilterMsg();\n };\n Filter.prototype.checkAlreadyColFiltered = function (field) {\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n if (col.field === field && col.value === this.value &&\n col.operator === this.operator && col.predicate === this.predicate) {\n return true;\n }\n }\n return false;\n };\n Filter.prototype.columnMenuFilter = function (args) {\n this.column = args.col;\n var ele = closest(args.target, '#' + args.id);\n if (args.isClose && !ele) {\n this.filterModule.closeDialog();\n }\n else if (ele) {\n this.filterDialogOpen(this.column, args.target);\n }\n };\n Filter.prototype.filterDialogOpen = function (col, target, left, top) {\n if (this.filterModule) {\n this.filterModule.isresetFocus = false;\n this.filterModule.closeDialog();\n }\n this.setFilterModel(col);\n this.filterModule.openDialog(this.createOptions(col, target, left, top));\n };\n /**\n * Create filter dialog options\n *\n * @param {Column} col - Filtering column detail.\n * @param {Element} target - Filter dialog target.\n * @param {number} left - Filter dialog left position.\n * @param {number} top - Filter dialog top position.\n * @returns {Object} returns the created dialog options\n * @hidden\n */\n Filter.prototype.createOptions = function (col, target, left, top) {\n var gObj = this.parent;\n var dataSource = col.filter.dataSource || gObj.dataSource && 'result' in gObj.dataSource ? gObj.dataSource :\n gObj.getDataModule().dataManager;\n var type = col.filter.type || this.parent.filterSettings.type;\n var options = {\n type: col.type, field: col.field, displayName: col.headerText,\n dataSource: dataSource, format: col.format, height: 800, columns: gObj.getColumns(),\n filteredColumns: gObj.filterSettings.columns, target: target, dataManager: gObj.getDataModule().dataManager,\n formatFn: col.getFormatter(), ignoreAccent: gObj.filterSettings.ignoreAccent,\n parserFn: col.getParser(), query: gObj.query, template: col.getFilterItemTemplate(),\n hideSearchbox: isNullOrUndefined(col.filter.hideSearchbox) ? false : col.filter.hideSearchbox,\n handler: this.filterHandler.bind(this), localizedStrings: gObj.getLocaleConstants(),\n position: { X: left, Y: top }, column: col, foreignKeyValue: col.foreignKeyValue,\n actualPredicate: this.actualPredicate, localeObj: gObj.localeObj,\n isRemote: gObj.getDataModule().isRemote(), allowCaseSensitive: this.filterSettings.enableCaseSensitivity,\n isResponsiveFilter: this.parent.enableAdaptiveUI,\n operator: this.actualPredicate[col.field] && type === 'Menu' ? this.actualPredicate[col.field][0].operator : 'equal',\n parentTotalDataCount: gObj.getDataModule().isRemote() && gObj.allowPaging ? gObj.pagerModule.pagerObj.totalRecordsCount :\n gObj.getDataModule().isRemote() ? gObj.totalDataRecordsCount : gObj.getFilteredRecords().length,\n parentCurrentViewDataCount: gObj.currentViewData.length,\n parentFilteredLocalRecords: !gObj.getDataModule().isRemote() ? gObj.getFilteredRecords() : []\n };\n return options;\n };\n /**\n * Removes filtered column by field name.\n *\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @returns {void}\n * @hidden\n */\n Filter.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n var fCell;\n var cols = this.filterSettings.columns;\n if (isActionPrevent(this.parent)) {\n var args = { instance: this, handler: this.removeFilteredColsByField, arg1: field, arg2: isClearFilterBar };\n this.parent.notify(events.preventBatch, args);\n return;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredColsUid = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n if (!isNullOrUndefined(this.column)) {\n var col = this.column.isForeignColumn() ? this.parent.getColumnByUid(this.column.uid) :\n this.parent.getColumnByField(field);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n }\n var _loop_1 = function (i, len) {\n cols[parseInt(i.toString(), 10)].uid = cols[parseInt(i.toString(), 10)].uid\n || this_1.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field).uid;\n var len_1 = cols.length;\n var column = this_1.parent.grabColumnByUidFromAllCols(filteredColsUid[parseInt(i.toString(), 10)]);\n if (column.field === field || (column.field === column.foreignKeyValue && column.isForeignColumn())) {\n var currentPred = this_1.filterSettings.columns.filter(function (e) {\n return e.uid === column.uid;\n })[0];\n if (this_1.filterSettings.type === 'FilterBar' && !isClearFilterBar) {\n var selector = '[id=\\'' + column.field + '_filterBarcell\\']';\n fCell = this_1.parent.getHeaderContent().querySelector(selector);\n if (fCell) {\n fCell.value = '';\n delete this_1.values[\"\" + field];\n }\n }\n while (len_1--) {\n if (cols[parseInt(len_1.toString(), 10)].uid === column.uid) {\n cols.splice(len_1, 1);\n }\n }\n var fltrElement = this_1.parent.getColumnHeaderByField(column.field);\n if (this_1.filterSettings.type !== 'FilterBar' || this_1.parent.showColumnMenu) {\n var iconClass = this_1.parent.showColumnMenu && column.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n fltrElement.querySelector(iconClass).classList.remove('e-filtered');\n }\n this_1.isRemove = true;\n if (this_1.actualPredicate[\"\" + field]) {\n delete this_1.actualPredicate[\"\" + field];\n }\n if (this_1.values[\"\" + field]) {\n delete this_1.values[\"\" + field];\n }\n if (this_1.refresh) {\n this_1.parent.notify(events.modelChanged, {\n requestType: 'filtering', type: events.actionBegin, currentFilterObject: currentPred,\n currentFilterColumn: column, action: 'clearFilter'\n });\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0, len = filteredColsUid.length; i < len; i++) {\n var state_1 = _loop_1(i, len);\n if (state_1 === \"break\")\n break;\n }\n this.updateFilterMsg();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Filter.prototype.getModuleName = function () {\n return 'filter';\n };\n Filter.prototype.keyUpHandlerImmediate = function (e) {\n if (e.keyCode !== 13) {\n this.keyUpHandler(e);\n }\n };\n Filter.prototype.keyUpHandler = function (e) {\n var gObj = this.parent;\n var target = e.target;\n if (target && matches(target, '.e-filterbar input')) {\n var closeHeaderEle = closest(target, 'th.e-filterbarcell');\n this.column = gObj.getColumnByUid(closeHeaderEle.getAttribute('e-mappinguid'));\n if (!this.column) {\n return;\n }\n if (e.action === 'altDownArrow' && this.parent.filterSettings.showFilterBarOperator) {\n var dropDownListInput = closest(target, 'span').querySelector('.e-filterbaroperator');\n dropDownListInput.ej2_instances[0].showPopup();\n dropDownListInput.focus();\n }\n if ((this.filterSettings.mode === 'Immediate' || (e.keyCode === 13 &&\n !e.target.classList.contains('e-filterbaroperator')))\n && e.keyCode !== 9 && !this.column.filterTemplate) {\n this.value = target.value.trim();\n this.processFilter(e);\n }\n }\n if (e.action === 'altDownArrow' && this.filterSettings.type !== 'FilterBar' && !parentsUntil(e.target, 'e-toolbar')\n && isNullOrUndefined(this.parent.element.querySelector('.e-filter-popup'))) {\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n this.openMenuByField(column.field);\n this.parent.focusModule.clearIndicator();\n }\n }\n if (e.action === 'escape' && this.filterSettings.type === 'Menu' && this.filterModule) {\n this.filterModule.closeDialog();\n gObj.notify(events.restoreFocus, {});\n }\n };\n Filter.prototype.updateCrossIcon = function (element) {\n if (element.value.length) {\n element.nextElementSibling.classList.remove('e-hide');\n }\n };\n Filter.prototype.updateFilterMsg = function () {\n if (this.filterSettings.type === 'FilterBar') {\n var gObj = this.parent;\n var getFormatFlValue = void 0;\n var columns = this.filterSettings.columns;\n var column = void 0;\n if (!this.filterSettings.showFilterBarStatus) {\n return;\n }\n if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {\n this.filterStatusMsg = '';\n for (var index = 0; index < columns.length; index++) {\n column = gObj.grabColumnByUidFromAllCols(columns[parseInt(index.toString(), 10)].uid)\n || gObj.grabColumnByFieldFromAllCols(columns[parseInt(index.toString(), 10)]\n .field, columns[parseInt(index.toString(), 10)].isForeignKey);\n if (index) {\n this.filterStatusMsg += ' && ';\n }\n if (!isNullOrUndefined(column.format)) {\n var flValue = (column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly') ?\n this.valueFormatter.fromView(this.values[column.field], column.getParser(), (column.type === 'dateonly' ? 'date' : column.type)) :\n this.values[column.field];\n if (!(column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly')) {\n var formater = this.serviceLocator.getService('valueFormatter');\n getFormatFlValue = formater.toView(flValue, column.getParser()).toString();\n }\n else {\n getFormatFlValue = this.setFormatForFlColumn(flValue, column);\n }\n this.filterStatusMsg += column.headerText + ': ' + getFormatFlValue;\n }\n else {\n this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];\n }\n }\n }\n if (gObj.allowPaging) {\n gObj.updateExternalMessage(this.filterStatusMsg);\n }\n //TODO: virtual paging\n this.filterStatusMsg = '';\n }\n };\n Filter.prototype.setFormatForFlColumn = function (value, column) {\n var formater = this.serviceLocator.getService('valueFormatter');\n return formater.toView(value, column.getFormatter()).toString();\n };\n Filter.prototype.checkForSkipInput = function (column, value) {\n var isSkip;\n if (column.type === 'number') {\n if (DataUtil.operatorSymbols[\"\" + value] || this.skipNumberInput.indexOf(value) > -1) {\n isSkip = true;\n }\n }\n else if (column.type === 'string') {\n for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {\n var val = value_1[_i];\n if (this.skipStringInput.indexOf(val) > -1) {\n isSkip = true;\n }\n }\n }\n return isSkip;\n };\n Filter.prototype.processFilter = function (e) {\n this.stopTimer();\n this.startTimer(e);\n };\n Filter.prototype.startTimer = function (e) {\n var _this = this;\n this.timer = window.setInterval(function () { _this.onTimerTick(); }, e.keyCode === 13 ? 0 : this.filterSettings.immediateModeDelay);\n };\n Filter.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Filter.prototype.onTimerTick = function () {\n var selector = '[id=\\'' + this.column.field + '_filterBarcell\\']';\n var filterElement = this.element.querySelector(selector);\n if (!filterElement) {\n filterElement = this.parent.getHeaderContent().querySelector(selector);\n }\n var filterValue;\n this.cellText[this.column.field] = filterElement.value;\n this.stopTimer();\n if (!isNullOrUndefined(this.column.filterBarTemplate)) {\n var templateRead = this.column.filterBarTemplate.read;\n if (typeof templateRead === 'string') {\n templateRead = getValue(templateRead, window);\n }\n if (!isNullOrUndefined(templateRead)) {\n this.value = templateRead.call(this, filterElement);\n }\n }\n else {\n filterValue = JSON.parse(JSON.stringify(filterElement.value));\n }\n if (isNullOrUndefined(this.value) || this.value === '') {\n this.removeFilteredColsByField(this.column.field);\n return;\n }\n this.validateFilterValue(this.value);\n this.filterByMethod = false;\n this.filterByColumn(this.column.field, this.operator, this.value, this.predicate, this.filterSettings.enableCaseSensitivity, this.ignoreAccent, this.column.isForeignColumn());\n this.filterByMethod = true;\n filterElement.value = filterValue;\n this.updateFilterMsg();\n };\n Filter.prototype.validateFilterValue = function (value) {\n var skipInput;\n var index;\n this.matchCase = this.filterSettings.enableCaseSensitivity;\n switch (this.column.type) {\n case 'number':\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n skipInput = ['>', '<', '=', '!'];\n for (var i = 0; i < value.length; i++) {\n if (skipInput.indexOf(value[parseInt(i.toString(), 10)]) > -1) {\n index = i;\n break;\n }\n }\n this.getOperator(value.substring(index));\n if (index !== 0) {\n this.value = value.substring(0, index);\n }\n if (this.value !== '' && value.length >= 1) {\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n }\n if (isNaN(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n break;\n case 'date':\n case 'datetime':\n this.operator = this.filterOperators.equal;\n if (this.value !== '' && !(this.value instanceof Date)) {\n this.getOperator(value);\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n if (isNullOrUndefined(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n }\n break;\n case 'string':\n this.matchCase = false;\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n if (value.indexOf('*') !== -1 || value.indexOf('?') !== -1 || value.indexOf('%3f') !== -1) {\n this.operator = this.filterOperators.wildCard;\n }\n else if (value.indexOf('%') !== -1) {\n this.operator = this.filterOperators.like;\n }\n else {\n this.operator = this.filterOperators.startsWith;\n }\n }\n break;\n case 'boolean':\n if (value.toLowerCase() === 'true' || value === '1') {\n this.value = true;\n }\n else if (value.toLowerCase() === 'false' || value === '0') {\n this.value = false;\n }\n else if (value.length) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n this.operator = this.filterOperators.equal;\n break;\n default:\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n }\n };\n Filter.prototype.getOperator = function (value) {\n var singleOp = value.charAt(0);\n var multipleOp = value.slice(0, 2);\n var operators = extend({ '=': this.filterOperators.equal, '!': this.filterOperators.notEqual }, DataUtil.operatorSymbols);\n // eslint-disable-next-line no-prototype-builtins\n if (operators.hasOwnProperty(singleOp) || operators.hasOwnProperty(multipleOp)) {\n this.operator = operators[\"\" + singleOp];\n this.value = value.substring(1);\n if (!this.operator) {\n this.operator = operators[\"\" + multipleOp];\n this.value = value.substring(2);\n }\n }\n if (this.operator === this.filterOperators.lessThan || this.operator === this.filterOperators.greaterThan) {\n if (this.value.charAt(0) === '=') {\n this.operator = this.operator + 'orequal';\n this.value = this.value.substring(1);\n }\n }\n };\n Filter.prototype.columnPositionChanged = function () {\n if (this.parent.filterSettings.type !== 'FilterBar') {\n return;\n }\n };\n Filter.prototype.getLocalizedCustomOperators = function () {\n var numOptr = [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'greaterthan', text: this.l10n.getConstant('GreaterThan') },\n { value: 'greaterthanorequal', text: this.l10n.getConstant('GreaterThanOrEqual') },\n { value: 'lessthan', text: this.l10n.getConstant('LessThan') },\n { value: 'lessthanorequal', text: this.l10n.getConstant('LessThanOrEqual') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') },\n { value: 'isnull', text: this.l10n.getConstant('IsNull') },\n { value: 'isnotnull', text: this.l10n.getConstant('NotNull') }\n ];\n this.customOperators = {\n stringOperator: [\n { value: 'startswith', text: this.l10n.getConstant('StartsWith') },\n { value: 'endswith', text: this.l10n.getConstant('EndsWith') },\n { value: 'contains', text: this.l10n.getConstant('Contains') },\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'isempty', text: this.l10n.getConstant('IsEmpty') },\n { value: 'doesnotstartwith', text: this.l10n.getConstant('NotStartsWith') },\n { value: 'doesnotendwith', text: this.l10n.getConstant('NotEndsWith') },\n { value: 'doesnotcontain', text: this.l10n.getConstant('NotContains') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') },\n { value: 'isnotempty', text: this.l10n.getConstant('IsNotEmpty') },\n { value: 'like', text: this.l10n.getConstant('Like') }\n ],\n numberOperator: numOptr,\n dateOperator: numOptr,\n datetimeOperator: numOptr,\n dateonlyOperator: numOptr,\n booleanOperator: [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') }\n ]\n };\n };\n /**\n * @param {string} field - specifies the field name\n * @returns {void}\n * @hidden\n */\n Filter.prototype.openMenuByField = function (field) {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.showCustomFilter(false);\n return;\n }\n var column = gObj.getColumnByField(field);\n var header = gObj.getColumnHeaderByField(field);\n var target = header.querySelector('.e-filtermenudiv');\n if (!target) {\n return;\n }\n var gClient = gObj.element.getBoundingClientRect();\n var fClient = target.getBoundingClientRect();\n this.filterDialogOpen(column, target, fClient.right - gClient.left, fClient.bottom - gClient.top);\n };\n Filter.prototype.filterIconClickHandler = function (e) {\n var target = e.target;\n if (target.classList.contains('e-filtermenudiv') && (this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel')) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));\n this.column = col;\n if (this.fltrDlgDetails.field === col.field && this.fltrDlgDetails.isOpen) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.closeDialog();\n }\n this.fltrDlgDetails = { field: col.field, isOpen: true };\n this.openMenuByField(col.field);\n }\n };\n Filter.prototype.clickHandler = function (e) {\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n if (parentsUntil(e.target, 'e-filterbarcell') &&\n e.target.classList.contains('e-input-group-icon')) {\n var filterOperatorElement = closest(e.target, 'div').\n querySelector('.e-filterbaroperator');\n if (filterOperatorElement) {\n filterOperatorElement.focus();\n }\n else {\n e.target.focus();\n }\n }\n if (e.target.classList.contains('e-list-item')) {\n var inputId = document.querySelector('.e-popup-open').getAttribute('id').replace('_popup', '');\n if (inputId.indexOf('grid-column') !== -1) {\n closest(document.getElementById(inputId), 'div').querySelector('.e-filtertext').focus();\n }\n }\n }\n if (this.filterSettings.mode === 'Immediate' || this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel') {\n var target = e.target;\n var datepickerEle = target.classList.contains('e-day'); // due to datepicker popup cause\n var dialog = parentsUntil(this.parent.element, 'e-dialog');\n var hasDialog = false;\n var popupEle = parentsUntil(target, 'e-popup');\n var hasDialogClosed = this.parent.element.classList.contains('e-device') ? document.querySelector('.e-filter-popup')\n : this.parent.element.querySelector('.e-filter-popup');\n if (dialog && popupEle) {\n hasDialog = dialog.id === popupEle.id;\n }\n if ((this.filterModule && hasDialogClosed && (parentsUntil(target, 'e-excel-ascending') ||\n parentsUntil(target, 'e-excel-descending')))) {\n this.filterModule.closeDialog(target);\n }\n if (parentsUntil(target, 'e-filter-popup') || target.classList.contains('e-filtermenudiv')) {\n return;\n }\n else if (this.filterModule && !parentsUntil(target, 'e-date-overflow') && (!parentsUntil(target, 'e-popup-wrapper')\n && (!closest(target, '.e-filter-item.e-menu-item'))) && !datepickerEle\n && !(parentsUntil(target, 'e-search-wrapper') && !hasDialogClosed)) {\n if ((hasDialog && (!parentsUntil(target, 'e-filter-popup'))\n && (!parentsUntil(target, 'e-popup-flmenu'))) || (!popupEle && hasDialogClosed)) {\n this.filterModule.isresetFocus = parentsUntil(target, 'e-grid') &&\n parentsUntil(target, 'e-grid').id === this.parent.element.id && !(parentsUntil(target, 'e-search-wrapper')\n && hasDialogClosed);\n this.filterModule.closeDialog(target);\n }\n }\n }\n };\n Filter.prototype.filterHandler = function (args) {\n this.actualPredicate[args.field] = args.actualPredicate;\n this.actualData = Object.keys(this.actualPredicate);\n var dataManager = new DataManager(this.filterSettings.columns);\n var query = new Query().where('field', this.filterOperators.equal, args.field);\n this.checkboxFilterObject = dataManager.dataSource.json;\n this.checkboxPrevFilterObject = dataManager.executeLocal(query);\n for (var i = 0; i < this.checkboxPrevFilterObject.length; i++) {\n var index = -1;\n for (var j = 0; j < this.filterSettings.columns.length; j++) {\n if (this.checkboxPrevFilterObject[parseInt(i.toString(), 10)].field ===\n this.filterSettings.columns[parseInt(j.toString(), 10)].field) {\n index = j;\n break;\n }\n }\n if (index !== -1) {\n this.filterSettings.columns.splice(index, 1);\n }\n }\n if (this.values[args.field]) {\n delete this.values[args.field];\n }\n var col = this.parent.getColumnByField(args.field);\n var iconClass = this.parent.showColumnMenu && col.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var filterIconElement = this.parent.getColumnHeaderByField(args.field).querySelector(iconClass);\n if (args.action === 'filtering') {\n this.filterSettings.columns = this.filterSettings.columns.concat(args.filterCollection);\n if (this.filterSettings.columns.length && filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (filterIconElement) {\n filterIconElement.classList.remove('e-filtered');\n }\n args.requestType = 'filtering';\n this.parent.renderModule.refresh(args); //hot-fix onpropertychanged not working for object { array }\n }\n this.parent.dataBind();\n };\n Filter.prototype.updateFilter = function () {\n var cols = this.filterSettings.columns;\n this.actualPredicate = {};\n for (var i = 0; i < cols.length; i++) {\n this.column = this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field) ||\n getColumnByForeignKeyValue(cols[parseInt(i.toString(), 10)].field, this.parent.getForeignKeyColumns());\n var fieldName = cols[parseInt(i.toString(), 10)].field;\n if (!this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field)) {\n fieldName = getColumnByForeignKeyValue(cols[parseInt(i.toString(), 10)].field, this.parent.getForeignKeyColumns()).field;\n }\n this.refreshFilterIcon(fieldName, cols[parseInt(i.toString(), 10)].operator, cols[parseInt(i.toString(), 10)].value, cols[parseInt(i.toString(), 10)].type, cols[parseInt(i.toString(), 10)].predicate, cols[parseInt(i.toString(), 10)].matchCase, cols[parseInt(i.toString(), 10)].ignoreAccent, cols[parseInt(i.toString(), 10)].uid);\n }\n };\n Filter.prototype.refreshFilterIcon = function (fieldName, operator, value, type, predicate, matchCase, ignoreAccent, uid) {\n var obj = {\n field: fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: operator,\n value: value,\n type: type\n };\n if (this.actualPredicate[\"\" + fieldName]) {\n this.actualPredicate[\"\" + fieldName].push(obj);\n }\n else {\n this.actualPredicate[\"\" + fieldName] = [obj];\n }\n var field = uid ? this.parent.grabColumnByUidFromAllCols(uid).field : fieldName;\n this.addFilteredClass(field);\n };\n Filter.prototype.addFilteredClass = function (fieldName) {\n var filterIconElement;\n var col = this.parent.getColumnByField(fieldName);\n if (this.parent.showColumnMenu && col.showColumnMenu) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-columnmenu');\n }\n else if (col) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-icon-filter');\n }\n if (filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n };\n /**\n * @hidden\n * @returns {FilterUI} returns the FilterUI\n */\n Filter.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n /**\n * @param {string} field - specifies the field name\n * @returns {string} returns the operator name\n * @hidden\n */\n Filter.prototype.getOperatorName = function (field) {\n return document.getElementById(this.parent.getColumnByField(field).uid).ej2_instances[0].value;\n };\n /**\n * Renders checkbox items in Menu filter dialog.\n *\n * @returns {void}\n */\n Filter.prototype.renderCheckboxOnFilterMenu = function () {\n return this.filterModule.renderCheckBoxMenu();\n };\n return Filter;\n}());\nexport { Filter };\n","import { EventHandler, detach, formatUnit, Browser, closest } from '@syncfusion/ej2-base';\nimport { Column } from '../models/column';\nimport { ColumnWidthService } from '../services/width-controller';\nimport * as events from '../base/constant';\nimport { getScrollBarWidth, parentsUntil, Global, frozenDirection, isChildColumn, applyStickyLeftRightPosition, groupCaptionRowLeftRightPos } from '../base/util';\nimport { isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport * as literals from '../base/string-literals';\nexport var resizeClassList = {\n root: 'e-rhandler',\n suppress: 'e-rsuppress',\n icon: 'e-ricon',\n helper: 'e-rhelper',\n header: 'th.e-headercell',\n cursor: 'e-rcursor'\n};\n/**\n * `Resize` module is used to handle Resize to fit for columns.\n *\n * @hidden\n * @private\n */\nvar Resize = /** @class */ (function () {\n /**\n * Constructor for the Grid resize module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Resize(parent) {\n this.tapped = false;\n this.isDblClk = true;\n /** @hidden */\n this.resizeProcess = false;\n this.isCancelAutoFit = false;\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * Resize by field names.\n *\n * @param {string|string[]} fName - Defines the field name.\n * @param {number} startRowIndex - Specifies the start row index.\n * @param {number} endRowIndex - Specifies the end row index.\n * @returns {void}\n */\n Resize.prototype.autoFitColumns = function (fName, startRowIndex, endRowIndex) {\n var columnName = (fName === undefined || fName === null || fName.length <= 0) ?\n this.parent.getColumns().map(function (x) { return x.field; }) : (typeof fName === 'string') ? [fName] : fName;\n this.parent.isAutoFitColumns = true;\n if (this.parent.enableAdaptiveUI) {\n this.parent.element.classList.add('e-grid-autofit');\n }\n this.findColumn(columnName, startRowIndex, endRowIndex);\n };\n Resize.prototype.autoFit = function () {\n var newarray = this.parent.getColumns().filter(function (c) { return c.autoFit === true; })\n .map(function (c) { return c.field || c.headerText; });\n if (newarray.length > 0) {\n this.autoFitColumns(newarray);\n }\n if (this.parent.resizeSettings.mode === 'Auto') {\n this.widthService.setWidthToTable();\n }\n };\n Resize.prototype.getCellElementsByColumnIndex = function (columnIndex) {\n if (this.parent.frozenRows) {\n return [].slice.call(this.parent.getHeaderTable().querySelectorAll(\"td.e-rowcell:nth-child(\" + (columnIndex + 1) + \"):not(.e-groupcaption):not(.e-detailcell)\")).concat([].slice.call(this.parent.getContentTable().querySelectorAll(\"td.e-rowcell:nth-child(\" + (columnIndex + 1) + \"):not(.e-groupcaption):not(.e-detailcell)\")));\n }\n else {\n return [].slice.call(this.parent.getContentTable().querySelectorAll(\"td.e-rowcell:nth-child(\" + (columnIndex + 1) + \"):not(.e-groupcaption):not(.e-detailcell)\"));\n }\n };\n Resize.prototype.resizeColumn = function (fName, index, id, startRowIndex, endRowIndex) {\n var gObj = this.parent;\n var tWidth = 0;\n var headerTable = gObj.getHeaderTable();\n var contentTable = gObj.getContentTable();\n var footerTable;\n var headerDivTag = 'e-gridheader';\n var contentDivTag = literals.gridContent;\n var footerDivTag = literals.gridFooter;\n var indentWidth = 0;\n var uid = id ? id : this.parent.getUidByColumnField(fName);\n var columnIndex = this.parent.getNormalizedColumnIndex(uid);\n var headerTextClone = headerTable.querySelector('[e-mappinguid=\"' + uid + '\"]').parentElement.cloneNode(true);\n var contentTextClone = this.getCellElementsByColumnIndex(columnIndex);\n var footerTextClone;\n var columnIndexByField = this.parent.getColumnIndexByField(fName);\n if (!isNullOrUndefined(gObj.getFooterContent())) {\n footerTable = gObj.getFooterContentTable();\n }\n if (footerTable) {\n footerTextClone = footerTable.querySelectorAll(\"td:nth-child(\" + (columnIndex + 1) + \"):not(.e-groupcaption)\");\n }\n var indentWidthClone = [].slice.call(headerTable.querySelector('tr').getElementsByClassName('e-grouptopleftcell'));\n if (indentWidthClone.length > 0) {\n for (var i = 0; i < indentWidthClone.length; i++) {\n indentWidth += indentWidthClone[parseInt(i.toString(), 10)].offsetWidth;\n }\n }\n var detailsElement = contentTable.querySelector('.e-detailrowcollapse') ||\n contentTable.querySelector('.e-detailrowexpand');\n if ((this.parent.detailTemplate || this.parent.childGrid) && detailsElement) {\n indentWidth += detailsElement.offsetWidth;\n }\n var headerText = [headerTextClone];\n var contentText = [];\n var footerText = [];\n if (footerTable) {\n for (var i = 0; i < footerTextClone.length; i++) {\n footerText[parseInt(i.toString(), 10)] = footerTextClone[parseInt(i.toString(), 10)].cloneNode(true);\n }\n }\n for (var i = 0; i < contentTextClone.length; i++) {\n contentText[parseInt(i.toString(), 10)] = contentTextClone[parseInt(i.toString(), 10)].cloneNode(true);\n }\n var wHeader = this.createTable(headerTable, headerText, headerDivTag);\n var wFooter = null;\n var wContent = null;\n if (gObj.getCurrentViewRecords().length) {\n wContent = this.createTable(contentTable, contentText, contentDivTag, startRowIndex, endRowIndex);\n }\n if (footerText.length) {\n wFooter = this.createTable(footerTable, footerText, footerDivTag);\n }\n var columnbyindex = gObj.getColumns()[parseInt(columnIndexByField.toString(), 10)];\n var width = columnbyindex.width = formatUnit(Math.max(wHeader, wContent, wFooter));\n var colMaxWidth = columnbyindex.maxWidth && parseFloat(columnbyindex.maxWidth.toString());\n if (parseInt(width, 10) > colMaxWidth) {\n columnbyindex.width = colMaxWidth;\n }\n this.widthService.setColumnWidth(gObj.getColumns()[parseInt(columnIndexByField.toString(), 10)]);\n var result = gObj.getColumns().some(function (x) { return (x.visible || gObj.groupSettings.columns.length) && (x.width === null\n || x.width === undefined || x.width.length <= 0); });\n if (result === false) {\n var element = gObj.getColumns();\n for (var i = 0; i < element.length; i++) {\n if (element[parseInt(i.toString(), 10)].visible) {\n tWidth = tWidth + parseFloat(element[parseInt(i.toString(), 10)].width);\n }\n }\n }\n var calcTableWidth = tWidth + indentWidth;\n if (tWidth > 0) {\n if (this.parent.detailTemplate || this.parent.childGrid) {\n this.widthService.setColumnWidth(new Column({ width: '30px' }));\n }\n if (this.parent.resizeSettings.mode === 'Auto') {\n calcTableWidth = '100%';\n }\n headerTable.style.width = formatUnit(calcTableWidth);\n contentTable.style.width = formatUnit(calcTableWidth);\n if (!isNullOrUndefined(footerTable)) {\n footerTable.style.width = formatUnit(calcTableWidth);\n }\n }\n if (gObj.isFrozenGrid() && gObj.enableColumnVirtualization) {\n this.widthService.refreshFrozenScrollbar();\n }\n var tableWidth = headerTable.offsetWidth;\n var contentwidth = (gObj.getContent().scrollWidth);\n if (contentwidth > tableWidth) {\n if (!isNullOrUndefined(contentTable.querySelector('.e-emptyrow'))) {\n addClass([headerTable], ['e-tableborder']);\n removeClass([contentTable], ['e-tableborder']);\n }\n else {\n addClass([headerTable, contentTable], ['e-tableborder']);\n }\n }\n else {\n removeClass([headerTable, contentTable], ['e-tableborder']);\n }\n if (!isNullOrUndefined(footerTable)) {\n footerTable.classList.add('e-tableborder');\n }\n };\n /**\n * To destroy the resize\n *\n * @returns {void}\n * @hidden\n */\n Resize.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.widthService = null;\n this.unwireEvents();\n this.removeEventListener();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Resize.prototype.getModuleName = function () {\n return 'resize';\n };\n Resize.prototype.findColumn = function (fName, startRowIndex, endRowIndex) {\n for (var i = 0; i < fName.length; i++) {\n var fieldName = fName[parseInt(i.toString(), 10)];\n var columnIndex = this.parent.getColumnIndexByField(fieldName);\n var column = this.parent.getColumns()[parseInt(columnIndex.toString(), 10)];\n if (columnIndex > -1 && !isNullOrUndefined(column) && column.visible === true) {\n this.resizeColumn(fieldName, columnIndex, null, startRowIndex, endRowIndex);\n }\n }\n if (this.parent.allowTextWrap) {\n this.parent.notify(events.freezeRender, { case: 'refreshHeight', isModeChg: true });\n }\n if (this.parent.isFrozenGrid()) {\n this.refreshResizefrzCols(true, true);\n }\n };\n /**\n * To create table for autofit\n *\n * @param {Element} table - specifies the table\n * @param {Element[]} text - specifies the text\n * @param {string} tag - specifies the tag name\n * @param {number} startRowIndex - Specifies the start row index.\n * @param {number} endRowIndex - Specifies the end row index.\n * @returns {number} returns the number\n * @hidden\n */\n Resize.prototype.createTable = function (table, text, tag, startRowIndex, endRowIndex) {\n if (startRowIndex === void 0) { startRowIndex = 1; }\n if (endRowIndex === void 0) { endRowIndex = text.length; }\n if (startRowIndex > endRowIndex) {\n startRowIndex ^= endRowIndex;\n endRowIndex ^= startRowIndex;\n startRowIndex ^= endRowIndex;\n }\n var myTableDiv = this.parent.createElement('div');\n var adaptiveClass = this.parent.enableAdaptiveUI ? ' e-bigger' : '';\n myTableDiv.className = this.parent.element.className + adaptiveClass;\n myTableDiv.style.cssText = 'display: inline-block;visibility:hidden;position:absolute';\n var mySubDiv = this.parent.createElement('div');\n mySubDiv.className = tag;\n var myTable = this.parent.createElement('table', { attrs: { role: 'grid' } });\n myTable.className = table.className;\n myTable.classList.add('e-resizetable');\n myTable.style.cssText = 'table-layout: auto;width: auto';\n var myTr = this.parent.createElement('tr');\n for (var i = (startRowIndex <= 0 ? 1 : startRowIndex); i <= (endRowIndex > text.length ? text.length : endRowIndex); i++) {\n var tr = myTr.cloneNode();\n tr.className = table.querySelector('tr').className;\n tr.appendChild(text[parseInt((i - 1).toString(), 10)]);\n myTable.appendChild(tr);\n }\n mySubDiv.appendChild(myTable);\n myTableDiv.appendChild(mySubDiv);\n document.body.appendChild(myTableDiv);\n var offsetWidthValue = myTable.getBoundingClientRect().width;\n document.body.removeChild(myTableDiv);\n return Math.ceil(offsetWidthValue);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Resize.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.headerRefreshed, this.refreshHeight, this);\n this.parent.on(events.refreshResizePosition, this.refreshResizePosition, this);\n this.parent.on(events.initialEnd, this.wireEvents, this);\n this.parent.on(events.contentReady, this.autoFit, this);\n this.parent.on(events.refreshHandlers, this.refreshHeight, this);\n this.parent.on(events.destroy, this.destroy, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Resize.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.headerRefreshed, this.refreshHeight);\n this.parent.off(events.refreshResizePosition, this.refreshResizePosition);\n this.parent.off(events.initialEnd, this.wireEvents);\n this.parent.off(events.refreshHandlers, this.refreshHeight);\n this.parent.off(events.destroy, this.destroy);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Resize.prototype.render = function () {\n this.unwireEvents();\n this.wireEvents();\n this.setHandlerHeight();\n };\n Resize.prototype.refreshHeight = function () {\n if (this.parent.getHeaderTable()) {\n var element = this.getResizeHandlers();\n for (var i = 0; i < element.length; i++) {\n if (element[parseInt(i.toString(), 10)].parentElement.offsetHeight > 0) {\n element[parseInt(i.toString(), 10)].style.height = element[parseInt(i.toString(), 10)].parentElement.offsetHeight + 'px';\n }\n }\n this.setHandlerHeight();\n }\n };\n Resize.prototype.wireEvents = function () {\n EventHandler.add(this.parent.getHeaderContent(), Browser.touchStartEvent, this.touchResizeStart, this);\n EventHandler.add(this.parent.getHeaderContent(), events.dblclick, this.callAutoFit, this);\n };\n Resize.prototype.unwireEvents = function () {\n EventHandler.remove(this.parent.getHeaderContent(), Browser.touchStartEvent, this.touchResizeStart);\n EventHandler.remove(this.parent.getHeaderContent(), events.dblclick, this.callAutoFit);\n };\n Resize.prototype.getResizeHandlers = function () {\n return [].slice.call(this.parent.getHeaderTable().getElementsByClassName(resizeClassList.root));\n };\n Resize.prototype.setHandlerHeight = function () {\n var element = [].slice.call(this.parent.getHeaderTable().getElementsByClassName(resizeClassList.suppress));\n for (var i = 0; i < element.length; i++) {\n element[parseInt(i.toString(), 10)].style.height = element[parseInt(i.toString(), 10)].parentElement.offsetHeight + 'px';\n }\n };\n Resize.prototype.callAutoFit = function (e) {\n if (e.target.classList.contains('e-rhandler') && !this.isCancelAutoFit) {\n var col = this.getTargetColumn(e);\n if (col.columns) {\n return;\n }\n this.resizeColumn(col.field, this.parent.getNormalizedColumnIndex(col.uid), col.uid);\n if (this.parent.isFrozenGrid()) {\n this.refreshResizefrzCols(true, true);\n }\n var header = closest(e.target, resizeClassList.header);\n header.classList.add('e-resized');\n }\n };\n Resize.prototype.touchResizeStart = function (e) {\n if (!Global.timer) {\n Global.timer = setTimeout(function () {\n Global.timer = null;\n }, 300);\n return this.resizeStart(e);\n }\n else {\n clearTimeout(Global.timer);\n Global.timer = null;\n this.callAutoFit(e);\n }\n };\n Resize.prototype.resizeStart = function (e) {\n var _this = this;\n if (e.target.classList.contains('e-rhandler')) {\n this.isCancelAutoFit = false;\n var args = { e: e, column: this.getTargetColumn(e) };\n this.parent.trigger(events.resizeStart, args, function (args) {\n if (args.cancel || _this.parent.isEdit) {\n _this.cancelResizeAction();\n _this.isCancelAutoFit = true;\n return;\n }\n });\n if (!this.isCancelAutoFit) {\n if (!this.helper) {\n if (this.getScrollBarWidth() === 0) {\n this.resizeProcess = true;\n if (this.parent.allowGrouping) {\n for (var i = 0; i < this.parent.groupSettings.columns.length; i++) {\n this.widthService.setColumnWidth(new Column({ width: '30px' }), i);\n }\n }\n for (var _i = 0, _a = this.refreshColumnWidth(); _i < _a.length; _i++) {\n var col = _a[_i];\n this.widthService.setColumnWidth(col);\n }\n this.widthService.setWidthToTable();\n this.resizeProcess = false;\n }\n this.refreshStackedColumnWidth();\n this.element = e.target;\n this.parentElementWidth = this.parent.element.getBoundingClientRect().width;\n this.appendHelper();\n this.column = this.getTargetColumn(e);\n this.pageX = this.getPointX(e);\n if (this.column.getFreezeTableName() === literals.frozenRight) {\n if (this.parent.enableRtl) {\n this.minMove = (this.column.minWidth ? parseFloat(this.column.minWidth.toString()) : 0)\n - parseFloat(isNullOrUndefined(this.column.width) ? '' : this.column.width.toString());\n }\n else {\n this.minMove = parseFloat(isNullOrUndefined(this.column.width) ? '' : this.column.width.toString())\n - (this.column.minWidth ? parseFloat(this.column.minWidth.toString()) : 0);\n }\n }\n else if (this.parent.enableRtl) {\n this.minMove = parseFloat(this.column.width.toString())\n - (this.column.minWidth ? parseFloat(this.column.minWidth.toString()) : 0);\n }\n else {\n this.minMove = (this.column.minWidth ? parseFloat(this.column.minWidth.toString()) : 0)\n - parseFloat(isNullOrUndefined(this.column.width) ? '' : this.column.width.toString());\n }\n this.minMove += this.pageX;\n }\n if (Browser.isDevice && !this.helper.classList.contains(resizeClassList.icon)) {\n this.helper.classList.add(resizeClassList.icon);\n EventHandler.add(document, Browser.touchStartEvent, this.removeHelper, this);\n EventHandler.add(this.helper, Browser.touchStartEvent, this.resizeStart, this);\n }\n else {\n EventHandler.add(document, Browser.touchEndEvent, this.resizeEnd, this);\n EventHandler.add(this.parent.element, Browser.touchMoveEvent, this.resizing, this);\n this.updateCursor('add');\n }\n }\n }\n };\n Resize.prototype.cancelResizeAction = function (removeEvents) {\n if (removeEvents) {\n EventHandler.remove(this.parent.element, Browser.touchMoveEvent, this.resizing);\n EventHandler.remove(document, Browser.touchEndEvent, this.resizeEnd);\n this.updateCursor('remove');\n }\n if (Browser.isDevice && !isNullOrUndefined(this.helper)) {\n EventHandler.remove(document, Browser.touchStartEvent, this.removeHelper);\n EventHandler.remove(this.helper, Browser.touchStartEvent, this.resizeStart);\n }\n if (!isNullOrUndefined(this.helper)) {\n detach(this.helper);\n }\n this.refresh();\n };\n Resize.prototype.getWidth = function (width, minWidth, maxWidth) {\n if (minWidth && width < minWidth) {\n return minWidth;\n }\n else if ((maxWidth && width > maxWidth)) {\n return maxWidth;\n }\n else {\n return width;\n }\n };\n Resize.prototype.updateResizeEleHeight = function () {\n var elements = [].slice.call(this.parent.getHeaderContent().getElementsByClassName('e-rhandler'));\n for (var i = 0; i < elements.length; i++) {\n elements[parseInt(i.toString(), 10)].style.height = this.element.parentElement.offsetHeight + 'px';\n }\n };\n Resize.prototype.getColData = function (column, mousemove) {\n return {\n width: parseFloat(isNullOrUndefined(this.widthService.getWidth(column)) || this.widthService.getWidth(column) === 'auto' ? '0'\n : this.widthService.getWidth(column).toString()) + mousemove,\n minWidth: column.minWidth ? parseFloat(column.minWidth.toString()) : null,\n maxWidth: column.maxWidth ? parseFloat(column.maxWidth.toString()) : null\n };\n };\n Resize.prototype.refreshResizeFixedCols = function (pos) {\n var cols = this.parent.getColumns();\n var translateX = this.parent.enableColumnVirtualization ? this.parent.translateX : 0;\n var th = [].slice.call(this.parent.getHeaderContent().querySelector('tbody').querySelectorAll('.e-fixedfreeze')).concat([].slice.call(this.parent.getContent().querySelectorAll('.e-fixedfreeze')));\n for (var i = 0; i < th.length; i++) {\n var node = th[parseInt(i.toString(), 10)];\n var column = void 0;\n if (node.classList.contains('e-summarycell')) {\n var uid = node.getAttribute('e-mappinguid');\n column = this.parent.getColumnByUid(uid);\n }\n else {\n var index = parseInt(node.getAttribute('data-colindex'), 10);\n column = cols[parseInt(index.toString(), 10)];\n }\n var width = 0;\n if (pos === 'Left') {\n if (this.parent.getVisibleFrozenLeftCount()) {\n width = this.parent.getIndentCount() * 30;\n }\n else if (this.parent.getFrozenMode() === 'Right') {\n width = this.parent.groupSettings.columns.length * 30;\n }\n for (var j = 0; j < cols.length; j++) {\n if (column.index > cols[parseInt(j.toString(), 10)].index) {\n if (column.uid === cols[parseInt(j.toString(), 10)].uid) {\n break;\n }\n if ((cols[parseInt(j.toString(), 10)].freeze === 'Left' || cols[parseInt(j.toString(), 10)].isFrozen) ||\n cols[parseInt(j.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(j.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(j.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, ((width === 0 ? width : width - 1) - translateX), this.parent.enableRtl, 'Left');\n }\n if (pos === 'Right') {\n width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var j = cols.length - 1; j >= 0; j--) {\n if (column.uid === cols[parseInt(j.toString(), 10)].uid) {\n break;\n }\n if (cols[parseInt(j.toString(), 10)].freeze === 'Right' || cols[parseInt(j.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(j.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(j.toString(), 10)].width.toString());\n }\n }\n }\n var colSpanwidth = 0;\n if (node.colSpan > 1) {\n colSpanwidth = this.calculateColspanWidth(cols, node, column.index);\n }\n applyStickyLeftRightPosition(node, (width - colSpanwidth) + translateX, this.parent.enableRtl, 'Right');\n }\n }\n };\n Resize.prototype.calculateColspanWidth = function (cols, node, index) {\n var width = 0;\n for (var j = index + 1; j < index + node.colSpan; j++) {\n width += parseInt(cols[parseInt(j.toString(), 10)].width.toString(), 10);\n }\n return width;\n };\n Resize.prototype.refreshResizePosition = function () {\n this.refreshResizefrzCols(true);\n };\n Resize.prototype.refreshResizefrzCols = function (freezeRefresh, isAutoFitCol) {\n var _this = this;\n var translateX = this.parent.enableColumnVirtualization ? this.parent.translateX : 0;\n if (freezeRefresh || ((this.column.freeze === 'Left' || this.column.isFrozen) ||\n (this.column.columns && frozenDirection(this.column) === 'Left'))) {\n var width_1 = this.parent.getIndentCount() * 30;\n var columns = this.parent.getColumns().filter(function (col) { return col.freeze === 'Left' || col.isFrozen; });\n if (!freezeRefresh || isAutoFitCol) {\n this.frzHdrRefresh('Left');\n }\n for (var i = 0; i < columns.length; i++) {\n if (freezeRefresh || (columns[parseInt(i.toString(), 10)].index > this.column.index)) {\n var elements = [];\n if (this.parent.frozenRows) {\n elements = [].slice.call(this.parent.getHeaderContent().querySelectorAll('td[data-colindex=\"' + i + '\"]')).concat([].slice.call(this.parent.getContent().querySelectorAll('td[data-colindex=\"' + i + '\"]')));\n }\n else {\n elements = [].slice.call(this.parent.getContent().querySelectorAll('td[data-colindex=\"' + i + '\"]'));\n }\n elements.filter(function (cell) {\n applyStickyLeftRightPosition(cell, width_1 - translateX, _this.parent.enableRtl, 'Left');\n });\n if (this.parent.enableColumnVirtualization) {\n columns[parseInt(i.toString(), 10)].valueX = width_1;\n }\n }\n if (columns[parseInt(i.toString(), 10)].visible) {\n width_1 += parseFloat(columns[parseInt(i.toString(), 10)].width.toString());\n }\n }\n this.refreshResizeFixedCols('Left');\n }\n if (freezeRefresh || (this.column.freeze === 'Right' || (this.column.columns && frozenDirection(this.column) === 'Right'))) {\n var width_2 = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n var columns_1 = this.parent.getColumns();\n if (!freezeRefresh || isAutoFitCol) {\n this.frzHdrRefresh('Right');\n }\n var columnsRight = columns_1.filter(function (col) { return col.freeze === 'Right'; });\n var _loop_1 = function (i) {\n var elements = [];\n if (this_1.parent.frozenRows) {\n elements = [].slice.call(this_1.parent.getHeaderContent().querySelectorAll('td[data-colindex=\"' + i + '\"]')).concat([].slice.call(this_1.parent.getContent().querySelectorAll('td[data-colindex=\"' + i + '\"]')));\n }\n else {\n elements = [].slice.call(this_1.parent.getContent().querySelectorAll('td[data-colindex=\"' + i + '\"]'));\n }\n elements.filter(function (cell) {\n var colSpanwidth = 0;\n if (cell.colSpan > 1) {\n colSpanwidth = _this.calculateColspanWidth(columns_1, cell, columns_1[parseInt(i.toString(), 10)].index);\n }\n applyStickyLeftRightPosition(cell, (width_2 - colSpanwidth) + translateX, _this.parent.enableRtl, 'Right');\n });\n if (this_1.parent.enableColumnVirtualization) {\n columns_1[parseInt(i.toString(), 10)].valueX = width_2;\n }\n if (columns_1[parseInt(i.toString(), 10)].visible) {\n width_2 = width_2 + parseFloat(columns_1[parseInt(i.toString(), 10)].width.toString());\n }\n };\n var this_1 = this;\n for (var i = columns_1.length - 1; i >= columns_1.length - columnsRight.length; i--) {\n _loop_1(i);\n }\n this.refreshResizeFixedCols('Right');\n }\n if (this.column && (this.column.freeze === 'Fixed' || (this.column.columns && frozenDirection(this.column) === 'Fixed'))) {\n this.refreshResizeFixedCols('Left');\n this.refreshResizeFixedCols('Right');\n this.frzHdrRefresh('Left');\n this.frzHdrRefresh('Right');\n }\n if (this.parent.groupSettings.columns.length && this.parent.aggregates.length &&\n this.parent.getContent().querySelector('.e-groupcaptionrow')) {\n this.refreshGroupCaptionRow();\n }\n };\n Resize.prototype.refreshGroupCaptionRow = function () {\n var capRow = [].slice.call(this.parent.getContent().querySelectorAll('.e-groupcaptionrow'));\n for (var i = 0; i < capRow.length; i++) {\n var tr = capRow[parseInt(i.toString(), 10)];\n if (tr.querySelector('.e-summarycell')) {\n groupCaptionRowLeftRightPos(tr, this.parent);\n }\n }\n };\n Resize.prototype.frzHdrRefresh = function (pos) {\n var _this = this;\n var translateX = this.parent.enableColumnVirtualization ? this.parent.translateX : 0;\n if (pos === 'Left') {\n var tr = [].slice.call(this.parent.getHeaderContent().querySelector('thead').querySelectorAll('tr'));\n for (var i = 0; i < tr.length; i++) {\n var th = [].slice.call(tr[parseInt(i.toString(), 10)].querySelectorAll('.e-leftfreeze,.e-fixedfreeze'));\n var _loop_2 = function (j) {\n var node = th[parseInt(j.toString(), 10)];\n if (node.classList.contains('e-rowdragheader') || node.classList.contains('e-dragheadercell') ||\n node.classList.contains('e-grouptopleftcell')) {\n return \"continue\";\n }\n var column = this_2.getParticularCol(node);\n var cols = this_2.parent.getColumns();\n var width = 0;\n var summarycell = [];\n if (this_2.parent.aggregates.length && this_2.parent.getFooterContent()) {\n if (this_2.parent.getContent().querySelectorAll('.e-summaryrow').length) {\n var summaryRows = [].slice.call(this_2.parent.getContent().querySelectorAll('.e-summaryrow'));\n summaryRows.filter(function (row) {\n summarycell.push(row.querySelector('[e-mappinguid=\"' + column.uid + '\"]'));\n });\n }\n summarycell = summarycell.concat([].slice.call(this_2.parent.getFooterContent().querySelectorAll('[e-mappinguid=\"' + column.uid + '\"]')));\n }\n if (node.classList.contains('e-fixedfreeze')) {\n if (this_2.parent.getVisibleFrozenLeftCount()) {\n width = this_2.parent.getIndentCount() * 30;\n }\n else if (this_2.parent.getFrozenMode() === 'Right') {\n width = this_2.parent.groupSettings.columns.length * 30;\n }\n for (var w = 0; w < cols.length; w++) {\n if (column.index > cols[parseInt(w.toString(), 10)].index) {\n if (column.uid === cols[parseInt(w.toString(), 10)].uid) {\n break;\n }\n if ((cols[parseInt(w.toString(), 10)].freeze === 'Left' || cols[parseInt(w.toString(), 10)].isFrozen) ||\n cols[parseInt(w.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(w.toString(), 10)].visible) {\n width += parseInt(cols[parseInt(w.toString(), 10)].width.toString(), 10);\n }\n }\n }\n }\n if (summarycell && summarycell.length) {\n summarycell.filter(function (cell) {\n applyStickyLeftRightPosition(cell, width - translateX, _this.parent.enableRtl, 'Left');\n });\n }\n applyStickyLeftRightPosition(node, ((width === 0 ? width : width - 1) - translateX), this_2.parent.enableRtl, 'Left');\n }\n else {\n width = this_2.parent.getIndentCount() * 30;\n if (column.index === 0) {\n if (summarycell && summarycell.length) {\n summarycell.filter(function (cell) {\n applyStickyLeftRightPosition(cell, width - translateX, _this.parent.enableRtl, 'Left');\n });\n }\n applyStickyLeftRightPosition(node, width - translateX, this_2.parent.enableRtl, 'Left');\n if (this_2.parent.enableColumnVirtualization) {\n column.valueX = width;\n }\n }\n else {\n for (var k = 0; k < cols.length; k++) {\n if (column.index < cols[parseInt(k.toString(), 10)].index ||\n column.uid === cols[parseInt(k.toString(), 10)].uid) {\n break;\n }\n if (cols[parseInt(k.toString(), 10)].visible) {\n width += parseInt(cols[parseInt(k.toString(), 10)].width.toString(), 10);\n }\n }\n if (summarycell && summarycell.length) {\n summarycell.filter(function (cell) {\n applyStickyLeftRightPosition(cell, width - translateX, _this.parent.enableRtl, 'Left');\n });\n }\n applyStickyLeftRightPosition(node, width - translateX, this_2.parent.enableRtl, 'Left');\n if (this_2.parent.enableColumnVirtualization) {\n column.valueX = width;\n }\n }\n }\n };\n var this_2 = this;\n for (var j = 0; j < th.length; j++) {\n _loop_2(j);\n }\n }\n }\n if (pos === 'Right') {\n var tr = [].slice.call(this.parent.getHeaderContent().querySelector('thead').querySelectorAll('tr'));\n for (var i = 0; i < tr.length; i++) {\n var th = [].slice.call(tr[parseInt(i.toString(), 10)].querySelectorAll('.e-rightfreeze, .e-fixedfreeze'));\n var _loop_3 = function (j) {\n var node = th[parseInt(j.toString(), 10)];\n var column = this_3.getParticularCol(node);\n var cols = this_3.parent.getColumns();\n var width = 0;\n var summarycell = [];\n if (this_3.parent.aggregates.length && this_3.parent.getFooterContent()) {\n if (this_3.parent.getContent().querySelectorAll('.e-summaryrow').length) {\n var summaryRows = [].slice.call(this_3.parent.getContent().querySelectorAll('.e-summaryrow'));\n summaryRows.filter(function (row) {\n summarycell.push(row.querySelector('[e-mappinguid=\"' + column.uid + '\"]'));\n });\n }\n summarycell = summarycell.concat([].slice.call(this_3.parent.getFooterContent().querySelectorAll('[e-mappinguid=\"' + column.uid + '\"]')));\n }\n if (node.classList.contains('e-fixedfreeze')) {\n width = this_3.parent.getFrozenMode() === 'Right' && this_3.parent.isRowDragable() ? 30 : 0;\n for (var w = cols.length - 1; w >= 0; w--) {\n if (column.index < cols[parseInt(w.toString(), 10)].index) {\n if ((column.columns && isChildColumn(column, cols[parseInt(w.toString(), 10)].uid)) ||\n column.index > cols[parseInt(w.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(w.toString(), 10)].freeze === 'Right' ||\n cols[parseInt(w.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(w.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(w.toString(), 10)].width.toString());\n }\n }\n }\n }\n if (summarycell.length) {\n summarycell.filter(function (cell) {\n applyStickyLeftRightPosition(cell, width + translateX, _this.parent.enableRtl, 'Right');\n });\n }\n applyStickyLeftRightPosition(node, width + translateX, this_3.parent.enableRtl, 'Right');\n }\n else {\n width = this_3.parent.getFrozenMode() === 'Right' && this_3.parent.isRowDragable() ? 30 : 0;\n for (var k = cols.length - 1; k >= 0; k--) {\n if ((column.columns && isChildColumn(column, cols[parseInt(k.toString(), 10)].uid)) ||\n column.index > cols[parseInt(k.toString(), 10)].index ||\n column.uid === cols[parseInt(k.toString(), 10)].uid) {\n break;\n }\n if (cols[parseInt(k.toString(), 10)].visible) {\n width += parseInt(cols[parseInt(k.toString(), 10)].width.toString(), 10);\n }\n }\n if (summarycell.length) {\n summarycell.filter(function (cell) {\n applyStickyLeftRightPosition(cell, width + translateX, _this.parent.enableRtl, 'Right');\n });\n }\n applyStickyLeftRightPosition(node, width + translateX, this_3.parent.enableRtl, 'Right');\n if (this_3.parent.enableColumnVirtualization) {\n column.valueX = width;\n }\n }\n };\n var this_3 = this;\n for (var j = th.length - 1; j >= 0; j--) {\n _loop_3(j);\n }\n }\n }\n };\n Resize.prototype.getParticularCol = function (node) {\n var uid = node.classList.contains('e-filterbarcell') ? node.getAttribute('e-mappinguid') :\n node.querySelector('[e-mappinguid]').getAttribute('e-mappinguid');\n return this.parent.getColumnByUid(uid);\n };\n Resize.prototype.resizing = function (e) {\n if (isNullOrUndefined(this.column)) {\n return;\n }\n if (this.parent.isFrozenGrid()) {\n this.refreshResizefrzCols();\n }\n var offsetWidth = 0;\n if (isNullOrUndefined(this.column)) {\n offsetWidth = parentsUntil(this.element, 'th').offsetWidth;\n }\n if (this.parent.allowTextWrap) {\n this.updateResizeEleHeight();\n this.setHelperHeight();\n }\n var pageX = this.getPointX(e);\n var mousemove = this.parent.enableRtl ? -(pageX - this.pageX) : (pageX - this.pageX);\n var colData = this.getColData(this.column, mousemove);\n if (!colData.width) {\n colData.width = closest(this.element, 'th').offsetWidth;\n }\n var width = this.getWidth(colData.width, colData.minWidth, colData.maxWidth);\n this.parent.log('resize_min_max', { column: this.column, width: width });\n if (((!this.parent.enableRtl && this.minMove >= pageX) || (this.parent.enableRtl && this.minMove <= pageX))) {\n width = this.column.minWidth ? parseFloat(this.column.minWidth.toString()) : 10;\n this.pageX = pageX = this.minMove;\n }\n if (width !== parseFloat(isNullOrUndefined(this.column.width) || this.column.width === 'auto' ?\n offsetWidth.toString() : this.column.width.toString())) {\n this.pageX = pageX;\n this.column.width = formatUnit(width);\n var args = {\n e: e,\n column: this.column\n };\n this.parent.trigger(events.onResize, args);\n if (args.cancel) {\n this.cancelResizeAction(true);\n return;\n }\n var columns = [this.column];\n var finalColumns = [this.column];\n if (this.column.columns) {\n columns = this.getSubColumns(this.column, []);\n columns = this.calulateColumnsWidth(columns, false, mousemove);\n finalColumns = this.calulateColumnsWidth(columns, true, mousemove);\n }\n this.resizeProcess = true;\n for (var _i = 0, finalColumns_1 = finalColumns; _i < finalColumns_1.length; _i++) {\n var col = finalColumns_1[_i];\n this.widthService.setColumnWidth(col, null, 'resize');\n }\n this.resizeProcess = false;\n this.updateHelper();\n }\n this.isDblClk = false;\n };\n Resize.prototype.calulateColumnsWidth = function (columns, isUpdate, mousemove) {\n var finalColumns = [];\n for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {\n var col = columns_2[_i];\n var totalWidth = 0;\n for (var i = 0; i < columns.length; i++) {\n totalWidth += parseFloat(columns[parseInt(i.toString(), 10)].width.toString());\n }\n var colData = this.getColData(col, (parseFloat(col.width)) * mousemove / totalWidth);\n var colWidth = this.getWidth(colData.width, colData.minWidth, colData.maxWidth);\n if ((colWidth !== parseFloat(col.width.toString()))) {\n if (isUpdate) {\n col.width = formatUnit(colWidth < 1 ? 1 : colWidth);\n }\n finalColumns.push(col);\n }\n }\n return finalColumns;\n };\n Resize.prototype.getSubColumns = function (column, subColumns) {\n for (var _i = 0, _a = column.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.visible !== false && col.allowResizing) {\n if (col.columns) {\n this.getSubColumns(col, subColumns);\n }\n else {\n subColumns.push(col);\n }\n }\n }\n return subColumns;\n };\n Resize.prototype.resizeEnd = function (e) {\n if (!this.helper || this.parent.isDestroyed) {\n return;\n }\n var gObj = this.parent;\n EventHandler.remove(this.parent.element, Browser.touchMoveEvent, this.resizing);\n EventHandler.remove(document, Browser.touchEndEvent, this.resizeEnd);\n this.updateCursor('remove');\n detach(this.helper);\n var args = { e: e, column: this.column };\n var content = this.parent.getContent().querySelector('.' + literals.content);\n var cTable = content;\n if (cTable.scrollHeight > cTable.clientHeight) {\n this.parent.scrollModule.setPadding();\n cTable.style.overflowY = 'scroll';\n }\n this.parent.trigger(events.resizeStop, args);\n closest(this.element, '.e-headercell').classList.add('e-resized');\n this.isFrozenColResized = false;\n if (this.parent.allowTextWrap) {\n this.updateResizeEleHeight();\n this.parent.notify(events.textWrapRefresh, { case: 'textwrap' });\n }\n var headerTable = gObj.getHeaderTable();\n var contentTable = gObj.getContentTable();\n var footerTable;\n if (!isNullOrUndefined(gObj.getFooterContent())) {\n footerTable = gObj.getFooterContentTable();\n }\n var tableWidth = headerTable.offsetWidth;\n var contentwidth = (gObj.getContent().scrollWidth);\n if (contentwidth > tableWidth) {\n if (!isNullOrUndefined(contentTable.querySelector('.e-emptyrow'))) {\n addClass([headerTable], ['e-tableborder']);\n removeClass([contentTable], ['e-tableborder']);\n }\n else {\n addClass([headerTable, contentTable], ['e-tableborder']);\n }\n }\n else {\n removeClass([headerTable, contentTable], ['e-tableborder']);\n }\n if (!isNullOrUndefined(footerTable)) {\n footerTable.classList.add('e-tableborder');\n }\n this.refresh();\n this.doubleTapEvent(e);\n this.isDblClk = true;\n };\n Resize.prototype.getPointX = function (e) {\n if (e.touches && e.touches.length) {\n return e.touches[0].pageX;\n }\n else {\n return e.pageX;\n }\n };\n Resize.prototype.refreshColumnWidth = function () {\n var columns = this.parent.getColumns();\n for (var _i = 0, _a = [].slice.apply(this.parent.getHeaderContent().querySelectorAll('th.e-headercell')); _i < _a.length; _i++) {\n var ele = _a[_i];\n for (var _b = 0, columns_3 = columns; _b < columns_3.length; _b++) {\n var column = columns_3[_b];\n if (ele.querySelector('[e-mappinguid]') &&\n ele.querySelector('[e-mappinguid]').getAttribute('e-mappinguid') === column.uid && column.visible) {\n column.width = ele.getBoundingClientRect().width;\n break;\n }\n }\n }\n return columns;\n };\n Resize.prototype.refreshStackedColumnWidth = function () {\n for (var _i = 0, _a = this.parent.getStackedColumns(this.parent.columns); _i < _a.length; _i++) {\n var stackedColumn = _a[_i];\n stackedColumn.width = this.getStackedWidth(stackedColumn, 0);\n }\n };\n Resize.prototype.getStackedWidth = function (column, width) {\n for (var _i = 0, _a = column.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.visible !== false) {\n if (col.columns) {\n width = this.getStackedWidth(col, width);\n }\n else {\n width += parseFloat(col.width.toString());\n }\n }\n }\n return width;\n };\n Resize.prototype.getTargetColumn = function (e) {\n var cell = closest(e.target, resizeClassList.header);\n cell = cell.querySelector('.e-headercelldiv') || cell.querySelector('.e-stackedheadercelldiv');\n var uid = cell.getAttribute('e-mappinguid');\n return this.parent.getColumnByUid(uid);\n };\n Resize.prototype.updateCursor = function (action) {\n var headerRows = [].slice.call(this.parent.getHeaderContent().querySelectorAll('th'));\n headerRows.push(this.parent.element);\n for (var _i = 0, headerRows_1 = headerRows; _i < headerRows_1.length; _i++) {\n var row = headerRows_1[_i];\n row.classList[\"\" + action](resizeClassList.cursor);\n }\n };\n Resize.prototype.refresh = function () {\n this.column = null;\n this.pageX = null;\n this.element = null;\n this.helper = null;\n };\n Resize.prototype.appendHelper = function () {\n this.helper = this.parent.createElement('div', {\n className: resizeClassList.helper\n });\n this.parent.element.appendChild(this.helper);\n this.setHelperHeight();\n };\n Resize.prototype.setHelperHeight = function () {\n var height = this.parent.getContent().offsetHeight - this.getScrollBarWidth();\n var rect = closest(this.element, resizeClassList.header);\n var tr = [].slice.call(this.parent.getHeaderContent().querySelectorAll('tr'));\n for (var i = tr.indexOf(rect.parentElement); i < tr.length && i > -1; i++) {\n height += tr[parseInt(i.toString(), 10)].offsetHeight;\n }\n var pos = this.calcPos(rect);\n pos.left += (this.parent.enableRtl ? 0 - 1 : rect.offsetWidth - 2);\n this.helper.style.cssText = 'height: ' + height + 'px; top: ' + pos.top + 'px; left:' + Math.floor(pos.left) + 'px;';\n if (this.parent.enableVirtualization) {\n this.helper.classList.add('e-virtual-rhandler');\n }\n };\n Resize.prototype.getScrollBarWidth = function (height) {\n var ele = this.parent.getContent().firstChild;\n return (ele.scrollHeight > ele.clientHeight && height) ||\n ele.scrollWidth > ele.clientWidth ? getScrollBarWidth() : 0;\n };\n Resize.prototype.removeHelper = function (e) {\n var cls = e.target.classList;\n if (!(cls.contains(resizeClassList.root) || cls.contains(resizeClassList.icon)) && this.helper) {\n EventHandler.remove(document, Browser.touchStartEvent, this.removeHelper);\n EventHandler.remove(this.helper, Browser.touchStartEvent, this.resizeStart);\n detach(this.helper);\n this.refresh();\n }\n };\n Resize.prototype.updateHelper = function () {\n var rect = closest(this.element, resizeClassList.header);\n var left;\n left = Math.floor(this.calcPos(rect).left + (this.parent.enableRtl ? 0 - 1 : rect.offsetWidth - 2));\n var borderWidth = 2; // to maintain the helper inside of grid element.\n if (left > this.parentElementWidth) {\n left = this.parentElementWidth - borderWidth;\n }\n this.helper.style.left = left + 'px';\n };\n Resize.prototype.calcPos = function (elem) {\n var parentOffset = {\n top: 0,\n left: 0\n };\n var offset = elem.getBoundingClientRect();\n var doc = elem.ownerDocument;\n var offsetParent = parentsUntil(elem, 'e-grid') || doc.documentElement;\n while (offsetParent &&\n (offsetParent === doc.body || offsetParent === doc.documentElement) &&\n offsetParent.style.position === 'static') {\n offsetParent = offsetParent.parentNode;\n }\n if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {\n parentOffset = offsetParent.getBoundingClientRect();\n }\n return {\n top: offset.top - parentOffset.top,\n left: offset.left - parentOffset.left\n };\n };\n Resize.prototype.doubleTapEvent = function (e) {\n var _this = this;\n if (this.getUserAgent() && this.isDblClk) {\n if (!this.tapped) {\n this.tapped = setTimeout(function () {\n _this.tapped = null;\n }, 300);\n }\n else {\n clearTimeout(this.tapped);\n this.callAutoFit(e);\n this.tapped = null;\n }\n }\n };\n Resize.prototype.getUserAgent = function () {\n var userAgent = Browser.userAgent.toLowerCase();\n return /iphone|ipod|ipad/.test(userAgent);\n };\n Resize.prototype.timeoutHandler = function () {\n this.tapped = null;\n };\n return Resize;\n}());\nexport { Resize };\n","import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { closest as closestElement, removeClass, classList, remove } from '@syncfusion/ej2-base';\nimport { getElementIndex, inArray, parentsUntil, getPosition, isActionPrevent } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n *\n * The `Reorder` module is used for reordering columns.\n */\nvar Reorder = /** @class */ (function () {\n /**\n * Constructor for the Grid reorder module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Reorder(parent) {\n this.idx = 0;\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.reorderComplete, this.onActionComplete, this);\n this.parent.on(events.columnDrag, this.drag, this);\n this.parent.on(events.columnDragStart, this.dragStart, this);\n this.parent.on(events.columnDragStop, this.dragStop, this);\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.headerRefreshed, this.createReorderElement, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n Reorder.prototype.chkDropPosition = function (srcElem, destElem) {\n var col = this.parent.getColumnByUid(destElem.firstElementChild.getAttribute('e-mappinguid'));\n var bool = col ? !col.lockColumn : true;\n return ((srcElem.parentElement.isEqualNode(destElem.parentElement) || this.parent.enableColumnVirtualization)\n || (this.parent.isFrozenGrid()\n && Array.prototype.indexOf.call(closestElement(srcElem, 'thead').children, srcElem.parentElement)\n === Array.prototype.indexOf.call(closestElement(destElem, 'thead').children, destElem.parentElement)))\n && this.targetParentContainerIndex(srcElem, destElem) > -1 && bool;\n };\n Reorder.prototype.chkDropAllCols = function (srcElem, destElem) {\n var isFound;\n var headers = this.getHeaderCells();\n var header;\n while (!isFound && headers.length > 0) {\n header = headers.pop();\n isFound = srcElem !== header && this.targetParentContainerIndex(srcElem, destElem) > -1;\n }\n return isFound;\n };\n Reorder.prototype.findColParent = function (col, cols, parent) {\n // eslint-disable-next-line no-self-assign\n parent = parent;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (col === cols[parseInt(i.toString(), 10)]) {\n return true;\n }\n else if (cols[parseInt(i.toString(), 10)].columns) {\n var cnt = parent.length;\n parent.push(cols[parseInt(i.toString(), 10)]);\n if (!this.findColParent(col, cols[parseInt(i.toString(), 10)].columns, parent)) {\n parent.splice(cnt, parent.length - cnt);\n }\n else {\n return true;\n }\n }\n }\n return false;\n };\n Reorder.prototype.getColumnsModel = function (cols, isNotStackedHeader) {\n var columnModel = [];\n var subCols = [];\n for (var i = 0, len = cols.length; i < len; i++) {\n if (!isNullOrUndefined(cols[parseInt(i.toString(), 10)])) {\n if (cols[parseInt(i.toString(), 10)].visible) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n else if (isNotStackedHeader) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n if (cols[parseInt(i.toString(), 10)].columns) {\n subCols = subCols.concat(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n }\n if (subCols.length) {\n columnModel = columnModel.concat(this.getColumnsModel(subCols));\n }\n return columnModel;\n };\n Reorder.prototype.headerDrop = function (e) {\n var gObj = this.parent;\n var dropElement = this.element.querySelector('.e-headercelldiv') || this.element.querySelector('.e-stackedheadercelldiv');\n var uId = dropElement.getAttribute('e-mappinguid');\n var column = gObj.getColumnByUid(uId);\n if (!closestElement(e.target, 'th') || (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column });\n return;\n }\n var destElem = closestElement(e.target, '.e-headercell');\n var destElemDiv = destElem.querySelector('.e-headercelldiv') || destElem.querySelector('.e-stackedheadercelldiv');\n var destElemUid = destElemDiv.getAttribute('e-mappinguid');\n if (!isNullOrUndefined(destElemUid)) {\n var destColumn = gObj.getColumnByUid(destElemUid);\n if (isNullOrUndefined(destColumn) || !destColumn.allowReordering || destColumn.lockColumn) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column, destColumn: destColumn });\n return;\n }\n }\n if (destElem && !(!this.chkDropPosition(this.element, destElem) || !this.chkDropAllCols(this.element, destElem))) {\n if (this.parent.enableColumnVirtualization) {\n var columns = this.parent.columns;\n var sourceUid_1 = this.element.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n var col = this.parent.columns.filter(function (col) { return col.uid === sourceUid_1; });\n var colMatchIndex_1 = null;\n var column_1 = col[0];\n var destUid_1 = destElem.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n columns.some(function (col, index) {\n if (col.uid === destUid_1) {\n colMatchIndex_1 = index;\n return col.uid === destUid_1;\n }\n return false;\n });\n if (!isNullOrUndefined(colMatchIndex_1)) {\n this.moveColumns(colMatchIndex_1, column_1);\n }\n }\n else {\n var newIndex = this.targetParentContainerIndex(this.element, destElem);\n var uid = this.element.firstElementChild.getAttribute('e-mappinguid');\n this.destElement = destElem;\n this.parent.notify(events.setReorderDestinationElement, { ele: destElem });\n if (uid) {\n this.moveColumns(newIndex, this.parent.getColumnByUid(uid));\n }\n else {\n var headers = this.getHeaderCells();\n var oldIdx = getElementIndex(this.element, headers);\n var columns = this.getColumnsModel(this.parent.columns);\n this.moveColumns(newIndex, columns[parseInt(oldIdx.toString(), 10)]);\n }\n }\n }\n };\n Reorder.prototype.isActionPrevent = function (gObj) {\n return isActionPrevent(gObj);\n };\n Reorder.prototype.moveColumns = function (destIndex, column, reorderByColumn, preventRefresh) {\n var gObj = this.parent;\n if (this.isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.moveColumns, arg1: destIndex, arg2: column });\n return;\n }\n var parent = this.getColParent(column, this.parent.columns);\n var cols = parent ? parent.columns : this.parent.columns;\n var srcIdx = inArray(column, cols);\n if ((parent || this.parent.lockcolPositionCount) && !reorderByColumn &&\n !this.parent.enableColumnVirtualization) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === column.field) {\n srcIdx = i;\n break;\n }\n }\n var col = this.parent.getColumnByUid(this.destElement.firstElementChild.getAttribute('e-mappinguid'));\n if (col) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === col.field) {\n destIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].headerText === this.destElement.innerText.trim()) {\n destIndex = i;\n }\n }\n }\n }\n if (!gObj.allowReordering || srcIdx === destIndex || srcIdx === -1 || destIndex === -1) {\n return;\n }\n cols.splice(destIndex, 0, cols.splice(srcIdx, 1)[0]);\n var args = { column: column, destIndex: destIndex, columns: cols, parent: parent, cancel: false };\n gObj.notify(events.refreshFrozenColumns, args);\n if (args.cancel) {\n return;\n }\n if (this.parent.isFrozenGrid()) {\n if (this.parent.frozenColumns) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].freeze === 'Left') {\n cols[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n }\n else {\n if (this.parent.getFrozenLeftCount() > destIndex) {\n column.freeze = 'Left';\n }\n else if ((cols.length - this.parent.getFrozenRightColumnsCount()) <= destIndex) {\n column.freeze = 'Right';\n }\n else {\n column.freeze = column.freeze === 'Fixed' ? 'Fixed' : undefined;\n }\n }\n }\n gObj.getColumns(true);\n gObj.notify(events.columnPositionChanged, { fromIndex: destIndex, toIndex: srcIdx });\n if (preventRefresh !== false) {\n gObj.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'reorder', fromIndex: destIndex, toIndex: srcIdx, toColumnUid: column.uid\n });\n }\n if (this.parent.isFrozenGrid()) {\n var cols_1 = this.parent.columns;\n this.idx = 0;\n this.refreshColumnIndex(cols_1);\n this.parent.notify(events.refreshFrozenPosition, {});\n }\n };\n Reorder.prototype.refreshColumnIndex = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].index = this.idx;\n this.idx++;\n if (cols[parseInt(i.toString(), 10)].columns && cols[parseInt(i.toString(), 10)].columns.length) {\n this.refreshColumnIndex(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n };\n Reorder.prototype.targetParentContainerIndex = function (srcElem, destElem) {\n var cols = this.parent.columns;\n var headers = this.getHeaderCells();\n var stackedHdrColumn = this.parent.getStackedColumns(cols);\n var stackedCols = [];\n if (stackedHdrColumn.length) {\n stackedCols = this.getAllStackedheaderParentColumns(headers);\n }\n var flatColumns = stackedHdrColumn.length && stackedCols.length ?\n this.getColumnsModel(stackedCols) : this.getColumnsModel(cols, true);\n var parent = this.getColParent(flatColumns[getElementIndex(srcElem, headers)], cols);\n cols = parent ? parent.columns : cols;\n return inArray(flatColumns[getElementIndex(destElem, headers)], cols);\n };\n Reorder.prototype.getAllStackedheaderParentColumns = function (headers) {\n var stackedCols = [];\n for (var i = 0; i < headers.length; i++) {\n if (headers[parseInt(i.toString(), 10)].classList.contains('e-hide')) {\n headers.splice(i, 1);\n i--;\n }\n else if (headers[parseInt(i.toString(), 10)].closest('thead').firstChild === headers[parseInt(i.toString(), 10)].parentElement) {\n stackedCols.push(this.parent.getColumnByUid(headers[parseInt(i.toString(), 10)].firstElementChild.getAttribute('e-mappinguid')));\n }\n }\n return stackedCols;\n };\n Reorder.prototype.getHeaderCells = function () {\n return [].slice.call(this.parent.element.getElementsByClassName('e-headercell'));\n };\n Reorder.prototype.getColParent = function (column, columns) {\n var parents = [];\n this.findColParent(column, columns, parents);\n return parents[parents.length - 1];\n };\n Reorder.prototype.reorderSingleColumn = function (fromFName, toFName) {\n var fColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === fromFName; })[0]\n : this.parent.getColumnByField(fromFName);\n var toColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === toFName; })[0]\n : this.parent.getColumnByField(toFName);\n if ((!isNullOrUndefined(fColumn) && (!fColumn.allowReordering || fColumn.lockColumn)) ||\n (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: fColumn, destColumn: toColumn });\n return;\n }\n var column = toColumn;\n var parent = this.getColParent(column, this.parent.columns);\n var columns = parent ? parent.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, fColumn, true);\n }\n };\n Reorder.prototype.reorderMultipleColumns = function (fromFNames, toFName) {\n var toIndex = this.parent.getColumnIndexByField(toFName);\n var toColumn = this.parent.getColumnByField(toFName);\n if (toIndex < 0 || (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n return;\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn)) {\n return;\n }\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByIndex(toIndex);\n var parent_1 = this.getColParent(column, this.parent.columns);\n var columns = parent_1 ? parent_1.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]), true, true);\n }\n if (this.parent.getColumnIndexByField(fromFNames[i + 1]) >= destIndex) {\n toIndex++; //R to L\n }\n }\n };\n Reorder.prototype.moveTargetColumn = function (column, toIndex) {\n if (toIndex > -1) {\n this.moveColumns(toIndex, column, true);\n }\n };\n Reorder.prototype.reorderSingleColumnByTarget = function (fieldName, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByField(fieldName), toIndex);\n };\n Reorder.prototype.reorderMultipleColumnByTarget = function (fieldName, toIndex) {\n for (var i = 0; i < fieldName.length; i++) {\n this.reorderSingleColumnByTarget(fieldName[parseInt(i.toString(), 10)], toIndex);\n }\n };\n /**\n * Changes the position of the Grid columns by field names.\n *\n * @param {string | string[]} fromFName - Defines the origin field names.\n * @param {string} toFName - Defines the destination field name.\n * @returns {void}\n */\n Reorder.prototype.reorderColumns = function (fromFName, toFName) {\n if (typeof fromFName === 'string') {\n this.reorderSingleColumn(fromFName, toFName);\n this.fromCol = fromFName;\n }\n else {\n this.reorderMultipleColumns(fromFName, toFName);\n this.fromCol = fromFName[0];\n }\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByIndex(fromIndex), toIndex);\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {string | string[]} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (typeof fieldName === 'string') {\n this.reorderSingleColumnByTarget(fieldName, toIndex);\n }\n else {\n this.reorderMultipleColumnByTarget(fieldName, toIndex);\n }\n };\n Reorder.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.createReorderElement();\n }\n };\n Reorder.prototype.createReorderElement = function (e) {\n if (e && e.args && e.args.isXaxis) {\n this.setDisplay('none');\n }\n var header = this.parent.element.querySelector('.' + literals.headerContent);\n this.upArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderuparrow e-reorderuparrow', attrs: { style: 'display:none' } }));\n this.downArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderdownarrow e-reorderdownarrow', attrs: { style: 'display:none' } }));\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specified the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, { type: events.actionComplete }));\n var target = this.fromCol && this.parent.getColumnHeaderByField(this.fromCol);\n if (target) {\n this.parent.focusModule.onClick({ target: target }, true);\n }\n };\n /**\n * To destroy the reorder\n *\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.upArrow.parentNode) {\n remove(this.upArrow);\n }\n if (this.downArrow.parentNode) {\n remove(this.downArrow);\n }\n this.parent.off(events.headerDrop, this.headerDrop);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.reorderComplete, this.onActionComplete);\n this.parent.off(events.columnDrag, this.drag);\n this.parent.off(events.columnDragStart, this.dragStart);\n this.parent.off(events.columnDragStop, this.dragStop);\n this.parent.off(events.headerRefreshed, this.createReorderElement);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.destroy, this.destroy);\n //call ejdrag and drop destroy\n };\n Reorder.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'leftArrow') {\n e.action = 'ctrlLeftArrow';\n }\n else if (e.action === 'rightArrow') {\n e.action = 'ctrlRightArrow';\n }\n }\n switch (e.action) {\n case 'ctrlLeftArrow':\n case 'ctrlRightArrow':\n // eslint-disable-next-line no-case-declarations\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n var visibleCols = gObj.getVisibleColumns();\n var index = visibleCols.indexOf(column);\n var toCol = e.action === 'ctrlLeftArrow' ? visibleCols[index - 1] : visibleCols[index + 1];\n if (toCol && toCol.field && column.field) {\n this.reorderColumns(column.field, toCol.field);\n }\n }\n break;\n }\n };\n Reorder.prototype.drag = function (e) {\n var gObj = this.parent;\n var target = e.target;\n var closest = closestElement(target, '.e-headercell:not(.e-stackedHeaderCell)');\n var cloneElement = gObj.element.querySelector('.e-cloneproperties');\n var content = gObj.getContent().firstElementChild;\n var isLeft = this.x > getPosition(e.event).x + content.scrollLeft;\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n this.setDisplay('none');\n this.stopTimer();\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);\n this.updateScrollPostion(e.event);\n if (closest && !closest.isEqualNode(this.element)) {\n target = closest;\n //consider stacked, detail header cell\n var uid = target.querySelector('.e-headercelldiv, .e-stackedheadercelldiv').getAttribute('e-mappinguid');\n if (!(!this.chkDropPosition(this.element, target) || !this.chkDropAllCols(this.element, target)) &&\n gObj.getColumnByUid(uid).allowReordering && e.column.allowReordering) {\n this.updateArrowPosition(target, isLeft);\n classList(target, ['e-allowDrop', 'e-reorderindicate'], []);\n }\n else if (!(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n else {\n if (closest && closest.isEqualNode(this.element) &&\n !((gObj.allowGrouping && e.column.allowGrouping) || e.column.allowReordering)) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n else if (!closest && !(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n gObj.trigger(events.columnDrag, { target: target, draggableType: 'headercell', column: e.column });\n };\n Reorder.prototype.updateScrollPostion = function (e) {\n var _this = this;\n var x = getPosition(e).x;\n var cliRect = this.parent.element.getBoundingClientRect();\n var cliRectBaseRight = cliRect.right;\n var cliRectBaseLeft = cliRect.left;\n var scrollElem = this.parent.getContent().firstElementChild;\n if (x > cliRectBaseLeft && x < cliRectBaseLeft + 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, true); }, 50);\n }\n else if (x < cliRectBaseRight && x > cliRectBaseRight - 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, false); }, 50);\n }\n };\n Reorder.prototype.setScrollLeft = function (scrollElem, isLeft) {\n var scrollLeft = scrollElem.scrollLeft;\n scrollElem.scrollLeft = scrollElem.scrollLeft + (isLeft ? -5 : 5);\n if (scrollLeft !== scrollElem.scrollLeft) {\n this.setDisplay('none');\n }\n };\n Reorder.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Reorder.prototype.updateArrowPosition = function (target, isLeft) {\n var cliRect = target.getBoundingClientRect();\n var cliRectBase = this.parent.element.getBoundingClientRect();\n if ((isLeft && cliRect.left < cliRectBase.left) || (!isLeft && cliRect.right > cliRectBase.right)) {\n return;\n }\n var isSticky = this.parent.getHeaderContent().classList.contains('e-sticky');\n this.upArrow.style.top = isSticky ? cliRect.top + cliRect.height + 'px' : cliRect.top + cliRect.height - cliRectBase.top + 'px';\n this.downArrow.style.top = isSticky ? cliRect.top - 7 + 'px' : cliRect.top - cliRectBase.top - 7 + 'px';\n this.upArrow.style.left = this.downArrow.style.left = isSticky ? (isLeft ? cliRect.left : cliRect.right) - 4 + 'px' :\n (isLeft ? cliRect.left : cliRect.right) - cliRectBase.left - 4 + 'px';\n this.setDisplay('');\n };\n Reorder.prototype.dragStart = function (e) {\n var gObj = this.parent;\n var target = e.target;\n this.element = target.classList.contains('e-headercell') ? target :\n parentsUntil(target, 'e-headercell');\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n var content = gObj.getContent().firstElementChild;\n this.x = getPosition(e.event).x + content.scrollLeft;\n gObj.trigger(events.columnDragStart, {\n target: target, draggableType: 'headercell', column: e.column\n });\n };\n Reorder.prototype.dragStop = function (e) {\n var gObj = this.parent;\n this.setDisplay('none');\n this.stopTimer();\n if (!e.cancel) {\n gObj.trigger(events.columnDrop, { target: e.target, draggableType: 'headercell', column: e.column });\n }\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n };\n Reorder.prototype.setDisplay = function (display) {\n this.upArrow.style.display = display;\n this.downArrow.style.display = display;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} return the module name\n * @private\n */\n Reorder.prototype.getModuleName = function () {\n return 'reorder';\n };\n return Reorder;\n}());\nexport { Reorder };\n","import { Draggable, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { removeClass } from '@syncfusion/ej2-base';\nimport { remove, closest as closestElement, classList, extend } from '@syncfusion/ej2-base';\nimport { parentsUntil, removeElement, getPosition, addRemoveActiveClasses, isActionPrevent } from '../base/util';\nimport { resetRowIndex, resetCachedRowIndex, groupReorderRowObject } from '../base/util';\nimport * as events from '../base/constant';\nimport { Scroll } from '../actions/scroll';\nimport { DataManager } from '@syncfusion/ej2-data';\nimport * as literals from '../base/string-literals';\n// eslint-disable-next-line valid-jsdoc\n/**\n *\n * Reorder module is used to handle row reordering.\n *\n * @hidden\n */\nvar RowDD = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function RowDD(parent) {\n var _this = this;\n this.selectedRows = [];\n this.isOverflowBorder = true;\n this.selectedRowColls = [];\n this.isRefresh = true;\n this.isReplaceDragEle = true;\n this.istargetGrid = false;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = _this.draggable.currentStateTarget;\n if (!isNullOrUndefined(target) && gObj.rowDropSettings.targetID && !isNullOrUndefined(target.classList) && !target.classList.contains('e-rowcell')) {\n target = parentsUntil(target, 'e-rowcell');\n }\n var visualElement = _this.parent.createElement('div', {\n className: 'e-cloneproperties e-draganddrop e-grid e-dragclone',\n styles: 'height:\"auto\", z-index:2, width:' + gObj.element.offsetWidth\n });\n var table = _this.parent.createElement('table', { styles: 'width:' + gObj.element.offsetWidth, attrs: { role: 'grid' } });\n var tbody = _this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n if (document.getElementsByClassName('e-griddragarea').length ||\n (gObj.rowDropSettings.targetID && ((!isNullOrUndefined(target) && !target.classList.contains('e-selectionbackground')\n && gObj.selectionSettings.type !== 'Single') || !parentsUntil(target, 'e-rowcell'))) ||\n (!gObj.rowDropSettings.targetID && !parentsUntil(target, 'e-rowdragdrop'))) {\n return false;\n }\n if (gObj.rowDropSettings.targetID &&\n gObj.selectionSettings.mode === 'Row' && gObj.selectionSettings.type === 'Single') {\n gObj.selectRow(parseInt(_this.draggable.currentStateTarget.parentElement.getAttribute(literals.dataRowIndex), 10));\n }\n _this.startedRow = closestElement(target, 'tr').cloneNode(true);\n if (_this.parent.isFrozenGrid()) {\n var nodes = [].slice.call(_this.startedRow.querySelectorAll('.e-rowcell'));\n for (var i = 0; i < nodes.length; i++) {\n removeClass([nodes[parseInt(i.toString(), 10)]], ['e-leftfreeze', 'e-freezeleftborder', 'e-fixedfreeze', 'e-freezerightborder', 'e-rightfreeze', 'e-unfreeze']);\n nodes[parseInt(i.toString(), 10)].removeAttribute('style');\n }\n }\n _this.processArgs(target);\n var args = {\n selectedRow: _this.rows, dragelement: target,\n cloneElement: visualElement, cancel: false, data: _this.rowData\n };\n var selectedRows = gObj.getSelectedRows();\n gObj.trigger(events.rowDragStartHelper, args);\n var cancel = 'cancel';\n if (args[\"\" + cancel]) {\n return false;\n }\n removeElement(_this.startedRow, '.e-indentcell');\n removeElement(_this.startedRow, '.e-detailrowcollapse');\n removeElement(_this.startedRow, '.e-detailrowexpand');\n if (!(gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache)) {\n _this.removeCell(_this.startedRow, literals.gridChkBox);\n }\n var exp = new RegExp('e-active', 'g'); //high contrast issue\n _this.startedRow.innerHTML = _this.startedRow.innerHTML.replace(exp, '');\n tbody.appendChild(_this.startedRow);\n if (gObj.getSelectedRowIndexes().length > 1 && _this.startedRow.hasAttribute('aria-selected')) {\n var dropCountEle = _this.parent.createElement('span', {\n className: 'e-dropitemscount', innerHTML: '' + selectedRows.length\n });\n visualElement.appendChild(dropCountEle);\n }\n var ele = closestElement(target, 'tr').querySelector('.e-icon-rowdragicon');\n if (ele) {\n ele.classList.add('e-dragstartrow');\n }\n table.appendChild(tbody);\n visualElement.appendChild(table);\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n if ((gObj.enableVirtualization || gObj.infiniteScrollSettings.enableCache) && gObj.allowGrouping &&\n gObj.groupSettings.columns.length && !isNullOrUndefined(e.target.closest('tr'))) {\n var dragTrs = e.dragElement.querySelectorAll('tr');\n var indentCells = e.target.closest('tr').querySelectorAll('.e-indentcell');\n for (var i = 0; i < dragTrs.length; i++) {\n for (var j = 0; j < indentCells.length; j++) {\n var cloneIndentCell = indentCells[parseInt(j.toString(), 10)].cloneNode(true);\n dragTrs[parseInt(i.toString(), 10)].insertBefore(cloneIndentCell, dragTrs[parseInt(i.toString(), 10)].firstElementChild);\n }\n }\n }\n if (gObj.element.classList.contains('e-childgrid')) {\n var parentGrid = _this.getParentGrid(gObj.element);\n parentGrid.appendChild(e.dragElement);\n gObj.element.appendChild(gObj.createElement('div', { className: 'e-drag-ref' }));\n }\n document.body.classList.add('e-prevent-select');\n if (document.getElementsByClassName('e-griddragarea').length) {\n return;\n }\n var target = e.target;\n var spanCssEle = _this.parent.element.querySelector('.e-dropitemscount');\n if (_this.parent.getSelectedRecords().length > 1 && spanCssEle) {\n spanCssEle.style.left = _this.parent.element.querySelector('.e-cloneproperties table')\n .offsetWidth - 5 + 'px';\n }\n _this.processArgs(target);\n gObj.trigger(events.rowDragStart, {\n rows: _this.rows, target: e.target,\n draggableType: 'rows', fromIndex: parseInt(_this.rows[0].getAttribute(literals.dataRowIndex), 10),\n data: (_this.rowData[0] && Object.keys(_this.rowData[0]).length > 0) ? _this.rowData : _this.currentViewData()\n });\n _this.dragStartData = _this.rowData;\n var dropElem = document.getElementById(gObj.rowDropSettings.targetID);\n if (gObj.rowDropSettings.targetID && dropElem && dropElem.ej2_instances &&\n dropElem.ej2_instances[0].getModuleName() === 'grid') {\n dropElem.ej2_instances[0].getContent().classList.add('e-allowRowDrop');\n }\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n _this.isDropGrid = _this.parent;\n _this.istargetGrid = false;\n if (_this.parent.rowDropSettings.targetID) {\n var dropElement = document.getElementById(gObj.rowDropSettings.targetID);\n _this.isDropGrid = dropElement.ej2_instances[0];\n if (parentsUntil(e.target, 'e-grid')) {\n _this.istargetGrid = _this.parent.rowDropSettings.targetID === parentsUntil(e.target, 'e-grid').id;\n }\n }\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (gObj.element.classList.contains('e-childgrid')) {\n var parentGrid = _this.getParentGrid(gObj.element);\n cloneElement = parentGrid.querySelector('.e-cloneproperties');\n }\n var target = _this.getElementFromPosition(cloneElement, e.event);\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur', 'e-movecur', 'e-grabcur']);\n _this.isOverflowBorder = true;\n _this.hoverState = gObj.enableHover;\n var trElement = parentsUntil(target, 'e-grid') ? closestElement(e.target, 'tr') : null;\n if (!e.target) {\n return;\n }\n _this.processArgs(target);\n var args = {\n rows: _this.rows, target: target, draggableType: 'rows',\n data: _this.rowData, originalEvent: e, cancel: false\n };\n gObj.trigger(events.rowDrag, args);\n _this.stopTimer();\n if (args.cancel) {\n return;\n }\n gObj.element.classList.add('e-rowdrag');\n if (trElement && (parentsUntil(target, 'e-grid').id === cloneElement.parentElement.id || parentsUntil(target, 'e-grid').id)) {\n if (_this.isDropGrid.element.querySelector('.e-emptyrow')) {\n _this.dragTarget = 0;\n }\n else {\n _this.dragTarget = parseInt(trElement.getAttribute('data-rowindex'), 10);\n }\n }\n else {\n _this.dragTarget = parseInt(_this.startedRow.getAttribute('data-rowindex'), 10);\n }\n if (gObj.rowDropSettings.targetID) {\n var dragParentElement = document.querySelector('.e-drag-ref');\n if (!parentsUntil(target, 'e-grid') || (dragParentElement\n && parentsUntil(dragParentElement.parentElement, 'e-grid').id === parentsUntil(target, 'e-grid').id) ||\n parentsUntil(cloneElement.parentElement, 'e-grid').id === parentsUntil(target, 'e-grid').id) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n else {\n classList(cloneElement, ['e-grabcur'], ['e-notallowedcur']);\n }\n }\n else {\n var element = parentsUntil(target, 'e-grid');\n if (element && element.id === cloneElement.parentElement.id && parentsUntil(target, 'e-row') &&\n !parentsUntil(target, 'e-addedrow')) {\n classList(cloneElement, ['e-movecur'], ['e-defaultcur']);\n }\n else {\n classList(cloneElement, ['e-notallowedcur'], ['e-movecur']);\n }\n }\n if (parentsUntil(_this.isDropGrid.element, 'e-grid')) {\n if ((!_this.isDropGrid.groupSettings.columns.length || _this.isDropGrid.groupSettings.columns.length)\n && !_this.isDropGrid.element.querySelector('.e-emptyrow')) {\n if (parentsUntil(target, 'e-grid') && parentsUntil(target, 'e-grid').id === _this.isDropGrid.element.id) {\n _this.updateScrollPostion(e.event);\n }\n if (((_this.isOverflowBorder || _this.parent.frozenRows > _this.dragTarget) &&\n (parseInt(_this.startedRow.getAttribute(literals.dataRowIndex), 10) !== _this.dragTarget || _this.istargetGrid))\n || (_this.istargetGrid && trElement && _this.isDropGrid.getRowByIndex(_this.isDropGrid.getCurrentViewRecords().length - 1).\n getAttribute('data-uid') === trElement.getAttribute('data-uid'))) {\n _this.moveDragRows(e, _this.startedRow, trElement);\n }\n else {\n var islastRowIndex = void 0;\n if (_this.parent.enableVirtualization) {\n islastRowIndex = trElement && parseInt(trElement.getAttribute(literals.dataRowIndex), 10) ===\n _this.parent.renderModule.data.dataManager.dataSource.json.length - 1;\n }\n else {\n var rowIndex = _this.parent.enableInfiniteScrolling && _this.parent.infiniteScrollSettings.enableCache &&\n !_this.parent.groupSettings.enableLazyLoading ?\n _this.parent.pageSettings.currentPage * _this.parent.pageSettings.pageSize - 1 :\n _this.parent.getCurrentViewRecords().length - 1;\n var lastRow = _this.parent.getRowByIndex(rowIndex);\n islastRowIndex = trElement && lastRow && lastRow.getAttribute('data-uid') === trElement.getAttribute('data-uid') &&\n lastRow.getAttribute('data-uid') !== _this.startedRow.getAttribute('data-uid');\n if (_this.isNewRowAdded() && _this.parent.editSettings.newRowPosition === 'Bottom') {\n islastRowIndex = false;\n }\n }\n if (islastRowIndex && !_this.parent.rowDropSettings.targetID) {\n var bottomborder = _this.parent.createElement('div', { className: 'e-lastrow-dragborder' });\n var gridcontentEle = _this.parent.getContent();\n bottomborder.style.width = _this.parent.element.offsetWidth - _this.getScrollWidth() + 'px';\n if (_this.parent.enableVirtualization) {\n bottomborder.style.zIndex = '1';\n }\n if (!gridcontentEle.getElementsByClassName('e-lastrow-dragborder').length &&\n (!(gObj.allowGrouping && gObj.groupSettings.columns.length) || isNullOrUndefined(trElement.nextSibling))) {\n gridcontentEle.classList.add('e-grid-relative');\n gridcontentEle.appendChild(bottomborder);\n bottomborder.style.bottom = _this.getScrollWidth() + 'px';\n }\n }\n _this.removeBorder(trElement);\n }\n }\n if (target && target.classList.contains(literals.content)\n && !_this.isDropGrid.element.querySelector('.e-emptyrow') && _this.istargetGrid) {\n _this.removeBorder(trElement);\n var rowIndex = _this.isDropGrid.getCurrentViewRecords().length - 1;\n var selector = '.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse';\n var groupSelector = '.e-rowcell:not(.e-hide),.e-rowdragdrop:not(.e-hide),.e-detailrowcollapse:not(.e-hide)';\n var rowElement = [];\n if (_this.parent.allowGrouping && _this.parent.groupSettings.columns && _this.parent.groupSettings.columns.length) {\n rowElement = [].slice.call(_this.isDropGrid.getRowByIndex(rowIndex).querySelectorAll(groupSelector));\n }\n else {\n rowElement = [].slice.call(_this.isDropGrid.getRowByIndex(rowIndex).querySelectorAll(selector));\n }\n if (rowElement.length > 0) {\n if (_this.parent.allowGrouping && _this.parent.groupSettings.columns && _this.parent.groupSettings.columns.length) {\n _this.groupRowDDIndicator(rowElement, true);\n }\n else {\n addRemoveActiveClasses(rowElement, true, 'e-dragborder');\n }\n }\n }\n }\n };\n this.dragStop = function (e) {\n if (_this.parent.isCheckBoxSelection && _this.parent.enableInfiniteScrolling) {\n window.getSelection().removeAllRanges();\n }\n document.body.classList.remove('e-prevent-select');\n if (isActionPrevent(_this.parent)) {\n _this.parent.notify(events.preventBatch, {\n instance: _this, handler: _this.processDragStop, arg1: e\n });\n }\n else {\n _this.processDragStop(e);\n }\n };\n this.processDragStop = function (e) {\n var gObj = _this.parent;\n if (_this.parent.isDestroyed) {\n return;\n }\n var targetEle = _this.getElementFromPosition(e.helper, e.event);\n var target = targetEle && !targetEle.classList.contains('e-dlg-overlay') ?\n targetEle : e.target;\n gObj.element.classList.remove('e-rowdrag');\n var dropElement = document.getElementById(gObj.rowDropSettings.targetID);\n if (gObj.rowDropSettings.targetID && dropElement && dropElement.ej2_instances &&\n dropElement.ej2_instances[0].getModuleName() === 'grid') {\n dropElement.ej2_instances[0].getContent().classList.remove('e-allowRowDrop');\n }\n if (parentsUntil(_this.isDropGrid.element, 'e-grid')) {\n _this.stopTimer();\n _this.isDropGrid.enableHover = _this.hoverState;\n _this.isDropGrid.getContent().classList.remove('e-grid-relative');\n _this.removeBorder(targetEle);\n var stRow = _this.isDropGrid.element.querySelector('.e-dragstartrow');\n if (stRow) {\n stRow.classList.remove('e-dragstartrow');\n }\n }\n _this.processArgs(target);\n var args = {\n target: target, draggableType: 'rows',\n cancel: false,\n fromIndex: parseInt(_this.rows[0].getAttribute(literals.dataRowIndex), 10),\n dropIndex: _this.dragTarget, rows: _this.rows,\n data: (Object.keys(_this.dragStartData[0]).length > 0) ? _this.dragStartData : _this.currentViewData()\n };\n gObj.trigger(events.rowDrop, args, function () {\n if (!(parentsUntil(target, literals.row) || parentsUntil(target, 'e-emptyrow')\n || parentsUntil(target, literals.gridContent)) || args.cancel) {\n _this.dragTarget = null;\n remove(e.helper);\n return;\n }\n _this.isRefresh = false;\n var selectedIndexes = _this.parent.getSelectedRowIndexes();\n if (gObj.isRowDragable()) {\n if (!_this.parent.rowDropSettings.targetID &&\n _this.startedRow.querySelector('td.e-selectionbackground') && selectedIndexes.length > 1 &&\n selectedIndexes.length !== _this.parent.getCurrentViewRecords().length) {\n _this.reorderRows(selectedIndexes, args.dropIndex);\n }\n else {\n _this.reorderRows([parseInt(_this.startedRow.getAttribute(literals.dataRowIndex), 10)], _this.dragTarget);\n }\n _this.dragTarget = null;\n if (!gObj.rowDropSettings.targetID) {\n if (e.helper.classList.contains('e-cloneproperties') && document.querySelector('.' + e.helper.classList[0])) {\n remove(e.helper);\n }\n if (gObj.enableVirtualization && (!_this.parent.allowGrouping || !gObj.groupSettings.columns.length)) {\n gObj.refresh();\n }\n else {\n _this.rowOrder(args);\n }\n }\n if (_this.parent.getContentTable().scrollHeight < _this.parent.getContent().clientHeight) {\n _this.parent.scrollModule.setLastRowCell();\n }\n }\n _this.isRefresh = true;\n });\n };\n this.removeCell = function (targetRow, className) {\n return [].slice.call(targetRow.querySelectorAll('td')).filter(function (cell) {\n if (cell.classList.contains(className)) {\n targetRow.deleteCell(cell.cellIndex);\n }\n });\n };\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialEnd, this.initializeDrag, this);\n this.parent.on(events.columnDrop, this.columnDrop, this);\n this.parent.on(events.rowDragAndDropComplete, this.onActionComplete, this);\n this.onDataBoundFn = this.onDataBound.bind(this);\n this.parent.addEventListener(events.dataBound, this.onDataBoundFn);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n RowDD.prototype.getParentGrid = function (childGrid) {\n var parentGrid = childGrid;\n var parentGridObtained = false;\n while (!parentGridObtained) {\n if (parentGrid.ej2_instances[0].parentDetails) {\n parentGrid = document.getElementById(parentGrid.ej2_instances[0].parentDetails.parentID);\n }\n if (!parentGrid.classList.contains('e-childgrid')) {\n parentGridObtained = true;\n }\n }\n return parentGrid;\n };\n RowDD.prototype.isNewRowAdded = function () {\n return this.parent.editSettings && this.parent.editSettings.showAddNewRow &&\n !(this.parent.enableInfiniteScrolling || this.parent.enableVirtualization);\n };\n RowDD.prototype.groupRowDDIndicator = function (rowElement, isAdd) {\n addRemoveActiveClasses([rowElement[0]], isAdd, 'e-dragleft');\n addRemoveActiveClasses(rowElement, isAdd, 'e-dragtop', 'e-dragbottom');\n addRemoveActiveClasses([rowElement[rowElement.length - 1]], isAdd, 'e-dragright');\n };\n RowDD.prototype.refreshRow = function (args, tbody, target) {\n var gObj = this.parent;\n var tbodyContent = gObj.getContentTable().querySelector(literals.tbody);\n var tbodyHeader = gObj.getHeaderTable().querySelector(literals.tbody);\n for (var i = 0, len = args.rows.length; i < len; i++) {\n var row = args.rows[parseInt(i.toString(), 10)];\n if (((gObj.enableVirtualization && gObj.allowGrouping && gObj.groupSettings.columns.length) ||\n (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache)) &&\n args.rows.length === 1) {\n var removeElem = gObj.getRowElementByUID(row.getAttribute('data-uid'));\n if (!isNullOrUndefined(removeElem)) {\n remove(removeElem);\n }\n }\n var dragstartrow = row.querySelector('.e-dragstartrow');\n if (dragstartrow) {\n dragstartrow.classList.remove('e-dragstartrow');\n }\n tbody.insertBefore(row, target);\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n var dragRowUid = row.getAttribute('data-uid');\n var dropRowUid = args.target.parentElement.getAttribute('data-uid');\n var dragRowObject = gObj.getRowObjectFromUID(dragRowUid);\n var dropRowObject = gObj.getRowObjectFromUID(dropRowUid);\n if (dragRowObject.parentUid !== dropRowObject.parentUid) {\n gObj['groupModule'].groupReorderHandler(dragRowObject, dropRowObject);\n }\n }\n }\n var tr = [].slice.call(gObj.editSettings.showAddNewRow ?\n tbody.querySelectorAll('.e-row:not(.e-addedrow)') : tbody.getElementsByClassName(literals.row));\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n if (gObj.groupSettings.enableLazyLoading || (gObj.enableInfiniteScrolling &&\n gObj.infiniteScrollSettings.enableCache && tr.length > gObj.pageSettings.pageSize * 3)) {\n gObj.refresh();\n }\n else {\n groupReorderRowObject(this.parent, args, tr);\n if (gObj.enableVirtualization || (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache)) {\n resetCachedRowIndex(gObj);\n }\n else {\n resetRowIndex(this.parent, gObj.getRowsObject().filter(function (data) { return data.isDataRow; }), tr);\n }\n this.parent.notify(events.refreshExpandandCollapse, {\n rows: gObj.enableVirtualization ? this.parent.vRows : this.parent.getRowsObject()\n });\n }\n }\n else if (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache &&\n !gObj.groupSettings.columns.length) {\n if (tr.length > gObj.pageSettings.pageSize * 3) {\n gObj.refresh();\n }\n else {\n groupReorderRowObject(this.parent, args, tr);\n resetCachedRowIndex(gObj);\n }\n }\n else {\n this.refreshData(tr);\n }\n if (this.parent.frozenRows) {\n for (var i = 0, len = tr.length; i < len; i++) {\n if (i < this.parent.frozenRows) {\n tbodyHeader.appendChild(tr[parseInt(i.toString(), 10)]);\n }\n else {\n tbodyContent.appendChild(tr[parseInt(i.toString(), 10)]);\n }\n }\n }\n };\n RowDD.prototype.updateFrozenRowreOrder = function (args) {\n var gObj = this.parent;\n var tbodyC = gObj.getContentTable().querySelector(literals.tbody);\n var tbodyH = gObj.getHeaderTable().querySelector(literals.tbody);\n var tr = [].slice.call(tbodyH.getElementsByClassName(literals.row)).concat([].slice.call(tbodyC.getElementsByClassName(literals.row)));\n var tbody = gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n this.parent.clearSelection();\n var targetRow = this.refreshRowTarget(args);\n for (var i = 0, len = tr.length; i < len; i++) {\n tbody.appendChild(tr[parseInt(i.toString(), 10)]);\n }\n this.refreshRow(args, tbody, targetRow);\n };\n RowDD.prototype.refreshRowTarget = function (args) {\n var gObj = this.parent;\n var targetIdx = parseInt(args.target.parentElement.getAttribute(literals.dataRowIndex), 10);\n if (gObj.enableVirtualization && gObj.allowGrouping && gObj.groupSettings.columns.length) {\n targetIdx = this.parent.getDataRows().indexOf(args.target.parentElement);\n }\n if ((args.fromIndex < args.dropIndex || args.fromIndex === args.dropIndex) && (!gObj.allowGrouping ||\n !gObj.groupSettings.columns.length)) {\n targetIdx = targetIdx + 1;\n }\n var targetTR = gObj.getRowByIndex(targetIdx);\n if (targetIdx === gObj.getRows().length && this.isNewRowAdded() && this.parent.editSettings.newRowPosition === 'Bottom') {\n targetTR = this.parent.element.querySelector('.e-row.e-addedrow');\n }\n var tr = gObj.allowGrouping && gObj.groupSettings.columns.length && targetIdx !== -1 &&\n args.fromIndex < args.dropIndex && targetTR ? targetTR.nextSibling : targetTR;\n return tr;\n };\n RowDD.prototype.updateFrozenColumnreOrder = function (args) {\n var gObj = this.parent;\n var tbody = gObj.getContentTable().querySelector(literals.tbody);\n this.parent.clearSelection();\n var targetRow = this.refreshRowTarget(args);\n this.refreshRow(args, tbody, targetRow);\n };\n RowDD.prototype.refreshData = function (tr) {\n var rowObj = {};\n var recordobj = {};\n var rowObjects = this.parent.getRowsObject();\n var currentViewData = this.parent.getCurrentViewRecords();\n for (var i = 0, len = tr.length; i < len; i++) {\n var index = parseInt(tr[parseInt(i.toString(), 10)].getAttribute(literals.dataRowIndex), 10);\n rowObj[parseInt(i.toString(), 10)] = rowObjects[parseInt(index.toString(), 10)];\n recordobj[parseInt(i.toString(), 10)] = currentViewData[parseInt(index.toString(), 10)];\n }\n var rows = this.parent.getRows();\n for (var i = 0, len = tr.length; i < len; i++) {\n rows[parseInt(i.toString(), 10)] = tr[parseInt(i.toString(), 10)];\n rowObjects[parseInt(i.toString(), 10)] = rowObj[parseInt(i.toString(), 10)];\n currentViewData[parseInt(i.toString(), 10)] = recordobj[parseInt(i.toString(), 10)];\n }\n resetRowIndex(this.parent, rowObjects, tr);\n };\n RowDD.prototype.rowOrder = function (args) {\n if (args.dropIndex === args.fromIndex || isNaN(args.dropIndex)) {\n return;\n }\n if (this.parent.isDetail()) {\n this.parent.detailCollapseAll();\n var rows = [].slice.call(this.parent.getContentTable().querySelector(literals.tbody).children);\n var rowObjects = this.parent.getRowsObject();\n rows.filter(function (row) {\n if (row.classList.contains('e-detailrow')) {\n row.remove();\n }\n });\n for (var i = 0, len = rowObjects.length; i < len; i++) {\n if (!rowObjects[parseInt(i.toString(), 10)]) {\n break;\n }\n if (rowObjects[parseInt(i.toString(), 10)].isDetailRow) {\n this.parent.getRowsObject().splice(i, 1);\n i--;\n }\n }\n }\n if (args.target.classList.contains('e-rowcelldrag') || args.target.classList.contains('e-dtdiagonalright')\n || args.target.classList.contains('e-dtdiagonaldown')) {\n args.target = args.target.parentElement;\n }\n if (!args.target.classList.contains('e-rowcell') && parentsUntil(args.target, 'e-rowcell')) {\n args.target = parentsUntil(args.target, 'e-rowcell');\n }\n if (this.parent.frozenRows) {\n this.updateFrozenRowreOrder(args);\n }\n else {\n this.updateFrozenColumnreOrder(args);\n }\n if ((!this.parent.allowGrouping || !this.parent.groupSettings.columns.length) && this.selectedRowColls.length > 0) {\n this.parent.selectRows(this.selectedRowColls);\n var indexes = [];\n if (this.parent.filterSettings.columns.length || this.parent.sortSettings.columns.length) {\n for (var i = 0, len = args.rows.length; i < len; i++) {\n indexes.push(parseInt(args.rows[parseInt(i.toString(), 10)].getAttribute(literals.dataRowIndex), 10));\n }\n this.selectedRowColls = indexes;\n }\n this.selectedRowColls = [];\n }\n else {\n this.selectedRowColls = [];\n }\n };\n RowDD.prototype.currentViewData = function () {\n var selectedIndexes = this.parent.getSelectedRowIndexes();\n var currentVdata = [];\n var fromIdx = parseInt(this.startedRow.getAttribute(literals.dataRowIndex), 10);\n for (var i = 0, n = selectedIndexes.length; i < n; i++) {\n var currentV = 'currentViewData';\n currentVdata[parseInt(i.toString(), 10)] = this.parent[\"\" + currentV][selectedIndexes[parseInt(i.toString(), 10)]];\n }\n if (!this.parent.rowDropSettings.targetID && selectedIndexes.length === 0) {\n currentVdata[0] = this.parent.currentViewData[parseInt(fromIdx.toString(), 10)];\n }\n return currentVdata;\n };\n RowDD.prototype.saveChange = function (changeRecords, query) {\n var _this = this;\n this.parent.getDataModule().saveChanges(changeRecords, this.parent.getPrimaryKeyFieldNames()[0], {}, query)\n .then(function () {\n _this.parent.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n }).catch(function (e) {\n var error = 'error';\n var message = 'message';\n if (!isNullOrUndefined(e[\"\" + error]) && !isNullOrUndefined(e[\"\" + error][\"\" + message])) {\n e[\"\" + error] = e[\"\" + error][\"\" + message];\n }\n _this.parent.trigger(events.actionFailure, e);\n });\n };\n RowDD.prototype.reorderRows = function (fromIndexes, toIndex) {\n var selectedIndexes = this.parent.getSelectedRowIndexes();\n var selectedRecords = [];\n var draggedRecords = [];\n var currentViewData = this.parent.renderModule.data.dataManager.dataSource.json;\n var skip = this.parent.allowPaging ?\n (this.parent.pageSettings.currentPage * this.parent.pageSettings.pageSize) - this.parent.pageSettings.pageSize : 0;\n var dropIdx = toIndex + skip;\n var actualIdx = fromIndexes[0] + skip;\n for (var i = 0, len = fromIndexes.length; i < len; i++) {\n draggedRecords[parseInt(i.toString(), 10)] = currentViewData[fromIndexes[parseInt(i.toString(), 10)] + skip];\n }\n for (var i = 0, len = selectedIndexes.length; i < len; i++) {\n selectedRecords[parseInt(i.toString(), 10)] = currentViewData[selectedIndexes[parseInt(i.toString(), 10)] + skip];\n }\n for (var i = 0, len = draggedRecords.length; i < len; i++) {\n if (i !== 0) {\n for (var j = 0, len1 = currentViewData.length; j < len1; j++) {\n if (JSON.stringify(this.parent.renderModule.data.dataManager.dataSource.json[parseInt(j.toString(), 10)]) ===\n JSON.stringify(draggedRecords[parseInt(i.toString(), 10)])) {\n actualIdx = j;\n break;\n }\n }\n for (var j = 0, len1 = currentViewData.length; j < len1; j++) {\n if (JSON.stringify(this.parent.renderModule.data.dataManager.dataSource.json[parseInt(j.toString(), 10)]) === JSON\n .stringify(draggedRecords[i - 1])) {\n if (actualIdx > j) {\n dropIdx = j + 1;\n }\n break;\n }\n }\n }\n this.reorderRow(actualIdx - skip, dropIdx - skip);\n }\n if (this.isRefresh) {\n this.parent.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n }\n for (var i = 0, len = selectedRecords.length; i < len; i++) {\n for (var j = 0, len1 = currentViewData.length; j < len1; j++) {\n if (JSON.stringify(this.parent.renderModule.data.dataManager.dataSource.json[parseInt(j.toString(), 10)]) === JSON\n .stringify(selectedRecords[parseInt(i.toString(), 10)])) {\n selectedIndexes[parseInt(i.toString(), 10)] = j - skip;\n break;\n }\n }\n }\n this.selectedRowColls = selectedIndexes;\n };\n RowDD.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n /**\n * To trigger action complete event.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n RowDD.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, { type: events.actionComplete, requestType: 'rowdraganddrop' }));\n };\n RowDD.prototype.initializeDrag = function () {\n var gObj = this.parent;\n this.draggable = new Draggable(gObj.element, {\n dragTarget: '.e-rowcelldrag, .e-rowdragdrop, .e-rowcell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n isReplaceDragEle: this.isReplaceDragEle,\n isPreventSelect: false\n });\n };\n RowDD.prototype.updateScrollPostion = function (e) {\n var _this = this;\n var y = getPosition(e).y;\n var cliRect = this.isDropGrid.getContent().getBoundingClientRect();\n var rowHeight = this.isDropGrid.getRowHeight() - 15;\n var scrollElem = this.isDropGrid.getContent().firstElementChild;\n var virtualScrollbtm = this.parent.enableVirtualization ? 20 : 0;\n if (cliRect.top >= y) {\n var scrollPixel_1 = -(this.isDropGrid.getRowHeight());\n this.isOverflowBorder = false;\n this.timer = window.setInterval(function () { _this.setScrollDown(scrollElem, scrollPixel_1); }, 200);\n }\n else if (cliRect.top + this.isDropGrid.getContent().clientHeight - rowHeight - 33 - virtualScrollbtm <= y) {\n var scrollPixel_2 = (this.isDropGrid.getRowHeight());\n this.isOverflowBorder = false;\n this.timer = window.setInterval(function () { _this.setScrollDown(scrollElem, scrollPixel_2); }, 200);\n }\n };\n RowDD.prototype.setScrollDown = function (scrollElem, scrollPixel) {\n scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;\n };\n RowDD.prototype.moveDragRows = function (e, startedRow, targetRow) {\n var cloneElement = this.parent.element.querySelector('.e-cloneproperties');\n if (this.parent.element.classList.contains('e-childgrid')) {\n var parentGrid = this.getParentGrid(this.parent.element);\n cloneElement = parentGrid.querySelector('.e-cloneproperties');\n }\n var element = closestElement(e.target, 'tr');\n if (parentsUntil(element, 'e-grid') &&\n ((!this.parent.rowDropSettings.targetID &&\n parentsUntil(cloneElement.parentElement, 'e-grid').id === parentsUntil(element, 'e-grid').id) || this.istargetGrid)) {\n var targetElement = element;\n if (!element) {\n targetElement = startedRow;\n }\n this.setBorder(targetElement, e.event, startedRow, targetRow);\n }\n };\n RowDD.prototype.setBorder = function (element, event, startedRow, targetRow) {\n var node = this.parent.element;\n if (this.istargetGrid) {\n node = this.isDropGrid.element;\n }\n var cloneElement = this.parent.element.querySelector('.e-cloneproperties');\n if (this.parent.allowGrouping && this.parent.groupSettings.columns.length) {\n this.removeBorder(element);\n }\n else {\n this.removeFirstRowBorder(element);\n this.removeLastRowBorder(element);\n }\n if (parentsUntil(element, 'e-grid') && element.classList.contains(literals.row) && ((!this.parent.rowDropSettings.targetID &&\n parentsUntil(cloneElement.parentElement, 'e-grid').id === parentsUntil(element, 'e-grid').id) || this.istargetGrid)) {\n if (this.parent.allowGrouping && this.parent.groupSettings.columns && this.parent.groupSettings.columns.length) {\n removeClass(node.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'), ['e-dragtop', 'e-dragright',\n 'e-dragbottom', 'e-dragleft']);\n }\n else {\n removeClass(node.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'), ['e-dragborder']);\n }\n var rowElement = [];\n var targetRowIndex = parseInt(targetRow.getAttribute(literals.dataRowIndex), 10);\n if (targetRow && targetRowIndex === 0 &&\n !(this.isNewRowAdded() && this.parent.editSettings.newRowPosition === 'Top')) {\n if (this.parent.allowGrouping && this.parent.groupSettings.columns.length) {\n element = targetRow;\n rowElement = [].slice.call(element\n .querySelectorAll('.e-groupcaption,.e-summarycell,.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));\n }\n else {\n var div = this.parent.createElement('div', { className: 'e-firstrow-dragborder' });\n var gridheaderEle = this.isDropGrid.getHeaderContent();\n gridheaderEle.classList.add('e-grid-relative');\n div.style.width = node.offsetWidth - this.getScrollWidth() + 'px';\n if (!gridheaderEle.getElementsByClassName('e-firstrow-dragborder').length) {\n if (this.parent.frozenRows) {\n if (this.parent.isFrozenGrid()) {\n div.style.width = this.parent.getContent().firstElementChild.scrollWidth + 'px';\n }\n gridheaderEle.querySelector('thead').appendChild(div);\n div.style.position = 'relative';\n }\n else {\n gridheaderEle.appendChild(div);\n }\n }\n }\n }\n else if (this.parent.rowDropSettings.targetID && targetRow) {\n element = this.isDropGrid.getRowByIndex(targetRowIndex - 1);\n rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));\n }\n else if (targetRow && parseInt(startedRow.getAttribute(literals.dataRowIndex), 10) > targetRowIndex) {\n if (this.parent.enableVirtualization && this.parent.allowGrouping && this.parent.groupSettings.columns.length) {\n targetRowIndex = this.parent.getDataRows().indexOf(targetRow);\n }\n if (this.parent.allowGrouping && this.parent.groupSettings.columns.length) {\n element = targetRow;\n rowElement = [].slice.call(element\n .querySelectorAll(\".e-groupcaption,.e-summarycell,.e-rowcell:not(.e-hide),.e-rowdragdrop:not(.e-hide),\\n .e-detailrowcollapse:not(.e-hide)\"));\n }\n else {\n if (targetRowIndex === 0 && this.isNewRowAdded() && this.parent.editSettings.newRowPosition === 'Top') {\n element = this.parent.element.querySelector('.e-row.e-addedrow tr');\n }\n else {\n element = this.parent.getRowByIndex(targetRowIndex - 1);\n }\n rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse,.e-dragindentcell'));\n }\n }\n else {\n rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));\n }\n if (rowElement.length > 0) {\n if (this.parent.allowGrouping && this.parent.groupSettings.columns && this.parent.groupSettings.columns.length) {\n this.groupRowDDIndicator(rowElement, true);\n }\n else {\n addRemoveActiveClasses(rowElement, true, 'e-dragborder');\n }\n }\n }\n };\n RowDD.prototype.getScrollWidth = function () {\n var scrollElem = this.parent.getContent().firstElementChild;\n return scrollElem.scrollWidth > scrollElem.offsetWidth ? Scroll.getScrollBarWidth() : 0;\n };\n RowDD.prototype.removeFirstRowBorder = function (element) {\n if (this.isDropGrid.element.getElementsByClassName('e-firstrow-dragborder').length > 0 && element &&\n (element.rowIndex !== 0 || element.classList.contains('e-columnheader'))) {\n remove(this.isDropGrid.element.getElementsByClassName('e-firstrow-dragborder')[0]);\n }\n else {\n var addNewRow = this.parent.element.querySelector('.e-row.e-addedrow tr');\n if (addNewRow && addNewRow.querySelector('.e-dragborder')) {\n var rowElement = [].slice.call(addNewRow.\n querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse,.e-dragindentcell'));\n addRemoveActiveClasses(rowElement, false, 'e-dragborder');\n }\n }\n };\n RowDD.prototype.removeLastRowBorder = function (element) {\n var islastRowIndex;\n if (this.parent.enableVirtualization) {\n islastRowIndex = element && parseInt(element.getAttribute(literals.dataRowIndex), 10) !==\n this.parent.renderModule.data.dataManager.dataSource.json.length - 1;\n }\n else {\n var rowIndex = this.parent.enableInfiniteScrolling && this.parent.infiniteScrollSettings.enableCache &&\n !this.parent.groupSettings.enableLazyLoading ?\n this.parent.pageSettings.currentPage * this.parent.pageSettings.pageSize - 1 :\n this.parent.getCurrentViewRecords().length - 1;\n var lastRow = this.parent.getRowByIndex(rowIndex);\n islastRowIndex = element && lastRow && lastRow.getAttribute('data-uid') !== element.getAttribute('data-uid');\n }\n if (this.parent.element.getElementsByClassName('e-lastrow-dragborder').length > 0 && element && islastRowIndex) {\n remove(this.parent.element.getElementsByClassName('e-lastrow-dragborder')[0]);\n }\n };\n RowDD.prototype.removeBorder = function (element) {\n this.removeFirstRowBorder(element);\n if (!this.parent.rowDropSettings.targetID) {\n this.removeLastRowBorder(element);\n }\n if (this.parent.allowGrouping && this.parent.groupSettings.columns.length) {\n element = ([].slice.call(this.isDropGrid.getContentTable().querySelectorAll('tr'))).filter(function (row) {\n return row.querySelector('td.e-dragtop.e-dragbottom');\n })[0];\n }\n else {\n element = (this.isDropGrid.getRows()).filter(function (row) { return row.querySelector('td.e-dragborder'); })[0];\n }\n if (element) {\n var rowElement = this.parent.allowGrouping && this.parent.groupSettings.columns.length ? [].slice.call(element\n .querySelectorAll('.e-dragtop.e-dragbottom')) : [].slice.call(element.getElementsByClassName('e-dragborder'));\n if (this.parent.allowGrouping && this.parent.groupSettings.columns && this.parent.groupSettings.columns.length) {\n this.groupRowDDIndicator(rowElement, false);\n }\n else {\n addRemoveActiveClasses(rowElement, false, 'e-dragborder');\n }\n }\n };\n RowDD.prototype.getElementFromPosition = function (element, event) {\n var position = getPosition(event);\n element.style.display = 'none';\n var target = document.elementFromPoint(position.x, position.y);\n element.style.display = '';\n return target;\n };\n RowDD.prototype.onDataBound = function () {\n if (this.selectedRowColls.length > 0 && (this.parent.enableVirtualization || this.parent.allowRowDragAndDrop)) {\n this.parent.selectRows(this.selectedRowColls);\n this.selectedRowColls = [];\n }\n };\n RowDD.prototype.getTargetIdx = function (targetRow) {\n return targetRow ? parseInt(targetRow.getAttribute(literals.dataRowIndex), 10) : 0;\n };\n RowDD.prototype.singleRowDrop = function (e) {\n var targetRow = closestElement(e.target, 'tr');\n var srcControl = e.droppedElement.parentElement.ej2_instances[0];\n var currentIndex = targetRow ? targetRow.rowIndex : srcControl.currentViewData.length - 1;\n this.reorderRow(this.startedRowIndex, currentIndex);\n };\n RowDD.prototype.columnDrop = function (e) {\n var gObj = this.parent;\n if (e.droppedElement.getAttribute('action') !== 'grouping' &&\n (parentsUntil(e.target, literals.row) || parentsUntil(e.target, 'e-emptyrow') || parentsUntil(e.target, literals.gridContent))) {\n var targetRow = closestElement(e.target, 'tr');\n var srcControl = void 0;\n var currentIndex = void 0;\n var dragParentElement = document.querySelector('.e-drag-ref');\n if ((e.droppedElement.querySelector('tr').getAttribute('single-dragrow') !== 'true' &&\n (e.droppedElement.parentElement.id === gObj.element.id || (dragParentElement\n && dragParentElement.parentElement.id === gObj.element.id)))\n || (e.droppedElement.querySelector('tr').getAttribute('single-dragrow') === 'true' &&\n e.droppedElement.parentElement.id !== gObj.element.id)) {\n return;\n }\n if (e.droppedElement.parentElement.id !== gObj.element.id) {\n if (dragParentElement) {\n srcControl = dragParentElement.parentElement.ej2_instances[0];\n remove(dragParentElement);\n }\n else {\n srcControl = e.droppedElement.parentElement.ej2_instances[0];\n }\n }\n else if (this.isSingleRowDragDrop || e.droppedElement.querySelector('tr').getAttribute('single-dragrow') === 'true') {\n this.singleRowDrop(e);\n return;\n }\n if (srcControl.element.id !== gObj.element.id && srcControl.rowDropSettings.targetID !== gObj.element.id) {\n return;\n }\n var records = srcControl.getSelectedRecords();\n var targetIndex = currentIndex = this.getTargetIdx(targetRow);\n if (e.target && e.target.classList.contains('e-content') && gObj.getCurrentViewRecords().length) {\n var lastrow = gObj.getContentTable().querySelector('tr:last-child');\n if (lastrow) {\n targetIndex = currentIndex = parseInt(lastrow.getAttribute(literals.ariaRowIndex), 10);\n }\n }\n if (isNaN(targetIndex)) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n targetIndex = currentIndex = 0;\n }\n if (gObj.allowPaging) {\n targetIndex = targetIndex + (gObj.pageSettings.currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize;\n }\n //Todo: drag and drop mapper & BatchChanges\n gObj.notify(events.rowsAdded, { toIndex: targetIndex, records: records });\n gObj.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n var selectedRows = srcControl.getSelectedRowIndexes();\n var skip = srcControl.allowPaging ?\n (srcControl.pageSettings.currentPage * srcControl.pageSettings.pageSize) - srcControl.pageSettings.pageSize : 0;\n this.selectedRows = [];\n for (var i = 0, len = records.length; i < len; i++) {\n this.selectedRows.push(skip + selectedRows[parseInt(i.toString(), 10)]);\n }\n srcControl.notify(events.rowsRemoved, { indexes: this.selectedRows, records: records });\n if (srcControl.dataSource instanceof DataManager && srcControl.dataSource.dataSource.offline) {\n srcControl.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n }\n }\n };\n RowDD.prototype.reorderRow = function (fromIndexes, toIndex) {\n var gObj = this.parent;\n if (!gObj.sortSettings.columns.length && !gObj.groupSettings.columns.length && !gObj.filterSettings.columns.length) {\n //Todo: drag and drop mapper & BatchChanges\n var skip = gObj.allowPaging ?\n (gObj.pageSettings.currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : 0;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var fromIndex = fromIndexes;\n toIndex = toIndex + skip;\n this.selectedRows = gObj.getSelectedRowIndexes();\n gObj.notify(events.rowPositionChanged, {\n fromIndex: fromIndexes + skip,\n toIndex: toIndex\n });\n }\n };\n RowDD.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.initializeDrag();\n }\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n RowDD.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.draggable.destroy();\n this.parent.off(events.initialEnd, this.initializeDrag);\n this.parent.off(events.columnDrop, this.columnDrop);\n this.parent.off(events.rowDragAndDropComplete, this.onActionComplete);\n this.parent.removeEventListener(events.dataBound, this.onDataBoundFn);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.destroy, this.destroy);\n //destory ejdrag and drop\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n RowDD.prototype.getModuleName = function () {\n return 'rowDragAndDrop';\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDD.prototype.processArgs = function (target) {\n var gObj = this.parent;\n var dragIdx = parseInt(this.startedRow.getAttribute(literals.dataRowIndex), 10);\n if ((gObj.getSelectedRecords().length > 0 && this.startedRow.cells[0].classList.contains('e-selectionbackground') === false)\n || gObj.getSelectedRecords().length === 0) {\n if (gObj.enableVirtualization || (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache)) {\n this.rows = [this.startedRow];\n }\n else {\n this.rows = [gObj.getRowByIndex(dragIdx)];\n }\n this.rowData = [gObj.getRowInfo((this.startedRow).querySelector('.' + literals.rowCell)).rowData];\n if ((gObj.enableVirtualization || (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache))\n && gObj.allowGrouping && gObj.groupSettings.columns.length && gObj.getSelectedRows().length) {\n this.rows = gObj.getSelectedRows();\n this.rowData = gObj.getSelectedRecords();\n }\n }\n else {\n this.rows = gObj.getSelectedRows();\n this.rowData = gObj.getSelectedRecords();\n }\n };\n return RowDD;\n}());\nexport { RowDD };\n","import { Draggable, Droppable, EventHandler } from '@syncfusion/ej2-base';\nimport { createElement, closest, remove, classList, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { parentsUntil, isActionPrevent, isGroupAdaptive, updatecloneRow, getComplexFieldID, getParsedFieldID, isComplexField, findCellIndex, resetRowIndex } from '../base/util';\nimport { resetCachedRowIndex, groupReorderRowObject } from '../base/util';\nimport { generateExpandPredicates, getPredicates, capitalizeFirstLetter } from '../base/util';\nimport * as events from '../base/constant';\nimport { AriaService } from '../services/aria-service';\nimport { GroupModelGenerator } from '../services/group-model-generator';\nimport { DataUtil, Predicate } from '@syncfusion/ej2-data';\nimport * as literals from '../base/string-literals';\nimport { RowRenderer } from '../renderer/row-renderer';\n// eslint-disable-next-line valid-jsdoc\n/**\n *\n * The `Group` module is used to handle group action.\n */\nvar Group = /** @class */ (function () {\n /**\n * Constructor for Grid group module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {GroupSettingsModel} groupSettings - specifies the GroupSettingsModel\n * @param {string[]} sortedColumns - specifies the sortedColumns\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n * @hidden\n */\n function Group(parent, groupSettings, sortedColumns, serviceLocator) {\n var _this = this;\n //Internal variables\n this.sortRequired = true;\n /** @hidden */\n this.groupSortFocus = false;\n /** @hidden */\n this.groupTextFocus = false;\n /** @hidden */\n this.groupCancelFocus = false;\n this.isAppliedGroup = false;\n this.isAppliedUnGroup = false;\n this.isAppliedCaptionRowBorder = false;\n this.reorderingColumns = [];\n this.visualElement = createElement('div', {\n className: 'e-cloneproperties e-dragclone e-gdclone',\n styles: 'line-height:23px', attrs: { action: 'grouping' }\n });\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = e.sender.target;\n var element = target.classList.contains('e-groupheadercell') ? target :\n parentsUntil(target, 'e-groupheadercell');\n if (!element || (!target.classList.contains('e-drag') && _this.groupSettings.allowReordering)) {\n return false;\n }\n _this.column = gObj.getColumnByField(element.firstElementChild.getAttribute('ej-mappingname'));\n _this.visualElement.textContent = element.textContent;\n _this.visualElement.style.width = element.offsetWidth + 2 + 'px';\n _this.visualElement.style.height = element.offsetHeight + 2 + 'px';\n _this.visualElement.setAttribute('e-mappinguid', _this.column.uid);\n gObj.element.appendChild(_this.visualElement);\n return _this.visualElement;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.dragStart = function (e) {\n _this.parent.element.classList.add('e-ungroupdrag');\n };\n this.drag = function (e) {\n if (_this.groupSettings.allowReordering) {\n _this.animateDropper(e);\n }\n var target = e.target;\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n _this.parent.trigger(events.columnDrag, { target: target, draggableType: 'headercell', column: _this.column });\n if (!_this.groupSettings.allowReordering) {\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);\n if (!(parentsUntil(target, literals.gridContent) || parentsUntil(target, 'e-headercell'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n };\n this.dragStop = function (e) {\n _this.parent.element.classList.remove('e-ungroupdrag');\n var preventDrop = !(parentsUntil(e.target, literals.gridContent) || parentsUntil(e.target, 'e-gridheader'));\n if (_this.groupSettings.allowReordering && preventDrop) {\n remove(e.helper);\n if (parentsUntil(e.target, 'e-groupdroparea')) {\n _this.rearrangeGroup();\n }\n else if (!(parentsUntil(e.target, 'e-grid'))) {\n var field = _this.parent.getColumnByUid(e.helper.getAttribute('e-mappinguid')).field;\n if (_this.groupSettings.columns.indexOf(field) !== -1) {\n _this.ungroupColumn(field);\n }\n }\n return;\n }\n else if (preventDrop) {\n remove(e.helper);\n return;\n }\n };\n this.animateDropper = function (e) {\n var uid = _this.parent.element.querySelector('.e-cloneproperties').getAttribute('e-mappinguid');\n var dragField = _this.parent.getColumnByUid(uid).field;\n var parent = parentsUntil(e.target, 'e-groupdroparea');\n var dropTarget = parentsUntil(e.target, 'e-group-animator');\n var grouped = [].slice.call(_this.element.getElementsByClassName('e-groupheadercell'))\n .map(function (e) { return e.querySelector('div').getAttribute('ej-mappingname'); });\n var cols = JSON.parse(JSON.stringify(grouped));\n if (dropTarget || parent) {\n if (dropTarget) {\n var dropField = dropTarget.querySelector('div[ej-mappingname]').getAttribute('ej-mappingname');\n var dropIndex = +(dropTarget.getAttribute('index'));\n if (dropField !== dragField) {\n var dragIndex = cols.indexOf(dragField);\n if (dragIndex !== -1) {\n cols.splice(dragIndex, 1);\n }\n var flag = dropIndex !== -1 && dragIndex === dropIndex;\n cols.splice(dropIndex + (flag ? 1 : 0), 0, dragField);\n }\n }\n else if (parent && cols.indexOf(dragField) === -1) {\n cols.push(dragField);\n }\n _this.element.innerHTML = '';\n if (cols.length && !_this.element.classList.contains('e-grouped')) {\n _this.element.classList.add('e-grouped');\n }\n _this.reorderingColumns = cols;\n for (var c = 0; c < cols.length; c++) {\n _this.addColToGroupDrop(cols[parseInt(c.toString(), 10)]);\n }\n }\n else {\n _this.addLabel();\n _this.removeColFromGroupDrop(dragField);\n }\n };\n this.drop = function (e) {\n var gObj = _this.parent;\n var column = gObj.getColumnByUid(e.droppedElement.getAttribute('e-mappinguid'));\n _this.element.classList.remove('e-hover');\n remove(e.droppedElement);\n _this.aria.setDropTarget(_this.parent.element.querySelector('.e-groupdroparea'), false);\n _this.aria.setGrabbed(_this.parent.getHeaderTable().querySelector('[aria-grabbed=true]'), false);\n if (isNullOrUndefined(column) || column.allowGrouping === false ||\n parentsUntil(gObj.getColumnHeaderByUid(column.uid), 'e-grid').getAttribute('id') !==\n gObj.element.getAttribute('id')) {\n _this.parent.log('action_disabled_column', { moduleName: _this.getModuleName(), columnName: column ? column.headerText : undefined });\n return;\n }\n _this.groupColumn(column.field);\n };\n this.contentRefresh = true;\n this.aria = new AriaService();\n this.parent = parent;\n this.groupSettings = groupSettings;\n this.serviceLocator = serviceLocator;\n this.sortedColumns = sortedColumns;\n this.focus = serviceLocator.getService('focus');\n this.addEventListener();\n this.groupGenerator = new GroupModelGenerator(this.parent);\n }\n Group.prototype.addLabel = function () {\n if (!this.element.getElementsByClassName('e-group-animator').length) {\n var dragLabel = this.l10n.getConstant('GroupDropArea');\n this.element.innerHTML = dragLabel;\n this.element.classList.remove('e-grouped');\n }\n };\n Group.prototype.rearrangeGroup = function () {\n this.sortRequired = false;\n this.updateModel();\n };\n Group.prototype.columnDrag = function (e) {\n if (this.groupSettings.allowReordering && e.column.allowGrouping) {\n this.animateDropper(e);\n }\n var cloneElement = this.parent.element.querySelector('.e-cloneproperties');\n if (!this.parent.allowReordering) {\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);\n }\n if (!(e.column.allowGrouping && (parentsUntil(e.target, 'e-groupdroparea') ||\n (parentsUntil(e.target, 'e-headercell') &&\n parentsUntil(e.target, 'e-headercell').isEqualNode(this.parent.getColumnHeaderByField(e.column.field))))) &&\n !(this.parent.allowReordering && parentsUntil(e.target, 'e-headercell'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n if (e.target.classList.contains('e-groupdroparea')) {\n this.element.classList.add('e-hover');\n }\n else {\n this.element.classList.remove('e-hover');\n }\n };\n Group.prototype.columnDragStart = function (e) {\n if (e.target.classList.contains('e-stackedheadercell')) {\n return;\n }\n var dropArea = this.parent.element.querySelector('.e-groupdroparea');\n this.aria.setDropTarget(dropArea, e.column.allowGrouping);\n var element = e.target.classList.contains('e-headercell') ? e.target : parentsUntil(e.target, 'e-headercell');\n this.aria.setGrabbed(element, true, !e.column.allowGrouping);\n };\n Group.prototype.columnDrop = function (e) {\n var gObj = this.parent;\n if (e.droppedElement.getAttribute('action') === 'grouping') {\n var column = gObj.getColumnByUid(e.droppedElement.getAttribute('e-mappinguid'));\n if (isNullOrUndefined(column) || column.allowGrouping === false ||\n parentsUntil(gObj.getColumnHeaderByUid(column.uid), 'e-grid').getAttribute('id') !==\n gObj.element.getAttribute('id')) {\n return;\n }\n this.ungroupColumn(column.field);\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Group.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.groupComplete, this.onActionComplete, this);\n this.parent.on(events.ungroupComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.click, this.clickHandler, this);\n this.parent.on(events.columnDrag, this.columnDrag, this);\n this.parent.on(events.columnDragStart, this.columnDragStart, this);\n this.parent.on(events.headerDrop, this.columnDrop, this);\n this.parent.on(events.columnDrop, this.columnDrop, this);\n this.parent.on(events.headerRefreshed, this.refreshSortIcons, this);\n this.parent.on(events.sortComplete, this.refreshSortIcons, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.onEmpty, this.initialEnd, this);\n this.parent.on(events.initialEnd, this.render, this);\n this.parent.on(events.groupAggregates, this.onGroupAggregates, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on('group-expand-collapse', this.updateExpand, this);\n this.parent.on('persist-data-changed', this.initialEnd, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Group.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.render);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.groupComplete, this.onActionComplete);\n this.parent.off(events.ungroupComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.columnDrag, this.columnDrag);\n this.parent.off(events.columnDragStart, this.columnDragStart);\n this.parent.off(events.columnDrop, this.columnDrop);\n this.parent.off(events.headerDrop, this.columnDrop);\n this.parent.off(events.headerRefreshed, this.refreshSortIcons);\n this.parent.off(events.sortComplete, this.refreshSortIcons);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.groupAggregates, this.onGroupAggregates);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off('group-expand-collapse', this.updateExpand);\n };\n Group.prototype.initialEnd = function () {\n var gObj = this.parent;\n this.parent.off(events.contentReady, this.initialEnd);\n this.parent.off(events.onEmpty, this.initialEnd);\n if (this.parent.getColumns().length && this.groupSettings.columns.length) {\n this.contentRefresh = false;\n for (var _i = 0, _a = gObj.groupSettings.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n this.groupColumn(col);\n }\n this.contentRefresh = true;\n }\n };\n Group.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n if (e.target && parentsUntil(e.target, 'e-groupheadercell') && (e.action === 'tab' || e.action === 'shiftTab')) {\n var focusableGroupedItems = this.getFocusableGroupedItems();\n if ((e.action === 'tab' && e.target === focusableGroupedItems[focusableGroupedItems.length - 1])\n || (e.action === 'shiftTab' && e.target === focusableGroupedItems[0])) {\n return;\n }\n for (var i = 0; i < focusableGroupedItems.length; i++) {\n if (e.target === focusableGroupedItems[parseInt(i.toString(), 10)]) {\n e.preventDefault();\n var index = e.action === 'tab' ? i + 1 : i - 1;\n focusableGroupedItems[parseInt(index.toString(), 10)].focus();\n return;\n }\n }\n }\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'downArrow') {\n e.action = 'ctrlDownArrow';\n }\n else if (e.action === 'upArrow') {\n e.action = 'ctrlUpArrow';\n }\n }\n if (e.action !== 'ctrlSpace' && (!this.groupSettings.columns.length ||\n ['altDownArrow', 'altUpArrow', 'ctrlDownArrow', 'ctrlUpArrow', 'enter'].indexOf(e.action) === -1)) {\n return;\n }\n switch (e.action) {\n case 'altDownArrow':\n case 'altUpArrow':\n // eslint-disable-next-line no-case-declarations\n var selected = gObj.allowSelection ? gObj.getSelectedRowIndexes() : [];\n if (selected.length) {\n e.preventDefault();\n var rows = gObj.getContentTable().querySelector(literals.tbody).children;\n var dataRow = gObj.getDataRows()[selected[selected.length - 1]];\n var grpRow = void 0;\n for (var i = dataRow.rowIndex; i >= 0; i--) {\n if (!rows[parseInt(i.toString(), 10)].classList.contains(literals.row) && !rows[parseInt(i.toString(), 10)].classList.contains('e-detailrow')) {\n grpRow = rows[parseInt(i.toString(), 10)];\n break;\n }\n }\n this.expandCollapseRows(grpRow.querySelector(e.action === 'altUpArrow' ?\n '.e-recordplusexpand' : '.e-recordpluscollapse'));\n }\n break;\n case 'ctrlDownArrow':\n e.preventDefault();\n this.expandAll();\n break;\n case 'ctrlUpArrow':\n e.preventDefault();\n this.collapseAll();\n break;\n case 'enter':\n if (e.target.classList.contains('e-groupsort')) {\n this.groupSortFocus = true;\n e.preventDefault();\n this.applySortFromTarget(e.target);\n break;\n }\n else if (e.target.classList.contains('e-ungroupbutton')) {\n this.groupCancelFocus = true;\n e.preventDefault();\n this.unGroupFromTarget(e.target);\n break;\n }\n if (this.parent.isEdit || (closest(e.target, '#' + this.parent.element.id + '_searchbar') !== null) ||\n parentsUntil(e.target, 'e-pager') || parentsUntil(e.target, 'e-toolbar')) {\n return;\n }\n // eslint-disable-next-line no-case-declarations\n var element = this.focus.getFocusedElement();\n if (element && (element.classList.contains('e-icon-grightarrow') || element.classList.contains('e-icon-gdownarrow'))) {\n element = element.parentElement;\n }\n // eslint-disable-next-line no-case-declarations\n var row = element ? element.parentElement.querySelector('[class^=\"e-record\"]') : null;\n if (!row) {\n break;\n }\n if (element.children.length && (element.children[0].classList.contains('e-icon-grightarrow') ||\n element.children[0].classList.contains('e-icon-gdownarrow'))) {\n e.preventDefault();\n this.expandCollapseRows(row);\n }\n break;\n case 'ctrlSpace':\n // eslint-disable-next-line no-case-declarations\n var elem = gObj.focusModule.currentInfo.element;\n if (elem && elem.classList.contains('e-headercell')) {\n e.preventDefault();\n var column = gObj.getColumnByUid(elem.firstElementChild.getAttribute('e-mappinguid'));\n if (column.field && gObj.groupSettings.columns.indexOf(column.field) < 0) {\n this.groupColumn(column.field);\n }\n else {\n this.ungroupColumn(column.field);\n }\n }\n break;\n }\n };\n /**\n * @returns {Element[]} - Return the focusable grouping items\n * @hidden */\n Group.prototype.getFocusableGroupedItems = function () {\n var focusableGroupedItems = [];\n if (this.groupSettings.columns.length) {\n var focusableGroupedHeaderItems = this.element.querySelectorAll('.e-groupheadercell');\n for (var i = 0; i < focusableGroupedHeaderItems.length; i++) {\n focusableGroupedItems.push(focusableGroupedHeaderItems[parseInt(i.toString(), 10)].querySelector('.e-grouptext'));\n focusableGroupedItems.push(focusableGroupedHeaderItems[parseInt(i.toString(), 10)].querySelector('.e-groupsort'));\n focusableGroupedItems.push(focusableGroupedHeaderItems[parseInt(i.toString(), 10)].querySelector('.e-ungroupbutton'));\n }\n }\n return focusableGroupedItems;\n };\n Group.prototype.wireEvent = function () {\n EventHandler.add(this.element, 'focusin', this.onFocusIn, this);\n EventHandler.add(this.element, 'focusout', this.onFocusOut, this);\n EventHandler.add(this.parent.element, 'auxclick', this.auxilaryclickHandler, this);\n };\n Group.prototype.unWireEvent = function () {\n EventHandler.remove(this.element, 'focusin', this.onFocusIn);\n EventHandler.remove(this.element, 'focusout', this.onFocusOut);\n EventHandler.remove(this.parent.element, 'auxclick', this.auxilaryclickHandler);\n };\n Group.prototype.onFocusIn = function (e) {\n if (this.parent.focusModule.currentInfo && this.parent.focusModule.currentInfo.element) {\n removeClass([this.parent.focusModule.currentInfo.element, this.parent.focusModule.currentInfo.elementToFocus], ['e-focused', 'e-focus']);\n this.parent.focusModule.currentInfo.element.tabIndex = -1;\n }\n this.addOrRemoveFocus(e);\n };\n Group.prototype.onFocusOut = function (e) {\n this.addOrRemoveFocus(e);\n };\n Group.prototype.addOrRemoveFocus = function (e) {\n if (e.target.classList.contains('e-groupdroparea') || e.target.classList.contains('e-grouptext')\n || e.target.classList.contains('e-groupsort')\n || e.target.classList.contains('e-ungroupbutton')) {\n var target = e.target.classList.contains('e-grouptext') ?\n e.target.parentElement.parentElement : e.target;\n if (e.type === 'focusin') {\n this.parent.focusModule.currentInfo.element = e.target;\n this.parent.focusModule.currentInfo.elementToFocus = e.target;\n addClass([target], ['e-focused', 'e-focus']);\n e.target.tabIndex = 0;\n }\n else {\n removeClass([target], ['e-focused', 'e-focus']);\n e.target.tabIndex = -1;\n }\n }\n };\n Group.prototype.clickHandler = function (e) {\n if (e.target.classList.contains('e-grouptext')) {\n this.groupTextFocus = true;\n }\n if (e.target.classList.contains('e-groupsort')) {\n this.groupSortFocus = true;\n }\n if (e.target.classList.contains('e-ungroupbutton')) {\n this.groupCancelFocus = true;\n }\n if (e.target.classList.contains('e-icon-grightarrow') || e.target.classList.contains('e-icon-gdownarrow')) {\n e.preventDefault();\n }\n var trgtEle = parentsUntil(e.target, 'e-recordplusexpand') ||\n parentsUntil(e.target, 'e-recordpluscollapse');\n if (trgtEle && (trgtEle.children[0].classList.contains('e-icon-gdownarrow') || trgtEle.children[0].classList.contains('e-icon-grightarrow'))) {\n this.expandCollapseRows(e.target);\n }\n this.applySortFromTarget(e.target);\n this.unGroupFromTarget(e.target);\n this.toogleGroupFromHeader(e.target);\n };\n Group.prototype.auxilaryclickHandler = function (e) {\n if (e.target.classList.contains('e-icon-grightarrow') || e.target.classList.contains('e-icon-gdownarrow')\n && (e.button === 1)) {\n e.preventDefault();\n }\n };\n Group.prototype.unGroupFromTarget = function (target) {\n if (target.classList.contains('e-ungroupbutton')) {\n this.ungroupColumn(target.parentElement.getAttribute('ej-mappingname'));\n }\n };\n Group.prototype.toogleGroupFromHeader = function (target) {\n if (this.groupSettings.showToggleButton) {\n if (target.classList.contains('e-grptogglebtn')) {\n if (target.classList.contains('e-toggleungroup')) {\n this.ungroupColumn(this.parent.getColumnByUid(target.parentElement.getAttribute('e-mappinguid')).field);\n }\n else {\n this.groupColumn(this.parent.getColumnByUid(target.parentElement.getAttribute('e-mappinguid')).field);\n }\n }\n else {\n if (target.classList.contains('e-toggleungroup')) {\n this.ungroupColumn(target.parentElement.getAttribute('ej-mappingname'));\n }\n }\n }\n };\n Group.prototype.applySortFromTarget = function (target) {\n var gObj = this.parent;\n var gHeader = closest(target, '.e-groupheadercell');\n if (gObj.allowSorting && gHeader && !target.classList.contains('e-ungroupbutton') &&\n !target.classList.contains('e-toggleungroup')) {\n var field = gHeader.firstElementChild.getAttribute('ej-mappingname');\n if (gObj.getColumnHeaderByField(field).getElementsByClassName('e-ascending').length) {\n gObj.sortColumn(field, 'Descending', true);\n }\n else {\n gObj.sortColumn(field, 'Ascending', true);\n }\n }\n };\n /**\n * Expands or collapses grouped rows by target element.\n *\n * @param {Element} target - Defines the target element of the grouped row.\n * @returns {void}\n */\n Group.prototype.expandCollapseRows = function (target) {\n var trgt = parentsUntil(target, 'e-recordplusexpand') ||\n parentsUntil(target, 'e-recordpluscollapse');\n if (trgt) {\n var rowNodes = [].slice.call(this.parent.getContentTable().querySelector(literals.tbody).children);\n if (this.parent.editSettings.showAddNewRow) {\n if (rowNodes[0].classList.contains('e-addedrow')) {\n rowNodes.shift();\n }\n else if (rowNodes[rowNodes.length - 1].classList.contains('e-addedrow')) {\n rowNodes.pop();\n }\n }\n var isHide = void 0;\n var dataManager = void 0;\n var query = void 0;\n var gObj = this.parent;\n var indent = trgt.parentElement.getElementsByClassName('e-indentcell').length;\n var uid = trgt.parentElement.getAttribute('data-uid');\n var captionRow = gObj.getRowObjectFromUID(uid);\n var expand = false;\n if (trgt.classList.contains('e-recordpluscollapse')) {\n addClass([trgt], 'e-recordplusexpand');\n removeClass([trgt], 'e-recordpluscollapse');\n trgt.firstElementChild.className = 'e-icons e-gdiagonaldown e-icon-gdownarrow';\n trgt.firstElementChild.setAttribute('title', this.l10n.getConstant('Expanded'));\n expand = true;\n captionRow.isExpand = true;\n if (isGroupAdaptive(gObj)) {\n this.updateVirtualRows(gObj, target, expand, query, dataManager);\n }\n if (this.parent.groupSettings.enableLazyLoading) {\n if ((this.parent.filterSettings.columns.length || this.parent.sortSettings.columns.length ||\n this.parent.searchSettings.key.length) && this.parent.getContent().firstElementChild.scrollTop === 0) {\n this.parent.contentModule.isTop = true;\n }\n (this.parent.enableVirtualization ? this.parent.lazyLoadRender :\n this.parent.contentModule).captionExpand(trgt.parentElement);\n }\n }\n else {\n isHide = true;\n captionRow.isExpand = false;\n removeClass([trgt], 'e-recordplusexpand');\n addClass([trgt], 'e-recordpluscollapse');\n trgt.firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';\n trgt.firstElementChild.setAttribute('title', this.l10n.getConstant('Collapsed'));\n if (isGroupAdaptive(gObj)) {\n this.updateVirtualRows(gObj, target, !isHide, query, dataManager);\n }\n if (this.parent.groupSettings.enableLazyLoading) {\n (this.parent.enableVirtualization ? this.parent.lazyLoadRender :\n this.parent.contentModule).captionCollapse(trgt.parentElement);\n }\n }\n this.aria.setExpand(trgt, expand);\n if (!isGroupAdaptive(gObj) && !this.parent.groupSettings.enableLazyLoading) {\n var rowObjs = gObj.getRowsObject();\n var startIdx = rowObjs.indexOf(captionRow);\n var rowsState = {};\n var cacheStartIdx = gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings &&\n gObj.infiniteScrollSettings.enableCache && rowObjs.length !== rowNodes.length ?\n Array.from(rowNodes).indexOf(trgt.parentElement) : undefined;\n for (var i = startIdx; i < rowObjs.length; i++) {\n if (i > startIdx && rowObjs[parseInt(i.toString(), 10)].indent === indent) {\n break;\n }\n if (rowObjs[parseInt(i.toString(), 10)].isDetailRow) {\n var visible = rowObjs[i - 1].isExpand && rowObjs[i - 1].visible;\n if (cacheStartIdx && cacheStartIdx > 0 && cacheStartIdx < rowNodes.length) {\n rowNodes[parseInt(cacheStartIdx.toString(), 10)].style.display = visible ? '' : 'none';\n }\n else if (isNullOrUndefined(cacheStartIdx)) {\n rowNodes[parseInt(i.toString(), 10)].style.display = visible ? '' : 'none';\n }\n }\n else if (rowsState[rowObjs[parseInt(i.toString(), 10)].parentUid] === false) {\n rowObjs[parseInt(i.toString(), 10)].visible = false;\n if (cacheStartIdx && cacheStartIdx > 0 && cacheStartIdx < rowNodes.length) {\n rowNodes[parseInt(cacheStartIdx.toString(), 10)].style.display = 'none';\n }\n else if (isNullOrUndefined(cacheStartIdx)) {\n rowNodes[parseInt(i.toString(), 10)].style.display = 'none';\n }\n }\n else {\n if (!(rowObjs[parseInt(i.toString(), 10)].isDataRow || rowObjs[parseInt(i.toString(), 10)].isCaptionRow\n || rowObjs[parseInt(i.toString(), 10)].isDetailRow || rowObjs[parseInt(i.toString(), 10)].isAggregateRow)) {\n var visible = rowObjs[parseInt(i.toString(), 10)].cells\n .some(function (cell) { return cell.isDataCell && cell.visible; });\n if (visible === rowObjs[parseInt(i.toString(), 10)].visible) {\n continue;\n }\n }\n rowObjs[parseInt(i.toString(), 10)].visible = true;\n if (cacheStartIdx && cacheStartIdx > 0 && cacheStartIdx < rowNodes.length) {\n rowNodes[parseInt(cacheStartIdx.toString(), 10)].style.display = '';\n rowNodes[parseInt(cacheStartIdx.toString(), 10)].classList.remove('e-hide');\n }\n else if (isNullOrUndefined(cacheStartIdx)) {\n rowNodes[parseInt(i.toString(), 10)].style.display = '';\n rowNodes[parseInt(i.toString(), 10)].classList.remove('e-hide');\n }\n }\n if (rowObjs[parseInt(i.toString(), 10)].isCaptionRow) {\n rowsState[rowObjs[parseInt(i.toString(), 10)].uid] = rowObjs[parseInt(i.toString(), 10)].isExpand\n && rowObjs[parseInt(i.toString(), 10)].visible;\n }\n if (!isNullOrUndefined(cacheStartIdx)) {\n cacheStartIdx++;\n }\n }\n this.lastCaptionRowBorder();\n this.parent.notify(events.refreshExpandandCollapse, { rows: this.parent.getRowsObject() });\n }\n if (!this.parent.enableInfiniteScrolling || !this.parent.groupSettings.enableLazyLoading) {\n this.parent.notify(events.captionActionComplete, { isCollapse: isHide, parentUid: uid });\n }\n }\n };\n /**\n * The function is used to set border in last row\n *\n * @returns { void }\n * @hidden\n */\n Group.prototype.lastCaptionRowBorder = function () {\n var table = this.parent.getContentTable();\n var clientHeight = this.parent.getContent().clientHeight;\n if ((!this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling) ||\n this.parent.groupSettings.enableLazyLoading) {\n if (table.scrollHeight < clientHeight || this.isAppliedCaptionRowBorder) {\n if (this.isAppliedCaptionRowBorder || table.querySelector('.e-lastrowcell')) {\n var borderCells = table.querySelectorAll('.e-lastrowcell');\n for (var i = 0, len = borderCells.length; i < len; i++) {\n removeClass([borderCells[parseInt(i.toString(), 10)]], 'e-lastrowcell');\n }\n this.isAppliedCaptionRowBorder = false;\n }\n var rowNodes = this.parent.getContentTable().querySelector(literals.tbody).children;\n var lastRow = rowNodes[rowNodes.length - 1];\n if (lastRow.style.display !== 'none' && !lastRow.classList.contains('e-groupcaptionrow')) {\n if (table.scrollHeight < clientHeight) {\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n this.isAppliedCaptionRowBorder = true;\n }\n }\n else {\n for (var i = rowNodes.length - 1, len = 0; i > len; i--) {\n if (rowNodes[parseInt(i.toString(), 10)].style.display !== 'none'\n && rowNodes[parseInt(i.toString(), 10)].classList.contains('e-groupcaptionrow')) {\n if (rowNodes[parseInt(i.toString(), 10)].querySelector('.e-recordpluscollapse')) {\n addClass(rowNodes[parseInt(i.toString(), 10)].childNodes, 'e-lastrowcell');\n this.isAppliedCaptionRowBorder = true;\n break;\n }\n }\n }\n }\n }\n }\n };\n Group.prototype.updateVirtualRows = function (gObj, target, isExpand, query, dataManager) {\n var rObj = gObj.getRowObjectFromUID(target.closest('tr').getAttribute('data-uid'));\n rObj.isExpand = isExpand;\n updatecloneRow(gObj);\n this.parent.notify(events.refreshVirtualMaxPage, {});\n query = gObj.getDataModule().generateQuery(false);\n query.queries = gObj.getDataModule().aggregateQuery(gObj.getQuery().clone()).queries;\n var args = { requestType: 'virtualscroll', rowObject: rObj };\n if (gObj.contentModule) {\n args.virtualInfo = gObj.contentModule.prevInfo;\n }\n dataManager = gObj.getDataModule().getData(args, query.requiresCount());\n dataManager.then(function (e) { return gObj.renderModule.dataManagerSuccess(e, args); });\n };\n Group.prototype.expandCollapse = function (isExpand) {\n if (!this.parent.groupSettings.columns.length) {\n return;\n }\n if (!isExpand) {\n this.parent.notify(events.initialCollapse, isExpand);\n }\n var rowNodes = this.parent.getContentTable().querySelector(literals.tbody).children;\n var rowObjs = this.parent.getRowsObject();\n var row;\n for (var i = 0, len = rowNodes.length; i < len; i++) {\n if (rowNodes[parseInt(i.toString(), 10)].querySelectorAll('.e-recordplusexpand, .e-recordpluscollapse').length) {\n row = rowNodes[parseInt(i.toString(), 10)].querySelector(isExpand ? '.e-recordpluscollapse' : '.e-recordplusexpand');\n if (row) {\n if (isExpand) {\n row.className = 'e-recordplusexpand';\n row.firstElementChild.className = 'e-icons e-gdiagonaldown e-icon-gdownarrow';\n row.setAttribute('aria-expanded', 'true');\n row.firstElementChild.setAttribute('title', this.l10n.getConstant('Expanded'));\n }\n else {\n row.className = 'e-recordpluscollapse';\n row.firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';\n row.setAttribute('aria-expanded', 'false');\n row.firstElementChild.setAttribute('title', this.l10n.getConstant('Collapsed'));\n }\n }\n if (!(rowNodes[parseInt(i.toString(), 10)].firstElementChild.classList.contains('e-recordplusexpand') ||\n rowNodes[parseInt(i.toString(), 10)].firstElementChild.classList.contains('e-recordpluscollapse'))) {\n rowNodes[parseInt(i.toString(), 10)].style.display = isExpand ? '' : 'none';\n }\n }\n else {\n rowNodes[parseInt(i.toString(), 10)].style.display = isExpand ? '' : 'none';\n }\n if (rowObjs[parseInt(i.toString(), 10)].isCaptionRow) {\n rowObjs[parseInt(i.toString(), 10)].isExpand = isExpand ? true : false;\n }\n }\n this.parent.updateVisibleExpandCollapseRows();\n this.lastCaptionRowBorder();\n this.parent.notify(events.refreshExpandandCollapse, { rows: this.parent.getRowsObject() });\n };\n /**\n * Expands all the grouped rows of the Grid.\n *\n * @returns {void}\n */\n Group.prototype.expandAll = function () {\n this.expandCollapse(true);\n };\n /**\n * Collapses all the grouped rows of the Grid.\n *\n * @returns {void}\n */\n Group.prototype.collapseAll = function () {\n this.expandCollapse(false);\n };\n /**\n * The function is used to render grouping\n *\n * @returns {void}\n * @hidden\n */\n Group.prototype.render = function () {\n this.l10n = this.serviceLocator.getService('localization');\n this.renderGroupDropArea();\n this.initDragAndDrop();\n this.refreshToggleBtn();\n this.wireEvent();\n };\n Group.prototype.renderGroupDropArea = function () {\n var groupElem = this.parent.element.querySelector('.e-groupdroparea');\n if (groupElem) {\n remove(groupElem);\n }\n this.element = this.parent.createElement('div', { className: 'e-groupdroparea', attrs: { 'tabindex': '-1' } });\n if (this.groupSettings.allowReordering) {\n this.element.classList.add('e-group-animate');\n }\n this.updateGroupDropArea();\n this.parent.element.insertBefore(this.element, this.parent.element.firstChild);\n if (!this.groupSettings.showDropArea || this.parent.rowRenderingMode === 'Vertical') {\n this.element.style.display = 'none';\n }\n };\n Group.prototype.updateGroupDropArea = function (clear) {\n if (this.groupSettings.showDropArea && !this.groupSettings.columns.length) {\n var dragLabel = this.l10n.getConstant('GroupDropArea');\n this.element.innerHTML = dragLabel;\n this.element.classList.remove('e-grouped');\n }\n else {\n if ((this.element.innerHTML === this.l10n.getConstant('GroupDropArea') && (this.groupSettings.columns.length === 1\n || !this.isAppliedGroup && !this.isAppliedUnGroup)) || clear) {\n this.element.innerHTML = '';\n }\n this.element.classList.add('e-grouped');\n }\n };\n Group.prototype.initDragAndDrop = function () {\n this.initializeGHeaderDrop();\n this.initializeGHeaderDrag();\n };\n Group.prototype.initializeGHeaderDrag = function () {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var drag = new Draggable(this.element, {\n dragTarget: this.groupSettings.allowReordering ? '.e-drag' : '.e-groupheadercell',\n distance: this.groupSettings.allowReordering ? -10 : 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop\n });\n };\n Group.prototype.initializeGHeaderDrop = function () {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var drop = new Droppable(this.element, {\n accept: '.e-dragclone',\n drop: this.drop\n });\n };\n /**\n * Groups a column by column name.\n *\n * @param {string} columnName - Defines the column name to group.\n * @returns {void}\n */\n Group.prototype.groupColumn = function (columnName) {\n var gObj = this.parent;\n var column = gObj.getColumnByField(columnName);\n if (isNullOrUndefined(column) || column.allowGrouping === false ||\n (this.contentRefresh && this.groupSettings.columns.indexOf(columnName) > -1)) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: column.headerText });\n return;\n }\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.groupColumn, arg1: columnName });\n return;\n }\n column.visible = gObj.groupSettings.showGroupedColumn;\n this.colName = columnName;\n this.isAppliedGroup = true;\n if (this.contentRefresh) {\n this.updateModel();\n }\n else {\n this.addColToGroupDrop(columnName);\n }\n this.updateGroupDropArea();\n this.isAppliedGroup = false;\n };\n /**\n * Ungroups a column by column name.\n *\n * @param {string} columnName - Defines the column name to ungroup.\n * @returns {void}\n */\n Group.prototype.ungroupColumn = function (columnName) {\n var gObj = this.parent;\n var column = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (c) { return c.field === columnName; })[0] : gObj.getColumnByField(columnName);\n if (isNullOrUndefined(column) || column.allowGrouping === false || this.groupSettings.columns.indexOf(columnName) < 0) {\n return;\n }\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.ungroupColumn, arg1: columnName });\n return;\n }\n column.visible = true;\n this.colName = column.field;\n var columns = JSON.parse(JSON.stringify(this.groupSettings.columns));\n columns.splice(columns.indexOf(this.colName), 1);\n if (this.sortedColumns.indexOf(columnName) < 0) {\n for (var i = 0, len = gObj.sortSettings.columns.length; i < len; i++) {\n if (columnName === gObj.sortSettings.columns[parseInt(i.toString(), 10)].field) {\n gObj.sortSettings.columns.splice(i, 1);\n break;\n }\n }\n }\n if (this.groupSettings.allowReordering) {\n this.reorderingColumns = columns;\n }\n this.groupSettings.columns = columns;\n if (gObj.allowGrouping) {\n this.isAppliedUnGroup = true;\n this.parent.dataBind();\n }\n };\n /**\n * The function used to update groupSettings\n *\n * @returns {void}\n * @hidden\n */\n Group.prototype.updateModel = function () {\n var columns = JSON.parse(JSON.stringify(this.groupSettings.columns));\n columns = this.reorderingColumns.length ? JSON.parse(JSON.stringify(this.reorderingColumns)) : columns;\n if (this.sortRequired) {\n if (columns.indexOf(this.colName) === -1) {\n columns.push(this.colName);\n }\n this.groupAddSortingQuery(this.colName);\n }\n this.sortRequired = true;\n this.parent.groupSettings.columns = columns;\n this.parent.dataBind();\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Group.prototype.onActionComplete = function (e) {\n if (e.requestType === 'grouping') {\n this.addColToGroupDrop(this.colName);\n }\n else {\n this.removeColFromGroupDrop(this.colName);\n }\n var args = this.groupSettings.columns.indexOf(this.colName) > -1 ? {\n columnName: this.colName, requestType: 'grouping', type: events.actionComplete\n } : { requestType: 'ungrouping', type: events.actionComplete };\n this.parent.trigger(events.actionComplete, extend(e, args));\n this.colName = null;\n };\n Group.prototype.groupAddSortingQuery = function (colName) {\n var i = 0;\n while (i < this.parent.sortSettings.columns.length) {\n if (this.parent.sortSettings.columns[parseInt(i.toString(), 10)].field === colName) {\n break;\n }\n i++;\n }\n if (this.parent.sortSettings.columns.length === i) {\n this.parent.sortSettings.columns.push({ field: colName, direction: 'Ascending', isFromGroup: true });\n }\n else if (!this.parent.allowSorting) {\n this.parent.sortSettings.columns[parseInt(i.toString(), 10)].direction = 'Ascending';\n }\n };\n Group.prototype.createElement = function (field) {\n var gObj = this.parent;\n var direction = 'Ascending';\n var animator = this.parent.createElement('div', { className: 'e-grid-icon e-group-animator' });\n var groupedColumn = this.parent.createElement('div', { className: 'e-grid-icon e-groupheadercell' });\n var childDiv = this.parent.createElement('div', { attrs: { 'ej-mappingname': field } });\n if (isComplexField(field)) {\n childDiv.setAttribute('ej-complexname', getComplexFieldID(field));\n }\n var column = this.parent.getColumnByField(field);\n //Todo headerTemplateID for grouped column, disableHtmlEncode\n var headerCell = gObj.getColumnHeaderByUid(column.uid);\n // if (!isNullOrUndefined(column.headerTemplate)) {\n // if (column.headerTemplate.indexOf('#') !== -1) {\n // childDiv.innerHTML = document.querySelector(column.headerTemplate).innerHTML.trim();\n // } else {\n // childDiv.innerHTML = column.headerTemplate;\n // }\n // childDiv.firstElementChild.classList.add('e-grouptext');\n // } else {\n if (this.groupSettings.allowReordering) {\n childDiv.appendChild(this.parent.createElement('span', {\n className: 'e-drag e-icons e-icon-drag', innerHTML: ' ',\n attrs: { title: 'Drag', tabindex: '-1', 'aria-label': this.l10n.getConstant('GroupedDrag') }\n }));\n }\n childDiv.appendChild(this.parent.createElement('span', {\n className: 'e-grouptext', innerHTML: column.headerText,\n attrs: { tabindex: '-1' }\n }));\n // }\n if (this.groupSettings.showToggleButton) {\n childDiv.appendChild(this.parent.createElement('span', {\n className: 'e-togglegroupbutton e-icons e-icon-ungroup e-toggleungroup', innerHTML: ' ',\n attrs: { tabindex: '-1', 'aria-label': this.l10n.getConstant('UnGroupAria') }\n }));\n }\n if (headerCell.querySelectorAll('.e-ascending,.e-descending').length) {\n direction = headerCell.querySelector('.e-ascending') ? 'Ascending' : 'Descending';\n }\n childDiv.appendChild(this.parent.createElement('span', {\n className: 'e-groupsort e-icons ' +\n ('e-' + direction.toLowerCase() + ' e-icon-' + direction.toLowerCase()), innerHTML: ' ',\n attrs: { tabindex: '-1', 'aria-label': this.l10n.getConstant('GroupedSortIcon') + column.headerText, role: 'button' }\n }));\n childDiv.appendChild(this.parent.createElement('span', {\n className: 'e-ungroupbutton e-icons e-icon-hide', innerHTML: ' ',\n attrs: { title: this.l10n.getConstant('UnGroup'),\n tabindex: '-1', 'aria-label': this.l10n.getConstant('UnGroupIcon') + column.headerText, role: 'button' },\n styles: this.groupSettings.showUngroupButton ? '' : 'display:none'\n }));\n groupedColumn.appendChild(childDiv);\n if (this.groupSettings.allowReordering) {\n animator.appendChild(groupedColumn);\n animator.appendChild(this.createSeparator());\n groupedColumn = animator;\n }\n return groupedColumn;\n };\n Group.prototype.addColToGroupDrop = function (field) {\n var groupElem = isComplexField(field) ? this.parent.element.querySelector('.e-groupdroparea div[ej-complexname=' +\n getParsedFieldID(getComplexFieldID(field)) + ']') : this.parent.element.querySelector('.e-groupdroparea div[ej-mappingname=' + getParsedFieldID(field) + ']');\n if (this.groupSettings.allowReordering && groupElem) {\n return;\n }\n var column = this.parent.getColumnByField(field);\n if (isNullOrUndefined(column)) {\n return;\n }\n var groupedColumn = this.createElement(field);\n if (this.groupSettings.allowReordering) {\n var index = this.element.getElementsByClassName('e-group-animator').length;\n groupedColumn.setAttribute('index', index.toString());\n }\n this.element.appendChild(groupedColumn);\n var focusModule = this.parent.focusModule;\n focusModule.setActive(true);\n var firstContentCellIndex = [0, 0];\n if (focusModule.active.matrix.matrix[firstContentCellIndex[0]][firstContentCellIndex[1]] === 0) {\n firstContentCellIndex = findCellIndex(focusModule.active.matrix.matrix, firstContentCellIndex, true);\n }\n focusModule.active.matrix.current = firstContentCellIndex;\n if (this.parent.editSettings.showAddNewRow) {\n this.parent.notify(events.showAddNewRowFocus, {});\n }\n else {\n focusModule.focus();\n }\n //Todo: rtl\n };\n Group.prototype.createSeparator = function () {\n return this.parent.createElement('span', {\n className: 'e-nextgroup e-icons e-icon-next', innerHTML: ' ',\n attrs: { tabindex: '-1', 'aria-label': this.l10n.getConstant('GroupSeperator') },\n styles: this.groupSettings.showUngroupButton ? '' : 'display:none'\n });\n };\n Group.prototype.refreshToggleBtn = function (isRemove) {\n if (this.groupSettings.showToggleButton) {\n var headers = [].slice.call(this.parent.getHeaderTable().getElementsByClassName('e-headercelldiv'));\n for (var i = 0, len = headers.length; i < len; i++) {\n if (!((headers[parseInt(i.toString(), 10)].classList.contains('e-emptycell')) || (headers[parseInt(i.toString(), 10)].classList.contains('e-headerchkcelldiv')))) {\n var column = this.parent.getColumnByUid(headers[parseInt(i.toString(), 10)].getAttribute('e-mappinguid'));\n if (!this.parent.showColumnMenu || (this.parent.showColumnMenu && !column.showColumnMenu)) {\n if (headers[parseInt(i.toString(), 10)].getElementsByClassName('e-grptogglebtn').length) {\n remove(headers[parseInt(i.toString(), 10)].querySelectorAll('.e-grptogglebtn')[0]);\n }\n if (!isRemove) {\n headers[parseInt(i.toString(), 10)].appendChild(this.parent.createElement('span', {\n className: 'e-grptogglebtn e-icons ' + (this.groupSettings.columns.indexOf(column.field) > -1 ?\n 'e-toggleungroup e-icon-ungroup' : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1',\n 'aria-label': isNullOrUndefined(this.l10n) ? this.parent.localeObj.getConstant('GroupButton')\n : this.l10n.getConstant('GroupButton') }\n }));\n }\n }\n }\n }\n }\n };\n Group.prototype.removeColFromGroupDrop = function (field) {\n if (!isNullOrUndefined(this.getGHeaderCell(field))) {\n var elem = this.getGHeaderCell(field);\n if (this.groupSettings.allowReordering) {\n var parent_1 = parentsUntil(elem, 'e-group-animator');\n remove(parent_1);\n }\n else {\n remove(elem);\n }\n this.updateGroupDropArea();\n if (this.parent.editSettings.showAddNewRow) {\n this.parent.notify(events.showAddNewRowFocus, {});\n }\n }\n this.isAppliedUnGroup = false;\n };\n Group.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n for (var _i = 0, _a = Object.keys(e.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'columns':\n // eslint-disable-next-line no-case-declarations\n var args = void 0;\n if (this.contentRefresh) {\n if (!this.isAppliedUnGroup) {\n if (!this.isAppliedGroup) {\n this.updateGroupDropArea(true);\n for (var j = 0; j < this.parent.sortSettings.columns.length; j++) {\n if (this.parent.sortSettings.columns[parseInt(j.toString(), 10)].isFromGroup) {\n this.parent.sortSettings.columns.splice(j, 1);\n j--;\n }\n }\n for (var i = 0; i < this.groupSettings.columns.length; i++) {\n this.colName = this.groupSettings.columns[parseInt(i.toString(), 10)];\n var col = this.parent.getColumnByField(this.colName);\n col.visible = this.parent.groupSettings.showGroupedColumn;\n this.groupAddSortingQuery(this.colName);\n if (i < this.groupSettings.columns.length - 1) {\n this.addColToGroupDrop(this.groupSettings.columns[parseInt(i.toString(), 10)]);\n }\n }\n }\n args = {\n columnName: this.colName, requestType: e.properties[\"\" + prop].length ? 'grouping' : 'ungrouping',\n type: events.actionBegin\n };\n }\n else {\n args = { columnName: this.colName, requestType: 'ungrouping', type: events.actionBegin };\n }\n if (!this.groupSettings.showGroupedColumn) {\n var columns = e.oldProperties[\"\" + prop];\n for (var i = 0; i < columns.length; i++) {\n if (e.properties[\"\" + prop].indexOf(columns[parseInt(i.toString(), 10)]) === -1) {\n this.parent.getColumnByField(columns[parseInt(i.toString(), 10)]).visible = true;\n }\n }\n }\n this.parent.notify(events.modelChanged, args);\n }\n break;\n case 'showDropArea':\n this.updateGroupDropArea();\n if (this.groupSettings.showDropArea) {\n this.element.style.display = '';\n this.parent.headerModule.refreshUI();\n }\n else {\n this.element.style.display = 'none';\n }\n if (this.parent.height === '100%') {\n this.parent.scrollModule.refresh();\n }\n break;\n case 'showGroupedColumn':\n this.updateGroupedColumn(this.groupSettings.showGroupedColumn);\n this.parent.notify(events.modelChanged, { requestType: 'refresh' });\n break;\n case 'showUngroupButton':\n this.updateButtonVisibility(this.groupSettings.showUngroupButton, 'e-ungroupbutton');\n break;\n case 'showToggleButton':\n this.updateButtonVisibility(this.groupSettings.showToggleButton, 'e-togglegroupbutton ');\n this.parent.refreshHeader();\n break;\n case 'enableLazyLoading':\n this.parent.freezeRefresh();\n break;\n }\n }\n };\n Group.prototype.updateGroupedColumn = function (isVisible) {\n for (var i = 0; i < this.groupSettings.columns.length; i++) {\n this.parent.getColumnByField(this.groupSettings.columns[parseInt(i.toString(), 10)]).visible = isVisible;\n }\n };\n Group.prototype.updateButtonVisibility = function (isVisible, className) {\n var gHeader = [].slice.call(this.element.getElementsByClassName(className));\n for (var i = 0; i < gHeader.length; i++) {\n gHeader[parseInt(i.toString(), 10)].style.display = isVisible ? '' : 'none';\n }\n };\n Group.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.render();\n }\n };\n /**\n * To destroy the reorder\n *\n * @returns {void}\n * @hidden\n */\n Group.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((this.parent.isDestroyed || !this.parent.allowGrouping) && !this.parent.refreshing) {\n this.clearGrouping();\n }\n this.unWireEvent();\n this.removeEventListener();\n this.refreshToggleBtn(true);\n if (this.element.parentNode) {\n remove(this.element);\n }\n //call ejdrag and drop destroy\n };\n /**\n * Clears all the grouped columns of the Grid.\n *\n * @returns {void}\n */\n Group.prototype.clearGrouping = function () {\n var cols = JSON.parse(JSON.stringify(this.groupSettings.columns));\n this.contentRefresh = false;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (i === (len - 1)) {\n this.contentRefresh = true;\n }\n this.ungroupColumn(cols[parseInt(i.toString(), 10)]);\n }\n this.contentRefresh = true;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Group.prototype.getModuleName = function () {\n return 'group';\n };\n Group.prototype.refreshSortIcons = function () {\n var gObj = this.parent;\n var header;\n var cols = gObj.sortSettings.columns;\n var gCols = gObj.groupSettings.columns;\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n this.refreshToggleBtn();\n for (var i = 0, len = cols.length; i < len; i++) {\n if (fieldNames.indexOf(cols[parseInt(i.toString(), 10)].field) === -1) {\n continue;\n }\n header = gObj.getColumnHeaderByField(cols[parseInt(i.toString(), 10)].field);\n if (!gObj.allowSorting && (this.sortedColumns.indexOf(cols[parseInt(i.toString(), 10)].field) > -1 ||\n this.groupSettings.columns.indexOf(cols[parseInt(i.toString(), 10)].field) > -1)) {\n classList(header.querySelector('.e-sortfilterdiv'), ['e-ascending', 'e-icon-ascending'], []);\n if (cols.length > 1) {\n header.querySelector('.e-headercelldiv').appendChild(this.parent.createElement('span', { className: 'e-sortnumber', innerHTML: (i + 1).toString() }));\n }\n }\n else if (this.getGHeaderCell(cols[parseInt(i.toString(), 10)].field) && this.getGHeaderCell(cols[parseInt(i.toString(), 10)].field).getElementsByClassName('e-groupsort').length) {\n if (cols[parseInt(i.toString(), 10)].direction === 'Ascending') {\n classList(this.getGHeaderCell(cols[parseInt(i.toString(), 10)].field).querySelector('.e-groupsort'), ['e-ascending', 'e-icon-ascending'], ['e-descending', 'e-icon-descending']);\n }\n else {\n classList(this.getGHeaderCell(cols[parseInt(i.toString(), 10)].field).querySelector('.e-groupsort'), ['e-descending', 'e-icon-descending'], ['e-ascending', 'e-icon-ascending']);\n }\n }\n }\n for (var i = 0, len = gCols.length; i < len; i++) {\n if (fieldNames.indexOf(gCols[parseInt(i.toString(), 10)]) === -1) {\n continue;\n }\n gObj.getColumnHeaderByField(gCols[parseInt(i.toString(), 10)]).setAttribute('aria-grouped', 'true');\n }\n };\n Group.prototype.getGHeaderCell = function (field) {\n if (this.element && this.element.querySelector('[ej-mappingname=\"' + field + '\"]')) {\n return this.element.querySelector('[ej-mappingname=\"' + field + '\"]').parentElement;\n }\n return null;\n };\n Group.prototype.onGroupAggregates = function (editedData) {\n if (this.parent.groupSettings.enableLazyLoading) {\n if (this.parent.editSettings.mode !== 'Batch') {\n this.updateLazyLoadGroupAggregates(editedData);\n }\n return;\n }\n var aggregates = this.iterateGroupAggregates(editedData);\n var rowData = this.groupGenerator.generateRows(aggregates, {});\n var summaryRows = this.parent.getRowsObject().filter(function (row) { return !row.isDataRow; });\n var updateSummaryRows = rowData.filter(function (data) { return !data.isDataRow; });\n if (this.parent.isReact || this.parent.isVue) {\n this.parent.destroyTemplate(['groupFooterTemplate', 'groupCaptionTemplate', 'footerTemplate']);\n }\n for (var i = 0; i < updateSummaryRows.length; i++) {\n var row = updateSummaryRows[parseInt(i.toString(), 10)];\n var cells = row.cells.filter(function (cell) { return cell.isDataCell; });\n var args = { cells: cells, data: row.data, dataUid: summaryRows[parseInt(i.toString(), 10)] ? summaryRows[parseInt(i.toString(), 10)].uid : '' };\n this.parent.notify(events.refreshAggregateCell, args);\n }\n };\n Group.prototype.updateLazyLoadGroupAggregates = function (data, remoteResult) {\n var _this = this;\n var groupCaptionTemplates = this.getGroupAggregateTemplates(true);\n var groupFooterTemplates = this.getGroupAggregateTemplates(false);\n if (!groupCaptionTemplates.length && !groupFooterTemplates.length) {\n return;\n }\n var gObj = this.parent;\n var isRemote = gObj.getDataModule().isRemote();\n var updatedData = data[0];\n var editedRow = data.row;\n var groupedCols = gObj.groupSettings.columns;\n var groupLazyLoadRenderer = gObj.contentModule;\n var groupCache = groupLazyLoadRenderer.getGroupCache();\n var currentPageGroupCache = groupCache[gObj.pageSettings.currentPage];\n var result = remoteResult ? remoteResult : [];\n var _loop_1 = function (i) {\n var groupField = groupedCols[parseInt(i.toString(), 10)];\n var groupKey = updatedData[\"\" + groupField];\n var groupCaptionRowObject = this_1.getGroupCaptionRowObject(editedRow, groupedCols.length - i);\n if (isRemote && result.length) {\n if (i !== 0) {\n var prevGroupField = groupedCols[i - 1];\n var prevGroupKey_1 = updatedData[\"\" + prevGroupField];\n result = result.find(function (data) {\n return data.key === prevGroupKey_1;\n }).items;\n }\n this_1.updateLazyLoadGroupAggregatesRow(result, groupKey, groupCaptionRowObject, currentPageGroupCache, groupCaptionTemplates, groupFooterTemplates);\n }\n else {\n var query = gObj.renderModule.data.generateQuery();\n if (i !== 0) {\n var currentLevelCaptionRowObjects = currentPageGroupCache.filter(function (data) {\n return data.isCaptionRow && data.parentUid === groupCaptionRowObject.parentUid;\n });\n var index = currentLevelCaptionRowObjects.indexOf(groupCaptionRowObject);\n var fields = gObj.groupSettings.columns.slice(0, i).reverse();\n var keys = fields.map(function (data) {\n return updatedData[\"\" + data];\n });\n var pred = generateExpandPredicates(fields, keys, groupLazyLoadRenderer);\n var predicateList = getPredicates(pred);\n var lazyLoad = { level: i, skip: index, take: 1, where: predicateList };\n query.lazyLoad.push({ key: 'onDemandGroupInfo', value: lazyLoad });\n }\n gObj.renderModule.data.getData({}, query).then(function (e) {\n if (isRemote) {\n _this.updateLazyLoadGroupAggregates(data, e.result);\n }\n else {\n _this.updateLazyLoadGroupAggregatesRow(e.result, groupKey, groupCaptionRowObject, currentPageGroupCache, groupCaptionTemplates, groupFooterTemplates);\n }\n if (i === groupedCols.length - 1 || isRemote) {\n _this.destroyRefreshGroupCaptionFooterTemplate();\n }\n }).catch(function (e) { return gObj.renderModule.dataManagerFailure(e, { requestType: 'grouping' }); });\n if (isRemote) {\n return \"break\";\n }\n }\n };\n var this_1 = this;\n for (var i = 0; i < groupedCols.length; i++) {\n var state_1 = _loop_1(i);\n if (state_1 === \"break\")\n break;\n }\n };\n Group.prototype.destroyRefreshGroupCaptionFooterTemplate = function () {\n var gObj = this.parent;\n if (gObj.isAngular || gObj.isReact || gObj.isVue) {\n gObj.destroyTemplate(['groupCaptionTemplate', 'groupFooterTemplate']);\n }\n gObj.refreshGroupCaptionFooterTemplate();\n gObj.removeMaskRow();\n gObj.hideSpinner();\n };\n Group.prototype.updateLazyLoadGroupAggregatesRow = function (result, groupKey, groupCaptionRowObject, currentPageGroupCache, groupCaptionTemplates, groupFooterTemplates) {\n var updatedGroupCaptionData = result.find(function (data) {\n return data.key === groupKey;\n });\n if (groupCaptionTemplates.length) {\n this.updateLazyLoadGroupAggregatesCell(updatedGroupCaptionData, groupCaptionRowObject, groupCaptionTemplates);\n }\n if (groupFooterTemplates.length) {\n var groupFooterRowObject = currentPageGroupCache.find(function (data) {\n return data.isAggregateRow && data.parentUid === groupCaptionRowObject.uid;\n });\n this.updateLazyLoadGroupAggregatesCell(updatedGroupCaptionData, groupFooterRowObject, groupFooterTemplates);\n }\n };\n Group.prototype.updateLazyLoadGroupAggregatesCell = function (updatedGroupCaptionData, captionFooterRowObject, captionFooterTemplates) {\n var prevCaptionFooterData = captionFooterRowObject.data;\n var updatedGroupCaptionDataAggregates = updatedGroupCaptionData.aggregates;\n if (captionFooterRowObject.isCaptionRow) {\n prevCaptionFooterData.aggregates = updatedGroupCaptionDataAggregates;\n }\n for (var i = 0; i < captionFooterTemplates.length; i++) {\n var template = captionFooterTemplates[parseInt(i.toString(), 10)];\n var key = template.field + ' - ' + template.type;\n var fieldData = prevCaptionFooterData[template.field];\n fieldData[\"\" + key] = updatedGroupCaptionDataAggregates[\"\" + key];\n fieldData[capitalizeFirstLetter(template.type)] = updatedGroupCaptionDataAggregates[\"\" + key];\n if (fieldData[template.type]) {\n fieldData[template.type] = updatedGroupCaptionDataAggregates[\"\" + key];\n }\n }\n };\n Group.prototype.getGroupCaptionRowObject = function (element, groupCaptionIndex) {\n var gObj = this.parent;\n var uid = element.getAttribute('data-uid');\n var parentCaptionRowObject = gObj.getRowObjectFromUID(uid);\n for (var i = 0; i < groupCaptionIndex; i++) {\n parentCaptionRowObject = gObj.getRowObjectFromUID(parentCaptionRowObject.parentUid);\n }\n return parentCaptionRowObject;\n };\n /**\n * @param { boolean } groupCaptionTemplate - Defines template either group caption or footer\n * @returns { Object[] } - Returns template array\n * @hidden\n */\n Group.prototype.getGroupAggregateTemplates = function (groupCaptionTemplate) {\n var aggregates = [];\n var aggregateRows = this.parent.aggregates;\n for (var j = 0; j < aggregateRows.length; j++) {\n var row = aggregateRows[parseInt(j.toString(), 10)];\n for (var k = 0; k < row.columns.length; k++) {\n if ((groupCaptionTemplate && row.columns[parseInt(k.toString(), 10)].groupCaptionTemplate)\n || (!groupCaptionTemplate && row.columns[parseInt(k.toString(), 10)].groupFooterTemplate)) {\n var aggr = {};\n var type = row.columns[parseInt(k.toString(), 10)].type.toString();\n aggr = { type: type.toLowerCase(), field: row.columns[parseInt(k.toString(), 10)].field };\n aggregates.push(aggr);\n }\n }\n }\n return aggregates;\n };\n /**\n * @param { Row } fromRowObj - Defines group key changed Data row object.\n * @param { Row } toRowObj - Defines group key setting reference Data row object.\n * @returns { void }\n * @hidden\n */\n Group.prototype.groupedRowReorder = function (fromRowObj, toRowObj) {\n var dragRow = this.parent.getRowElementByUID(fromRowObj.uid);\n var dropRow = this.parent.getRowElementByUID(toRowObj.uid);\n var dropArgs = {\n rows: [dragRow], target: dropRow, fromIndex: fromRowObj.index, dropIndex: toRowObj.index\n };\n if (!isNullOrUndefined(fromRowObj) && !isNullOrUndefined(toRowObj) &&\n fromRowObj.parentUid !== toRowObj.parentUid) {\n if (dropRow) {\n if (dropRow['style'].display === 'none') {\n dragRow['style'].display = 'none';\n }\n if (dropArgs.fromIndex > dropArgs.dropIndex) {\n this.parent.getContentTable().querySelector(literals.tbody).insertBefore(dragRow, dropRow);\n }\n else {\n this.parent.getContentTable().querySelector(literals.tbody).insertBefore(dragRow, dropRow.nextSibling);\n }\n }\n else {\n remove(dragRow);\n }\n this.groupReorderHandler(fromRowObj, toRowObj);\n var tr = [].slice.call(this.parent.getContentTable().getElementsByClassName(literals.row));\n groupReorderRowObject(this.parent, dropArgs, tr, toRowObj);\n if (this.parent.enableVirtualization) {\n resetCachedRowIndex(this.parent);\n }\n else {\n resetRowIndex(this.parent, this.parent.getRowsObject().filter(function (data) { return data.isDataRow; }), tr);\n }\n this.parent.notify(events.refreshExpandandCollapse, { rows: this.parent.getRowsObject() });\n }\n };\n Group.prototype.groupReorderHandler = function (dragRowObject, dropRowObject) {\n var gObj = this.parent;\n var dragRowObjectData = dragRowObject.data;\n var dropRowObjectData = dropRowObject.data;\n var groupAggregateTemplate = gObj['groupModule'].getGroupAggregateTemplates(false);\n var dropParentRowObject = gObj.getRowObjectFromUID(dropRowObject.parentUid);\n var dragParentRowObject = gObj.getRowObjectFromUID(dragRowObject.parentUid);\n var dropRootParentRowObjects = [dropParentRowObject];\n var dragRootParentRowObjects = [dragParentRowObject];\n var groupColumns = gObj.groupSettings.columns;\n for (var j = 0; j < groupColumns.length; j++) {\n dragRowObjectData[groupColumns[parseInt(j.toString(), 10)]] = dropRowObjectData[groupColumns[parseInt(j.toString(), 10)]];\n if (j > 0) {\n dropRootParentRowObjects.push(gObj.getRowObjectFromUID(dropRootParentRowObjects[j - 1].parentUid));\n dragRootParentRowObjects.push(gObj.getRowObjectFromUID(dragRootParentRowObjects[j - 1].parentUid));\n }\n }\n dragRowObject.parentUid = dropRowObject.parentUid;\n dragRowObject.visible = dropRowObject.visible;\n dragRowObject['parentGid'] = dropRowObject['parentGid'];\n if (dragRowObject.changes !== dragRowObjectData) {\n dragRowObject.changes = dragRowObjectData;\n }\n var updatedCurrentViewData = this.iterateGroupAggregates([{ dragRowObjects: dragRootParentRowObjects,\n dropRowObjects: dropRootParentRowObjects }]);\n var updatedDragCurrentViewData = updatedCurrentViewData.filter(function (object) {\n return (object['key'] === dragRootParentRowObjects[dragRootParentRowObjects.length - 1].data['key'] ||\n (object['key'] instanceof Date && object['key'].toString() ===\n dragRootParentRowObjects[dragRootParentRowObjects.length - 1].data['key'].toString()));\n });\n var updatedDropCurrentViewData = updatedCurrentViewData.filter(function (object) {\n return (object['key'] === dropRootParentRowObjects[dropRootParentRowObjects.length - 1].data['key'] ||\n (object['key'] instanceof Date && object['key'].toString() ===\n dropRootParentRowObjects[dropRootParentRowObjects.length - 1].data['key'].toString()));\n });\n updatedCurrentViewData = [];\n if (!isNullOrUndefined(updatedDragCurrentViewData[0])) {\n updatedCurrentViewData.push(updatedDragCurrentViewData[0]);\n }\n if (!isNullOrUndefined(updatedDropCurrentViewData[0])) {\n updatedCurrentViewData.push(updatedDropCurrentViewData[0]);\n }\n var currentViewData = gObj.currentViewData;\n for (var i = 0; i < currentViewData.length; i++) {\n if (isNullOrUndefined(updatedDragCurrentViewData[0]) &&\n currentViewData[parseInt(i.toString(), 10)]['key'] ===\n dragRootParentRowObjects[dragRootParentRowObjects.length - 1].data['key']) {\n currentViewData.splice(i, 1);\n i--;\n }\n else if (isNullOrUndefined(updatedDropCurrentViewData[0]) &&\n currentViewData[parseInt(i.toString(), 10)]['key'] ===\n dropRootParentRowObjects[dropRootParentRowObjects.length - 1].data['key']) {\n currentViewData.splice(i, 1);\n i--;\n }\n else if (!isNullOrUndefined(updatedDragCurrentViewData[0]) &&\n currentViewData[parseInt(i.toString(), 10)]['key'] === updatedDragCurrentViewData[0]['key']) {\n currentViewData[parseInt(i.toString(), 10)] = updatedDragCurrentViewData[0];\n }\n else if (!isNullOrUndefined(updatedDropCurrentViewData[0]) &&\n currentViewData[parseInt(i.toString(), 10)]['key'] === updatedDropCurrentViewData[0]['key']) {\n currentViewData[parseInt(i.toString(), 10)] = updatedDropCurrentViewData[0];\n }\n }\n var updatedRowObject = this.groupGenerator.generateRows(updatedCurrentViewData, {});\n var dragRootParentAggregateRowObject = [];\n var dropRootParentAggregateRowObject = [];\n for (var i = 0; i < dragRootParentRowObjects.length; i++) {\n dragRootParentAggregateRowObject\n .push.apply(dragRootParentAggregateRowObject, this.getGroupParentFooterAggregateRowObject(dragRootParentRowObjects[parseInt(i.toString(), 10)].uid));\n }\n for (var i = 0; i < dropRootParentRowObjects.length; i++) {\n dropRootParentAggregateRowObject\n .push.apply(dropRootParentAggregateRowObject, this.getGroupParentFooterAggregateRowObject(dropRootParentRowObjects[parseInt(i.toString(), 10)].uid));\n }\n dragRootParentRowObjects.push.apply(dragRootParentRowObjects, dragRootParentAggregateRowObject);\n dropRootParentRowObjects.push.apply(dropRootParentRowObjects, dropRootParentAggregateRowObject);\n this.updatedRowObjChange(dragRootParentRowObjects, updatedRowObject, groupAggregateTemplate, true);\n this.updatedRowObjChange(dropRootParentRowObjects, updatedRowObject, groupAggregateTemplate);\n this.groupReorderRefreshHandler(dragRootParentRowObjects);\n this.groupReorderRefreshHandler(dropRootParentRowObjects);\n };\n Group.prototype.updatedRowObjChange = function (rootParentRowObjects, updatedRowObjects, groupAggregateTemplate, isDraggedRow) {\n var gObj = this.parent;\n var rowObjects = gObj.getRowsObject();\n var cache = {};\n var virtualCacheRowObjects = [];\n if (gObj.enableVirtualization) {\n cache = gObj.contentModule['vgenerator'].cache;\n virtualCacheRowObjects = gObj.vcRows;\n }\n for (var i = 0; i < rootParentRowObjects.length; i++) {\n var keyPresent = false;\n var parentRowObject = rootParentRowObjects[parseInt(i.toString(), 10)];\n for (var j = 0; j < updatedRowObjects.length; j++) {\n var updatedRowObject = updatedRowObjects[parseInt(j.toString(), 10)];\n if (!isNullOrUndefined(updatedRowObject) && !isNullOrUndefined(parentRowObject.data['key']) &&\n !isNullOrUndefined(updatedRowObject.data['key']) && ((parentRowObject.data['key'] ===\n updatedRowObject.data['key'] || (parentRowObject.data['key'] instanceof Date &&\n parentRowObject.data['key'].toString() === updatedRowObject.data['key'].toString())))) {\n var isParentKeyPresent = true;\n var nextParentObject = rootParentRowObjects[parseInt((i + 1).toString(), 10)];\n if (isDraggedRow && nextParentObject && !nextParentObject.isAggregateRow) {\n var key = nextParentObject.data['key'].toString();\n var field = nextParentObject.data['field'];\n var groupedData = updatedRowObject.data['items'].records ?\n updatedRowObject.data['items'].records : updatedRowObject.data['items'];\n if (groupedData && groupedData.length && groupedData[0][\"\" + field] &&\n groupedData[0][\"\" + field].toString() !== key) {\n isParentKeyPresent = false;\n }\n }\n if (!isParentKeyPresent && isDraggedRow) {\n continue;\n }\n var index = rowObjects.indexOf(parentRowObject);\n if (index !== -1) {\n rowObjects[parseInt(index.toString(), 10)].data = updatedRowObject.data;\n rowObjects[parseInt(index.toString(), 10)]['gSummary'] = updatedRowObject['gSummary'];\n }\n if (gObj.enableVirtualization) {\n var vIndex = virtualCacheRowObjects.indexOf(parentRowObject);\n if (vIndex !== -1) {\n virtualCacheRowObjects[parseInt(vIndex.toString(), 10)].data = updatedRowObject.data;\n virtualCacheRowObjects[parseInt(vIndex.toString(), 10)]['gSummary'] = updatedRowObject['gSummary'];\n }\n }\n parentRowObject.data = updatedRowObject.data;\n parentRowObject['gSummary'] = ['gSummary'];\n updatedRowObjects.splice(j, 1);\n j--;\n keyPresent = true;\n break;\n }\n else if (parentRowObject.isAggregateRow &&\n updatedRowObject.isAggregateRow) {\n for (var l = 0; l < groupAggregateTemplate.length; l++) {\n if (this.evaluateGroupAggregateValueChange(parentRowObject, updatedRowObject, groupAggregateTemplate[parseInt(l.toString(), 10)])) {\n var index = rowObjects.indexOf(parentRowObject);\n if (index !== -1) {\n rowObjects[parseInt(index.toString(), 10)].data = updatedRowObject.data;\n rowObjects[parseInt(index.toString(), 10)]['gSummary'] = updatedRowObject['gSummary'];\n }\n if (gObj.enableVirtualization) {\n var vIndex = virtualCacheRowObjects.indexOf(parentRowObject);\n if (vIndex !== -1) {\n virtualCacheRowObjects[parseInt(vIndex.toString(), 10)].data = updatedRowObject.data;\n virtualCacheRowObjects[parseInt(vIndex.toString(), 10)]['gSummary'] = updatedRowObject['gSummary'];\n }\n }\n parentRowObject.data = updatedRowObject.data;\n parentRowObject['gSummary'] = updatedRowObject['gSummary'];\n keyPresent = true;\n break;\n }\n }\n if (keyPresent) {\n break;\n }\n }\n }\n if (!keyPresent) {\n var removeElem = gObj.getRowElementByUID(parentRowObject.uid);\n if (!isNullOrUndefined(removeElem)) {\n remove(removeElem);\n }\n rowObjects.splice(rowObjects.indexOf(parentRowObject), 1);\n if (gObj.enableVirtualization) {\n virtualCacheRowObjects.splice(virtualCacheRowObjects.indexOf(parentRowObject), 1);\n for (var k = 1; k <= Object.keys(cache).length; k++) {\n var vcIndex = cache[parseInt(k.toString(), 10)].indexOf(parentRowObject);\n if (vcIndex !== -1) {\n cache[parseInt(k.toString(), 10)].splice([parseInt(vcIndex.toString(), 10)], 1);\n }\n }\n }\n if (gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings.enableCache) {\n gObj.infiniteScrollModule.resetInfiniteCache(rowObjects);\n }\n }\n }\n };\n Group.prototype.groupReorderRefreshHandler = function (parentRowObjects) {\n var gObj = this.parent;\n var row = new RowRenderer(gObj['serviceLocator'], null, gObj);\n var columns = gObj.getColumns();\n for (var j = 0; j < parentRowObjects.length; j++) {\n var rowObject = parentRowObjects[parseInt(j.toString(), 10)];\n if (!isNullOrUndefined(rowObject.uid) &&\n !isNullOrUndefined(gObj.getRowElementByUID(rowObject.uid))) {\n row.refresh(rowObject, columns, false);\n }\n }\n };\n Group.prototype.getGroupParentFooterAggregateRowObject = function (parentUid) {\n var rowObjects = this.parent.enableInfiniteScrolling && this.parent.infiniteScrollSettings.enableCache &&\n this.parent.groupSettings.columns.length ? this.parent.contentModule['rows'] : this.parent.getRowsObject();\n var parentFooterAggregates = [];\n for (var i = 0; i < rowObjects.length; i++) {\n var rowObject = rowObjects[parseInt(i.toString(), 10)];\n if (rowObject.parentUid === parentUid && rowObject.isAggregateRow) {\n parentFooterAggregates.push(rowObject);\n }\n }\n return parentFooterAggregates;\n };\n Group.prototype.evaluateGroupAggregateValueChange = function (rowObjects, updatedRowObject, groupAggregateTemplate) {\n var change = false;\n if (rowObjects.data[groupAggregateTemplate['field']]['field'] === updatedRowObject.data[groupAggregateTemplate['field']]['field']\n && rowObjects.data[groupAggregateTemplate['field']]['key'] === updatedRowObject.data[groupAggregateTemplate['field']]['key'] &&\n rowObjects.data[groupAggregateTemplate['field']]\n // eslint-disable-next-line no-prototype-builtins\n .hasOwnProperty(groupAggregateTemplate['field'] + ' - ' + groupAggregateTemplate['type']) &&\n updatedRowObject.data[groupAggregateTemplate['field']]\n // eslint-disable-next-line no-prototype-builtins\n .hasOwnProperty(groupAggregateTemplate['field'] + ' - ' + groupAggregateTemplate['type'])) {\n change = true;\n }\n return change;\n };\n Group.prototype.gettingVirtualData = function (parentRowObjs, curViewRec, pK) {\n var datas = [];\n var _loop_2 = function (i) {\n if (curViewRec.indexOf(parentRowObjs[parseInt(i.toString(), 10)].data) === -1) {\n datas.push(parentRowObjs[parseInt(i.toString(), 10)].data);\n }\n if (parentRowObjs[parseInt(i.toString(), 10)].data['field'] === this_2.parent.groupSettings.columns[0]) {\n var draggedData_1 = parentRowObjs[parseInt(i.toString(), 10)].data['items'];\n if (!isNullOrUndefined(draggedData_1['records'])) {\n draggedData_1 = draggedData_1['records'];\n }\n var _loop_3 = function (j) {\n if (pK && curViewRec.findIndex(function (data) { return data[pK.toString()] ===\n draggedData_1[parseInt(j.toString(), 10)][pK.toString()]; }) === -1) {\n datas.push(draggedData_1[parseInt(j.toString(), 10)]);\n }\n };\n for (var j = 0; j < draggedData_1.length; j++) {\n _loop_3(j);\n }\n }\n };\n var this_2 = this;\n for (var i = 0; i < parentRowObjs.length; i++) {\n _loop_2(i);\n }\n return datas;\n };\n Group.prototype.iterateGroupAggregates = function (editedData) {\n var _this = this;\n var updatedData = editedData instanceof Array ? editedData : [];\n var rows = this.parent.getRowsObject();\n var initData = this.parent.getCurrentViewRecords().slice();\n var field = this.parent.getPrimaryKeyFieldNames()[0];\n var dragParentRowObjects = editedData && editedData.length ?\n editedData[0] && editedData[0]['dragRowObjects'] : null;\n var dropParentRowObjects = editedData && editedData.length ?\n editedData[0] && editedData[0]['dropRowObjects'] : null;\n var dropRootKey = null;\n var dragRootKey = null;\n if (this.parent.enableVirtualization && this.parent.allowGrouping && this.parent.groupSettings.columns.length &&\n (!isNullOrUndefined(dragParentRowObjects) || !isNullOrUndefined(dropParentRowObjects))) {\n if (dragParentRowObjects) {\n initData.push.apply(initData, this.gettingVirtualData(dragParentRowObjects, initData, field));\n }\n if (dropParentRowObjects) {\n initData.push.apply(initData, this.gettingVirtualData(dropParentRowObjects, initData, field));\n }\n }\n var isInfiniteGroup = this.parent.enableInfiniteScrolling && this.parent.allowGrouping && editedData.length &&\n this.parent.groupSettings.columns.length && !isNullOrUndefined(dragParentRowObjects) &&\n !isNullOrUndefined(dropParentRowObjects);\n if (isInfiniteGroup) {\n initData = [];\n dropRootKey = dropParentRowObjects[dropParentRowObjects.length - 1].data['key'];\n dragRootKey = dragParentRowObjects[dragParentRowObjects.length - 1].data['key'];\n this.parent.getRowsObject().map(function (row) {\n var groupKey = row.data[_this.parent.groupSettings.columns[0]];\n if (row.isDataRow &&\n ((groupKey === dropRootKey || groupKey === dragRootKey) || (groupKey instanceof Date &&\n (groupKey.toString() === dropRootKey.toString() || groupKey.toString() === dragRootKey.toString())))) {\n initData.push(row.data);\n }\n });\n }\n var deletedCols = [];\n var changeds = rows.map(function (row) {\n if (row.edit === 'delete') {\n deletedCols.push(row.data);\n }\n return row.changes instanceof Object ? row.changes : row.data;\n });\n changeds = updatedData.length === 0 ? changeds : updatedData;\n var mergeData = initData.map(function (item) {\n var pKeyVal = DataUtil.getObject(field, item);\n var value;\n var hasVal = changeds.some(function (cItem) {\n value = cItem;\n return pKeyVal === DataUtil.getObject(field, cItem);\n });\n return hasVal ? value : item;\n });\n var eData = editedData;\n if (!(eData.type && eData.type === 'cancel') && deletedCols.length > 0) {\n for (var i = 0; i < deletedCols.length; i++) {\n var index = mergeData.indexOf(deletedCols[parseInt(i.toString(), 10)]);\n mergeData.splice(index, 1);\n }\n }\n var aggregates = [];\n var aggregateRows = this.parent.aggregates;\n for (var j = 0; j < aggregateRows.length; j++) {\n var row = aggregateRows[parseInt(j.toString(), 10)];\n for (var k = 0; k < row.columns.length; k++) {\n var aggr = {};\n var type = row.columns[parseInt(k.toString(), 10)].type.toString();\n aggr = { type: type.toLowerCase(), field: row.columns[parseInt(k.toString(), 10)].field };\n aggregates.push(aggr);\n }\n }\n var result;\n var aggrds;\n var groupedCols = this.parent.groupSettings.columns;\n for (var l = 0; l < groupedCols.length; l++) {\n aggrds = result ? result : mergeData;\n result = DataUtil.group(aggrds, groupedCols[parseInt(l.toString(), 10)], aggregates, null, null);\n }\n if (isInfiniteGroup) {\n var lastGroupKey = this.parent.currentViewData[this.parent.currentViewData.length - 1]['key'];\n if ((lastGroupKey instanceof Date && (lastGroupKey.toString() === dropRootKey.toString() ||\n lastGroupKey.toString() === dragRootKey.toString())) ||\n (lastGroupKey === dropRootKey || lastGroupKey === dragRootKey)) {\n var groups_1 = [];\n for (var i = 0; i < result.length; i++) {\n groups_1.push(result[parseInt(i.toString(), 10)]);\n }\n var predicate_1 = [];\n var addWhere = function (input) {\n for (var i = 0; i < groups_1.length; i++) {\n predicate_1.push(new Predicate('field', '==', groups_1[parseInt(i.toString(), 10)].field).\n and(_this.parent.renderModule.getPredicate('key', 'equal', groups_1[parseInt(i.toString(), 10)].key)));\n }\n input.where(Predicate.or(predicate_1));\n };\n var newQuery = this.parent.getDataModule().generateQuery(true);\n addWhere(newQuery);\n var updatedGroupData = this.parent.getDataModule().dataManager.executeLocal(newQuery);\n this.parent.renderModule.updateGroupInfo(result, updatedGroupData);\n }\n }\n return result;\n };\n Group.prototype.updateExpand = function (args) {\n var uid = args.uid;\n var isExpand = args.isExpand;\n var rows = this.parent.getRowsObject();\n for (var i = 0; i < rows.length; i++) {\n var row = rows[parseInt(i.toString(), 10)];\n if (row.uid === uid || isNullOrUndefined(uid)) {\n row.isExpand = isExpand;\n var _loop_4 = function (j) {\n var childRow = rows[parseInt(j.toString(), 10)];\n var closestParent = void 0;\n if (childRow.parentUid !== row.uid) {\n closestParent = rows.filter(function (x) { return x.uid === childRow.parentUid; })[0];\n }\n if (childRow.parentUid === row.uid) {\n childRow.visible = row.isExpand;\n }\n else if (!isNullOrUndefined(closestParent) && childRow.parentUid === closestParent.uid) {\n if (closestParent.isExpand && closestParent.visible === true) {\n childRow.visible = true;\n }\n else if (closestParent.isExpand && closestParent.visible === false) {\n childRow.visible = false;\n }\n }\n if (isNullOrUndefined(uid)) {\n return \"break\";\n }\n };\n for (var j = i + 1; j < rows.length; j++) {\n var state_2 = _loop_4(j);\n if (state_2 === \"break\")\n break;\n }\n }\n }\n this.parent.notify(events.contentReady, { rows: rows, args: { isFrozen: false, rows: rows } });\n };\n return Group;\n}());\nexport { Group };\n","import { removeClass, addClass, extend, EventHandler } from '@syncfusion/ej2-base';\nimport { closest, classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Grid } from '../base/grid';\nimport { parents, getUid, appendChildren, isComplexField, getObject } from '../base/util';\nimport * as events from '../base/constant';\nimport { AriaService } from '../services/aria-service';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport { CellType } from '../base/enum';\nimport * as literals from '../base/string-literals';\n/**\n * The `DetailRow` module is used to handle detail template and hierarchy Grid operations.\n */\nvar DetailRow = /** @class */ (function () {\n /**\n * Constructor for the Grid detail template module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifes the serviceLocator\n * @hidden\n */\n function DetailRow(parent, locator) {\n //Internal variables\n this.aria = new AriaService();\n this.childRefs = [];\n this.parent = parent;\n this.serviceLocator = locator;\n this.focus = locator.getService('focus');\n this.addEventListener();\n }\n /**\n * @returns {void}\n * @hidden\n */\n DetailRow.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n EventHandler.add(this.parent.element, 'auxclick', this.auxilaryclickHandler, this);\n this.parent.on(events.click, this.clickHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.expandChildGrid, this.expand, this);\n this.parent.on(events.columnVisibilityChanged, this.refreshColSpan, this);\n this.parent.on(events.destroy, this.destroyChildGrids, this);\n this.parent.on(events.destroyChildGrid, this.destroyChildGrids, this);\n };\n DetailRow.prototype.clickHandler = function (e) {\n if (e.target.classList.contains('e-icon-grightarrow') || e.target.classList.contains('e-icon-gdownarrow')\n && !this.parent.allowGrouping) {\n e.preventDefault();\n }\n this.toogleExpandcollapse(closest(e.target, 'td'));\n };\n DetailRow.prototype.auxilaryclickHandler = function (e) {\n if (e.target.classList.contains('e-icon-grightarrow') || e.target.classList.contains('e-icon-gdownarrow')\n && !this.parent.allowGrouping && (e.button === 1)) {\n e.preventDefault();\n }\n };\n DetailRow.prototype.toogleExpandcollapse = function (target) {\n this.l10n = this.serviceLocator.getService('localization');\n var gObj = this.parent;\n var table = this.parent.getContentTable();\n var lastrowIdx = this.parent.getCurrentViewRecords().length - 1;\n var parent = 'parentDetails';\n var childGrid;\n var isExpanded = target && target.classList.contains('e-detailrowcollapse');\n if (!(target && (target.classList.contains('e-detailrowcollapse') || target.classList.contains('e-detailrowexpand')))\n || (target && target.classList.contains('e-masked-cell'))) {\n return;\n }\n var tr = target.parentElement;\n var uid = tr.getAttribute('data-uid');\n var rowObj = gObj.getRowObjectFromUID(uid);\n var needToRefresh = false;\n var nextRow = this.parent.getContentTable().querySelector(literals.tbody).children[tr.rowIndex + 1];\n if (target.classList.contains('e-detailrowcollapse')) {\n var data_1 = rowObj.data;\n if (this.isDetailRow(nextRow)) {\n nextRow.style.display = '';\n gObj.notify(events.detailStateChange, { data: data_1,\n childGrid: gObj.childGrid, detailElement: target, isExpanded: isExpanded });\n needToRefresh = true;\n }\n else if (gObj.getDetailTemplate() || gObj.childGrid) {\n var rowId = getUid('grid-row');\n var detailRow = this.parent.createElement('tr', { className: 'e-detailrow', attrs: { 'data-uid': rowId, role: 'row' } });\n var detailCell_1 = this.parent.createElement('th', { className: 'e-detailcell', attrs: { 'scope': 'col', role: 'columnheader' } });\n var colSpan = this.parent.getVisibleColumns().length;\n if (this.parent.allowRowDragAndDrop) {\n colSpan++;\n }\n detailCell_1.setAttribute('colspan', colSpan.toString());\n var row = new Row({\n isDataRow: true,\n isExpand: true,\n uid: rowId,\n isDetailRow: true,\n cells: [new Cell({ cellType: CellType.Indent }), new Cell({ isDataCell: true, visible: true })]\n });\n row.parentUid = rowObj.uid;\n for (var i = 0, len = gObj.groupSettings.columns.length; i < len; i++) {\n detailRow.appendChild(this.parent.createElement('td', { className: 'e-indentcell' }));\n row.cells.unshift(new Cell({ cellType: CellType.Indent }));\n }\n detailRow.appendChild(this.parent.createElement('th', { className: 'e-detailindentcell', attrs: { 'scope': 'col' } }));\n detailRow.appendChild(detailCell_1);\n tr.parentNode.insertBefore(detailRow, tr.nextSibling);\n var isReactCompiler = void 0;\n var isReactChild = void 0;\n if (gObj.detailTemplate) {\n isReactCompiler = this.parent.isReact && typeof (gObj.detailTemplate) !== 'string';\n isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var detailTemplateID = gObj.element.id + 'detailTemplate';\n if (isReactCompiler || isReactChild) {\n gObj.getDetailTemplate()(data_1, gObj, 'detailTemplate', detailTemplateID, null, null, detailCell_1);\n this.parent.renderTemplates(function () {\n gObj.trigger(events.detailDataBound, { detailElement: detailCell_1, data: data_1, childGrid: childGrid });\n });\n }\n else {\n appendChildren(detailCell_1, gObj.getDetailTemplate()(data_1, gObj, 'detailTemplate', detailTemplateID, undefined, undefined, undefined, this.parent['root']));\n }\n }\n else {\n childGrid = new Grid(this.getGridModel(gObj, rowObj, gObj.printMode));\n this.childRefs.push(childGrid);\n if (childGrid.query) {\n childGrid.query = childGrid.query.clone();\n }\n childGrid[\"\" + parent] = {\n parentID: gObj.element.id,\n parentPrimaryKeys: gObj.getPrimaryKeyFieldNames(),\n parentKeyField: gObj.childGrid.queryString,\n parentKeyFieldValue: gObj.childGrid.queryString && isComplexField(gObj.childGrid.queryString) ?\n getObject(gObj.childGrid.queryString, data_1) : data_1[gObj.childGrid.queryString],\n parentRowData: data_1\n };\n if (gObj.isReact) {\n childGrid.parentDetails.parentInstObj = gObj;\n }\n else if (gObj.parentDetails && gObj.parentDetails.parentInstObj && gObj.parentDetails.parentInstObj.isReact) {\n childGrid.parentDetails.parentInstObj = gObj.parentDetails.parentInstObj;\n }\n childGrid.isLegacyTemplate = gObj.isReact\n || gObj.isLegacyTemplate;\n if (gObj.isPrinting) {\n childGrid.isPrinting = true;\n childGrid.on(events.contentReady, this.promiseResolve(childGrid), this);\n childGrid.on(events.onEmpty, this.promiseResolve(childGrid), this);\n }\n rowObj.childGrid = childGrid;\n var modules = childGrid.getInjectedModules();\n var injectedModues = gObj.getInjectedModules();\n if (!modules || modules.length !== injectedModues.length) {\n childGrid.setInjectedModules(injectedModues);\n }\n var gridElem = this.parent.createElement('div', {\n id: 'child' + parents(tr, 'e-grid').length +\n '_grid' + tr.rowIndex + getUid(''), className: 'e-childgrid'\n });\n detailCell_1.appendChild(gridElem);\n childGrid.appendTo(gridElem);\n }\n detailRow.appendChild(detailCell_1);\n if (tr.nextSibling) {\n tr.parentNode.insertBefore(detailRow, tr.nextSibling);\n }\n else {\n tr.parentNode.appendChild(detailRow);\n }\n var rowElems = gObj.getRows();\n var rowObjs = gObj.getRowsObject();\n rowElems.splice(rowElems.indexOf(tr) + 1, 0, detailRow);\n rowObjs.splice(rowObjs.indexOf(rowObj) + 1, 0, row);\n if (!isReactCompiler || !isReactChild) {\n gObj.trigger(events.detailDataBound, { detailElement: detailCell_1, data: data_1, childGrid: childGrid });\n }\n gObj.notify(events.detailDataBound, { rows: rowObjs });\n }\n classList(target, ['e-detailrowexpand'], ['e-detailrowcollapse']);\n classList(target.firstElementChild, ['e-dtdiagonaldown', 'e-icon-gdownarrow'], ['e-dtdiagonalright', 'e-icon-grightarrow']);\n rowObj.isExpand = true;\n if (target.classList.contains('e-lastrowcell') && this.parent.getContent().clientHeight > table.scrollHeight) {\n removeClass(target.parentElement.querySelectorAll('td'), 'e-lastrowcell');\n var detailrowIdx = table.querySelector(literals.tbody).getElementsByClassName('e-detailrow').length - 1;\n addClass(table.querySelector(literals.tbody).getElementsByClassName('e-detailrow')[parseInt(detailrowIdx.toString(), 10)].childNodes, ['e-lastrowcell']);\n this.lastrowcell = true;\n }\n this.aria.setExpand(target, true);\n target.firstElementChild.setAttribute('title', this.l10n.getConstant('Expanded'));\n }\n else {\n if (this.isDetailRow(nextRow)) {\n nextRow.style.display = 'none';\n gObj.notify(events.detailStateChange, { data: rowObj.data,\n childGrid: gObj.childGrid, detailElement: target, isExpanded: isExpanded });\n }\n classList(target, ['e-detailrowcollapse'], ['e-detailrowexpand']);\n classList(target.firstElementChild, ['e-dtdiagonalright', 'e-icon-grightarrow'], ['e-dtdiagonaldown', 'e-icon-gdownarrow']);\n if (parseInt(tr.getAttribute(literals.dataRowIndex), 10) === lastrowIdx && this.lastrowcell) {\n addClass(target.parentElement.querySelectorAll('td'), 'e-lastrowcell');\n this.lastrowcell = false;\n }\n rowObj.isExpand = false;\n needToRefresh = true;\n this.aria.setExpand(target, false);\n target.firstElementChild.setAttribute('title', this.l10n.getConstant('Collapsed'));\n }\n if (!isNullOrUndefined(gObj.detailTemplate) || (gObj.childGrid && needToRefresh)) {\n gObj.updateVisibleExpandCollapseRows();\n gObj.notify(events.refreshExpandandCollapse, { rows: gObj.getRowsObject() });\n }\n if (this.parent.allowTextWrap && this.parent.height === 'auto') {\n if (this.parent.getContentTable().scrollHeight > this.parent.getContent().clientHeight) {\n this.parent.scrollModule.setPadding();\n }\n else {\n this.parent.scrollModule.removePadding();\n }\n }\n };\n /**\n * @hidden\n * @param {IGrid} gObj - specifies the grid Object\n * @param {Row}rowObj - specifies the row object\n * @param {string} printMode - specifies the printmode\n * @returns {Object} returns the object\n */\n DetailRow.prototype.getGridModel = function (gObj, rowObj, printMode) {\n var gridModel;\n if (gObj.isPrinting && rowObj.isExpand && gObj.expandedRows &&\n gObj.expandedRows[rowObj.index] && gObj.expandedRows[rowObj.index].gridModel) {\n gObj.expandedRows[rowObj.index].gridModel.hierarchyPrintMode = gObj.childGrid.hierarchyPrintMode;\n gridModel = extend({}, gObj.expandedRows[rowObj.index].gridModel, gObj.childGrid, true);\n }\n else {\n if (gObj.isPrinting && gObj.childGrid.allowPaging) {\n gObj.childGrid.allowPaging = printMode === 'CurrentPage';\n }\n gridModel = extend({}, {}, gObj.childGrid, true);\n }\n return gridModel;\n };\n DetailRow.prototype.promiseResolve = function (grid) {\n var _this = this;\n return function () {\n grid.off(events.contentReady, _this.promiseResolve);\n grid.off(events.onEmpty, _this.promiseResolve);\n grid.notify(events.hierarchyPrint, {});\n };\n };\n DetailRow.prototype.isDetailRow = function (row) {\n return row && row.classList.contains('e-detailrow');\n };\n DetailRow.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n EventHandler.remove(this.parent.element, 'auxclick', this.auxilaryclickHandler);\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.expandChildGrid, this.expand);\n this.parent.off(events.columnVisibilityChanged, this.refreshColSpan);\n this.parent.off(events.destroy, this.destroyChildGrids);\n this.parent.off(events.destroyChildGrid, this.destroyChildGrids);\n };\n DetailRow.prototype.getTDfromIndex = function (index, className) {\n var tr = !isNullOrUndefined(index) ? this.parent.getDataRows()[parseInt(index.toString(), 10)] : undefined;\n if (tr && tr.querySelector(className)) {\n return tr.querySelector(className);\n }\n return null;\n };\n /**\n * Expands a detail row with the given target.\n *\n * @param {Element} target - Defines the collapsed element to expand.\n * @returns {void}\n */\n DetailRow.prototype.expand = function (target) {\n if (!isNaN(target)) {\n target = this.getTDfromIndex(target, '.e-detailrowcollapse');\n }\n if (target && target.classList.contains('e-detailrowcollapse')) {\n this.toogleExpandcollapse(target);\n }\n };\n /**\n * Collapses a detail row with the given target.\n *\n * @param {Element} target - Defines the expanded element to collapse.\n * @returns {void}\n */\n DetailRow.prototype.collapse = function (target) {\n if (!isNaN(target)) {\n target = this.getTDfromIndex(target, '.e-detailrowexpand');\n }\n if (target && target.classList.contains('e-detailrowexpand')) {\n this.toogleExpandcollapse(target);\n }\n };\n /**\n * Expands all the detail rows of the Grid.\n *\n * @returns {void}\n */\n DetailRow.prototype.expandAll = function () {\n this.expandCollapse(true);\n this.parent.trigger(events.actionComplete, { requestType: 'expandAllComplete', type: events.actionComplete, moduleObj: this });\n };\n /**\n * Collapses all the detail rows of the Grid.\n *\n * @returns {void}\n */\n DetailRow.prototype.collapseAll = function () {\n this.expandCollapse(false);\n this.parent.trigger(events.actionComplete, { requestType: 'collapseAllComplete', type: events.actionComplete, moduleObj: this });\n };\n DetailRow.prototype.expandCollapse = function (isExpand) {\n var td;\n var rows = this.parent.getDataRows();\n for (var i = 0, len = rows.length; i < len; i++) {\n td = rows[parseInt(i.toString(), 10)].querySelector('.e-detailrowcollapse, .e-detailrowexpand');\n if (isExpand) {\n this.expand(td);\n }\n else {\n this.collapse(td);\n }\n }\n };\n DetailRow.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'downArrow') {\n e.action = 'ctrlDownArrow';\n }\n else if (e.action === 'upArrow') {\n e.action = 'ctrlUpArrow';\n }\n }\n switch (e.action) {\n case 'ctrlDownArrow':\n this.expandAll();\n break;\n case 'ctrlUpArrow':\n this.collapseAll();\n break;\n case 'altUpArrow':\n case 'altDownArrow':\n // eslint-disable-next-line no-case-declarations\n var selected = gObj.allowSelection ? gObj.getSelectedRowIndexes() : [];\n if (selected.length) {\n var dataRow = gObj.getDataRows()[selected[selected.length - 1]];\n var td = dataRow.querySelector('.e-detailrowcollapse, .e-detailrowexpand');\n if (e.action === 'altDownArrow') {\n this.expand(td);\n }\n else {\n this.collapse(td);\n }\n }\n break;\n case 'enter':\n if (this.parent.isEdit) {\n return;\n }\n // eslint-disable-next-line no-case-declarations\n var element = this.focus.getFocusedElement();\n if (element && (element.classList.contains('e-icon-grightarrow') || element.classList.contains('e-icon-gdownarrow'))) {\n element = element.parentElement;\n }\n if (element && !element.classList.contains('e-detailrowcollapse') &&\n !element.classList.contains('e-detailrowexpand')) {\n break;\n }\n this.toogleExpandcollapse(element);\n break;\n }\n };\n DetailRow.prototype.refreshColSpan = function () {\n var detailrows = this.parent.contentModule.getTable().querySelectorAll('tr.e-detailrow');\n var colSpan = this.parent.getVisibleColumns().length;\n for (var i = 0; i < detailrows.length; i++) {\n detailrows[parseInt(i.toString(), 10)].querySelector('.e-detailcell').setAttribute('colspan', colSpan + '');\n }\n };\n DetailRow.prototype.destroyChildGrids = function () {\n var rows = this.parent.getRowsObject();\n for (var i = 0; i < rows.length; i++) {\n rows[parseInt(i.toString(), 10)].childGrid = null;\n }\n for (var i = 0; i < this.childRefs.length; i++) {\n if (!this.childRefs[parseInt(i.toString(), 10)].isDestroyed) {\n this.childRefs[parseInt(i.toString(), 10)].destroy();\n }\n }\n this.childRefs = [];\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n DetailRow.prototype.getModuleName = function () {\n return 'detailRow';\n };\n return DetailRow;\n}());\nexport { DetailRow };\n","import { EventHandler, extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { remove, select, removeClass } from '@syncfusion/ej2-base';\nimport { Toolbar as tool } from '@syncfusion/ej2-navigations';\nimport * as events from '../base/constant';\nimport { templateCompiler, appendChildren, parentsUntil, addRemoveEventListener, applyBiggerTheme } from '../base/util';\nimport { ResponsiveToolbarAction } from '../base/enum';\nimport { ContextMenu as Menu } from '@syncfusion/ej2-navigations';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { SearchBox } from '../services/focus-strategy';\n/**\n *\n * The `Toolbar` module is used to handle ToolBar actions.\n */\nvar Toolbar = /** @class */ (function () {\n function Toolbar(parent, serviceLocator) {\n this.predefinedItems = {};\n this.isSearched = false;\n this.items = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Print', 'Search',\n 'ColumnChooser', 'PdfExport', 'ExcelExport', 'CsvExport', 'WordExport'];\n this.isRightToolbarMenu = false;\n this.parent = parent;\n this.gridID = parent.element.id;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n }\n Toolbar.prototype.render = function () {\n this.l10n = this.serviceLocator.getService('localization');\n var preItems = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Print',\n 'PdfExport', 'ExcelExport', 'WordExport', 'CsvExport'];\n var isAdaptive = this.parent.enableAdaptiveUI;\n var excludingItems = ['Edit', 'Delete', 'Update', 'Cancel'];\n for (var _i = 0, preItems_1 = preItems; _i < preItems_1.length; _i++) {\n var item = preItems_1[_i];\n var itemStr = item.toLowerCase();\n var localeName = itemStr[0].toUpperCase() + itemStr.slice(1);\n this.predefinedItems[\"\" + item] = {\n id: this.gridID + '_' + itemStr, prefixIcon: 'e-' + itemStr,\n text: this.l10n.getConstant(localeName), tooltipText: this.l10n.getConstant(localeName)\n };\n if (isAdaptive) {\n this.predefinedItems[\"\" + item].text = '';\n this.predefinedItems[\"\" + item].visible = excludingItems.indexOf(item) === -1;\n }\n }\n this.predefinedItems.Search = {\n id: this.gridID + '_search',\n tooltipText: this.l10n.getConstant('Search'), align: 'Right', cssClass: 'e-search-wrapper',\n type: 'Input'\n };\n this.isRightToolbarMenu = false;\n if (this.parent.enableAdaptiveUI && this.isResponsiveToolbarMenuItems(true) && ((this.parent.rowRenderingMode === 'Horizontal') ||\n (this.parent.rowRenderingMode === 'Vertical' && !this.parent.allowFiltering && !this.parent.allowSorting))) {\n this.isRightToolbarMenu = true;\n }\n if (isAdaptive && this.isResponsiveToolbarMenuItems(false)) {\n this.predefinedItems.responsiveToolbarItems = {\n id: this.gridID + '_' + 'responsivetoolbaritems', cssClass: 'e-responsive-toolbar-items e-menu-toolbar', suffixIcon: 'e-' + 'responsivetoolbaritems-btn',\n align: this.isRightToolbarMenu ? 'Left' : 'Right'\n };\n }\n else {\n this.predefinedItems.ColumnChooser = {\n id: this.gridID + '_' + 'columnchooser', cssClass: 'e-cc e-ccdiv e-cc-toolbar', suffixIcon: 'e-' + 'columnchooser-btn',\n text: isAdaptive ? '' : this.l10n.getConstant('Columnchooser'),\n tooltipText: this.l10n.getConstant('Columnchooser'), align: 'Right'\n };\n }\n if (this.parent.rowRenderingMode === 'Vertical') {\n if (this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') {\n this.predefinedItems.responsiveFilter = {\n id: this.gridID + '_' + 'responsivefilter', cssClass: 'e-gridresponsiveicons e-icons',\n suffixIcon: 'e-' + 'resfilter-icon', tooltipText: this.l10n.getConstant('FilterButton')\n };\n }\n if (this.parent.allowSorting) {\n this.predefinedItems.responsiveSort = {\n id: this.gridID + '_' + 'responsivesort', cssClass: 'e-gridresponsiveicons e-icons',\n suffixIcon: 'e-' + 'ressort-icon', tooltipText: this.l10n.getConstant('Sort')\n };\n }\n }\n if (this.parent.enableAdaptiveUI && this.parent.toolbar && this.parent.toolbar.indexOf('Search') > -1) {\n this.predefinedItems.responsiveBack = {\n id: this.gridID + '_' + 'responsiveback', cssClass: 'e-gridresponsiveicons e-icons',\n suffixIcon: 'e-' + 'resback-icon', visible: false\n };\n }\n this.createToolbar();\n if (this.parent.enableAdaptiveUI) {\n if (isNullOrUndefined(this.responsiveToolbarMenu)) {\n this.renderResponsiveToolbarpopup();\n }\n if (this.toolbar.element) {\n this.toolbar.refreshOverflow();\n }\n }\n };\n Toolbar.prototype.isResponsiveToolbarMenuItems = function (isRight) {\n var items = isRight ? ['Add', 'Edit', 'Delete', 'Search'] : ['Print', 'ColumnChooser', 'PdfExport', 'ExcelExport', 'CsvExport'];\n var toolbarItems = this.parent.toolbar || [];\n for (var i = 0; i < items.length; i++) {\n if (toolbarItems.indexOf(items[parseInt(i.toString(), 10)]) >= 0) {\n return isRight ? false : true;\n }\n }\n return isRight ? true : false;\n };\n /**\n * Gets the toolbar of the Grid.\n *\n * @returns {Element} returns the element\n * @hidden\n */\n Toolbar.prototype.getToolbar = function () {\n return this.toolbar.element;\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n */\n Toolbar.prototype.destroy = function () {\n if (this.toolbar && !this.toolbar.isDestroyed) {\n if (this.responsiveToolbarMenu) {\n this.responsiveToolbarMenu.destroy();\n }\n if (!this.toolbar.element) {\n this.parent.destroyTemplate(['toolbarTemplate']);\n if (this.parent.isReact) {\n this.parent.renderTemplates();\n }\n }\n else {\n this.toolbar.off('render-react-toolbar-template', this.addReactToolbarPortals);\n this.toolbar.destroy();\n }\n this.unWireEvent();\n this.removeEventListener();\n if (this.element.parentNode) {\n remove(this.element);\n }\n }\n };\n Toolbar.prototype.bindSearchEvents = function () {\n this.searchElement = select('#' + this.gridID + '_searchbar', this.element);\n this.wireEvent();\n this.refreshToolbarItems();\n if (this.parent.searchSettings) {\n this.updateSearchBox();\n }\n };\n Toolbar.prototype.toolbarCreated = function (isNormal) {\n if (this.element.querySelector('.e-search-wrapper')) {\n if (!this.parent.enableAdaptiveUI || isNormal) {\n var classList = this.parent.cssClass ? 'e-input-group e-search ' + this.parent.cssClass\n : 'e-input-group e-search';\n this.element.querySelector('.e-search-wrapper').innerHTML = '
\\\n \\\n \\\n \\\n
';\n }\n else {\n this.element.querySelector('.e-search-wrapper').innerHTML = '\\\n \\\n
';\n }\n }\n if (this.element.querySelector('.e-responsive-toolbar-items')) {\n this.element.querySelector('.e-responsive-toolbar-items').innerHTML = '