\n * \n * ```\n */\nvar VScroll = /** @class */ (function (_super) {\n __extends(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n *\n * @param {VScrollModel} options - Specifies VScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which vertical scrolling applies.\n */\n function VScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var ele = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (ele.id === '') {\n ele.id = getUniqueID('vscroll');\n this.uniqueId = true;\n }\n ele.style.display = 'block';\n if (this.enableRtl) {\n ele.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the vertical scroll rendering\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlayElement(this.element);\n }\n this.setScrollState();\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });\n var scrollBar = buildTag('div', { className: CLS_VSCROLLBAR });\n scrollBar.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.overflow = 'hidden';\n this.scrollEle = scrollBar;\n this.scrollItems = scrollCnt;\n };\n VScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n VScroll.prototype.getModuleName = function () {\n return 'vScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n VScroll.prototype.destroy = function () {\n var el = this.element;\n el.style.display = '';\n removeClass([this.element], [CLS_ROOT, CLS_DEVICE]);\n var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);\n var overlays = selectAll('.' + CLS_OVERLAY, el);\n [].slice.call(overlays).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n el.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (navs.length > 0) {\n detach(navs[0]);\n if (!isNullOrUndefined(navs[1])) {\n detach(navs[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the VScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n VScroll.prototype.disable = function (value) {\n var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEle).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n VScroll.prototype.createOverlayElement = function (element) {\n var id = element.id.concat('_nav');\n var downOverlayEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_DOWNOVERLAY });\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var downEle = buildTag('div', { id: id.concat('down'), className: clsDown });\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n downEle.appendChild(navItem);\n var upEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_UPOVERLAY });\n if (this.ieCheck) {\n downEle.classList.add('e-ie-align');\n }\n element.appendChild(downOverlayEle);\n element.appendChild(downEle);\n element.insertBefore(upEle, element.firstChild);\n this.eventBinding([downEle]);\n };\n VScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var nav = buildTag('div', { id: id.concat('_down'), className: clsDown });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsUp = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVUP);\n var navElement = buildTag('div', { id: id.concat('_up'), className: clsUp + ' ' + CLS_DISABLE });\n navElement.setAttribute('aria-disabled', 'true');\n var navUpItem = buildTag('div', { className: CLS_NAVUPARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navElement.appendChild(navUpItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navElement, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navElement.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navElement]);\n };\n VScroll.prototype.onKeyPress = function (ev) {\n var _this = this;\n if (ev.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, ev.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n VScroll.prototype.onKeyUp = function (ev) {\n if (ev.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n ev.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n VScroll.prototype.eventBinding = function (element) {\n var _this = this;\n [].slice.call(element).forEach(function (ele) {\n new Touch(ele, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n ele.addEventListener('keydown', _this.onKeyPress.bind(_this));\n ele.addEventListener('keyup', _this.onKeyUp.bind(_this));\n ele.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n ele.addEventListener('touchend', _this.repeatScroll.bind(_this));\n ele.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(ele, 'click', _this.clickEventHandler, _this);\n });\n };\n VScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n VScroll.prototype.tabHoldHandler = function (ev) {\n var _this = this;\n var trgt = ev.originalEvent.target;\n trgt = this.contains(trgt, CLS_VSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDistance = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDistance, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n VScroll.prototype.contains = function (element, className) {\n return element.classList.contains(className);\n };\n VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var classList = trgt.classList;\n if (classList.contains(CLS_VSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (classList.contains(CLS_NAVDOWNARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else if (classList.contains(CLS_NAVUPARROW)) {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n };\n VScroll.prototype.clickEventHandler = function (event) {\n this.eleScrolling(this.scrollStep, event.target, false);\n };\n VScroll.prototype.wheelEventHandler = function (e) {\n e.preventDefault();\n this.frameScrollRequest(this.scrollStep, (e.deltaY > 0 ? 'add' : ''), false);\n };\n VScroll.prototype.swipeHandler = function (e) {\n var swipeElement = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceY / (e.velocity * 10);\n }\n else {\n distance = e.distanceY / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Up') {\n swipeElement.scrollTop += distance * step;\n }\n else if (e.swipeDirection === 'Down') {\n swipeElement.scrollTop -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollTop += scrollVal;\n }\n else {\n this.scrollEle.scrollTop -= scrollVal;\n }\n };\n VScroll.prototype.frameScrollRequest = function (scrollValue, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollValue, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollValue -= el.offsetHeight;\n });\n }\n var animate = function () {\n if (scrollValue < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollValue -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.touchHandler = function (e) {\n var el = this.scrollEle;\n var distance = e.distanceY;\n if (e.scrollDirection === 'Up') {\n el.scrollTop = el.scrollTop + distance;\n }\n else if (e.scrollDirection === 'Down') {\n el.scrollTop = el.scrollTop - distance;\n }\n };\n VScroll.prototype.arrowDisabling = function (addDisableCls, removeDisableCls) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisableCls) ? removeDisableCls : addDisableCls;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisableCls)) {\n classList(arrowIcon, [CLS_NAVDOWNARROW], [CLS_NAVUPARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVUPARROW], [CLS_NAVDOWNARROW]);\n }\n }\n else {\n addDisableCls.classList.add(CLS_DISABLE);\n addDisableCls.setAttribute('aria-disabled', 'true');\n addDisableCls.removeAttribute('tabindex');\n removeDisableCls.classList.remove(CLS_DISABLE);\n removeDisableCls.setAttribute('aria-disabled', 'false');\n removeDisableCls.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n VScroll.prototype.scrollEventHandler = function (e) {\n var target = e.target;\n var height = target.offsetHeight;\n var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);\n var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);\n var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);\n var downOverlay = this.element.querySelector('.' + CLS_DOWNOVERLAY);\n var scrollTop = target.scrollTop;\n if (scrollTop <= 0) {\n scrollTop = -scrollTop;\n }\n if (this.isDevice) {\n if (scrollTop < OVERLAY_MAXWID) {\n upOverlay.style.height = scrollTop + 'px';\n }\n else {\n upOverlay.style.height = '40px';\n }\n if ((target.scrollHeight - Math.ceil(height + scrollTop)) < OVERLAY_MAXWID) {\n downOverlay.style.height = (target.scrollHeight - Math.ceil(height + scrollTop)) + 'px';\n }\n else {\n downOverlay.style.height = '40px';\n }\n }\n if (scrollTop === 0) {\n this.arrowDisabling(navUpEle, navDownEle);\n }\n else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) {\n this.arrowDisabling(navDownEle, navUpEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_VSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {VScrollModel} newProp - It contains the new value of data.\n * @param {VScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n VScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(CLS_RTL);\n }\n else {\n this.element.classList.remove(CLS_RTL);\n }\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], VScroll.prototype, \"scrollStep\", void 0);\n VScroll = __decorate([\n NotifyPropertyChanges\n ], VScroll);\n return VScroll;\n}(Component));\nexport { VScroll };\n","// TODO: Remove this module from `core-js@4` since it's replaced to module below\nrequire('../modules/web.url-search-params.constructor');\n","'use strict';\nvar $ = require('../internals/export');\nvar fails = require('../internals/fails');\nvar isArray = require('../internals/is-array');\nvar isObject = require('../internals/is-object');\nvar toObject = require('../internals/to-object');\nvar lengthOfArrayLike = require('../internals/length-of-array-like');\nvar doesNotExceedSafeInteger = require('../internals/does-not-exceed-safe-integer');\nvar createProperty = require('../internals/create-property');\nvar arraySpeciesCreate = require('../internals/array-species-create');\nvar arrayMethodHasSpeciesSupport = require('../internals/array-method-has-species-support');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar V8_VERSION = require('../internals/engine-v8-version');\n\nvar IS_CONCAT_SPREADABLE = wellKnownSymbol('isConcatSpreadable');\n\n// We can't use this feature detection in V8 since it causes\n// deoptimization and serious performance degradation\n// https://github.com/zloirock/core-js/issues/679\nvar IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails(function () {\n var array = [];\n array[IS_CONCAT_SPREADABLE] = false;\n return array.concat()[0] !== array;\n});\n\nvar SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('concat');\n\nvar isConcatSpreadable = function (O) {\n if (!isObject(O)) return false;\n var spreadable = O[IS_CONCAT_SPREADABLE];\n return spreadable !== undefined ? !!spreadable : isArray(O);\n};\n\nvar FORCED = !IS_CONCAT_SPREADABLE_SUPPORT || !SPECIES_SUPPORT;\n\n// `Array.prototype.concat` method\n// https://tc39.es/ecma262/#sec-array.prototype.concat\n// with adding support of @@isConcatSpreadable and @@species\n$({ target: 'Array', proto: true, arity: 1, forced: FORCED }, {\n // eslint-disable-next-line no-unused-vars -- required for `.length`\n concat: function concat(arg) {\n var O = toObject(this);\n var A = arraySpeciesCreate(O, 0);\n var n = 0;\n var i, k, length, len, E;\n for (i = -1, length = arguments.length; i < length; i++) {\n E = i === -1 ? O : arguments[i];\n if (isConcatSpreadable(E)) {\n len = lengthOfArrayLike(E);\n doesNotExceedSafeInteger(n + len);\n for (k = 0; k < len; k++, n++) if (k in E) createProperty(A, n, E[k]);\n } else {\n doesNotExceedSafeInteger(n + 1);\n createProperty(A, n++, E);\n }\n }\n A.length = n;\n return A;\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})();\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 { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\n\nexport var properties = ['isLazyUpdate', 'content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'created'];\nexport var modelProps = [];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0];\nexport var watch = testProp[1];\nexport var emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\nexport var isExecute = gh ? false : true;\n/**\n * Represents the Essential JS 2 VueJS Button Component\n * ```html\n *
Button\n * ```\n */\nvar ButtonComponent = /** @class */ (function (_super) {\n __extends(ButtonComponent, _super);\n function ButtonComponent() {\n var _this = _super.call(this, arguments) || this;\n _this.propKeys = properties;\n _this.models = modelProps;\n _this.hasChildDirective = false;\n _this.hasInjectedModules = false;\n _this.tagMapper = {};\n _this.tagNameMapper = {};\n _this.isVue3 = !isExecute;\n _this.ej2Instances = new Button({});\n _this.bindProperties();\n _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;\n _this.ej2Instances.setProperties = _this.setProperties;\n _this.ej2Instances.clearTemplate = _this.clearTemplate;\n return _this;\n }\n ButtonComponent.prototype.clearTemplate = function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n };\n ButtonComponent.prototype.setProperties = function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n };\n ButtonComponent.prototype.render = function (createElement) {\n var h = gh || createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = gh ? this.$slots.default() : this.$slots.default;\n }\n return h('button', slots);\n };\n ButtonComponent.prototype.click = function () {\n return this.ej2Instances.click();\n };\n ButtonComponent.prototype.focusIn = function () {\n return this.ej2Instances.focusIn();\n };\n ButtonComponent = __decorate([\n EJComponentDecorator({\n props: properties\n }, isExecute)\n \n ], ButtonComponent);\n return ButtonComponent;\n}(ComponentBase));\nexport { ButtonComponent };\nexport var ButtonPlugin = {\n name: 'ejs-button',\n install: function (Vue) {\n Vue.component(ButtonPlugin.name, ButtonComponent);\n }\n};\n","var call = require('../internals/function-call');\nvar aCallable = require('../internals/a-callable');\nvar anObject = require('../internals/an-object');\nvar tryToString = require('../internals/try-to-string');\nvar getIteratorMethod = require('../internals/get-iterator-method');\n\nvar $TypeError = TypeError;\n\nmodule.exports = function (argument, usingIterator) {\n var iteratorMethod = arguments.length < 2 ? getIteratorMethod(argument) : usingIterator;\n if (aCallable(iteratorMethod)) return anObject(call(iteratorMethod, argument));\n throw $TypeError(tryToString(argument) + ' is not iterable');\n};\n","import { detach, getUniqueID, rippleEffect, setValue, attributes } from '@syncfusion/ej2-base';\nimport { getValue, addClass, deleteObject } from '@syncfusion/ej2-base';\n/**\n * Initialize wrapper element for angular.\n *\n * @private\n *\n * @param {CreateElementArgs} createElement - Specifies created element args\n * @param {string} tag - Specifies tag name\n * @param {string} type - Specifies type name\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} WRAPPER - Specifies wrapper element\n * @param {string} role - Specifies role\n * @returns {HTMLInputElement} - Input Element\n */\nexport function wrapperInitialize(createElement, tag, type, element, WRAPPER, role) {\n var input = element;\n if (element.tagName === tag) {\n var ejInstance = getValue('ej2_instances', element);\n input = createElement('input', { attrs: { 'type': type } });\n var props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];\n for (var index = 0, len = element.attributes.length; index < len; index++) {\n if (props.indexOf(element.attributes[index].nodeName) === -1) {\n input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);\n }\n }\n attributes(element, { 'class': WRAPPER, 'role': role, 'aria-checked': 'false' });\n element.appendChild(input);\n setValue('ej2_instances', ejInstance, input);\n deleteObject(element, 'ej2_instances');\n }\n return input;\n}\n/**\n * Get the text node.\n *\n * @param {HTMLElement} element - Specifies html element\n * @private\n * @returns {Node} - Text node.\n */\nexport function getTextNode(element) {\n var node;\n var childnode = element.childNodes;\n for (var i = 0; i < childnode.length; i++) {\n node = childnode[i];\n if (node.nodeType === 3) {\n return node;\n }\n }\n return null;\n}\n/**\n * Destroy the button components.\n *\n * @private\n * @param {Switch | CheckBox} ejInst - Specifies eJ2 Instance\n * @param {Element} wrapper - Specifies wrapper element\n * @param {string} tagName - Specifies tag name\n * @returns {void}\n */\nexport function destroy(ejInst, wrapper, tagName) {\n if (tagName === 'INPUT') {\n wrapper.parentNode.insertBefore(ejInst.element, wrapper);\n detach(wrapper);\n ejInst.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n ejInst.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n}\n/**\n * Initialize control pre rendering.\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies proxy\n * @param {string} control - Specifies control\n * @param {string} wrapper - Specifies wrapper element\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} moduleName - Specifies module name\n * @returns {void}\n */\nexport function preRender(proxy, control, wrapper, element, moduleName) {\n element = wrapperInitialize(proxy.createElement, control, 'checkbox', element, wrapper, moduleName);\n proxy.element = element;\n if (proxy.element.getAttribute('type') !== 'checkbox') {\n proxy.element.setAttribute('type', 'checkbox');\n }\n if (!proxy.element.id) {\n proxy.element.id = getUniqueID('e-' + moduleName);\n }\n}\n/**\n * Creates CheckBox component UI with theming and ripple support.\n *\n * @private\n * @param {CreateElementArgs} createElement - Specifies Created Element args\n * @param {boolean} enableRipple - Specifies ripple effect\n * @param {CheckBoxUtilModel} options - Specifies Checkbox util Model\n * @returns {Element} - Checkbox Element\n */\nexport function createCheckBox(createElement, enableRipple, options) {\n if (enableRipple === void 0) { enableRipple = false; }\n if (options === void 0) { options = {}; }\n var wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });\n if (options.cssClass) {\n addClass([wrapper], options.cssClass.split(' '));\n }\n if (options.enableRtl) {\n wrapper.classList.add('e-rtl');\n }\n if (enableRipple) {\n var rippleSpan = createElement('span', { className: 'e-ripple-container' });\n rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });\n wrapper.appendChild(rippleSpan);\n }\n var frameSpan = createElement('span', { className: 'e-frame e-icons' });\n if (options.checked) {\n frameSpan.classList.add('e-check');\n }\n wrapper.appendChild(frameSpan);\n if (options.label) {\n var labelSpan = createElement('span', { className: 'e-label' });\n if (options.disableHtmlEncode) {\n labelSpan.textContent = options.label;\n }\n else {\n labelSpan.innerHTML = options.label;\n }\n wrapper.appendChild(labelSpan);\n }\n return wrapper;\n}\n/**\n * Handles ripple mouse.\n *\n * @private\n * @param {MouseEvent} e - Specifies mouse event\n * @param {Element} rippleSpan - Specifies Ripple span element\n * @returns {void}\n */\nexport function rippleMouseHandler(e, rippleSpan) {\n if (rippleSpan) {\n var event_1 = document.createEvent('MouseEvents');\n event_1.initEvent(e.type, false, true);\n rippleSpan.dispatchEvent(event_1);\n }\n}\n/**\n * Append hidden input to given element\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies Proxy\n * @param {Element} wrap - Specifies Wrapper ELement\n * @returns {void}\n */\nexport function setHiddenInput(proxy, wrap) {\n if (proxy.element.getAttribute('ejs-for')) {\n wrap.appendChild(proxy.createElement('input', {\n attrs: { 'name': proxy.name || proxy.element.name, 'value': 'false', 'type': 'hidden' }\n }));\n }\n}\n","var anObject = require('../internals/an-object');\nvar iteratorClose = require('../internals/iterator-close');\n\n// call something on iterator step with safe closing on error\nmodule.exports = function (iterator, fn, value, ENTRIES) {\n try {\n return ENTRIES ? fn(anObject(value)[0], value[1]) : fn(value);\n } catch (error) {\n iteratorClose(iterator, 'throw', error);\n }\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar IE8_DOM_DEFINE = require('../internals/ie8-dom-define');\nvar V8_PROTOTYPE_DEFINE_BUG = require('../internals/v8-prototype-define-bug');\nvar anObject = require('../internals/an-object');\nvar toPropertyKey = require('../internals/to-property-key');\n\nvar $TypeError = TypeError;\n// eslint-disable-next-line es-x/no-object-defineproperty -- safe\nvar $defineProperty = Object.defineProperty;\n// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe\nvar $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar ENUMERABLE = 'enumerable';\nvar CONFIGURABLE = 'configurable';\nvar WRITABLE = 'writable';\n\n// `Object.defineProperty` method\n// https://tc39.es/ecma262/#sec-object.defineproperty\nexports.f = DESCRIPTORS ? V8_PROTOTYPE_DEFINE_BUG ? function defineProperty(O, P, Attributes) {\n anObject(O);\n P = toPropertyKey(P);\n anObject(Attributes);\n if (typeof O === 'function' && P === 'prototype' && 'value' in Attributes && WRITABLE in Attributes && !Attributes[WRITABLE]) {\n var current = $getOwnPropertyDescriptor(O, P);\n if (current && current[WRITABLE]) {\n O[P] = Attributes.value;\n Attributes = {\n configurable: CONFIGURABLE in Attributes ? Attributes[CONFIGURABLE] : current[CONFIGURABLE],\n enumerable: ENUMERABLE in Attributes ? Attributes[ENUMERABLE] : current[ENUMERABLE],\n writable: false\n };\n }\n } return $defineProperty(O, P, Attributes);\n} : $defineProperty : function defineProperty(O, P, Attributes) {\n anObject(O);\n P = toPropertyKey(P);\n anObject(Attributes);\n if (IE8_DOM_DEFINE) try {\n return $defineProperty(O, P, Attributes);\n } catch (error) { /* empty */ }\n if ('get' in Attributes || 'set' in Attributes) throw $TypeError('Accessors not supported');\n if ('value' in Attributes) O[P] = Attributes.value;\n return O;\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 { 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[i], 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[j], 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[i].isCaptionRow) {\n this.rows[i].aggregatesCount = this.rows.length - rowCnt;\n }\n else if (!this.rows[i].isCaptionRow && !this.rows[i].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[i].isCaptionRow && rowObj[i].indent === indent\n && rowObj[i].data.key === key) {\n preCap = rowObj[i];\n }\n if (rowObj[i].indent === indent || rowObj[i].indent < indent) {\n break;\n }\n if (rowObj[i].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[i] = this.generateRow(data[i], 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[i].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[i].isDataRow) {\n input[i].cells = this.generateCells(input[i]);\n for (var j = 0; j < input[i].indent; j++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(input[i].indent) === -1) {\n continue;\n }\n input[i].cells.unshift(this.generateIndentCell());\n }\n }\n else {\n var cRow = this.generateCaptionRow(input[i].data, input[i].indent);\n input[i].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[i];\n if (!row.isCaptionRow) {\n continue;\n }\n for (var j = i + 1; j < this.rows.length; j++) {\n var childRow = this.rows[j];\n if (row.uid === childRow.parentUid) {\n this.rows[j].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 } 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 } 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.viewColIndexes = [];\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 this.isRemove = false;\n this.visibleRows = [];\n this.visibleFrozenRows = [];\n this.rightFreezeRows = [];\n this.isAddRows = false;\n this.isInfiniteFreeze = false;\n this.useGroupCache = false;\n this.rafCallback = function (args) {\n var arg = args;\n return function () {\n if (_this.parent.isFrozenGrid() && _this.parent.enableVirtualization) {\n var tableName = args.tableName;\n _this.isLoaded = _this.parent.getFrozenMode() === literals.leftRight ? tableName === 'frozen-right' : tableName === 'movable';\n if (_this.parent.enableColumnVirtualization && args.requestType === 'virtualscroll' && _this.isLoaded) {\n var mHdr = [].slice.call(_this.parent.getMovableVirtualHeader().getElementsByClassName(literals.row));\n var fHdr = [].slice.call(_this.parent.getFrozenVirtualHeader().getElementsByClassName(literals.row));\n _this.isLoaded = mHdr.length === fHdr.length;\n }\n }\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 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('aria-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[count]) {\n rows = rows.concat(_this.infiniteCache[count]);\n }\n }\n }\n }\n if (_this.parent.isFrozenGrid()) {\n rows = args.isFrozen ? _this.freezeRows : args.renderFrozenRightContent ? _this.parent.getFrozenRightRowsObject()\n : _this.movableRows;\n }\n _this.parent.notify(events.contentReady, { rows: rows, args: arg });\n if (_this.isLoaded) {\n _this.parent.isManualRefresh = false;\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 (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.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 div.appendChild(innerDiv);\n this.setPanel(div);\n gObj.element.appendChild(div);\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 this.ariaService.setOptions(this.getTable(), {\n multiselectable: this.parent.selectionSettings.type === 'Multiple'\n });\n this.initializeContentDrop();\n if (this.parent.frozenRows) {\n this.parent.getHeaderContent().classList.add('e-frozenhdrcont');\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: 'grid',\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));\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 var dataSource = this.currentMovableRows || gObj.currentViewData;\n var contentModule = this.parent.contentModule;\n var isReact = gObj.isReact && !isNullOrUndefined(gObj.rowTemplate);\n var frag = isReact ? gObj.createElement(literals.tbody) : document.createDocumentFragment();\n if (!this.initialPageRecords) {\n this.initialPageRecords = extend([], dataSource);\n }\n var hdrfrag = isReact ? gObj.createElement(literals.tbody) : document.createDocumentFragment();\n var columns = gObj.getColumns();\n var tr;\n var hdrTbody;\n var frzCols = gObj.getFrozenColumns();\n var isFrozenGrid = this.parent.isFrozenGrid();\n var trElement;\n var row = new RowRenderer(this.serviceLocator, null, this.parent);\n var isInfiniteScroll = this.parent.enableInfiniteScrolling\n && args.requestType === 'infiniteScroll';\n gObj.notify(events.destroyChildGrid, {});\n this.rowElements = [];\n this.rows = [];\n var fCont = this.getPanel().querySelector('.' + literals.frozenContent);\n var mCont = this.getPanel().querySelector('.' + literals.movableContent);\n var cont = this.getPanel().querySelector('.' + literals.content);\n var tbdy;\n var tableName;\n if (isGroupAdaptive(gObj)) {\n if (['sorting', 'filtering', 'searching', 'grouping', 'ungrouping', 'reorder']\n .some(function (value) { return args.requestType === value; })) {\n this.emptyVcRows();\n }\n }\n var modelData;\n if (this.parent.enableVirtualization && this.parent.isFrozenGrid()) {\n if (this.parent.enableColumnVirtualization && args.requestType === 'virtualscroll'\n && args.virtualInfo.sentinelInfo.axis === 'X') {\n modelData = this.parent.contentModule.generateRows(dataSource, args);\n args.renderMovableContent = true;\n }\n modelData = this.parent.contentModule.generateRows(dataSource, args);\n }\n else {\n modelData = this.checkCache(modelData, args);\n if (!this.isAddRows && !this.useGroupCache) {\n modelData = this.generator.generateRows(dataSource, args);\n }\n }\n this.setGroupCache(modelData, args);\n this.parent.notify(events.setInfiniteCache, { isInfiniteScroll: isInfiniteScroll, modelData: modelData, args: args });\n var idx = modelData[0].cells[0].index;\n if (isFrozenGrid) {\n tableName = contentModule.setTbody(modelData, args);\n tbdy = contentModule.getTbody(tableName);\n }\n var isFrozenLeft = this.parent.getFrozenMode() === literals.leftRight && tableName === literals.frozenRight;\n /* eslint-disable */\n if (args.requestType !== 'infiniteScroll' && this.parent.registeredTemplate\n && this.parent.registeredTemplate.template && !args.isFrozen && !isFrozenLeft) {\n var templatetoclear = [];\n for (var i = 0; i < this.parent.registeredTemplate.template.length; i++) {\n for (var j = 0; j < this.parent.registeredTemplate.template[i].rootNodes.length; j++) {\n if (isNullOrUndefined(this.parent.registeredTemplate.template[i].rootNodes[j].parentNode)) {\n templatetoclear.push(this.parent.registeredTemplate.template[i]);\n /* eslint-enable */\n }\n }\n }\n this.parent.destroyTemplate(['template'], templatetoclear);\n }\n if ((this.parent.isReact || this.parent.isVue) && args.requestType !== 'infiniteScroll' && !args.isFrozen) {\n var templates = [\n this.parent.isVue ? 'template' : 'columnTemplate', 'rowTemplate', 'detailTemplate',\n 'captionTemplate', 'commandsTemplate', 'groupFooterTemplate', 'groupCaptionTemplate'\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 if (!isFrozenGrid) {\n this.tbody = this.getTable().querySelector(literals.tbody);\n }\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[m]) {\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 && !gObj.isFrozenGrid() && 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[i].cells.splice(0, this.parent.getFrozenColumns());\n tr = row.render(mhdrData[i], columns);\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 for (var i = startIndex, len = modelData.length; i < len; i++) {\n this.rows.push(modelData[i]);\n if (this.parent.groupSettings.enableLazyLoading && !this.useGroupCache && this.parent.groupSettings.columns.length) {\n this.setRowsInLazyGroup(modelData[i], i);\n if (isNullOrUndefined(modelData[i].indent)) {\n continue;\n }\n }\n this.setInfiniteVisibleRows(args, modelData[i], tableName);\n if (isGroupAdaptive(gObj) && args.virtualInfo && args.virtualInfo.blockIndexes\n && (this.rowElements.length >= (args.virtualInfo.blockIndexes.length * this.parent.contentModule.getBlockSize()))\n && blockLoad) {\n this.parent.currentViewData['records'] = this.rows.map(function (m) { return m.data; });\n break;\n }\n if (!gObj.rowTemplate) {\n tr = row.render(modelData[i], columns);\n var isVFreorder = this.ensureFrozenHeaderRender(args);\n if (gObj.frozenRows && i < gObj.frozenRows && !isInfiniteScroll && args.requestType !== 'virtualscroll' && isVFreorder\n && this.ensureVirtualFrozenHeaderRender(args)) {\n hdrfrag.appendChild(tr);\n }\n else {\n frag.appendChild(tr);\n }\n if (modelData[i].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[i]);\n gObj.getRowTemplate()(copied, gObj, 'rowTemplate', rowTemplateID, null, null, isHeader ? hdrfrag : frag);\n gObj.renderTemplates();\n }\n else {\n elements = gObj.getRowTemplate()(extend({ index: i }, dataSource[i]), gObj, 'rowTemplate', rowTemplateID);\n }\n if (!gObj.isReact && elements[0].tagName === 'TBODY') {\n for (var j = 0; j < elements.length; j++) {\n var isTR = elements[j].nodeName.toLowerCase() === 'tr';\n if (isTR || (elements[j].querySelectorAll && elements[j].querySelectorAll('tr').length)) {\n tr = isTR ? elements[j] : elements[j].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[i].data, row: trElement ? trElement : tr };\n this.parent.trigger(events.rowDataBound, arg);\n }\n if (modelData[i].isDataRow) {\n this.rowElements.push(tr);\n }\n this.ariaService.setOptions(this.getTable(), { colcount: gObj.getColumns().length.toString() });\n }\n if (isFrozenGrid) {\n contentModule.splitRows(tableName);\n }\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 = isFrozenGrid ? contentModule.getFrozenHeader(tableName) : 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 }\n if (!gObj.enableVirtualization && 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 if (isFrozenGrid) {\n contentModule.setIsFrozen(args, tableName);\n }\n this.index = idx;\n getUpdateUsingRaf(function () {\n _this.parent.notify(events.beforeFragAppend, args);\n var isVFTable = _this.parent.enableVirtualization && _this.parent.isFrozenGrid();\n if (!_this.parent.enableVirtualization && !isInfiniteScroll) {\n if (_this.parent.isFrozenGrid()) {\n remove(contentModule.getTbody(tableName));\n tbdy = _this.parent.createElement(literals.tbody);\n }\n else {\n _this.tbody.innerHTML = '';\n remove(_this.tbody);\n _this.tbody = _this.parent.createElement(literals.tbody);\n }\n }\n if (isFrozenGrid && !isVFTable && !_this.parent.enableInfiniteScrolling) {\n _this.appendContent(tbdy, frag, args, tableName);\n }\n else {\n if (gObj.rowTemplate) {\n updateBlazorTemplate(gObj.element.id + 'rowTemplate', 'RowTemplate', gObj);\n }\n if (isVFTable) {\n if (args.renderFrozenRightContent) {\n var frCont = gObj.getContent().querySelector('.e-frozen-right-content').querySelector(literals.tbody);\n _this.appendContent(frCont, frag, args);\n }\n else if (!args.renderMovableContent) {\n _this.appendContent(fCont.querySelector(literals.tbody), frag, args);\n }\n else {\n _this.appendContent(mCont.querySelector(literals.tbody), frag, args);\n args.renderMovableContent = false;\n }\n if (!_this.parent.getFrozenColumns()) {\n contentModule.renderNextFrozentPart(args, tableName);\n }\n }\n else {\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling) {\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 (!frzCols && isFrozenGrid) {\n if ((gObj.getFrozenMode() !== literals.leftRight\n && (tableName === literals.frozenLeft || tableName === literals.frozenRight))\n || (gObj.getFrozenMode() === literals.leftRight\n && (tableName === literals.frozenLeft || tableName === 'movable'))) {\n _this.refreshContentRows(extend({}, args));\n }\n }\n }\n else {\n _this.useGroupCache = false;\n _this.appendContent(_this.tbody, frag, args);\n }\n }\n }\n if (frzCols) {\n contentModule.renderNextFrozentPart(args, tableName);\n }\n frag = null;\n }, this.rafCallback(extend({}, args)));\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 };\n ContentRender.prototype.setRowsInLazyGroup = function (row, index) {\n if (this.parent.groupSettings.enableLazyLoading && !this.useGroupCache && this.parent.groupSettings.columns.length) {\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 var index = args.isFrozen ? 1 : 0;\n var frozenCols = this.parent.isFrozenGrid();\n this.isAddRows = !isNullOrUndefined(this.infiniteCache[this.parent.pageSettings.currentPage]);\n if (frozenCols && !isNullOrUndefined(this.infiniteCache[this.parent.pageSettings.currentPage])) {\n this.isAddRows = this.infiniteCache[this.parent.pageSettings.currentPage][index].length !== 0;\n }\n if (this.isAddRows) {\n var data = !frozenCols ? this.infiniteCache[this.parent.pageSettings.currentPage]\n : this.infiniteCache[this.parent.pageSettings.currentPage][index];\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 &&\n (args.requestType === 'paging' || args.requestType === 'columnstate' || args.requestType === 'reorder')\n && this.parent.contentModule.getGroupCache()[this.parent.pageSettings.currentPage]) {\n this.useGroupCache = true;\n return this.parent.contentModule.initialGroupRows(args.requestType === 'reorder');\n }\n return null;\n };\n ContentRender.prototype.setInfiniteVisibleRows = function (args, data, tableName) {\n var frozenCols = this.parent.isFrozenGrid();\n if (this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache) {\n if (frozenCols) {\n if (tableName === literals.frozenLeft || (this.parent.getFrozenMode() === 'Right' && tableName === literals.frozenRight)) {\n this.visibleFrozenRows.push(data);\n }\n else if (tableName === 'movable') {\n this.visibleRows.push(data);\n }\n else {\n this.rightFreezeRows.push(data);\n }\n }\n else if (!this.parent.infiniteScrollSettings.enableCache) {\n this.visibleRows.push(data);\n }\n }\n };\n ContentRender.prototype.getCurrentBlockInfiniteRecords = function (isFreeze) {\n var data = [];\n if (this.parent.infiniteScrollSettings.enableCache) {\n if (!Object.keys(this.infiniteCache).length) {\n return [];\n }\n var frozenCols = this.parent.isFrozenGrid();\n var rows = this.parent.getRows();\n var index = parseInt(rows[this.parent.frozenRows].getAttribute(literals.ariaRowIndex), 10);\n var first = Math.ceil((index + 1) / this.parent.pageSettings.pageSize);\n index = parseInt(rows[rows.length - 1].getAttribute(literals.ariaRowIndex), 10);\n var last = Math.ceil(index / this.parent.pageSettings.pageSize);\n if (frozenCols) {\n var idx = isFreeze ? 0 : 1;\n for (var i = first; i <= last; i++) {\n data = !data.length ? this.infiniteCache[i][idx]\n : data.concat(this.infiniteCache[i][idx]);\n }\n if (this.parent.frozenRows && this.parent.pageSettings.currentPage > 1) {\n data = this.infiniteCache[1][idx].slice(0, this.parent.frozenRows).concat(data);\n }\n }\n else {\n for (var i = first; i <= last; i++) {\n data = !data.length ? this.infiniteCache[i] : data.concat(this.infiniteCache[i]);\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 }\n return data;\n };\n ContentRender.prototype.getReorderedVFRows = function (args) {\n return this.parent.contentModule.getReorderedFrozenRows(args);\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 = [];\n if (this.parent.isFrozenGrid()) {\n this.currentMovableRows = dataSource;\n fhdrData = this.getReorderedVFRows(args);\n }\n else {\n fhdrData = this.getReorderedRows(args);\n }\n for (var i = 0; i < fhdrData.length; i++) {\n tr = row.render(fhdrData[i], columns);\n hdrfrag.appendChild(tr);\n }\n if (args.virtualInfo.page === 1) {\n modelData.splice(0, this.parent.frozenRows);\n }\n if (args.renderMovableContent) {\n this.parent.currentViewData = this.currentMovableRows;\n this.currentMovableRows = null;\n }\n }\n };\n ContentRender.prototype.getInfiniteRows = function () {\n var rows = [];\n var frozenCols = this.parent.isFrozenGrid();\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 = !frozenCols ? rows.concat(this.infiniteCache[keys[i]]) : rows.concat(this.infiniteCache[keys[i]][0]);\n }\n }\n else {\n rows = frozenCols ? this.visibleFrozenRows : 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.parent.getFrozenColumns() ? this.freezeRows : this.rows;\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.getMovableRows = function () {\n var infiniteRows = this.getInfiniteMovableRows();\n return infiniteRows.length ? infiniteRows : this.movableRows;\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.parent.getFrozenColumns() ? this.freezeRowElements : this.rowElements;\n };\n /**\n * Get the Freeze pane movable content table data row elements\n *\n * @returns {Element} returns the element\n */\n ContentRender.prototype.getMovableRowElements = 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 isFrozenGrid = this.parent.isFrozenGrid();\n var frzCols = gObj.getFrozenColumns();\n var rows = [];\n if (isFrozenGrid) {\n var fRows = this.freezeRows;\n var mRows = this.movableRows;\n var rowLen = fRows.length;\n var cellLen = void 0;\n var rightRows = [];\n if (gObj.getFrozenMode() === literals.leftRight) {\n rightRows = gObj.getFrozenRightRowsObject();\n }\n for (var i = 0, row = void 0; i < rowLen; i++) {\n cellLen = mRows[i].cells.length;\n var rightLen = rightRows.length ? rightRows[i].cells.length : 0;\n row = fRows[i].clone();\n for (var j = 0; j < cellLen; j++) {\n row.cells.push(mRows[i].cells[j]);\n }\n for (var k = 0; k < rightLen; k++) {\n row.cells.push(rightRows[i].cells[k]);\n }\n rows.push(row);\n }\n }\n else {\n rows = this.getRows();\n }\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[c];\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 if (isFrozenGrid) {\n if (column.getFreezeTableName() !== 'movable') {\n if (column.getFreezeTableName() === literals.frozenRight) {\n var left = this.parent.getFrozenLeftColumnsCount();\n var movable = this.parent.getMovableColumnsCount();\n colIdx = idx = idx - (left + movable);\n var colG = this.parent.getContent().querySelector('.e-frozen-right-content').querySelector(literals.colGroup);\n setStyleAttribute(colG.childNodes[idx], { 'display': displayVal });\n contentrows = gObj.getFrozenRightRowsObject();\n tr = gObj.getFrozenRightDataRows();\n }\n else {\n setStyleAttribute(this.getColGroup().childNodes[idx], { 'display': displayVal });\n var infiniteFreezeData = this.infiniteRowVisibility(true);\n contentrows = infiniteFreezeData ? infiniteFreezeData : this.freezeRows;\n tr = gObj.getDataRows();\n }\n }\n else {\n var mTable = gObj.getContent().querySelector('.' + literals.movableContent).querySelector(literals.colGroup);\n colIdx = idx = idx - frzCols - this.parent.getFrozenLeftColumnsCount();\n setStyleAttribute(mTable.childNodes[idx], { 'display': displayVal });\n tr = gObj.getMovableDataRows();\n var infiniteMovableData = this.infiniteRowVisibility();\n contentrows = infiniteMovableData ? infiniteMovableData : this.movableRows;\n }\n }\n else {\n setStyleAttribute(this.getColGroup().childNodes[idx], { 'display': displayVal });\n }\n }\n if (!needFullRefresh) {\n this.setDisplayNone(tr, colIdx, displayVal, contentrows);\n if (contentrows[0].cells[colIdx].isTemplate) {\n needFullRefresh = true;\n }\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 if (!this.parent.getFrozenColumns()) {\n this.parent.notify(events.partialRefresh, { rows: contentrows, args: args });\n }\n else {\n this.parent.notify(events.partialRefresh, { rows: this.freezeRows, args: { isFrozen: true, rows: this.freezeRows } });\n this.parent.notify(events.partialRefresh, { rows: this.movableRows, args: { isFrozen: false, rows: this.movableRows } });\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 = isFreeze ? this.getCurrentBlockInfiniteRecords(true) : 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 = void 0;\n if (this.parent.enableColumnVirtualization && this.parent.getFrozenColumns()\n && this.parent.contentModule.isXaxis()) {\n colGroup = this.parent.getMovableVirtualHeader().querySelector(literals.colGroup).cloneNode(true);\n }\n else {\n colGroup = this.getHeaderColGroup();\n }\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).querySelector(literals.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[index].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 isFrozen = this.parent.isFrozenGrid();\n if (isFrozen && this.parent.enableVirtualization) {\n return;\n }\n if (isFrozen) {\n var rows = this.getMovableRows().filter(function (row) { return clearAll || uid === row.uid; });\n for (var i = 0; i < rows.length; i++) {\n rows[i].isSelected = set;\n }\n }\n var row = this.getRows().filter(function (row) { return clearAll || uid === row.uid; });\n for (var j = 0; j < row.length; j++) {\n row[j].isSelected = set;\n var cells = row[j].cells;\n for (var k = 0; k < cells.length; k++) {\n cells[k].isSelected = set;\n }\n }\n };\n ContentRender.prototype.getRowByIndex = function (index) {\n index = this.getInfiniteRowIndex(index);\n return this.parent.getDataRows()[index];\n };\n ContentRender.prototype.getInfiniteRowIndex = function (index) {\n if (this.parent.infiniteScrollSettings.enableCache) {\n var fRows = this.parent.frozenRows;\n var idx = fRows > index ? 0 : fRows;\n var firstRowIndex = parseInt(this.parent.getRows()[idx].getAttribute(literals.ariaRowIndex), 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.getMovableRowByIndex = function (index) {\n index = this.getInfiniteRowIndex(index);\n return this.parent.getMovableDataRows()[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);\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[i].classList.contains('e-insertedrow')) {\n trs.splice(i, 1);\n --i;\n continue;\n }\n newKeys[dataSource[i][key]] = oldKeys[this.prevCurrentView[i][key]] = i;\n newIndexes[i] = dataSource[i][key];\n oldRowElements[oldRowObjs[i].uid] = trs[i];\n oldIndexes[i] = this.prevCurrentView[i][key];\n }\n }\n else {\n for (var i = 0; i < currentLen; i++) {\n newKeys[dataSource[i][key]] = i;\n newIndexes[i] = dataSource[i][key];\n }\n for (var i = 0; i < prevLen; i++) {\n if (this.parent.editSettings.mode === 'Batch'\n && trs[i].classList.contains('e-insertedrow')) {\n trs.splice(i, 1);\n --i;\n continue;\n }\n oldRowElements[oldRowObjs[i].uid] = trs[i];\n oldKeys[this.prevCurrentView[i][key]] = i;\n oldIndexes[i] = this.prevCurrentView[i][key];\n }\n }\n }\n for (var i = 0; i < dataSource.length; i++) {\n var oldIndex = oldKeys[dataSource[i][key]];\n if (!isNullOrUndefined(oldIndex)) {\n var isEqual = false;\n if (this.parent.enableDeepCompare) {\n isEqual = this.objectEqualityChecker(this.prevCurrentView[oldIndex], dataSource[i]);\n }\n var tr = oldRowElements[oldRowObjs[oldIndex].uid];\n newRowObjs.push(oldRowObjs[oldIndex]);\n if (this.rowElements[oldIndex] && this.rowElements[oldIndex].getAttribute('data-uid') === newRowObjs[i].uid\n && ((hasBatch && isNullOrUndefined(batchChangeKeys[newIndexes[i]]))\n || (!hasBatch && (isEqual || this.prevCurrentView[oldIndex] === dataSource[i])))) {\n if (oldIndex !== i) {\n this.refreshImmutableContent(i, tr, newRowObjs[i]);\n }\n tbody.appendChild(tr);\n continue;\n }\n if ((hasBatch && !isNullOrUndefined(batchChangeKeys[newIndexes[i]]))\n || (!this.parent.enableDeepCompare && dataSource[i] !== this.prevCurrentView[oldIndex])\n || (this.parent.enableDeepCompare && !isEqual)) {\n oldRowObjs[oldIndex].setRowValue(dataSource[i]);\n }\n tbody.appendChild(tr);\n this.refreshImmutableContent(i, tr, newRowObjs[i]);\n }\n else {\n var row = new RowRenderer(this.serviceLocator, null, gObj);\n var modelData = this.generator.generateRows([dataSource[i]]);\n newRowObjs.push(modelData[0]);\n var tr = row.render(modelData[0], gObj.getColumns());\n tbody.appendChild(tr);\n this.refreshImmutableContent(i, tr, newRowObjs[i]);\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[i]] !== next[keys[i]]) {\n var isDate = old[keys[i]] instanceof Date && next[keys[i]] instanceof Date;\n if (!isDate || (old[keys[i]].getTime() !== next[keys[i]].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[i][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.ariaRowIndex, index.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[i].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 } 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 appendChildren(visualElement, result);\n }\n else {\n visualElement.innerHTML = col.headerTemplate;\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.getFrozenLeftColumnsCount() && !this.parent.getFrozenRightColumnsCount()) {\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 if (!this.parent.getFrozenColumns() && !this.parent.getFrozenRightColumnsCount() && !this.parent.getFrozenLeftColumnsCount()) {\n this.initializeHeaderDrag();\n this.initializeHeaderDrop();\n }\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: this.parent.isFrozenGrid() } });\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 var isFrozen = gObj.isFrozenGrid();\n if (this.getTable() && !isFrozen) {\n remove(this.getTable());\n }\n var table = this.parent.createElement('table', { className: literals.table, attrs: { cellspacing: '0.25px', role: 'grid' } });\n var tblName = tableName ? tableName : gObj.getFrozenLeftCount() ? 'frozen-left' : 'frozen-right';\n var findHeaderRow = this.createHeaderContent(tblName);\n var thead = findHeaderRow.thead;\n var tbody = this.parent.createElement(literals.tbody, { className: this.parent.frozenRows ? '' : 'e-hide' });\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');\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[i].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 this.ariaService.setOptions(table, { colcount: gObj.getColumns().length.toString() });\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 index = 1;\n var frozenMode = gObj.getFrozenMode();\n var columns = gObj.getColumns();\n var thead = this.parent.createElement('thead');\n var colHeader = this.parent.createElement('tr', { className: 'e-columnheader' });\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[i] = this.generateRow(i);\n rows[i].cells = [];\n }\n if (frozenMode !== 'Right') {\n rows = this.ensureColumns(rows);\n }\n rows = this.getHeaderCells(rows, tableName);\n if (frozenMode === 'Right') {\n index = 0;\n rows = this.ensureColumns(rows);\n }\n var frzCols = this.parent.getFrozenColumns();\n if (this.parent.isRowDragable() && this.parent.isFrozenGrid() && rows[0].cells[index]) {\n var colFreezeMode = rows[0].cells[index].column.getFreezeTableName();\n if (colFreezeMode === 'movable' || (frozenMode === literals.leftRight && colFreezeMode === literals.frozenRight)) {\n if (frozenMode === 'Right') {\n rows[0].cells.pop();\n }\n else {\n rows[0].cells.shift();\n }\n }\n else if (!frzCols && colFreezeMode === literals.frozenLeft) {\n rows[0].cells[0].column.freeze = colFreezeMode === literals.frozenLeft ? 'Left' : 'Right';\n }\n else if (frozenMode === 'Right' && colFreezeMode === literals.frozenRight) {\n rows[0].cells[rows[0].cells.length - 1].column.freeze = 'Right';\n }\n }\n for (var i = 0, len = this.colDepth; i < len; i++) {\n headerRow = rowRenderer.render(rows[i], columns);\n if (this.parent.rowHeight && headerRow.querySelector('.e-headercell')) {\n headerRow.style.height = this.parent.rowHeight + 'px';\n }\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 if (this.parent.enableColumnVirtualization && this.parent.getFrozenColumns()\n && this.parent.contentModule.isXaxis()) {\n cols = extend([], this.parent.getColumns());\n cols.splice(0, this.parent.getFrozenColumns());\n }\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[i].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[i].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[i].cells.push(this.generateCell(args, CellType.DetailHeader));\n }\n if (gObj.isRowDragable()) {\n rows[i].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 < cols.length; i++) {\n this.lockColsRendered = false;\n rows = this.appendCells(cols[i], rows, 0, i === 0, false, i === (cols.length - 1), thead, tableName, false);\n }\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n this.notfrzIdx = 0;\n this.lockColsRendered = true;\n rows = this.appendCells(cols[i], 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 isFrozen = this.parent.isFrozenGrid();\n var isLockColumn = !this.parent.lockcolPositionCount\n || (cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered);\n var isFrozenLockColumn = !this.parent.lockcolPositionCount || (cols.lockColumn && !this.lockColsRendered)\n || (!cols.lockColumn && this.lockColsRendered);\n var scrollbar = this.parent.getContent().querySelector('.e-movablescrollbar');\n var left;\n if (isFrozen && scrollbar && this.parent.enableColumnVirtualization) {\n left = scrollbar.scrollLeft;\n }\n if (!cols.columns) {\n if (left && left > 0 && this.parent.contentModule.isXaxis()\n && this.parent.inViewIndexes[0] !== 0 && cols.getFreezeTableName() === 'movable') {\n rows[index].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n else {\n if ((!isFrozen && isLockColumn) || (isFrozen && cols.getFreezeTableName() === tableName && isFrozenLockColumn)) {\n rows[index].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\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 var isFrozenStack = isFrozen && this.ensureStackedFrozen(cols.columns, tableName, false);\n if ((!isFrozen && isStackedLockColumn) || isFrozenStack) {\n rows[index].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols,\n colSpan: this.getColSpan(colSpan, stackedLockColsCount, cols.columns, tableName, isFrozen),\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[i], 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[i].visible && !isFirstObj;\n var isLaststackedCol = i === (len - 1) && isLastCol;\n rows = this.appendCells(cols.columns[i], rows, index + 1, isFirstObj, isFirstCol_1 && !isLaststackedCol, isLaststackedCol, isMovable, tableName, true);\n }\n }\n }\n return rows;\n };\n HeaderRender.prototype.ensureStackedFrozen = function (columns, tableName, isTrue) {\n var length = columns.length;\n for (var i = 0; i < length; i++) {\n if (columns[i].columns) {\n isTrue = this.ensureStackedFrozen(columns[i].columns, tableName, isTrue);\n }\n else if (columns[i].getFreezeTableName() === tableName) {\n isTrue = true;\n break;\n }\n }\n return isTrue;\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[i], lockColsCount);\n }\n }\n else if (col.lockColumn) {\n lockColsCount++;\n }\n return lockColsCount;\n };\n HeaderRender.prototype.getColSpan = function (colSpan, stackedLockColsCount, columns, tableName, isFrozen) {\n if (isFrozen) {\n colSpan = this.getFrozenColSpan(columns, tableName, 0);\n }\n else if (this.parent.lockcolPositionCount) {\n colSpan = !this.lockColsRendered ? stackedLockColsCount : colSpan - stackedLockColsCount;\n }\n return colSpan;\n };\n HeaderRender.prototype.getFrozenColSpan = function (columns, tableName, count) {\n var length = columns.length;\n for (var i = 0; i < length; i++) {\n if (columns[i].columns) {\n count = this.getFrozenColSpan(columns[i].columns, tableName, count);\n }\n else if (columns[i].getFreezeTableName() === tableName && columns[i].visible) {\n count++;\n }\n }\n return count;\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 var frzCols = gObj.getFrozenColumns();\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[c];\n idx = gObj.getNormalizedColumnIndex(column.uid);\n displayVal = column.visible ? '' : 'none';\n if (frzCols) {\n var normalizedfrzCols = this.parent.isRowDragable() ? frzCols + 1 : frzCols;\n if (idx < normalizedfrzCols) {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n else {\n var mTblColGrp = gObj.getHeaderContent().querySelector('.' + literals.movableHeader).querySelector(literals.colGroup);\n setStyleAttribute(mTblColGrp.children[idx - normalizedfrzCols], { 'display': displayVal });\n }\n }\n else {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n }\n this.refreshUI();\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 frzCols = this.parent.isFrozenGrid();\n var isVFTable = this.parent.enableColumnVirtualization && frzCols;\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 = this.parent.isFrozenGrid() ? this.parent.getFrozenLeftCount() ? 'frozen-left'\n : 'frozen-right' : undefined;\n if (isVFTable) {\n table = this.parent.contentModule.getVirtualFreezeHeader();\n tableName = this.parent.contentModule.isXaxis() ? 'movable' : tableName;\n }\n if (table) {\n remove(table);\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 if (!isVFTable) {\n this.setTable(table);\n }\n this.appendContent(table);\n this.parent.notify(events.colGroupRefresh, {});\n this.widthService.setWidthToColumns();\n this.parent.updateDefaultCursor();\n if (!frzCols || (this.parent.enableColumnVirtualization && frzCols)) {\n this.initializeHeaderDrag();\n }\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 if (!frzCols) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: frzCols } });\n }\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 };\n HeaderRender.prototype.toggleStackClass = function (div) {\n var column = this.parent.columns;\n var stackedHdr = column.some(function (column) { return !isNullOrUndefined(column.columns); });\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[i], 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 };\n HeaderRender.prototype.initializeHeaderDrop = function () {\n var gObj = this.parent;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var drop = new Droppable(gObj.getHeaderContent(), {\n accept: '.e-dragclone',\n drop: this.drop\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 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 _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","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 } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes, appendChildren } 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: { role: 'columnheader', tabindex: '-1' } });\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' });\n _this.gui = _this.parent.createElement('div');\n _this.chkAllBox = _this.parent.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox', 'aria-label': 'checkbox' } });\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' });\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' });\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 //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 (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()] = 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 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 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[count].field === column.field || (foreignColumn.length\n && column.foreignKeyValue === this.parent.filterSettings.columns[count].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 (column.allowSorting) {\n ariaAttr.sort = 'none';\n }\n if (column.allowGrouping) {\n ariaAttr.grabbed = false;\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 if (isReactCompiler) {\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]);\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 if (column.type !== 'checkbox') {\n node.classList.add('e-ellipsistooltip');\n }\n }\n node.setAttribute('aria-rowspan', (!isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());\n node.setAttribute('aria-colspan', '1');\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\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' }));\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[j].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 } 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 role: 'columnheader',\n tabindex: '-1'\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, 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 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';\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.element = _this.parent\n .createElement('TD', { className: 'e-groupcaption',\n attrs: { id: _this.parent.element.id + 'captioncell', role: 'gridcell', 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 var node = this.element.cloneNode();\n var gObj = this.parent;\n var result;\n var fKeyValue;\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 if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n var isReactCompiler = this.parent.isReact && typeof (gObj.groupSettings.captionTemplate) !== 'string';\n if (isReactCompiler) {\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) {\n appendChildren(node, result);\n }\n }\n else {\n if (gObj.groupSettings.enableLazyLoading) {\n node.innerHTML = cell.column.headerText + ': ' + value;\n }\n else {\n node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +\n (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));\n }\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');\n node.setAttribute('title', node.innerHTML);\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';\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.className = isExpand ? 'e-recordplusexpand' : 'e-recordpluscollapse';\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 node.appendChild(this.parent.createElement('div', {\n className: isExpand ? 'e-icons e-gdiagonaldown e-icon-gdownarrow' : 'e-icons e-gnextforward e-icon-grightarrow'\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', role: 'gridcell', 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('div', { className: 'e-icons e-dtdiagonaldown e-icon-gdownarrow' }));\n }\n else {\n node.appendChild(this.parent.createElement('div', { className: 'e-icons e-dtdiagonalright e-icon-grightarrow' }));\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';\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: { role: 'gridcell', 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 * @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 }));\n if (cell.isSelected) {\n nodeElement.classList.add('e-selectionbackground');\n nodeElement.classList.add('e-active');\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';\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 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 return;\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) {\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.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[i].template) {\n blazorTemplates[gObj.element.id + gridColumns[i].uid] = [];\n resetBlazorTemplate(gObj.element.id + gridColumns[i].uid, 'Template');\n }\n if (gridColumns[i].headerTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[i].uid + 'headerTemplate', 'HeaderTemplate');\n }\n if (gridColumns[i].filterTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[i].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[k].columns.length; j++) {\n if (gObj.aggregates[k].columns[j].footerTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[k].columns[j][guid] + 'footerTemplate';\n resetBlazorTemplate(tempID, 'FooterTemplate');\n }\n if (gObj.aggregates[k].columns[j].groupFooterTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[k].columns[j][guid] + 'groupFooterTemplate';\n resetBlazorTemplate(tempID, 'GroupFooterTemplate');\n }\n if (gObj.aggregates[k].columns[j].groupCaptionTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[k].columns[j][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 if (args.requestType !== 'virtualscroll' && !args.isCaptionCollapse) {\n this.parent.showSpinner();\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 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 (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 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);\n var spanCount = 0;\n if (gObj.detailTemplate || gObj.childGrid) {\n ++spanCount;\n }\n var tr = this.parent.createElement('tr', { className: 'e-emptyrow' });\n tr.appendChild(this.parent.createElement('td', {\n innerHTML: this.l10n.getConstant('EmptyRecord'),\n attrs: { colspan: (gObj.getVisibleColumns().length + spanCount + gObj.groupSettings.columns.length).toString() }\n }));\n tbody.appendChild(tr);\n this.contentRenderer.renderEmpty(tbody);\n if (isTrigger) {\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 }\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[i].field || '', data);\n if (!isNullOrUndefined(columns[i][cFormat])) {\n columns[i].format = columns[i][cFormat];\n }\n if (!isNullOrUndefined(columns[i].validationRules) && !isNullOrUndefined(columns[i].validationRules[equalTo])) {\n columns[i].validationRules[equalTo][0] = this.parent.element.id + columns[i].validationRules[equalTo][0];\n }\n if (columns[i].isForeignColumn() && columns[i].columnData) {\n value = getObject(columns[i].foreignKeyValue || '', columns[i].columnData[0]);\n }\n if (!isNullOrUndefined(value)) {\n this.isColTypeDef = true;\n if (!columns[i].type) {\n columns[i].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[i].type = columns[i].type || null;\n }\n var valueFormatter = new ValueFormatter();\n if (columns[i].format && (columns[i].format.skeleton || (columns[i].format.format &&\n typeof columns[i].format.format === 'string'))) {\n columns[i].setFormatter(valueFormatter.getFormatFunction(extend({}, columns[i].format)));\n columns[i].setParser(valueFormatter.getParserFunction(columns[i].format));\n }\n if (typeof (columns[i].format) === 'string') {\n setFormatter(this.locator, columns[i]);\n }\n else if (!columns[i].format && columns[i].type === 'number') {\n columns[i].setParser(fmtr.getParserFunction({ format: 'n2' }));\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 && (args.requestType === 'delete' || (args.requestType === 'save' && this.parent.infiniteScrollModule.requestType === 'add'));\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 _this.contentRenderer.prevCurrentView = _this.parent.currentViewData.slice();\n gObj.currentViewData = dataArgs.result;\n gObj.notify(events.refreshInfiniteCurrentViewData, { args: args, data: dataArgs.result });\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 _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 _this.parent.notify(events.dataReady, extend({ count: dataArgs.count, result: dataArgs.result, aggregates: dataArgs.aggregates }, 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 _this.renderEmptyRow();\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 = _this.parent.getFrozenColumns() !== 0 && !args.isFrozen;\n _this.parent.trigger(events.actionComplete, args);\n }\n }\n _this.parent.hideSpinner();\n }\n _this.parent.notify(events.toolbarRefresh, {});\n _this.setRowCount(_this.parent.getCurrentViewRecords().length);\n _this.parent.getDataModule().isQueryInvokedFromData = false;\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 this.ariaService.setOptions(this.parent.getContent().querySelector('.' + literals.content), { busy: false, invalid: true });\n this.setRowCount(1);\n this.parent.trigger(events.actionFailure, { error: e });\n this.parent.hideSpinner();\n if (args.requestType === 'save' || args.requestType === 'delete'\n || args.name === 'bulk-save') {\n return;\n }\n this.parent.currentViewData = [];\n this.renderEmptyRow();\n this.parent.log('actionfailure', { error: e });\n };\n Render.prototype.setRowCount = function (dataRowCount) {\n this.ariaService.setOptions(this.parent.getHeaderTable(), {\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 if (this.parent.columns.length < 1) {\n this.buildColumns(e.result[0]);\n }\n prepareColumns(this.parent.columns, null, this.parent);\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[i]] === 'object' && obj[keys[i]] && !(obj[keys[i]] instanceof Date) ?\n Object.keys(obj[keys[i]]) : [];\n if (childKeys.length) {\n this.iterateComplexColumns(obj[keys[i]], field + (keys[i] + '.'), split);\n }\n else {\n split[this.counter] = field + keys[i];\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[i] = { 'field': columns[i] };\n if (this.parent.enableColumnVirtualization) {\n cols[i].width = !isNullOrUndefined(cols[i].width) ? cols[i].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