\n * ```\n * ```typescript\n * \n * ```\n */\nvar Calendar = /** @class */ (function (_super) {\n __extends(Calendar, _super);\n /**\n * Initialized new instance of Calendar Class.\n * Constructor for creating the widget\n * @param {CalendarModel} options?\n * @param {string|HTMLElement} element?\n */\n function Calendar(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * To Initialize the control rendering.\n * @returns void\n * @private\n */\n Calendar.prototype.render = function () {\n if (this.calendarMode === 'Islamic' && this.islamicModule === undefined) {\n throwError('Requires the injectable Islamic modules to render Calendar in Islamic mode');\n }\n if (this.isMultiSelection && typeof this.values === 'object' && !isNullOrUndefined(this.values) && this.values.length > 0) {\n var tempValues = [];\n var copyValues = [];\n for (var limit = 0; limit < this.values.length; limit++) {\n if (tempValues.indexOf(+this.values[limit]) === -1) {\n tempValues.push(+this.values[limit]);\n copyValues.push(this.values[limit]);\n }\n }\n this.setProperties({ values: copyValues }, true);\n for (var index = 0; index < this.values.length; index++) {\n if (!this.checkDateValue(this.values[index])) {\n if (typeof (this.values[index]) === 'string' && this.checkDateValue(new Date(this.checkValue(this.values[index])))) {\n var copyDate = new Date(this.checkValue(this.values[index]));\n this.values.splice(index, 1);\n this.values.splice(index, 0, copyDate);\n }\n else {\n this.values.splice(index, 1);\n }\n }\n }\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n this.previousValues = this.values.length;\n }\n this.validateDate();\n this.minMaxUpdate();\n this.setEnable(this.enabled);\n if (this.getModuleName() === 'calendar') {\n this.setClass(this.cssClass);\n }\n _super.prototype.render.call(this);\n if (this.getModuleName() === 'calendar') {\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.add(form, 'reset', this.formResetHandler.bind(this));\n }\n this.setTimeZone(this.serverTimezoneOffset);\n }\n this.renderComplete();\n };\n Calendar.prototype.setEnable = function (enable) {\n if (!enable) {\n addClass([this.element], DISABLED);\n }\n else {\n removeClass([this.element], DISABLED);\n }\n };\n Calendar.prototype.setClass = function (newCssClass, oldCssClass) {\n if (!isNullOrUndefined(oldCssClass)) {\n oldCssClass = (oldCssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newCssClass)) {\n newCssClass = (newCssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(oldCssClass) && oldCssClass !== '') {\n removeClass([this.element], oldCssClass.split(' '));\n }\n if (!isNullOrUndefined(newCssClass)) {\n addClass([this.element], newCssClass.split(' '));\n }\n };\n Calendar.prototype.isDayLightSaving = function () {\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\n };\n Calendar.prototype.setTimeZone = function (offsetValue) {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var serverTimezoneDiff = offsetValue;\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date(this.value.getTime() + (timeZoneDiff * 60 * 60 * 1000));\n }\n else if (!isNullOrUndefined(this.timezone)) {\n var date = this.value || new Date();\n this.setProperties({ value: _super.prototype.getDate.call(this, date, this.timezone) }, true);\n }\n };\n Calendar.prototype.formResetHandler = function () {\n this.setProperties({ value: null }, true);\n };\n Calendar.prototype.validateDate = function () {\n if (typeof this.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(this.checkValue(this.value))) }, true); // persist the value property.\n }\n _super.prototype.validateDate.call(this, this.value);\n if (!isNullOrUndefined(this.value) && this.min <= this.max && this.value >= this.min && this.value <= this.max) {\n this.currentDate = new Date(this.checkValue(this.value));\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n };\n Calendar.prototype.minMaxUpdate = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.value) && this.value <= this.min && this.min <= this.max) {\n this.setProperties({ value: this.min }, true);\n this.changedArgs = { value: this.value };\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value >= this.max && this.min <= this.max) {\n this.setProperties({ value: this.max }, true);\n this.changedArgs = { value: this.value };\n }\n }\n }\n if (this.getModuleName() !== 'calendar' && !isNullOrUndefined(this.value)) {\n if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max) {\n _super.prototype.minMaxUpdate.call(this, this.min);\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max) {\n _super.prototype.minMaxUpdate.call(this, this.max);\n }\n }\n }\n else {\n _super.prototype.minMaxUpdate.call(this, this.value);\n }\n };\n Calendar.prototype.generateTodayVal = function (value) {\n var tempValue = new Date();\n if (value) {\n tempValue.setHours(value.getHours());\n tempValue.setMinutes(value.getMinutes());\n tempValue.setSeconds(value.getSeconds());\n tempValue.setMilliseconds(value.getMilliseconds());\n }\n else {\n tempValue = new Date(tempValue.getFullYear(), tempValue.getMonth(), tempValue.getDate(), 0, 0, 0, 0);\n }\n return tempValue;\n };\n Calendar.prototype.todayButtonClick = function (e) {\n if (this.showTodayButton) {\n var tempValue = this.generateTodayVal(this.value);\n this.setProperties({ value: _super.prototype.getDate.call(this, tempValue, this.timezone) }, true);\n this.isTodayClicked = true;\n this.todayButtonEvent = e;\n if (this.isMultiSelection) {\n var copyValues = this.copyValues(this.values);\n if (!_super.prototype.checkPresentDate.call(this, tempValue, this.values)) {\n copyValues.push(tempValue);\n this.setProperties({ values: copyValues });\n }\n }\n _super.prototype.todayButtonClick.call(this, e, new Date(+this.value));\n }\n };\n Calendar.prototype.keyActionHandle = function (e) {\n _super.prototype.keyActionHandle.call(this, e, this.value, this.isMultiSelection);\n };\n /**\n * Initialize the event handler\n * @private\n */\n Calendar.prototype.preRender = function () {\n var _this = this;\n this.changeHandler = function (e) {\n _this.triggerChange(e);\n };\n this.checkView();\n _super.prototype.preRender.call(this, this.value);\n };\n ;\n /**\n\n */\n Calendar.prototype.createContent = function () {\n this.previousDate = this.value;\n this.previousDateTime = this.value;\n _super.prototype.createContent.call(this);\n };\n Calendar.prototype.minMaxDate = function (localDate) {\n return _super.prototype.minMaxDate.call(this, localDate);\n };\n Calendar.prototype.renderMonths = function (e, value, isCustomDate) {\n _super.prototype.renderMonths.call(this, e, this.value, isCustomDate);\n };\n Calendar.prototype.renderDays = function (currentDate, value, isMultiSelect, values, isCustomDate) {\n var tempDays = _super.prototype.renderDays.call(this, currentDate, this.value, this.isMultiSelection, this.values, isCustomDate);\n if (this.isMultiSelection) {\n _super.prototype.validateValues.call(this, this.isMultiSelection, this.values);\n }\n return tempDays;\n };\n Calendar.prototype.renderYears = function (e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderYears.call(this, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderYears(e, this.value);\n }\n };\n Calendar.prototype.renderDecades = function (e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderDecades.call(this, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderDecade(e, this.value);\n }\n };\n Calendar.prototype.renderTemplate = function (elements, count, classNm, e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderTemplate.call(this, elements, count, classNm, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderTemplate(elements, count, classNm, e, this.value);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n };\n Calendar.prototype.clickHandler = function (e) {\n var eve = e.currentTarget;\n this.isPopupClicked = true;\n if (eve.classList.contains(OTHERMONTH)) {\n if (this.isMultiSelection) {\n var copyValues = this.copyValues(this.values);\n copyValues.push(this.getIdValue(e, null));\n this.setProperties({ values: copyValues }, true);\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n else {\n this.setProperties({ value: this.getIdValue(e, null) }, true);\n }\n }\n var storeView = this.currentView();\n _super.prototype.clickHandler.call(this, e, this.value);\n if (this.isMultiSelection && this.currentDate !== this.value &&\n !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0]) && storeView === 'Year') {\n this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);\n }\n };\n Calendar.prototype.switchView = function (view, e, isMultiSelection, isCustomDate) {\n _super.prototype.switchView.call(this, view, e, this.isMultiSelection, isCustomDate);\n };\n /**\n * To get component name\n * @private\n */\n Calendar.prototype.getModuleName = function () {\n _super.prototype.getModuleName.call(this);\n return 'calendar';\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n Calendar.prototype.getPersistData = function () {\n _super.prototype.getPersistData.call(this);\n var keyEntity = ['value', 'values'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n Calendar.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.effect = '';\n this.rangeValidation(this.min, this.max);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n if (this.isDateSelected) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: new Date(this.checkValue(newProp.value)) }, true);\n }\n else {\n newProp.value = new Date(this.checkValue(newProp.value));\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: oldProp.value }, true);\n }\n this.update();\n }\n break;\n case 'values':\n if (this.isDateSelected) {\n if (typeof newProp.values === 'string' || typeof newProp.values === 'number') {\n this.setProperties({ values: null }, true);\n }\n else {\n var copyValues = this.copyValues(this.values);\n for (var index = 0; index < copyValues.length; index++) {\n var tempDate = copyValues[index];\n if (this.checkDateValue(tempDate) && !_super.prototype.checkPresentDate.call(this, tempDate, copyValues)) {\n copyValues.push(tempDate);\n }\n }\n this.setProperties({ values: copyValues }, true);\n if (this.values.length > 0) {\n this.setProperties({ value: newProp.values[newProp.values.length - 1] }, true);\n }\n }\n this.validateValues(this.isMultiSelection, this.values);\n this.update();\n }\n break;\n case 'isMultiSelection':\n if (this.isDateSelected) {\n this.setProperties({ isMultiSelection: newProp.isMultiSelection }, true);\n this.update();\n }\n break;\n case 'enabled':\n this.setEnable(this.enabled);\n break;\n case 'cssClass':\n if (this.getModuleName() === 'calendar') {\n this.setClass(newProp.cssClass, oldProp.cssClass);\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp, this.isMultiSelection, this.values);\n }\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n Calendar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'calendar') {\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.remove(form, 'reset', this.formResetHandler.bind(this));\n }\n }\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n\n */\n Calendar.prototype.navigateTo = function (view, date, isCustomDate) {\n this.minMaxUpdate();\n _super.prototype.navigateTo.call(this, view, date, isCustomDate);\n };\n /**\n * Gets the current view of the Calendar.\n * @returns string\n\n */\n Calendar.prototype.currentView = function () {\n return _super.prototype.currentView.call(this);\n };\n /**\n * This method is used to add the single or multiple dates to the values property of the Calendar.\n * @param {Date || Date[]} dates - Specifies the date or dates to be added to the values property of the Calendar.\n * @returns void\n\n */\n Calendar.prototype.addDate = function (dates) {\n if (typeof dates !== 'string' && typeof dates !== 'number') {\n var copyValues = this.copyValues(this.values);\n if (typeof dates === 'object' && (dates).length > 0) {\n var tempDates = dates;\n for (var i = 0; i < tempDates.length; i++) {\n if (this.checkDateValue(tempDates[i]) && !_super.prototype.checkPresentDate.call(this, tempDates[i], copyValues)) {\n if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {\n copyValues.push(tempDates[i]);\n }\n else {\n copyValues = [new Date(+tempDates[i])];\n }\n }\n }\n }\n else {\n if (this.checkDateValue(dates) && !_super.prototype.checkPresentDate.call(this, dates, copyValues)) {\n if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {\n copyValues.push((dates));\n }\n else {\n copyValues = [new Date(+dates)];\n }\n }\n }\n this.setProperties({ values: copyValues }, true);\n if (this.isMultiSelection) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.validateValues(this.isMultiSelection, copyValues);\n this.update();\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n }\n };\n /**\n * This method is used to remove the single or multiple dates from the values property of the Calendar.\n * @param {Date || Date[]} dates - Specifies the date or dates which need to be removed from the values property of the Calendar.\n * @returns void\n\n */\n Calendar.prototype.removeDate = function (dates) {\n if (typeof dates !== 'string' && typeof dates !== 'number' && !isNullOrUndefined(this.values) && this.values.length > 0) {\n var copyValues = this.copyValues(this.values);\n if (typeof dates === 'object' && ((dates).length > 0)) {\n var tempDates = dates;\n for (var index = 0; index < tempDates.length; index++) {\n for (var i = 0; i < copyValues.length; i++) {\n if (+copyValues[i] === +tempDates[index]) {\n copyValues.splice(i, 1);\n }\n }\n }\n }\n else {\n for (var i = 0; i < copyValues.length; i++) {\n if (+copyValues[i] === +dates) {\n copyValues.splice(i, 1);\n }\n }\n }\n this.setProperties({ values: copyValues }, false);\n this.update();\n if (this.isMultiSelection) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n }\n };\n /**\n * To set custom today date in calendar\n * @private\n */\n Calendar.prototype.setTodayDate = function (date) {\n var todayDate = new Date(+date);\n this.setProperties({ value: todayDate }, true);\n _super.prototype.todayButtonClick.call(this, null, todayDate, true);\n };\n Calendar.prototype.update = function () {\n this.validateDate();\n this.minMaxUpdate();\n _super.prototype.setValueUpdate.call(this);\n };\n Calendar.prototype.selectDate = function (e, date, element) {\n _super.prototype.selectDate.call(this, e, date, element, this.isMultiSelection, this.values);\n if (this.isMultiSelection && !isNullOrUndefined(this.values) && this.values.length > 0) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler(e);\n };\n Calendar.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDate && +this.previousDate.valueOf())\n || this.isMultiSelection) {\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', this.changedArgs);\n }\n this.previousDate = new Date(+this.value);\n }\n };\n Calendar.prototype.triggerChange = function (e) {\n if (!isNullOrUndefined(this.todayButtonEvent) && this.isTodayClicked) {\n e = this.todayButtonEvent;\n this.isTodayClicked = false;\n }\n this.changedArgs.event = e || null;\n this.changedArgs.isInteracted = !isNullOrUndefined(e);\n if (!isNullOrUndefined(this.value)) {\n this.setProperties({ value: this.value }, true);\n }\n if (!this.isMultiSelection && +this.value !== Number.NaN && (+this.value !== +this.previousDate || this.previousDate == null\n && !isNaN(+this.value))) {\n this.changeEvent(e);\n }\n else if (!isNullOrUndefined(this.values) && this.previousValues !== this.values.length) {\n this.changeEvent(e);\n this.previousValues = this.values.length;\n }\n };\n __decorate([\n Property(null)\n ], Calendar.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Calendar.prototype, \"values\", void 0);\n __decorate([\n Property(false)\n ], Calendar.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"change\", void 0);\n Calendar = __decorate([\n NotifyPropertyChanges\n ], Calendar);\n return Calendar;\n}(CalendarBase));\nexport { Calendar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { updateBlazorTemplate, resetBlazorTemplate, isBlazor, remove, select, selectAll } from '@syncfusion/ej2-base';\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\nexport var dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: 'e-list-item',\n group: 'e-list-group-item',\n disabled: 'e-disabled',\n grouping: 'e-dd-group'\n};\nvar ITEMTEMPLATE_PROPERTY = 'ItemTemplate';\nvar VALUETEMPLATE_PROPERTY = 'ValueTemplate';\nvar GROUPTEMPLATE_PROPERTY = 'GroupTemplate';\nvar HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';\nvar FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';\nvar NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';\nvar ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n */\n function DropDownBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isPreventChange = false;\n return _this;\n }\n ;\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var propName = function (prop) {\n return prop;\n };\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n ;\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === value.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.templateCompiler = function (baseTemplate) {\n var checkTemplate = false;\n if (baseTemplate) {\n var exception = void 0;\n try {\n checkTemplate = (selectAll(baseTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;\n if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {\n this.DropDownBaseresetBlazorTemplates(false, false, true, true);\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n ele.innerHTML = '';\n var tempaltecheck = this.templateCompiler(template);\n if (tempaltecheck) {\n compiledString = compile(select(template, document).innerHTML.trim());\n }\n else {\n compiledString = compile(template);\n }\n var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n // tslint:disable-next-line\n var noDataCompTemp = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);\n if (noDataCompTemp && noDataCompTemp.length > 0) {\n for (var i = 0; i < noDataCompTemp.length; i++) {\n ele.appendChild(noDataCompTemp[i]);\n }\n }\n this.DropDownBaseupdateBlazorTemplates(false, false, !actionFailure, actionFailure, false, false, false, false);\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };\n var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);\n if (componentLocale.getConstant('actionFailureTemplate') !== '') {\n this.l10n = componentLocale;\n }\n else {\n this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n }\n else {\n ele.innerHTML = content;\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n ;\n DropDownBase.prototype.getTextByValue = function (value) {\n var text;\n text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (isBlazor() && isNullOrUndefined(value) || value === 'null') {\n return null;\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseFloat(value);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return (value === 'true');\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n this.enableRtl ? addClass(this.enableRtlElements, dropDownBaseClasses.rtl) :\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n };\n ;\n /**\n * Initialize the Component.\n */\n DropDownBase.prototype.initialize = function () {\n this.bindEvent = true;\n this.actionFailureTemplateId = \"\" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n ;\n DropDownBase.prototype.DropDownBaseupdateBlazorTemplates = function (item, group, noRecord, action, value, header, footer, isEmpty) {\n if (!this.isStringTemplate) {\n if (this.itemTemplate && item) {\n updateBlazorTemplate(this.itemTemplateId, ITEMTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.groupTemplate && group) {\n updateBlazorTemplate(this.groupTemplateId, GROUPTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.noRecordsTemplate && noRecord) {\n updateBlazorTemplate(this.noRecordsTemplateId, NORECORDSTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.actionFailureTemplate && action) {\n updateBlazorTemplate(this.actionFailureTemplateId, ACTIONFAILURETEMPLATE_PROPERTY, this, isEmpty);\n }\n if (value) {\n updateBlazorTemplate(this.valueTemplateId, VALUETEMPLATE_PROPERTY, this, isEmpty);\n }\n if (header) {\n updateBlazorTemplate(this.headerTemplateId, HEADERTEMPLATE_PROPERTY, this);\n }\n if (footer) {\n updateBlazorTemplate(this.footerTemplateId, FOOTERTEMPLATE_PROPERTY, this);\n }\n }\n };\n DropDownBase.prototype.DropDownBaseresetBlazorTemplates = function (item, group, noRecord, action, value, header, footer) {\n if (!this.isStringTemplate) {\n if (this.itemTemplate && item) {\n resetBlazorTemplate(this.itemTemplateId, ITEMTEMPLATE_PROPERTY);\n }\n if (this.groupTemplate && group) {\n resetBlazorTemplate(this.groupTemplateId, GROUPTEMPLATE_PROPERTY);\n }\n if (this.noRecordsTemplate && noRecord) {\n resetBlazorTemplate(this.noRecordsTemplateId, NORECORDSTEMPLATE_PROPERTY);\n }\n if (this.actionFailureTemplate && action) {\n resetBlazorTemplate(this.actionFailureTemplateId, ACTIONFAILURETEMPLATE_PROPERTY);\n }\n if (value) {\n resetBlazorTemplate(this.valueTemplateId, VALUETEMPLATE_PROPERTY);\n }\n if (header) {\n resetBlazorTemplate(this.headerTemplateId, HEADERTEMPLATE_PROPERTY);\n }\n if (footer) {\n resetBlazorTemplate(this.footerTemplateId, FOOTERTEMPLATE_PROPERTY);\n }\n }\n };\n /**\n * Get the properties to be maintained in persisted state.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.updateDataAttribute = function (value) {\n var invalidAttr = ['class', 'style', 'id', 'type'];\n var attr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(this.getModuleName() === 'dropdownlist' && this.element.attributes[a].name === 'readonly')) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(attr, value, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n };\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n var items = element.querySelectorAll('select>option');\n }\n this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss);\n this.resetList(jsonElement, fields);\n };\n DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss) {\n var field = {\n 'fields': {\n text: text,\n value: value,\n groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,\n htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,\n iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss\n }\n };\n this.setProperties(field, true);\n };\n DropDownBase.prototype.getJSONfromOption = function (items, options, fields) {\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var option = options_1[_i];\n var json = {};\n json[fields.text] = option.innerText;\n json[fields.value] = !isNullOrUndefined(option.getAttribute(fields.value)) ?\n option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n * @private\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n this.isDataFetched = false;\n this.itemTemplateId = \"\" + this.element.id + ITEMTEMPLATE_PROPERTY;\n this.valueTemplateId = \"\" + this.element.id + VALUETEMPLATE_PROPERTY;\n this.groupTemplateId = \"\" + this.element.id + GROUPTEMPLATE_PROPERTY;\n this.headerTemplateId = \"\" + this.element.id + HEADERTEMPLATE_PROPERTY;\n this.footerTemplateId = \"\" + this.element.id + FOOTERTEMPLATE_PROPERTY;\n this.noRecordsTemplateId = \"\" + this.element.id + NORECORDSTEMPLATE_PROPERTY;\n };\n /**\n * Creates the list items of DropDownBase component.\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;\n this.trigger('actionBegin', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.showSpinner();\n if (dataSource instanceof DataManager) {\n _this.isRequested = true;\n if (_this.isDataFetched) {\n _this.emptyDataRequest(fields);\n return;\n }\n eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', e, function (e) {\n if (!e.cancel) {\n var listItems = e.result;\n if (listItems.length === 0) {\n _this.isDataFetched = true;\n }\n ulElement = _this.renderItems(listItems, fields);\n _this.onActionComplete(ulElement, listItems, e);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\n }\n });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n var dataManager = new DataManager(eventArgs.data);\n var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);\n var localDataArgs = { cancel: false, result: listItems };\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {\n if (!localDataArgs.cancel) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n _this.onActionComplete(ulElement, localDataArgs.result);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.bindChildItems(localDataArgs.result, ulElement, fields);\n }\n });\n }\n }\n });\n };\n DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {\n var _this = this;\n if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {\n setTimeout(function () {\n var childNode = _this.remainingItems(_this.sortedData, fields);\n append(childNode, ulElement);\n _this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.updateListValues();\n _this.raiseDataBound(listItems, e);\n }, 0);\n }\n else {\n this.raiseDataBound(listItems, e);\n }\n };\n DropDownBase.prototype.updateListValues = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {\n var liElement = null;\n if (list) {\n var listArr = [].slice.call(list.querySelectorAll(findNode));\n for (var index = 0; index < listArr.length; index++) {\n if (listArr[index].getAttribute(attribute) === (value + '')) {\n liElement = listArr[index];\n break;\n }\n }\n }\n return liElement;\n };\n DropDownBase.prototype.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n var dataBoundEventArgs = {\n items: listItems,\n e: e\n };\n this.trigger('dataBound', dataBoundEventArgs);\n };\n DropDownBase.prototype.remainingItems = function (dataSource, fields) {\n var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));\n if (this.itemTemplate) {\n var listElements = this.templateListItem(spliceData, fields);\n return [].slice.call(listElements.childNodes);\n }\n var type = this.typeOfData(spliceData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n this.listData = list;\n if (isBlazor() && this.isServerRendered && this.getModuleName() === 'listbox') {\n remove(this.list.querySelector('.e-list-parent'));\n remove(this.list.querySelector('.e-hidden-select'));\n }\n else {\n // tslint:disable-next-line \n if (this.isReact) {\n this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);\n }\n this.list.innerHTML = '';\n }\n this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n };\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n focusItem.classList.add(dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var groupcheck = this.templateCompiler(this.groupTemplate);\n if (groupcheck) {\n var groupValue = select(this.groupTemplate, document).innerHTML.trim();\n var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);\n }\n else {\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);\n }\n this.DropDownBaseupdateBlazorTemplates(false, true, false, false, false, false, false, false);\n }\n };\n /**\n * To create the ul li list items\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n this.sortedData = dataSource;\n return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);\n };\n ;\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldValues = !isNullOrUndefined(fields.properties) ?\n fields.properties : fields;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fieldValues,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n ;\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = e.target;\n var liHeight = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.list.querySelectorAll('li');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.top = e.target.scrollTop + 'px';\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n }\n }\n };\n /**\n * To render the list items\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n this.sortedData = dataSource;\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);\n var isTempEmpty = (this.getModuleName() === 'listbox') ? true : false;\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false, false, false, false, isTempEmpty);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n ;\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n var option = this.listOption(dataSource, fields);\n option.templateID = this.itemTemplateId;\n option.isStringTemplate = this.isStringTemplate;\n var itemcheck = this.templateCompiler(this.itemTemplate);\n if (itemcheck) {\n var itemValue = select(this.itemTemplate, document).innerHTML.trim();\n return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);\n }\n else {\n return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);\n }\n };\n ;\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; (!isNullOrUndefined(items) && i < items.length); i++) {\n if (!isNullOrUndefined(items[i])) {\n var listDataType = typeof (items[i]) === 'string' ||\n typeof (items[i]) === 'number' || typeof (items[i]) === 'boolean';\n var isNullData = listDataType ? isNullOrUndefined(items[i]) :\n isNullOrUndefined(getValue((this.fields.value ? this.fields.value : 'value'), items[i]));\n if (!isNullData) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var borderWidth = 0;\n if (this.list && this.list.parentElement) {\n borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);\n }\n var liWidth = this.liCollections[0].offsetWidth - borderWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n if (this.typeOfData(dataSource).typeof === 'string' || this.typeOfData(dataSource).typeof === 'number'\n || this.typeOfData(dataSource).typeof === 'boolean') {\n textField = '';\n }\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n ;\n /**\n * To dispatch the event manually\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n */\n DropDownBase.prototype.setFields = function () {\n if (this.fields.value && !this.fields.text) {\n this.updateFields(this.fields.value, this.fields.value);\n }\n else if (!this.fields.value && this.fields.text) {\n this.updateFields(this.fields.text, this.fields.text);\n }\n else if (!this.fields.value && !this.fields.text) {\n this.updateFields('text', 'text');\n }\n };\n /**\n * reset the items list.\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query) {\n if (this.list) {\n if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)\n || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {\n var data = dataSource instanceof Array ? (dataSource.length > 0)\n : !isNullOrUndefined(dataSource);\n if (!data && this.selectData && this.selectData.length > 0) {\n dataSource = this.selectData;\n }\n }\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelectElementData = function (isFiltering) {\n if (isFiltering && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {\n this.selectData = this.listData;\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n DropDownBase.prototype.updateDataSource = function (props) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n this.isDataFetched = false;\n var updateData = {};\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]] && props[j] === 'fields') {\n this.setFields();\n updateData[props[j]] = newProp[props[j]];\n }\n else if (newProp[props[j]]) {\n updateData[props[j]] = newProp[props[j]];\n }\n }\n if (Object.keys(updateData).length > 0) {\n if (Object.keys(updateData).indexOf('dataSource') === -1) {\n updateData.dataSource = this.dataSource;\n }\n this.updateDataSource(updateData);\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n * @private\n */\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownbase') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n this.setUpdateInitial(['sortOrder', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n ;\n /**\n * Build and render the component\n * @private\n */\n DropDownBase.prototype.render = function (isEmptyData) {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n ;\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @return {void}.\n\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {\n this.renderList();\n }\n if (this.sortOrder !== 'None' && isNullOrUndefined(itemIndex)) {\n var newList = [].slice.call(this.listData);\n newList.push(items);\n newList = this.getSortedDataSource(newList);\n if (this.fields.groupBy) {\n newList = ListBase.groupDataSource(newList, this.fields.properties, this.sortOrder);\n itemIndex = newList.indexOf(items);\n }\n else {\n itemIndex = newList.indexOf(items);\n }\n }\n this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n if (items && fields.groupBy) {\n items = ListBase.groupDataSource(items, fields.properties);\n }\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var isHeader = item.isHeader;\n var li = this.createElement('li', { className: isHeader ? dropDownBaseClasses.group : dropDownBaseClasses.li, id: 'option-add-' + i });\n var itemText = item instanceof Object ? getValue(fields.text, item) : item;\n if (isHeader) {\n li.innerText = itemText;\n }\n if (this.itemTemplate && !isHeader) {\n var compiledString = compile(this.itemTemplate);\n // tslint:disable-next-line\n var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);\n if (addItemTemplate) {\n append(addItemTemplate, li);\n }\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(itemText));\n }\n li.setAttribute('data-value', item instanceof Object ? getValue(fields.value, item) : item);\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n this.listData.push(item);\n if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {\n index = null;\n }\n this.updateActionCompleteData(li, item, index);\n //Listbox event\n this.trigger('beforeItemRender', { element: li, item: item });\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.classList.remove(dropDownBaseClasses.noData);\n this.list.appendChild(this.ulElement);\n this.liCollections = liCollections;\n append(liCollections, this.ulElement);\n this.updateAddItemList(this.list, itemsCount);\n }\n else {\n if (this.getModuleName() === 'listbox' && itemsCount === 0) {\n this.ulElement.innerHTML = '';\n }\n var attr = [];\n for (var i = 0; i < items.length; i++) {\n var listGroupItem = this.ulElement.querySelectorAll('.e-list-group-item');\n for (var j = 0; j < listGroupItem.length; j++) {\n attr[j] = listGroupItem[j].innerText;\n }\n if (attr.indexOf(liCollections[i].innerText) > -1 && fields.groupBy) {\n for (var j = 0; j < listGroupItem.length; j++) {\n if (attr[j] === liCollections[i].innerText) {\n if (this.sortOrder === 'None') {\n this.ulElement.insertBefore(liCollections[i + 1], listGroupItem[j + 1]);\n }\n else {\n this.ulElement.insertBefore(liCollections[i + 1], this.ulElement.childNodes[itemIndex]);\n }\n i = i + 1;\n break;\n }\n }\n }\n else {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n if (this.getModuleName() === 'multiselect') {\n this.updateDataList();\n }\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n DropDownBase.prototype.updateActionCompleteData = function (li, item, index) {\n // this is for ComboBox custom value\n };\n DropDownBase.prototype.updateAddItemList = function (list, itemCount) {\n // this is for multiselect add item\n };\n DropDownBase.prototype.updateDataList = function () {\n // this is for multiselect update list items\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n * @blazorType object\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], DropDownBase.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], DropDownBase.prototype, \"locale\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\nexport { DropDownBase };\n","/**\n * IncrementalSearch module file\n */\nvar queryString = '';\nvar prevString = '';\nvar matches = [];\nvar activeClass = 'e-active';\nvar prevElementId = '';\n/**\n * Search and focus the list item based on key code matches with list text content\n * @param { number } keyCode - Specifies the key code which pressed on keyboard events.\n * @param { HTMLElement[]] } items - Specifies an array of HTMLElement, from which matches find has done.\n * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen\n * after selected item otherwise it will do from initial.\n * @param { boolean } ignoreCase - Specifies the case consideration when search has done.\n */\nexport function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, isBlazor) {\n queryString += String.fromCharCode(keyCode);\n setTimeout(function () { queryString = ''; }, 1000);\n var index;\n queryString = ignoreCase ? queryString.toLowerCase() : queryString;\n if (prevElementId === elementId && prevString === queryString) {\n for (var i = 0; i < matches.length; i++) {\n if (matches[i].classList.contains(activeClass)) {\n index = i;\n break;\n }\n }\n index = index + 1;\n return matches[index];\n }\n else {\n var listItems = items;\n var strLength = queryString.length;\n var text = void 0;\n var item = void 0;\n selectedIndex = selectedIndex ? selectedIndex + 1 : 0;\n var i = selectedIndex;\n matches = [];\n do {\n if (i === listItems.length) {\n i = -1;\n }\n i === -1 ? index = 0 : index = i;\n item = listItems[index];\n if (isBlazor) {\n text = ignoreCase ? item.textContent.trim().toLowerCase() : item.textContent.trim();\n }\n else {\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n }\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n prevElementId = elementId;\n return matches[0];\n }\n}\nexport function Search(inputVal, items, searchType, ignoreCase) {\n var listItems = items;\n ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;\n var itemData = { item: null, index: null };\n if (inputVal && inputVal.length) {\n var strLength = inputVal.length;\n var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;\n for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {\n var item = itemsData[i];\n var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\\s+|\\s+$/g, '');\n if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {\n itemData.item = item;\n itemData.index = i;\n return { item: item, index: i };\n }\n }\n return itemData;\n }\n return itemData;\n}\n","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { merge, isNullOrUndefined, extend, Property } from '@syncfusion/ej2-base';\nimport { isBlazor } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData, getObject } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options, parent) {\n var _this = this;\n /**\n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n * @default true\n */\n this.disableHtmlEncode = true;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](../../grid/filtering/#custom-component-in-filter-menu) for its customization.\n * @default {}\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n * @default {}\n */\n this.edit = {};\n /**\n * If `allowSearching` set to false, then it disables Searching of a particular column.\n * By default all columns allow Searching.\n * @default true\n */\n this.allowSearching = true;\n /**\n * If `autoFit` set to true, then the particular column content width will be\n * adjusted based on its content in the initial rendering itself.\n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n * @default false\n */\n this.autoFit = false;\n this.sortDirection = 'Descending';\n /** @hidden */\n this.getEditTemplate = function () { return _this.editTemplateFn; };\n /** @hidden */\n this.getFilterTemplate = function () { return _this.filterTemplateFn; };\n merge(this, options);\n this.parent = parent;\n if (this.type === 'none') {\n this.type = (isBlazor() && !isNullOrUndefined(this.template) && isNullOrUndefined(this.field)) ? 'none' : null;\n }\n else if (this.type) {\n this.type = typeof (this.type) === 'string' ? this.type.toLowerCase() : undefined;\n }\n if (this.editType) {\n this.editType = this.editType.toLowerCase();\n }\n if (isNullOrUndefined(this.uid)) {\n this.uid = getUid('grid-column');\n }\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || options.format.format)) {\n this.setFormatter(valueFormatter.getFormatFunction(extend({}, options.format)));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n this.toJSON = function () {\n var col = {};\n var skip = ['filter', 'dataSource', isBlazor() ? ' ' : 'headerText', 'template', 'headerTemplate', 'edit',\n 'editTemplate', 'filterTemplate', 'commandsTemplate', 'parent'];\n var keys = Object.keys(_this);\n for (var i = 0; i < keys.length; i++) {\n if (keys[i] === 'columns') {\n col[keys[i]] = [];\n for (var j = 0; j < _this[keys[i]].length; j++) {\n col[keys[i]].push(_this[keys[i]][j].toJSON());\n }\n }\n else if (skip.indexOf(keys[i]) < 0) {\n col[keys[i]] = _this[keys[i]];\n }\n }\n return col;\n };\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n if (this.columns) {\n this.allowResizing = this.columns.some(function (col) {\n return col.allowResizing;\n });\n }\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (!isNullOrUndefined(this.filter) && this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.editTemplate) {\n this.editTemplateFn = templateCompiler(this.editTemplate);\n }\n if (this.filterTemplate) {\n this.filterTemplateFn = templateCompiler(this.filterTemplate);\n }\n if (this.isForeignColumn() &&\n (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit' || this.editType === 'defaultedit')) {\n this.editType = 'dropdownedit';\n this.edit.params = extend({\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n }, this.edit.params);\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function comparer(x, y, xObj, yObj) {\n if (typeof a_1 === 'string') {\n a_1 = getObject(a_1, window);\n }\n if (this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n var obj = xObj;\n xObj = yObj;\n yObj = obj;\n }\n return a_1(x, y, xObj, yObj);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getObject(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getObject(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /** @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /** @hidden */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /** @hidden */\n Column.prototype.getFreezeTableName = function () {\n return this.freezeTable;\n };\n /** @hidden */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[i]] = column[keys[i]];\n //Refresh the react columnTemplates on state change\n if (this.parent && this.parent.isReact && keys[i] === 'template') {\n this.parent.refreshReactColumnTemplateByUid(this.uid);\n }\n }\n };\n /**\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /** @hidden */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /** @hidden */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /** @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /** @hidden */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /** @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /** @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /** @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /** @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n/**\n * Define options for custom command buttons.\n */\nvar CommandColumnModel = /** @class */ (function () {\n function CommandColumnModel() {\n }\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"title\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"buttonOption\", void 0);\n return CommandColumnModel;\n}());\nexport { CommandColumnModel };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Row } from '../models/row';\nimport { Column } from '../models/column';\nimport { isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport { calculateAggregate, getUid } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\n/**\n * Summary row model generator\n * @hidden\n */\nvar SummaryModelGenerator = /** @class */ (function () {\n /**\n * Constructor for Summary row model generator\n */\n function SummaryModelGenerator(parent) {\n this.parent = parent;\n }\n SummaryModelGenerator.prototype.getData = function () {\n var _this = this;\n var rows = [];\n var row = this.parent.aggregates.slice();\n for (var i = 0; i < row.length; i++) {\n var columns = row[i].columns.filter(function (column) {\n return !(column.footerTemplate || column.groupFooterTemplate || column.groupCaptionTemplate)\n || _this.columnSelector(column);\n });\n if (columns.length) {\n rows.push({ columns: columns });\n }\n }\n return rows;\n };\n SummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.footerTemplate !== undefined;\n };\n SummaryModelGenerator.prototype.getColumns = function (start, end) {\n var columns = [];\n if (this.parent.allowGrouping) {\n for (var i = 0; i < this.parent.groupSettings.columns.length; i++) {\n columns.push(new Column({}));\n }\n }\n if (this.parent.detailTemplate || !isNullOrUndefined(this.parent.childGrid) || (this.parent.isRowDragable() && !start)) {\n columns.push(new Column({}));\n }\n columns.push.apply(columns, this.parent.getColumns());\n end = end ? end + this.parent.getIndentCount() : end;\n return isNullOrUndefined(start) ? columns : columns.slice(start, end);\n };\n SummaryModelGenerator.prototype.generateRows = function (input, args, start, end, columns) {\n if (input.length === 0) {\n if (args === undefined || !args.count) {\n return [];\n }\n }\n var data = this.buildSummaryData(input, args);\n var rows = [];\n var row = this.getData();\n for (var i = 0; i < row.length; i++) {\n rows.push(this.getGeneratedRow(row[i], data[i], args ? args.level : undefined, start, end, args ? args.parentUid : undefined, columns));\n }\n return rows;\n };\n SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw, start, end, parentUid, columns) {\n var tmp = [];\n var indents = this.getIndentByLevel(raw);\n var isDetailGridAlone = !isNullOrUndefined(this.parent.childGrid);\n var indentLength = this.parent.getIndentCount();\n if (this.parent.isRowDragable()) {\n indents = ['e-indentcelltop'];\n }\n var values = columns ? columns : this.getColumns(start, end);\n for (var i = 0; i < values.length; i++) {\n tmp.push(this.getGeneratedCell(values[i], summaryRow, i >= indentLength ? this.getCellType() :\n i < this.parent.groupSettings.columns.length ? CellType.Indent : CellType.DetailFooterIntent, indents[i], isDetailGridAlone));\n }\n var row = new Row({ data: data, attributes: { class: 'e-summaryrow' } });\n row.cells = tmp;\n if (isBlazor() && this.parent.isServerRendered && !isNullOrUndefined(parentUid)) {\n row.uid = this.parent.getRowUid('grid-row');\n }\n else {\n row.uid = getUid('grid-row');\n }\n row.parentUid = parentUid;\n row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });\n return row;\n };\n SummaryModelGenerator.prototype.getGeneratedCell = function (column, summaryRow, cellType, indent, isDetailGridAlone) {\n //Get the summary column by display\n var sColumn = summaryRow.columns.filter(function (scolumn) { return scolumn.columnName === column.field; })[0];\n var attrs = {\n 'style': { 'textAlign': column.textAlign },\n 'e-mappinguid': column.uid, index: column.index\n };\n if (indent) {\n attrs.class = indent;\n }\n if (isNullOrUndefined(indent) && isDetailGridAlone) {\n attrs.class = 'e-detailindentcelltop';\n }\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(sColumn),\n 'isTemplate': sColumn && !isNullOrUndefined(sColumn.footerTemplate\n || sColumn.groupFooterTemplate || sColumn.groupCaptionTemplate),\n 'column': sColumn || {},\n 'attributes': attrs,\n 'cellType': cellType\n };\n opt.column.headerText = column.headerText;\n return new Cell(opt);\n };\n SummaryModelGenerator.prototype.buildSummaryData = function (data, args) {\n var dummy = [];\n var summaryRows = this.getData();\n var single = {};\n var key = '';\n for (var i = 0; i < summaryRows.length; i++) {\n single = {};\n var column = summaryRows[i].columns;\n for (var j = 0; j < column.length; j++) {\n single = this.setTemplate(column[j], (args && args.aggregates) ? args : data, single);\n }\n dummy.push(single);\n }\n return dummy;\n };\n SummaryModelGenerator.prototype.getIndentByLevel = function (data) {\n return this.parent.groupSettings.columns.map(function () { return 'e-indentcelltop'; });\n };\n SummaryModelGenerator.prototype.setTemplate = function (column, data, single) {\n var types = column.type;\n var helper = {};\n var formatFn = column.getFormatter() || (function () { return function (a) { return a; }; })();\n var group = data;\n if (!(types instanceof Array)) {\n types = [column.type];\n }\n for (var i = 0; i < types.length; i++) {\n var key = column.field + ' - ' + types[i].toLowerCase();\n var disp = column.columnName;\n var val = types[i] !== 'Custom' && group.aggregates && key in group.aggregates ? group.aggregates[key] :\n calculateAggregate(types[i], group.aggregates ? group : data, column, this.parent);\n single[disp] = single[disp] || {};\n single[disp][key] = val;\n single[disp][types[i]] = !isNullOrUndefined(val) ? formatFn(val) : ' ';\n if (group.field) {\n single[disp].field = group.field;\n single[disp].key = group.key;\n }\n }\n helper.format = column.getFormatter();\n column.setTemplate(helper);\n return single;\n };\n SummaryModelGenerator.prototype.getCellType = function () {\n return CellType.Summary;\n };\n return SummaryModelGenerator;\n}());\nexport { SummaryModelGenerator };\nvar GroupSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(GroupSummaryModelGenerator, _super);\n function GroupSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n GroupSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupFooterTemplate !== undefined;\n };\n GroupSummaryModelGenerator.prototype.getIndentByLevel = function (level) {\n if (level === void 0) { level = this.parent.groupSettings.columns.length; }\n return this.parent.groupSettings.columns.map(function (v, indx) { return indx <= level - 1 ? '' : 'e-indentcelltop'; });\n };\n GroupSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.GroupSummary;\n };\n return GroupSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { GroupSummaryModelGenerator };\nvar CaptionSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(CaptionSummaryModelGenerator, _super);\n function CaptionSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CaptionSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupCaptionTemplate !== undefined;\n };\n CaptionSummaryModelGenerator.prototype.getData = function () {\n var initVal = { columns: [] };\n return [_super.prototype.getData.call(this).reduce(function (prev, cur) {\n prev.columns = prev.columns.concat(cur.columns);\n return prev;\n }, initVal)];\n };\n CaptionSummaryModelGenerator.prototype.isEmpty = function () {\n return (this.getData()[0].columns || []).length === 0;\n };\n CaptionSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.CaptionSummary;\n };\n return CaptionSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { CaptionSummaryModelGenerator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\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 Vue from 'vue';\nimport { EJComponentDecorator } from '@syncfusion/ej2-vue-base';\nvar ButtonsDirective = /** @class */ (function (_super) {\n __extends(ButtonsDirective, _super);\n function ButtonsDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ButtonsDirective.prototype.render = function () {\n return;\n };\n ButtonsDirective = __decorate([\n EJComponentDecorator({})\n ], ButtonsDirective);\n return ButtonsDirective;\n}(Vue));\nexport { ButtonsDirective };\nexport var ButtonsPlugin = {\n name: 'e-buttons',\n install: function (Vue) {\n Vue.component(ButtonsPlugin.name, ButtonsDirective);\n }\n};\n/**\n * 'e-button' directive represent a button of Vue Dialog\n * It must be contained in a Dialog component(`ejs-dialog`).\n * ```html\n *
\n * \n * \n * \n * \n * \n * ```\n */\nvar DialogButtonDirective = /** @class */ (function (_super) {\n __extends(DialogButtonDirective, _super);\n function DialogButtonDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DialogButtonDirective.prototype.render = function () {\n return;\n };\n DialogButtonDirective = __decorate([\n EJComponentDecorator({})\n ], DialogButtonDirective);\n return DialogButtonDirective;\n}(Vue));\nexport { DialogButtonDirective };\nexport var DialogButtonPlugin = {\n name: 'e-dialogbutton',\n install: function (Vue) {\n Vue.component(DialogButtonPlugin.name, DialogButtonDirective);\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 { isUndefined } from '@syncfusion/ej2-base';\nimport { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { ButtonsDirective, DialogButtonDirective, ButtonsPlugin, DialogButtonPlugin } from './buttons.directive';\nexport var properties = ['allowDragging', 'animationSettings', 'buttons', 'closeOnEscape', 'content', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableResize', 'enableRtl', 'footerTemplate', 'header', 'height', 'isModal', 'locale', 'minHeight', 'position', 'resizeHandles', 'showCloseIcon', 'target', 'visible', 'width', 'zIndex', 'beforeClose', 'beforeOpen', 'beforeSanitizeHtml', 'close', 'created', 'destroyed', 'drag', 'dragStart', 'dragStop', 'open', 'overlayClick', 'resizeStart', 'resizeStop', 'resizing'];\nexport var modelProps = ['visible'];\n/**\n * Represents the VueJS Dialog component\n * ```html\n *
\n * ```\n */\nvar DialogComponent = /** @class */ (function (_super) {\n __extends(DialogComponent, _super);\n function DialogComponent() {\n var _this = _super.call(this) || this;\n _this.propKeys = properties;\n _this.models = modelProps;\n _this.hasChildDirective = true;\n _this.hasInjectedModules = false;\n _this.tagMapper = { \"e-buttons\": \"e-dialogbutton\" };\n _this.tagNameMapper = {};\n _this.ej2Instances = new Dialog({});\n _this.ej2Instances._trigger = _this.ej2Instances.trigger;\n _this.ej2Instances.trigger = _this.trigger;\n _this.bindProperties();\n _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;\n _this.ej2Instances.setProperties = _this.setProperties;\n return _this;\n }\n DialogComponent.prototype.setProperties = function (prop, muteOnChange) {\n var _this = this;\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 _this.$emit('update:' + key, prop[key]);\n }\n });\n });\n }\n };\n DialogComponent.prototype.trigger = function (eventName, eventProp, successHandler) {\n if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/checked|value/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/currentView|selectedDate/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n if (this.ej2Instances && this.ej2Instances._trigger) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n };\n DialogComponent.prototype.render = function (createElement) {\n return createElement('div', this.$slots.default);\n };\n DialogComponent.prototype.getButtons = function (index) {\n return this.ej2Instances.getButtons(index);\n };\n DialogComponent.prototype.hide = function (event) {\n return this.ej2Instances.hide(event);\n };\n DialogComponent.prototype.refreshPosition = function () {\n return this.ej2Instances.refreshPosition();\n };\n DialogComponent.prototype.show = function (isFullScreen) {\n return this.ej2Instances.show(isFullScreen);\n };\n DialogComponent = __decorate([\n EJComponentDecorator({\n props: properties,\n model: {\n event: 'modelchanged'\n }\n })\n ], DialogComponent);\n return DialogComponent;\n}(ComponentBase));\nexport { DialogComponent };\nexport var DialogPlugin = {\n name: 'ejs-dialog',\n install: function (Vue) {\n Vue.component(DialogPlugin.name, DialogComponent);\n Vue.component(DialogButtonPlugin.name, DialogButtonDirective);\n Vue.component(ButtonsPlugin.name, ButtonsDirective);\n }\n};\n","/**\n * AriaService\n * @hidden\n */\nvar AriaService = /** @class */ (function () {\n function AriaService() {\n }\n AriaService.prototype.setOptions = function (target, options) {\n var props = Object.keys(options);\n for (var i = 0; i < props.length; i++) {\n setStateAndProperties(target, config[props[i]], options[props[i]]);\n }\n };\n AriaService.prototype.setExpand = function (target, expand) {\n setStateAndProperties(target, config.expand, expand);\n };\n AriaService.prototype.setSort = function (target, direction) {\n setStateAndProperties(target, config.sort, direction, typeof direction === 'boolean');\n };\n AriaService.prototype.setBusy = function (target, isBusy) {\n setStateAndProperties(target, config.busy, isBusy);\n setStateAndProperties(target, config.invalid, null, true);\n };\n AriaService.prototype.setGrabbed = function (target, isGrabbed, remove) {\n setStateAndProperties(target, config.grabbed, isGrabbed, remove);\n };\n AriaService.prototype.setDropTarget = function (target, isTarget) {\n setStateAndProperties(target, config.dropeffect, 'copy', !isTarget);\n };\n return AriaService;\n}());\nexport { AriaService };\n/**\n * @hidden\n */\nfunction setStateAndProperties(target, attribute, value, remove) {\n if (remove && target) {\n target.removeAttribute(attribute);\n return;\n }\n if (target) {\n target.setAttribute(attribute, value);\n }\n}\nvar config = {\n expand: 'aria-expanded',\n role: 'role',\n selected: 'aria-selected',\n multiselectable: 'aria-multiselectable',\n sort: 'aria-sort',\n busy: 'aria-busy',\n invalid: 'aria-invalid',\n grabbed: 'aria-grabbed',\n dropeffect: 'aria-dropeffect',\n haspopup: 'aria-haspopup',\n level: 'aria-level',\n colcount: 'aria-colcount',\n rowcount: 'aria-rowcount'\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { HScroll } from '../common/h-scroll';\nimport { VScroll } from '../common/v-scroll';\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_POPUPOPEN = 'e-popup-open';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_HSCROLLCNT = 'e-hscroll-content';\nvar CLS_VSCROLLCNT = 'e-vscroll-content';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_MULTIROW = 'e-toolbar-multirow';\nvar CLS_MULTIROWPOS = 'e-multirow-pos';\nvar CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';\nvar CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';\nvar CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';\nvar CLS_EXTENDABLECLASS = 'e-toolbar-extended';\nvar CLS_EXTENDPOPUP = 'e-expended-nav';\nvar CLS_EXTENDEDPOPOPEN = 'e-tbar-extended';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate([\n Property(true)\n ], Item.prototype, \"visible\", void 0);\n __decorate([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n __decorate([\n Event()\n ], Item.prototype, \"click\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n * @param options - Specifies Toolbar model properties as options.\n * @param element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.resizeContext = _this.resize.bind(_this);\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.tempId.forEach(function (ele) {\n if (!isNOU(_this.element.querySelector(ele))) {\n document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';\n }\n });\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n }\n this.clearProperty();\n this.popObj = null;\n this.tbarAlign = null;\n this.remove(this.element, 'e-toolpop');\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.split(' '));\n }\n this.element.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n };\n /**\n * Initialize the event handler\n * @private\n */\n Toolbar.prototype.preRender = function () {\n var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };\n this.trigger('beforeCreate', eventArgs);\n this.enableCollision = eventArgs.enableCollision;\n this.scrollStep = eventArgs.scrollStep;\n this.scrollModule = null;\n this.popObj = null;\n this.tempId = [];\n this.tbarItemsCol = this.items;\n this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;\n this.isExtendedOpen = false;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resizeContext);\n if (this.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n };\n Toolbar.prototype.wireKeyboardEvent = function () {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.element.setAttribute('tabIndex', '0');\n };\n Toolbar.prototype.unwireKeyboardEvent = function () {\n if (this.keyModule) {\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n this.keyModule.destroy();\n this.keyModule = null;\n }\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n var popCheck = !isNOU(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyScroll();\n this.unwireKeyboardEvent();\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n };\n Toolbar.prototype.destroyScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n if (this.element) {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {\n detach(el);\n });\n }\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n if (this.tbarAlign) {\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyScroll();\n }\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);\n var tempEle = this.element.querySelector('.e-toolbar-multirow');\n if (tempEle) {\n this.remove(tempEle, CLS_MULTIROW);\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n // tslint:disable-next-line:max-line-length\n clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'FadeOut', duration: 100 };\n switch (e.action) {\n case 'moveRight':\n if (this.isVertical) {\n return;\n }\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (this.isVertical) {\n return;\n }\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n var ele = void 0;\n var nodes = void 0;\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n if (!this.isVertical) {\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {\n return;\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n }\n else {\n if (e.action === 'moveUp') {\n this.eleFocus(clst, 'previous');\n }\n else {\n this.eleFocus(clst, 'next');\n }\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n this.element.removeAttribute('tabindex');\n }\n }\n break;\n case 'popupClose':\n if (popObj && this.overflowMode !== 'Extended') {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n e.preventDefault();\n var clst;\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n /**\n * Specifies the value to disable/enable the Toolbar component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).\n * @returns void.\n */\n Toolbar.prototype.disable = function (value) {\n var rootEle = this.element;\n value ? rootEle.classList.add(CLS_DISABLE) : rootEle.classList.remove(CLS_DISABLE);\n rootEle.setAttribute('tabindex', !value ? '0' : '-1');\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', !value ? '0' : '-1');\n }\n if (this.scrollModule) {\n this.scrollModule.disable(value);\n }\n if (this.popObj) {\n if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {\n this.popObj.hide();\n }\n rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');\n }\n };\n Toolbar.prototype.eleContains = function (el) {\n // tslint:disable-next-line:max-line-length\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);\n // tslint:enable-next-line:max-line-length\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n if (sib) {\n var skipEle = this.eleContains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var clsList = trgt.classList;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && !ele.children[0].classList.contains('e-vscroll')\n && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n var tempItem = this.items[this.tbarEle.indexOf(clst)];\n itemObj = tempItem;\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n if (itemObj && !isNOU(itemObj.click)) {\n this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);\n }\n if (!eventArgs.cancel) {\n this.trigger('clicked', eventArgs, function (clickedArgs) {\n if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&\n clickedArgs.item && clickedArgs.item.type !== 'Input') {\n _this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n });\n }\n };\n ;\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.getElementOffsetY() + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '0px';\n }\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Toolbar.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',\n 'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical',\n };\n attributes(this.element, ariaAttr);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Toolbar.prototype.renderControl = function () {\n var ele = this.element;\n this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderLayout();\n };\n Toolbar.prototype.renderLayout = function () {\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n this.separator();\n };\n Toolbar.prototype.itemsAlign = function (items, itemEleDom) {\n var innerItem;\n var innerPos;\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[i], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[i], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());\n if (innerPos) {\n if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {\n this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n var portals = 'portals';\n // tslint:disable-next-line:no-any\n this.notify('render-react-toolbar-template', this[portals]);\n this.renderReactTemplates();\n }\n };\n /** @hidden */\n Toolbar.prototype.changeOrientation = function () {\n var ele = this.element;\n if (this.isVertical) {\n ele.classList.remove(CLS_VERTICAL);\n this.isVertical = false;\n if (this.height === 'auto' || this.height === '100%') {\n ele.style.height = this.height;\n }\n ele.setAttribute('aria-orientation', 'horizontal');\n }\n else {\n ele.classList.add(CLS_VERTICAL);\n this.isVertical = true;\n ele.setAttribute('aria-orientation', 'vertical');\n setStyle(this.element, { 'height': formatUnit(this.height), 'width': formatUnit(this.width) });\n }\n this.destroyMode();\n this.refreshOverflow();\n };\n Toolbar.prototype.initScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n if (this.isVertical) {\n this.scrollModule = new VScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n else {\n this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyle(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var _this = this;\n var width = 0;\n var style;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n style = window.getComputedStyle(el);\n width += _this.isVertical ? el.offsetHeight : el.offsetWidth;\n width += parseFloat(_this.isVertical ? style.marginTop : style.marginRight);\n width += parseFloat(_this.isVertical ? style.marginBottom : style.marginLeft);\n }\n });\n return width;\n };\n Toolbar.prototype.getScrollCntEle = function (innerItem) {\n var trgClass = (this.isVertical) ? '.e-vscroll-content' : '.e-hscroll-content';\n return innerItem.querySelector(trgClass);\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = this.isVertical ? element.offsetHeight : element.offsetWidth;\n var itemWidth = this.isVertical ? innerItem.offsetHeight : innerItem.offsetWidth;\n if (this.tbarAlign || this.scrollModule || (eleWidth === itemWidth)) {\n itemWidth = this.itemWidthCal(this.scrollModule ? this.getScrollCntEle(innerItem) : innerItem);\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n var navEleWidth = 0;\n if (popNav) {\n navEleWidth = this.isVertical ? popNav.offsetHeight : popNav.offsetWidth;\n }\n else if (scrollNav) {\n navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);\n }\n if (itemWidth > eleWidth - navEleWidth) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Refresh the whole Toolbar component without re-rendering.\n * - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.\n * - It will refresh the Toolbar component after loading items dynamically.\n * @returns void.\n */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.toolbarAlign = function (innerItems) {\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n if (Browser.info.name === 'msie' && this.height === 'auto') {\n ele.style.height = '';\n }\n switch (this.overflowMode) {\n case 'Scrollable':\n if (isNOU(this.scrollModule)) {\n this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));\n }\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n break;\n case 'MultiRow':\n this.add(innerItems, CLS_MULTIROW);\n if (this.checkOverflow(ele, innerItems) && this.tbarAlign) {\n this.removePositioning();\n this.add(innerItems, CLS_MULTIROWPOS);\n }\n if (ele.style.overflow === 'hidden') {\n ele.style.overflow = '';\n }\n if (Browser.info.name === 'msie' || ele.style.height !== 'auto') {\n ele.style.height = 'auto';\n }\n break;\n case 'Extended':\n this.add(this.element, CLS_EXTEANDABLE_TOOLBAR);\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n }\n }\n };\n Toolbar.prototype.setOverflowAttributes = function (ele) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var eleInlineItem;\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;\n if (eleInlineItem !== null) {\n if (this.overflowMode === 'MultiRow') {\n eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleInlineItem.classList.remove(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n for (var i = 0; i <= eleItem.length - 1; i++) {\n if (eleItem[i].offsetLeft < 30 && eleItem[i].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[i].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[i].classList.add(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var vertical = this.isVertical;\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);\n var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {\n var element = tbarObj.element;\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[index]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n if (el.classList.contains(CLS_SEPARATOR)) {\n setStyle(el, { display: '', height: sepHeight + 'px' });\n }\n else {\n setStyle(el, { display: '', height: eleHeight + 'px' });\n }\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[i];\n if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var eleHeight;\n var eleItem;\n var sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');\n sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;\n }\n eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {\n ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);\n }\n else {\n var extendEle = this.createElement('div', {\n id: element.id + '_popup', className: CLS_POPUPCLASS + ' ' + CLS_EXTENDABLECLASS\n });\n var popupEle = this.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n ele = this.overflowMode === 'Extended' ? extendEle : popupEle;\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight, sepHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.getElementOffsetY = function () {\n return (this.overflowMode === 'Extended' && window.getComputedStyle(this.element).getPropertyValue('box-sizing') === 'border-box' ?\n this.element.clientHeight : this.element.offsetHeight);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n setStyle(this.element, { overflow: '' });\n var eleStyles = window.getComputedStyle(this.element);\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose.bind(this),\n collision: { Y: this.enableCollision ? 'flip' : 'none' },\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n popup.appendTo(ele);\n if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n if (this.isVertical) {\n popup.element.style.visibility = 'hidden';\n }\n if (this.isExtendedOpen) {\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);\n }\n else {\n popup.hide();\n }\n this.popObj = popup;\n this.element.setAttribute('aria-haspopup', 'true');\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.tbarPopupHandler = function (isOpen) {\n if (this.overflowMode === 'Extended') {\n isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n };\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n if (!this.isVertical) {\n popObj.offsetY = this.getElementOffsetY();\n popObj.dataBind();\n }\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '';\n }\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.tbarPopupHandler(true);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if (!this.isVertical && ((window.innerHeight + scrollVal) < popupElePos) && (this.element.offsetTop < popupEle.offsetHeight)) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[i];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n else if (this.isVertical) {\n var tbEleData = this.element.getBoundingClientRect();\n setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });\n }\n if (popObj) {\n popObj.refreshPosition();\n }\n };\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n this.tbarPopupHandler(false);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var eleOffset;\n var checkoffset;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = void 0;\n var compuStyle = window.getComputedStyle(inEle[i]);\n if (this.isVertical) {\n mrgn = parseFloat((compuStyle).marginTop);\n mrgn += parseFloat((compuStyle).marginBottom);\n }\n else {\n mrgn = parseFloat((compuStyle).marginRight);\n mrgn += parseFloat((compuStyle).marginLeft);\n }\n var fstEleCheck = inEle[i] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset = (inEle[i].offsetTop + inEle[i].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset = (inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[i].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n if (itemCount === itemPopCount) {\n var sepEle = inEle[i];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n itemPopCount++;\n }\n }\n itemCount++;\n }\n else if (this.overflowMode === 'Popup') {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n }\n else {\n itemCount++;\n }\n if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n className = this.overflowMode === 'Extended' ? className + ' ' + CLS_EXTENDPOPUP : className;\n var nav = this.createElement('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n nav.setAttribute('role', 'list');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n if (isNOU(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var dimension;\n if (isVer) {\n dimension = ele.offsetHeight - (popNav.offsetHeight + innerEle.offsetHeight);\n }\n else {\n dimension = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n }\n var popupEleWidth = 0;\n [].slice.call(popupEle.children).forEach(function (el) {\n popupEleWidth += _this.popupEleWidth(el);\n setStyle(el, { 'position': '' });\n });\n if ((dimension + (isVer ? popNav.offsetHeight : popNav.offsetWidth)) > (popupEleWidth) && this.popupPriCount === 0) {\n destroy = true;\n }\n this.popupEleRefresh(dimension, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n ele.setAttribute('aria-haspopup', 'false');\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(!this.isVertical ? el.style.minWidth : el.style.minHeight);\n btn.style.minWidth = '';\n btn.style.minHeight = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var checkOverflow;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n setStyle(el, { minWidth: '', height: '', minHeight: '' });\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[index].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n if (this_1.overflowMode !== 'Extended') {\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n }\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n var margin;\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n var trgClass = (this.isVertical) ? CLS_VSCROLLCNT : CLS_HSCROLLCNT;\n innerItem = [].slice.call(item.querySelector('.' + trgClass).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n if (this.isVertical) {\n margin = innerItem[0].offsetHeight + innerItem[2].offsetHeight;\n }\n else {\n margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n }\n var tbarWid = this.isVertical ? this.element.offsetHeight : this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth);\n var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';\n innerItem[2].removeAttribute('style');\n if (this.isVertical) {\n this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;\n }\n else {\n this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;\n }\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - (!this.isVertical ? innerItem[1].offsetWidth : innerItem[1].offsetHeight)) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';\n if (this.isVertical) {\n this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;\n }\n else {\n this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;\n }\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[i];\n keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n * @param {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns void.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n var ele;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[a];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[a] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);\n }\n else {\n if (typeof (elements) === 'number') {\n ele = this.getElementByIndex(elements);\n if (isNOU(ele)) {\n return;\n }\n }\n else {\n ele = items;\n }\n enable(isEnable, ele);\n }\n };\n Toolbar.prototype.getElementByIndex = function (index) {\n if (this.tbarEle[index]) {\n return this.tbarEle[index];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n * @param {ItemsModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns void.\n\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n this.extendedOpen();\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(itemsDiv)) {\n this.itemsRerender(items);\n return;\n }\n var innerEle;\n var itemAgn = 'Left';\n if (isNOU(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNOU(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNOU(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item, index);\n if (this.tbarEle.length >= index && innerItems.length >= 0) {\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.insertBefore(innerEle, ele.children[index]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else if (innerItems.length === 0) {\n innerItems = selectAll('.' + CLS_ITEMS, this.element);\n innerItems[0].appendChild(innerEle);\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);\n }\n this.items.splice(index, 0, item);\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns void.\n\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[index] && innerItems[index]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[index]);\n if (this.tbarAlign) {\n var indexAgn = void 0;\n indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);\n this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n detach(innerItems[index]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item, index) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n var e = void 0;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n innerEle.appendChild(ele);\n ele.style.display = '';\n if (!isNOU(tempStr)) {\n this.tempId.push(val);\n }\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n var toolbarTemplateID = this.element.id + index + '_template';\n tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = this.createElement('input');\n item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = this.createElement('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');\n var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n var btnObj = new Button({ iconCss: iconCss, iconPosition: iconPos });\n btnObj.createElement = this.createElement;\n btnObj.appendTo(dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item, index) {\n var innerEle;\n var dom;\n innerEle = this.createElement('div', { className: CLS_ITEM });\n innerEle.setAttribute('aria-disabled', 'false');\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', '-1');\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n if (item.disabled) {\n this.add(innerEle, CLS_DISABLE);\n }\n if (item.visible === false) {\n this.add(innerEle, CLS_HIDDEN);\n }\n return innerEle;\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', '-1');\n }\n this.activeEle = curEle;\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n curEle.removeAttribute('tabindex');\n }\n else {\n this.activeEle.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.overflowMode === 'Popup') {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyScroll();\n var multirowele = ele.querySelector('.' + CLS_ITEMS);\n if (!isNOU(multirowele)) {\n this.remove(multirowele, CLS_MULTIROWPOS);\n if (this.tbarAlign) {\n this.add(multirowele, CLS_TBARPOS);\n }\n }\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.overflowMode === 'Extended') {\n var eleStyles = window.getComputedStyle(this.element);\n this.popObj.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n }\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n if (this.element.querySelector('.' + CLS_HSCROLLBAR)) {\n this.scrollStep = this.element.querySelector('.' + CLS_HSCROLLBAR).offsetWidth;\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n this.separator();\n };\n Toolbar.prototype.extendedOpen = function () {\n var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && sib) {\n this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {ToolbarModel} newProp\n * @param {ToolbarModel} oldProp\n * @returns void\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n this.extendedOpen();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array) && !this.isServerRendered) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var newProperty = Object(newProp.items[index])[property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n this.trigger('created');\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;\n if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {\n --this.popupPriCount;\n }\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n detach(itemCol[index]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[index]], index);\n this.items.splice(index, 1);\n if (this.items[index].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n var wid = tEle.offsetWidth;\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);\n if (!isNOU(this.scrollModule)) {\n newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);\n }\n if (!isNOU(this.popObj)) {\n newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n case 'scrollStep':\n if (this.scrollModule) {\n this.scrollModule.scrollStep = this.scrollStep;\n }\n break;\n case 'enableCollision':\n if (this.popObj) {\n this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'allowKeyboard':\n this.unwireKeyboardEvent();\n if (newProp.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n * @param {number | HTMLElement} index - Index value of target item or DOM element of items to be hidden or shown.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns void.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n var isElement = (typeof (index) === 'object') ? true : false;\n var eleIndex = index;\n var initIndex;\n var ele;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[eleIndex]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[eleIndex];\n }\n if (ele) {\n value ? ele.classList.add(CLS_HIDDEN) : ele.classList.remove(CLS_HIDDEN);\n if (value && isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex'))) {\n ele.firstElementChild.setAttribute('tabindex', '-1');\n var innerItems_2 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n eleIndex = innerItems_2.indexOf(ele);\n }\n var nextEle = innerItems_2[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n nextEle.firstElementChild.removeAttribute('tabindex');\n break;\n }\n nextEle = innerItems_2[++eleIndex];\n }\n }\n }\n else if (isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n initIndex = 0;\n var setFlag = false;\n var removeFlag = false;\n var initELe = innerItems[initIndex];\n while (initELe) {\n if (!initELe.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(initELe.firstElementChild.getAttribute('tabindex'))) {\n initELe.firstElementChild.setAttribute('tabindex', '-1');\n setFlag = true;\n }\n else {\n if (setFlag && removeFlag) {\n break;\n }\n var skipEle = this.eleContains(initELe);\n if (!skipEle) {\n initELe.firstElementChild.removeAttribute('tabindex');\n removeFlag = true;\n }\n initELe = innerItems[++initIndex];\n }\n }\n else {\n initELe = innerItems[++initIndex];\n }\n }\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Toolbar.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property()\n ], Toolbar.prototype, \"scrollStep\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableCollision\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","'use strict';\nvar $ = require('../internals/export');\nvar $trim = require('../internals/string-trim').trim;\nvar forcedStringTrimMethod = require('../internals/string-trim-forced');\n\n// `String.prototype.trim` method\n// https://tc39.es/ecma262/#sec-string.prototype.trim\n$({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {\n trim: function trim() {\n return $trim(this);\n }\n});\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { addClass, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren } from '../base/util';\n/**\n * `CommandColumn` used to render command column in grid\n * @hidden\n */\nvar CommandColumnRenderer = /** @class */ (function (_super) {\n __extends(CommandColumnRenderer, _super);\n function CommandColumnRenderer(parent, locator) {\n var _this = _super.call(this, parent, locator) || this;\n _this.buttonElement = _this.parent.createElement('button', {});\n _this.unbounDiv = _this.parent.createElement('div', { className: 'e-unboundcelldiv', styles: 'display: inline-block' });\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowcell e-unboundcell', attrs: {\n role: 'gridcell', tabindex: '-1'\n }\n });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {{[x:string]:Object}} attributes?\n * @param {Element}\n */\n CommandColumnRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var uid = 'uid';\n node.appendChild(this.unbounDiv.cloneNode());\n node.setAttribute('aria-label', 'is Command column column header ' + cell.column.headerText);\n if (cell.column.commandsTemplate) {\n if (this.parent.isReact && typeof (cell.column.commandsTemplate) !== 'string') {\n var tempID = this.parent + 'commandsTemplate';\n cell.column.getColumnTemplate()(data, this.parent, 'commandsTemplate', tempID, null, null, node.firstElementChild);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(node.firstElementChild, cell.column.getColumnTemplate()(data));\n }\n }\n else {\n for (var _i = 0, _a = cell.commands; _i < _a.length; _i++) {\n var command = _a[_i];\n node = this.renderButton(node, command, attributes.index, command[uid]);\n }\n }\n this.setAttributes(node, cell, attributes);\n if (this.parent.isEdit) {\n addClass(node.querySelectorAll('.e-edit-delete'), 'e-hide');\n removeClass(node.querySelectorAll('.e-save-cancel'), 'e-hide');\n }\n else {\n addClass(node.querySelectorAll('.e-save-cancel'), 'e-hide');\n removeClass(node.querySelectorAll('.e-edit-delete'), 'e-hide');\n }\n return node;\n };\n CommandColumnRenderer.prototype.renderButton = function (node, buttonOption, index, uid) {\n var button = this.buttonElement.cloneNode();\n attributes(button, {\n 'id': this.parent.element.id + (buttonOption.type || '') + '_' + index + '_' + uid, 'type': 'button',\n title: !isNullOrUndefined(buttonOption.title) ? buttonOption.title :\n buttonOption.buttonOption.content || this.localizer.getConstant(buttonOption.type) || buttonOption.type,\n 'data-uid': uid\n });\n button.onclick = buttonOption.buttonOption.click;\n var buttonObj = new Button(buttonOption.buttonOption, button);\n buttonObj.commandType = buttonOption.type;\n node.firstElementChild.appendChild(buttonObj.element);\n switch (buttonOption.type) {\n case 'Edit':\n case 'Delete':\n addClass([button], ['e-edit-delete', 'e-' + buttonOption.type.toLowerCase() + 'button']);\n break;\n case 'Cancel':\n case 'Save':\n addClass([button], ['e-save-cancel', 'e-' + buttonOption.type.toLowerCase() + 'button']);\n break;\n }\n return node;\n };\n return CommandColumnRenderer;\n}(CellRenderer));\nexport { CommandColumnRenderer };\n","import { closest, isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport { click, keyPressed, commandClick, initialEnd } from '../base/constant';\nimport { CellType } from '../base/enum';\nimport { CommandColumnRenderer } from '../renderer/command-column-renderer';\nimport { getUid } from '../base/util';\n/**\n * `CommandColumn` used to handle the command column actions.\n * @hidden\n */\nvar CommandColumn = /** @class */ (function () {\n function CommandColumn(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.initiateRender();\n this.addEventListener();\n }\n CommandColumn.prototype.initiateRender = function () {\n var cellFac = this.locator.getService('cellRendererFactory');\n cellFac.addCellRenderer(CellType.CommandColumn, new CommandColumnRenderer(this.parent, this.locator));\n };\n CommandColumn.prototype.commandClickHandler = function (e) {\n var gObj = this.parent;\n var gID = gObj.element.id;\n var target = closest(e.target, 'button');\n if (!target || !closest(e.target, '.e-unboundcell')) {\n return;\n }\n var buttonObj = target.ej2_instances[0];\n var type = buttonObj.commandType;\n var uid = target.getAttribute('data-uid');\n var commandColumn;\n var row = gObj.getRowObjectFromUID(closest(target, '.e-row').getAttribute('data-uid'));\n var cols = this.parent.columnModel;\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].commands) {\n var commandCols = cols[i].commands;\n for (var j = 0; j < commandCols.length; j++) {\n var idInString = 'uid';\n var typeInString = 'type';\n if (isBlazor() && !gObj.isJsComponent && commandCols[j][idInString] === uid) {\n commandColumn = commandCols[j];\n type = commandCols[j][typeInString];\n }\n else if (commandCols[j][idInString] === uid && commandCols[j][typeInString] === type) {\n commandColumn = commandCols[j];\n }\n }\n }\n }\n var args = {\n cancel: false,\n target: target,\n commandColumn: commandColumn,\n rowData: isNullOrUndefined(row) ? undefined : row.data\n };\n this.parent.trigger(commandClick, args, function (commandclickargs) {\n if (buttonObj.disabled || !gObj.editModule || commandclickargs.cancel) {\n return;\n }\n switch (type) {\n case 'Edit':\n gObj.editModule.endEdit();\n gObj.editModule.startEdit(closest(target, 'tr'));\n break;\n case 'Cancel':\n gObj.editModule.closeEdit();\n break;\n case 'Save':\n gObj.editModule.endEdit();\n break;\n case 'Delete':\n if (gObj.editSettings.mode !== 'Batch') {\n gObj.editModule.endEdit();\n }\n gObj.commandDelIndex = parseInt(closest(target, 'tr').getAttribute('aria-rowindex'), 10);\n gObj.clearSelection();\n //for toogle issue when dbl click\n gObj.selectRow(gObj.commandDelIndex, false);\n gObj.editModule.deleteRecord();\n gObj.commandDelIndex = undefined;\n break;\n }\n });\n };\n /**\n * For internal use only - Get the module name.\n */\n CommandColumn.prototype.getModuleName = function () {\n return 'commandColumn';\n };\n /**\n * To destroy CommandColumn.\n * @method destroy\n * @return {void}\n */\n CommandColumn.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.removeEventListener();\n };\n CommandColumn.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(click, this.commandClickHandler);\n this.parent.off(keyPressed, this.keyPressHandler);\n this.parent.off(initialEnd, this.load);\n };\n CommandColumn.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(click, this.commandClickHandler, this);\n this.parent.on(keyPressed, this.keyPressHandler, this);\n this.parent.on(initialEnd, this.load, this);\n };\n CommandColumn.prototype.keyPressHandler = function (e) {\n if (e.action === 'enter' && closest(e.target, '.e-unboundcelldiv')) {\n this.commandClickHandler(e);\n e.preventDefault();\n }\n };\n CommandColumn.prototype.load = function () {\n if (isBlazor() && !this.parent.isJsComponent) {\n return;\n }\n var uid = 'uid';\n var col = this.parent.columnModel;\n for (var i = 0; i < col.length; i++) {\n if (col[i].commands) {\n var commandCol = col[i].commands;\n for (var j = 0; j < commandCol.length; j++) {\n commandCol[j][uid] = getUid('gridcommand');\n }\n }\n }\n };\n return CommandColumn;\n}());\nexport { CommandColumn };\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};\n///
\nimport { EventHandler, Property, Event, compile, KeyboardEvents, append, select } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Animation, Browser, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, prepend, detach, classList, isBlazor } from '@syncfusion/ej2-base';\nimport { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { incrementalSearch } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\n/* tslint:disable */\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\n// don't use space in classnames \nexport var dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n *
\n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @class */ (function (_super) {\n __extends(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n */\n function DropDownList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n _this.isListSearched = false;\n _this.preventChange = false;\n _this.isAngular = false;\n return _this;\n }\n ;\n /**\n * Initialize the event handler.\n * @private\n */\n DropDownList.prototype.preRender = function () {\n var checkBlazor = isBlazor() && this.isServerRendered;\n this.isServerBlazor = (checkBlazor) ? true : false;\n if (this.isServerBlazor) {\n this.initializeData();\n }\n else {\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n }\n this.activeIndex = this.index;\n this.queryString = '';\n };\n DropDownList.prototype.initializeData = function () {\n this.isPopupOpen = false;\n this.isDocumentClick = false;\n this.isInteracted = false;\n this.isFilterFocus = false;\n this.beforePopupOpen = false;\n this.initial = true;\n this.initRemoteRender = false;\n this.isNotSearchList = false;\n this.isTyped = false;\n this.isSelected = false;\n this.preventFocus = false;\n this.preventAutoFill = false;\n this.isValidKey = false;\n this.typedString = '';\n this.isEscapeKey = false;\n this.isPreventBlur = false;\n this.isTabKey = false;\n this.actionCompleteData = { isUpdated: false };\n this.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.renderList = function (isEmptyData) {\n if (!this.isServerBlazor) {\n _super.prototype.render.call(this, isEmptyData);\n this.unWireListEvents();\n this.wireListEvents();\n }\n else {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', this.beforePopupOpen, false);\n }\n };\n DropDownList.prototype.floatLabelChange = function () {\n if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {\n var floatElement = this.inputWrapper.container.querySelector('.e-float-text');\n if (this.inputElement.value !== '' || this.isInteracted) {\n classList(floatElement, ['e-label-top'], ['e-label-bottom']);\n }\n else {\n classList(floatElement, ['e-label-bottom'], ['e-label-top']);\n }\n }\n };\n DropDownList.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clearAll(e);\n };\n DropDownList.prototype.resetFocusElement = function () {\n this.removeHover();\n this.removeSelection();\n this.removeFocus();\n this.list.scrollTop = 0;\n if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {\n var li = this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clearAll = function (e, properties) {\n if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.isActive = true;\n this.resetSelection(properties);\n }\n var dataItem = this.getItemData();\n if (this.previousValue === dataItem.value) {\n return;\n }\n this.onChangeEvent(e);\n };\n DropDownList.prototype.resetSelection = function (properties) {\n if (this.list) {\n if ((!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.selectedLI = null;\n this.actionCompleteData.isUpdated = false;\n this.actionCompleteData.ulElement = null;\n this.actionCompleteData.list = null;\n this.resetList(properties.dataSource);\n }\n else {\n if (this.allowFiltering && this.getModuleName() !== 'autocomplete'\n && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);\n }\n this.resetFocusElement();\n }\n }\n if (!this.isServerBlazor) {\n this.hiddenElement.innerHTML = '';\n }\n this.inputElement.value = '';\n this.value = null;\n this.itemData = null;\n this.text = null;\n this.index = null;\n this.activeIndex = null;\n this.item = null;\n this.queryString = '';\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n this.setSelection(null, null);\n this.isSelectCustom = false;\n this.updateIconState();\n this.cloneElements();\n };\n DropDownList.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.inputWrapper.container], updatedClassValue.split(' '));\n }\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',\n 'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];\n var validateAttr = ['name', 'required'];\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n defaultAttr.push('tabindex');\n }\n if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n htmlAttr === 'placeholder' ? Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement) :\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n }\n }\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n this.inputWrapper.container.removeAttribute('tabindex');\n }\n };\n DropDownList.prototype.getAriaAttributes = function () {\n return {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false',\n 'aria-activedescendant': 'null',\n 'aria-live': 'polite',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ;\n DropDownList.prototype.getLocaleName = function () {\n return 'drop-down-list';\n };\n ;\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return this.inputWrapper.container;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n ;\n DropDownList.prototype.initValue = function () {\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n DropDownList.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n this.setSelection(this.getElementByValue(this.value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlur = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction(e);\n this.isTabKey = false;\n }\n if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {\n this.isActive = false;\n this.beforePopupOpen = false;\n }\n };\n DropDownList.prototype.focusOutAction = function (e) {\n this.isInteracted = false;\n this.focusOut(e);\n this.onFocusOut();\n };\n DropDownList.prototype.onFocusOut = function () {\n if (!this.enabled) {\n return;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(null);\n }\n this.floatLabelChange();\n this.dispatchEvent(this.hiddenElement, 'change');\n if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {\n this.dispatchEvent(this.inputElement, 'blur');\n }\n if (this.inputWrapper.clearButton) {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n this.trigger('blur');\n };\n DropDownList.prototype.onFocus = function (e) {\n if (!this.isInteracted) {\n this.isInteracted = true;\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n }\n this.updateIconState();\n };\n DropDownList.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var val = (this.element.tagName === this.getNgDirective()) ? null : this.inputElement.getAttribute('value');\n this.text = val;\n }\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlur, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n else {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.mobileKeyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n this.bindClearEvent();\n };\n DropDownList.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DropDownList.prototype.unBindCommonEvent = function () {\n if (this.targetElement()) {\n EventHandler.remove(this.targetElement(), 'blur', this.onBlur);\n }\n var formElement = this.inputElement && closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n if (!Browser.isDevice) {\n this.keyboardModule.destroy();\n }\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);\n }\n };\n DropDownList.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n */\n DropDownList.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n ;\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n if (!this.isServerBlazor) {\n this.renderList();\n }\n else {\n this.isServerIncrementalSearch = true;\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);\n }\n }\n this.searchKeyEvent = e;\n this.onServerIncrementalSearch(e);\n }\n };\n DropDownList.prototype.onServerIncrementalSearch = function (e) {\n if (!this.isRequested && !isNullOrUndefined(this.list) &&\n !isNullOrUndefined(this.list.querySelector('li')) && this.enabled && !this.readonly) {\n this.incrementalSearch(e);\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n var classList = target.classList;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n ;\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n ;\n DropDownList.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n ;\n DropDownList.prototype.removeHover = function () {\n if (this.list) {\n var hoveredItem = (this.isServerBlazor && this.popupObj && this.popupObj.element) ?\n this.popupObj.element.querySelectorAll('.' + dropDownBaseClasses.hover) :\n this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n }\n };\n ;\n DropDownList.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n ;\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id, this.isServerBlazor);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n };\n ;\n /**\n * Hides the spinner loader.\n * @returns void.\n */\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n /**\n * Shows the spinner loader.\n * @returns void.\n */\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n var preventAction = e.action === 'pageUp' || e.action === 'pageDown';\n var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');\n this.isEscapeKey = e.action === 'escape';\n this.isTabKey = !this.isPopupOpen && e.action === 'tab';\n var isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (!(this.isServerBlazor && (e.action === 'open' || e.action === 'space')) && isNullOrUndefined(this.list) ||\n (!isNullOrUndefined(this.liCollections) && isNavigation && this.liCollections.length === 0) || this.isRequested) {\n if (!(this.isServerBlazor && isNavAction)) {\n return;\n }\n }\n if ((isTabAction && this.getModuleName() !== 'autocomplete') && this.isPopupOpen\n || e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;\n switch (e.action) {\n case 'down':\n case 'up':\n this.updateUpDownAction(e);\n break;\n case 'pageUp':\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'pageDown':\n this.pageDownSelection(this.activeIndex + this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'home':\n this.updateHomeEndAction(e);\n break;\n case 'end':\n this.updateHomeEndAction(e);\n break;\n case 'space':\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.beforePopupOpen) {\n this.showPopup();\n }\n }\n break;\n case 'open':\n this.showPopup();\n break;\n case 'hide':\n this.preventAltUp = this.isPopupOpen;\n this.hidePopup(e);\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'tab':\n this.selectCurrentValueOnTab(e);\n break;\n case 'escape':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.updateUpDownAction = function (e) {\n if (this.isServerBlazor && isNullOrUndefined(this.list)) {\n this.isServerNavigation = true;\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);\n }\n else {\n this.isServerNavigation = false;\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else {\n var nextItem = void 0;\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];\n if (!isNullOrUndefined(nextItem)) {\n this.setSelection(nextItem, e);\n }\n }\n e.preventDefault();\n }\n };\n DropDownList.prototype.updateHomeEndAction = function (e) {\n if (this.getModuleName() === 'dropdownlist') {\n if (this.isServerBlazor && isNullOrUndefined(this.list)) {\n this.isServerNavigation = true;\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', true, false);\n }\n else {\n this.isServerNavigation = false;\n var findLi = 0;\n if (e.action === 'home') {\n findLi = 0;\n }\n else {\n findLi = this.getItems().length - 1;\n }\n e.preventDefault();\n if (this.activeIndex === findLi) {\n return;\n }\n this.setSelection(this.liCollections[findLi], e);\n }\n }\n };\n DropDownList.prototype.selectCurrentValueOnTab = function (e) {\n if (this.getModuleName() === 'autocomplete') {\n this.selectCurrentItem(e);\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n }\n };\n DropDownList.prototype.mobileKeyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if ((this.isEditTextBox()) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n if (this.list === undefined && !this.isRequested) {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (e.action === 'enter') {\n this.selectCurrentItem(e);\n }\n }\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup();\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.getPageCount = function () {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n };\n DropDownList.prototype.pageUpSelection = function (steps, event) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.pageDownSelection = function (steps, event) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n */\n DropDownList.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n ;\n DropDownList.prototype.checkSelector = function (id) {\n return '[id=\"' + id.replace(/(:|\\.|\\[|\\]|,|=|@|\\\\|\\/|#)/g, '\\\\$1') + '\"]';\n };\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&\n !this.inputWrapper.container.contains(e.target)) {\n if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {\n this.isDocumentClick = true;\n var isActive = this.isRequested;\n this.isInteracted = false;\n this.hidePopup(e);\n if (!isActive) {\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup();\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn(e);\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup();\n }\n var proxy_1 = this;\n var duration = (isBlazor()) ? 1000 : (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;\n if (!this.isSecondClick) {\n setTimeout(function () { proxy_1.cloneElements(); proxy_1.isSecondClick = true; }, duration);\n }\n }\n else {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.cloneElements = function () {\n if (this.list) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.actionCompleteData.ulElement = ulElement;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {\n var _this = this;\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n var selectedData = this.getDataByValue(value);\n if (!this.initial && !preventSelect && !isNullOrUndefined(e)) {\n var items = this.detachChanges(selectedData);\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: li,\n itemData: items,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n li.classList.remove(dropDownBaseClasses.selected);\n }\n else {\n _this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (_this.isServerBlazor) {\n // tslint:disable-next-line\n _this.interopAdaptor.invokeMethodAsync('OnServerItemData', _this.itemData);\n }\n if (isSelection) {\n _this.setSelectOptions(li, e);\n }\n }\n });\n }\n else {\n this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (this.isServerBlazor) {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerItemData', this.itemData);\n }\n if (isSelection) {\n this.setSelectOptions(li, e);\n }\n }\n };\n DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n this.item = li;\n this.itemData = selectedData;\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n li.setAttribute('aria-selected', 'true');\n this.activeIndex = this.getIndexByValue(value);\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n if (dataItem.value === null) {\n if (isBlazor() && dataItem.text !== null || dataItem.text !== '') {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.isServerBlazor) {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerValueTemplate', dataItem);\n }\n if (this.valueTemplate && this.itemData !== null && !this.isServerBlazor) {\n this.DropDownBaseresetBlazorTemplates(false, false, false, false, true);\n this.setValueTemplate();\n }\n else if (this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected\n && li.classList.contains(dropDownBaseClasses.selected)))) {\n this.updateSelectedItem(li, e, false, true);\n }\n else {\n this.setSelectOptions(li, e);\n }\n };\n DropDownList.prototype.setSelectOptions = function (li, e) {\n if (this.list) {\n this.removeHover();\n }\n this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;\n this.selectedLI = li;\n if (this.setValue(e)) {\n return;\n }\n if (this.isPopupOpen) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n if (this.isFilterLayout() && this.filterInput) {\n attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n if (Browser.info.name !== 'mozilla') {\n attributes(this.inputElement, { 'aria-label': this.inputElement.value });\n attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });\n this.targetElement().removeAttribute('aria-live');\n }\n };\n DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {\n var checkTemplate = false;\n if (dropdownTemplate) {\n var exception = void 0;\n try {\n checkTemplate = (document.querySelectorAll(dropdownTemplate).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\n // tslint:disable-next-line\n if (this.isReact) {\n this.clearTemplate(['valueTemplate']);\n }\n if (!this.valueTempElement) {\n this.valueTempElement = this.createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n this.valueTempElement.innerHTML = '';\n var templateData = (isBlazor()) ? JSON.parse(JSON.stringify(this.itemData)) : this.itemData;\n var valuecheck = this.dropdownCompiler(this.valueTemplate);\n if (valuecheck) {\n compiledString = compile(document.querySelector(this.valueTemplate).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n // tslint:disable-next-line\n var valueCompTemp = compiledString(templateData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, this.valueTempElement);\n if (valueCompTemp && valueCompTemp.length > 0) {\n for (var i = 0; i < valueCompTemp.length; i++) {\n this.valueTempElement.appendChild(valueCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n this.DropDownBaseupdateBlazorTemplates(false, false, false, false, true, true, true);\n };\n DropDownList.prototype.removeSelection = function () {\n if (this.list) {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n }\n };\n ;\n DropDownList.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = null;\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n /**\n * To trigger the change event for list.\n */\n DropDownList.prototype.onChangeEvent = function (eve) {\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);\n this.detachChangeEvent(eve);\n };\n ;\n DropDownList.prototype.detachChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n var items = this.detachChanges(this.itemData);\n var preItems = void 0;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.value,\n element: this.element\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n if (this.isServerBlazor && this.enablePersistence) {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('ServerChange');\n }\n }\n if ((isNullOrUndefined(this.value) || this.value === '') && this.floatLabelType !== 'Always') {\n removeClass([this.inputWrapper.container], 'e-valid-input');\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n if (this.isServerBlazor && this.hiddenElement.querySelector('option')) {\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.textContent = this.text;\n selectedElement.setAttribute('value', this.value.toString());\n }\n else if (!this.isServerBlazor) {\n this.hiddenElement.innerHTML = '
';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n }\n else if (!this.isServerBlazor) {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n */\n DropDownList.prototype.onFilterUp = function (e) {\n if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {\n this.isValidKey = false;\n switch (e.keyCode) {\n case 38: //up arrow \n case 40: //down arrow \n if (this.getModuleName() === 'autocomplete' && !this.isPopupOpen && !this.preventAltUp && !this.isRequested) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else {\n this.preventAutoFill = false;\n }\n this.preventAltUp = false;\n e.preventDefault();\n break;\n case 46: //delete\n case 8: //backspace\n this.typedString = this.filterInput.value;\n if (!this.isPopupOpen && this.typedString !== '' || this.isPopupOpen && this.queryString.length > 0) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '' && this.queryString === '' && this.getModuleName() !== 'autocomplete') {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '') {\n if (this.list) {\n this.resetFocusElement();\n }\n this.activeIndex = null;\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n e.preventDefault();\n break;\n default:\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n break;\n }\n }\n else {\n this.isValidKey = false;\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13: //enter\n break;\n case 40: //down arrow\n case 38: //up arrow \n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9: //tab \n if (this.isPopupOpen && this.getModuleName() !== 'autocomplete') {\n e.preventDefault();\n }\n break;\n default:\n this.prevSelectPoints = this.getSelectionPoints();\n this.queryString = this.filterInput.value;\n break;\n }\n };\n DropDownList.prototype.removeFillSelection = function () {\n if (this.isInteracted) {\n var selection = this.getSelectionPoints();\n this.inputElement.setSelectionRange(selection.end, selection.end);\n }\n };\n DropDownList.prototype.getQuery = function (query) {\n var filterQuery;\n if (!this.isCustomFilter && this.allowFiltering && this.filterInput) {\n filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = this.typedString === '' ? 'contains' : this.filterType;\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = (this.fields.text) ? this.fields.text : '';\n filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n }\n else {\n filterQuery = query ? query : this.query ? this.query : new Query();\n }\n return filterQuery;\n };\n DropDownList.prototype.getSelectionPoints = function () {\n var input = this.inputElement;\n return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };\n };\n DropDownList.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.activeIndex = null;\n this.isListSearched = true;\n if (this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n this.isDataFetched = false;\n if (this.isFiltering()) {\n if (this.isServerBlazor) {\n this.beforePopupOpen = (this.getModuleName() === 'combobox' && this.isFiltering() && !this.beforePopupOpen)\n ? !this.beforePopupOpen : this.beforePopupOpen;\n if (this.filterInput.value === '' && this.getModuleName() !== 'dropdownlist') {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', this.beforePopupOpen, false);\n }\n else {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerFilter', this.filterInput.value);\n }\n }\n else {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isCustomFilter = true;\n _this.filteringAction(dataSource, query, fields);\n },\n baseEventArgs: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel && !_this.isCustomFilter && !eventArgs.preventDefaultAction) {\n _this.filteringAction(_this.dataSource, null, _this.fields);\n }\n });\n }\n }\n };\n /**\n * To filter the data from given data source by using query\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @return {void}.\n\n */\n DropDownList.prototype.filter = function (dataSource, query, fields) {\n this.isCustomFilter = true;\n this.filteringAction(dataSource, query, fields);\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = true;\n if (this.filterInput.value.trim() === '' && !this.itemTemplate) {\n this.actionCompleteData.isUpdated = false;\n this.isTyped = false;\n if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);\n }\n this.isTyped = true;\n if (!isNullOrUndefined(this.itemData) && this.getModuleName() === 'dropdownlist') {\n this.focusIndexItem();\n this.setScrollPosition();\n }\n this.isNotSearchList = true;\n }\n else {\n this.isNotSearchList = false;\n query = (this.filterInput.value.trim() === '') ? null : query;\n this.resetList(dataSource, fields, query);\n }\n this.renderReactTemplates();\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = popupElement.querySelector('.' + dropDownListClasses.filterParent) ?\n popupElement.querySelector('.' + dropDownListClasses.filterParent) : this.createElement('span', {\n className: dropDownListClasses.filterParent\n });\n if (this.isServerBlazor) {\n parentElement.innerHTML = '';\n }\n this.filterInput = this.createElement('input', {\n attrs: { type: 'text' },\n className: dropDownListClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ?\n [dropDownListClasses.backIcon, dropDownListClasses.filterBarClearIcon] : [dropDownListClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n }, this.createElement);\n if (!isNullOrUndefined(this.cssClass)) {\n if (this.cssClass.split(' ').indexOf('e-outline') !== -1) {\n addClass([this.filterInputObj.container], 'e-outline');\n }\n else if (this.cssClass.split(' ').indexOf('e-filled') !== -1) {\n addClass([this.filterInputObj.container], 'e-filled');\n }\n }\n append([this.filterInputObj.container], parentElement);\n prepend([parentElement], popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n else {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.mobileKeyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlur, this);\n EventHandler.add(this.filterInput, 'paste', this.pasteHandler, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n ;\n DropDownList.prototype.onInput = function (e) {\n this.isValidKey = true;\n // For filtering works in mobile firefox.\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.typedString = this.filterInput.value;\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n };\n DropDownList.prototype.pasteHandler = function (e) {\n var _this = this;\n setTimeout(function () {\n _this.typedString = _this.filterInput.value;\n _this.searchLists(e);\n });\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n if (this.isNotSearchList) {\n this.isNotSearchList = false;\n return;\n }\n if (this.isActive) {\n var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.updateSelectElementData(this.allowFiltering);\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {\n this.isRequested = false;\n this.keyActionHandler(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent)) {\n this.incrementalSearch(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n this.list.scrollTop = 0;\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n }\n if (this.initRemoteRender) {\n this.initial = true;\n this.activeIndex = this.index;\n this.updateValues();\n this.initRemoteRender = false;\n this.initial = false;\n if (this.value && this.dataSource instanceof DataManager) {\n var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n var checkVal = list.some(function (x) { return x[checkField_1] === _this.value; });\n if (!checkVal) {\n this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, list.length);\n _this.updateValues();\n }\n });\n }\n }\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&\n this.dataSource.length !== 0)))) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n }, 0);\n }\n else {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n }\n }\n this.addNewItem(list, selectedItem);\n if (!isNullOrUndefined(this.itemData)) {\n this.focusIndexItem();\n }\n }\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_1 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||\n (getValue(_this.fields.value, data) === value_1));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item, index) {\n var _this = this;\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.actionCompleteDataUpdate(li, item, index);\n }, 0);\n }\n else {\n this.actionCompleteDataUpdate(li, item, index);\n }\n }\n };\n DropDownList.prototype.actionCompleteDataUpdate = function (li, item, index) {\n if (index != null) {\n this.actionCompleteData.ulElement.insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);\n }\n else {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n }\n if (this.isFiltering() && this.actionCompleteData.list.indexOf(item) < 0) {\n this.actionCompleteData.list.push(item);\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.selectedLI = element;\n this.activeItem(element);\n this.removeFocus();\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n ;\n DropDownList.prototype.renderPopup = function () {\n var _this = this;\n if (this.popupObj && document.body.contains(this.popupObj.element)) {\n this.refreshPopup();\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n var popupEle = (_this.serverPopupEle) ? _this.serverPopupEle : _this.createElement('div', {\n id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass != null ? _this.cssClass : '')\n });\n var searchBox = _this.setSearchBox(popupEle);\n _this.listHeight = formatUnit(_this.popupHeight);\n if (_this.headerTemplate && !_this.isServerBlazor) {\n _this.setHeaderTemplate(popupEle);\n }\n append([_this.list], popupEle);\n if (_this.footerTemplate && !_this.isServerBlazor) {\n _this.setFooterTemplate(popupEle);\n }\n if (_this.isServerRendered && popupEle && popupEle.querySelector('.e-ddl-footer')) {\n popupEle.appendChild(popupEle.querySelector('.e-ddl-footer'));\n }\n document.body.appendChild(popupEle);\n _this.updateServerPopup(popupEle);\n popupEle.style.visibility = 'hidden';\n if (_this.popupHeight !== 'auto') {\n _this.searchBoxHeight = 0;\n if (!isNullOrUndefined(searchBox.container)) {\n _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;\n _this.listHeight = (parseInt(_this.listHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.headerTemplate || (_this.isServerRendered && popupEle && popupEle.querySelector('.e-ddl-header'))) {\n _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');\n var height = Math.round(_this.header.getBoundingClientRect().height);\n _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.footerTemplate || (_this.isServerRendered && popupEle && popupEle.querySelector('.e-ddl-footer'))) {\n _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');\n var height = Math.round(_this.footer.getBoundingClientRect().height);\n _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';\n }\n _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(_this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n var offsetValue = 0;\n var left = void 0;\n if (!isNullOrUndefined(_this.selectedLI) && (!isNullOrUndefined(_this.activeIndex) && _this.activeIndex >= 0)) {\n _this.setScrollPosition();\n }\n else {\n _this.list.scrollTop = 0;\n }\n if (Browser.isDevice && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||\n (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {\n offsetValue = _this.getOffsetValue(popupEle);\n var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));\n }\n _this.getFocusElement();\n _this.createPopup(popupEle, offsetValue, left);\n _this.checkCollision(popupEle);\n if (Browser.isDevice) {\n _this.popupObj.element.classList.add(dropDownListClasses.device);\n if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'\n && !_this.allowFiltering && _this.isDropDownClick)) {\n _this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n if (_this.isFilterLayout()) {\n _this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);\n _this.popupObj.position = { X: 0, Y: 0 };\n _this.popupObj.dataBind();\n attributes(_this.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, _this.popupObj.element], dropDownListClasses.popupFullScreen);\n _this.setSearchBoxPosition();\n _this.backIconElement = searchBox.container.querySelector('.e-back-icon');\n _this.clearIconElement = searchBox.container.querySelector('.' + dropDownListClasses.clearIcon);\n EventHandler.add(_this.backIconElement, 'click', _this.clickOnBackIcon, _this);\n EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);\n }\n }\n popupEle.style.visibility = 'visible';\n addClass([popupEle], 'e-popup-close');\n var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);\n for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {\n var element = scrollParentElements_1[_i];\n EventHandler.add(element, 'scroll', _this.scrollHandler, _this);\n }\n if (Browser.isDevice && _this.isFilterLayout()) {\n EventHandler.add(_this.list, 'scroll', _this.listScroll, _this);\n }\n if (!isNullOrUndefined(_this.list)) {\n _this.unWireListEvents();\n _this.wireListEvents();\n }\n attributes(_this.targetElement(), { 'aria-expanded': 'true' });\n var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n _this.beforePopupOpen = true;\n var popupInstance = (isBlazor() && _this.isServerRendered) ? null : _this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n _this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.serverBlazorUpdateSelection();\n _this.bindServerScrollEvent();\n addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n _this.renderReactTemplates();\n _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);\n }\n else {\n _this.beforePopupOpen = false;\n _this.destroyPopup();\n }\n });\n }\n else {\n _this.beforePopupOpen = false;\n }\n });\n };\n DropDownList.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.serverBlazorUpdateSelection = function () {\n if (this.isServerBlazor && (this.value !== null || this.index !== null || this.text !== null) ||\n (this.getModuleName() !== 'dropdownlist' && !this.isTyped)) {\n if (this.getModuleName() === 'dropdownlist') {\n this.removeSelection();\n this.removeFocus();\n this.removeHover();\n this.updateValues();\n }\n if (this.getModuleName() === 'combobox' && this.ulElement &&\n this.findListElement(this.ulElement, 'li', 'data-value', this.value) && !this.isTyped) {\n this.updateValues();\n }\n if (this.isServerBlazor && this.getModuleName() !== 'dropdownlist' &&\n (this.text === '' || this.text === null) && this.ulElement) {\n if (!this.ulElement.querySelector('li').classList.contains(dropDownBaseClasses.hover)) {\n addClass([this.ulElement.querySelector('li')], dropDownBaseClasses.hover);\n }\n }\n }\n };\n DropDownList.prototype.bindServerScrollEvent = function () {\n if (this.isServerBlazor && this.list) {\n if ((this.fields.groupBy) && !this.isGroupChecking) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n }\n };\n DropDownList.prototype.updateServerPopup = function (popupEle) {\n if (this.isServerBlazor) {\n if (popupEle && popupEle.querySelector('li')) {\n removeClass([popupEle.querySelector('.e-content')], ['e-nodata']);\n }\n this.initial = false;\n popupEle.removeAttribute('style');\n }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTopWidth, 10);\n var borderBottom = parseInt(popupStyles.borderBottomWidth, 10);\n return this.setPopupPosition(borderTop + borderBottom);\n };\n DropDownList.prototype.createPopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' },\n zIndex: this.zIndex,\n close: function () {\n if (!_this.isDocumentClick) {\n _this.focusDropDown();\n }\n // tslint:disable-next-line\n if (_this.isReact) {\n _this.clearTemplate(['headerTemplate', 'footerTemplate']);\n }\n var isResetItem = (_this.getModuleName() === 'autocomplete') ? true : false;\n _this.DropDownBaseresetBlazorTemplates(isResetItem, isResetItem, true, true, false, true, true);\n _this.isNotSearchList = false;\n _this.isDocumentClick = false;\n _this.destroyPopup();\n var formElement = closest(_this.inputElement, 'form');\n if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {\n _this.isActive = true;\n _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);\n }\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&\n _this.actionCompleteData.ulElement.querySelector('li');\n var ulElement = _this.list.querySelector('ul li');\n if (_this.isFiltering() && _this.itemTemplate && (_this.element.tagName === _this.getNgDirective()) &&\n (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&\n _this.element.tagName !== 'EJS-COMBOBOX') {\n _this.cloneElements();\n }\n if (_this.isFilterLayout()) {\n removeClass([_this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n _this.isFilterFocus = true;\n _this.filterInput.focus();\n if (_this.inputWrapper.clearButton) {\n addClass([_this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n _this.activeStateChange();\n },\n targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n };\n DropDownList.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0;\n };\n DropDownList.prototype.getFocusElement = function () {\n // combo-box used this method\n };\n DropDownList.prototype.isFilterLayout = function () {\n return this.getModuleName() === 'dropdownlist' && this.allowFiltering;\n };\n DropDownList.prototype.scrollHandler = function () {\n if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&\n !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {\n this.hidePopup();\n }\n };\n DropDownList.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n DropDownList.prototype.setPopupPosition = function (border) {\n var offsetValue;\n var popupOffset = border;\n var selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];\n var liHeight = firstItem.getBoundingClientRect().height;\n var listHeight = this.list.offsetHeight / 2;\n var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;\n var lastItemOffsetValue = lastItem.offsetTop;\n if (lastItemOffsetValue - listHeight < height && !isNullOrUndefined(this.liCollections) &&\n this.liCollections.length > 0 && !isNullOrUndefined(selectedLI)) {\n var count = this.list.offsetHeight / liHeight;\n var paddingBottom = parseInt(getComputedStyle(this.list).paddingBottom, 10);\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;\n this.list.scrollTop = selectedLI.offsetTop;\n }\n else if (height > listHeight) {\n offsetValue = listHeight - liHeight / 2;\n this.list.scrollTop = height - listHeight + liHeight / 2;\n }\n else {\n offsetValue = height;\n }\n var inputHeight = this.inputWrapper.container.offsetHeight;\n offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);\n return -offsetValue;\n };\n DropDownList.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n DropDownList.prototype.scrollBottom = function (isInitial) {\n if (!isNullOrUndefined(this.selectedLI)) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;\n var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n }\n };\n DropDownList.prototype.scrollTop = function () {\n if (!isNullOrUndefined(this.selectedLI)) {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n }\n };\n DropDownList.prototype.isEditTextBox = function () {\n return false;\n };\n DropDownList.prototype.isFiltering = function () {\n return this.allowFiltering;\n };\n DropDownList.prototype.isPopupButton = function () {\n return true;\n };\n DropDownList.prototype.setScrollPosition = function (e) {\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.scrollBottom();\n break;\n default:\n this.scrollTop();\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n };\n DropDownList.prototype.clearText = function () {\n this.filterInput.value = this.typedString = '';\n this.searchLists(null);\n };\n DropDownList.prototype.listScroll = function () {\n this.filterInput.blur();\n };\n DropDownList.prototype.setEleWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n DropDownList.prototype.closePopup = function (delay) {\n var _this = this;\n this.isTyped = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n EventHandler.remove(this.list, 'scroll', this.listScroll);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlur);\n EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);\n this.filterInput = null;\n }\n attributes(this.targetElement(), { 'aria-expanded': 'false', 'aria-activedescendant': null });\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n this.beforePopupOpen = false;\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var popupInstance = (isBlazor() && this.isServerRendered) ? null : this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!isNullOrUndefined(_this.popupObj) &&\n !isNullOrUndefined(_this.popupObj.element.querySelector('.e-fixed-head'))) {\n var fixedHeader = _this.popupObj.element.querySelector('.e-fixed-head');\n fixedHeader.parentNode.removeChild(fixedHeader);\n _this.fixedHeaderElement = null;\n }\n if (!eventArgs.cancel) {\n if (_this.getModuleName() === 'autocomplete' && !_this.isServerBlazor) {\n _this.rippleFun();\n }\n if (_this.isPopupOpen) {\n _this.popupObj.hide(new Animation(eventArgs.animation));\n }\n else {\n _this.destroyPopup();\n }\n }\n });\n };\n DropDownList.prototype.destroyPopup = function () {\n var popupHolderEle = select('#' + this.element.id + '_popup_holder', document);\n if (this.isServerBlazor && this.serverPopupEle && popupHolderEle) {\n popupHolderEle.appendChild(this.serverPopupEle);\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerClosePopup');\n }\n this.isPopupOpen = false;\n this.isFilterFocus = false;\n this.popupObj.destroy();\n detach(this.popupObj.element);\n };\n DropDownList.prototype.clickOnBackIcon = function () {\n this.hidePopup();\n this.focusIn();\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n // tslint:disable-next-line\n DropDownList.prototype.render = function () {\n if (this.isServerBlazor) {\n this.inputElement = this.element;\n this.inputWrapper = { container: this.element.parentElement };\n this.hiddenElement = this.inputWrapper.container.querySelector('select');\n this.inputWrapper.buttons = [this.inputWrapper.container.querySelector('.e-input-group-icon.e-ddl-icon')];\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.inputWrapper.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n if (this.floatLabelType === 'Auto') {\n Input.wireFloatingEvents(this.element);\n }\n Input.bindInitialEvent({\n element: this.element,\n buttons: null, customTag: null,\n floatLabelType: this.floatLabelType,\n properties: this.properties\n });\n this.setFields();\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n this.initial = false;\n }\n else {\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {\n this.inputElement.setAttribute('role', 'textbox');\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {\n this.inputElement.setAttribute('type', 'text');\n }\n }\n else {\n this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n }, this.createElement);\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.validationAttribute(this.element, this.hiddenElement);\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n this.updateDataAttribute(this.htmlAttributes);\n this.setHTMLAttributes();\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) { e.stopImmediatePropagation(); };\n this.inputElement.onchange = function (e) { e.stopImmediatePropagation(); };\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n if (!isNullOrUndefined(this.text)) {\n this.inputElement.setAttribute('value', this.text);\n }\n }\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n };\n ;\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n this.footer.innerHTML = '';\n }\n else {\n this.footer = this.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n var footercheck = this.dropdownCompiler(this.footerTemplate);\n if (footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // tslint:disable-next-line\n var footerCompTemp = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (footerCompTemp && footerCompTemp.length > 0) {\n for (var i = 0; i < footerCompTemp.length; i++) {\n this.footer.appendChild(footerCompTemp[i]);\n }\n }\n this.DropDownBaseupdateBlazorTemplates(false, false, false, false, false, false, true);\n append([this.footer], popupEle);\n };\n DropDownList.prototype.setHeaderTemplate = function (popupEle) {\n var compiledString;\n if (this.header) {\n this.header.innerHTML = '';\n }\n else {\n this.header = this.createElement('div');\n addClass([this.header], dropDownListClasses.header);\n }\n var headercheck = this.dropdownCompiler(this.headerTemplate);\n if (headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // tslint:disable-next-line\n var headerCompTemp = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (headerCompTemp && headerCompTemp.length) {\n for (var i = 0; i < headerCompTemp.length; i++) {\n this.header.appendChild(headerCompTemp[i]);\n }\n }\n this.DropDownBaseupdateBlazorTemplates(false, false, false, false, false, true, false);\n var contentEle = popupEle.querySelector('div.e-content');\n popupEle.insertBefore(this.header, contentEle);\n };\n DropDownList.prototype.setOldText = function (text) {\n this.text = text;\n };\n DropDownList.prototype.setOldValue = function (value) {\n this.value = value;\n };\n DropDownList.prototype.refreshPopup = function () {\n if (!isNullOrUndefined(this.popupObj) && document.body.contains(this.popupObj.element) &&\n ((this.allowFiltering && !(Browser.isDevice && this.isFilterLayout())) || this.getModuleName() === 'autocomplete')) {\n removeClass([this.popupObj.element], 'e-popup-close');\n this.popupObj.refreshPosition(this.inputWrapper.container);\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.checkData = function (newProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource)) && this.itemTemplate && this.allowFiltering &&\n !(this.isListSearched && (newProp.dataSource instanceof DataManager))) {\n this.list = null;\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n }\n this.isListSearched = false;\n var isChangeValue = Object.keys(newProp).indexOf('value') !== -1 && isNullOrUndefined(newProp.value);\n var isChangeText = Object.keys(newProp).indexOf('text') !== -1 && isNullOrUndefined(newProp.text);\n if (this.getModuleName() !== 'autocomplete' && this.allowFiltering && (isChangeValue || isChangeText)) {\n this.itemData = null;\n }\n if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n }\n };\n DropDownList.prototype.updateDataSource = function (props) {\n if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {\n this.clearAll(null, props);\n }\n if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || !(props.dataSource === [])) {\n this.typedString = '';\n this.resetList(this.dataSource);\n }\n if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {\n this.checkCustomValue();\n }\n };\n DropDownList.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });\n };\n DropDownList.prototype.updateInputFields = function () {\n if (this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.isServerBlazor) {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource': break;\n case 'htmlAttributes':\n this.setHTMLAttributes();\n break;\n case 'width':\n this.setEleWidth(newProp.width);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'filterBarPlaceholder':\n if (this.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);\n }\n break;\n case 'readonly':\n if (this.getModuleName() !== 'dropdownlist') {\n Input.setReadonly(newProp.readonly, this.inputElement);\n }\n break;\n case 'cssClass':\n this.setCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'text':\n if (newProp.text === null) {\n this.clearAll();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var li = this.getElementByText(newProp.text);\n if (!this.checkValidLi(li)) {\n if (this.liCollections && this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.text, oldProp.text, 'text');\n }\n else if (!this.isServerBlazor) {\n this.setOldText(oldProp.text);\n }\n }\n this.updateInputFields();\n }\n break;\n case 'value':\n if (newProp.value === null) {\n this.clearAll();\n break;\n }\n this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var item = this.getElementByValue(newProp.value);\n if (!this.checkValidLi(item)) {\n if (this.liCollections && this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.value, oldProp.value, 'value');\n }\n else if (!this.isServerBlazor) {\n this.setOldValue(oldProp.value);\n }\n }\n this.updateInputFields();\n }\n break;\n case 'index':\n if (newProp.index === null) {\n this.clearAll();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender && this.liCollections) {\n var element = this.liCollections[newProp.index];\n if (!this.checkValidLi(element)) {\n if (this.liCollections && this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.index, oldProp.index, 'index');\n }\n else if (!this.isServerBlazor) {\n this.index = oldProp.index;\n }\n }\n this.updateInputFields();\n }\n break;\n case 'footerTemplate':\n if (this.popupObj) {\n this.setFooterTemplate(this.popupObj.element);\n }\n break;\n case 'headerTemplate':\n if (this.popupObj) {\n this.setHeaderTemplate(this.popupObj.element);\n }\n break;\n case 'valueTemplate':\n if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {\n this.setValueTemplate();\n }\n break;\n case 'allowFiltering':\n if (this.allowFiltering) {\n this.actionCompleteData = { ulElement: this.ulElement,\n list: this.listData, isUpdated: true };\n this.updateSelectElementData(this.allowFiltering);\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder, this.createElement);\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper, null, this.createElement);\n this.bindClearEvent();\n break;\n default:\n var ddlProps = void 0;\n ddlProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);\n break;\n }\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n };\n DropDownList.prototype.checkValidLi = function (element) {\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n return true;\n }\n return false;\n };\n DropDownList.prototype.setSelectionData = function (newProp, oldProp, prop) {\n var _this = this;\n var li;\n this.updateListValues = function () {\n if (prop === 'text') {\n li = _this.getElementByText(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldText(oldProp);\n }\n }\n else if (prop === 'value') {\n li = _this.getElementByValue(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldValue(oldProp);\n }\n }\n else if (prop === 'index') {\n li = _this.liCollections[newProp];\n if (!_this.checkValidLi(li)) {\n _this.index = oldProp;\n }\n }\n };\n };\n DropDownList.prototype.setCssClass = function (newClass, oldClass) {\n if (!isNullOrUndefined(oldClass)) {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newClass)) {\n newClass = (newClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newClass, [this.inputWrapper.container], oldClass);\n if (this.popupObj) {\n Input.setCssClass(newClass, [this.popupObj.element], oldClass);\n }\n };\n /**\n * Return the module name.\n * @private\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /**\n * Opens the popup that displays the list of items.\n * @returns void.\n */\n DropDownList.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (isBlazor() && this.itemTemplate) {\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n if (this.isFiltering() && !this.isActive && this.actionCompleteData.list && this.actionCompleteData.list[0]) {\n this.isActive = true;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||\n this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {\n this.renderList();\n }\n else if (this.isFiltering() && this.isServerBlazor) {\n this.renderList();\n }\n if (!this.isServerBlazor) {\n this.invokeRenderPopup();\n }\n var popupHolderEle = !this.isFiltering() || select('#' + this.element.id + '_popup_holder', document);\n var isDropdownComp = this.getModuleName() === 'dropdownlist' || !this.isFiltering();\n if (this.isServerBlazor && popupHolderEle && !isNullOrUndefined(this.list) && isDropdownComp) {\n this.invokeRenderPopup();\n }\n };\n DropDownList.prototype.invokeRenderPopup = function () {\n if (Browser.isDevice && this.isFilterLayout()) {\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderPopup();\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n };\n DropDownList.prototype.clientRenderPopup = function (data, popupEle) {\n if (popupEle) {\n this.serverPopupEle = popupEle;\n this.list = popupEle.querySelector('.e-dropdownbase.e-content') ?\n popupEle.querySelector('.e-dropdownbase.e-content') : this.list;\n this.ulElement = this.list.querySelector('ul');\n if (isNullOrUndefined(this.ulElement) && !this.list.classList.contains(dropDownBaseClasses.noData)) {\n addClass([this.list], [dropDownBaseClasses.noData]);\n }\n this.liCollections = this.ulElement ?\n this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li) : [];\n this.listData = data;\n if (this.getModuleName() === 'autocomplete' && this.liCollections.length > 0) {\n this.renderHightSearch();\n }\n this.initRemoteRender = false;\n if (!this.isPopupOpen) {\n this.serverBlazorUpdateSelection();\n }\n this.unWireListEvents();\n this.wireListEvents();\n if (this.isServerIncrementalSearch && this.searchKeyEvent) {\n this.isServerIncrementalSearch = false;\n this.initial = false;\n this.onServerIncrementalSearch(this.searchKeyEvent);\n }\n if (this.isServerNavigation && this.searchKeyEvent) {\n if (this.searchKeyEvent.action === 'down' || this.searchKeyEvent.action === 'up') {\n this.isServerNavigation = false;\n this.updateUpDownAction(this.searchKeyEvent);\n }\n else if (this.searchKeyEvent.action === 'home' || this.searchKeyEvent.action === 'end') {\n this.isServerNavigation = false;\n this.updateHomeEndAction(this.searchKeyEvent);\n }\n }\n if (this.beforePopupOpen) {\n this.invokeRenderPopup();\n }\n if (this.getModuleName() !== 'dropdownlist') {\n this.onActionComplete(this.ulElement, this.listData);\n }\n }\n else if (data != null && this.listData !== data) {\n this.listData = data;\n this.initRemoteRender = false;\n }\n };\n DropDownList.prototype.renderHightSearch = function () {\n // update high light search \n };\n DropDownList.prototype.updateclientItemData = function (data) {\n this.listData = data;\n };\n DropDownList.prototype.initValueItemData = function (selectData) {\n this.itemData = selectData;\n this.previousValue = this.value;\n this.initial = false;\n };\n DropDownList.prototype.serverUpdateListElement = function (data, popupEle) {\n this.listData = data;\n if (this.ulElement) {\n this.liCollections = this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n }\n };\n /**\n * Hides the popup if it is in an open state.\n * @returns void.\n */\n DropDownList.prototype.hidePopup = function (e) {\n var isHeader = (this.headerTemplate) ? true : false;\n var isFooter = (this.headerTemplate) ? true : false;\n this.DropDownBaseresetBlazorTemplates(false, false, false, false, false, isHeader, isFooter);\n if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n if (!isNullOrUndefined(this.index)) {\n var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);\n this.selectedLI = this.liCollections[this.index] || element;\n if (this.selectedLI) {\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.closePopup();\n var dataItem = this.getItemData();\n var isSelectVal = this.isServerBlazor ? !isNullOrUndefined(this.value) : !isNullOrUndefined(this.selectedLI);\n if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n isSelectVal && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clearAll(e);\n }\n };\n /**\n * Sets the focus on the component for interaction.\n * @returns void.\n */\n DropDownList.prototype.focusIn = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus(e);\n };\n /**\n * Moves the focus from the component if the component is already focused.\n * @returns void.\n */\n DropDownList.prototype.focusOut = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isTyped = true;\n this.hidePopup(e);\n if (this.targetElement()) {\n this.targetElement().blur();\n }\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownList.prototype.destroy = function () {\n this.isActive = false;\n // tslint:disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n if (!this.isServerBlazor || (this.popupObj && document.body.contains(this.popupObj.element))) {\n this.hidePopup();\n }\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n if (this.isServerBlazor) {\n if ((this.fields.groupBy) && !this.isGroupChecking) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n }\n }\n }\n if (!this.isServerBlazor) {\n if (this.element && !this.element.classList.contains('e-' + this.getModuleName())) {\n return;\n }\n if (this.inputElement) {\n var attrArray = ['readonly', 'aria-disabled', 'aria-placeholder',\n 'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',\n 'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',\n 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];\n for (var i = 0; i < attrArray.length; i++) {\n this.inputElement.removeAttribute(attrArray[i]);\n }\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n }\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownList.prototype.getItems = function () {\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n return this.ulElement ? _super.prototype.getItems.call(this) : [];\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n * @blazorType object\n */\n DropDownList.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /**\n * Allows you to clear the selected values from the component.\n * @returns void.\n */\n DropDownList.prototype.clear = function () {\n this.value = null;\n };\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], DropDownList.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], DropDownList.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], DropDownList.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"focus\", void 0);\n DropDownList = __decorate([\n NotifyPropertyChanges\n ], DropDownList);\n return DropDownList;\n}(DropDownBase));\nexport { DropDownList };\n","// a string of all valid unicode whitespaces\nmodule.exports = '\\u0009\\u000A\\u000B\\u000C\\u000D\\u0020\\u00A0\\u1680\\u2000\\u2001\\u2002' +\n '\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200A\\u202F\\u205F\\u3000\\u2028\\u2029\\uFEFF';\n","var requireObjectCoercible = require('../internals/require-object-coercible');\nvar whitespaces = require('../internals/whitespaces');\n\nvar whitespace = '[' + whitespaces + ']';\nvar ltrim = RegExp('^' + whitespace + whitespace + '*');\nvar rtrim = RegExp(whitespace + whitespace + '*$');\n\n// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation\nvar createMethod = function (TYPE) {\n return function ($this) {\n var string = String(requireObjectCoercible($this));\n if (TYPE & 1) string = string.replace(ltrim, '');\n if (TYPE & 2) string = string.replace(rtrim, '');\n return string;\n };\n};\n\nmodule.exports = {\n // `String.prototype.{ trimLeft, trimStart }` methods\n // https://tc39.es/ecma262/#sec-string.prototype.trimstart\n start: createMethod(1),\n // `String.prototype.{ trimRight, trimEnd }` methods\n // https://tc39.es/ecma262/#sec-string.prototype.trimend\n end: createMethod(2),\n // `String.prototype.trim` method\n // https://tc39.es/ecma262/#sec-string.prototype.trim\n trim: createMethod(3)\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})();\n/**\n * Worksheets class\n * @private\n */\nvar Worksheets = /** @class */ (function (_super) {\n __extends(Worksheets, _super);\n function Worksheets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return Worksheets;\n}(Array));\nexport { Worksheets };\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})();\n/**\n * Worksheet class\n * @private\n */\nvar Worksheet = /** @class */ (function () {\n function Worksheet() {\n this.isSummaryRowBelow = true;\n this.showGridLines = true;\n this.enableRtl = false;\n }\n return Worksheet;\n}());\nexport { Worksheet };\n/**\n * Hyperlink class\n * @private\n */\nvar HyperLink = /** @class */ (function () {\n function HyperLink() {\n }\n return HyperLink;\n}());\nexport { HyperLink };\n/**\n * Grouping class\n * @private\n */\nvar Grouping = /** @class */ (function () {\n function Grouping() {\n }\n return Grouping;\n}());\nexport { Grouping };\n/**\n * FreezePane class\n * @private\n */\nvar FreezePane = /** @class */ (function () {\n function FreezePane() {\n }\n return FreezePane;\n}());\nexport { FreezePane };\n/**\n * MergeCell\n * @private\n */\nvar MergeCell = /** @class */ (function () {\n function MergeCell() {\n }\n return MergeCell;\n}());\nexport { MergeCell };\n/**\n * MergeCells class\n * @private\n */\nvar MergeCells = /** @class */ (function (_super) {\n __extends(MergeCells, _super);\n function MergeCells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (mergeCell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var mCell = _a[_i];\n if (MergeCells.isIntersecting(mCell, mergeCell)) {\n var intersectingCell = new MergeCell();\n intersectingCell.x = Math.min(mCell.x, mergeCell.x);\n intersectingCell.y = Math.min(mCell.Y, mergeCell.y);\n intersectingCell.width = Math.max(mCell.Width + mCell.X, mergeCell.width + mergeCell.x);\n intersectingCell.height = Math.max(mCell.Height + mCell.Y, mergeCell.height + mergeCell.y);\n intersectingCell.ref = (_this[count].ref.split(':')[0]) + ':' + (mergeCell.ref.split(':')[1]);\n _this[count] = intersectingCell;\n mergeCell = intersectingCell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(mergeCell);\n }\n return mergeCell;\n };\n return _this;\n }\n MergeCells.isIntersecting = function (base, compare) {\n return (base.x <= compare.x + compare.width)\n && (compare.x <= base.x + base.width)\n && (base.y <= compare.y + compare.height)\n && (compare.y <= base.y + base.height);\n };\n return MergeCells;\n}(Array));\nexport { MergeCells };\n","/**\n * CellStyle class\n * @private\n */\nvar CellStyle = /** @class */ (function () {\n function CellStyle() {\n this.numFmtId = 0;\n this.backColor = 'none';\n this.fontName = 'Calibri';\n this.fontSize = 10.5;\n this.fontColor = '#000000';\n this.italic = false;\n this.bold = false;\n this.underline = false;\n this.wrapText = false;\n this.hAlign = 'general';\n this.vAlign = 'bottom';\n this.indent = 0;\n this.rotation = 0;\n this.numberFormat = 'GENERAL';\n this.type = 'datetime';\n this.borders = new Borders();\n this.isGlobalStyle = false;\n }\n return CellStyle;\n}());\nexport { CellStyle };\n/**\n * Font Class\n * @private\n */\nvar Font = /** @class */ (function () {\n function Font() {\n this.sz = 10.5;\n this.name = 'Calibri';\n this.u = false;\n this.b = false;\n this.i = false;\n this.color = 'FF000000';\n }\n return Font;\n}());\nexport { Font };\n/**\n * CellXfs class\n * @private\n */\nvar CellXfs = /** @class */ (function () {\n function CellXfs() {\n }\n return CellXfs;\n}());\nexport { CellXfs };\n/**\n * Alignment class\n * @private\n */\nvar Alignment = /** @class */ (function () {\n function Alignment() {\n }\n return Alignment;\n}());\nexport { Alignment };\n/**\n * CellStyleXfs class\n * @private\n */\nvar CellStyleXfs = /** @class */ (function () {\n function CellStyleXfs() {\n }\n return CellStyleXfs;\n}());\nexport { CellStyleXfs };\n/**\n * CellStyles class\n * @private\n */\nvar CellStyles = /** @class */ (function () {\n function CellStyles() {\n this.name = 'Normal';\n this.xfId = 0;\n }\n return CellStyles;\n}());\nexport { CellStyles };\n/**\n * NumFmt class\n * @private\n */\nvar NumFmt = /** @class */ (function () {\n function NumFmt(id, code) {\n this.numFmtId = id;\n this.formatCode = code;\n }\n return NumFmt;\n}());\nexport { NumFmt };\n/**\n * Border class\n * @private\n */\nvar Border = /** @class */ (function () {\n function Border(mLine, mColor) {\n this.lineStyle = mLine;\n this.color = mColor;\n }\n return Border;\n}());\nexport { Border };\n/**\n * Borders class\n * @private\n */\nvar Borders = /** @class */ (function () {\n function Borders() {\n this.left = new Border('none', '#FFFFFF');\n this.right = new Border('none', '#FFFFFF');\n this.top = new Border('none', '#FFFFFF');\n this.bottom = new Border('none', '#FFFFFF');\n this.all = new Border('none', '#FFFFFF');\n }\n return Borders;\n}());\nexport { Borders };\n","/**\n * Column class\n * @private\n */\nvar Column = /** @class */ (function () {\n function Column() {\n }\n return Column;\n}());\nexport { Column };\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})();\n/**\n * Row class\n * @private\n */\nvar Row = /** @class */ (function () {\n function Row() {\n }\n return Row;\n}());\nexport { Row };\n/**\n * Rows class\n * @private\n */\nvar Rows = /** @class */ (function (_super) {\n __extends(Rows, _super);\n function Rows() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (row) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var r = _a[_i];\n if (r.index === row.index) {\n _this[count] = row;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(row);\n }\n };\n return _this;\n }\n return Rows;\n}(Array));\nexport { Rows };\n","/**\n * Image class\n * @private\n */\nvar Image = /** @class */ (function () {\n function Image() {\n }\n return Image;\n}());\nexport { Image };\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})();\n/**\n * Worksheet class\n * @private\n */\nvar Cell = /** @class */ (function () {\n function Cell() {\n }\n return Cell;\n}());\nexport { Cell };\n/**\n * Cells class\n * @private\n */\nvar Cells = /** @class */ (function (_super) {\n __extends(Cells, _super);\n function Cells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (cell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var c = _a[_i];\n if (c.index === cell.index) {\n _this[count] = cell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(cell);\n }\n };\n return _this;\n }\n return Cells;\n}(Array));\nexport { Cells };\n","/**\n * Encoding class: Contains the details about encoding type, whether to write a Unicode byte order mark (BOM).\n * ```typescript\n * let encoding : Encoding = new Encoding();\n * encoding.type = 'Utf8';\n * encoding.getBytes('Encoding', 0, 5);\n * ```\n */\nvar Encoding = /** @class */ (function () {\n /**\n * Initializes a new instance of the Encoding class. A parameter specifies whether to write a Unicode byte order mark\n * @param {boolean} includeBom?-true to specify that a Unicode byte order mark is written; otherwise, false.\n */\n function Encoding(includeBom) {\n this.emitBOM = true;\n this.encodingType = 'Ansi';\n this.initBOM(includeBom);\n }\n Object.defineProperty(Encoding.prototype, \"includeBom\", {\n /**\n * Gets a value indicating whether to write a Unicode byte order mark\n * @returns boolean- true to specify that a Unicode byte order mark is written; otherwise, false\n */\n get: function () {\n return this.emitBOM;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Encoding.prototype, \"type\", {\n /**\n * Gets the encoding type.\n * @returns EncodingType\n */\n get: function () {\n return this.encodingType;\n },\n /**\n * Sets the encoding type.\n * @param {EncodingType} value\n */\n set: function (value) {\n this.encodingType = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Initialize the includeBom to emit BOM or Not\n * @param {boolean} includeBom\n */\n Encoding.prototype.initBOM = function (includeBom) {\n if (includeBom === undefined || includeBom === null) {\n this.emitBOM = true;\n }\n else {\n this.emitBOM = includeBom;\n }\n };\n /**\n * Calculates the number of bytes produced by encoding the characters in the specified string\n * @param {string} chars - The string containing the set of characters to encode\n * @returns {number} - The number of bytes produced by encoding the specified characters\n */\n Encoding.prototype.getByteCount = function (chars) {\n var byteCount = 0;\n validateNullOrUndefined(chars, 'string');\n if (chars === '') {\n var byte = this.utf8Len(chars.charCodeAt(0));\n return byte;\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n return this.getByteCountInternal(chars, 0, chars.length);\n };\n /**\n * Return the Byte of character\n * @param {number} codePoint\n * @returns {number}\n */\n Encoding.prototype.utf8Len = function (codePoint) {\n var bytes = codePoint <= 0x7F ? 1 :\n codePoint <= 0x7FF ? 2 :\n codePoint <= 0xFFFF ? 3 :\n codePoint <= 0x1FFFFF ? 4 : 0;\n return bytes;\n };\n /**\n * for 4 byte character return surrogate pair true, otherwise false\n * @param {number} codeUnit\n * @returns {boolean}\n */\n Encoding.prototype.isHighSurrogate = function (codeUnit) {\n return codeUnit >= 0xD800 && codeUnit <= 0xDBFF;\n };\n /**\n * for 4byte character generate the surrogate pair\n * @param {number} highCodeUnit\n * @param {number} lowCodeUnit\n */\n Encoding.prototype.toCodepoint = function (highCodeUnit, lowCodeUnit) {\n highCodeUnit = (0x3FF & highCodeUnit) << 10;\n var u = highCodeUnit | (0x3FF & lowCodeUnit);\n return u + 0x10000;\n };\n /**\n * private method to get the byte count for specific charindex and count\n * @param {string} chars\n * @param {number} charIndex\n * @param {number} charCount\n */\n Encoding.prototype.getByteCountInternal = function (chars, charIndex, charCount) {\n var byteCount = 0;\n if (this.encodingType === 'Utf8' || this.encodingType === 'Unicode') {\n var isUtf8 = this.encodingType === 'Utf8';\n for (var i = 0; i < charCount; i++) {\n var charCode = chars.charCodeAt(isUtf8 ? charIndex : charIndex++);\n if (this.isHighSurrogate(charCode)) {\n if (isUtf8) {\n var high = charCode;\n var low = chars.charCodeAt(++charIndex);\n byteCount += this.utf8Len(this.toCodepoint(high, low));\n }\n else {\n byteCount += 4;\n ++i;\n }\n }\n else {\n if (isUtf8) {\n byteCount += this.utf8Len(charCode);\n }\n else {\n byteCount += 2;\n }\n }\n if (isUtf8) {\n charIndex++;\n }\n }\n return byteCount;\n }\n else {\n byteCount = charCount;\n return byteCount;\n }\n };\n /**\n * Encodes a set of characters from the specified string into the ArrayBuffer.\n * @param {string} s- The string containing the set of characters to encode\n * @param {number} charIndex-The index of the first character to encode.\n * @param {number} charCount- The number of characters to encode.\n * @returns {ArrayBuffer} - The ArrayBuffer that contains the resulting sequence of bytes.\n */\n Encoding.prototype.getBytes = function (s, charIndex, charCount) {\n validateNullOrUndefined(s, 'string');\n validateNullOrUndefined(charIndex, 'charIndex');\n validateNullOrUndefined(charCount, 'charCount');\n if (charIndex < 0 || charCount < 0) {\n throw new RangeError('Argument Out Of Range Exception: charIndex or charCount is less than zero');\n }\n if (s.length - charIndex < charCount) {\n throw new RangeError('Argument Out Of Range Exception: charIndex and charCount do not denote a valid range in string');\n }\n var bytes;\n if (s === '') {\n bytes = new ArrayBuffer(0);\n return bytes;\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n var byteCount = this.getByteCountInternal(s, charIndex, charCount);\n switch (this.type) {\n case 'Utf8':\n bytes = this.getBytesOfUtf8Encoding(byteCount, s, charIndex, charCount);\n return bytes;\n case 'Unicode':\n bytes = this.getBytesOfUnicodeEncoding(byteCount, s, charIndex, charCount);\n return bytes;\n default:\n bytes = this.getBytesOfAnsiEncoding(byteCount, s, charIndex, charCount);\n return bytes;\n }\n };\n /**\n * Decodes a sequence of bytes from the specified ArrayBuffer into the string.\n * @param {ArrayBuffer} bytes- The ArrayBuffer containing the sequence of bytes to decode.\n * @param {number} index- The index of the first byte to decode.\n * @param {number} count- The number of bytes to decode.\n * @returns {string} - The string that contains the resulting set of characters.\n */\n Encoding.prototype.getString = function (bytes, index, count) {\n validateNullOrUndefined(bytes, 'bytes');\n validateNullOrUndefined(index, 'index');\n validateNullOrUndefined(count, 'count');\n if (index < 0 || count < 0) {\n throw new RangeError('Argument Out Of Range Exception: index or count is less than zero');\n }\n if (bytes.byteLength - index < count) {\n throw new RangeError('Argument Out Of Range Exception: index and count do not denote a valid range in bytes');\n }\n if (bytes.byteLength === 0 || count === 0) {\n return '';\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n var out = '';\n var byteCal = new Uint8Array(bytes);\n switch (this.type) {\n case 'Utf8':\n var s = this.getStringOfUtf8Encoding(byteCal, index, count);\n return s;\n case 'Unicode':\n var byteUnicode = new Uint16Array(bytes);\n out = this.getStringofUnicodeEncoding(byteUnicode, index, count);\n return out;\n default:\n var j = index;\n for (var i = 0; i < count; i++) {\n var c = byteCal[j];\n out += String.fromCharCode(c); // 1 byte(ASCII) character \n j++;\n }\n return out;\n }\n };\n Encoding.prototype.getBytesOfAnsiEncoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var bufview = new Uint8Array(bytes);\n var k = 0;\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(charIndex++);\n if (charcode < 0x800) {\n bufview[k] = charcode;\n }\n else {\n bufview[k] = 63; //replacement character '?'\n }\n k++;\n }\n return bytes;\n };\n Encoding.prototype.getBytesOfUtf8Encoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var uint = new Uint8Array(bytes);\n var index = charIndex;\n var j = 0;\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(index);\n if (charcode <= 0x7F) { // 1 byte character 2^7\n uint[j] = charcode;\n }\n else if (charcode < 0x800) { // 2 byte character 2^11\n uint[j] = 0xc0 | (charcode >> 6);\n uint[++j] = 0x80 | (charcode & 0x3f);\n }\n else if ((charcode < 0xd800 || charcode >= 0xe000)) { // 3 byte character 2^16 \n uint[j] = 0xe0 | (charcode >> 12);\n uint[++j] = 0x80 | ((charcode >> 6) & 0x3f);\n uint[++j] = 0x80 | (charcode & 0x3f);\n }\n else {\n uint[j] = 0xef;\n uint[++j] = 0xbf;\n uint[++j] = 0xbd; // U+FFFE \"replacement character\"\n }\n ++j;\n ++index;\n }\n return bytes;\n };\n Encoding.prototype.getBytesOfUnicodeEncoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var uint16 = new Uint16Array(bytes);\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(i);\n uint16[i] = charcode;\n }\n return bytes;\n };\n Encoding.prototype.getStringOfUtf8Encoding = function (byteCal, index, count) {\n var j = 0;\n var i = index;\n var s = '';\n for (j; j < count; j++) {\n var c = byteCal[i++];\n while (i > byteCal.length) {\n return s;\n }\n if (c > 127) {\n if (c > 191 && c < 224 && i < count) {\n c = (c & 31) << 6 | byteCal[i] & 63;\n }\n else if (c > 223 && c < 240 && i < byteCal.byteLength) {\n c = (c & 15) << 12 | (byteCal[i] & 63) << 6 | byteCal[++i] & 63;\n }\n else if (c > 239 && c < 248 && i < byteCal.byteLength) {\n c = (c & 7) << 18 | (byteCal[i] & 63) << 12 | (byteCal[++i] & 63) << 6 | byteCal[++i] & 63;\n }\n ++i;\n }\n s += String.fromCharCode(c); // 1 byte(ASCII) character \n }\n return s;\n };\n Encoding.prototype.getStringofUnicodeEncoding = function (byteUni, index, count) {\n if (count > byteUni.length) {\n throw new RangeError('ArgumentOutOfRange_Count');\n }\n var byte16 = new Uint16Array(count);\n var out = '';\n for (var i = 0; i < count && i < byteUni.length; i++) {\n byte16[i] = byteUni[index++];\n }\n out = String.fromCharCode.apply(null, byte16);\n return out;\n };\n /**\n * To clear the encoding instance\n * @return {void}\n */\n Encoding.prototype.destroy = function () {\n this.emitBOM = undefined;\n this.encodingType = undefined;\n };\n return Encoding;\n}());\nexport { Encoding };\n/**\n * To check the object is null or undefined and throw error if it is null or undefined\n * @param {Object} value - object to check is null or undefined\n * @return {boolean}\n * @throws {ArgumentException} - if the value is null or undefined\n * @private\n */\nexport function validateNullOrUndefined(value, message) {\n if (value === null || value === undefined) {\n throw new Error('ArgumentException: ' + message + ' cannot be null or undefined');\n }\n}\n","import { Encoding } from '@syncfusion/ej2-file-utils';\n/**\n * array literal codes\n */\nvar ARR_LITERAL_CODES = new Int16Array(286);\nvar ARR_LITERAL_LENGTHS = new Uint8Array(286);\nvar ARR_DISTANCE_CODES = new Int16Array(30);\nvar ARR_DISTANCE_LENGTHS = new Uint8Array(30);\n/**\n * represent compression stream writer\n * ```typescript\n * let compressedWriter = new CompressedStreamWriter();\n * let text: string = 'Hello world!!!';\n * compressedWriter.write(text, 0, text.length);\n * compressedWriter.close();\n * ```\n */\nvar CompressedStreamWriter = /** @class */ (function () {\n /**\n * Initializes compressor and writes ZLib header if needed.\n * @param {boolean} noWrap - optional if true, ZLib header and checksum will not be written.\n */\n function CompressedStreamWriter(noWrap) {\n this.pendingBuffer = new Uint8Array(1 << 16);\n this.pendingBufLength = 0;\n this.pendingBufCache = 0;\n this.pendingBufBitsInCache = 0;\n this.bufferPosition = 0;\n this.extraBits = 0;\n this.currentHash = 0;\n this.matchStart = 0;\n this.matchLength = 0;\n this.matchPrevAvail = false;\n this.blockStart = 0;\n this.stringStart = 0;\n this.lookAhead = 0;\n this.totalBytesIn = 0;\n this.inputOffset = 0;\n this.inputEnd = 0;\n this.windowSize = 1 << 15;\n this.windowMask = this.windowSize - 1;\n this.hashSize = 1 << 15;\n this.hashMask = this.hashSize - 1;\n this.hashShift = Math.floor((15 + 3 - 1) / 3);\n this.maxDist = this.windowSize - 262;\n this.checkSum = 1;\n this.noWrap = false;\n if (!CompressedStreamWriter.isHuffmanTreeInitiated) {\n CompressedStreamWriter.initHuffmanTree();\n CompressedStreamWriter.isHuffmanTreeInitiated = true;\n }\n this.treeLiteral = new CompressorHuffmanTree(this, 286, 257, 15);\n this.treeDistances = new CompressorHuffmanTree(this, 30, 1, 15);\n this.treeCodeLengths = new CompressorHuffmanTree(this, 19, 4, 7);\n this.arrDistances = new Uint16Array((1 << 14));\n this.arrLiterals = new Uint8Array((1 << 14));\n this.stream = [];\n this.dataWindow = new Uint8Array(2 * this.windowSize);\n this.hashHead = new Int16Array(this.hashSize);\n this.hashPrevious = new Int16Array(this.windowSize);\n this.blockStart = this.stringStart = 1;\n this.noWrap = noWrap;\n if (!noWrap) {\n this.writeZLibHeader();\n }\n }\n Object.defineProperty(CompressedStreamWriter.prototype, \"compressedData\", {\n /**\n * get compressed data\n */\n get: function () {\n return this.stream;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CompressedStreamWriter.prototype, \"getCompressedString\", {\n get: function () {\n var compressedString = '';\n if (this.stream !== undefined) {\n for (var i = 0; i < this.stream.length; i++) {\n compressedString += String.fromCharCode.apply(null, this.stream[i]);\n }\n }\n return compressedString;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Compresses data and writes it to the stream.\n * @param {Uint8Array} data - data to compress\n * @param {number} offset - offset in data\n * @param {number} length - length of the data\n * @returns {void}\n */\n CompressedStreamWriter.prototype.write = function (data, offset, length) {\n if (data === undefined || data === null) {\n throw new Error('ArgumentException: data cannot null or undefined');\n }\n var end = offset + length;\n if (0 > offset || offset > end || end > data.length) {\n throw new Error('ArgumentOutOfRangeException: Offset or length is incorrect');\n }\n if (typeof data === 'string') {\n var encode = new Encoding(false);\n encode.type = 'Utf8';\n data = new Uint8Array(encode.getBytes(data, 0, data.length));\n end = offset + data.length;\n }\n this.inputBuffer = data;\n this.inputOffset = offset;\n this.inputEnd = end;\n if (!this.noWrap) {\n this.checkSum = ChecksumCalculator.checksumUpdate(this.checkSum, this.inputBuffer, this.inputOffset, end);\n }\n while (!(this.inputEnd === this.inputOffset) || !(this.pendingBufLength === 0)) {\n this.pendingBufferFlush();\n this.compressData(false);\n }\n };\n /**\n * write ZLib header to the compressed data\n * @return {void}\n */\n CompressedStreamWriter.prototype.writeZLibHeader = function () {\n /* Initialize header.*/\n var headerDate = (8 + (7 << 4)) << 8;\n /* Save compression level.*/\n headerDate |= ((5 >> 2) & 3) << 6;\n /* Align header.*/\n headerDate += 31 - (headerDate % 31);\n /* Write header to stream.*/\n this.pendingBufferWriteShortBytes(headerDate);\n };\n /**\n * Write Most Significant Bytes in to stream\n * @param {number} s - check sum value\n */\n CompressedStreamWriter.prototype.pendingBufferWriteShortBytes = function (s) {\n this.pendingBuffer[this.pendingBufLength++] = s >> 8;\n this.pendingBuffer[this.pendingBufLength++] = s;\n };\n CompressedStreamWriter.prototype.compressData = function (finish) {\n var success;\n do {\n this.fillWindow();\n var canFlush = (finish && this.inputEnd === this.inputOffset);\n success = this.compressSlow(canFlush, finish);\n } while (this.pendingBufLength === 0 && success);\n return success;\n };\n CompressedStreamWriter.prototype.compressSlow = function (flush, finish) {\n if (this.lookAhead < 262 && !flush) {\n return false;\n }\n while (this.lookAhead >= 262 || flush) {\n if (this.lookAhead === 0) {\n return this.lookAheadCompleted(finish);\n }\n if (this.stringStart >= 2 * this.windowSize - 262) {\n this.slideWindow();\n }\n var prevMatch = this.matchStart;\n var prevLen = this.matchLength;\n if (this.lookAhead >= 3) {\n this.discardMatch();\n }\n if (prevLen >= 3 && this.matchLength <= prevLen) {\n prevLen = this.matchPreviousBest(prevMatch, prevLen);\n }\n else {\n this.matchPreviousAvailable();\n }\n if (this.bufferPosition >= (1 << 14)) {\n return this.huffmanIsFull(finish);\n }\n }\n return true;\n };\n CompressedStreamWriter.prototype.discardMatch = function () {\n var hashHead = this.insertString();\n if (hashHead !== 0 && this.stringStart - hashHead <= this.maxDist && this.findLongestMatch(hashHead)) {\n if (this.matchLength <= 5 && (this.matchLength === 3 && this.stringStart - this.matchStart > 4096)) {\n this.matchLength = 3 - 1;\n }\n }\n };\n CompressedStreamWriter.prototype.matchPreviousAvailable = function () {\n if (this.matchPrevAvail) {\n this.huffmanTallyLit(this.dataWindow[this.stringStart - 1] & 0xff);\n }\n this.matchPrevAvail = true;\n this.stringStart++;\n this.lookAhead--;\n };\n CompressedStreamWriter.prototype.matchPreviousBest = function (prevMatch, prevLen) {\n this.huffmanTallyDist(this.stringStart - 1 - prevMatch, prevLen);\n prevLen -= 2;\n do {\n this.stringStart++;\n this.lookAhead--;\n if (this.lookAhead >= 3) {\n this.insertString();\n }\n } while (--prevLen > 0);\n this.stringStart++;\n this.lookAhead--;\n this.matchPrevAvail = false;\n this.matchLength = 3 - 1;\n return prevLen;\n };\n CompressedStreamWriter.prototype.lookAheadCompleted = function (finish) {\n if (this.matchPrevAvail) {\n this.huffmanTallyLit(this.dataWindow[this.stringStart - 1] & 0xff);\n }\n this.matchPrevAvail = false;\n this.huffmanFlushBlock(this.dataWindow, this.blockStart, this.stringStart - this.blockStart, finish);\n this.blockStart = this.stringStart;\n return false;\n };\n CompressedStreamWriter.prototype.huffmanIsFull = function (finish) {\n var len = this.stringStart - this.blockStart;\n if (this.matchPrevAvail) {\n len--;\n }\n var lastBlock = (finish && this.lookAhead === 0 && !this.matchPrevAvail);\n this.huffmanFlushBlock(this.dataWindow, this.blockStart, len, lastBlock);\n this.blockStart += len;\n return !lastBlock;\n };\n CompressedStreamWriter.prototype.fillWindow = function () {\n if (this.stringStart >= this.windowSize + this.maxDist) {\n this.slideWindow();\n }\n while (this.lookAhead < 262 && this.inputOffset < this.inputEnd) {\n var more = 2 * this.windowSize - this.lookAhead - this.stringStart;\n if (more > this.inputEnd - this.inputOffset) {\n more = this.inputEnd - this.inputOffset;\n }\n this.dataWindow.set(this.inputBuffer.subarray(this.inputOffset, this.inputOffset + more), this.stringStart + this.lookAhead);\n this.inputOffset += more;\n this.totalBytesIn += more;\n this.lookAhead += more;\n }\n if (this.lookAhead >= 3) {\n this.updateHash();\n }\n };\n CompressedStreamWriter.prototype.slideWindow = function () {\n this.dataWindow.set(this.dataWindow.subarray(this.windowSize, this.windowSize + this.windowSize), 0);\n this.matchStart -= this.windowSize;\n this.stringStart -= this.windowSize;\n this.blockStart -= this.windowSize;\n for (var i = 0; i < this.hashSize; ++i) {\n var m = this.hashHead[i] & 0xffff;\n this.hashHead[i] = (((m >= this.windowSize) ? (m - this.windowSize) : 0));\n }\n for (var i = 0; i < this.windowSize; i++) {\n var m = this.hashPrevious[i] & 0xffff;\n this.hashPrevious[i] = ((m >= this.windowSize) ? (m - this.windowSize) : 0);\n }\n };\n CompressedStreamWriter.prototype.insertString = function () {\n var match;\n var hash = ((this.currentHash << this.hashShift) ^ this.dataWindow[this.stringStart + (3 - 1)]) & this.hashMask;\n this.hashPrevious[this.stringStart & this.windowMask] = match = this.hashHead[hash];\n this.hashHead[hash] = this.stringStart;\n this.currentHash = hash;\n return match & 0xffff;\n };\n CompressedStreamWriter.prototype.findLongestMatch = function (curMatch) {\n var chainLen = 4096;\n var niceLen = 258;\n var scan = this.stringStart;\n var match;\n var bestEnd = this.stringStart + this.matchLength;\n var bestLength = Math.max(this.matchLength, 3 - 1);\n var limit = Math.max(this.stringStart - this.maxDist, 0);\n var stringEnd = this.stringStart + 258 - 1;\n var scanEnd1 = this.dataWindow[bestEnd - 1];\n var scanEnd = this.dataWindow[bestEnd];\n var data = this.dataWindow;\n if (bestLength >= 32) {\n chainLen >>= 2;\n }\n if (niceLen > this.lookAhead) {\n niceLen = this.lookAhead;\n }\n do {\n if (data[curMatch + bestLength] !== scanEnd ||\n data[curMatch + bestLength - 1] !== scanEnd1 ||\n data[curMatch] !== data[scan] ||\n data[curMatch + 1] !== data[scan + 1]) {\n continue;\n }\n match = curMatch + 2;\n scan += 2;\n /* tslint:disable */\n while (data[++scan] === data[++match] && data[++scan] === data[++match] &&\n data[++scan] === data[++match] && data[++scan] === data[++match] &&\n data[++scan] === data[++match] && data[++scan] === data[++match] &&\n data[++scan] === data[++match] && data[++scan] === data[++match] && scan < stringEnd) {\n /* tslint:disable */\n }\n if (scan > bestEnd) {\n this.matchStart = curMatch;\n bestEnd = scan;\n bestLength = scan - this.stringStart;\n if (bestLength >= niceLen) {\n break;\n }\n scanEnd1 = data[bestEnd - 1];\n scanEnd = data[bestEnd];\n }\n scan = this.stringStart;\n } while ((curMatch = (this.hashPrevious[curMatch & this.windowMask] & 0xffff)) > limit && --chainLen !== 0);\n this.matchLength = Math.min(bestLength, this.lookAhead);\n return this.matchLength >= 3;\n };\n CompressedStreamWriter.prototype.updateHash = function () {\n this.currentHash = (this.dataWindow[this.stringStart] << this.hashShift) ^ this.dataWindow[this.stringStart + 1];\n };\n CompressedStreamWriter.prototype.huffmanTallyLit = function (literal) {\n this.arrDistances[this.bufferPosition] = 0;\n this.arrLiterals[this.bufferPosition++] = literal;\n this.treeLiteral.codeFrequencies[literal]++;\n return this.bufferPosition >= (1 << 14);\n };\n CompressedStreamWriter.prototype.huffmanTallyDist = function (dist, len) {\n this.arrDistances[this.bufferPosition] = dist;\n this.arrLiterals[this.bufferPosition++] = (len - 3);\n var lc = this.huffmanLengthCode(len - 3);\n this.treeLiteral.codeFrequencies[lc]++;\n if (lc >= 265 && lc < 285) {\n this.extraBits += Math.floor((lc - 261) / 4);\n }\n var dc = this.huffmanDistanceCode(dist - 1);\n this.treeDistances.codeFrequencies[dc]++;\n if (dc >= 4) {\n this.extraBits += Math.floor((dc / 2 - 1));\n }\n return this.bufferPosition >= (1 << 14);\n };\n CompressedStreamWriter.prototype.huffmanFlushBlock = function (stored, storedOffset, storedLength, lastBlock) {\n this.treeLiteral.codeFrequencies[256]++;\n this.treeLiteral.buildTree();\n this.treeDistances.buildTree();\n this.treeLiteral.calculateBLFreq(this.treeCodeLengths);\n this.treeDistances.calculateBLFreq(this.treeCodeLengths);\n this.treeCodeLengths.buildTree();\n var blTreeCodes = 4;\n for (var i = 18; i > blTreeCodes; i--) {\n if (this.treeCodeLengths.codeLengths[CompressorHuffmanTree.huffCodeLengthOrders[i]] > 0) {\n blTreeCodes = i + 1;\n }\n }\n var opt_len = 14 + blTreeCodes * 3 + this.treeCodeLengths.getEncodedLength() +\n this.treeLiteral.getEncodedLength() + this.treeDistances.getEncodedLength() + this.extraBits;\n var static_len = this.extraBits;\n for (var i = 0; i < 286; i++) {\n static_len += this.treeLiteral.codeFrequencies[i] * ARR_LITERAL_LENGTHS[i];\n }\n for (var i = 0; i < 30; i++) {\n static_len += this.treeDistances.codeFrequencies[i] * ARR_DISTANCE_LENGTHS[i];\n }\n if (opt_len >= static_len) {\n // Force static trees.\n opt_len = static_len;\n }\n if (storedOffset >= 0 && storedLength + 4 < opt_len >> 3) {\n this.huffmanFlushStoredBlock(stored, storedOffset, storedLength, lastBlock);\n }\n else if (opt_len == static_len) {\n // Encode with static tree.\n this.pendingBufferWriteBits((1 << 1) + (lastBlock ? 1 : 0), 3);\n this.treeLiteral.setStaticCodes(ARR_LITERAL_CODES, ARR_LITERAL_LENGTHS);\n this.treeDistances.setStaticCodes(ARR_DISTANCE_CODES, ARR_DISTANCE_LENGTHS);\n this.huffmanCompressBlock();\n this.huffmanReset();\n }\n else {\n this.pendingBufferWriteBits((2 << 1) + (lastBlock ? 1 : 0), 3);\n this.huffmanSendAllTrees(blTreeCodes);\n this.huffmanCompressBlock();\n this.huffmanReset();\n }\n };\n CompressedStreamWriter.prototype.huffmanFlushStoredBlock = function (stored, storedOffset, storedLength, lastBlock) {\n this.pendingBufferWriteBits((0 << 1) + (lastBlock ? 1 : 0), 3);\n this.pendingBufferAlignToByte();\n this.pendingBufferWriteShort(storedLength);\n this.pendingBufferWriteShort(~storedLength);\n this.pendingBufferWriteByteBlock(stored, storedOffset, storedLength);\n this.huffmanReset();\n };\n CompressedStreamWriter.prototype.huffmanLengthCode = function (len) {\n if (len === 255) {\n return 285;\n }\n var code = 257;\n while (len >= 8) {\n code += 4;\n len >>= 1;\n }\n return code + len;\n };\n CompressedStreamWriter.prototype.huffmanDistanceCode = function (distance) {\n var code = 0;\n while (distance >= 4) {\n code += 2;\n distance >>= 1;\n }\n return code + distance;\n };\n CompressedStreamWriter.prototype.huffmanSendAllTrees = function (blTreeCodes) {\n this.treeCodeLengths.buildCodes();\n this.treeLiteral.buildCodes();\n this.treeDistances.buildCodes();\n this.pendingBufferWriteBits(this.treeLiteral.treeLength - 257, 5);\n this.pendingBufferWriteBits(this.treeDistances.treeLength - 1, 5);\n this.pendingBufferWriteBits(blTreeCodes - 4, 4);\n for (var rank = 0; rank < blTreeCodes; rank++) {\n this.pendingBufferWriteBits(this.treeCodeLengths.codeLengths[CompressorHuffmanTree.huffCodeLengthOrders[rank]], 3);\n }\n this.treeLiteral.writeTree(this.treeCodeLengths);\n this.treeDistances.writeTree(this.treeCodeLengths);\n };\n CompressedStreamWriter.prototype.huffmanReset = function () {\n this.bufferPosition = 0;\n this.extraBits = 0;\n this.treeLiteral.reset();\n this.treeDistances.reset();\n this.treeCodeLengths.reset();\n };\n CompressedStreamWriter.prototype.huffmanCompressBlock = function () {\n for (var i = 0; i < this.bufferPosition; i++) {\n var literalLen = this.arrLiterals[i] & 255;\n var dist = this.arrDistances[i];\n if (dist-- !== 0) {\n var lc = this.huffmanLengthCode(literalLen);\n this.treeLiteral.writeCodeToStream(lc);\n var bits = Math.floor((lc - 261) / 4);\n if (bits > 0 && bits <= 5) {\n this.pendingBufferWriteBits(literalLen & ((1 << bits) - 1), bits);\n }\n var dc = this.huffmanDistanceCode(dist);\n this.treeDistances.writeCodeToStream(dc);\n bits = Math.floor(dc / 2 - 1);\n if (bits > 0) {\n this.pendingBufferWriteBits(dist & ((1 << bits) - 1), bits);\n }\n }\n else {\n this.treeLiteral.writeCodeToStream(literalLen);\n }\n }\n this.treeLiteral.writeCodeToStream(256);\n };\n /**\n * write bits in to internal buffer\n * @param {number} b - source of bits\n * @param {number} count - count of bits to write\n */\n CompressedStreamWriter.prototype.pendingBufferWriteBits = function (b, count) {\n var uint = new Uint32Array(1);\n uint[0] = this.pendingBufCache | (b << this.pendingBufBitsInCache);\n this.pendingBufCache = uint[0];\n this.pendingBufBitsInCache += count;\n this.pendingBufferFlushBits();\n };\n CompressedStreamWriter.prototype.pendingBufferFlush = function (isClose) {\n this.pendingBufferFlushBits();\n if (this.pendingBufLength > 0) {\n var array = new Uint8Array(this.pendingBufLength);\n array.set(this.pendingBuffer.subarray(0, this.pendingBufLength), 0);\n this.stream.push(array);\n }\n this.pendingBufLength = 0;\n };\n CompressedStreamWriter.prototype.pendingBufferFlushBits = function () {\n var result = 0;\n while (this.pendingBufBitsInCache >= 8 && this.pendingBufLength < (1 << 16)) {\n this.pendingBuffer[this.pendingBufLength++] = this.pendingBufCache;\n this.pendingBufCache >>= 8;\n this.pendingBufBitsInCache -= 8;\n result++;\n }\n return result;\n };\n CompressedStreamWriter.prototype.pendingBufferWriteByteBlock = function (data, offset, length) {\n var array = data.subarray(offset, offset + length);\n this.pendingBuffer.set(array, this.pendingBufLength);\n this.pendingBufLength += length;\n };\n CompressedStreamWriter.prototype.pendingBufferWriteShort = function (s) {\n this.pendingBuffer[this.pendingBufLength++] = s;\n this.pendingBuffer[this.pendingBufLength++] = (s >> 8);\n };\n CompressedStreamWriter.prototype.pendingBufferAlignToByte = function () {\n if (this.pendingBufBitsInCache > 0) {\n this.pendingBuffer[this.pendingBufLength++] = this.pendingBufCache;\n }\n this.pendingBufCache = 0;\n this.pendingBufBitsInCache = 0;\n };\n /**\n * Huffman Tree literal calculation\n * @private\n */\n CompressedStreamWriter.initHuffmanTree = function () {\n var i = 0;\n while (i < 144) {\n ARR_LITERAL_CODES[i] = CompressorHuffmanTree.bitReverse((0x030 + i) << 8);\n ARR_LITERAL_LENGTHS[i++] = 8;\n }\n while (i < 256) {\n ARR_LITERAL_CODES[i] = CompressorHuffmanTree.bitReverse((0x190 - 144 + i) << 7);\n ARR_LITERAL_LENGTHS[i++] = 9;\n }\n while (i < 280) {\n ARR_LITERAL_CODES[i] = CompressorHuffmanTree.bitReverse((0x000 - 256 + i) << 9);\n ARR_LITERAL_LENGTHS[i++] = 7;\n }\n while (i < 286) {\n ARR_LITERAL_CODES[i] = CompressorHuffmanTree.bitReverse((0x0c0 - 280 + i) << 8);\n ARR_LITERAL_LENGTHS[i++] = 8;\n }\n for (i = 0; i < 30; i++) {\n ARR_DISTANCE_CODES[i] = CompressorHuffmanTree.bitReverse(i << 11);\n ARR_DISTANCE_LENGTHS[i] = 5;\n }\n };\n /**\n * close the stream and write all pending buffer in to stream\n * @returns {void}\n */\n CompressedStreamWriter.prototype.close = function () {\n do {\n this.pendingBufferFlush(true);\n if (!this.compressData(true)) {\n this.pendingBufferFlush(true);\n this.pendingBufferAlignToByte();\n if (!this.noWrap) {\n this.pendingBufferWriteShortBytes(this.checkSum >> 16);\n this.pendingBufferWriteShortBytes(this.checkSum & 0xffff);\n }\n this.pendingBufferFlush(true);\n }\n } while (!(this.inputEnd === this.inputOffset) ||\n !(this.pendingBufLength === 0));\n };\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n CompressedStreamWriter.prototype.destroy = function () {\n this.stream = [];\n this.stream = undefined;\n this.pendingBuffer = undefined;\n this.treeLiteral = undefined;\n this.treeDistances = undefined;\n this.treeCodeLengths = undefined;\n this.arrLiterals = undefined;\n this.arrDistances = undefined;\n this.hashHead = undefined;\n this.hashPrevious = undefined;\n this.dataWindow = undefined;\n this.inputBuffer = undefined;\n this.pendingBufLength = undefined;\n this.pendingBufCache = undefined;\n this.pendingBufBitsInCache = undefined;\n this.bufferPosition = undefined;\n this.extraBits = undefined;\n this.currentHash = undefined;\n this.matchStart = undefined;\n this.matchLength = undefined;\n this.matchPrevAvail = undefined;\n this.blockStart = undefined;\n this.stringStart = undefined;\n this.lookAhead = undefined;\n this.totalBytesIn = undefined;\n this.inputOffset = undefined;\n this.inputEnd = undefined;\n this.windowSize = undefined;\n this.windowMask = undefined;\n this.hashSize = undefined;\n this.hashMask = undefined;\n this.hashShift = undefined;\n this.maxDist = undefined;\n this.checkSum = undefined;\n this.noWrap = undefined;\n };\n CompressedStreamWriter.isHuffmanTreeInitiated = false;\n return CompressedStreamWriter;\n}());\nexport { CompressedStreamWriter };\n/**\n * represent the Huffman Tree\n */\nvar CompressorHuffmanTree = /** @class */ (function () {\n /**\n * Create new Huffman Tree\n * @param {CompressedStreamWriter} writer instance\n * @param {number} elementCount - element count\n * @param {number} minCodes - minimum count\n * @param {number} maxLength - maximum count\n */\n function CompressorHuffmanTree(writer, elementCount, minCodes, maxLength) {\n this.writer = writer;\n this.codeMinCount = minCodes;\n this.maxLength = maxLength;\n this.codeFrequency = new Uint16Array(elementCount);\n this.lengthCount = new Int32Array(maxLength);\n }\n Object.defineProperty(CompressorHuffmanTree.prototype, \"treeLength\", {\n get: function () {\n return this.codeCount;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CompressorHuffmanTree.prototype, \"codeLengths\", {\n get: function () {\n return this.codeLength;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CompressorHuffmanTree.prototype, \"codeFrequencies\", {\n get: function () {\n return this.codeFrequency;\n },\n enumerable: true,\n configurable: true\n });\n CompressorHuffmanTree.prototype.setStaticCodes = function (codes, lengths) {\n var temp = new Int16Array(codes.length);\n temp.set(codes, 0);\n this.codes = temp;\n var lengthTemp = new Uint8Array(lengths.length);\n lengthTemp.set(lengths, 0);\n this.codeLength = lengthTemp;\n };\n /**\n * reset all code data in tree\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.reset = function () {\n for (var i = 0; i < this.codeFrequency.length; i++) {\n this.codeFrequency[i] = 0;\n }\n this.codes = undefined;\n this.codeLength = undefined;\n };\n /**\n * write code to the compressor output stream\n * @param {number} code - code to be written\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.writeCodeToStream = function (code) {\n this.writer.pendingBufferWriteBits(this.codes[code] & 0xffff, this.codeLength[code]);\n };\n /**\n * calculate code from their frequencies\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.buildCodes = function () {\n var nextCode = new Int32Array(this.maxLength);\n this.codes = new Int16Array(this.codeCount);\n var code = 0;\n for (var bitsCount = 0; bitsCount < this.maxLength; bitsCount++) {\n nextCode[bitsCount] = code;\n code += this.lengthCount[bitsCount] << (15 - bitsCount);\n }\n for (var i = 0; i < this.codeCount; i++) {\n var bits = this.codeLength[i];\n if (bits > 0) {\n this.codes[i] = CompressorHuffmanTree.bitReverse(nextCode[bits - 1]);\n nextCode[bits - 1] += 1 << (16 - bits);\n }\n }\n };\n CompressorHuffmanTree.bitReverse = function (value) {\n return (CompressorHuffmanTree.reverseBits[value & 15] << 12\n | CompressorHuffmanTree.reverseBits[(value >> 4) & 15] << 8\n | CompressorHuffmanTree.reverseBits[(value >> 8) & 15] << 4\n | CompressorHuffmanTree.reverseBits[value >> 12]);\n };\n /**\n * calculate length of compressed data\n * @returns {number}\n */\n CompressorHuffmanTree.prototype.getEncodedLength = function () {\n var len = 0;\n for (var i = 0; i < this.codeFrequency.length; i++) {\n len += this.codeFrequency[i] * this.codeLength[i];\n }\n return len;\n };\n /**\n * calculate code frequencies\n * @param {CompressorHuffmanTree} blTree\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.calculateBLFreq = function (blTree) {\n var maxCount;\n var minCount;\n var count;\n var curLen = -1;\n var i = 0;\n while (i < this.codeCount) {\n count = 1;\n var nextLen = this.codeLength[i];\n if (nextLen === 0) {\n maxCount = 138;\n minCount = 3;\n }\n else {\n maxCount = 6;\n minCount = 3;\n if (curLen !== nextLen) {\n blTree.codeFrequency[nextLen]++;\n count = 0;\n }\n }\n curLen = nextLen;\n i++;\n while (i < this.codeCount && curLen === this.codeLength[i]) {\n i++;\n if (++count >= maxCount) {\n break;\n }\n }\n if (count < minCount) {\n blTree.codeFrequency[curLen] += count;\n }\n else if (curLen !== 0) {\n blTree.codeFrequency[16]++;\n }\n else if (count <= 10) {\n blTree.codeFrequency[17]++;\n }\n else {\n blTree.codeFrequency[18]++;\n }\n }\n };\n /**\n * @param {CompressorHuffmanTree} blTree - write tree to output stream\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.writeTree = function (blTree) {\n var maxRepeatCount;\n var minRepeatCount;\n var currentRepeatCount;\n var currentCodeLength = -1;\n var i = 0;\n while (i < this.codeCount) {\n currentRepeatCount = 1;\n var nextLen = this.codeLength[i];\n if (nextLen === 0) {\n maxRepeatCount = 138;\n minRepeatCount = 3;\n }\n else {\n maxRepeatCount = 6;\n minRepeatCount = 3;\n if (currentCodeLength !== nextLen) {\n blTree.writeCodeToStream(nextLen);\n currentRepeatCount = 0;\n }\n }\n currentCodeLength = nextLen;\n i++;\n while (i < this.codeCount && currentCodeLength === this.codeLength[i]) {\n i++;\n if (++currentRepeatCount >= maxRepeatCount) {\n break;\n }\n }\n if (currentRepeatCount < minRepeatCount) {\n while (currentRepeatCount-- > 0) {\n blTree.writeCodeToStream(currentCodeLength);\n }\n }\n else if (currentCodeLength !== 0) {\n blTree.writeCodeToStream(16);\n this.writer.pendingBufferWriteBits(currentRepeatCount - 3, 2);\n }\n else if (currentRepeatCount <= 10) {\n blTree.writeCodeToStream(17);\n this.writer.pendingBufferWriteBits(currentRepeatCount - 3, 3);\n }\n else {\n blTree.writeCodeToStream(18);\n this.writer.pendingBufferWriteBits(currentRepeatCount - 11, 7);\n }\n }\n };\n /**\n * Build huffman tree\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.buildTree = function () {\n var codesCount = this.codeFrequency.length;\n var arrTree = new Int32Array(codesCount);\n var treeLength = 0;\n var maxCount = 0;\n for (var n = 0; n < codesCount; n++) {\n var freq = this.codeFrequency[n];\n if (freq !== 0) {\n var pos = treeLength++;\n var pPos = 0;\n while (pos > 0 && this.codeFrequency[arrTree[pPos = Math.floor((pos - 1) / 2)]] > freq) {\n arrTree[pos] = arrTree[pPos];\n pos = pPos;\n }\n arrTree[pos] = n;\n maxCount = n;\n }\n }\n while (treeLength < 2) {\n arrTree[treeLength++] =\n (maxCount < 2) ? ++maxCount : 0;\n }\n this.codeCount = Math.max(maxCount + 1, this.codeMinCount);\n var leafsCount = treeLength;\n var nodesCount = leafsCount;\n var child = new Int32Array(4 * treeLength - 2);\n var values = new Int32Array(2 * treeLength - 1);\n for (var i = 0; i < treeLength; i++) {\n var node = arrTree[i];\n var iIndex = 2 * i;\n child[iIndex] = node;\n child[iIndex + 1] = -1;\n values[i] = (this.codeFrequency[node] << 8);\n arrTree[i] = i;\n }\n this.constructHuffmanTree(arrTree, treeLength, values, nodesCount, child);\n this.buildLength(child);\n };\n CompressorHuffmanTree.prototype.constructHuffmanTree = function (arrTree, treeLength, values, nodesCount, child) {\n do {\n var first = arrTree[0];\n var last = arrTree[--treeLength];\n var lastVal = values[last];\n var pPos = 0;\n var path = 1;\n while (path < treeLength) {\n if (path + 1 < treeLength && values[arrTree[path]] > values[arrTree[path + 1]]) {\n path++;\n }\n arrTree[pPos] = arrTree[path];\n pPos = path;\n path = pPos * 2 + 1;\n }\n while ((path = pPos) > 0 && values[arrTree[pPos = Math.floor((path - 1) / 2)]] > lastVal) {\n arrTree[path] = arrTree[pPos];\n }\n arrTree[path] = last;\n var second = arrTree[0];\n last = nodesCount++;\n child[2 * last] = first;\n child[2 * last + 1] = second;\n var minDepth = Math.min(values[first] & 0xff, values[second] & 0xff);\n values[last] = lastVal = values[first] + values[second] - minDepth + 1;\n pPos = 0;\n path = 1;\n /* tslint:disable */\n while (path < treeLength) {\n if (path + 1 < treeLength && values[arrTree[path]] > values[arrTree[path + 1]]) {\n path++;\n }\n arrTree[pPos] = arrTree[path];\n pPos = path;\n path = pPos * 2 + 1;\n } /* tslint:disable */\n while ((path = pPos) > 0 && values[arrTree[pPos = Math.floor((path - 1) / 2)]] > lastVal) {\n arrTree[path] = arrTree[pPos];\n }\n arrTree[path] = last;\n } while (treeLength > 1);\n };\n CompressorHuffmanTree.prototype.buildLength = function (child) {\n this.codeLength = new Uint8Array(this.codeFrequency.length);\n var numNodes = Math.floor(child.length / 2);\n var numLeafs = Math.floor((numNodes + 1) / 2);\n var overflow = 0;\n for (var i = 0; i < this.maxLength; i++) {\n this.lengthCount[i] = 0;\n }\n overflow = this.calculateOptimalCodeLength(child, overflow, numNodes);\n if (overflow === 0) {\n return;\n }\n var iIncreasableLength = this.maxLength - 1;\n do {\n while (this.lengthCount[--iIncreasableLength] === 0) {\n /* tslint:disable */\n }\n do {\n this.lengthCount[iIncreasableLength]--;\n this.lengthCount[++iIncreasableLength]++;\n overflow -= (1 << (this.maxLength - 1 - iIncreasableLength));\n } while (overflow > 0 && iIncreasableLength < this.maxLength - 1);\n } while (overflow > 0);\n this.recreateTree(child, overflow, numLeafs);\n };\n CompressorHuffmanTree.prototype.recreateTree = function (child, overflow, numLeafs) {\n this.lengthCount[this.maxLength - 1] += overflow;\n this.lengthCount[this.maxLength - 2] -= overflow;\n var nodePtr = 2 * numLeafs;\n for (var bits = this.maxLength; bits !== 0; bits--) {\n var n = this.lengthCount[bits - 1];\n while (n > 0) {\n var childPtr = 2 * child[nodePtr++];\n if (child[childPtr + 1] === -1) {\n this.codeLength[child[childPtr]] = bits;\n n--;\n }\n }\n }\n };\n CompressorHuffmanTree.prototype.calculateOptimalCodeLength = function (child, overflow, numNodes) {\n var lengths = new Int32Array(numNodes);\n lengths[numNodes - 1] = 0;\n for (var i = numNodes - 1; i >= 0; i--) {\n var childIndex = 2 * i + 1;\n if (child[childIndex] !== -1) {\n var bitLength = lengths[i] + 1;\n if (bitLength > this.maxLength) {\n bitLength = this.maxLength;\n overflow++;\n }\n lengths[child[childIndex - 1]] = lengths[child[childIndex]] = bitLength;\n }\n else {\n var bitLength = lengths[i];\n this.lengthCount[bitLength - 1]++;\n this.codeLength[child[childIndex - 1]] = lengths[i];\n }\n }\n return overflow;\n };\n CompressorHuffmanTree.reverseBits = [0, 8, 4, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15];\n CompressorHuffmanTree.huffCodeLengthOrders = [16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15];\n return CompressorHuffmanTree;\n}());\nexport { CompressorHuffmanTree };\n/**\n * Checksum calculator, based on Adler32 algorithm.\n */\nvar ChecksumCalculator = /** @class */ (function () {\n function ChecksumCalculator() {\n }\n /**\n * Updates checksum by calculating checksum of the\n * given buffer and adding it to current value.\n * @param {number} checksum - current checksum.\n * @param {Uint8Array} buffer - data byte array.\n * @param {number} offset - offset in the buffer.\n * @param {number} length - length of data to be used from the stream.\n * @returns {number}\n */\n ChecksumCalculator.checksumUpdate = function (checksum, buffer, offset, length) {\n var uint = new Uint32Array(1);\n uint[0] = checksum;\n var checksum_uint = uint[0];\n var s1 = uint[0] = checksum_uint & 65535;\n var s2 = uint[0] = checksum_uint >> ChecksumCalculator.checkSumBitOffset;\n while (length > 0) {\n var steps = Math.min(length, ChecksumCalculator.checksumIterationCount);\n length -= steps;\n while (--steps >= 0) {\n s1 = s1 + (uint[0] = (buffer[offset++] & 255));\n s2 = s2 + s1;\n }\n s1 %= ChecksumCalculator.checksumBase;\n s2 %= ChecksumCalculator.checksumBase;\n }\n checksum_uint = (s2 << ChecksumCalculator.checkSumBitOffset) | s1;\n return checksum_uint;\n };\n ChecksumCalculator.checkSumBitOffset = 16;\n ChecksumCalculator.checksumBase = 65521;\n ChecksumCalculator.checksumIterationCount = 3800;\n return ChecksumCalculator;\n}());\nexport { ChecksumCalculator };\n","/**\n * Save class provide method to save file\n * ```typescript\n * let blob : Blob = new Blob([''], { type: 'text/plain' });\n * Save.save('fileName.txt',blob);\n */\nvar Save = /** @class */ (function () {\n /**\n * Initialize new instance of {save}\n */\n function Save() {\n // tslint:disable\n }\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n * @param {boolean} isMicrosoftBrowser- specify whether microsoft browser or not\n * @returns {void}\n */\n Save.save = function (fileName, buffer) {\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('ArgumentException: fileName cannot be undefined, null or empty');\n }\n var extension = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);\n var mimeType = this.getMimeType(extension);\n if (mimeType !== '') {\n buffer = new Blob([buffer], { type: mimeType });\n }\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(buffer, fileName);\n }\n else {\n var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n this.saveInternal(fileName, extension, buffer, downloadLink, 'download' in downloadLink);\n }\n };\n Save.saveInternal = function (fileName, extension, buffer, downloadLink, hasDownloadAttribute) {\n if (hasDownloadAttribute) {\n downloadLink.download = fileName;\n var dataUrl_1 = window.URL.createObjectURL(buffer);\n downloadLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n downloadLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n dataUrl_1 = undefined;\n });\n }\n else {\n if (extension !== 'docx' && extension !== 'xlsx') {\n var url = window.URL.createObjectURL(buffer);\n var isPopupBlocked = window.open(url, '_blank');\n if (!isPopupBlocked) {\n window.location.href = url;\n }\n }\n else {\n var reader_1 = new FileReader();\n reader_1.onloadend = function () {\n var isPopupBlocked = window.open(reader_1.result, '_blank');\n if (!isPopupBlocked) {\n window.location.href = reader_1.result;\n }\n };\n reader_1.readAsDataURL(buffer);\n }\n }\n };\n /**\n *\n * @param {string} extension - get mime type of the specified extension\n * @private\n */\n Save.getMimeType = function (extension) {\n var mimeType = '';\n switch (extension) {\n case 'html':\n mimeType = 'text/html';\n break;\n case 'pdf':\n mimeType = 'application/pdf';\n break;\n case 'docx':\n mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';\n break;\n case 'xlsx':\n mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';\n break;\n case 'txt':\n mimeType = 'text/plain';\n break;\n }\n return mimeType;\n };\n return Save;\n}());\nexport { Save };\n","import { CompressedStreamWriter } from './compression-writer';\nimport { Save } from '@syncfusion/ej2-file-utils';\nvar CRC32TABLE = [];\n/**\n * class provide compression library\n * ```typescript\n * let archive = new ZipArchive();\n * archive.compressionLevel = 'Normal';\n * let archiveItem = new ZipArchiveItem(archive, 'directoryName\\fileName.txt');\n * archive.addItem(archiveItem);\n * archive.save(fileName.zip);\n * ```\n */\nvar ZipArchive = /** @class */ (function () {\n /**\n * constructor for creating ZipArchive instance\n */\n function ZipArchive() {\n if (CRC32TABLE.length === 0) {\n ZipArchive.initCrc32Table();\n }\n this.files = [];\n this.level = 'Normal';\n Save.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n }\n Object.defineProperty(ZipArchive.prototype, \"compressionLevel\", {\n /**\n * gets compression level\n */\n get: function () {\n return this.level;\n },\n /**\n * sets compression level\n */\n set: function (level) {\n this.level = level;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ZipArchive.prototype, \"length\", {\n /**\n * gets items count\n */\n get: function () {\n if (this.files === undefined) {\n return 0;\n }\n return this.files.length;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * add new item to archive\n * @param {ZipArchiveItem} item - item to be added\n * @returns {void}\n */\n ZipArchive.prototype.addItem = function (item) {\n if (item === null || item === undefined) {\n throw new Error('ArgumentException: item cannot be null or undefined');\n }\n for (var i = 0; i < this.files.length; i++) {\n var file = this.files[i];\n if (file instanceof ZipArchiveItem) {\n if (file.name === item.name) {\n throw new Error('item with same name already exist');\n }\n }\n }\n this.files.push(item);\n };\n /**\n * add new directory to archive\n * @param directoryName directoryName to be created\n * @returns {void}\n */\n ZipArchive.prototype.addDirectory = function (directoryName) {\n if (directoryName === null || directoryName === undefined) {\n throw new Error('ArgumentException: string cannot be null or undefined');\n }\n if (directoryName.length === 0) {\n throw new Error('ArgumentException: string cannot be empty');\n }\n if (directoryName.slice(-1) !== '/') {\n directoryName += '/';\n }\n if (this.files.indexOf(directoryName) !== -1) {\n throw new Error('item with same name already exist');\n }\n this.files.push(directoryName);\n };\n /**\n * gets item at specified index\n * @param {number} index - item index\n * @returns {ZipArchiveItem}\n */\n ZipArchive.prototype.getItem = function (index) {\n if (index >= 0 && index < this.files.length) {\n return this.files[index];\n }\n return undefined;\n };\n /**\n * determines whether an element is in the collection\n * @param {string | ZipArchiveItem} item - item to search\n * @returns {boolean}\n */\n ZipArchive.prototype.contains = function (item) {\n return this.files.indexOf(item) !== -1 ? true : false;\n };\n /**\n * save archive with specified file name\n * @param {string} fileName save archive with specified file name\n * @returns {Promise
}\n */\n ZipArchive.prototype.save = function (fileName) {\n if (fileName === null || fileName === undefined || fileName.length === 0) {\n throw new Error('ArgumentException: fileName cannot be null or undefined');\n }\n if (this.files.length === 0) {\n throw new Error('InvalidOperation');\n }\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n zipArchive.saveInternal(fileName, false).then(function () {\n resolve(zipArchive);\n });\n });\n };\n /**\n * Save archive as blob\n * @return {Promise}\n */\n ZipArchive.prototype.saveAsBlob = function () {\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n zipArchive.saveInternal('', true).then(function (blob) {\n resolve(blob);\n });\n });\n };\n ZipArchive.prototype.saveInternal = function (fileName, skipFileSave) {\n var _this = this;\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n var zipData = [];\n var dirLength = 0;\n for (var i = 0; i < zipArchive.files.length; i++) {\n var compressedObject = _this.getCompressedData(_this.files[i]);\n compressedObject.then(function (data) {\n dirLength = zipArchive.constructZippedObject(zipData, data, dirLength, data.isDirectory);\n if (zipData.length === zipArchive.files.length) {\n var blob = zipArchive.writeZippedContent(fileName, zipData, dirLength, skipFileSave);\n resolve(blob);\n }\n });\n }\n });\n };\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n ZipArchive.prototype.destroy = function () {\n if (this.files !== undefined && this.files.length > 0) {\n for (var i = 0; i < this.files.length; i++) {\n var file = this.files[i];\n if (file instanceof ZipArchiveItem) {\n file.destroy();\n }\n file = undefined;\n }\n this.files = [];\n }\n this.files = undefined;\n this.level = undefined;\n };\n ZipArchive.prototype.getCompressedData = function (item) {\n var zipArchive = this;\n var promise = new Promise(function (resolve, reject) {\n if (item instanceof ZipArchiveItem) {\n var reader_1 = new FileReader();\n reader_1.onload = function () {\n var input = new Uint8Array(reader_1.result);\n var data = {\n fileName: item.name, crc32Value: 0, compressedData: [],\n compressedSize: undefined, uncompressedDataSize: input.length, compressionType: undefined,\n isDirectory: false\n };\n if (zipArchive.level === 'Normal') {\n zipArchive.compressData(input, data, CRC32TABLE);\n var length_1 = 0;\n for (var i = 0; i < data.compressedData.length; i++) {\n length_1 += data.compressedData[i].length;\n }\n data.compressedSize = length_1;\n data.compressionType = '\\x08\\x00'; //Deflated = 8\n }\n else {\n data.compressedSize = input.length;\n data.crc32Value = zipArchive.calculateCrc32Value(0, input, CRC32TABLE);\n data.compressionType = '\\x00\\x00'; // Stored = 0\n data.compressedData.push(input);\n }\n resolve(data);\n };\n reader_1.readAsArrayBuffer(item.data);\n }\n else {\n var data = {\n fileName: item, crc32Value: 0, compressedData: '', compressedSize: 0, uncompressedDataSize: 0,\n compressionType: '\\x00\\x00', isDirectory: true\n };\n resolve(data);\n }\n });\n return promise;\n };\n ZipArchive.prototype.compressData = function (input, data, crc32Table) {\n var compressor = new CompressedStreamWriter(true);\n var currentIndex = 0;\n var nextIndex = 0;\n do {\n if (currentIndex >= input.length) {\n compressor.close();\n break;\n }\n nextIndex = Math.min(input.length, currentIndex + 16384);\n var subArray = input.subarray(currentIndex, nextIndex);\n data.crc32Value = this.calculateCrc32Value(data.crc32Value, subArray, crc32Table);\n compressor.write(subArray, 0, nextIndex - currentIndex);\n currentIndex = nextIndex;\n } while (currentIndex <= input.length);\n data.compressedData = compressor.compressedData;\n compressor.destroy();\n };\n ZipArchive.prototype.constructZippedObject = function (zipParts, data, dirLength, isDirectory) {\n var extFileAttr = 0;\n var date = new Date();\n if (isDirectory) {\n extFileAttr = extFileAttr | 0x00010; // directory flag\n }\n extFileAttr = extFileAttr | (0 & 0x3F);\n var header = this.writeHeader(data, date);\n var localHeader = 'PK\\x03\\x04' + header + data.fileName;\n var centralDir = this.writeCentralDirectory(data, header, dirLength, extFileAttr);\n zipParts.push({ localHeader: localHeader, centralDir: centralDir, compressedData: data });\n return dirLength + localHeader.length + data.compressedSize;\n };\n ZipArchive.prototype.writeHeader = function (data, date) {\n var zipHeader = '';\n zipHeader += '\\x0A\\x00' + '\\x00\\x00'; // version needed to extract & general purpose bit flag\n zipHeader += data.compressionType; // compression method Deflate=8,Stored=0\n zipHeader += this.getBytes(this.getModifiedTime(date), 2); // last modified Time\n zipHeader += this.getBytes(this.getModifiedDate(date), 2); // last modified date\n zipHeader += this.getBytes(data.crc32Value, 4); // crc-32 value\n zipHeader += this.getBytes(data.compressedSize, 4); // compressed file size\n zipHeader += this.getBytes(data.uncompressedDataSize, 4); // uncompressed file size\n zipHeader += this.getBytes(data.fileName.length, 2); // file name length\n zipHeader += this.getBytes(0, 2); // extra field length\n return zipHeader;\n };\n ZipArchive.prototype.writeZippedContent = function (fileName, zipData, localDirLen, skipFileSave) {\n var cenDirLen = 0;\n var buffer = [];\n for (var i = 0; i < zipData.length; i++) {\n var item = zipData[i];\n cenDirLen += item.centralDir.length;\n buffer.push(this.getArrayBuffer(item.localHeader));\n while (item.compressedData.compressedData.length) {\n buffer.push(item.compressedData.compressedData.shift().buffer);\n }\n }\n for (var i = 0; i < zipData.length; i++) {\n buffer.push(this.getArrayBuffer(zipData[i].centralDir));\n }\n buffer.push(this.getArrayBuffer(this.writeFooter(zipData, cenDirLen, localDirLen)));\n var blob = new Blob(buffer, { type: 'application/zip' });\n if (!skipFileSave) {\n Save.save(fileName, blob);\n }\n return blob;\n };\n ZipArchive.prototype.writeCentralDirectory = function (data, localHeader, offset, externalFileAttribute) {\n var directoryHeader = 'PK\\x01\\x02' +\n this.getBytes(0x0014, 2) + localHeader + // inherit from file header\n this.getBytes(0, 2) + // comment length\n '\\x00\\x00' + '\\x00\\x00' + // internal file attributes \n this.getBytes(externalFileAttribute, 4) + // external file attributes\n this.getBytes(offset, 4) + // local fileHeader relative offset\n data.fileName;\n return directoryHeader;\n };\n ZipArchive.prototype.writeFooter = function (zipData, centralLength, localLength) {\n var dirEnd = 'PK\\x05\\x06' + '\\x00\\x00' + '\\x00\\x00' +\n this.getBytes(zipData.length, 2) + this.getBytes(zipData.length, 2) +\n this.getBytes(centralLength, 4) + this.getBytes(localLength, 4) +\n this.getBytes(0, 2);\n return dirEnd;\n };\n ZipArchive.prototype.getArrayBuffer = function (input) {\n var a = new Uint8Array(input.length);\n for (var j = 0; j < input.length; ++j) {\n a[j] = input.charCodeAt(j) & 0xFF;\n }\n return a.buffer;\n };\n ZipArchive.prototype.getBytes = function (value, offset) {\n var bytes = '';\n for (var i = 0; i < offset; i++) {\n bytes += String.fromCharCode(value & 0xff);\n value = value >>> 8;\n }\n return bytes;\n };\n ZipArchive.prototype.getModifiedTime = function (date) {\n var modTime = date.getHours();\n modTime = modTime << 6;\n modTime = modTime | date.getMinutes();\n modTime = modTime << 5;\n return modTime = modTime | date.getSeconds() / 2;\n };\n ZipArchive.prototype.getModifiedDate = function (date) {\n var modiDate = date.getFullYear() - 1980;\n modiDate = modiDate << 4;\n modiDate = modiDate | (date.getMonth() + 1);\n modiDate = modiDate << 5;\n return modiDate = modiDate | date.getDate();\n };\n ZipArchive.prototype.calculateCrc32Value = function (crc32Value, input, crc32Table) {\n crc32Value ^= -1;\n for (var i = 0; i < input.length; i++) {\n crc32Value = (crc32Value >>> 8) ^ crc32Table[(crc32Value ^ input[i]) & 0xFF];\n }\n return (crc32Value ^ (-1));\n };\n /**\n * construct cyclic redundancy code table\n * @private\n */\n ZipArchive.initCrc32Table = function () {\n var i;\n for (var j = 0; j < 256; j++) {\n i = j;\n for (var k = 0; k < 8; k++) {\n i = ((i & 1) ? (0xEDB88320 ^ (i >>> 1)) : (i >>> 1));\n }\n CRC32TABLE[j] = i;\n }\n };\n return ZipArchive;\n}());\nexport { ZipArchive };\n/**\n * Class represent unique ZipArchive item\n * ```typescript\n * let archiveItem = new ZipArchiveItem(archive, 'directoryName\\fileName.txt');\n * ```\n */\nvar ZipArchiveItem = /** @class */ (function () {\n /**\n * constructor for creating {ZipArchiveItem} instance\n * @param {Blob|ArrayBuffer} data file data\n * @param {itemName} itemName absolute file path\n */\n function ZipArchiveItem(data, itemName) {\n if (data === null || data === undefined) {\n throw new Error('ArgumentException: data cannot be null or undefined');\n }\n if (itemName === null || itemName === undefined) {\n throw new Error('ArgumentException: string cannot be null or undefined');\n }\n if (itemName.length === 0) {\n throw new Error('string cannot be empty');\n }\n this.data = data;\n this.name = itemName;\n }\n Object.defineProperty(ZipArchiveItem.prototype, \"name\", {\n /**\n * Get the name of archive item\n * @returns string\n */\n get: function () {\n return this.fileName;\n },\n /**\n * Set the name of archive item\n * @param {string} value\n */\n set: function (value) {\n this.fileName = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n ZipArchiveItem.prototype.destroy = function () {\n this.fileName = undefined;\n this.data = undefined;\n };\n return ZipArchiveItem;\n}());\nexport { ZipArchiveItem };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization } from '@syncfusion/ej2-base';\n// import { IValueFormatter } from '../base/interface';\n/**\n * ValueFormatter class to globalize the value.\n * @private\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n // if (!isNullOrUndefined(cultureName)) {\n // this.intl.culture = cultureName;\n // }\n }\n ValueFormatter.prototype.getFormatFunction = function (format, isServerRendered) {\n if (format.type) {\n if (isServerRendered) {\n format.isServerRendered = true;\n }\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n // public getParserFunction(format: NumberFormatOptions | DateFormatOptions): Function {\n // if ((format).type) {\n // return this.intl.getDateParser(format);\n // } else {\n // return this.intl.getNumberParser(format);\n // }\n // }\n // public fromView(value: string, format: Function, type?: string): string | number | Date {\n // if (type === 'date' || type === 'datetime' || type === 'number') {\n // return format(value);\n // } else {\n // return value;\n // }\n // }\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n // public setCulture(cultureName: string): void {\n // if (!isNullOrUndefined(cultureName)) {\n // setCulture(cultureName);\n // }\n // }\n /* tslint:disable:no-any */\n ValueFormatter.prototype.displayText = function (value, format, isServerRendered) {\n return this.toView(value, this.getFormatFunction(format, isServerRendered));\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { ValueFormatter } from './value-formatter';\n/**\n * CsvHelper class\n * @private\n */\nvar CsvHelper = /** @class */ (function () {\n /* tslint:disable:no-any */\n function CsvHelper(json, separator) {\n this.csvStr = '';\n if (separator === null || separator === undefined) {\n this.separator = ',';\n }\n else {\n this.separator = separator;\n }\n this.formatter = new ValueFormatter();\n this.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n if (json.isServerRendered !== null && json.isServerRendered !== undefined) {\n this.isServerRendered = json.isServerRendered;\n }\n if (json.styles !== null && json.styles !== undefined) {\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined && json.styles[i].numberFormat !== undefined) {\n this.globalStyles.set(json.styles[i].name, json.styles[i].numberFormat);\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parseWorksheet(json.worksheets[0]);\n }\n //this.csvStr = 'a1,a2,a3\\nb1,b2,b3';\n }\n CsvHelper.prototype.parseWorksheet = function (json) {\n //Rows\n if (json.rows !== null && json.rows !== undefined) {\n this.parseRows(json.rows);\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRows = function (rows) {\n var count = 1;\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n //Row index\n if (row.index !== null && row.index !== undefined) {\n while (count < row.index) {\n this.csvStr += '\\n';\n count++;\n }\n this.parseRow(row);\n }\n else {\n throw Error('Row index is missing.');\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRow = function (row) {\n if (row.cells !== null && row.cells !== undefined) {\n var count = 1;\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n //cell index\n if (cell.index !== null && cell.index !== undefined) {\n while (count < cell.index) {\n this.csvStr += this.separator;\n count++;\n }\n this.parseCell(cell);\n }\n else {\n throw Error('Cell index is missing.');\n }\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseCell = function (cell) {\n var csv = this.csvStr;\n if (cell.value !== undefined) {\n if (cell.value instanceof Date) {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n try {\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: cell.style.numberFormat }, this.isServerRendered));\n }\n catch (error) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', format: cell.style.numberFormat }, this.isServerRendered));\n }\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n try {\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: this.globalStyles.get(cell.style.name) }, this.isServerRendered));\n }\n catch (error) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', format: this.globalStyles.get(cell.style.name) }, this.isServerRendered));\n }\n }\n else {\n csv += cell.value;\n }\n }\n else if (typeof (cell.value) === 'boolean') {\n csv += cell.value ? 'TRUE' : 'FALSE';\n }\n else if (typeof (cell.value) === 'number') {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: cell.style.numberFormat }, this.isServerRendered));\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: this.globalStyles.get(cell.style.name) }, this.isServerRendered));\n }\n else {\n csv += cell.value;\n }\n }\n else {\n csv += this.parseCellValue(cell.value);\n }\n }\n this.csvStr = csv;\n };\n CsvHelper.prototype.parseCellValue = function (value) {\n var val = '';\n var length = value.length;\n for (var start = 0; start < length; start++) {\n if (value[start] === '\\\"') {\n val += value[start].replace('\\\"', '\\\"\\\"');\n }\n else {\n val += value[start];\n }\n }\n value = val;\n if (value.indexOf(this.separator) !== -1 || value.indexOf('\\n') !== -1) {\n return value = '\\\"' + value + '\\\"';\n }\n else {\n return value;\n }\n };\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n */\n CsvHelper.prototype.save = function (fileName) {\n this.buffer = new Blob(['\\ufeff' + this.csvStr], { type: 'text/csv;charset=UTF-8' });\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(this.buffer, fileName);\n }\n else {\n var dataUrl_1 = window.URL.createObjectURL(this.buffer);\n var dwlLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n dwlLink.download = fileName;\n dwlLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n dwlLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n });\n }\n };\n CsvHelper.prototype.saveAsBlob = function () {\n return new Blob(['\\ufeff' + this.csvStr], { type: 'text/csv;charset=UTF-8' });\n };\n return CsvHelper;\n}());\nexport { CsvHelper };\n","/**\n * BlobHelper class\n * @private\n */\nvar BlobHelper = /** @class */ (function () {\n function BlobHelper() {\n /* tslint:disable:no-any */\n this.parts = [];\n }\n /* tslint:disable:no-any */\n BlobHelper.prototype.append = function (part) {\n this.parts.push(part);\n this.blob = undefined; // Invalidate the blob\n };\n BlobHelper.prototype.getBlob = function () {\n return new Blob(this.parts, { type: 'text/plain' });\n };\n return BlobHelper;\n}());\nexport { BlobHelper };\n","/**\n * AutoFilters class\n * @private\n */\nvar AutoFilters = /** @class */ (function () {\n function AutoFilters() {\n }\n return AutoFilters;\n}());\nexport { AutoFilters };\n","import { Worksheets } from './worksheets';\nimport { Worksheet, FreezePane, MergeCell, MergeCells, HyperLink, Grouping } from './worksheet';\nimport { CellStyle, Font, Borders, CellXfs, Alignment, NumFmt, CellStyleXfs, CellStyles } from './cell-style';\nimport { Column } from './column';\nimport { Row, Rows } from './row';\nimport { Image } from './image';\nimport { Cell, Cells } from './cell';\nimport { ZipArchive, ZipArchiveItem } from '@syncfusion/ej2-compression';\nimport { CsvHelper } from './csv-helper';\nimport { Internationalization, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { BlobHelper } from './blob-helper';\nimport { AutoFilters } from './auto-filters';\n/**\n * Workbook class\n */\nvar Workbook = /** @class */ (function () {\n /* tslint:disable:no-any */\n function Workbook(json, saveType, culture, currencyString, separator) {\n this.sharedStringCount = 0;\n this.unitsProportions = [\n 96 / 75.0,\n 96 / 300.0,\n 96,\n 96 / 25.4,\n 96 / 2.54,\n 1,\n 96 / 72.0,\n 96 / 72.0 / 12700,\n ];\n /* tslint:disable:no-any */\n this.hyperlinkStyle = { fontColor: '#0000FF', underline: true };\n if (culture !== undefined) {\n this.culture = culture;\n }\n else {\n this.culture = 'en-US';\n }\n if (currencyString !== undefined) {\n this.currency = currencyString;\n }\n else {\n this.currency = 'USD';\n }\n this.intl = new Internationalization(this.culture);\n this.mSaveType = saveType;\n if (saveType === 'xlsx') {\n this.mArchive = new ZipArchive();\n this.sharedString = [];\n this.mFonts = [];\n this.mBorders = [];\n this.mStyles = [];\n this.printTitles = new Map();\n this.cellStyles = new Map();\n this.mNumFmt = new Map();\n this.mFills = new Map();\n this.mStyles.push(new CellStyle());\n this.mFonts.push(new Font());\n /* tslint:disable */\n this.cellStyles.set('Normal', new CellStyles());\n /* tslint:enable */\n this.mCellXfs = [];\n this.mCellStyleXfs = [];\n this.drawingCount = 0;\n this.imageCount = 0;\n if (json.styles !== null && json.styles !== undefined) {\n /* tslint:disable-next-line:no-any */\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined) {\n if (!this.cellStyles.has(json.styles[i].name)) {\n var cellStyle = new CellStyle();\n cellStyle.isGlobalStyle = true;\n this.parserCellStyle(json.styles[i], cellStyle, 'none');\n var cellStylesIn = new CellStyles();\n cellStylesIn.name = cellStyle.name;\n cellStylesIn.xfId = (cellStyle.index - 1);\n this.cellStyles.set(cellStylesIn.name, cellStylesIn);\n /* tslint:disable-next-line:no-any */\n var tFormat = {};\n if (json.styles[i].numberFormat !== undefined) {\n tFormat.format = json.styles[i].numberFormat;\n }\n if (json.styles[i].type !== undefined) {\n tFormat.type = json.styles[i].type;\n }\n else {\n tFormat.type = 'datetime';\n }\n if (tFormat.format !== undefined) {\n this.globalStyles.set(json.styles[i].name, tFormat);\n }\n }\n else {\n throw Error('Style name ' + json.styles[i].name + ' is already existed');\n }\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parserWorksheets(json.worksheets);\n }\n else {\n throw Error('Worksheet is expected.');\n }\n // Parses the BuiltInProperties data to DOM. \n if (json.builtInProperties !== null && json.builtInProperties !== undefined) {\n this.builtInProperties = new BuiltInProperties();\n this.parserBuiltInProperties(json.builtInProperties, this.builtInProperties);\n }\n }\n else {\n this.csvHelper = new CsvHelper(json, separator);\n }\n }\n /* tslint:disable:no-any */\n Workbook.prototype.parserBuiltInProperties = function (jsonBuiltInProperties, builtInProperties) {\n //Author\n if (jsonBuiltInProperties.author !== null && jsonBuiltInProperties.author !== undefined) {\n builtInProperties.author = jsonBuiltInProperties.author;\n }\n //Comments\n if (jsonBuiltInProperties.comments !== null && jsonBuiltInProperties.comments !== undefined) {\n builtInProperties.comments = jsonBuiltInProperties.comments;\n }\n //Category\n if (jsonBuiltInProperties.category !== null && jsonBuiltInProperties.category !== undefined) {\n builtInProperties.category = jsonBuiltInProperties.category;\n }\n //Company\n if (jsonBuiltInProperties.company !== null && jsonBuiltInProperties.company !== undefined) {\n builtInProperties.company = jsonBuiltInProperties.company;\n }\n //Manager\n if (jsonBuiltInProperties.manager !== null && jsonBuiltInProperties.manager !== undefined) {\n builtInProperties.manager = jsonBuiltInProperties.manager;\n }\n //Subject\n if (jsonBuiltInProperties.subject !== null && jsonBuiltInProperties.subject !== undefined) {\n builtInProperties.subject = jsonBuiltInProperties.subject;\n }\n //Title\n if (jsonBuiltInProperties.title !== null && jsonBuiltInProperties.title !== undefined) {\n builtInProperties.title = jsonBuiltInProperties.title;\n }\n //Creation date\n if (jsonBuiltInProperties.createdDate !== null && jsonBuiltInProperties.createdDate !== undefined) {\n builtInProperties.createdDate = jsonBuiltInProperties.createdDate;\n }\n //Modified date\n if (jsonBuiltInProperties.modifiedDate !== null && jsonBuiltInProperties.modifiedDate !== undefined) {\n builtInProperties.modifiedDate = jsonBuiltInProperties.modifiedDate;\n }\n //Tags\n if (jsonBuiltInProperties.tags !== null && jsonBuiltInProperties.tags !== undefined) {\n builtInProperties.tags = jsonBuiltInProperties.tags;\n }\n //Status\n if (jsonBuiltInProperties.status !== null && jsonBuiltInProperties.status !== undefined) {\n builtInProperties.status = jsonBuiltInProperties.status;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserWorksheets = function (json) {\n this.worksheets = new Worksheets();\n var length = json.length;\n for (var i = 0; i < length; i++) {\n var jsonSheet = json[i];\n var sheet = new Worksheet();\n this.mergeCells = new MergeCells();\n this.mergedCellsStyle = new Map();\n this.mHyperLinks = [];\n //Name\n if (jsonSheet.name !== null && jsonSheet.name !== undefined) {\n sheet.name = jsonSheet.name;\n }\n else {\n sheet.name = 'Sheet' + (i + 1).toString();\n }\n if (jsonSheet.enableRtl !== null && jsonSheet.enableRtl !== undefined) {\n sheet.enableRtl = jsonSheet.enableRtl;\n }\n sheet.index = (i + 1);\n //Columns\n if (jsonSheet.columns !== null && jsonSheet.columns !== undefined) {\n this.parserColumns(jsonSheet.columns, sheet);\n }\n //Rows\n if (jsonSheet.rows !== null && jsonSheet.rows !== undefined) {\n this.parserRows(jsonSheet.rows, sheet);\n }\n //showGridLines\n if (jsonSheet.showGridLines !== null && jsonSheet.showGridLines !== undefined) {\n sheet.showGridLines = jsonSheet.showGridLines;\n }\n //FreezePanes\n if (jsonSheet.freeze !== null && jsonSheet.freeze !== undefined) {\n this.parserFreezePanes(jsonSheet.freeze, sheet);\n }\n //Print Title\n if (jsonSheet.printTitle !== null && jsonSheet.printTitle !== undefined) {\n this.parserPrintTitle(jsonSheet.printTitle, sheet);\n }\n if (jsonSheet.pageSetup !== undefined) {\n if (jsonSheet.pageSetup.isSummaryRowBelow !== undefined) {\n sheet.isSummaryRowBelow = jsonSheet.pageSetup.isSummaryRowBelow;\n }\n }\n if (jsonSheet.images !== undefined) {\n this.parserImages(jsonSheet.images, sheet);\n }\n if (jsonSheet.autoFilters !== null && jsonSheet.autoFilters !== undefined) {\n this.parseFilters(jsonSheet.autoFilters, sheet);\n }\n sheet.index = (i + 1);\n sheet.mergeCells = this.mergeCells;\n sheet.hyperLinks = this.mHyperLinks;\n this.worksheets.push(sheet);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.mergeOptions = function (fromJson, toJson) {\n /* tslint:disable:no-any */\n var result = {};\n this.applyProperties(fromJson, result);\n this.applyProperties(toJson, result);\n return result;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.applyProperties = function (sourceJson, destJson) {\n var keys = Object.keys(sourceJson);\n for (var index = 0; index < keys.length; index++) {\n if (keys[index] !== 'name') {\n destJson[keys[index]] = sourceJson[keys[index]];\n }\n }\n };\n Workbook.prototype.getCellName = function (row, column) {\n return this.getColumnName(column) + row.toString();\n };\n Workbook.prototype.getColumnName = function (col) {\n col--;\n var strColumnName = '';\n do {\n var iCurrentDigit = col % 26;\n col = col / 26 - 1;\n strColumnName = String.fromCharCode(65 + iCurrentDigit) + strColumnName;\n } while (col >= 0);\n return strColumnName;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserPrintTitle = function (json, sheet) {\n var printTitleName = '';\n var titleRowName;\n if (json.fromRow !== null && json.fromRow !== undefined) {\n var fromRow = json.fromRow;\n var toRow = void 0;\n if (json.toRow !== null && json.toRow !== undefined) {\n toRow = json.toRow;\n }\n else {\n toRow = json.fromRow;\n }\n titleRowName = '$' + fromRow + ':$' + toRow;\n }\n var titleColName;\n if (json.fromColumn !== null && json.fromColumn !== undefined) {\n var fromColumn = json.fromColumn;\n var toColumn = void 0;\n if (json.toColumn !== null && json.toColumn !== undefined) {\n toColumn = json.toColumn;\n }\n else {\n toColumn = json.fromColumn;\n }\n titleColName = '$' + this.getColumnName(fromColumn) + ':$' + this.getColumnName(toColumn);\n }\n if (titleRowName !== undefined) {\n printTitleName += (sheet.name + '!' + titleRowName);\n }\n if (titleColName !== undefined && titleRowName !== undefined) {\n printTitleName += ',' + (sheet.name + '!' + titleColName);\n }\n else if (titleColName !== undefined) {\n printTitleName += (sheet.name + '!' + titleColName);\n }\n if (printTitleName !== '') {\n this.printTitles.set(sheet.index - 1, printTitleName);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserFreezePanes = function (json, sheet) {\n sheet.freezePanes = new FreezePane();\n if (json.row !== null && json.row !== undefined) {\n sheet.freezePanes.row = json.row;\n }\n else {\n sheet.freezePanes.row = 0;\n }\n if (json.column !== null && json.column !== undefined) {\n sheet.freezePanes.column = json.column;\n }\n else {\n sheet.freezePanes.column = 0;\n }\n sheet.freezePanes.leftCell = this.getCellName(sheet.freezePanes.row + 1, sheet.freezePanes.column + 1);\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserColumns = function (json, sheet) {\n var columnsLength = json.length;\n sheet.columns = [];\n for (var column = 0; column < columnsLength; column++) {\n var col = new Column();\n if (json[column].index !== null && json[column].index !== undefined) {\n col.index = json[column].index;\n }\n else {\n throw Error('Column index is missing.');\n }\n if (json[column].width !== null && json[column].width !== undefined) {\n col.width = json[column].width;\n }\n sheet.columns.push(col);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRows = function (json, sheet) {\n var rowsLength = json.length;\n sheet.rows = new Rows();\n var rowId = 0;\n for (var r = 0; r < rowsLength; r++) {\n var row = this.parserRow(json[r], rowId);\n rowId = row.index;\n sheet.rows.add(row);\n }\n this.insertMergedCellsStyle(sheet);\n };\n Workbook.prototype.insertMergedCellsStyle = function (sheet) {\n var _this = this;\n if (this.mergeCells.length > 0) {\n this.mergedCellsStyle.forEach(function (value, key) {\n var row = sheet.rows.filter(function (item) {\n return item.index === value.y;\n })[0];\n if (!isNullOrUndefined(row)) {\n var cell = row.cells.filter(function (item) {\n return item.index === value.x;\n })[0];\n if (!isNullOrUndefined(cell)) {\n cell.styleIndex = value.styleIndex;\n }\n else {\n var cells = row.cells.filter(function (item) {\n return item.index <= value.x;\n });\n var insertIndex = 0;\n if (cells.length > 0) {\n insertIndex = row.cells.indexOf(cells[cells.length - 1]) + 1;\n }\n row.cells.splice(insertIndex, 0, _this.createCell(value, key));\n }\n }\n else {\n var rows = sheet.rows.filter(function (item) {\n return item.index <= value.y;\n });\n var rowToInsert = new Row();\n rowToInsert.index = value.y;\n rowToInsert.cells = new Cells();\n rowToInsert.cells.add(_this.createCell(value, key));\n var insertIndex = 0;\n if (rows.length > 0) {\n insertIndex = sheet.rows.indexOf(rows[rows.length - 1]) + 1;\n }\n sheet.rows.splice(insertIndex, 0, rowToInsert);\n }\n });\n }\n };\n Workbook.prototype.createCell = function (value, key) {\n var cellToInsert = new Cell();\n cellToInsert.refName = key;\n cellToInsert.index = value.x;\n cellToInsert.cellStyle = new CellStyle();\n cellToInsert.styleIndex = value.styleIndex;\n return cellToInsert;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRow = function (json, rowIndex) {\n var row = new Row();\n //Row Height\n if (json.height !== null && json.height !== undefined) {\n row.height = json.height;\n }\n //Row index\n if (json.index !== null && json.index !== undefined) {\n row.index = json.index;\n }\n else {\n throw Error('Row index is missing.');\n }\n if (json.grouping !== null && json.grouping !== undefined) {\n this.parseGrouping(json.grouping, row);\n }\n this.parseCells(json.cells, row);\n return row;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseGrouping = function (json, row) {\n row.grouping = new Grouping();\n if (json.outlineLevel !== undefined) {\n row.grouping.outlineLevel = json.outlineLevel;\n }\n if (json.isCollapsed !== undefined) {\n row.grouping.isCollapsed = json.isCollapsed;\n }\n if (json.isHidden !== undefined) {\n row.grouping.isHidden = json.isHidden;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseCells = function (json, row) {\n row.cells = new Cells();\n var cellsLength = json !== undefined ? json.length : 0;\n var spanMin = 1;\n var spanMax = 1;\n var curCellIndex = 0;\n for (var cellId = 0; cellId < cellsLength; cellId++) {\n /* tslint:disable:no-any */\n var jsonCell = json[cellId];\n var cell = new Cell();\n //cell index\n if (jsonCell.index !== null && jsonCell.index !== undefined) {\n cell.index = jsonCell.index;\n }\n else {\n throw Error('Cell index is missing.');\n }\n if (cell.index < spanMin) {\n spanMin = cell.index;\n }\n else if (cell.index > spanMax) {\n spanMax = cell.index;\n }\n //Update the Cell name\n cell.refName = this.getCellName(row.index, cell.index);\n //Row span\n if (jsonCell.rowSpan !== null && jsonCell.rowSpan !== undefined) {\n cell.rowSpan = jsonCell.rowSpan - 1;\n }\n else {\n cell.rowSpan = 0;\n }\n //Column span\n if (jsonCell.colSpan !== null && jsonCell.colSpan !== undefined) {\n cell.colSpan = jsonCell.colSpan - 1;\n }\n else {\n cell.colSpan = 0;\n }\n //Hyperlink\n if (jsonCell.hyperlink !== null && jsonCell.hyperlink !== undefined) {\n var hyperLink = new HyperLink();\n if (jsonCell.hyperlink.target !== undefined) {\n hyperLink.target = jsonCell.hyperlink.target;\n if (jsonCell.hyperlink.displayText !== undefined) {\n cell.value = jsonCell.hyperlink.displayText;\n }\n else {\n cell.value = jsonCell.hyperlink.target;\n }\n cell.type = this.getCellValueType(cell.value);\n hyperLink.ref = cell.refName;\n hyperLink.rId = (this.mHyperLinks.length + 1);\n this.mHyperLinks.push(hyperLink);\n cell.cellStyle = new CellStyle();\n /* tslint:disable-next-line:max-line-length */\n this.parserCellStyle((jsonCell.style !== undefined ? this.mergeOptions(jsonCell.style, this.hyperlinkStyle) : this.hyperlinkStyle), cell.cellStyle, 'string');\n cell.styleIndex = cell.cellStyle.index;\n }\n }\n // formulas\n if (jsonCell.formula !== null && jsonCell.formula !== undefined) {\n cell.formula = jsonCell.formula;\n cell.type = 'formula';\n }\n //Cell value\n if (jsonCell.value !== null && jsonCell.value !== undefined) {\n if (cell.formula !== undefined) {\n cell.value = 0;\n }\n else {\n cell.value = jsonCell.value;\n cell.type = this.getCellValueType(cell.value);\n }\n }\n if (jsonCell.style !== null && jsonCell.style !== undefined && cell.styleIndex === undefined) {\n cell.cellStyle = new CellStyle();\n if (cell.value instanceof Date) {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type, 14);\n }\n else {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type);\n }\n cell.styleIndex = cell.cellStyle.index;\n }\n else if (cell.value instanceof Date) {\n cell.cellStyle = new CellStyle();\n this.parserCellStyle({}, cell.cellStyle, cell.type, 14);\n cell.styleIndex = cell.cellStyle.index;\n }\n this.parseCellType(cell);\n this.mergeCells = this.processMergeCells(cell, row.index, this.mergeCells);\n row.cells.add(cell);\n curCellIndex = (cell.index + 1);\n }\n row.spans = (spanMin) + ':' + (spanMax);\n };\n Workbook.prototype.GetColors = function () {\n var colors;\n colors = new Map();\n /* tslint:disable */\n colors.set('WHITE', 'FFFFFFFF');\n /* tslint:disable */\n colors.set('SILVER', 'FFC0C0C0');\n /* tslint:disable */\n colors.set('GRAY', 'FF808080');\n /* tslint:disable */\n colors.set('BLACK', 'FF000000');\n /* tslint:disable */\n colors.set('RED', 'FFFF0000');\n /* tslint:disable */\n colors.set('MAROON', 'FF800000');\n /* tslint:disable */\n colors.set('YELLOW', 'FFFFFF00');\n /* tslint:disable */\n colors.set('OLIVE', 'FF808000');\n /* tslint:disable */\n colors.set('LIME', 'FF00FF00');\n /* tslint:disable */\n colors.set('GREEN', 'FF008000');\n /* tslint:disable */\n colors.set('AQUA', 'FF00FFFF');\n /* tslint:disable */\n colors.set('TEAL', 'FF008080');\n /* tslint:disable */\n colors.set('BLUE', 'FF0000FF');\n /* tslint:disable */\n colors.set('NAVY', 'FF000080');\n /* tslint:disable */\n colors.set('FUCHSIA', 'FFFF00FF');\n /* tslint:disable */\n colors.set('PURPLE', 'FF800080');\n return colors;\n };\n Workbook.prototype.processColor = function (colorVal) {\n if (colorVal.indexOf('#') === 0) {\n return colorVal.replace('#', 'FF');\n }\n colorVal = colorVal.toUpperCase();\n this.rgbColors = this.GetColors();\n if (this.rgbColors.has(colorVal)) {\n colorVal = this.rgbColors.get(colorVal);\n }\n else {\n colorVal = 'FF000000';\n }\n return colorVal;\n };\n Workbook.prototype.processCellValue = function (value, cell) {\n var cellValue = value;\n if (value.indexOf(\"\") !== -1 ||\n value.indexOf(\"\") !== -1 || value.indexOf(\"\") !== -1) {\n var processedVal = '';\n var startindex = value.indexOf('<', 0);\n var endIndex = value.indexOf('>', startindex + 1);\n if (startindex >= 0 && endIndex >= 0) {\n if (startindex !== 0) {\n processedVal += '' + value.substring(0, startindex) + '';\n }\n while (startindex >= 0 && endIndex >= 0) {\n endIndex = value.indexOf('>', startindex + 1);\n if (endIndex >= 0) {\n var subString = value.substring(startindex + 1, endIndex);\n startindex = value.indexOf('<', endIndex + 1);\n if (startindex < 0) {\n startindex = cellValue.length;\n }\n var text = cellValue.substring(endIndex + 1, startindex);\n if (text.length !== 0) {\n var subSplit = subString.split(' ');\n if (subSplit.length > 0) {\n processedVal += '';\n }\n if (subSplit.length > 1) {\n for (var _i = 0, subSplit_1 = subSplit; _i < subSplit_1.length; _i++) {\n var element = subSplit_1[_i];\n var start = element.trim().substring(0, 5);\n switch (start) {\n case 'size=':\n processedVal += '';\n break;\n case 'face=':\n processedVal += '';\n break;\n case 'color':\n processedVal += '';\n break;\n case 'href=':\n var hyperLink = new HyperLink();\n hyperLink.target = element.substring(6, element.length - 1).trim();\n hyperLink.ref = cell.refName;\n hyperLink.rId = (this.mHyperLinks.length + 1);\n this.mHyperLinks.push(hyperLink);\n processedVal += '';\n break;\n }\n }\n }\n else if (subSplit.length === 1) {\n var style = subSplit[0].trim();\n switch (style) {\n case 'b':\n processedVal += '';\n break;\n case 'i':\n processedVal += '';\n break;\n case 'u':\n processedVal += '';\n break;\n }\n }\n processedVal += '' + text + '';\n }\n }\n }\n if (processedVal === '') {\n return cellValue;\n }\n return processedVal;\n }\n else {\n return cellValue;\n }\n }\n else {\n return cellValue;\n }\n };\n Workbook.prototype.applyGlobalStyle = function (json, cellStyle) {\n var index = 0;\n if (this.cellStyles.has(json.name)) {\n cellStyle.index = this.mStyles.filter(function (a) { return (a.name === json.name); })[0].index;\n cellStyle.name = json.name;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserCellStyle = function (json, cellStyle, cellType, defStyleIndex) {\n //name\n if (json.name !== null && json.name !== undefined) {\n if (cellStyle.isGlobalStyle) {\n cellStyle.name = json.name;\n }\n else {\n this.applyGlobalStyle(json, cellStyle);\n return;\n }\n }\n //background color\n if (json.backColor !== null && json.backColor !== undefined) {\n cellStyle.backColor = json.backColor;\n }\n //borders\n //leftBorder\n cellStyle.borders = new Borders();\n //AllBorder\n if (json.borders !== null && json.borders !== undefined) {\n this.parserBorder(json.borders, cellStyle.borders.all);\n }\n //leftborder\n if (json.leftBorder !== null && json.leftBorder !== undefined) {\n this.parserBorder(json.leftBorder, cellStyle.borders.left);\n }\n //rightBorder\n if (json.rightBorder !== null && json.rightBorder !== undefined) {\n this.parserBorder(json.rightBorder, cellStyle.borders.right);\n }\n //topBorder\n if (json.topBorder !== null && json.topBorder !== undefined) {\n this.parserBorder(json.topBorder, cellStyle.borders.top);\n }\n //bottomBorder\n if (json.bottomBorder !== null && json.bottomBorder !== undefined) {\n this.parserBorder(json.bottomBorder, cellStyle.borders.bottom);\n }\n //fontName\n if (json.fontName !== null && json.fontName !== undefined) {\n cellStyle.fontName = json.fontName;\n }\n //fontSize\n if (json.fontSize !== null && json.fontSize !== undefined) {\n cellStyle.fontSize = json.fontSize;\n }\n //fontColor\n if (json.fontColor !== null && json.fontColor !== undefined) {\n cellStyle.fontColor = json.fontColor;\n }\n //italic\n if (json.italic !== null && json.italic !== undefined) {\n cellStyle.italic = json.italic;\n }\n //bold\n if (json.bold !== null && json.bold !== undefined) {\n cellStyle.bold = json.bold;\n }\n //hAlign\n if (json.hAlign !== null && json.hAlign !== undefined) {\n cellStyle.hAlign = json.hAlign.toLowerCase();\n }\n //indent\n if (json.indent !== null && json.indent !== undefined) {\n cellStyle.indent = json.indent;\n if (!(cellStyle.hAlign === 'left' || cellStyle.hAlign === 'right')) {\n cellStyle.hAlign = 'left';\n }\n }\n if (json.rotation !== null && json.rotation !== undefined) {\n cellStyle.rotation = json.rotation;\n }\n //vAlign\n if (json.vAlign !== null && json.vAlign !== undefined) {\n cellStyle.vAlign = json.vAlign.toLowerCase();\n }\n //underline\n if (json.underline !== null && json.underline !== undefined) {\n cellStyle.underline = json.underline;\n }\n //wrapText\n if (json.wrapText !== null && json.wrapText !== undefined) {\n cellStyle.wrapText = json.wrapText;\n }\n //numberFormat\n if (json.numberFormat !== null && json.numberFormat !== undefined) {\n if (json.type !== null && json.type !== undefined) {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, json.type);\n }\n else {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, cellType);\n }\n }\n else if (defStyleIndex !== undefined) {\n cellStyle.numFmtId = 14;\n cellStyle.numberFormat = 'GENERAL';\n }\n else {\n cellStyle.numberFormat = 'GENERAL';\n }\n cellStyle.index = this.processCellStyle(cellStyle);\n };\n Workbook.prototype.switchNumberFormat = function (numberFormat, type) {\n var format = this.getNumberFormat(numberFormat, type);\n if (format !== numberFormat) {\n var numFmt = this.mNumFmt.get(numberFormat);\n if (numFmt !== undefined) {\n numFmt.formatCode = format;\n if (this.mNumFmt.has(format)) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXfs = _a[_i];\n if (cellStyleXfs.numFmtId === numFmt.numFmtId) {\n cellStyleXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n for (var _b = 0, _c = this.mCellXfs; _b < _c.length; _b++) {\n var cellXfs = _c[_b];\n if (cellXfs.numFmtId === numFmt.numFmtId) {\n cellXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n }\n }\n }\n };\n Workbook.prototype.getNumberFormat = function (numberFormat, type) {\n var returnFormat;\n switch (type) {\n case 'number':\n try {\n returnFormat = this.intl.getNumberPattern({ format: numberFormat, currency: this.currency, useGrouping: true }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'datetime':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'dateTime' }, true);\n }\n catch (error) {\n try {\n returnFormat = this.intl.getDatePattern({ format: numberFormat, type: 'dateTime' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n }\n break;\n case 'date':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'date' }, true);\n }\n catch (error) {\n try {\n returnFormat = this.intl.getDatePattern({ format: numberFormat, type: 'date' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n }\n break;\n case 'time':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'time' }, true);\n }\n catch (error) {\n try {\n returnFormat = this.intl.getDatePattern({ format: numberFormat, type: 'time' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n }\n break;\n default:\n returnFormat = numberFormat;\n break;\n }\n return returnFormat;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserBorder = function (json, border) {\n if (json.color !== null && json.color !== undefined) {\n border.color = json.color;\n }\n else {\n border.color = '#000000';\n }\n if (json.lineStyle !== null && json.lineStyle !== undefined) {\n border.lineStyle = json.lineStyle;\n }\n else {\n border.lineStyle = 'thin';\n }\n };\n Workbook.prototype.processCellStyle = function (style) {\n if (style.isGlobalStyle) {\n this.processNumFormatId(style);\n this.mStyles.push(style);\n return this.mStyles.length;\n }\n else {\n var compareResult = this.compareStyle(style);\n if (!compareResult.result) {\n this.processNumFormatId(style);\n this.mStyles.push(style);\n return this.mStyles.length;\n }\n else {\n //Return the index of the already existing style.\n return compareResult.index;\n }\n }\n };\n Workbook.prototype.processNumFormatId = function (style) {\n if (style.numberFormat !== 'GENERAL' && !this.mNumFmt.has(style.numberFormat)) {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n }\n };\n Workbook.prototype.isNewFont = function (toCompareStyle) {\n var result = false;\n var index = 0;\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n index++;\n var fontColor = undefined;\n if (toCompareStyle.fontColor !== undefined) {\n fontColor = ('FF' + toCompareStyle.fontColor.replace('#', ''));\n }\n result = font.color === fontColor &&\n font.b === toCompareStyle.bold &&\n font.i === toCompareStyle.italic &&\n font.u === toCompareStyle.underline &&\n font.name === toCompareStyle.fontName &&\n font.sz === toCompareStyle.fontSize;\n if (result) {\n break;\n }\n }\n index = index - 1;\n return { index: index, result: result };\n };\n Workbook.prototype.isNewBorder = function (toCompareStyle) {\n var bStyle = new CellStyle();\n if (this.isAllBorder(toCompareStyle.borders)) {\n return (bStyle.borders.all.color === toCompareStyle.borders.all.color &&\n bStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle);\n }\n else {\n return (bStyle.borders.left.color === toCompareStyle.borders.left.color &&\n bStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n bStyle.borders.right.color === toCompareStyle.borders.right.color &&\n bStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n bStyle.borders.top.color === toCompareStyle.borders.top.color &&\n bStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n bStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n bStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle);\n }\n };\n Workbook.prototype.isAllBorder = function (toCompareBorder) {\n var allBorderStyle = new CellStyle();\n return allBorderStyle.borders.all.color !== toCompareBorder.all.color &&\n allBorderStyle.borders.all.lineStyle !== toCompareBorder.all.lineStyle;\n };\n Workbook.prototype.compareStyle = function (toCompareStyle) {\n var result = true;\n var index = 0;\n var globalStyleIndex = 0;\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var baseStyle = _a[_i];\n result = baseStyle.isGlobalStyle ? false : (baseStyle.backColor === toCompareStyle.backColor &&\n baseStyle.bold === toCompareStyle.bold &&\n baseStyle.numFmtId === toCompareStyle.numFmtId &&\n baseStyle.numberFormat === toCompareStyle.numberFormat &&\n baseStyle.type === toCompareStyle.type &&\n baseStyle.fontColor === toCompareStyle.fontColor &&\n baseStyle.fontName === toCompareStyle.fontName &&\n baseStyle.fontSize === toCompareStyle.fontSize &&\n baseStyle.hAlign === toCompareStyle.hAlign &&\n baseStyle.italic === toCompareStyle.italic &&\n baseStyle.underline === toCompareStyle.underline &&\n baseStyle.vAlign === toCompareStyle.vAlign &&\n baseStyle.indent === toCompareStyle.indent &&\n baseStyle.rotation === toCompareStyle.rotation &&\n baseStyle.wrapText === toCompareStyle.wrapText &&\n (baseStyle.borders.all.color === toCompareStyle.borders.all.color &&\n baseStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle) &&\n (baseStyle.borders.left.color === toCompareStyle.borders.left.color &&\n baseStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n baseStyle.borders.right.color === toCompareStyle.borders.right.color &&\n baseStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n baseStyle.borders.top.color === toCompareStyle.borders.top.color &&\n baseStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n baseStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n baseStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle));\n if (result) {\n index = baseStyle.index;\n break;\n }\n }\n return { index: index, result: result };\n };\n Workbook.prototype.contains = function (array, item) {\n var index = array.indexOf(item);\n return index > -1 && index < array.length;\n };\n Workbook.prototype.getCellValueType = function (value) {\n if (value instanceof Date) {\n return 'datetime';\n }\n else if (typeof (value) === 'boolean') {\n return 'boolean';\n }\n else if (typeof (value) === 'number') {\n return 'number';\n }\n else {\n return 'string';\n }\n };\n Workbook.prototype.parseCellType = function (cell) {\n var type = cell.type;\n var saveType;\n var value = cell.value;\n switch (type) {\n case 'datetime':\n value = this.toOADate(value);\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n var value_1 = this.globalStyles.get(cell.cellStyle.name);\n this.switchNumberFormat(value_1.format, value_1.type);\n }\n }\n saveType = 'n';\n break;\n //TODO: Update the number format index and style\n case 'boolean':\n value = value ? 1 : 0;\n saveType = 'b';\n break;\n case 'number':\n saveType = 'n';\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n this.switchNumberFormat(this.globalStyles.get(cell.cellStyle.name).format, 'number');\n }\n }\n break;\n case 'string':\n this.sharedStringCount++;\n saveType = 's';\n var sstvalue = this.processCellValue(value, cell);\n if (!this.contains(this.sharedString, sstvalue)) {\n this.sharedString.push(sstvalue);\n }\n value = this.sharedString.indexOf(sstvalue);\n break;\n default:\n break;\n }\n cell.saveType = saveType;\n cell.value = value;\n };\n Workbook.prototype.parserImages = function (json, sheet) {\n var imagesLength = json.length;\n sheet.images = [];\n var imageId = 0;\n for (var p = 0; p < imagesLength; p++) {\n var image = this.parserImage(json[p]);\n sheet.images.push(image);\n }\n };\n Workbook.prototype.parseFilters = function (json, sheet) {\n sheet.autoFilters = new AutoFilters();\n if (json.row !== null && json.row !== undefined)\n sheet.autoFilters.row = json.row;\n else\n throw new Error('Argument Null Exception: row null or empty');\n if (json.lastRow !== null && json.lastRow !== undefined)\n sheet.autoFilters.lastRow = json.lastRow;\n else\n throw new Error('Argument Null Exception: lastRow cannot be null or empty');\n if (json.column !== null && json.column !== undefined)\n sheet.autoFilters.column = json.column;\n else\n throw new Error('Argument Null Exception: column cannot be null or empty');\n if (json.lastColumn !== null && json.row !== undefined)\n sheet.autoFilters.lastColumn = json.lastColumn;\n else\n throw new Error('Argument Null Exception: lastColumn cannot be null or empty');\n };\n Workbook.prototype.parserImage = function (json) {\n var image = new Image();\n if (json.image !== null && json.image !== undefined) {\n image.image = json.image;\n }\n if (json.row !== null && json.row !== undefined) {\n image.row = json.row;\n }\n if (json.column !== null && json.column !== undefined) {\n image.column = json.column;\n }\n if (json.lastRow !== null && json.lastRow !== undefined) {\n image.lastRow = json.lastRow;\n }\n if (json.lastColumn !== null && json.lastColumn !== undefined) {\n image.lastColumn = json.lastColumn;\n }\n if (json.width !== null && json.width !== undefined) {\n image.width = json.width;\n }\n if (json.height !== null && json.height !== undefined) {\n image.height = json.height;\n }\n if (json.horizontalFlip !== null && json.horizontalFlip !== undefined) {\n image.horizontalFlip = json.horizontalFlip;\n }\n if (json.verticalFlip !== null && json.verticalFlip !== undefined) {\n image.verticalFlip = json.verticalFlip;\n }\n if (json.rotation !== null && json.rotation !== undefined) {\n image.rotation = json.rotation;\n }\n return image;\n };\n Workbook.prototype.saveAsBlob = function (blobSaveType) {\n var _this = this;\n switch (blobSaveType) {\n case 'text/csv':\n return new Promise(function (resolve, reject) {\n var obj = {};\n obj.blobData = _this.csvHelper.saveAsBlob();\n resolve(obj);\n });\n default:\n return new Promise(function (resolve, reject) {\n _this.saveInternal();\n _this.mArchive.saveAsBlob().then(function (blob) {\n var obj = {};\n obj.blobData = new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\n resolve(obj);\n });\n });\n }\n };\n Workbook.prototype.save = function (fileName, proxyUrl) {\n var _this = this;\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('Argument Null Exception: fileName cannot be null or empty');\n }\n var xlsxMatch = fileName.match('.xlsx$');\n var csvMatch = fileName.match('.csv$');\n if (xlsxMatch !== null && xlsxMatch[0] === ('.' + this.mSaveType)) {\n this.saveInternal();\n this.mArchive.save(fileName).then(function () {\n _this.mArchive.destroy();\n });\n }\n else if (csvMatch !== null && csvMatch[0] === ('.' + this.mSaveType)) {\n this.csvHelper.save(fileName);\n }\n else {\n throw Error('Save type and file extension is different.');\n }\n };\n Workbook.prototype.saveInternal = function () {\n this.saveWorkbook();\n this.saveWorksheets();\n this.saveSharedString();\n this.saveStyles();\n this.saveApp(this.builtInProperties);\n this.saveCore(this.builtInProperties);\n this.saveContentType();\n this.saveTopLevelRelation();\n this.saveWorkbookRelation();\n };\n Workbook.prototype.saveWorkbook = function () {\n /* tslint:disable-next-line:max-line-length */\n var workbookTemp = '';\n var sheets = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n sheets += '';\n }\n sheets += '';\n workbookTemp += sheets;\n if (this.printTitles.size > 0) {\n var printTitle_1 = '';\n this.printTitles.forEach(function (value, key) {\n printTitle_1 += '' + value + '';\n });\n printTitle_1 += '';\n workbookTemp += printTitle_1;\n }\n this.addToArchive(workbookTemp + '', 'xl/workbook.xml');\n };\n Workbook.prototype.saveWorksheets = function () {\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n this.saveWorksheet(this.worksheets[i], i);\n }\n };\n Workbook.prototype.saveWorksheet = function (sheet, index) {\n var sheetBlob = new BlobHelper();\n /* tslint:disable-next-line:max-line-length */\n var sheetString = '';\n if (!sheet.isSummaryRowBelow) {\n sheetString += ('' + '' + '' + '');\n }\n else {\n sheetString += ('');\n }\n sheetString += this.saveSheetView(sheet);\n if (sheet.columns !== undefined) {\n var colString = '';\n for (var _i = 0, _a = sheet.columns; _i < _a.length; _i++) {\n var column = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n if (column.width !== undefined) {\n colString += '';\n }\n else {\n colString += '';\n }\n }\n sheetString += (colString + '');\n }\n sheetString += ('');\n sheetBlob.append(sheetString);\n sheetString = '';\n if (sheet.rows !== undefined) {\n for (var _b = 0, _c = sheet.rows; _b < _c.length; _b++) {\n var row = _c[_b];\n var rowString = '');\n for (var _d = 0, _e = row.cells; _d < _e.length; _d++) {\n var cell = _e[_d];\n if (cell !== undefined && (cell.value !== undefined || cell.cellStyle !== undefined)) {\n rowString += ('');\n if (cell.formula !== undefined) {\n rowString += ('' + cell.formula + '');\n }\n if (cell.value !== undefined) {\n rowString += ('' + cell.value + '');\n }\n else {\n rowString += ('');\n }\n }\n }\n rowString += ('
');\n sheetBlob.append(rowString);\n }\n }\n sheetString += ('');\n /* tslint:disable-next-line:max-line-length */\n if (sheet.autoFilters !== null && sheet.autoFilters !== undefined)\n sheetString += ('');\n if (sheet.mergeCells.length > 0) {\n sheetString += ('');\n for (var _f = 0, _g = sheet.mergeCells; _f < _g.length; _f++) {\n var mCell = _g[_f];\n sheetString += ('');\n }\n sheetString += ('');\n }\n if (sheet.hyperLinks.length > 0) {\n sheetString += ('');\n for (var _h = 0, _j = sheet.hyperLinks; _h < _j.length; _h++) {\n var hLink = _j[_h];\n sheetString += ('');\n }\n sheetString += ('');\n }\n /* tslint:disable-next-line:max-line-length */\n sheetString += ('');\n if (sheet.images != undefined && sheet.images.length > 0) {\n this.drawingCount++;\n this.saveDrawings(sheet, sheet.index);\n sheetString += '';\n }\n this.addToArchive(this.saveSheetRelations(sheet), ('xl/worksheets/_rels/sheet' + sheet.index + '.xml.rels'));\n sheetBlob.append(sheetString + '');\n this.addToArchive(sheetBlob.getBlob(), 'xl/worksheets' + '/sheet' + (index + 1) + '.xml');\n };\n Workbook.prototype.saveDrawings = function (sheet, index) {\n var drawings = new BlobHelper();\n /* tslint:disable-next-line:max-line-length */\n var sheetDrawingString = '';\n if (sheet.images !== undefined) {\n var imgId = 0;\n for (var _i = 0, _a = sheet.images; _i < _a.length; _i++) {\n var pic = _a[_i];\n if (pic.height !== undefined && pic.width !== undefined) {\n this.updatelastRowOffset(sheet, pic);\n this.updatelastColumnOffSet(sheet, pic);\n }\n else if (pic.lastRow !== undefined && pic.lastColumn !== undefined) {\n pic.lastRowOffset = 0;\n pic.lastColOffset = 0;\n }\n imgId++;\n sheetDrawingString += '';\n sheetDrawingString += '';\n //col\n sheetDrawingString += pic.column - 1;\n sheetDrawingString += '';\n //colOff\n sheetDrawingString += 0;\n sheetDrawingString += '';\n //row\n sheetDrawingString += pic.row - 1;\n sheetDrawingString += '';\n //rowOff\n sheetDrawingString += 0;\n sheetDrawingString += '';\n sheetDrawingString += '';\n //col\n sheetDrawingString += pic.lastColumn;\n sheetDrawingString += '';\n //colOff\n sheetDrawingString += pic.lastColOffset;\n sheetDrawingString += '';\n //row\n sheetDrawingString += pic.lastRow;\n sheetDrawingString += '';\n //rowOff\n sheetDrawingString += pic.lastRowOffset;\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += ' ';\n sheetDrawingString += ' ';\n sheetDrawingString += '';\n /* tslint:disable-next-line:max-line-length */\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += '';\n sheetDrawingString += '= -3600) {\n sheetDrawingString += ' rot=\"' + (pic.rotation * 60000) + '\"';\n }\n if (pic.verticalFlip != undefined && pic.verticalFlip != false) {\n sheetDrawingString += ' flipV=\"1\"';\n }\n if (pic.horizontalFlip != undefined && pic.horizontalFlip != false) {\n sheetDrawingString += ' flipH=\"1\"';\n }\n sheetDrawingString += '/>';\n sheetDrawingString += '';\n sheetDrawingString += '';\n var imageFile = new BlobHelper();\n var imageData = this.convertBase64toImage(pic.image);\n this.imageCount += 1;\n this.addToArchive(imageData, 'xl/media/image' + this.imageCount + '.png');\n }\n drawings.append(sheetDrawingString);\n drawings.append('');\n this.saveDrawingRelations(sheet);\n this.addToArchive(drawings.getBlob(), 'xl/drawings/drawing' + this.drawingCount + '.xml');\n }\n };\n Workbook.prototype.updatelastRowOffset = function (sheet, picture) {\n var iCurHeight = picture.height;\n var iCurRow = picture.row;\n var iCurOffset = 0;\n while (iCurHeight >= 0) {\n var iRowHeight = 0;\n if (sheet.rows !== undefined && sheet.rows[iCurRow - 1] !== undefined)\n iRowHeight = this.convertToPixels(sheet.rows[iCurRow - 1].height === undefined ? 15 : sheet.rows[iCurRow - 1].height);\n else\n iRowHeight = this.convertToPixels(15);\n var iSpaceInCell = iRowHeight - (iCurOffset * iRowHeight / 256);\n if (iSpaceInCell > iCurHeight) {\n picture.lastRow = iCurRow;\n picture.lastRowOffset = iCurOffset + (iCurHeight * 256 / iRowHeight);\n var rowHiddenHeight = 0;\n if (sheet.rows !== undefined && sheet.rows[iCurRow - 1] !== undefined)\n rowHiddenHeight = this.convertToPixels(sheet.rows[iCurRow - 1].height === undefined ? 15 : sheet.rows[iCurRow - 1].height);\n else\n rowHiddenHeight = this.convertToPixels(15);\n picture.lastRowOffset = (rowHiddenHeight * picture.lastRowOffset) / 256;\n picture.lastRowOffset = Math.round(picture.lastRowOffset / this.unitsProportions[7]);\n break;\n }\n else {\n iCurHeight -= iSpaceInCell;\n iCurRow++;\n iCurOffset = 0;\n }\n }\n };\n Workbook.prototype.updatelastColumnOffSet = function (sheet, picture) {\n var iCurWidth = picture.width;\n var iCurCol = picture.column;\n var iCurOffset = 0;\n while (iCurWidth >= 0) {\n var iColWidth = 0;\n if (sheet.columns !== undefined && sheet.columns[iCurCol - 1] !== undefined)\n iColWidth = this.ColumnWidthToPixels(sheet.columns[iCurCol - 1].width === undefined ? 8.43 : sheet.columns[iCurCol - 1].width);\n else\n iColWidth = this.ColumnWidthToPixels(8.43);\n var iSpaceInCell = iColWidth - (iCurOffset * iColWidth / 1024);\n if (iSpaceInCell > iCurWidth) {\n picture.lastColumn = iCurCol;\n picture.lastColOffset = iCurOffset + (iCurWidth * 1024 / iColWidth);\n var colHiddenWidth = 0;\n if (sheet.columns !== undefined && sheet.columns[iCurCol - 1] !== undefined)\n colHiddenWidth = this.ColumnWidthToPixels(sheet.columns[iCurCol - 1].width === undefined ? 8.43 : sheet.columns[iCurCol].width);\n else\n colHiddenWidth = this.ColumnWidthToPixels(8.43);\n picture.lastColOffset = (colHiddenWidth * picture.lastColOffset) / 1024;\n picture.lastColOffset = Math.round(picture.lastColOffset / this.unitsProportions[7]);\n break;\n }\n else {\n iCurWidth -= iSpaceInCell;\n iCurCol++;\n iCurOffset = 0;\n }\n }\n };\n Workbook.prototype.convertToPixels = function (value) {\n return value * this.unitsProportions[6];\n };\n Workbook.prototype.convertBase64toImage = function (img) {\n var byteStr = window.atob(img);\n var buffer = new ArrayBuffer(byteStr.length);\n var data = new Uint8Array(buffer);\n for (var i = 0; i < byteStr.length; i++) {\n data[i] = byteStr.charCodeAt(i);\n }\n var blob = new Blob([data], { type: 'image/png' });\n return blob;\n };\n Workbook.prototype.saveDrawingRelations = function (sheet) {\n /* tslint:disable-next-line:max-line-length */\n var drawingRelation = '';\n var length = sheet.images.length;\n var id = this.imageCount - sheet.images.length;\n for (var i = 1; i <= length; i++) {\n id++;\n /* tslint:disable-next-line:max-line-length */\n drawingRelation += '';\n }\n this.addToArchive((drawingRelation + ''), 'xl/drawings/_rels/drawing' + this.drawingCount + '.xml.rels');\n };\n Workbook.prototype.pixelsToColumnWidth = function (pixels) {\n var dDigitWidth = 7;\n var val = (pixels > dDigitWidth + 5) ?\n this.trunc((pixels - 5) / dDigitWidth * 100 + 0.5) / 100 :\n pixels / (dDigitWidth + 5);\n return (val > 1) ?\n ((val * dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0 :\n (val * (dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0;\n };\n Workbook.prototype.ColumnWidthToPixels = function (val) {\n var dDigitWidth = 7;\n var fileWidth = (val > 1) ?\n ((val * dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0 :\n (val * (dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0;\n return this.trunc(((256 * fileWidth + this.trunc(128 / dDigitWidth)) / 256) * dDigitWidth);\n };\n Workbook.prototype.trunc = function (x) {\n var n = x - x % 1;\n return n === 0 && (x < 0 || (x === 0 && (1 / x !== 1 / 0))) ? -0 : n;\n };\n Workbook.prototype.pixelsToRowHeight = function (pixels) {\n return (pixels * this.unitsProportions[5] / this.unitsProportions[6]);\n };\n Workbook.prototype.saveSheetRelations = function (sheet) {\n /* tslint:disable-next-line:max-line-length */\n var relStr = '';\n for (var _i = 0, _a = sheet.hyperLinks; _i < _a.length; _i++) {\n var hLink = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n relStr += '';\n }\n if (sheet.images != undefined && sheet.images.length > 0) {\n /* tslint:disable-next-line:max-line-length */\n relStr += '';\n }\n relStr += '';\n return relStr;\n };\n Workbook.prototype.saveSheetView = function (sheet) {\n var paneString = ' 0) {\n /* tslint:disable-next-line:max-line-length */\n var sstStart = '';\n var si = '';\n for (var i = 0; i < length; i++) {\n if (this.sharedString[i].indexOf('') !== 0) {\n si += '';\n si += this.processString(this.sharedString[i]);\n si += '';\n }\n else {\n si += '';\n si += this.sharedString[i];\n si += '';\n }\n }\n si += '';\n this.addToArchive(sstStart + si, 'xl/sharedStrings.xml');\n }\n };\n Workbook.prototype.processString = function (value) {\n if (value.indexOf('&') !== -1) {\n value = value.replace(/&/g, '&');\n }\n if (value.indexOf('<') !== -1) {\n value = value.replace(/') !== -1) {\n value = value.replace(/>/g, '>');\n }\n return value;\n };\n Workbook.prototype.saveStyles = function () {\n this.updateCellXfsStyleXfs();\n /* tslint:disable-next-line:max-line-length */\n var styleTemp = '';\n styleTemp += this.saveNumberFormats();\n styleTemp += this.saveFonts();\n styleTemp += this.saveFills();\n styleTemp += this.saveBorders();\n styleTemp += this.saveCellStyleXfs();\n styleTemp += this.saveCellXfs();\n styleTemp += this.saveCellStyles();\n this.addToArchive(styleTemp + '', 'xl/styles.xml');\n };\n Workbook.prototype.updateCellXfsStyleXfs = function () {\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var style = _a[_i];\n var cellXfs = undefined;\n if (style.isGlobalStyle) {\n cellXfs = new CellStyleXfs();\n cellXfs.xfId = (style.index - 1);\n }\n else {\n cellXfs = new CellXfs();\n cellXfs.xfId = 0;\n }\n //Add font\n var compareFontResult = this.isNewFont(style);\n if (!compareFontResult.result) {\n var font = new Font();\n font.b = style.bold;\n font.i = style.italic;\n font.name = style.fontName;\n font.sz = style.fontSize;\n font.u = style.underline;\n font.color = ('FF' + style.fontColor.replace('#', ''));\n this.mFonts.push(font);\n cellXfs.fontId = this.mFonts.length - 1;\n }\n else {\n cellXfs.fontId = compareFontResult.index;\n }\n //Add fill\n if (style.backColor !== 'none') {\n var backColor = 'FF' + style.backColor.replace('#', '');\n if (this.mFills.has(backColor)) {\n var fillId = this.mFills.get(backColor);\n cellXfs.fillId = fillId;\n }\n else {\n var fillId = this.mFills.size + 2;\n this.mFills.set(backColor, fillId);\n cellXfs.fillId = (fillId);\n }\n }\n else {\n cellXfs.fillId = 0;\n }\n //Add border \n if (!this.isNewBorder(style)) {\n this.mBorders.push(style.borders);\n cellXfs.borderId = this.mBorders.length;\n }\n else {\n cellXfs.borderId = 0;\n }\n //Add Number Format \n if (style.numberFormat !== 'GENERAL') {\n if (this.mNumFmt.has(style.numberFormat)) {\n var numFmt = this.mNumFmt.get(style.numberFormat);\n cellXfs.numFmtId = numFmt.numFmtId;\n }\n else {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n cellXfs.numFmtId = id;\n }\n }\n else {\n if (style.numberFormat === 'GENERAL' && style.numFmtId === 14) {\n cellXfs.numFmtId = 14;\n }\n else {\n cellXfs.numFmtId = 0;\n }\n }\n //Add alignment \n if (!style.isGlobalStyle) {\n cellXfs.applyAlignment = 1;\n }\n cellXfs.alignment = new Alignment();\n cellXfs.alignment.indent = style.indent;\n cellXfs.alignment.horizontal = style.hAlign;\n cellXfs.alignment.vertical = style.vAlign;\n cellXfs.alignment.wrapText = style.wrapText ? 1 : 0;\n cellXfs.alignment.rotation = style.rotation;\n if (style.isGlobalStyle) {\n this.mCellStyleXfs.push(cellXfs);\n this.mCellXfs.push(cellXfs);\n }\n else {\n //Add cellxfs\n this.mCellXfs.push(cellXfs);\n }\n }\n };\n Workbook.prototype.saveNumberFormats = function () {\n if (this.mNumFmt.size >= 1) {\n var numFmtStyle_1 = '';\n this.mNumFmt.forEach(function (value, key) {\n numFmtStyle_1 += '';\n });\n return (numFmtStyle_1 += '');\n }\n else {\n return '';\n }\n };\n Workbook.prototype.saveFonts = function () {\n /* tslint:disable-next-line:max-line-length */\n var fontStyle = '';\n if (this.mFonts.length >= 1) {\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n fontStyle += '';\n if (font.b) {\n fontStyle += '';\n }\n if (font.i) {\n fontStyle += '';\n }\n if (font.u) {\n fontStyle += '';\n }\n fontStyle += '';\n fontStyle += '';\n fontStyle += '';\n }\n }\n return fontStyle + '';\n };\n Workbook.prototype.saveFills = function () {\n /* tslint:disable-next-line:max-line-length */\n var fillsStyle = '';\n if (this.mFills.size >= 1) {\n this.mFills.forEach(function (value, key) {\n /* tslint:disable-next-line:max-line-length */\n fillsStyle += '';\n });\n }\n return fillsStyle + '';\n };\n Workbook.prototype.saveBorders = function () {\n /* tslint:disable-next-line:max-line-length */\n var bordersStyle = '';\n if (this.mBorders.length >= 1) {\n for (var _i = 0, _a = this.mBorders; _i < _a.length; _i++) {\n var borders = _a[_i];\n if (this.isAllBorder(borders)) {\n var color = borders.all.color.replace('#', '');\n var lineStyle = borders.all.lineStyle;\n /* tslint:disable-next-line:max-line-length */\n bordersStyle += '';\n }\n else {\n /* tslint:disable-next-line:max-line-length */\n bordersStyle += '';\n }\n }\n }\n return bordersStyle + '';\n };\n Workbook.prototype.saveCellStyles = function () {\n var _this = this;\n var cellStyleString = '';\n this.cellStyles.forEach(function (value, key) {\n cellStyleString += '';\n if (this.mCellStyleXfs.length >= 1) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXf = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n cellXfsStyle += '';\n }\n else {\n cellXfsStyle += ' />';\n }\n }\n }\n return cellXfsStyle + '';\n };\n Workbook.prototype.saveCellXfs = function () {\n /* tslint:disable-next-line:max-line-length */\n var cellXfsStyle = '';\n if (this.mCellXfs.length >= 1) {\n for (var _i = 0, _a = this.mCellXfs; _i < _a.length; _i++) {\n var cellXf = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n cellXfsStyle += '';\n }\n }\n return cellXfsStyle + '';\n };\n Workbook.prototype.saveAlignment = function (cellXf) {\n var alignString = '';\n return alignString;\n };\n Workbook.prototype.saveApp = function (builtInProperties) {\n /* tslint:disable-next-line:max-line-length */\n var appString = 'Essential XlsIO';\n if (builtInProperties !== undefined) {\n if (builtInProperties.manager !== undefined) {\n appString += '' + builtInProperties.manager + '';\n }\n if (builtInProperties.company !== undefined) {\n appString += '' + builtInProperties.company + '';\n }\n }\n this.addToArchive((appString + ''), 'docProps/app.xml');\n };\n Workbook.prototype.saveCore = function (builtInProperties) {\n var createdDate = new Date();\n /* tslint:disable-next-line:max-line-length */\n var coreString = '';\n if (this.builtInProperties !== undefined) {\n if (builtInProperties.author !== undefined) {\n coreString += '' + builtInProperties.author + '';\n }\n if (builtInProperties.subject !== undefined) {\n coreString += '' + builtInProperties.subject + '';\n }\n if (builtInProperties.category !== undefined) {\n coreString += '' + builtInProperties.category + '';\n }\n if (builtInProperties.comments !== undefined) {\n coreString += '' + builtInProperties.comments + '';\n }\n if (builtInProperties.title !== undefined) {\n coreString += '' + builtInProperties.title + '';\n }\n if (builtInProperties.tags !== undefined) {\n coreString += '' + builtInProperties.tags + '';\n }\n if (builtInProperties.status !== undefined) {\n coreString += '' + builtInProperties.status + '';\n }\n if (builtInProperties.createdDate !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n coreString += '' + builtInProperties.createdDate.toISOString() + '';\n }\n else {\n coreString += '' + createdDate.toISOString() + '';\n }\n if (builtInProperties.modifiedDate !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n coreString += '' + builtInProperties.modifiedDate.toISOString() + '';\n }\n else {\n coreString += '' + createdDate.toISOString() + '';\n }\n }\n else {\n coreString += '' + createdDate.toISOString() + '';\n coreString += '' + createdDate.toISOString() + '';\n }\n /* tslint:disable-next-line:max-line-length */\n coreString += '';\n this.addToArchive(coreString, 'docProps/core.xml');\n };\n Workbook.prototype.saveTopLevelRelation = function () {\n /* tslint:disable-next-line:max-line-length */\n var topRelation = '';\n this.addToArchive(topRelation, '_rels/.rels');\n };\n Workbook.prototype.saveWorkbookRelation = function () {\n /* tslint:disable-next-line:max-line-length */\n var wbRelation = '';\n var length = this.worksheets.length;\n var count = 0;\n for (var i = 0; i < length; i++, count++) {\n /* tslint:disable-next-line:max-line-length */\n wbRelation += '';\n }\n /* tslint:disable-next-line:max-line-length */\n wbRelation += '';\n if (this.sharedStringCount > 0) {\n /* tslint:disable-next-line:max-line-length */\n wbRelation += '';\n }\n this.addToArchive((wbRelation + ''), 'xl/_rels/workbook.xml.rels');\n };\n Workbook.prototype.saveContentType = function () {\n /* tslint:disable-next-line:max-line-length */\n var contentTypeString = '';\n var sheetsOverride = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n sheetsOverride += '';\n if (this.worksheets[i].images != undefined && this.worksheets[i].images.length > 0) {\n /* tslint:disable-next-line:max-line-length */\n sheetsOverride += '';\n }\n }\n if (this.imageCount > 0)\n sheetsOverride += '';\n if (this.sharedStringCount > 0) {\n /* tslint:disable-next-line:max-line-length */\n contentTypeString += '';\n }\n this.addToArchive((contentTypeString + sheetsOverride + ''), '[Content_Types].xml');\n };\n Workbook.prototype.addToArchive = function (xmlString, itemName) {\n if (typeof (xmlString) === 'string') {\n var blob = new Blob([xmlString], { type: 'text/plain' });\n var archiveItem = new ZipArchiveItem(blob, itemName);\n this.mArchive.addItem(archiveItem);\n }\n else {\n var archiveItem = new ZipArchiveItem(xmlString, itemName);\n this.mArchive.addItem(archiveItem);\n }\n };\n Workbook.prototype.processMergeCells = function (cell, rowIndex, mergeCells) {\n if (cell.rowSpan !== 0 || cell.colSpan !== 0) {\n var mCell = new MergeCell();\n mCell.x = cell.index;\n mCell.width = cell.colSpan;\n mCell.y = rowIndex;\n mCell.height = cell.rowSpan;\n var startCell = this.getCellName(mCell.y, mCell.x);\n var endCell = this.getCellName(rowIndex + mCell.height, cell.index + mCell.width);\n mCell.ref = startCell + ':' + endCell;\n var mergedCell = mergeCells.add(mCell);\n var start = { x: mCell.x, y: mCell.y };\n var end = {\n x: (cell.index + mCell.width), y: (rowIndex + mCell.height)\n };\n this.updatedMergedCellStyles(start, end, cell);\n }\n return mergeCells;\n };\n Workbook.prototype.updatedMergedCellStyles = function (sCell, eCell, cell) {\n for (var x = sCell.x; x <= eCell.x; x++) {\n for (var y = sCell.y; y <= eCell.y; y++) {\n this.mergedCellsStyle.set(this.getCellName(y, x), { x: x, y: y, styleIndex: cell.styleIndex });\n }\n }\n };\n /**\n * Returns the tick count corresponding to the given year, month, and day.\n * @param year number value of year\n * @param month number value of month\n * @param day number value of day\n */\n Workbook.prototype.dateToTicks = function (year, month, day) {\n var ticksPerDay = 10000 * 1000 * 60 * 60 * 24;\n var daysToMonth365 = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365];\n var daysToMonth366 = [0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366];\n if (year >= 1 && year <= 9999 && month >= 1 && month <= 12) {\n var days = this.isLeapYear(year) ? daysToMonth366 : daysToMonth365;\n var y = year - 1;\n var n = y * 365 + ((y / 4) | 0) - ((y / 100) | 0) + ((y / 400) | 0) + days[month - 1] + day - 1;\n return n * ticksPerDay;\n }\n throw new Error('Not a valid date');\n };\n /**\n * Return the tick count corresponding to the given hour, minute, second.\n * @param hour number value of hour\n * @param minute number value if minute\n * @param second number value of second\n */\n Workbook.prototype.timeToTicks = function (hour, minute, second) {\n if (hour >= 0 && hour < 24 && minute >= 0 && minute < 60 && second >= 0 && second < 60) {\n var totalSeconds = hour * 3600 + minute * 60 + second;\n return totalSeconds * 10000 * 1000;\n }\n throw new Error('Not valid time');\n };\n /**\n * Checks if given year is a leap year.\n * @param year Year value.\n */\n Workbook.prototype.isLeapYear = function (year) {\n return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);\n };\n /**\n * Converts `DateTime` to the equivalent OLE Automation date.\n */\n Workbook.prototype.toOADate = function (date) {\n var ticks = 0;\n /* tslint:disable-next-line:max-line-length */\n ticks = this.dateToTicks(date.getFullYear(), (date.getMonth() + 1), date.getDate()) + this.timeToTicks(date.getHours(), date.getMinutes(), date.getSeconds());\n if (ticks === 0) {\n return 0.0;\n }\n var ticksPerDay = 10000 * 1000 * 60 * 60 * 24;\n var daysTo1899 = (((365 * 4 + 1) * 25 - 1) * 4 + 1) * 4 + ((365 * 4 + 1) * 25 - 1) * 3 - 367;\n var doubleDateOffset = daysTo1899 * ticksPerDay;\n var oaDateMinAsTicks = (((365 * 4 + 1) * 25 - 1) - 365) * ticksPerDay;\n if (ticks < oaDateMinAsTicks) {\n throw new Error('Arg_OleAutDateInvalid');\n }\n var millisPerDay = 1000 * 60 * 60 * 24;\n return ((ticks - doubleDateOffset) / 10000) / millisPerDay;\n };\n return Workbook;\n}());\nexport { Workbook };\n/**\n * BuiltInProperties Class\n * @private\n */\nvar BuiltInProperties = /** @class */ (function () {\n function BuiltInProperties() {\n }\n return BuiltInProperties;\n}());\nexport { BuiltInProperties };\n","import { Row } from './../models/row';\nimport { CellType } from '../base/enum';\nimport { isNullOrUndefined, Internationalization, getValue, createElement } from '@syncfusion/ej2-base';\nimport { Cell } from '../models/cell';\nimport { ValueFormatter } from './../services/value-formatter';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport { getForeignData, measureColumnDepth, getUid } from '../base/util';\nimport { Grid } from '../base/grid';\n/**\n * @hidden\n * `ExportHelper` for `PdfExport` & `ExcelExport`\n */\nvar ExportHelper = /** @class */ (function () {\n function ExportHelper(parent) {\n this.hideColumnInclude = false;\n this.foreignKeyData = {};\n this.parent = parent;\n }\n ExportHelper.getQuery = function (parent, data) {\n var query = data.generateQuery(true).requiresCount();\n if (data.isRemote()) {\n if (parent.groupSettings.enableLazyLoading && parent.groupSettings.columns.length) {\n query.lazyLoad = [];\n }\n else {\n query.take(parent.pageSettings.totalRecordsCount);\n }\n }\n return query;\n };\n ExportHelper.prototype.getFData = function (value, column) {\n var foreignKeyData = getForeignData(column, {}, value, this.foreignKeyData[column.field])[0];\n return foreignKeyData;\n };\n ExportHelper.prototype.getGridRowModel = function (columns, dataSource, gObj, startIndex) {\n if (startIndex === void 0) { startIndex = 0; }\n var rows = [];\n var length = dataSource.length;\n if (length) {\n for (var i = 0; i < length; i++, startIndex++) {\n var options = { isExpand: false };\n options.data = dataSource[i];\n options.index = startIndex;\n if (gObj.childGrid) {\n if (gObj.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (gObj.hierarchyPrintMode === 'Expanded' &&\n this.parent.expandedRows && this.parent.expandedRows[startIndex]) {\n options.isExpand = gObj.expandedRows[startIndex].isExpand;\n }\n }\n var row = new Row(options);\n row.cells = this.generateCells(columns, gObj);\n rows.push(row);\n }\n this.processColumns(rows);\n }\n return rows;\n };\n ExportHelper.prototype.generateCells = function (columns, gObj) {\n var cells = [];\n if (gObj.childGridLevel) {\n var len = gObj.childGridLevel;\n for (var i = 0; len > i; i++) {\n cells.push(this.generateCell({}, CellType.Indent));\n }\n }\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n cells.push(this.generateCell(col, CellType.Data));\n }\n return cells;\n };\n ExportHelper.prototype.getColumnData = function (gridObj) {\n var _this = this;\n var columnPromise = [];\n var promise;\n var fColumns = gridObj.getForeignKeyColumns();\n if (fColumns.length) {\n for (var i = 0; i < fColumns.length; i++) {\n var colData = ('result' in fColumns[i].dataSource) ?\n new DataManager(fColumns[i].dataSource.result) :\n fColumns[i].dataSource;\n columnPromise.push(colData.executeQuery(new Query()));\n }\n promise = Promise.all(columnPromise).then(function (e) {\n for (var j = 0; j < fColumns.length; j++) {\n _this.foreignKeyData[fColumns[j].field] = e[j].result;\n }\n // tslint:disable-next-line:no-any\n });\n }\n return promise;\n };\n ExportHelper.prototype.getHeaders = function (columns, isHideColumnInclude) {\n if (isHideColumnInclude) {\n this.hideColumnInclude = true;\n }\n else {\n this.hideColumnInclude = false;\n }\n this.colDepth = measureColumnDepth(columns);\n var rows = [];\n for (var i = 0; i < this.colDepth; i++) {\n rows[i] = new Row({});\n rows[i].cells = [];\n }\n rows = this.processColumns(rows);\n rows = this.processHeaderCells(rows, columns);\n return { rows: rows, columns: this.generateActualColumns(columns) };\n };\n ExportHelper.prototype.getConvertedWidth = function (input) {\n var value = parseFloat(input);\n return (input.indexOf('%') !== -1) ? (this.parent.element.getBoundingClientRect().width * value / 100) : value;\n };\n ExportHelper.prototype.generateActualColumns = function (columns, actualColumns) {\n if (actualColumns === void 0) { actualColumns = []; }\n for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {\n var column = columns_2[_i];\n if (column.commands) {\n continue;\n }\n if (!column.columns) {\n if (column.visible || this.hideColumnInclude) {\n actualColumns.push(column);\n }\n }\n else {\n if (column.visible || this.hideColumnInclude) {\n var colSpan = this.getCellCount(column, 0);\n if (colSpan !== 0) {\n this.generateActualColumns(column.columns, actualColumns);\n }\n }\n }\n }\n return actualColumns;\n };\n ExportHelper.prototype.processHeaderCells = function (rows, cols) {\n var columns = cols;\n for (var i = 0; i < columns.length; i++) {\n if (!columns[i].commands) {\n rows = this.appendGridCells(columns[i], rows, 0);\n }\n }\n return rows;\n };\n ExportHelper.prototype.appendGridCells = function (cols, gridRows, index) {\n if (!cols.columns && (cols.visible !== false || this.hideColumnInclude) && !cols.commands) {\n gridRows[index].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, index));\n }\n else if (cols.columns) {\n var colSpan = this.getCellCount(cols, 0);\n if (colSpan) {\n gridRows[index].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols, colSpan: colSpan\n }));\n }\n var isIgnoreFirstCell = void 0;\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n if (cols.columns[i].visible && !isIgnoreFirstCell) {\n isIgnoreFirstCell = true;\n }\n gridRows = this.appendGridCells(cols.columns[i], gridRows, index + 1);\n }\n }\n return gridRows;\n };\n ExportHelper.prototype.generateCell = function (gridColumn, cellType, rowSpan, rowIndex) {\n var option = {\n 'visible': gridColumn.visible,\n 'isDataCell': cellType === CellType.Data,\n 'column': gridColumn,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'index': rowIndex\n };\n if (!option.rowSpan || option.rowSpan < 2) {\n delete option.rowSpan;\n }\n return new Cell(option);\n };\n ExportHelper.prototype.processColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gridObj = this.parent;\n var columnIndexes = [];\n if (gridObj.enableColumnVirtualization) {\n columnIndexes = gridObj.getColumnIndexesInView();\n }\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gridObj.allowGrouping) {\n for (var j = 0, len_1 = gridObj.groupSettings.columns.length; j < len_1; j++) {\n if (gridObj.enableColumnVirtualization && columnIndexes.indexOf(j) === -1) {\n continue;\n }\n rows[i].cells.splice(0, 0, this.generateCell({}, CellType.HeaderIndent));\n }\n }\n }\n return rows;\n };\n ExportHelper.prototype.getCellCount = function (column, count) {\n if (column.columns) {\n for (var i = 0; i < column.columns.length; i++) {\n count = this.getCellCount(column.columns[i], count);\n }\n }\n else {\n if (column.visible || this.hideColumnInclude) {\n count++;\n }\n }\n return count;\n };\n ExportHelper.prototype.checkAndExport = function (gridPool, globalResolve) {\n var bool = Object.keys(gridPool).some(function (key) {\n return !gridPool[key];\n });\n if (!bool) {\n globalResolve();\n }\n };\n ExportHelper.prototype.failureHandler = function (gridPool, childGridObj, resolve) {\n var _this = this;\n return function () {\n gridPool[childGridObj.id] = true;\n _this.checkAndExport(gridPool, resolve);\n };\n };\n // tslint:disable-next-line:no-any\n ExportHelper.prototype.createChildGrid = function (gObj, row, exportType, gridPool) {\n var childGridObj = new Grid(this.parent.detailRowModule.getGridModel(gObj, row, exportType));\n gObj.isPrinting = false;\n var parent = 'parentDetails';\n childGridObj[parent] = {\n parentID: gObj.element.id,\n parentPrimaryKeys: gObj.getPrimaryKeyFieldNames(),\n parentKeyField: gObj.childGrid.queryString,\n parentKeyFieldValue: getValue(childGridObj.queryString, row.data),\n parentRowData: row.data\n };\n var exportId = getUid('child-grid');\n var element = createElement('div', {\n id: exportId, styles: 'display: none'\n });\n document.body.appendChild(element);\n childGridObj.id = exportId;\n gridPool[exportId] = false;\n return { childGrid: childGridObj, element: element };\n };\n ExportHelper.prototype.getGridExportColumns = function (columns) {\n var actualGridColumns = [];\n for (var i = 0, gridColumns = columns; i < gridColumns.length; i++) {\n if (gridColumns[i].type !== 'checkbox') {\n actualGridColumns.push(gridColumns[i]);\n }\n }\n return actualGridColumns;\n };\n return ExportHelper;\n}());\nexport { ExportHelper };\n/**\n * @hidden\n * `ExportValueFormatter` for `PdfExport` & `ExcelExport`\n */\nvar ExportValueFormatter = /** @class */ (function () {\n function ExportValueFormatter(culture) {\n this.valueFormatter = new ValueFormatter(culture);\n this.internationalization = new Internationalization(culture);\n }\n /* tslint:disable-next-line:no-any */\n ExportValueFormatter.prototype.returnFormattedValue = function (args, customFormat) {\n if (!isNullOrUndefined(args.value) && args.value) {\n return this.valueFormatter.getFormatFunction(customFormat)(args.value);\n }\n else {\n return '';\n }\n };\n /* tslint:disable-next-line:no-any */\n ExportValueFormatter.prototype.formatCellValue = function (args, isServerBlaz) {\n if (args.isForeignKey) {\n args.value = getValue(args.column.foreignKeyValue, getForeignData(args.column, {}, args.value)[0]);\n }\n if (args.column.type === 'number' && args.column.format !== undefined && args.column.format !== '') {\n return args.value || args.value === 0 ?\n this.internationalization.getNumberFormat({ format: args.column.format })(args.value) : '';\n }\n else if (args.column.type === 'boolean' && args.value !== '') {\n return args.value ? 'true' : 'false';\n /* tslint:disable-next-line:max-line-length */\n }\n else if ((args.column.type === 'date' || args.column.type === 'datetime' || args.column.type === 'time') && args.column.format !== undefined) {\n if (typeof args.value === 'string') {\n args.value = new Date(args.value);\n }\n if (typeof args.column.format === 'string') {\n var format = void 0;\n var cFormat = args.column.format;\n if (args.column.type === 'date') {\n format = isServerBlaz ? { type: 'date', format: cFormat } : { type: 'date', skeleton: cFormat };\n }\n else if (args.column.type === 'time') {\n format = isServerBlaz ? { type: 'time', format: cFormat } : { type: 'time', skeleton: cFormat };\n }\n else {\n format = isServerBlaz ? { type: 'dateTime', format: cFormat } : { type: 'dateTime', skeleton: cFormat };\n }\n return this.returnFormattedValue(args, format);\n }\n else {\n if (args.column.format instanceof Object && args.column.format.type === undefined) {\n return (args.value.toString());\n }\n else {\n /* tslint:disable-next-line:max-line-length */\n var customFormat = void 0;\n if (args.column.type === 'date') {\n /* tslint:disable-next-line:max-line-length */\n customFormat = { type: args.column.format.type, format: args.column.format.format, skeleton: args.column.format.skeleton };\n }\n else if (args.column.type === 'time') {\n customFormat = { type: 'time', format: args.column.format.format, skeleton: args.column.format.skeleton };\n }\n else {\n customFormat = { type: 'dateTime', format: args.column.format.format, skeleton: args.column.format.skeleton };\n }\n return this.returnFormattedValue(args, customFormat);\n }\n }\n }\n else {\n if ((!isNullOrUndefined(args.column.type) && !isNullOrUndefined(args.value)) || !isNullOrUndefined(args.value)) {\n return (args.value).toString();\n }\n else {\n return '';\n }\n }\n };\n return ExportValueFormatter;\n}());\nexport { ExportValueFormatter };\n","import * as events from '../base/constant';\nimport { Workbook } from '@syncfusion/ej2-excel-export';\nimport { isNullOrUndefined, getEnumValue, compile, getValue, detach, extend, isBlazor } from '@syncfusion/ej2-base';\nimport { Data } from '../actions/data';\nimport { ExportHelper, ExportValueFormatter } from './export-helper';\nimport { SummaryModelGenerator, GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';\nimport { CellType } from '../base/enum';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport { getPrintGridModel, getUid, isExportColumns, updateColumnTypeForExportColumns, prepareColumns, measureColumnDepth } from '../base/util';\n/**\n * @hidden\n * `ExcelExport` module is used to handle the Excel export action.\n */\nvar ExcelExport = /** @class */ (function () {\n /**\n * Constructor for the Grid Excel Export module.\n * @hidden\n */\n function ExcelExport(parent, locator) {\n /* tslint:disable-next-line:no-any */\n this.book = {};\n this.workSheet = [];\n this.rows = [];\n this.columns = [];\n this.styles = [];\n this.rowLength = 1;\n this.expType = 'AppendToSheet';\n this.includeHiddenColumn = false;\n this.isCsvExport = false;\n this.isElementIdChanged = false;\n this.foreignKeyData = {};\n this.gridPool = {};\n this.sheet = {};\n this.parent = parent;\n this.helper = new ExportHelper(parent);\n this.locator = locator;\n this.l10n = this.locator.getService('localization');\n }\n /**\n * For internal use only - Get the module name.\n */\n ExcelExport.prototype.getModuleName = function () {\n return 'ExcelExport';\n };\n ExcelExport.prototype.init = function (gObj) {\n if (gObj.element !== null && gObj.element.id === '') {\n gObj.element.id = new Date().toISOString();\n this.isElementIdChanged = true;\n }\n this.parent = gObj;\n if (this.parent.isDestroyed) {\n return;\n }\n this.isExporting = undefined;\n this.book = {};\n this.workSheet = [];\n this.rows = [];\n this.columns = [];\n this.styles = [];\n this.rowLength = 1;\n this.footer = undefined;\n this.expType = 'AppendToSheet';\n this.includeHiddenColumn = false;\n this.exportValueFormatter = new ExportValueFormatter(gObj.locale);\n gObj.id = getUid('main-grid');\n this.gridPool[gObj.id] = false;\n };\n /**\n * Export Grid to Excel file.\n * @param {exportProperties} exportProperties - Defines the export properties of the Grid.\n * @param {isMultipleExport} isMultipleExport - Defines is multiple Grid's are exported.\n * @param {workbook} workbook - Defined the Workbook if multiple Grid is exported.\n * @param {isCsv} isCsv - true if export to CSV.\n * @return {Promise}\n */\n /* tslint:disable-next-line:max-line-length */\n /* tslint:disable-next-line:no-any */\n ExcelExport.prototype.Map = function (grid, exportProperties, isMultipleExport, workbook, isCsv, isBlob) {\n var gObj = grid;\n var cancel = 'cancel';\n var isBlb = 'isBlob';\n var csv = 'isCsv';\n var workbk = 'workbook';\n var isMultiEx = 'isMultipleExport';\n this.gridPool = {};\n if (grid.childGrid && !(!isNullOrUndefined(exportProperties) && exportProperties.hierarchyExportMode === 'None')) {\n grid.expandedRows = getPrintGridModel(grid).expandedRows;\n }\n var args = {\n requestType: 'beforeExcelExport', gridObject: gObj, cancel: false,\n isMultipleExport: isMultipleExport, workbook: workbook, isCsv: isCsv, isBlob: isBlob\n };\n gObj.trigger(events.beforeExcelExport, args);\n if (args[cancel]) {\n return new Promise(function (resolve, reject) {\n return resolve();\n });\n }\n this.parent.log('exporting_begin', this.getModuleName());\n this.data = new Data(gObj);\n this.isExporting = true;\n this.isBlob = args[isBlb];\n if (args[csv]) {\n this.isCsvExport = args[csv];\n }\n else {\n this.isCsvExport = false;\n }\n if (isExportColumns(exportProperties)) {\n updateColumnTypeForExportColumns(exportProperties, gObj);\n }\n return this.processRecords(gObj, exportProperties, args[isMultiEx], args[workbk]);\n };\n ExcelExport.prototype.exportingSuccess = function (resolve) {\n this.isExporting = false;\n this.parent.trigger(events.excelExportComplete, this.isBlob ? { promise: this.blobPromise } : {});\n this.parent.log('exporting_complete', this.getModuleName());\n resolve(this.book);\n this.sheet.images = [];\n };\n /* tslint:disable-next-line:no-any */\n ExcelExport.prototype.processRecords = function (gObj, exportProperties, isMultipleExport, workbook) {\n var _this = this;\n if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.dataSource)) {\n if (!(exportProperties.dataSource instanceof DataManager)) {\n exportProperties.dataSource = new DataManager(exportProperties.dataSource);\n }\n var query_1 = exportProperties.query ? exportProperties.query : new Query();\n if (isNullOrUndefined(query_1.isCountRequired) || gObj.aggregates) {\n query_1.isCountRequired = true;\n }\n return new Promise(function (resolve, reject) {\n var dataManager = exportProperties.dataSource.executeQuery(query_1);\n dataManager.then(function (r) {\n _this.init(gObj);\n _this.processInnerRecords(gObj, exportProperties, isMultipleExport, workbook, r).then(function () {\n _this.exportingSuccess(resolve);\n });\n });\n });\n }\n else if (!isNullOrUndefined(exportProperties) && exportProperties.exportType === 'CurrentPage') {\n return new Promise(function (resolve, reject) {\n _this.init(gObj);\n _this.processInnerRecords(gObj, exportProperties, isMultipleExport, workbook, _this.parent.getCurrentViewRecords());\n _this.exportingSuccess(resolve);\n });\n }\n else {\n var allPromise_1 = [];\n allPromise_1.push(this.data.getData({}, ExportHelper.getQuery(gObj, this.data)));\n allPromise_1.push(this.helper.getColumnData(gObj));\n return new Promise(function (resolve, reject) {\n Promise.all(allPromise_1).then(function (e) {\n _this.init(gObj);\n _this.processInnerRecords(gObj, exportProperties, isMultipleExport, workbook, e[0]).then(function () {\n _this.exportingSuccess(resolve);\n });\n }).catch(function (e) {\n reject(_this.book);\n _this.parent.trigger(events.actionFailure, e);\n });\n });\n }\n };\n /* tslint:disable-next-line:max-func-body-length */\n ExcelExport.prototype.processInnerRecords = function (gObj, exportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, workbook, r) {\n var _this = this;\n this.groupedColLength = gObj.groupSettings.columns.length;\n var blankRows = 5;\n var separator;\n var rows = [];\n var colDepth = measureColumnDepth(gObj.columns);\n var isExportPropertiesPresent = !isNullOrUndefined(exportProperties);\n if (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.multipleExport)) {\n /* tslint:disable-next-line:max-line-length */\n this.expType = (!isNullOrUndefined(exportProperties.multipleExport.type) ? exportProperties.multipleExport.type : 'AppendToSheet');\n if (!isNullOrUndefined(exportProperties.multipleExport.blankRows)) {\n blankRows = exportProperties.multipleExport.blankRows;\n }\n }\n if (isNullOrUndefined(workbook)) {\n this.workSheet = [];\n this.rows = [];\n this.columns = [];\n this.styles = [];\n }\n else if (this.expType === 'NewSheet') {\n this.workSheet = workbook.worksheets;\n this.rows = [];\n this.columns = [];\n this.styles = workbook.styles;\n }\n else {\n this.workSheet = [];\n this.rows = workbook.worksheets[0].rows;\n this.columns = workbook.worksheets[0].columns;\n this.styles = workbook.styles;\n this.rowLength = (this.rows[this.rows.length - 1].index + blankRows);\n this.rowLength++;\n }\n if (isExportPropertiesPresent) {\n if (!isNullOrUndefined(isMultipleExport)) {\n if (!isNullOrUndefined(exportProperties.header) && (isMultipleExport || this.expType === 'NewSheet')) {\n this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header)));\n }\n if (!isNullOrUndefined(exportProperties.footer)) {\n if (this.expType === 'AppendToSheet') {\n if (!isMultipleExport) {\n this.footer = JSON.parse(JSON.stringify(exportProperties.footer));\n }\n }\n else {\n this.footer = JSON.parse(JSON.stringify(exportProperties.footer));\n }\n }\n }\n else {\n if (!isNullOrUndefined(exportProperties.header)) {\n this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header)));\n }\n if (!isNullOrUndefined(exportProperties.footer)) {\n this.footer = JSON.parse(JSON.stringify(exportProperties.footer));\n }\n }\n }\n this.includeHiddenColumn = (isExportPropertiesPresent ? exportProperties.includeHiddenColumn : false);\n return new Promise(function (resolve, reject) {\n gObj.childGridLevel = 0;\n rows = _this.processGridExport(gObj, exportProperties, r);\n _this.globalResolve = resolve;\n _this.gridPool[gObj.id] = true;\n _this.helper.checkAndExport(_this.gridPool, _this.globalResolve);\n }).then(function () {\n var organisedRows = [];\n _this.organiseRows(rows, rows[0].index, organisedRows);\n _this.rows = _this.rows.concat(organisedRows);\n //footer template add\n if (!isNullOrUndefined(_this.footer)) {\n if ((_this.expType === 'AppendToSheet' && !isMultipleExport) || (_this.expType === 'NewSheet')) {\n _this.processExcelFooter(_this.footer);\n }\n }\n if (_this.columns.length > 0) {\n _this.sheet.columns = _this.columns;\n }\n /* tslint:disable-next-line:no-any */\n _this.sheet.rows = _this.rows;\n _this.sheet.enableRtl = _this.parent.enableRtl;\n if (_this.parent.allowFiltering && gObj.getVisibleColumns().length && isExportPropertiesPresent &&\n exportProperties.enableFilter) {\n var autoFilters = {\n row: colDepth, column: _this.groupedColLength ? _this.groupedColLength + 1 :\n _this.sheet.columns[0].index, lastRow: _this.sheet.rows.length, lastColumn: _this.sheet.columns.length\n };\n _this.sheet.autoFilters = autoFilters;\n }\n _this.workSheet.push(_this.sheet);\n _this.book.worksheets = _this.workSheet;\n _this.book.styles = _this.styles;\n gObj.notify('finalPageSetup', _this.book);\n if (!isMultipleExport) {\n if (_this.isCsvExport) {\n if (isBlazor() && gObj.isServerRendered) {\n _this.book.isServerRendered = gObj.isServerRendered;\n }\n if (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.separator)\n && exportProperties.separator !== ',') {\n separator = exportProperties.separator;\n }\n /* tslint:disable-next-line:max-line-length */\n var book = new Workbook(_this.book, 'csv', gObj.locale, gObj.currencyCode, separator);\n if (!_this.isBlob) {\n if (isExportPropertiesPresent && exportProperties.fileName) {\n book.save(exportProperties.fileName);\n }\n else {\n book.save('Export.csv');\n }\n }\n else {\n _this.blobPromise = book.saveAsBlob('text/csv');\n }\n }\n else {\n var book = new Workbook(_this.book, 'xlsx', gObj.locale, gObj.currencyCode);\n if (!_this.isBlob) {\n if (isExportPropertiesPresent && exportProperties.fileName) {\n book.save(exportProperties.fileName);\n }\n else {\n book.save('Export.xlsx');\n }\n }\n else {\n _this.blobPromise = book.saveAsBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');\n }\n }\n if (_this.isElementIdChanged) {\n gObj.element.id = '';\n }\n delete gObj.expandedRows;\n }\n return workbook;\n });\n };\n ExcelExport.prototype.organiseRows = function (rows, initialIndex, organisedRows) {\n if (!rows.length) {\n return initialIndex;\n }\n for (var i = 0; i < rows.length; i++) {\n var row = rows[i];\n var childRows = row.childRows;\n if (childRows) {\n row.index = initialIndex++;\n delete row.childRows;\n organisedRows.push(row);\n initialIndex = this.organiseRows(childRows, initialIndex, organisedRows);\n }\n else {\n row.index = initialIndex++;\n organisedRows.push(row);\n }\n }\n return initialIndex;\n };\n ExcelExport.prototype.processGridExport = function (gObj, exportProperties, r) {\n var excelRows = [];\n var isFrozen = this.parent.isFrozenGrid() && !this.parent.getFrozenColumns();\n if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.theme)) {\n this.theme = exportProperties.theme;\n }\n if (gObj.childGrid && !isNullOrUndefined(exportProperties)) {\n gObj.hierarchyPrintMode = exportProperties.hierarchyExportMode || 'Expanded';\n }\n var helper = new ExportHelper(gObj);\n var gColumns = isExportColumns(exportProperties) ?\n prepareColumns(exportProperties.columns, gObj.enableColumnVirtualization) :\n helper.getGridExportColumns(isFrozen ? gObj.getColumns() : gObj.columns);\n var headerRow = helper.getHeaders(gColumns, this.includeHiddenColumn);\n var groupIndent = gObj.groupSettings.columns.length;\n excelRows = this.processHeaderContent(gObj, headerRow, groupIndent, excelRows);\n /* tslint:disable-next-line:max-line-length */\n if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.dataSource) && !(exportProperties.dataSource instanceof DataManager)) {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, exportProperties.dataSource, excelRows, helper);\n }\n else if (!isNullOrUndefined(exportProperties) && exportProperties.exportType === 'CurrentPage') {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, gObj.currentViewData, excelRows, helper);\n }\n else {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, undefined, excelRows, helper);\n }\n gObj.notify(events.exportDataBound, { excelRows: excelRows, type: 'excel' });\n return excelRows;\n };\n ExcelExport.prototype.processRecordContent = function (gObj, returnType, headerRow, exportProperties, currentViewRecords, excelRow, helper) {\n var record;\n if (!isNullOrUndefined(currentViewRecords) && currentViewRecords.length) {\n record = currentViewRecords;\n }\n else {\n record = returnType.result;\n }\n if (!isNullOrUndefined(record.level)) {\n this.processGroupedRows(gObj, record, headerRow, record.level, 0, exportProperties, excelRow, helper);\n }\n else {\n this.processRecordRows(gObj, record, headerRow, 0, 0, exportProperties, excelRow, helper);\n }\n if (!isNullOrUndefined(returnType.aggregates)) {\n if (!isNullOrUndefined(currentViewRecords)) {\n this.processAggregates(gObj, returnType.result, excelRow, currentViewRecords);\n }\n else {\n var result = returnType.result.GroupGuid ?\n returnType.result.records : returnType.result;\n this.processAggregates(gObj, result, excelRow);\n }\n }\n return excelRow;\n };\n /* tslint:disable-next-line:no-any */\n ExcelExport.prototype.processGroupedRows = function (gObj, dataSource, headerRow, level, startIndex, excelExportProperties, excelRows, helper) {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n var cells = [];\n var index = 1;\n /* tslint:disable-next-line:no-any */\n var cell = {};\n cell.index = index + level;\n var col = gObj.getColumnByField(item.field);\n /* tslint:disable-next-line:no-any */\n var args = {\n value: item.key,\n column: col,\n style: undefined,\n isForeignKey: col.isForeignColumn(),\n };\n var value = gObj.getColumnByField(item.field).headerText +\n ': ' + (!col.enableGroupByFormat ? this.exportValueFormatter.formatCellValue(args) : item.key) + ' - ';\n if (item.count > 1) {\n value += item.count + ' items';\n }\n else {\n value += item.count + ' item';\n }\n var cArgs = { captionText: value, type: this.isCsvExport ? 'CSV' : 'Excel' };\n this.parent.trigger(events.exportGroupCaption, cArgs);\n cell.value = cArgs.captionText;\n cell.style = this.getCaptionThemeStyle(this.theme);\n var captionModelGen = new CaptionSummaryModelGenerator(gObj);\n var groupCaptionSummaryRows = captionModelGen.generateRows(item);\n this.fillAggregates(gObj, groupCaptionSummaryRows, dataSource.level + dataSource.childLevels, excelRows, this.rowLength);\n cells.push(cell);\n if (excelRows[excelRows.length - 1].cells.length > 0) {\n var lIndex = dataSource.level + dataSource.childLevels + groupCaptionSummaryRows[0].cells.length;\n var hIndex = 0;\n for (var _a = 0, _b = excelRows[excelRows.length - 1].cells; _a < _b.length; _a++) {\n var tCell = _b[_a];\n if (tCell.index < lIndex) {\n lIndex = tCell.index;\n }\n if (tCell.index > hIndex) {\n hIndex = tCell.index;\n }\n if (cells[cells.length - 1].index !== tCell.index) {\n cells.push(tCell);\n }\n }\n if ((lIndex - cell.index) > 1) {\n cell.colSpan = lIndex - cell.index;\n }\n while (hIndex < (headerRow.columns.length + level + dataSource.childLevels)) {\n /* tslint:disable-next-line:no-any */\n var sCell = {};\n sCell.index = (hIndex + 1);\n sCell.style = this.getCaptionThemeStyle(this.theme);\n cells.push(sCell);\n hIndex++;\n }\n }\n else {\n var span = 0;\n //Calculation for column span when group caption dont have aggregates\n for (var _c = 0, _d = headerRow.columns; _c < _d.length; _c++) {\n var col_1 = _d[_c];\n if (col_1.visible) {\n span++;\n }\n }\n cell.colSpan = (dataSource.childLevels + span);\n }\n excelRows[excelRows.length - 1].cells = cells;\n this.rowLength++;\n if (this.groupedColLength < 8 && level > 1) {\n var grouping = { outlineLevel: level - 1, isCollapsed: true };\n excelRows[excelRows.length - 1].grouping = grouping;\n }\n if (!isNullOrUndefined(dataSource.childLevels) && dataSource.childLevels > 0) {\n this.processGroupedRows(gObj, item.items, headerRow, item.items.level, startIndex, excelExportProperties, excelRows, helper);\n this.processAggregates(gObj, item, excelRows, undefined, (level) + dataSource.childLevels, true);\n }\n else {\n startIndex = this.processRecordRows(gObj, item.items, headerRow, (level), startIndex, excelExportProperties, excelRows, helper);\n this.processAggregates(gObj, item, excelRows, undefined, (level), true);\n }\n }\n };\n /* tslint:disable-next-line:max-func-body-length */\n ExcelExport.prototype.processRecordRows = function (gObj, record, headerRow, level, startIndex, excelExportProperties, excelRows, helper) {\n var index = 1;\n var cells = [];\n var columns = headerRow.columns;\n var rows = helper.getGridRowModel(columns, record, gObj, startIndex);\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n cells = [];\n startIndex++;\n index = 1;\n var templateRowHeight = void 0;\n for (var c = 0, len = row.cells.length; c < len; c++) {\n var gCell = row.cells[c];\n if (gCell.cellType !== CellType.Data) {\n continue;\n }\n var column = gCell.column;\n var field = column.field;\n var cellValue = !isNullOrUndefined(field) ? column.valueAccessor(field, row.data, column) : '';\n var value = !isNullOrUndefined(cellValue) ? cellValue : '';\n var fkData = void 0;\n if (column.isForeignColumn && column.isForeignColumn()) {\n fkData = helper.getFData(value, column);\n value = getValue(column.foreignKeyValue, fkData);\n }\n if (!isNullOrUndefined(value)) {\n var cell = {};\n var idx = index + level + gObj.childGridLevel;\n /* tslint:disable-next-line:no-any */\n var excelCellArgs = {\n data: row.data, column: column, foreignKeyData: fkData,\n value: value, style: undefined, colSpan: 1, cell: cell\n };\n gObj.trigger(events.excelQueryCellInfo, excelCellArgs);\n if (!isNullOrUndefined(excelCellArgs.image) && !isNullOrUndefined(excelCellArgs.image.base64)) {\n if (isNullOrUndefined(this.sheet.images)) {\n this.sheet.images = [];\n }\n /* tslint:disable-next-line:no-any */\n var excelImage = {\n image: excelCellArgs.image.base64, row: this.rowLength, column: idx,\n lastRow: this.rowLength, lastColumn: idx\n };\n this.sheet.images.push(excelImage);\n templateRowHeight = excelCellArgs.image.height || 50;\n this.columns[idx - 1].width = excelCellArgs.image.width || this.columns[idx - 1].width;\n }\n if (!isNullOrUndefined(excelCellArgs.hyperLink)) {\n excelCellArgs.cell.hyperlink = { target: excelCellArgs.hyperLink.target };\n excelCellArgs.value = excelCellArgs.hyperLink.displayText || excelCellArgs.value;\n }\n cell = excelCellArgs.cell;\n cell.index = idx;\n cell.value = excelCellArgs.value;\n if (excelCellArgs.data === '' && gObj.childGridLevel && index === 1) {\n var style = {};\n style.hAlign = 'left';\n excelCellArgs = { style: style };\n cell.colSpan = gObj.getVisibleColumns().length;\n cell.value = this.l10n.getConstant('EmptyRecord');\n }\n if (excelCellArgs.colSpan > 1) {\n cell.colSpan = excelCellArgs.colSpan;\n }\n if (!isNullOrUndefined(excelCellArgs.style)) {\n var styleIndex = this.getColumnStyle(gObj, index + level);\n cell.style = this.mergeOptions(this.styles[styleIndex], excelCellArgs.style);\n }\n else {\n cell.style = { name: gObj.element.id + 'column' + (index + level) };\n }\n cells.push(cell);\n }\n index++;\n }\n var excelRow = { index: this.rowLength++, cells: cells };\n if (!isNullOrUndefined(templateRowHeight)) {\n /* tslint:disable-next-line:no-any */\n excelRow.height = templateRowHeight;\n }\n if (this.groupedColLength < 8 && level > 0) {\n excelRow.grouping = { outlineLevel: level, isCollapsed: true };\n excelRows.push(excelRow);\n }\n else {\n excelRows.push(excelRow);\n }\n if (!isNullOrUndefined(gObj.childGrid)) {\n gObj.isPrinting = true;\n var exportType = (!isNullOrUndefined(excelExportProperties) && excelExportProperties.exportType) ?\n excelExportProperties.exportType : 'AllPages';\n var returnVal = this.helper.createChildGrid(gObj, row, exportType, this.gridPool);\n var childGridObj = returnVal.childGrid;\n var element = returnVal.element;\n childGridObj.actionFailure =\n helper.failureHandler(this.gridPool, childGridObj, this.globalResolve);\n childGridObj.childGridLevel = gObj.childGridLevel + 1;\n var args = { childGrid: childGridObj, row: row, exportProperties: excelExportProperties };\n this.parent.trigger(events.exportDetailDataBound, args);\n childGridObj.beforeDataBound = this.childGridCell(excelRow, childGridObj, excelExportProperties, row);\n childGridObj.appendTo(element);\n }\n gObj.notify(events.exportRowDataBound, { rowObj: row, type: 'excel', excelRows: excelRows });\n }\n return startIndex;\n };\n ExcelExport.prototype.childGridCell = function (excelRow, childGridObj, excelExportProps, gRow) {\n var _this = this;\n return function (result) {\n childGridObj.beforeDataBound = null;\n result.cancel = true;\n if (result.result.length === 0) {\n result.result = [''];\n }\n excelRow.childRows = _this.processGridExport(childGridObj, excelExportProps, result);\n var intent = _this.parent.groupSettings.columns.length;\n var rows = excelRow.childRows;\n for (var i = 0; i < rows.length; i++) {\n rows[i].grouping = { outlineLevel: intent + childGridObj.childGridLevel,\n isCollapsed: !gRow.isExpand, isHidden: !gRow.isExpand };\n }\n childGridObj.destroy();\n detach(childGridObj.element);\n _this.gridPool[childGridObj.id] = true;\n _this.helper.checkAndExport(_this.gridPool, _this.globalResolve);\n return excelRow;\n };\n };\n // tslint:disable-next-line:max-line-length\n ExcelExport.prototype.processAggregates = function (gObj, rec, excelRows, currentViewRecords, indent, byGroup) {\n var summaryModel = new SummaryModelGenerator(gObj);\n var columns = summaryModel.getColumns();\n columns = columns.filter(function (col) { return isNullOrUndefined(col.commands) && col.type !== 'checkbox'; });\n if (gObj.aggregates.length && this.parent !== gObj) {\n gObj.aggregateModule.prepareSummaryInfo();\n }\n var data = undefined;\n if (!isNullOrUndefined(currentViewRecords)) {\n data = currentViewRecords;\n }\n else {\n data = rec;\n }\n if (indent === undefined) {\n indent = 0;\n }\n if (gObj.groupSettings.columns.length > 0 && byGroup) {\n var groupSummaryModel = new GroupSummaryModelGenerator(gObj);\n var groupSummaryRows = groupSummaryModel.generateRows(data, { level: data.level });\n if (groupSummaryRows.length > 0) {\n excelRows = this.fillAggregates(gObj, groupSummaryRows, indent, excelRows);\n }\n }\n else {\n indent = gObj.groupSettings.columns.length > 0 && !byGroup ? gObj.groupSettings.columns.length : indent;\n var sRows = summaryModel.generateRows(data, rec.aggregates, null, null, columns);\n if (sRows.length > 0 && !byGroup) {\n excelRows = this.fillAggregates(gObj, sRows, indent, excelRows);\n }\n }\n return excelRows;\n };\n // tslint:disable-next-line:max-line-length\n ExcelExport.prototype.fillAggregates = function (gObj, rows, indent, excelRows, customIndex) {\n for (var _i = 0, rows_2 = rows; _i < rows_2.length; _i++) {\n var row = rows_2[_i];\n var cells = [];\n var isEmpty = true;\n var index = 0;\n for (var _a = 0, _b = row.cells; _a < _b.length; _a++) {\n var cell = _b[_a];\n /* tslint:disable-next-line:no-any */\n var eCell = {};\n if (cell.cellType === CellType.DetailFooterIntent) {\n continue;\n }\n if ((cell.visible || this.includeHiddenColumn)) {\n index++;\n if (cell.isDataCell) {\n isEmpty = false;\n var footerTemplate = !isNullOrUndefined(cell.column.footerTemplate);\n var groupFooterTemplate = !isNullOrUndefined(cell.column.groupFooterTemplate);\n var groupCaptionTemplate = !isNullOrUndefined(cell.column.groupCaptionTemplate);\n eCell.index = index + indent + gObj.childGridLevel;\n if (footerTemplate) {\n eCell.value = this.getAggreateValue(CellType.Summary, cell.column.footerTemplate, cell, row);\n }\n else if (groupFooterTemplate) {\n eCell.value = this.getAggreateValue(CellType.GroupSummary, cell.column.groupFooterTemplate, cell, row);\n }\n else if (groupCaptionTemplate) {\n eCell.value = this.getAggreateValue(CellType.CaptionSummary, cell.column.groupCaptionTemplate, cell, row);\n }\n else {\n for (var _c = 0, _d = Object.keys(row.data[cell.column.field]); _c < _d.length; _c++) {\n var key = _d[_c];\n if (key === cell.column.type) {\n if (!isNullOrUndefined(row.data[cell.column.field].Sum)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - sum\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Average)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - average\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Max)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - max\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Min)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - min\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Count)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - count\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].TrueCount)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - truecount\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].FalseCount)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - falsecount\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Custom)) {\n eCell.value = row.data[cell.column.field].Custom;\n }\n }\n }\n }\n eCell.style = this.getCaptionThemeStyle(this.theme); //{ name: gObj.element.id + 'column' + index };\n this.aggregateStyle(cell.column, eCell.style, cell.column.field);\n var gridCellStyle = cell.attributes.style;\n if (gridCellStyle.textAlign) {\n eCell.style.hAlign = gridCellStyle.textAlign.toLowerCase();\n }\n var args = {\n row: row,\n type: footerTemplate ? 'Footer' : groupFooterTemplate ? 'GroupFooter' : 'GroupCaption',\n style: eCell\n };\n this.parent.trigger(events.excelAggregateQueryCellInfo, args);\n cells.push(eCell);\n }\n else {\n if (customIndex === undefined) {\n eCell.index = index + indent + gObj.childGridLevel;\n eCell.style = this.getCaptionThemeStyle(this.theme); //{ name: gObj.element.id + 'column' + index };\n cells.push(eCell);\n }\n }\n }\n }\n if (!isNullOrUndefined(customIndex)) {\n excelRows.push({ index: customIndex, cells: cells });\n }\n else {\n var row_1 = {};\n if (this.groupedColLength < 8 && this.groupedColLength > 0) {\n var dummyOutlineLevel = 'outlineLevel';\n var dummyGrouping = 'grouping';\n var level = excelRows[excelRows.length - 1][dummyGrouping][dummyOutlineLevel];\n var grouping = { outlineLevel: level, isCollapsed: true };\n row_1 = { index: this.rowLength++, cells: cells, grouping: grouping };\n }\n else {\n row_1 = { index: this.rowLength++, cells: cells };\n }\n if (!isEmpty) {\n excelRows.push(row_1);\n }\n }\n }\n return excelRows;\n };\n ExcelExport.prototype.aggregateStyle = function (col, style, field) {\n var column = this.parent.getColumnByField(field);\n if (typeof col.format === 'object') {\n var format = col.format;\n style.numberFormat = !isNullOrUndefined(format.format) ? format.format : format.skeleton;\n if (!isNullOrUndefined(format.type)) {\n style.type = format.type.toLowerCase();\n }\n }\n else {\n style.numberFormat = col.format;\n }\n if (!isNullOrUndefined(column) && isNullOrUndefined(style.type)) {\n style.type = column.type.toLowerCase();\n }\n };\n ExcelExport.prototype.getAggreateValue = function (cellType, template, cell, row) {\n var templateFn = {};\n templateFn[getEnumValue(CellType, cell.cellType)] = compile(template);\n var txt;\n var data = row.data[cell.column.field ? cell.column.field : cell.column.columnName];\n if (this.parent.isReact || this.parent.isVue) {\n txt = (templateFn[getEnumValue(CellType, cell.cellType)](data, this.parent));\n if (this.parent.isReact) {\n this.parent.renderTemplates();\n }\n }\n else {\n txt = (templateFn[getEnumValue(CellType, cell.cellType)](data));\n }\n return txt[0].textContent;\n };\n ExcelExport.prototype.mergeOptions = function (JSON1, JSON2) {\n var result = {};\n var attrname = Object.keys(JSON1);\n for (var index = 0; index < attrname.length; index++) {\n if (attrname[index] !== 'name') {\n result[attrname[index]] = JSON1[attrname[index]];\n }\n }\n attrname = Object.keys(JSON2);\n for (var index = 0; index < attrname.length; index++) {\n if (attrname[index] !== 'name') {\n result[attrname[index]] = JSON2[attrname[index]];\n }\n }\n return result;\n };\n ExcelExport.prototype.getColumnStyle = function (gObj, columnIndex) {\n var index = 0;\n for (var _i = 0, _a = this.styles; _i < _a.length; _i++) {\n var style = _a[_i];\n if (style.name === gObj.element.id + 'column' + columnIndex) {\n return index;\n }\n index++;\n }\n return undefined;\n };\n ExcelExport.prototype.processHeaderContent = function (gObj, headerRow, indent, excelRows) {\n var rowIndex = 1;\n var gridRows = headerRow.rows;\n // Column collection with respect to the records in the grid\n var gridColumns = headerRow.columns;\n var spannedCells = [];\n if (indent > 0) {\n var index = 0;\n while (index !== indent) {\n this.columns.push({ index: index + 1, width: 30 });\n index++;\n }\n }\n for (var row = 0; row < gridRows.length; row++) {\n var currentCellIndex = 1 + indent;\n var cells = [];\n for (var column = 0; column < gridRows[row].cells.length; column++) {\n /* tslint:disable-next-line:no-any */\n var style = {};\n var cell = {};\n var gridCell = gridRows[row].cells[column];\n if (gridCell.cellType === CellType.HeaderIndent || gridCell.cellType === CellType.DetailHeader) {\n continue;\n }\n var result = { contains: true, index: 1 };\n while (result.contains) {\n result = this.getIndex(spannedCells, rowIndex, currentCellIndex);\n currentCellIndex = result.index;\n if (!result.contains) {\n cell.index = result.index + gObj.childGridLevel;\n break;\n }\n }\n if (!isNullOrUndefined(gridCell.rowSpan) && gridCell.rowSpan !== 1) {\n cell.rowSpan = gridCell.rowSpan;\n for (var i = rowIndex; i < gridCell.rowSpan + rowIndex; i++) {\n var spannedCell = { rowIndex: 0, columnIndex: 0 };\n spannedCell.rowIndex = i;\n spannedCell.columnIndex = currentCellIndex;\n spannedCells.push(spannedCell);\n }\n }\n if (!isNullOrUndefined(gridCell.colSpan) && gridCell.colSpan !== 1) {\n cell.colSpan = gridCell.colSpan;\n currentCellIndex = currentCellIndex + cell.colSpan - 1;\n }\n cell.value = gridCell.column.headerText;\n style = this.getHeaderThemeStyle(this.theme);\n if (!isNullOrUndefined(gridCell.column.textAlign)) {\n style.hAlign = gridCell.column.textAlign.toLowerCase();\n }\n if (!isNullOrUndefined(gridCell.column.headerTextAlign)) {\n style.hAlign = gridCell.column.headerTextAlign.toLowerCase();\n }\n var excelHeaderCellArgs = { cell: cell, gridCell: gridCell, style: style };\n gObj.trigger(events.excelHeaderQueryCellInfo, excelHeaderCellArgs);\n cell.style = excelHeaderCellArgs.style;\n cells.push(cell);\n currentCellIndex++;\n }\n excelRows.push({ index: this.rowLength++, cells: cells });\n }\n for (var col = 0; col < gridColumns.length; col++) {\n this.parseStyles(gObj, gridColumns[col], this.getRecordThemeStyle(this.theme), indent + col + 1);\n }\n return excelRows;\n };\n ExcelExport.prototype.getHeaderThemeStyle = function (theme) {\n var style = {};\n style.fontSize = 12;\n style.borders = { color: '#E0E0E0' };\n style.bold = true;\n if (!isNullOrUndefined(theme) && !isNullOrUndefined(theme.header)) {\n style = this.updateThemeStyle(theme.header, style);\n }\n return style;\n };\n ExcelExport.prototype.updateThemeStyle = function (themestyle, style) {\n return extend(style, themestyle);\n };\n ExcelExport.prototype.getCaptionThemeStyle = function (theme) {\n var style = {};\n style.fontSize = 13;\n style.backColor = '#F6F6F6';\n if (!isNullOrUndefined(theme) && !isNullOrUndefined(theme.caption)) {\n style = this.updateThemeStyle(theme.caption, style);\n }\n return style;\n };\n ExcelExport.prototype.getRecordThemeStyle = function (theme) {\n var style = {};\n style.fontSize = 13;\n style.borders = { color: '#E0E0E0' };\n if (!isNullOrUndefined(theme) && !isNullOrUndefined(theme.record)) {\n style = this.updateThemeStyle(theme.record, style);\n }\n return style;\n };\n ExcelExport.prototype.processExcelHeader = function (header) {\n if (!isNullOrUndefined(header.rows) && (this.expType === 'NewSheet' || this.rowLength === 1)) {\n var noRows = void 0;\n if (header.headerRows === undefined) {\n this.rowLength = header.rows.length;\n }\n else {\n this.rowLength = header.headerRows;\n }\n if (this.rowLength < header.rows.length) {\n noRows = this.rowLength;\n }\n else {\n noRows = header.rows.length;\n }\n this.rowLength++;\n for (var row = 0; row < noRows; row++) {\n var json = header.rows[row];\n //Row index\n if (!(json.index !== null && !isNullOrUndefined(json.index))) {\n json.index = (row + 1);\n }\n this.updatedCellIndex(json);\n }\n }\n };\n ExcelExport.prototype.updatedCellIndex = function (json) {\n var cellsLength = json.cells.length;\n for (var cellId = 0; cellId < cellsLength; cellId++) {\n var jsonCell = json.cells[cellId];\n //cell index\n if (!(jsonCell.index !== null && !isNullOrUndefined(jsonCell.index))) {\n jsonCell.index = (cellId + 1);\n }\n }\n this.rows.push(json);\n };\n ExcelExport.prototype.processExcelFooter = function (footer) {\n if (!isNullOrUndefined(footer.rows)) {\n var noRows = void 0;\n if (footer.footerRows === undefined) {\n this.rowLength += footer.rows.length;\n }\n else {\n if (footer.footerRows > footer.rows.length) {\n this.rowLength += (footer.footerRows - footer.rows.length);\n noRows = footer.rows.length;\n }\n else {\n noRows = footer.footerRows;\n }\n }\n for (var row = 0; row < noRows; row++) {\n var json = footer.rows[row];\n //Row index\n if (json.index === null || json.index === undefined) {\n json.index = this.rowLength++;\n }\n else {\n json.index += this.rowLength;\n }\n this.updatedCellIndex(json);\n }\n }\n };\n ExcelExport.prototype.getIndex = function (spannedCells, rowIndex, columnIndex) {\n for (var _i = 0, spannedCells_1 = spannedCells; _i < spannedCells_1.length; _i++) {\n var spannedCell = spannedCells_1[_i];\n if ((spannedCell.rowIndex === rowIndex) && (spannedCell.columnIndex === columnIndex)) {\n columnIndex = columnIndex + 1;\n return { contains: true, index: columnIndex };\n }\n }\n return { contains: false, index: columnIndex };\n };\n ExcelExport.prototype.parseStyles = function (gObj, col, style, index) {\n if (!isNullOrUndefined(col.format)) {\n if (typeof col.format === 'object') {\n var format = col.format;\n style.numberFormat = !isNullOrUndefined(format.format) ? format.format : format.skeleton;\n if (!isNullOrUndefined(format.type)) {\n style.type = format.type.toLowerCase();\n }\n }\n else {\n style.numberFormat = col.format;\n style.type = col.type;\n }\n }\n if (!isNullOrUndefined(col.textAlign)) {\n style.hAlign = col.textAlign.toLowerCase();\n }\n if (Object.keys(style).length > 0) {\n style.name = gObj.element.id + 'column' + index;\n this.styles.push(style);\n }\n if (!isNullOrUndefined(col.width) && col.width !== 'auto') {\n this.columns.push({ index: index + gObj.childGridLevel, width: typeof col.width === 'number' ?\n col.width : this.helper.getConvertedWidth(col.width) });\n }\n };\n /**\n * To destroy the excel export\n * @return {void}\n * @hidden\n */\n ExcelExport.prototype.destroy = function () {\n //destroy for exporting\n };\n return ExcelExport;\n}());\nexport { ExcelExport };\n","import { Browser } from \"@syncfusion/ej2-base\";\r\n\r\nexport default {\r\n computed: {\r\n isMobileDevice() {\r\n return Browser.isDevice;\r\n },\r\n\r\n permissions() {\r\n var perm = null;\r\n var menu = this.$store.getters.userPermissions;\r\n if (menu != undefined && menu != null && menu.length > 0) {\r\n perm = menu.find(\r\n el => el.route.toLowerCase() == this.$route.fullPath.toLowerCase()\r\n );\r\n }\r\n return perm;\r\n },\r\n\r\n commands() {\r\n var canEdit = this.hasPermission(\"CanEdit\");\r\n var canView = this.hasPermission(\"CanView\");\r\n var canDelete = this.hasPermission(\"CanDelete\");\r\n\r\n var cssEdit = canEdit\r\n ? \"e-flat e-noback editar\"\r\n : \"e-flat e-noback not-allowed editar\";\r\n var cssView = canView\r\n ? \"e-flat e-noback consultar\"\r\n : \"e-flat e-noback not-allowed consultar\";\r\n var cssDelete = canDelete\r\n ? \"e-flat e-noback eliminar\"\r\n : \"e-flat e-noback not-allowed eliminar\";\r\n\r\n return [\r\n {\r\n type: \"Consultar\",\r\n buttonOption: {\r\n iconCss: \"e-icons e-view inline-command\",\r\n cssClass: cssView,\r\n click: this.viewTool_click,\r\n disabled: !canView\r\n }\r\n },\r\n {\r\n type: \"Editar\",\r\n buttonOption: {\r\n iconCss: \"e-icons e-edit inline-command\",\r\n cssClass: cssEdit,\r\n click: this.editTool_click,\r\n disabled: !canEdit\r\n }\r\n },\r\n {\r\n type: \"Eliminar\",\r\n buttonOption: {\r\n iconCss: \"e-icons e-delete inline-command\",\r\n cssClass: cssDelete,\r\n click: this.deleteTool_click,\r\n disabled: !canDelete\r\n }\r\n }\r\n ];\r\n }\r\n },\r\n created() {},\r\n mounted() {\r\n /*\r\n console.log(\"mounted mixin\");\r\n this.permissions = this.updatePermissions();\r\n console.log(this.permissions);\r\n */\r\n },\r\n data() {\r\n return {\r\n toolbar: []\r\n //permissions: {}\r\n };\r\n },\r\n methods: {\r\n updatePermissions() {\r\n var perm = null;\r\n var menu = this.$store.getters.userPermissions;\r\n if (menu != undefined && menu != null) {\r\n perm = menu.find(\r\n el => el.route.toLowerCase() == this.$route.fullPath.toLowerCase()\r\n );\r\n }\r\n return JSON.parse(JSON.stringify(perm));\r\n },\r\n hasPermission(perm) {\r\n if (this.permissions == null || this.permissions == undefined)\r\n return false;\r\n\r\n //var hasPerm = this.permissions.find()\r\n var pList = this.permissions.menuPermissions ?? [];\r\n\r\n var hasPerm = pList.find(x => x == perm);\r\n return hasPerm == perm ?? false;\r\n },\r\n setDefaultToolbar() {\r\n if (this.hasPermission(\"CanCreate\")) {\r\n this.toolbar.push({\r\n text: \"Nuevo\",\r\n tooltipText: \"Nuevo Registro\",\r\n prefixIcon: \"e-new\",\r\n id: \"addTool\"\r\n });\r\n }\r\n\r\n if (this.isMobileDevice) {\r\n if (this.hasPermission(\"CanView\")) {\r\n this.toolbar.push({\r\n text: \"Consultar\",\r\n tooltipText: \"Consultar Registro\",\r\n prefixIcon: \"e-view\",\r\n id: \"viewTool\"\r\n });\r\n }\r\n if (this.hasPermission(\"CanEdit\")) {\r\n this.toolbar.push({\r\n text: \"Editar\",\r\n tooltipText: \"Editar Registro\",\r\n prefixIcon: \"e-edit\",\r\n id: \"editTool\"\r\n });\r\n }\r\n\r\n if (this.hasPermission(\"CanDelete\")) {\r\n this.toolbar.push({\r\n text: \"Borrar\",\r\n tooltipText: \"Borrar Registro\",\r\n prefixIcon: \"e-delete\",\r\n id: \"deleteTool\"\r\n });\r\n }\r\n }\r\n\r\n if (this.hasPermission(\"CanExport\")) {\r\n this.toolbar.push({\r\n text: \"Exportar\",\r\n tooltipText: \"Exportar a Excel\",\r\n prefixIcon: \"e-excelexport\",\r\n id: \"exportTool\"\r\n });\r\n }\r\n this.toolbar.push({\r\n text: \"Recargar\",\r\n tooltipText: \"Recargar Información\",\r\n prefixIcon: \"e-reload\",\r\n id: \"reloadTool\"\r\n });\r\n }\r\n }\r\n};\r\n","import { print as printWindow, createElement, detach, classList, selectAll, extend } from '@syncfusion/ej2-base';\nimport { getPrintGridModel } from '../base/util';\nimport { Grid } from '../base/grid';\nimport * as events from '../base/constant';\nimport { Deferred } from '@syncfusion/ej2-data';\n/**\n * @hidden\n */\nexport function getCloneProperties() {\n return ['aggregates', 'allowGrouping', 'allowFiltering', 'allowMultiSorting', 'allowReordering', 'allowSorting',\n 'allowTextWrap', 'childGrid', 'columns', 'currentViewData', 'dataSource', 'detailTemplate', 'enableAltRow',\n 'enableColumnVirtualization', 'filterSettings', 'gridLines',\n 'groupSettings', 'height', 'locale', 'pageSettings', 'printMode', 'query', 'queryString', 'enableRtl',\n 'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'allowPaging', 'hierarchyPrintMode', 'searchSettings',\n 'queryCellInfo', 'beforeDataBound'];\n}\n/**\n *\n * The `Print` module is used to handle print action.\n */\nvar Print = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n * @hidden\n */\n function Print(parent, scrollModule) {\n this.isAsyncPrint = false;\n this.defered = new Deferred();\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.isContentReady(), this);\n this.parent.addEventListener(events.actionBegin, this.actionBegin.bind(this));\n this.parent.on(events.onEmpty, this.onEmpty.bind(this));\n this.parent.on(events.hierarchyPrint, this.hierarchyPrint, this);\n this.scrollModule = scrollModule;\n }\n Print.prototype.isContentReady = function () {\n var _this = this;\n if (this.isPrintGrid() && (this.parent.hierarchyPrintMode === 'None' || !this.parent.childGrid)) {\n return this.contentReady;\n }\n return function () {\n _this.defered.promise.then(function () {\n _this.contentReady();\n });\n if (_this.isPrintGrid()) {\n _this.hierarchyPrint();\n }\n };\n };\n Print.prototype.hierarchyPrint = function () {\n this.removeColGroup(this.parent);\n var printGridObj = window.printGridObj;\n if (printGridObj && !printGridObj.element.querySelector('[aria-busy=true')) {\n printGridObj.printModule.defered.resolve();\n }\n };\n /**\n * By default, prints all the Grid pages and hides the pager.\n * > You can customize print options using the\n * [`printMode`](grid/#printmode-string/).\n * @return {void}\n */\n Print.prototype.print = function () {\n this.renderPrintGrid();\n this.printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');\n this.printWind.moveTo(0, 0);\n this.printWind.resizeTo(screen.availWidth, screen.availHeight);\n };\n Print.prototype.onEmpty = function () {\n if (this.isPrintGrid()) {\n this.contentReady();\n }\n };\n Print.prototype.actionBegin = function () {\n if (this.isPrintGrid()) {\n this.isAsyncPrint = true;\n }\n };\n Print.prototype.renderPrintGrid = function () {\n var gObj = this.parent;\n var element = createElement('div', {\n id: this.parent.element.id + '_print', className: gObj.element.className + ' e-print-grid'\n });\n document.body.appendChild(element);\n var printGrid = new Grid(getPrintGridModel(gObj, gObj.hierarchyPrintMode));\n if (gObj.isFrozenGrid() && !gObj.getFrozenColumns()) {\n for (var i = 0; i < printGrid.columns.length; i++) {\n printGrid.columns[i] = extend({}, printGrid.columns[i]);\n printGrid.columns[i].freeze = undefined;\n }\n }\n /* tslint:disable-next-line:no-any */\n if (this.parent.isAngular) {\n /* tslint:disable-next-line:no-any */\n printGrid.viewContainerRef = this.parent.viewContainerRef;\n }\n /* tslint:disable:no-empty */\n printGrid.load = function () { };\n printGrid.query = gObj.getQuery().clone();\n window.printGridObj = printGrid;\n printGrid.isPrinting = true;\n var modules = printGrid.getInjectedModules();\n var injectedModues = gObj.getInjectedModules();\n if (!modules || modules.length !== injectedModues.length) {\n printGrid.setInjectedModules(injectedModues);\n }\n gObj.notify(events.printGridInit, { element: element, printgrid: printGrid });\n this.parent.log('exporting_begin', this.getModuleName());\n printGrid.registeredTemplate = this.parent.registeredTemplate;\n printGrid.appendTo(element);\n printGrid.trigger = gObj.trigger;\n };\n Print.prototype.contentReady = function () {\n if (this.isPrintGrid()) {\n var gObj = this.parent;\n if (this.isAsyncPrint) {\n this.printGrid();\n return;\n }\n var args = {\n requestType: 'print',\n element: gObj.element,\n selectedRows: gObj.getContentTable().querySelectorAll('tr[aria-selected=\"true\"]'),\n cancel: false,\n hierarchyPrintMode: gObj.hierarchyPrintMode\n };\n if (!this.isAsyncPrint) {\n gObj.trigger(events.beforePrint, args);\n }\n if (args.cancel) {\n detach(gObj.element);\n return;\n }\n if (!this.isAsyncPrint) {\n this.printGrid();\n }\n }\n };\n Print.prototype.printGrid = function () {\n var gObj = this.parent;\n // Height adjustment on print grid\n if (gObj.height !== 'auto') { // if scroller enabled\n var cssProps = this.scrollModule.getCssProperties();\n var contentDiv = gObj.element.querySelector('.e-content');\n var headerDiv = gObj.element.querySelector('.e-gridheader');\n contentDiv.style.height = 'auto';\n contentDiv.style.overflowY = 'auto';\n headerDiv.style[cssProps.padding] = '';\n headerDiv.firstElementChild.style[cssProps.border] = '';\n }\n // Grid alignment adjustment on grouping\n if (gObj.allowGrouping) {\n if (!gObj.groupSettings.columns.length) {\n gObj.element.querySelector('.e-groupdroparea').style.display = 'none';\n }\n else {\n this.removeColGroup(gObj);\n }\n }\n // hide horizontal scroll\n for (var _i = 0, _a = [].slice.call(gObj.element.querySelectorAll('.e-content')); _i < _a.length; _i++) {\n var element = _a[_i];\n element.style.overflowX = 'hidden';\n }\n // Hide the waiting popup\n var waitingPop = gObj.element.querySelectorAll('.e-spin-show');\n for (var _b = 0, _c = [].slice.call(waitingPop); _b < _c.length; _b++) {\n var element = _c[_b];\n classList(element, ['e-spin-hide'], ['e-spin-show']);\n }\n this.printGridElement(gObj);\n gObj.isPrinting = false;\n delete window.printGridObj;\n var args = {\n element: gObj.element\n };\n gObj.trigger(events.printComplete, args);\n this.parent.log('exporting_complete', this.getModuleName());\n };\n Print.prototype.printGridElement = function (gObj) {\n classList(gObj.element, ['e-print-grid-layout'], ['e-print-grid']);\n if (gObj.isPrinting) {\n detach(gObj.element);\n }\n this.printWind = printWindow(gObj.element, this.printWind);\n };\n Print.prototype.removeColGroup = function (gObj) {\n var depth = gObj.groupSettings.columns.length;\n var element = gObj.element;\n var id = '#' + gObj.element.id;\n if (!depth) {\n return;\n }\n var groupCaption = selectAll(id + \"captioncell.e-groupcaption\", element);\n var colSpan = groupCaption[depth - 1].getAttribute('colspan');\n for (var i = 0; i < groupCaption.length; i++) {\n groupCaption[i].setAttribute('colspan', colSpan);\n }\n var colGroups = selectAll(\"colgroup\" + id + \"colGroup\", element);\n var contentColGroups = selectAll('.e-content colgroup', element);\n this.hideColGroup(colGroups, depth);\n this.hideColGroup(contentColGroups, depth);\n };\n Print.prototype.hideColGroup = function (colGroups, depth) {\n for (var i = 0; i < colGroups.length; i++) {\n for (var j = 0; j < depth; j++) {\n colGroups[i].children[j].style.display = 'none';\n }\n }\n };\n /**\n * To destroy the print\n * @hidden\n */\n Print.prototype.isPrintGrid = function () {\n return this.parent.element.id.indexOf('_print') > 0 && this.parent.isPrinting;\n };\n /**\n * To destroy the print\n * @return {void}\n * @hidden\n */\n Print.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.contentReady, this.contentReady.bind(this));\n this.parent.removeEventListener(events.actionBegin, this.actionBegin.bind(this));\n this.parent.off(events.onEmpty, this.onEmpty.bind(this));\n this.parent.off(events.hierarchyPrint, this.hierarchyPrint);\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Print.prototype.getModuleName = function () {\n return 'print';\n };\n Print.printGridProp = getCloneProperties().concat([events.beforePrint, events.printComplete, events.load]);\n return Print;\n}());\nexport { Print };\n","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 { EventHandler, Property, Internationalization, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base';\nimport { cldrData, L10n, Component, getDefaultDateObject, rippleEffect, Event } from '@syncfusion/ej2-base';\nimport { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, blazorCultureFormats } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase } from '@syncfusion/ej2-lists';\nvar WRAPPERCLASS = 'e-time-wrapper';\nvar POPUP = 'e-popup';\nvar ERROR = 'e-error';\nvar POPUPDIMENSION = '240px';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar ROOT = 'e-timepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar RTL = 'e-rtl';\nvar CONTENT = 'e-content';\nvar SELECTED = 'e-active';\nvar HOVER = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar TIMEICON = 'e-time-icon';\nvar CLEARICON = 'e-clear-icon';\nvar FOCUS = 'e-input-focus';\nvar DEVICE = 'e-device';\nvar LISTCLASS = 'e-list-item';\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nvar OVERFLOW = 'e-time-overflow';\nvar OFFSETVAL = 4;\nvar EDITABLE = 'e-non-edit';\nvar wrapperAttributes = ['title', 'class', 'style'];\nexport var TimePickerBase;\n(function (TimePickerBase) {\n // tslint:disable-next-line\n function createListItems(createdEl, min, max, globalize, timeFormat, step) {\n var formatOptions;\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: timeFormat, type: 'time' };\n }\n else {\n formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };\n }\n var start;\n var end;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(createdEl, listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n * \n * \n * ```\n */\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.blazorTimeCollections = [];\n _this.disableItemCollection = [];\n _this.invalidValueString = null;\n _this.isBlazorServer = false;\n _this.isAngular = false;\n _this.preventChange = false;\n _this.timeOptions = options;\n return _this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.angularTag = null;\n this.formElement = closest(this.element, 'form');\n this.isBlazorServer = (isBlazor() && this.isServerRendered && this.getModuleName() === 'timepicker') ? true : false;\n if (!this.isBlazorServer) {\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n this.openPopupEventArgs = {\n appendTo: document.body\n };\n }\n };\n // element creation\n TimePicker.prototype.render = function () {\n if (!this.isBlazorServer) {\n this.initialize();\n this.createInputElement();\n this.updateHtmlAttributeToWrapper();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n }\n else {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n var parentElement = this.element.parentElement;\n this.inputWrapper = {\n container: parentElement,\n clearButton: parentElement.querySelector('.' + CLEARICON),\n buttons: [parentElement.querySelector('.' + TIMEICON)]\n };\n Input.bindInitialEvent({\n element: this.inputElement,\n floatLabelType: this.floatLabelType\n });\n if (this.showClearButton && this.inputWrapper.clearButton) {\n Input.wireClearBtnEvents(this.inputElement, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n }\n this.bindEvents();\n if (!this.isBlazorServer) {\n this.validateDisable();\n this.setValue(this.getFormattedValue(this.value));\n }\n this.anchor = this.inputElement;\n this.inputElement.setAttribute('value', this.inputElement.value);\n if (!this.isBlazorServer) {\n this.inputEleValue = this.getDateObject(this.inputElement.value);\n }\n this.renderComplete();\n };\n TimePicker.prototype.setTimeAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.clearIconState();\n };\n TimePicker.prototype.clearIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n else {\n addClass([this.inputWrapper.container], [EDITABLE]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.validationAttribute = function (target, input) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n input.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n this.checkInvalidValue(this.value);\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);\n this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.checkAttributes(false); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n };\n TimePicker.prototype.checkTimeFormat = function () {\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') {\n var skeletonString = this.format.skeleton;\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString });\n }\n else {\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' });\n }\n }\n else {\n this.formatString = null;\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n var updatedCssClassesValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassesValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassesValue,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n },\n buttons: [' e-input-group-icon e-time-icon e-icons']\n }, this.createElement);\n this.inputWrapper.container.style.width = this.setWidth(this.width);\n attributes(this.inputElement, {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n TimePicker.prototype.getCldrDateTimeFormat = function () {\n var culture = new Internationalization(this.locale);\n var cldrTime;\n var dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.CldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.checkInvalidValue = function (value) {\n var isInvalid = false;\n if (typeof value !== 'object' && !isNullOrUndefined(value)) {\n var valueString = value;\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n var valueExpression = null;\n var valueExp = null;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n else if (typeof value === 'string') {\n if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {\n valueExpression = this.setCurrentDate(this.getDateObject(value));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n }));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n }));\n }\n }\n }\n }\n valueExp = this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n });\n valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;\n if (isNullOrUndefined(valueExpression) && valueString.replace(/\\s/g, '').length) {\n var extISOString = null;\n var basicISOString = null;\n // tslint:disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // tslint:disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || ((/^[a-zA-Z0-9- ]*$/).test(value)) || isNaN(+new Date('' + valueString))) {\n isInvalid = true;\n }\n else {\n valueExpression = new Date('' + valueString);\n }\n }\n if (isInvalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n this.initValue = null;\n }\n else {\n this.setProperties({ value: valueExpression }, true);\n this.initValue = this.value;\n }\n }\n };\n TimePicker.prototype.CldrFormat = function (type) {\n var cldrDateTimeString;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTimeString = isBlazor() ? this.getBlazorCultureFormat('t') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTimeString;\n };\n // destroy function\n TimePicker.prototype.destroy = function () {\n if (this.isBlazorServer) {\n this.unBindEvents();\n }\n else {\n this.hide();\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) ?\n this.inputElement.setAttribute('tabindex', this.tabIndex) : this.inputElement.removeAttribute('tabindex');\n this.ensureInputAttribute();\n this.enableElement([this.inputElement]);\n this.inputElement.classList.remove('e-input');\n if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {\n Input.setEnabled(true, this.inputElement, this.floatLabelType);\n }\n }\n if (this.inputWrapper.container) {\n detach(this.inputWrapper.container);\n }\n this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;\n this.liCollections = this.timeCollections = this.disableItemCollection = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n _super.prototype.destroy.call(this);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n var propertyList = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n propertyList[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < propertyList.length; i++) {\n if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) {\n this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i]));\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]);\n }\n }\n else {\n this.inputElement.removeAttribute(propertyList[i]);\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n }\n }\n };\n //popup creation\n TimePicker.prototype.popupCreation = function () {\n if (!this.isBlazorServer) {\n this.popupWrapper = this.createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.generateList();\n append([this.listWrapper], this.popupWrapper);\n }\n this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);\n }\n else {\n this.popupWrapper = this.inputWrapper.container.nextElementSibling;\n this.generateList();\n }\n this.addSelection();\n this.renderPopup();\n detach(this.popupWrapper);\n };\n TimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.popupWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n TimePicker.prototype.generateList = function () {\n if (!this.isBlazorServer) {\n this.createListItems();\n }\n else {\n this.listWrapper = this.popupWrapper.querySelector('.e-content');\n }\n this.wireListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n if (this.isBlazorServer) {\n this.blazorTimeCollections = [];\n for (var index = 0; index < this.liCollections.length; index++) {\n this.blazorTimeCollections.push(this.liCollections[index].getAttribute('data-value'));\n }\n }\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n enableRtl: this.enableRtl,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n offsetY: OFFSETVAL,\n open: function () {\n _this.popupWrapper.style.visibility = 'visible';\n addClass([_this.inputWrapper.buttons[0]], SELECTED);\n }, close: function () {\n removeClass([_this.inputWrapper.buttons[0]], SELECTED);\n _this.unWireListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n if (!_this.isBlazorServer) {\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\n }\n _this.listWrapper = _this.popupWrapper = _this.listTag = undefined;\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (!Browser.isDevice) {\n this.popupObj.collision = { X: 'none', Y: 'flip' };\n }\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: isBlazor() ? 't' : 'medium', type: 'time' });\n }\n };\n TimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = !this.isNullOrEmpty(this.initValue);\n if (this.checkDateValue(dateValue)) {\n var date = value ? this.initValue.getDate() : DAY;\n var month = value ? this.initValue.getMonth() : MONTH;\n var year = value ? this.initValue.getFullYear() : YEAR;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());\n }\n }\n return null;\n };\n TimePicker.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassesValue = (this.htmlAttributes[key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassesValue !== '') {\n addClass([this.inputWrapper.container], updatedClassesValue.split(' '));\n }\n }\n else if (key === 'style') {\n var timeStyle = this.inputWrapper.container.getAttribute(key);\n timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.inputWrapper.container.setAttribute(key, timeStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n TimePicker.prototype.updateHtmlAttributeToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) {\n if (!isNullOrUndefined(cssClassOld)) {\n cssClassOld = (cssClassOld.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(cssClassNew)) {\n cssClassNew = (cssClassNew.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld);\n if (this.popupWrapper) {\n Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld);\n }\n };\n TimePicker.prototype.removeErrorClass = function () {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n };\n TimePicker.prototype.checkErrorState = function (val) {\n var value = this.getDateObject(val);\n if (this.validateState(value) && !this.invalidValueString) {\n this.removeErrorClass();\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n };\n TimePicker.prototype.validateInterval = function () {\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.enableElement([this.inputWrapper.buttons[0]]);\n }\n else {\n this.disableTimeIcon();\n }\n };\n TimePicker.prototype.disableTimeIcon = function () {\n this.disableElement([this.inputWrapper.buttons[0]]);\n this.hide();\n };\n TimePicker.prototype.disableElement = function (element) {\n addClass(element, DISABLED);\n };\n TimePicker.prototype.enableElement = function (element) {\n removeClass(element, DISABLED);\n };\n TimePicker.prototype.selectInputText = function () {\n this.inputElement.setSelectionRange(0, (this.inputElement).value.length);\n };\n TimePicker.prototype.setCursorToEnd = function () {\n this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length);\n };\n TimePicker.prototype.getMeridianText = function () {\n var meridian;\n if (this.locale === 'en' || this.locale === 'en-US') {\n meridian = getValue((isBlazor() ? 'dayPeriods.wide' : 'dayPeriods.format.wide'), getDefaultDateObject());\n }\n else {\n var gregorianFormat = (isBlazor() ? '.dates.dayPeriods.abbreviated' :\n '.dates.calendars.gregorian.dayPeriods.format.abbreviated');\n var mainVal = isBlazor() ? '' : 'main.';\n meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);\n }\n return meridian;\n };\n TimePicker.prototype.getCursorSelection = function () {\n var input = (this.inputElement);\n var start = 0;\n var end = 0;\n if (!isNaN(input.selectionStart)) {\n start = input.selectionStart;\n end = input.selectionEnd;\n }\n return { start: Math.abs(start), end: Math.abs(end) };\n };\n TimePicker.prototype.getActiveElement = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n return this.popupWrapper.querySelectorAll('.' + SELECTED);\n }\n else {\n return null;\n }\n };\n TimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n TimePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = (width.match(/px|%|em/)) ? width : formatUnit(width);\n }\n else {\n width = '100%';\n }\n return width;\n };\n TimePicker.prototype.setPopupWidth = function (width) {\n width = this.setWidth(width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var listHeight = this.getPopupHeight();\n var element;\n element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n var initialTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +\n this.blazorTimeCollections[0]).setMilliseconds(0) : this.timeCollections[0];\n var scrollTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +\n this.scrollTo.toLocaleTimeString()).setMilliseconds(0) :\n this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.getText = function () {\n return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);\n };\n TimePicker.prototype.getValue = function (value) {\n return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {\n format: this.cldrTimeFormat(), type: 'time'\n });\n };\n TimePicker.prototype.cldrDateFormat = function () {\n var cldrDate;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDate = isBlazor() ? (getValue('d', getValue(this.locale, blazorCultureFormats))) :\n (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\n };\n TimePicker.prototype.getBlazorCultureFormat = function (formatVal) {\n return (getValue(formatVal, getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a');\n };\n TimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.formatString)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('t') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.dateToNumeric = function () {\n var cldrTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :\n (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :\n (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));\n }\n return cldrTime;\n };\n TimePicker.prototype.getExactDateTime = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });\n }\n };\n TimePicker.prototype.setValue = function (value) {\n var time = this.checkValue(value);\n if (!this.strictMode && !this.validateState(time)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n if (this.isNullOrEmpty(time)) {\n this.initValue = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.initValue = this.compareFormatChange(time);\n }\n }\n this.updateInput(true, this.initValue);\n };\n TimePicker.prototype.compareFormatChange = function (value) {\n if (isNullOrUndefined(value)) {\n return null;\n }\n return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value);\n };\n TimePicker.prototype.updatePlaceHolder = function () {\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n };\n //event related functions\n TimePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n TimePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n // tslint:disable\n this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');\n // tslint:enable\n };\n TimePicker.prototype.updateBlazorTimeCollections = function (listData) {\n this.blazorTimeCollections = listData;\n };\n TimePicker.prototype.popupHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (!this.isBlazorServer) {\n e.preventDefault();\n }\n if (this.isPopupOpen() && !this.isBlazorServer) {\n this.closePopup(0, e);\n }\n else {\n this.inputElement.focus();\n this.show(e);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.readonly) {\n var curPos = this.getCursorSelection();\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n this.keyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n if (!this.isBlazorServer) {\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n }\n else {\n if (!this.isBlazorServer) {\n this.updateValue(this.inputElement.value, event);\n }\n else {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);\n }\n }\n this.hide();\n this.isNavigate = false;\n if (this.isPopupOpen()) {\n event.stopPropagation();\n }\n break;\n case 'open':\n if (this.isBlazorServer) {\n // tslint:disable\n this.interopAdaptor.invokeMethodAsync('OnPopupHide', true);\n // tslint:enable\n }\n else {\n this.show(event);\n }\n break;\n case 'escape':\n if (!this.isBlazorServer) {\n this.updateInputValue(this.objToString(this.value));\n this.previousState(this.value);\n }\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS)) {\n this.hide();\n }\n };\n TimePicker.prototype.closePopup = function (delay, e) {\n var _this = this;\n if (this.isPopupOpen() && this.popupWrapper) {\n var args = {\n popup: this.isBlazorServer ? null : this.popupObj,\n event: e || null,\n cancel: false,\n name: 'open'\n };\n removeClass([document.body], OVERFLOW);\n this.trigger('close', args, function (args) {\n if (!args.cancel) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: delay ? delay : 0\n };\n _this.popupObj.hide(new Animation(animModel));\n removeClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);\n if (_this.isBlazorServer) {\n _this.disposeServerPopup();\n // tslint:disable\n _this.inputWrapper.container.parentElement.insertBefore(_this.popupWrapper, _this.inputWrapper.container.nextElementSibling);\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n // tslint:enable\n _this.popupWrapper = _this.popupObj = null;\n }\n }\n if (Browser.isDevice && _this.modal) {\n _this.modal.style.display = 'none';\n _this.modal.outerHTML = '';\n _this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(_this.mobileTimePopupWrap)) {\n _this.mobileTimePopupWrap.remove();\n _this.mobileTimePopupWrap = null;\n }\n }\n if (Browser.isDevice && _this.allowEdit && !_this.readonly) {\n _this.inputElement.removeAttribute('readonly');\n }\n });\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n TimePicker.prototype.disposeServerPopup = function () {\n if (this.popupWrapper) {\n this.popupWrapper.style.visibility = 'hidden';\n this.popupWrapper.style.top = '-9999px';\n this.popupWrapper.style.left = '-9999px';\n this.popupWrapper.style.width = '0px';\n this.popupWrapper.style.height = '0px';\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.setProperties({ value: this.compareFormatChange(this.inputElement.value) }, true);\n this.initValue = this.valueWithMinutes = this.compareFormatChange(this.inputElement.value);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.compareFormatChange(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setHover(currentLi, HOVER);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(SELECTED)) {\n if (!this.isBlazorServer) {\n this.checkValue(li.getAttribute('data-value'));\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n else {\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.inputElement.setAttribute('value', li.getAttribute('data-value'));\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, false);\n this.addSelection();\n }\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n //protected function\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n this.updateInputValue(this.getValue(this.initValue));\n return this.inputElement.value;\n }\n else if (+minValue >= +value) {\n return this.getDateObject(minValue);\n }\n else if (+value >= +maxValue || +minValue === +maxValue) {\n return this.getDateObject(maxValue);\n }\n }\n else {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n if (!isNaN(+this.createDateObj(dateVal))) {\n return dateVal;\n }\n }\n }\n return dateVal;\n };\n TimePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler), this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyConfigure = extend(this.keyConfigure, this.keyConfigs);\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n if (this.showClearButton && this.inputElement) {\n EventHandler.add(this.inputElement, 'mousedown', this.mouseDownHandler, this);\n }\n }\n };\n TimePicker.prototype.formResetHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var timeValue = this.inputElement.getAttribute('value');\n var val = this.isBlazorServer ? this.inputEleValue : this.checkDateValue(this.inputEleValue);\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n val = null;\n timeValue = '';\n this.inputElement.setAttribute('value', '');\n }\n if (!this.isBlazorServer) {\n this.setProperties({ value: val }, true);\n this.prevDate = this.value;\n this.valueWithMinutes = this.value;\n this.initValue = this.value;\n }\n if (this.inputElement) {\n this.updateInputValue(timeValue);\n if (!this.isBlazorServer) {\n this.checkErrorState(timeValue);\n }\n this.prevValue = this.inputElement.value;\n }\n }\n };\n TimePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n TimePicker.prototype.unBindEvents = function () {\n if (this.inputWrapper) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler));\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n TimePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n };\n TimePicker.prototype.raiseClearedEvent = function (e) {\n var clearedArgs = {\n event: e\n };\n this.trigger('cleared', clearedArgs);\n };\n TimePicker.prototype.clearHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n if (!isNullOrUndefined(this.value)) {\n this.clear(e);\n }\n else {\n this.resetState();\n this.raiseClearedEvent(e);\n }\n if (this.isBlazorServer) {\n // tslint:disable\n this.interopAdaptor.invokeMethodAsync('OnValueCleared');\n // tslint:enable\n }\n if (this.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.clear = function (event) {\n if (!this.isBlazorServer) {\n this.setProperties({ value: null }, true);\n }\n this.initValue = null;\n this.resetState();\n this.raiseClearedEvent(event);\n if (!this.isBlazorServer) {\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.zIndex = this.zIndex;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['step', 'disabled', 'readonly', 'style', 'name', 'value', 'min', 'max', 'placeholder'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' || this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\n break;\n case 'readonly':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' || this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'placeholder':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if (!this.isBlazorServer) {\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n }\n break;\n case 'max':\n if (!this.isBlazorServer) {\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n }\n break;\n case 'value':\n if (!this.isBlazorServer) {\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.initValue = value;\n this.updateInput(false, this.initValue);\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n }\n break;\n }\n }\n }\n };\n TimePicker.prototype.setCurrentDate = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n return new Date(YEAR, MONTH, DAY, value.getHours(), value.getMinutes(), value.getSeconds());\n };\n TimePicker.prototype.getTextFormat = function () {\n var time = 0;\n if (this.cldrTimeFormat().split(' ')[0] === 'a' || this.cldrTimeFormat().indexOf('a') === 0) {\n time = 1;\n }\n else if (this.cldrTimeFormat().indexOf('a') < 0) {\n var strArray = this.cldrTimeFormat().split(' ');\n for (var i = 0; i < strArray.length; i++) {\n if (strArray[i].toLowerCase().indexOf('h') >= 0) {\n time = i;\n break;\n }\n }\n }\n return time;\n };\n TimePicker.prototype.updateValue = function (value, event) {\n var val;\n if (this.isNullOrEmpty(value)) {\n this.resetState();\n }\n else {\n val = this.checkValue(value);\n if (this.strictMode) {\n // this case set previous value to the text box when set invalid date\n var inputVal = (val === null && value.trim().length > 0) ?\n this.previousState(this.prevDate) : this.inputElement.value;\n this.updateInputValue(inputVal);\n }\n }\n this.checkValueChange(event, typeof value === 'string' ? false : true);\n };\n TimePicker.prototype.previousState = function (date) {\n var value = this.getDateObject(date);\n for (var i = 0; i < this.timeCollections.length; i++) {\n if (+value === this.timeCollections[i]) {\n this.activeIndex = i;\n this.selectedElement = this.liCollections[i];\n this.valueWithMinutes = new Date(this.timeCollections[i]);\n break;\n }\n }\n return this.prevValue;\n };\n TimePicker.prototype.resetState = function () {\n this.removeSelection();\n Input.setValue('', this.inputElement, this.floatLabelType, false);\n this.valueWithMinutes = this.activeIndex = null;\n if (!this.strictMode && !this.isBlazorServer) {\n this.checkErrorState(null);\n }\n };\n TimePicker.prototype.objToString = function (val) {\n if (isNullOrUndefined(this.checkDateValue(val))) {\n return null;\n }\n else {\n return this.globalize.formatDate(val, { format: this.cldrTimeFormat(), type: 'time' });\n }\n };\n TimePicker.prototype.checkValue = function (value) {\n if (!this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.validateValue(date, value);\n }\n this.resetState();\n return this.valueWithMinutes = null;\n };\n TimePicker.prototype.validateValue = function (date, value) {\n var time;\n var val = this.validateMinMax(value, this.min, this.max);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n this.updateInputValue(value_1);\n }\n else {\n this.updateInputValue(time);\n }\n return time;\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) || this.isBlazorServer ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n var collections = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? [] :\n this.blazorTimeCollections) : this.timeCollections;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(collections.length - 1, true);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value < this.timeCollections[i])) {\n var index = this.validLiElement(i);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value > this.timeCollections[i])) {\n var index = this.validLiElement(i, true);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n else {\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\n }\n }\n else {\n this.selectNextItem(event);\n }\n };\n TimePicker.prototype.selectNextItem = function (event) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);\n }\n else {\n this.elementValue(new Date(this.timeCollections[index]));\n }\n };\n TimePicker.prototype.findNextInBlazor = function (event) {\n var count = isNullOrUndefined(this.blazorTimeCollections) ? 0 : this.blazorTimeCollections.length;\n var index = 0;\n var value = this.createDateObj(this.inputElement.value);\n switch (event.action) {\n case 'home':\n this.activeIndex = index;\n break;\n case 'end':\n index = count - 1;\n this.activeIndex = index;\n break;\n case 'down':\n for (var i = 0; i < count; i++) {\n if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value < this.timeCollections[i])) {\n var index_1 = this.validLiElement(i);\n this.activeIndex = index_1;\n break;\n }\n else if (i === count - 1) {\n var index_2 = this.validLiElement(0);\n this.activeIndex = index_2;\n break;\n }\n }\n break;\n case 'up':\n for (var i = count - 1; i >= 0; i--) {\n if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value > this.timeCollections[i])) {\n var index_3 = this.validLiElement(i, true);\n this.activeIndex = index_3;\n break;\n }\n else if (i === 0) {\n var index_4 = this.validLiElement(count - 1);\n this.activeIndex = index_4;\n break;\n }\n }\n break;\n }\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n };\n TimePicker.prototype.elementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.checkValue(value);\n }\n };\n TimePicker.prototype.validLiElement = function (index, backward) {\n var elementIndex = null;\n if (this.isBlazorServer && isNullOrUndefined(this.popupWrapper)) {\n var items = this.blazorTimeCollections;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n elementIndex = i;\n break;\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n elementIndex = i;\n break;\n }\n }\n }\n }\n else {\n var items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :\n this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n var isCheck = true;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === 0) {\n if (isCheck) {\n index = i = items.length;\n isCheck = false;\n }\n }\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === items.length - 1) {\n if (isCheck) {\n index = i = -1;\n isCheck = false;\n }\n }\n }\n }\n }\n }\n return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n return;\n }\n var count = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? 0 :\n this.blazorTimeCollections.length) : this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (isNullOrUndefined(this.popupObj) && this.isBlazorServer) {\n if (isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);\n }\n else {\n this.findNextInBlazor(event);\n }\n }\n else {\n if (this.liCollections.length > 0) {\n if (this.isBlazorServer ? (isNullOrUndefined(this.activeIndex)) : (isNullOrUndefined(this.value) &&\n isNullOrUndefined(this.activeIndex))) {\n this.selectNextItem(event);\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\n }\n }\n }\n else {\n var nextItem = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (count) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;\n this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?\n false : true);\n if (!this.isBlazorServer) {\n nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n if (!this.isBlazorServer) {\n nextItem = this.timeCollections[index];\n }\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n if (!this.isBlazorServer) {\n nextItem = this.timeCollections[index];\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n else {\n this.elementValue(new Date(nextItem));\n }\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n if (!this.isBlazorServer) {\n this.selectInputText();\n }\n if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setScrollPosition();\n }\n };\n TimePicker.prototype.getCultureTimeObject = function (ld, c) {\n return isBlazor() ? (getValue('t', getValue(c, blazorCultureFormats))).replace(/tt/, 'a') :\n getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return isBlazor() ? (getValue('d', getValue(c, blazorCultureFormats))) :\n getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);\n };\n TimePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n TimePicker.prototype.unWireListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n if (!Browser.isDevice) {\n EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);\n }\n }\n };\n TimePicker.prototype.valueProcess = function (event, value) {\n var result = (isNullOrUndefined(this.checkDateValue(value))) ? null : value;\n if (+this.prevDate !== +result) {\n this.initValue = result;\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.changeEvent = function (e) {\n this.addSelection();\n this.updateInput(true, this.initValue);\n var eventArgs = {\n event: (e || null),\n value: this.value,\n text: (this.inputElement).value,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n eventArgs.value = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.prevDate = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.invalidValueString = null;\n this.checkErrorState(this.value);\n };\n TimePicker.prototype.updateInput = function (isUpdate, date) {\n if (isUpdate) {\n this.prevValue = this.getValue(date);\n }\n this.prevDate = this.valueWithMinutes = date;\n if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {\n this.setProperties({ value: date }, true);\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.checkErrorState(this.invalidValueString);\n this.updateInputValue(this.invalidValueString);\n }\n this.clearIconState();\n };\n TimePicker.prototype.setActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED);\n if (items.length) {\n removeClass(items, SELECTED);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if ((!this.isBlazorServer && this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))\n || (this.isBlazorServer && this.blazorTimeCollections[i] === this.blazorTimeCollections[this.activeIndex])) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n };\n TimePicker.prototype.addSelection = function () {\n this.selectedElement = null;\n this.removeSelection();\n this.setActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n TimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n TimePicker.prototype.createDateObj = function (val) {\n var formatStr = isBlazor() ?\n // tslint:disable-next-line\n 'M' + getDefaultDateObject().dateSeperator + 'd' + getDefaultDateObject().dateSeperator + 'yy'\n : null;\n var today = this.globalize.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n var value = null;\n if (typeof val === 'string') {\n if (val.toUpperCase().indexOf('AM') > -1 || val.toUpperCase().indexOf('PM') > -1) {\n today = this.defaultCulture.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.TimeParse(today, val);\n }\n }\n else {\n value = this.TimeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.TimeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var start;\n var end;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs, function (eventArgs) {\n if (eventArgs.isDisabled) {\n eventArgs.element.classList.add(DISABLED);\n }\n if (eventArgs.element.classList.contains(DISABLED)) {\n _this.disableItemCollection.push(eventArgs.element.getAttribute('data-value'));\n }\n });\n }\n };\n this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) ||\n (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.clearButton) &&\n target !== (this.inputWrapper && this.inputWrapper.container)) {\n if (this.isPopupOpen()) {\n this.hide();\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement)\n && (target === this.popupWrapper);\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.inputElement.tabIndex = -1;\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date(this.checkInValue(date.min)));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date(this.checkInValue(date.max)));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n TimePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this.isBlazorServer ? null : this,\n };\n this.trigger('blur', blurArguments);\n if (!this.isBlazorServer && this.getText() !== this.inputElement.value) {\n this.updateValue((this.inputElement).value, e);\n }\n else if (this.inputElement.value.trim().length === 0) {\n this.resetState();\n }\n if (this.isBlazorServer) {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);\n }\n this.cursorDetails = null;\n this.isNavigate = false;\n if (this.inputElement.value === '') {\n this.invalidValueString = null;\n }\n };\n /**\n * Focuses out the TimePicker textbox element.\n * @returns void\n */\n TimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this.isBlazorServer ? null : this\n };\n this.trigger('blur', blurArguments);\n }\n };\n TimePicker.prototype.isPopupOpen = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + ROOT)) {\n return true;\n }\n return false;\n };\n TimePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n var focusArguments = {\n model: this.isBlazorServer ? null : this\n };\n if (!this.readonly && !Browser.isDevice) {\n this.selectInputText();\n }\n this.trigger('focus', focusArguments);\n this.clearIconState();\n if (this.openOnFocus) {\n this.show();\n }\n };\n /**\n * Focused the TimePicker textbox element.\n * @returns void\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n var focusArguments = {\n model: this\n };\n }\n };\n /**\n * Hides the TimePicker popup.\n * @returns void\n\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n this.clearIconState();\n };\n /**\n * Opens the popup to show the list items.\n * @returns void\n\n */\n TimePicker.prototype.show = function (event) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupWrapper) {\n return;\n }\n else {\n this.popupCreation();\n if (Browser.isDevice && this.listWrapper) {\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n document.body.appendChild(this.modal);\n }\n if (Browser.isDevice) {\n this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });\n document.body.appendChild(this.mobileTimePopupWrap);\n }\n this.openPopupEventArgs = {\n popup: this.isBlazorServer ? null : (this.popupObj || null),\n cancel: false,\n event: event || null,\n name: 'open',\n appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body\n };\n var eventArgs = this.openPopupEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n if ((isBlazor() && _this.isServerRendered)) {\n eventArgs.popup = _this.popupObj || null;\n }\n _this.openPopupEventArgs = eventArgs;\n if (!_this.openPopupEventArgs.cancel && !_this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n if (_this.isBlazorServer) {\n _this.popupWrapper.style.visibility = '';\n _this.popupWrapper.style.width = _this.inputWrapper.container.offsetWidth + 'px';\n _this.popupWrapper.style.height = 'auto';\n }\n if (_this.isBlazorServer) {\n _this.openPopupEventArgs.popup = _this.popupObj;\n }\n _this.openPopupEventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupAlignment(_this.openPopupEventArgs);\n _this.setScrollPosition();\n if (!Browser.isDevice) {\n _this.inputElement.focus();\n }\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION,\n };\n _this.popupObj.refreshPosition(_this.anchor);\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n _this.setActiveDescendant();\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n addClass([_this.inputWrapper.container], FOCUS);\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);\n }\n else {\n _this.popupObj.destroy();\n if (_this.isBlazorServer) {\n _this.disposeServerPopup();\n // tslint:disable\n _this.inputWrapper.container.parentElement.insertBefore(_this.popupWrapper, _this.inputWrapper.container.nextElementSibling);\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n // tslint:enable\n }\n _this.popupWrapper = _this.listTag = undefined;\n _this.liCollections = _this.timeCollections = _this.disableItemCollection = [];\n _this.popupObj = null;\n }\n });\n }\n };\n TimePicker.prototype.setOverlayIndex = function (popupWrapper, timePopupElement, modal, isDevice) {\n if (isDevice && !isNullOrUndefined(timePopupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {\n var index = parseInt(timePopupElement.style.zIndex, 10) ? parseInt(timePopupElement.style.zIndex, 10) : 1000;\n modal.style.zIndex = (index - 1).toString();\n popupWrapper.style.zIndex = index.toString();\n }\n };\n TimePicker.prototype.formatValues = function (type) {\n var value;\n if (typeof type === 'number') {\n value = formatUnit(type);\n }\n else if (typeof type === 'string') {\n value = (type.match(/px|%|em/)) ? type : isNaN(parseInt(type, 10)) ? type : formatUnit(type);\n }\n return value;\n };\n TimePicker.prototype.popupAlignment = function (args) {\n args.popup.position.X = this.formatValues(args.popup.position.X);\n args.popup.position.Y = this.formatValues(args.popup.position.Y);\n if (!isNaN(parseFloat(args.popup.position.X)) || !isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.targetType = 'container';\n }\n if (!isNaN(parseFloat(args.popup.position.X))) {\n this.popupObj.offsetX = parseFloat(args.popup.position.X);\n }\n if (!isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.offsetY = parseFloat(args.popup.position.Y);\n }\n if (!Browser.isDevice) {\n switch (args.popup.position.X) {\n case 'left':\n break;\n case 'right':\n args.popup.offsetX = this.containerStyle.width;\n break;\n case 'center':\n args.popup.offsetX = -(this.containerStyle.width / 2);\n break;\n }\n switch (args.popup.position.Y) {\n case 'top':\n break;\n case 'bottom':\n break;\n case 'center':\n args.popup.offsetY = -(this.containerStyle.height / 2);\n break;\n }\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.inputWrapper.container;\n this.anchor = this.inputElement;\n this.popupObj.targetType = 'relative';\n }\n }\n else {\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.offsetY = 0;\n this.popupObj.targetType = 'container';\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n }\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To get component name\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n TimePicker.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 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n this.setTimeAllowEdit();\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'allowEdit':\n this.setTimeAllowEdit();\n break;\n case 'enableRtl':\n if (!this.isBlazorServer) {\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'min':\n case 'max':\n if (!this.isBlazorServer) {\n this.getProperty(newProp, prop);\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.updatePlaceHolder();\n if (!this.isBlazorServer) {\n this.setValue(this.value);\n }\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkTimeFormat();\n if (!this.isBlazorServer) {\n this.setValue(this.value);\n }\n break;\n case 'value':\n if (!this.isBlazorServer) {\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n if (!this.invalidValueString) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);\n newProp.value = this.value;\n }\n else {\n if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n }\n }\n this.initValue = newProp.value;\n newProp.value = this.compareFormatChange(this.checkValue(newProp.value));\n }\n else {\n this.updateInputValue(this.invalidValueString);\n this.checkErrorState(this.invalidValueString);\n }\n this.checkValueChange(null, false);\n if (this.isPopupOpen()) {\n this.setScrollPosition();\n }\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n }\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'strictMode':\n if (!this.isBlazorServer) {\n this.invalidValueString = null;\n if (newProp.strictMode) {\n this.checkErrorState(null);\n }\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.checkValue((this.inputElement).value);\n this.checkValueChange(null, false);\n }\n break;\n case 'scrollTo':\n if (!this.isBlazorServer) {\n if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n }\n else {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n }\n break;\n }\n }\n };\n TimePicker.prototype.checkInValue = function (inValue) {\n if (inValue instanceof Date) {\n return (inValue.toUTCString());\n }\n else {\n return ('' + inValue);\n }\n };\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property({})\n ], TimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('Never')\n ], TimePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(1000)\n ], TimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(30)\n ], TimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"itemRender\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\nexport { TimePicker };\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};\n///\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { extend, isBlazor, blazorCultureFormats } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar RTL = 'e-rtl';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = 'e-list-item';\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.scrollInvoked = false;\n _this.dateTimeOptions = options;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n if (!this.enabled) {\n return;\n }\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isTimePopupOpen() && this.isPreventBlur) {\n this.inputElement.focus();\n return;\n }\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n var blurArguments = {\n model: (isBlazor() && this.isServerRendered) ? null : this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n * @returns void\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.popupObject.destroy();\n detach(this.dateTimeWrapper);\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.isPreventBlur = false;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n _super.prototype.updateHtmlAttributeToElement.call(this);\n this.checkAttributes(false);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n _super.prototype.updateHtmlAttributeToWrapper.call(this);\n this.bindInputEvents();\n this.setValue();\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(this.scrollTo))) }, true);\n this.previousDateTime = this.value && new Date(+this.value);\n if (this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function () {\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'blur', this.blurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.focusHandler);\n }\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld));\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (e.currentTarget === this.timeIcon) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n else {\n this.inputElement.focus();\n this.popupCreation('time', e);\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n }\n this.isIconClicked = false;\n };\n DateTimePicker.prototype.dateHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (e.currentTarget === this.inputWrapper.buttons[0]) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n if (!isNullOrUndefined(this.popupWrapper)) {\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.show = function (type, e) {\n if ((this.enabled && this.readonly) || !this.enabled) {\n return;\n }\n else {\n if (type === 'time' && !this.dateTimeWrapper) {\n if (this.isDatePopupOpen()) {\n this.hide(e);\n }\n this.popupCreation('time', e);\n }\n else if (!this.popupObj) {\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n _super.prototype.show.call(this);\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.toggle = function (e) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n this.show('time', null);\n }\n else if (this.isTimePopupOpen()) {\n this.hide(e);\n _super.prototype.show.call(this, null, e);\n this.popupCreation('date', null);\n }\n else {\n this.show(null, e);\n }\n };\n DateTimePicker.prototype.listCreation = function () {\n var dateObject;\n if (this.calendarMode === 'Gregorian') {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime'\n });\n }\n else {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'\n });\n }\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n dateObject :\n new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(this.createElement, min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n DateTimePicker.prototype.popupCreation = function (type, e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n if (type === 'date') {\n if (!this.readonly && this.popupWrapper) {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });\n }\n }\n else {\n if (!this.readonly) {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup(e);\n this.popupObject.refreshPosition(this.inputElement);\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: (isBlazor() && this.isServerRendered) ? null : this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (!_this.preventArgs.cancel && !_this.readonly) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION,\n };\n if (_this.zIndex === 1000) {\n _this.popupObject.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObject.show(new Animation(openAnimation), null);\n }\n addClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.TimeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setTimeHover(currentLi, HOVER);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n _super.prototype.changeEvent.call(this, e);\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupElement;\n popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n this.findScrollTop(popupElement);\n }\n else if (this.dateTimeWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n DateTimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextElement = element.nextElementSibling;\n var height = nextElement ? nextElement.offsetTop : element.offsetTop;\n var lineHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n }\n this.updateIconState();\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n var value = li.getAttribute('data-value');\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value;\n value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value;\n value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n var _this = this;\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: (isBlazor() && this.isServerRendered) ? null : this.popupObj || this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.dateTimeCloseEventCallback(e, eventArgs);\n });\n }\n else {\n this.dateTimeCloseEventCallback(e, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n DateTimePicker.prototype.dateTimeCloseEventCallback = function (e, eventArgs) {\n this.preventArgs = eventArgs;\n if (!this.preventArgs.cancel) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup(e);\n removeClass([document.body], OVERFLOW);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n }\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n this.checkFormat();\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.preRender.call(this);\n removeClass([this.inputElementCopy], [ROOT]);\n };\n ;\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'disabled':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === 'true' ||\n this.inputElement.getAttribute(prop) === '' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'value':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n if (!this.scrollInvoked) {\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n else {\n this.scrollInvoked = false;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds(), dateValue.getMilliseconds());\n }\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.activeIndex) || !isNullOrUndefined(this.checkDateValue(value))) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var dateString;\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n this.activeIndex = 0;\n nextItemValue = this.timeCollections[0];\n }\n else if (event.action === 'end') {\n this.activeIndex = listCount - 1;\n nextItemValue = this.timeCollections[listCount - 1];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(new Date(nextItemValue));\n }\n this.isNavigate = true;\n this.setTimeHover(this.selectedElement, NAVIGATION);\n this.setTimeActiveDescendant();\n if (this.isTimePopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setTimeScrollPosition();\n }\n };\n DateTimePicker.prototype.TimeKeyActionHandle = function (event) {\n if (this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'up':\n case 'down':\n case 'home':\n case 'end':\n this.timeKeyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs.value = this.value;\n this.addTimeSelection();\n this.previousDateTime = this.value;\n }\n }\n else {\n this.updateValue(event);\n }\n this.hide(event);\n addClass([this.inputWrapper.container], INPUTFOCUS);\n this.isNavigate = false;\n event.stopPropagation();\n break;\n case 'escape':\n this.hide(event);\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n DateTimePicker.prototype.inputKeyAction = function (event) {\n switch (event.action) {\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n this.toggle(event);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n\n */\n DateTimePicker.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 'value':\n this.isDynamicValueChanged = true;\n var options = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n newProp.value = this.validateValue(newProp.value);\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n if (!isNullOrUndefined(oldProp.cssClass)) {\n oldProp.cssClass = (oldProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newProp.cssClass)) {\n newProp.cssClass = (newProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container], oldProp.cssClass);\n if (this.dateTimeWrapper) {\n Input.setCssClass(newProp.cssClass, [this.dateTimeWrapper], oldProp.cssClass);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n }\n };\n /**\n * To get component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n DateTimePicker.prototype.restoreValue = function () {\n this.previousDateTime = this.previousDate;\n this.currentDate = this.value ? this.value : new Date();\n this.valueWithMinutes = this.value;\n this.previousDate = this.value;\n this.previousElementValue = this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.getFormattedValue(this.inputValueCopy);\n };\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property({})\n ], DateTimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"values\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], DateTimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], DateTimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Gregorian')\n ], DateTimePicker.prototype, \"calendarMode\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property('Short')\n ], DateTimePicker.prototype, \"dayHeaderFormat\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\nexport { DateTimePicker };\n","import { isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n if (isBlazor()) {\n var isServerRendered = 'isServerRendered';\n format[isServerRendered] = true;\n }\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n if (isBlazor()) {\n var isServerRendered = 'isServerRendered';\n format[isServerRendered] = true;\n }\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format))) {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, getValue, closest } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { appendChildren } from '../base/util';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport * as events from '../base/constant';\n/**\n * FilterCellRenderer class which responsible for building filter cell.\n * @hidden\n */\nvar FilterCellRenderer = /** @class */ (function (_super) {\n __extends(FilterCellRenderer, _super);\n function FilterCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-filterbarcell' });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n * @returns string\n */\n FilterCellRenderer.prototype.getGui = function () {\n return this.parent.createElement('div');\n };\n /**\n * Function to render the cell content based on Column object.\n * @param {Cell} cell\n * @param {Object} data\n */\n /* tslint:disable-next-line:max-func-body-length */\n FilterCellRenderer.prototype.render = function (cell, data) {\n var tr = this.parent.element.querySelector('.e-filterbar');\n var node = this.element.cloneNode();\n var innerDIV = this.getGui();\n var input;\n var column = cell.column;\n tr.appendChild(node);\n node.setAttribute('e-mappinguid', column.uid);\n if (column.filterTemplate) {\n var fltrData = {};\n if (data) {\n fltrData[column.field] = data[column.field];\n }\n var col = 'column';\n fltrData[col] = column;\n if (column.visible) {\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else {\n var element = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(node, element);\n }\n }\n else {\n node.classList.add('e-hide');\n }\n }\n else {\n if (column.type !== 'checkbox') {\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n node.classList.add('e-fltrtemp');\n attributes(innerDIV, {\n 'class': 'e-fltrtempdiv'\n });\n if (isNullOrUndefined(column.filterBarTemplate.create)) {\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',\n attrs: { type: 'search', title: column.headerText }\n });\n innerDIV.appendChild(input);\n }\n else {\n var args = { column: column, node: Element };\n var temp = column.filterBarTemplate.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n input = temp(args);\n if (typeof input === 'string') {\n var div = this.parent.createElement('div');\n div.innerHTML = input;\n input = div.firstChild;\n }\n attributes(innerDIV, {\n class: 'e-filterUi_input e-filtertext e-fltrTemp',\n title: column.headerText,\n id: column.field + '_filterBarcell',\n });\n innerDIV.appendChild(input);\n }\n }\n else {\n attributes(innerDIV, {\n 'class': 'e-filterdiv e-fltrinputdiv'\n });\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filtertext',\n attrs: {\n type: 'search', title: column.headerText + cell.attributes.title,\n value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'\n }\n });\n innerDIV.appendChild(input);\n var args = {\n element: input, floatLabelType: 'Never',\n properties: {\n enableRtl: this.parent.enableRtl, showClearButton: true\n }\n };\n Input.createInput(args, this.parent.createElement);\n }\n //TODO: apply intial filtering\n if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {\n input.setAttribute('disabled', 'true');\n input.classList.add('e-disable');\n }\n if (!column.visible) {\n node.classList.add('e-hide');\n }\n this.appendHtml(node, innerDIV);\n // render's the dropdownlist component if showFilterBarOperator sets to true\n if (this.parent.filterSettings.showFilterBarOperator && this.parent.filterSettings.type === 'FilterBar'\n && !this.parent.isPrinting && isNullOrUndefined(column.filterTemplate)) {\n this.operatorIconRender(innerDIV, column, cell);\n }\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n var templateWrite = column.filterBarTemplate.write;\n var args = { element: input, column: column };\n if (typeof templateWrite === 'string') {\n templateWrite = getValue(templateWrite, window);\n }\n templateWrite.call(this, args);\n }\n }\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n * @param {Element} node\n * @param {string|Element} innerHTML\n * @returns Element\n */\n FilterCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n FilterCellRenderer.prototype.operatorIconRender = function (innerDIV, column, cell) {\n var gObj = this.parent;\n var fbicon = this.parent.createElement('input', {\n className: ' e-filterbaroperator e-icons e-icon-filter',\n id: cell.column.uid\n });\n innerDIV.querySelector('span').appendChild(fbicon);\n var operators = (column.filter && column.filter.operator) ? column.filter.operator : 'equal';\n if (!isNullOrUndefined(gObj.filterModule.operators[column.field])) {\n operators = gObj.filterModule.operators[column.field];\n }\n this.dropOptr = new DropDownList({\n fields: { text: 'text', value: 'value' },\n popupHeight: 'auto',\n value: operators,\n width: '0px',\n enabled: column.allowFiltering,\n popupWidth: 'auto',\n enableRtl: this.parent.enableRtl,\n change: this.internalEvent.bind(this),\n beforeOpen: function () {\n var operator = gObj.filterModule.customOperators;\n this.dataSource = operator[gObj.getColumnByUid(this.element.id).type + 'Operator'];\n for (var i = 0; i < this.dataSource.length; i++) {\n if (column.filter && column.filter.operator && isNullOrUndefined(gObj.filterModule.operators[column.field]) &&\n this.dataSource[i].value === column.filter.operator) {\n this.value = column.filter.operator;\n }\n }\n },\n });\n this.dropOptr.appendTo(fbicon);\n var spanElmt = closest(this.dropOptr.element, 'span');\n spanElmt.classList.add('e-filterbardropdown');\n spanElmt.removeAttribute('tabindex');\n };\n FilterCellRenderer.prototype.internalEvent = function (e) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(e.element.getAttribute('id'));\n e.column = col;\n gObj.filterModule.operators[col.field] = e.value;\n gObj.notify(events.getFilterBarOperator, e);\n };\n return FilterCellRenderer;\n}(CellRenderer));\nexport { FilterCellRenderer };\n","import { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\n/**\n * `filter operators` render boolean column.\n * @hidden\n */\nvar FlMenuOptrUI = /** @class */ (function () {\n function FlMenuOptrUI(parent, customFltrOperators, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.customFilterOperators = customFltrOperators;\n }\n /**\n * @hidden\n */\n /* tslint:disable-next-line:max-line-length */\n FlMenuOptrUI.prototype.renderOperatorUI = function (dlgConetntEle, target, column, dlgObj, operator) {\n this.dialogObj = dlgObj;\n var optr = column.type + 'Operator';\n this.optrData = this.customOptr = !isNullOrUndefined(operator) ? operator :\n (!isNullOrUndefined(this.parent.filterSettings.operators) && !isNullOrUndefined(this.parent.filterSettings.operators[optr])) ?\n this.parent.filterSettings.operators[optr] : this.customFilterOperators[optr];\n var dropDatasource = this.customOptr;\n var selectedValue = this.dropSelectedVal(column, optr);\n var optrDiv = this.parent.createElement('div', { className: 'e-flm_optrdiv' });\n dlgConetntEle.appendChild(optrDiv);\n var optrInput = this.parent.createElement('input', { id: column.uid + '-floptr' });\n optrDiv.appendChild(optrInput);\n this.dropOptr = new DropDownList({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n open: this.dropDownOpen.bind(this),\n cssClass: 'e-popup-flmenu',\n text: selectedValue\n });\n this.dropOptr.appendTo('#' + column.uid + '-floptr');\n };\n FlMenuOptrUI.prototype.renderResponsiveDropDownList = function (args) {\n args.popup.element.style.width = '100%';\n };\n FlMenuOptrUI.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n if (this.parent.enableAdaptiveUI) {\n this.renderResponsiveDropDownList(args);\n }\n };\n FlMenuOptrUI.prototype.dropSelectedVal = function (col, optr) {\n var selValue = '';\n var columns = this.parent.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.field === column.field || (col.isForeignColumn() && col.foreignKeyValue === column.field)) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', column.operator));\n selValue = !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n }\n }\n if (selValue === '') { // rewuired or not\n if (col.filter.operator) {\n var optrLen = Object.keys(this.optrData).length;\n for (var i = 0; i < optrLen; i++) {\n if (this.optrData[i].value === col.filter.operator) {\n selValue = this.optrData[i].text;\n }\n }\n }\n else {\n selValue = this.optrData[0].text;\n }\n }\n return selValue;\n };\n /**\n * @hidden\n */\n FlMenuOptrUI.prototype.getFlOperator = function () {\n return this.dropOptr.value;\n };\n return FlMenuOptrUI;\n}());\nexport { FlMenuOptrUI };\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};\n/// \nimport { EventHandler, Property, Event, addClass, Browser, removeClass, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';\nimport { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { Search } from '../common/incremental-search';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\n/* tslint:disable */\nimport { Input } from '@syncfusion/ej2-inputs';\n/* tslint:enable */\nvar SPINNER_CLASS = 'e-atc-spinner-icon';\ndropDownListClasses.root = 'e-combobox';\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.\n * ```html\n * \n * ```\n * ```typescript\n * let games:ComboBox = new ComboBox();\n * games.appendTo(\"#list\");\n * ```\n */\nvar ComboBox = /** @class */ (function (_super) {\n __extends(ComboBox, _super);\n /**\n * *Constructor for creating the component\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n /**\n * Initialize the event handler\n * @private\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.getLocaleName = function () {\n return 'combo-box';\n };\n ;\n ComboBox.prototype.wireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);\n EventHandler.add(this.inputWrapper.container, 'blur', this.onBlur, this);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);\n }\n EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);\n if (!this.readonly) {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n }\n this.bindCommonEvent();\n };\n ComboBox.prototype.preventBlur = function (e) {\n if ((!this.allowFiltering && document.activeElement !== this.inputElement &&\n !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {\n e.preventDefault();\n }\n };\n ComboBox.prototype.onBlur = function (e) {\n var inputValue = this.inputElement && this.inputElement.value === '' ? null : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData) && !isNullOrUndefined(inputValue) && inputValue !== this.text) {\n this.customValue(e);\n }\n _super.prototype.onBlur.call(this, e);\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n ComboBox.prototype.setOldText = function (text) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n this.removeSelection();\n };\n ComboBox.prototype.setOldValue = function (value) {\n if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n this.removeSelection();\n this.setHiddenValue();\n };\n ComboBox.prototype.valueMuteChange = function (value) {\n var inputValue = isNullOrUndefined(value) ? null : value.toString();\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value, text: value, index: null }, true);\n this.activeIndex = this.index;\n var fields = this.fields;\n var dataItem = {};\n dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();\n dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();\n this.itemData = dataItem;\n this.item = null;\n if (this.previousValue !== this.value) {\n this.detachChangeEvent(null);\n }\n };\n ComboBox.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n var li = this.getElementByValue(this.value);\n if (li) {\n this.setSelection(li, null);\n }\n else if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement && this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-owns': this.element.id + '_options',\n 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-hasPopup': 'true',\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly.toString(),\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n };\n return ariaAttributes;\n };\n ComboBox.prototype.searchLists = function (e) {\n this.isTyped = true;\n if (this.isFiltering()) {\n _super.prototype.searchLists.call(this, e);\n if (this.ulElement && this.filterInput.value.trim() === '') {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n }\n else {\n if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n this.incrementalSearch(e);\n }\n };\n ComboBox.prototype.getNgDirective = function () {\n return 'EJS-COMBOBOX';\n };\n ComboBox.prototype.setSearchBox = function () {\n this.filterInput = this.inputElement;\n return (this.isFiltering() ? this.inputWrapper : inputObject);\n };\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (!this.isServerBlazor) {\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n }\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {\n this.inlineSearch();\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = this.list.querySelector('.' + dropDownListClasses.selected);\n var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n this.list.scrollTop = count * height + fixedHead;\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n this.list.scrollTop = 0;\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if (e && e.type === 'keydown' && e.action === 'enter') {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {\n this.setProperties({ 'value': dataItem.value, 'text': dataItem.text }, !this.allowCustom);\n }\n };\n /**\n * Shows the spinner loader.\n * @returns void.\n\n */\n ComboBox.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = (this.getModuleName() === 'autocomplete') ? (this.inputWrapper.buttons[0] ||\n this.inputWrapper.clearButton ||\n Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container, this.createElement)) :\n (this.inputWrapper.buttons[0] || this.inputWrapper.clearButton);\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n * @returns void.\n\n */\n ComboBox.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n ComboBox.prototype.setAutoFill = function (activeElement, isHover) {\n if (!isHover) {\n this.setHoverList(activeElement);\n }\n if (this.autofill && !this.preventAutoFill) {\n var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();\n var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n if (this.getModuleName() === 'combobox') {\n if (!this.isSelected && this.previousValue !== currentFillValue) {\n this.updateSelectedItem(activeElement, null);\n this.isSelected = true;\n this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n }\n else {\n this.updateSelectedItem(activeElement, null, true);\n }\n }\n if (!this.isAndroidAutoFill(currentValue)) {\n this.setAutoFillSelection(currentValue);\n }\n }\n };\n ComboBox.prototype.isAndroidAutoFill = function (value) {\n if (Browser.isAndroid) {\n var currentPoints = this.getSelectionPoints();\n var prevEnd = this.prevSelectPoints.end;\n var curEnd = currentPoints.end;\n var prevStart = this.prevSelectPoints.start;\n var curStart = currentPoints.start;\n if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||\n (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {\n return true;\n }\n else {\n return false;\n }\n }\n else {\n return false;\n }\n };\n ComboBox.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n if (this.isServerBlazor && this.isFiltering() && this.isPopupOpen && e) {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerRenderList', this.beforePopupOpen, true);\n }\n }\n };\n ComboBox.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n ComboBox.prototype.inlineSearch = function (e) {\n var isKeyNavigate = (e && (e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));\n var activeElement = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();\n if (!isNullOrUndefined(activeElement)) {\n if (!isKeyNavigate) {\n var value = this.getFormattedValue(activeElement.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;\n }\n this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;\n this.setAutoFill(activeElement, isKeyNavigate);\n }\n else if (this.inputElement.value === '') {\n this.activeIndex = null;\n this.list.scrollTop = 0;\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n if (this.liCollections && this.liCollections.length < 0) {\n this.removeFocus();\n }\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup();\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ;\n ComboBox.prototype.setAutoFillSelection = function (currentValue) {\n var selection = this.getSelectionPoints();\n var value = this.inputElement.value.substr(0, selection.start);\n if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {\n var inputValue = value + currentValue.substr(value.length, currentValue.length);\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);\n }\n else {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\n }\n };\n ;\n ComboBox.prototype.getValueByText = function (text) {\n return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);\n };\n ComboBox.prototype.unWireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);\n EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlur);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);\n }\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'focus', this.targetFocus);\n if (!this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n }\n }\n this.unBindCommonEvent();\n };\n ComboBox.prototype.setSelection = function (li, e) {\n _super.prototype.setSelection.call(this, li, e);\n if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {\n this.removeFocus();\n }\n };\n ComboBox.prototype.selectCurrentItem = function (e) {\n var li;\n if (this.isPopupOpen) {\n if (this.isSelected) {\n li = this.list.querySelector('.' + dropDownListClasses.selected);\n }\n else {\n li = this.list.querySelector('.' + dropDownListClasses.focus);\n }\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n }\n if (e.action === 'enter' && this.inputElement.value.trim() === '') {\n this.clearAll(e);\n }\n else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {\n this.customValue(e);\n }\n this.hidePopup();\n };\n ComboBox.prototype.setHoverList = function (li) {\n this.removeSelection();\n if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {\n this.removeFocus();\n li.classList.add(dropDownListClasses.focus);\n }\n };\n ;\n ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus(e);\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = true;\n }\n _super.prototype.dropDownClick.call(this, e);\n };\n ComboBox.prototype.customValue = function (e) {\n var _this = this;\n var value = this.getValueByText(this.inputElement.value);\n if (!this.allowCustom && this.inputElement.value !== '') {\n var previousValue = this.previousValue;\n var currentValue = this.value;\n this.setProperties({ value: value });\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.autofill && previousValue === this.value && currentValue !== this.value) {\n this.onChangeEvent(null);\n }\n }\n else if (this.inputElement.value.trim() !== '') {\n var previousValue_1 = this.value;\n if (isNullOrUndefined(value)) {\n var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;\n var eventArgs = void 0;\n eventArgs = { text: value_1, item: {} };\n if (!this.initial) {\n this.trigger('customValueSpecifier', eventArgs, function (eventArgs) {\n _this.updateCustomValueCallback(value_1, eventArgs, previousValue_1, e);\n });\n }\n else {\n this.updateCustomValueCallback(value_1, eventArgs, previousValue_1);\n }\n }\n else {\n this.isSelectCustom = false;\n this.setProperties({ value: value });\n if (previousValue_1 !== this.value) {\n this.onChangeEvent(e);\n }\n }\n }\n else if (this.allowCustom) {\n this.isSelectCustom = true;\n }\n };\n ComboBox.prototype.updateCustomValueCallback = function (value, eventArgs, previousValue, e) {\n var fields = this.fields;\n var item = eventArgs.item;\n var dataItem = {};\n if (item && getValue(fields.text, item) && getValue(fields.value, item)) {\n dataItem = item;\n }\n else {\n setValue(fields.text, value, dataItem);\n setValue(fields.value, value, dataItem);\n }\n this.itemData = dataItem;\n var changeData = {\n text: getValue(fields.text, this.itemData),\n value: getValue(fields.value, this.itemData),\n index: null\n };\n this.setProperties(changeData, true);\n this.setSelection(null, null);\n this.isSelectCustom = true;\n if (previousValue !== this.value) {\n this.onChangeEvent(e);\n }\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'combobox') {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n if (this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n else {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n break;\n case 'allowFiltering':\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n break;\n case 'allowCustom':\n break;\n default:\n var comboProps = void 0;\n comboProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, comboProps.newProperty, comboProps.oldProperty);\n if (this.isFiltering() && prop === 'dataSource' && isNullOrUndefined(this.list) && this.itemTemplate &&\n this.getModuleName() === 'combobox') {\n _super.prototype.renderList.call(this);\n }\n break;\n }\n }\n };\n /**\n * To initialize the control rendering.\n * @private\n */\n ComboBox.prototype.render = function () {\n _super.prototype.render.call(this);\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n this.renderComplete();\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n ComboBox.prototype.getModuleName = function () {\n return 'combobox';\n };\n /**\n * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @return {void}.\n\n */\n ComboBox.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * To filter the data from given data source by using query\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @return {void}.\n\n */\n ComboBox.prototype.filter = function (dataSource, query, fields) {\n _super.prototype.filter.call(this, dataSource, query, fields);\n };\n /**\n * Opens the popup that displays the list of items.\n * @returns void.\n\n */\n ComboBox.prototype.showPopup = function () {\n _super.prototype.showPopup.call(this);\n };\n /**\n * Hides the popup if it is in open state.\n * @returns void.\n\n */\n ComboBox.prototype.hidePopup = function (e) {\n var inputValue = this.inputElement && this.inputElement.value === '' ? null\n : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData)) {\n var isEscape = this.isEscapeKey;\n if (this.isEscapeKey) {\n Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n }\n if (this.autofill) {\n this.removeFillSelection();\n }\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = this.list.querySelector('.' + dropDownListClasses.selected);\n if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(e);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this, e);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue(e);\n }\n }\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this, e);\n };\n /**\n * Sets the focus to the component for interaction.\n * @returns void.\n */\n ComboBox.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = true;\n }\n _super.prototype.focusIn.call(this);\n };\n /**\n * Allows you to clear the selected values from the component.\n * @returns void.\n\n */\n ComboBox.prototype.clear = function () {\n this.value = null;\n };\n /**\n * Moves the focus from the component if the component is already focused.\n * @returns void.\n\n */\n ComboBox.prototype.focusOut = function (e) {\n _super.prototype.focusOut.call(this, e);\n };\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n\n */\n ComboBox.prototype.getItems = function () {\n return _super.prototype.getItems.call(this);\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n * @blazorType object\n\n */\n ComboBox.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n ComboBox.prototype.renderHightSearch = function () {\n // update high light search \n };\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"autofill\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"allowCustom\", void 0);\n __decorate([\n Property({})\n ], ComboBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"index\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"customValueSpecifier\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property('Never')\n ], ComboBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('100%')\n ], ComboBox.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], ComboBox.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], ComboBox.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"value\", void 0);\n ComboBox = __decorate([\n NotifyPropertyChanges\n ], ComboBox);\n return ComboBox;\n}(DropDownList));\nexport { ComboBox };\n","/**\n * Function helps to find which highlightSearch is to call based on your data.\n * @param {HTMLElement} element - Specifies an li element.\n * @param {string} query - Specifies the string to be highlighted.\n * @param {boolean} ignoreCase - Specifies the ignoreCase option.\n * @param {HightLightType} type - Specifies the type of highlight.\n */\nexport function highlightSearch(element, query, ignoreCase, type, isBlazor) {\n if (query === '') {\n return;\n }\n else {\n var ignoreRegex = ignoreCase ? 'gim' : 'gm';\n query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ? '(' + query + ')$' : '(' + query + ')';\n findTextNode(element, new RegExp(replaceQuery, ignoreRegex), isBlazor);\n }\n}\nfunction findTextNode(element, pattern, isBlazor) {\n for (var index = 0; element.childNodes && (index < element.childNodes.length); index++) {\n if (element.childNodes[index].nodeType === 3 && element.childNodes[index].textContent.trim() !== '') {\n element = (isBlazor && element.classList.contains('e-highlight')) ? element.parentElement : element;\n if (isBlazor && element.getAttribute('data-value')) {\n element.innerHTML = element.getAttribute('data-value').replace(pattern, '$1');\n }\n else {\n var value = element.childNodes[index].nodeValue.trim().replace(pattern, '$1');\n element.childNodes[index].nodeValue = '';\n element.innerHTML = element.innerHTML.trim() + value;\n }\n break;\n }\n else {\n findTextNode(element.childNodes[index], pattern, isBlazor);\n }\n }\n}\n/**\n * Function helps to remove highlighted element based on your data.\n * @param {HTMLElement} content - Specifies an content element.\n */\nexport function revertHighlightSearch(content) {\n var contentElement = content.querySelectorAll('.e-highlight');\n for (var i = contentElement.length - 1; i >= 0; i--) {\n var parent_1 = contentElement[i].parentNode;\n var text = document.createTextNode(contentElement[i].textContent);\n parent_1.replaceChild(text, contentElement[i]);\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};\n/// \nimport { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';\nimport { Event, Complex } from '@syncfusion/ej2-base';\nimport { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { ComboBox } from '../combo-box/combo-box';\nimport { highlightSearch, revertHighlightSearch } from '../common/highlight-search';\nimport { Search } from '../common/incremental-search';\nimport { FieldSettings } from '../drop-down-base/drop-down-base';\n/* tslint:disable */\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\n/* tslint:enable */\ndropDownListClasses.root = 'e-autocomplete';\ndropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';\n/**\n * The AutoComplete component provides the matched suggestion list when type into the input,\n * from which the user can select one.\n * ```html\n * \n * ```\n * ```typescript\n * let atcObj:AutoComplete = new AutoComplete();\n * atcObj.appendTo(\"#list\");\n * ```\n */\nvar AutoComplete = /** @class */ (function (_super) {\n __extends(AutoComplete, _super);\n /**\n * * Constructor for creating the widget\n */\n function AutoComplete(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFiltered = false;\n _this.searchList = false;\n return _this;\n }\n ;\n /**\n * Initialize the event handler\n * @private\n */\n AutoComplete.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n AutoComplete.prototype.getLocaleName = function () {\n return 'auto-complete';\n };\n ;\n AutoComplete.prototype.getNgDirective = function () {\n return 'EJS-AUTOCOMPLETE';\n };\n AutoComplete.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;\n var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;\n if (this.isFiltered) {\n return filterQuery;\n }\n if (this.queryString !== null && this.queryString !== '') {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount)) {\n // Since defualt value of suggestioncount is 20, checked the condition\n if (this.suggestionCount !== 20) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n filterQuery.queries.splice(queryElements, 1);\n }\n }\n }\n filterQuery.take(this.suggestionCount);\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.isDataFetched = this.isSelectCustom = false;\n if (this.isServerBlazor) {\n this.beforePopupOpen = (this.isFiltering() && !this.beforePopupOpen) ? !this.beforePopupOpen : this.beforePopupOpen;\n this.queryString = this.filterInput.value;\n if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {\n // tslint:disable-next-line\n this.interopAdaptor.invokeMethodAsync('OnServerFilter', this.filterInput.value);\n }\n else {\n this.hidePopup();\n }\n }\n else {\n if (isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this, true);\n }\n this.queryString = this.filterInput.value;\n if (e.keyCode === 40 || e.keyCode === 38) {\n this.queryString = this.queryString === '' ? null : this.queryString;\n this.beforePopupOpen = true;\n this.resetList(this.dataSource, this.fields);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel && !_this.isFiltered && !eventArgs.preventDefaultAction) {\n _this.searchList = true;\n _this.filterAction(_this.dataSource, null, _this.fields);\n }\n });\n }\n };\n /**\n * To filter the data from given data source by using query\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @return {void}.\n\n */\n AutoComplete.prototype.filter = function (dataSource, query, fields) {\n this.isFiltered = true;\n this.filterAction(dataSource, query, fields);\n };\n AutoComplete.prototype.filterAction = function (dataSource, query, fields) {\n this.beforePopupOpen = true;\n if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {\n this.resetList(dataSource, fields, query);\n }\n else {\n this.hidePopup();\n }\n this.renderReactTemplates();\n };\n AutoComplete.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n }\n if (this.beforePopupOpen) {\n this.hidePopup();\n }\n };\n AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n this.fixedHeaderElement = null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n var item = this.list.querySelector('.' + dropDownListClasses.li);\n if (!isNullOrUndefined(item)) {\n removeClass([item], dropDownListClasses.focus);\n }\n this.postBackAction();\n };\n AutoComplete.prototype.postBackAction = function () {\n if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {\n var items = [this.liCollections[0]];\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);\n this.searchList = false;\n if (!isNullOrUndefined(searchItem.item)) {\n _super.prototype.setAutoFill.call(this, this.liCollections[0], true);\n }\n }\n };\n AutoComplete.prototype.setSelection = function (li, e) {\n if (!this.isValidLI(li)) {\n return;\n }\n if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'\n && e.action !== 'tab' && this.isValidLI(li)) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n if (this.isServerBlazor) {\n this.removeHover();\n }\n this.setHoverList(li);\n this.selectedLI = li;\n this.setScrollPosition(e);\n if (this.autofill && this.isPopupOpen) {\n this.preventAutoFill = false;\n _super.prototype.setAutoFill.call(this, li);\n }\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n else {\n _super.prototype.setSelection.call(this, li, e);\n }\n };\n AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {\n var _this = this;\n var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);\n if (isNullOrUndefined(fields.itemCreated)) {\n fields.itemCreated = function (e) {\n if (_this.highlight) {\n if (_this.element.tagName === _this.getNgDirective() && _this.itemTemplate) {\n setTimeout(function () { highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType); }, 0);\n }\n else {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }\n }\n };\n }\n else {\n var itemCreated_1 = fields.itemCreated;\n fields.itemCreated = function (e) {\n if (_this.highlight) {\n highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);\n }\n itemCreated_1.apply(_this, [e]);\n };\n }\n return fields;\n };\n ;\n AutoComplete.prototype.isFiltering = function () {\n return true;\n };\n AutoComplete.prototype.renderPopup = function () {\n this.list.scrollTop = 0;\n _super.prototype.renderPopup.call(this);\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return true && this.inputElement.value.trim() !== '';\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n AutoComplete.prototype.isSelectFocusItem = function (element) {\n return false;\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n * @returns void.\n\n */\n AutoComplete.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (this.beforePopupOpen && !this.isServerBlazor) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n this.preventAutoFill = true;\n if (isNullOrUndefined(this.list) || this.isServerBlazor) {\n this.renderList();\n }\n else {\n this.resetList(this.dataSource, this.fields);\n }\n };\n /**\n * Hides the popup if it is in open state.\n * @returns void.\n */\n AutoComplete.prototype.hidePopup = function () {\n this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n _super.prototype.hidePopup.call(this);\n this.activeIndex = -1;\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'autocomplete') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'showPopupButton':\n if (this.showPopupButton) {\n if (!this.isServerBlazor) {\n var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container, this.createElement);\n this.inputWrapper.buttons[0] = button;\n }\n else if (this.inputWrapper && this.inputWrapper.container) {\n var button = this.inputWrapper.container.querySelector('.e-input-group-icon.e-ddl-icon');\n this.inputWrapper.buttons[0] = button;\n }\n if (this.inputWrapper && this.inputWrapper.buttons && this.inputWrapper.buttons[0]) {\n EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);\n }\n }\n else if (!this.isServerBlazor) {\n detach(this.inputWrapper.buttons[0]);\n this.inputWrapper.buttons[0] = null;\n }\n break;\n default:\n var atcProps = void 0;\n atcProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, atcProps.newProperty, atcProps.oldProperty);\n break;\n }\n }\n };\n AutoComplete.prototype.renderHightSearch = function () {\n if (this.highlight) {\n for (var i = 0; i < this.liCollections.length; i++) {\n var isHighlight = this.ulElement.querySelector('.e-active');\n if (!isHighlight) {\n revertHighlightSearch(this.liCollections[i]);\n highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType, this.isServerBlazor);\n }\n }\n }\n };\n /**\n * Return the module name of this component.\n * @private\n */\n AutoComplete.prototype.getModuleName = function () {\n return 'autocomplete';\n };\n /**\n * To initialize the control rendering\n * @private\n */\n AutoComplete.prototype.render = function () {\n _super.prototype.render.call(this);\n };\n ;\n __decorate([\n Complex({ value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], AutoComplete.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], AutoComplete.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"showPopupButton\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"highlight\", void 0);\n __decorate([\n Property(20)\n ], AutoComplete.prototype, \"suggestionCount\", void 0);\n __decorate([\n Property({})\n ], AutoComplete.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"query\", void 0);\n __decorate([\n Property(1)\n ], AutoComplete.prototype, \"minLength\", void 0);\n __decorate([\n Property('Contains')\n ], AutoComplete.prototype, \"filterType\", void 0);\n __decorate([\n Event()\n ], AutoComplete.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], AutoComplete.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"text\", void 0);\n AutoComplete = __decorate([\n NotifyPropertyChanges\n ], AutoComplete);\n return AutoComplete;\n}(ComboBox));\nexport { AutoComplete };\n","import { AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { Browser, isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';\nimport { getZIndexCalcualtion, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * `string filterui` render string column.\n * @hidden\n */\nvar StringFilterUI = /** @class */ (function () {\n function StringFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serLocator = serviceLocator;\n this.filterSettings = filterSettings;\n }\n StringFilterUI.prototype.create = function (args) {\n var data;\n var floptr;\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'strui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.dialogObj = args.dialogObj;\n this.actObj = this.getAutoCompleteOptions(args);\n this.actObj.appendTo(this.instance);\n };\n StringFilterUI.prototype.getAutoCompleteOptions = function (args) {\n var _this = this;\n var isForeignColumn = args.column.isForeignColumn();\n var foreignColumnQuery;\n if (isForeignColumn) {\n foreignColumnQuery = new Query();\n foreignColumnQuery.params = this.parent.query.params;\n }\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = { value: isForeignColumn ? args.column.foreignKeyValue : args.column.field };\n var autoComplete = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n query: isForeignColumn ? foreignColumnQuery : this.parent.query.clone(),\n sortOrder: 'Ascending',\n open: this.openPopup.bind(this),\n cssClass: 'e-popup-flmenu',\n focus: function () {\n _this.actObj.filterType = args.getOptrInstance.getFlOperator();\n },\n autofill: true,\n placeholder: args.localizeText.getConstant('EnterValue'),\n actionComplete: function (e) {\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObj) {\n return (getValue(_this.actObj.fields.value, mapObj));\n }).indexOf(getValue((_this.actObj.fields.value), obj)) === index;\n });\n }\n }, args.column.filter.params));\n if (dataSource && 'result' in dataSource) {\n var query = this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, query);\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n autoComplete.dataSource = new DataManager(e);\n });\n }\n return autoComplete;\n };\n StringFilterUI.prototype.write = function (args) {\n var columns = this.filterSettings.columns;\n if (args.filteredValue !== '' && !isNullOrUndefined(args.filteredValue)) {\n var struiObj = document.querySelector('#strui-' + args.column.uid).ej2_instances[0];\n struiObj.value = args.filteredValue;\n }\n };\n StringFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var actuiObj = document.querySelector('#strui-' + column.uid).ej2_instances[0];\n if (Browser.isDevice) {\n actuiObj.hidePopup();\n actuiObj.focusOut();\n }\n var filterValue = actuiObj.value;\n if (isNullOrUndefined(filterValue) || filterValue === '') {\n filterValue = null;\n }\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', this.parent.filterSettings.enableCaseSensitivity);\n };\n StringFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n return StringFilterUI;\n}());\nexport { StringFilterUI };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { extend, isUndefined } from '@syncfusion/ej2-base';\n/**\n * `numberfilterui` render number column.\n * @hidden\n */\nvar NumberFilterUI = /** @class */ (function () {\n function NumberFilterUI(parent, serviceLocator, filterSettings) {\n this.filterSettings = filterSettings;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n }\n NumberFilterUI.prototype.keyEventHandler = function (args) {\n if (args.keyCode === 13 || args.keyCode === 9) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent('change', false, true);\n /* tslint:disable-next-line:no-any */\n this.dispatchEvent(evt);\n }\n };\n NumberFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'numberui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.numericTxtObj = new NumericTextBox(extend({\n format: typeof (args.column.format) === 'string' || isUndefined(args.column.format) ? args.column.format :\n args.column.format.format,\n locale: this.parent.locale,\n cssClass: 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('EnterValue'),\n enableRtl: this.parent.enableRtl,\n }, args.column.filter.params));\n this.numericTxtObj.appendTo(this.instance);\n };\n NumberFilterUI.prototype.write = function (args) {\n var numberuiObj = document.querySelector('#numberui-' + args.column.uid).ej2_instances[0];\n numberuiObj.element.addEventListener('keydown', this.keyEventHandler);\n numberuiObj.value = args.filteredValue;\n };\n NumberFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var numberuiObj = document.querySelector('#numberui-' + column.uid).ej2_instances[0];\n var filterValue = numberuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n return NumberFilterUI;\n}());\nexport { NumberFilterUI };\n","import { getZIndexCalcualtion } from '../base/util';\nimport { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\n/**\n * `boolfilterui` render boolean column.\n * @hidden\n */\nvar BooleanFilterUI = /** @class */ (function () {\n function BooleanFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n }\n BooleanFilterUI.prototype.create = function (args) {\n var isForeignColumn = args.column.isForeignColumn();\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = isForeignColumn ? args.column.foreignKeyValue : args.column.field;\n this.elem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'bool-ui-' + args.column.uid });\n args.target.appendChild(this.elem);\n this.dialogObj = args.dialogObj;\n this.dropInstance = new DropDownList(extend({\n dataSource: dataSource instanceof DataManager ?\n dataSource : new DataManager(dataSource),\n query: new Query().select(fields),\n fields: { text: fields, value: fields },\n placeholder: args.localizeText.getConstant('SelectValue'),\n cssClass: 'e-popup-flmenu',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n open: this.openPopup.bind(this),\n actionComplete: function (e) {\n e.result = DataUtil.distinct(e.result, fields, true);\n }\n }, args.column.filter.params));\n this.dropInstance.appendTo(this.elem);\n };\n BooleanFilterUI.prototype.write = function (args) {\n var drpuiObj = document.querySelector('#bool-ui-' + args.column.uid).ej2_instances[0];\n if (!isNullOrUndefined(args.filteredValue)) {\n drpuiObj.text = args.filteredValue;\n }\n };\n BooleanFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var drpuiObj = document.querySelector('#bool-ui-' + column.uid).ej2_instances[0];\n var filterValue = drpuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', false);\n };\n BooleanFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n return BooleanFilterUI;\n}());\nexport { BooleanFilterUI };\n","import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { getCustomDateFormat } from '../base/util';\n/**\n * `datefilterui` render date column.\n * @hidden\n */\nvar DateFilterUI = /** @class */ (function () {\n function DateFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.locator = serviceLocator;\n this.fltrSettings = filterSettings;\n }\n DateFilterUI.prototype.create = function (args) {\n var format = getCustomDateFormat(args.column.format, args.column.type);\n this.dialogObj = args.dialogObj;\n this.inputElem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'dateui-' + args.column.uid });\n args.target.appendChild(this.inputElem);\n if (args.column.type === 'date') {\n this.datePickerObj = new DatePicker(extend({\n format: format,\n cssClass: 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n open: this.openPopup.bind(this),\n }, args.column.filter.params));\n }\n else if (args.column.type === 'datetime') {\n this.datePickerObj = new DateTimePicker(extend({\n format: format,\n cssClass: 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n open: this.openPopup.bind(this),\n }, args.column.filter.params));\n }\n this.datePickerObj.appendTo(this.inputElem);\n };\n DateFilterUI.prototype.write = function (args) {\n var columns = this.fltrSettings.columns;\n var dateuiObj = document.querySelector('#dateui-' + args.column.uid).ej2_instances[0];\n dateuiObj.value = !isNullOrUndefined(args.filteredValue) ? new Date(args.filteredValue) : null;\n };\n DateFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var dateuiObj = document.querySelector('#dateui-' + column.uid).ej2_instances[0];\n var filterValue = dateuiObj.value;\n filterValue = isNullOrUndefined(filterValue) ? null : filterValue;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n DateFilterUI.prototype.openPopup = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n return DateFilterUI;\n}());\nexport { DateFilterUI };\n","import { isNullOrUndefined, getValue, remove, isBlazor } from '@syncfusion/ej2-base';\nimport { Browser, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { FlMenuOptrUI } from './filter-menu-operator';\nimport { StringFilterUI } from './string-filter-ui';\nimport { NumberFilterUI } from './number-filter-ui';\nimport { BooleanFilterUI } from './boolean-filter-ui';\nimport { DateFilterUI } from './date-filter-ui';\nimport { getFilterMenuPostion, parentsUntil, appendChildren } from '../base/util';\nimport * as events from '../base/constant';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `filter menu` render boolean column.\n * @hidden\n */\nvar FilterMenuRenderer = /** @class */ (function () {\n function FilterMenuRenderer(parent, filterSettings, serviceLocator, customFltrOperators, fltrObj) {\n this.isDialogOpen = false;\n this.maxHeight = '350px';\n this.isMenuCheck = false;\n this.colTypes = {\n 'string': StringFilterUI, 'number': NumberFilterUI, 'date': DateFilterUI, 'boolean': BooleanFilterUI, 'datetime': DateFilterUI\n };\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.customFilterOperators = customFltrOperators;\n this.filterObj = fltrObj;\n this.flMuiObj = new FlMenuOptrUI(this.parent, this.customFilterOperators, this.serviceLocator);\n this.l10n = this.serviceLocator.getService('localization');\n this.menuFilterBase = new CheckBoxFilterBase(parent);\n }\n FilterMenuRenderer.prototype.clearCustomFilter = function (col) {\n this.clearBtnClick(col);\n };\n FilterMenuRenderer.prototype.applyCustomFilter = function (args) {\n this.filterBtnClick(args.col);\n };\n FilterMenuRenderer.prototype.openDialog = function (args) {\n this.options = args;\n this.col = this.parent.getColumnByField(args.field);\n if (isNullOrUndefined(this.col.filter) || (isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'Menu')) { ///\n this.renderDlgContent(args.target, this.col);\n }\n };\n FilterMenuRenderer.prototype.closeDialog = function (target) {\n if (!this.dlgObj) {\n return;\n }\n if (isBlazor()) {\n var columns = this.parent.getColumns();\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].filterTemplate) {\n var tempID = this.parent.element.id + columns[i].uid + 'filterTemplate';\n updateBlazorTemplate(tempID, 'FilterTemplate', columns[i]);\n }\n }\n }\n if (this.parent.isReact) {\n this.parent.destroyTemplate(['filterTemplate']);\n this.parent.renderTemplates();\n }\n var elem = document.getElementById(this.dlgObj.element.id);\n if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {\n var argument = { cancel: false, column: this.col, target: target, element: elem };\n this.parent.notify(events.filterMenuClose, argument);\n if (argument.cancel) {\n return;\n }\n this.isDialogOpen = false;\n if (this.isMenuCheck) {\n this.menuFilterBase.unWireEvents();\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.isMenuCheck = false;\n }\n this.dlgObj.destroy();\n remove(elem);\n }\n this.parent.notify(events.filterDialogClose, {});\n };\n FilterMenuRenderer.prototype.renderDlgContent = function (target, column) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: column.field, columnType: column.type\n };\n if (!isBlazor() || this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = this;\n }\n this.parent.trigger(events.actionBegin, args);\n var mainDiv = this.parent.createElement('div', { className: 'e-flmenu-maindiv', id: column.uid + '-flmenu' });\n this.dlgDiv = this.parent.createElement('div', { className: 'e-flmenu', id: column.uid + '-flmdlg' });\n this.dlgDiv.setAttribute('aria-label', this.l10n.getConstant('FilterMenuDialogARIA'));\n if (this.parent.enableAdaptiveUI) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n showCloseIcon: false,\n closeOnEscape: false,\n locale: this.parent.locale,\n visible: false,\n enableRtl: this.parent.enableRtl,\n created: this.dialogCreated.bind(this, target, column),\n position: this.parent.element.classList.contains('e-device') ? { X: 'center', Y: 'center' } : { X: '', Y: '' },\n target: this.parent.element.classList.contains('e-device') ? document.body : this.parent.element,\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.l10n.getConstant('FilterButton'), isPrimary: true, cssClass: 'e-flmenu-okbtn'\n }\n },\n {\n click: this.clearBtnClick.bind(this, column),\n buttonModel: { content: this.l10n.getConstant('ClearButton'), cssClass: 'e-flmenu-cancelbtn' }\n }],\n content: mainDiv,\n width: (!isNullOrUndefined(parentsUntil(target, 'e-bigger'))) || this.parent.element.classList.contains('e-device') ? 260 : 250,\n animationSettings: { effect: 'None' },\n cssClass: 'e-filter-popup'\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgObj.appendTo(this.dlgDiv);\n };\n FilterMenuRenderer.prototype.renderResponsiveDialog = function () {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.buttons = [{}];\n }\n };\n FilterMenuRenderer.prototype.dialogCreated = function (target, column) {\n if (!Browser.isDevice && target) {\n getFilterMenuPostion(target, this.dlgObj, this.parent);\n }\n this.renderFilterUI(target, column);\n this.parent.notify(events.filterDialogCreated, {});\n if (this.parent.enableAdaptiveUI) {\n this.dlgObj.element.style.left = '0px';\n this.dlgObj.element.style.maxHeight = 'none';\n }\n else {\n this.dlgObj.element.style.maxHeight = this.maxHeight;\n }\n this.dlgObj.show();\n if (!column.filterTemplate) {\n this.writeMethod(column, this.dlgObj.element.querySelector('#' + column.uid + '-flmenu'));\n }\n var args = {\n requestType: events.filterAfterOpen,\n columnName: column.field, columnType: column.type\n };\n if (!isBlazor() || this.parent.isJsComponent) {\n var filterModel = 'filterModel';\n args[filterModel] = this;\n }\n this.isDialogOpen = true;\n if (!this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n FilterMenuRenderer.prototype.renderFilterUI = function (target, col) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-flmenu-maindiv');\n this.parent.log('column_type_missing', { column: col });\n this.renderOperatorUI(dlgConetntEle, target, col);\n this.renderFlValueUI(dlgConetntEle, target, col);\n };\n FilterMenuRenderer.prototype.renderOperatorUI = function (dlgConetntEle, target, column) {\n this.flMuiObj.renderOperatorUI(dlgConetntEle, target, column, this.dlgObj, this.filterObj.menuOperator);\n };\n FilterMenuRenderer.prototype.renderFlValueUI = function (dlgConetntEle, target, column) {\n var valueDiv = this.parent.createElement('div', { className: 'e-flmenu-valuediv' });\n var fObj = this.filterObj;\n dlgConetntEle.appendChild(valueDiv);\n var args = { target: valueDiv, column: column, getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj };\n var instanceofFilterUI = new this.colTypes[column.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (column.filterTemplate) {\n var fltrData = {};\n var valueInString = 'value';\n fltrData[column.field] = fltrData[valueInString] = fObj.values[column.field];\n if (column.foreignKeyValue) {\n fltrData[column.foreignKeyValue] = fObj.values[column.field];\n fltrData[column.field] = undefined;\n }\n var col = 'column';\n fltrData[col] = column;\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n this.parent.renderTemplates();\n }\n else {\n var compElement = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n updateBlazorTemplate(tempID, 'FilterTemplate', column);\n appendChildren(valueDiv, compElement);\n }\n if (this.isMenuCheck) {\n this.menuFilterBase.cBox = this.dlgObj.element.querySelector('.e-checkboxlist.e-fields');\n this.menuFilterBase.wireEvents();\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.menuFilterBase.getAllData();\n }\n }\n else {\n if (!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)) {\n var temp = column.filter.ui.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj\n });\n }\n else {\n instanceofFilterUI.create({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, localizeText: this.l10n, dialogObj: this.dlgObj\n });\n }\n }\n };\n FilterMenuRenderer.prototype.writeMethod = function (col, dlgContentEle) {\n var flValue;\n var target = dlgContentEle.querySelector('.e-flmenu-valinput');\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.uid === column.uid) {\n flValue = column.value;\n }\n }\n if (!isNullOrUndefined(col.filter) && !isNullOrUndefined(col.filter.ui)\n && !isNullOrUndefined(col.filter.ui.write)) {\n var temp = col.filter.ui.write;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n else {\n instanceofFilterUI.write({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n };\n FilterMenuRenderer.prototype.filterBtnClick = function (col) {\n var flValue;\n var flOptrValue;\n var targ = this.dlgObj.element.querySelector('.e-flmenu-valuediv input');\n flOptrValue = this.flMuiObj.getFlOperator();\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (col.filterTemplate) {\n var element = this.dlgDiv.querySelector('.e-flmenu-valuediv');\n var fltrValue = void 0;\n if (element.children[0].value) {\n fltrValue = element.children[0].value;\n }\n else {\n if (!isBlazor() && !isNullOrUndefined(element.children[0].ej2_instances)) {\n fltrValue = element.querySelector('input').ej2_instances[0].value;\n }\n else {\n var eControl = element.querySelector('.e-control');\n fltrValue = col.type === 'boolean' ? eControl.checked :\n !isNullOrUndefined(eControl.ej2_instances) ?\n eControl.ej2_instances[0].value :\n eControl.value;\n }\n }\n this.filterObj.filterByColumn(col.field, flOptrValue, fltrValue);\n }\n else {\n if (!isNullOrUndefined(col.filter) &&\n !isNullOrUndefined(col.filter.ui) && !isNullOrUndefined(col.filter.ui.read)) {\n var temp = col.filter.ui.read;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n flValue = temp({ element: targ, column: col, operator: flOptrValue, fltrObj: this.filterObj });\n }\n else {\n instanceofFilterUI.read(targ, col, flOptrValue, this.filterObj);\n }\n }\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.closeResponsiveDialog = function () {\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.clearBtnClick = function (column) {\n this.filterObj.removeFilteredColsByField(column.field);\n if (isBlazor() && !this.parent.isJsComponent) {\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n }\n this.closeDialog();\n var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var col = this.parent.element.querySelector('[e-mappinguid=\"' + column.uid + '\"]').parentElement;\n var flIcon = col.querySelector(iconClass);\n if (flIcon) {\n flIcon.classList.remove('e-filtered');\n }\n };\n FilterMenuRenderer.prototype.destroy = function () {\n this.closeDialog();\n };\n /**\n * @hidden\n */\n FilterMenuRenderer.prototype.getFilterUIInfo = function () {\n return { field: this.col.field, operator: this.flMuiObj.getFlOperator() };\n };\n FilterMenuRenderer.prototype.renderCheckBoxMenu = function () {\n this.isMenuCheck = true;\n this.menuFilterBase.updateModel(this.options);\n this.menuFilterBase.getAndSetChkElem(this.options);\n this.dlgObj.buttons = [{\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: {\n content: this.menuFilterBase.getLocalizedLabel('FilterButton'),\n cssClass: 'e-primary', isPrimary: true\n }\n },\n {\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: { cssClass: 'e-flat', content: this.menuFilterBase.getLocalizedLabel('ClearButton') }\n }];\n this.menuFilterBase.dialogObj = this.dlgObj;\n this.menuFilterBase.dlg = this.dlgObj.element;\n this.menuFilterBase.dlg.classList.add('e-menucheckbox');\n this.menuFilterBase.dlg.classList.remove('e-checkboxfilter');\n this.maxHeight = '800px';\n return this.menuFilterBase.sBox.innerHTML;\n };\n FilterMenuRenderer.prototype.actionComplete = function (args) {\n if (this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n return FilterMenuRenderer;\n}());\nexport { FilterMenuRenderer };\n","import * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n * @hidden\n */\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.parent = parent;\n this.isresetFocus = true;\n this.checkBoxBase = new CheckBoxFilterBase(parent);\n this.addEventListener();\n }\n /**\n * To destroy the check box filter.\n * @return {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.removeEventListener();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.checkBoxBase.openDialog(options);\n this.parent.log('column_type_missing', { column: options.column });\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n this.removeEventListener();\n this.checkBoxBase.closeDialog();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n CheckBoxFilter.prototype.closeResponsiveDialog = function (isCustomFilter) {\n this.checkBoxBase.closeDialog();\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n CheckBoxFilter.prototype.actionBegin = function (args) {\n this.parent.trigger(events.actionBegin, args);\n };\n CheckBoxFilter.prototype.actionComplete = function (args) {\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.actionPrevent = function (args) {\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, args);\n args.cancel = true;\n }\n };\n CheckBoxFilter.prototype.clearCustomFilter = function (col) {\n this.checkBoxBase.clearFilter(col);\n };\n CheckBoxFilter.prototype.applyCustomFilter = function (args) {\n this.checkBoxBase.fltrBtnHandler();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.cBoxFltrBegin, this.actionBegin, this);\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.parent.on(events.fltrPrevent, this.actionPrevent, this);\n };\n CheckBoxFilter.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.cBoxFltrBegin, this.actionBegin);\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.parent.off(events.fltrPrevent, this.actionPrevent);\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, rippleEffect, NotifyPropertyChanges, Property, closest } from '@syncfusion/ej2-base';\nimport { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n * \n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n * @private\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n this.trigger('change', { value: value, event: event });\n if (this.tagName === 'EJS-RADIOBUTTON') {\n event.stopPropagation();\n }\n };\n RadioButton.prototype.updateChange = function () {\n var input;\n var instance;\n var radioGrp = this.getRadioGroup();\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.element.parentElement;\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n }\n };\n RadioButton.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n RadioButton.prototype.focusOutHandler = function () {\n var label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * To get the value of selected radio button in a group.\n * @method getSelectedValue\n * @return {string}\n */\n RadioButton.prototype.getSelectedValue = function () {\n var input;\n var radioGrp = this.getRadioGroup();\n for (var i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n };\n RadioButton.prototype.getRadioGroup = function () {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n * @private\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getLabel = function () {\n if (this.element) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n var value = this.element.getAttribute('value');\n if (this.isVue && value && value === this.value) {\n this.checked = true;\n }\n if (this.isVue ? this.value && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', { className: WRAPPER });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([label], this.cssClass.split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.labelRippleHandler = function (e) {\n var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, ripple);\n };\n RadioButton.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n };\n /**\n * Called internally if any of the property value changes.\n * @private\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([label], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([label], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (!isNullOrUndefined(this.htmlAttributes) && this.htmlAttributes.value) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n * @private\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n var formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n if (label) {\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n }\n };\n RadioButton.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (ATTRIBUTES.indexOf(key) > -1) {\n var wrapper = this.element.parentElement;\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.getLabel();\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n /**\n * Click the RadioButton element\n * its native method\n * @public\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n * @public\n */\n RadioButton.prototype.focusIn = function () {\n this.element.focus();\n };\n var RadioButton_1;\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RadioButton.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], RadioButton.prototype, \"htmlAttributes\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n}(Component));\nexport { RadioButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { EventHandler, remove, Browser, isBlazor, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { RadioButton, CheckBox } from '@syncfusion/ej2-buttons';\nimport { distinctStringValues, isComplexField, getComplexFieldID, getCustomDateFormat, applyBiggerTheme, performComplexDataOperation } from '../base/util';\nimport { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { parentsUntil, appendChildren, extend, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport { ContextMenu } from '@syncfusion/ej2-navigations';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilterBase = /** @class */ (function (_super) {\n __extends(ExcelFilterBase, _super);\n /**\n * Constructor for excel filtering module\n * @hidden\n */\n function ExcelFilterBase(parent, customFltrOperators) {\n var _this = _super.call(this, parent) || this;\n _this.customFilterOperators = customFltrOperators;\n _this.isExcel = true;\n return _this;\n }\n ExcelFilterBase.prototype.getCMenuDS = function (type, operator) {\n var options = {\n number: ['Equal', 'NotEqual', '', 'LessThan', 'LessThanOrEqual', 'GreaterThan',\n 'GreaterThanOrEqual', 'Between', '', 'CustomFilter'],\n string: ['Equal', 'NotEqual', '', 'StartsWith', 'EndsWith', '', 'Contains', '', 'CustomFilter'],\n };\n options.date = options.number;\n options.datetime = options.number;\n var model = [];\n for (var i = 0; i < options[type].length; i++) {\n if (options[type][i].length) {\n if (operator) {\n model.push({\n text: this.getLocalizedLabel(options[type][i]) + '...',\n iconCss: 'e-icons e-icon-check ' + (operator === options[type][i].toLowerCase() ? '' : 'e-emptyicon')\n });\n }\n else {\n model.push({\n text: this.getLocalizedLabel(options[type][i]) + '...'\n });\n }\n }\n else {\n model.push({ separator: true });\n }\n }\n return model;\n };\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n ExcelFilterBase.prototype.destroy = function () {\n if (this.dlg) {\n this.unwireExEvents();\n _super.prototype.destroy.call(this);\n }\n if (this.cmenu && this.cmenu.parentElement) {\n remove(this.cmenu);\n }\n };\n ExcelFilterBase.prototype.createMenu = function (type, isFiltered, isCheckIcon, eleOptions) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n this.menu = this.parent.createElement('div', { className: 'e-contextmenu-wrapper' });\n if (this.parent.enableRtl) {\n this.menu.classList.add('e-rtl');\n }\n else {\n this.menu.classList.remove('e-rtl');\n }\n var ul = this.parent.createElement('ul');\n var icon = isFiltered ? 'e-excl-filter-icon e-filtered' : 'e-excl-filter-icon';\n // tslint:disable-next-line:no-any\n if (this.parent.allowSorting && this.parent.getModuleName() === 'grid'\n && !this.options.isResponsiveFilter) {\n var hdrele = this.parent.getColumnHeaderByUid(eleOptions.uid).getAttribute('aria-sort');\n var colIsSort = this.parent.getColumnByField(eleOptions.field).allowSorting;\n var isAsc = (!colIsSort || hdrele === 'Ascending') ? 'e-disabled e-excel-ascending' : 'e-excel-ascending';\n var isDesc = (!colIsSort || hdrele === 'Descending') ? 'e-disabled e-excel-descending' : 'e-excel-descending';\n var ascName = (type === 'string') ? this.getLocalizedLabel('SortAtoZ') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByOldest') : this.getLocalizedLabel('SortSmallestToLargest');\n var descName = (type === 'string') ? this.getLocalizedLabel('SortZtoA') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByNewest') : this.getLocalizedLabel('SortLargestToSmallest');\n ul.appendChild(this.createMenuElem(ascName, isAsc, 'e-sortascending'));\n ul.appendChild(this.createMenuElem(descName, isDesc, 'e-sortdescending'));\n var separator = this.parent.createElement('li', { className: 'e-separator e-menu-item e-excel-separator' });\n ul.appendChild(separator);\n }\n if (!this.options.isResponsiveFilter) {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel('ClearFilter'), isFiltered ? '' : 'e-disabled', icon));\n }\n if (type !== 'boolean') {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options[type]), 'e-submenu', isCheckIcon && this.ensureTextFilter() ? 'e-icon-check' : icon + ' e-emptyicon', true));\n }\n this.menu.appendChild(ul);\n this.parent.notify(events.beforeFltrcMenuOpen, { element: this.menu });\n this.parent.notify(events.refreshCustomFilterClearBtn, { isFiltered: isFiltered });\n };\n ExcelFilterBase.prototype.createMenuElem = function (val, className, iconName, isSubMenu) {\n var li = this.parent.createElement('li', { className: className + ' e-menu-item' });\n li.innerHTML = val;\n li.insertBefore(this.parent.createElement('span', { className: 'e-menu-icon e-icons ' + iconName }), li.firstChild);\n if (isSubMenu) {\n li.appendChild(this.parent.createElement('span', { className: 'e-icons e-caret' }));\n }\n return li;\n };\n ExcelFilterBase.prototype.wireExEvents = function () {\n EventHandler.add(this.dlg, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.dlg, 'click', this.clickExHandler, this);\n };\n ExcelFilterBase.prototype.unwireExEvents = function () {\n EventHandler.remove(this.dlg, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.dlg, 'click', this.clickExHandler);\n };\n ExcelFilterBase.prototype.clickExHandler = function (e) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var menuItem = parentsUntil(e.target, 'e-menu-item');\n if (menuItem) {\n if (this.getLocalizedLabel('ClearFilter') === menuItem.innerText.trim()) {\n this.clearFilter();\n this.closeDialog();\n }\n else if (this.options.isResponsiveFilter\n && this.getLocalizedLabel(options[this.options.type]) === menuItem.innerText.trim()) {\n this.hoverHandler(e);\n }\n }\n };\n ExcelFilterBase.prototype.destroyCMenu = function () {\n this.isCMenuOpen = false;\n if (this.menuObj && !this.menuObj.isDestroyed) {\n this.menuObj.destroy();\n remove(this.cmenu);\n this.parent.notify(events.renderResponsiveCmenu, { target: null, header: '', isOpen: false });\n }\n };\n ExcelFilterBase.prototype.hoverHandler = function (e) {\n if (this.options.isResponsiveFilter && e.type === 'mouseover') {\n return;\n }\n var target = e.target.querySelector('.e-contextmenu');\n var li = parentsUntil(e.target, 'e-menu-item');\n var focused = this.menu.querySelector('.e-focused');\n var isSubMenu;\n if (focused) {\n focused.classList.remove('e-focused');\n }\n if (li) {\n li.classList.add('e-focused');\n isSubMenu = li.classList.contains('e-submenu');\n }\n if (target) {\n return;\n }\n if (!isSubMenu) {\n var submenu = this.menu.querySelector('.e-submenu');\n if (!isNullOrUndefined(submenu)) {\n submenu.classList.remove('e-selected');\n }\n this.destroyCMenu();\n }\n var selectedMenu = this.ensureTextFilter();\n if (!this.isCMenuOpen && isSubMenu) {\n li.classList.add('e-selected');\n this.isCMenuOpen = true;\n var menuOptions = {\n items: this.getCMenuDS(this.options.type, selectedMenu ? selectedMenu.replace(/\\s/g, '') : undefined),\n select: this.selectHandler.bind(this),\n onClose: this.destroyCMenu.bind(this),\n enableRtl: this.parent.enableRtl,\n beforeClose: this.preventClose.bind(this),\n cssClass: this.options.isResponsiveFilter ? 'e-res-contextmenu-wrapper' : ''\n };\n this.parent.element.appendChild(this.cmenu);\n this.menuObj = new ContextMenu(menuOptions, this.cmenu);\n var client = this.menu.querySelector('.e-submenu').getBoundingClientRect();\n var pos = { top: 0, left: 0 };\n if (this.options.isResponsiveFilter) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.menuObj.element.style.height = 'calc(100% - ' + height + 'px)';\n this.menuObj.open(height, 0, document.body);\n var header = this.getLocalizedLabel(options[this.options.type]);\n this.parent.notify(events.renderResponsiveCmenu, {\n target: this.menuObj.element.parentElement, header: header, isOpen: true\n });\n }\n else {\n if (Browser.isDevice) {\n var contextRect = this.getContextBounds(this.menuObj);\n pos.top = (window.innerHeight - contextRect.height) / 2;\n pos.left = (window.innerWidth - contextRect.width) / 2;\n this.closeDialog();\n }\n else {\n pos.top = Browser.isIE ? window.pageYOffset + client.top : window.scrollY + client.top;\n pos.left = this.getCMenuYPosition(this.dlg, this.menuObj);\n }\n this.menuObj.open(pos.top, pos.left, e.target);\n }\n applyBiggerTheme(this.parent.element, this.menuObj.element.parentElement);\n }\n };\n ExcelFilterBase.prototype.ensureTextFilter = function () {\n var selectedMenu;\n var predicates = this.existingPredicate[this.options.field];\n if (predicates && predicates.length === 2) {\n if (predicates[0].operator === 'greaterthanorequal' && predicates[1].operator === 'lessthanorequal') {\n selectedMenu = 'between';\n }\n else {\n selectedMenu = 'customfilter';\n }\n }\n else {\n if (predicates && predicates.length === 1) {\n this.optrData = this.customFilterOperators[this.options.type + 'Operator'];\n selectedMenu = predicates[0].operator;\n }\n }\n return selectedMenu;\n };\n ExcelFilterBase.prototype.preventClose = function (args) {\n if (this.options && this.options.isResponsiveFilter && args.event) {\n var target = args.event.target;\n var isFilterBack = target.classList.contains('e-resfilterback')\n || target.classList.contains('e-res-back-btn') || target.classList.contains('e-menu-item');\n args.cancel = !isFilterBack;\n }\n else {\n if (args.event instanceof MouseEvent && args.event.target.classList.contains('e-submenu')) {\n args.cancel = true;\n }\n }\n };\n ExcelFilterBase.prototype.getContextBounds = function (context) {\n var elementVisible = this.menuObj.element.style.display;\n this.menuObj.element.style.display = 'block';\n return this.menuObj.element.getBoundingClientRect();\n };\n ExcelFilterBase.prototype.getCMenuYPosition = function (target, context) {\n var contextWidth = this.getContextBounds(context).width;\n var targetPosition = target.getBoundingClientRect();\n var leftPos = targetPosition.right + contextWidth - this.parent.element.clientWidth;\n var targetBorder = target.offsetWidth - target.clientWidth;\n targetBorder = targetBorder ? targetBorder + 1 : 0;\n return (leftPos < 1) ? (targetPosition.right + 1 - targetBorder) : (targetPosition.left - contextWidth - 1 + targetBorder);\n };\n ExcelFilterBase.prototype.openDialog = function (options) {\n var _this = this;\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n this.dialogObj.dataBind();\n var filterLength = (this.existingPredicate[options.field] && this.existingPredicate[options.field].length) ||\n this.options.filteredColumns.filter(function (col) {\n return _this.options.field === col.field;\n }).length;\n this.createMenu(options.type, filterLength > 0, (filterLength === 1 || filterLength === 2), options);\n this.dlg.insertBefore(this.menu, this.dlg.firstChild);\n this.dlg.classList.add('e-excelfilter');\n if (this.parent.enableRtl) {\n this.dlg.classList.add('e-rtl');\n }\n this.dlg.classList.remove('e-checkboxfilter');\n this.cmenu = this.parent.createElement('ul', { className: 'e-excel-menu' });\n this.parent.notify(events.filterDialogCreated, {});\n this.wireExEvents();\n };\n ExcelFilterBase.prototype.closeDialog = function () {\n _super.prototype.closeDialog.call(this);\n };\n ExcelFilterBase.prototype.selectHandler = function (e) {\n if (e.item) {\n this.parent.notify(events.filterCmenuSelect, {});\n this.menuItem = e.item;\n this.renderDialogue(e);\n }\n };\n /** @hidden */\n ExcelFilterBase.prototype.renderDialogue = function (e) {\n var _this = this;\n var target = e ? e.element : undefined;\n var column = this.options.field;\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var mainDiv = this.parent.createElement('div', {\n className: 'e-xlfl-maindiv',\n id: isComplex ? complexFieldName + '-xlflmenu' : column + '-xlflmenu'\n });\n this.dlgDiv = this.parent.createElement('div', {\n className: 'e-xlflmenu',\n id: isComplex ? complexFieldName + '-xlfldlg' : column + '-xlfldlg'\n });\n if (this.options.isResponsiveFilter) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n header: this.getLocalizedLabel('CustomFilter'),\n isModal: true,\n overlayClick: this.removeDialog.bind(this),\n showCloseIcon: true,\n closeOnEscape: false,\n target: document.body,\n // target: this.parent.element,\n visible: false,\n enableRtl: this.parent.enableRtl,\n open: function () {\n var row = _this.dlgObj.element.querySelector('table.e-xlfl-table>tr');\n if (_this.options.column.filterTemplate) {\n if (isBlazor()) {\n row.querySelector('.e-xlfl-valuediv').children[0].focus();\n }\n else {\n row.querySelector('#' + _this.options.column.field + '-xlfl-frstvalue').focus();\n }\n }\n else {\n row.cells[1].querySelector('input:not([type=hidden])').focus();\n }\n },\n close: this.removeDialog.bind(this),\n created: this.createdDialog.bind(this, target, column),\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.getLocalizedLabel('OKButton'), isPrimary: true, cssClass: 'e-xlfl-okbtn'\n }\n },\n {\n click: this.removeDialog.bind(this),\n buttonModel: { content: this.getLocalizedLabel('CancelButton'), cssClass: 'e-xlfl-cancelbtn' }\n }],\n content: mainDiv,\n width: 430,\n animationSettings: { effect: 'None' },\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgDiv.setAttribute('aria-label', this.getLocalizedLabel('CustomFilterDialogARIA'));\n this.dlgObj.appendTo(this.dlgDiv);\n };\n ExcelFilterBase.prototype.renderResponsiveDialog = function () {\n if (this.options.isResponsiveFilter) {\n var rowResponsiveDlg = document.querySelector('.e-row-responsive-filter');\n if (rowResponsiveDlg) {\n rowResponsiveDlg.classList.remove('e-row-responsive-filter');\n }\n this.dlgObj.buttons = [{}];\n this.dlgObj.header = undefined;\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.showCloseIcon = false;\n }\n };\n /** @hidden */\n ExcelFilterBase.prototype.removeDialog = function () {\n if (isBlazor()) {\n var columns = this.options.columns || [];\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].filterTemplate) {\n var tempID = this.parent.element.id + columns[i].uid + 'filterTemplate';\n updateBlazorTemplate(tempID, 'FilterTemplate', columns[i]);\n }\n }\n }\n this.parent.notify(events.customFilterClose, {});\n if (this.parent.isReact) {\n this.parent.destroyTemplate(['filterTemplate']);\n this.parent.renderTemplates();\n }\n this.removeObjects([this.dropOptr, this.datePicker, this.dateTimePicker, this.actObj, this.numericTxtObj, this.dlgObj]);\n remove(this.dlgDiv);\n this.parent.notify(events.filterDialogClose, {});\n };\n ExcelFilterBase.prototype.createdDialog = function (target, column) {\n this.renderCustomFilter(target, column);\n this.dlgObj.element.style.left = '0px';\n if (!this.options.isResponsiveFilter) {\n this.dlgObj.element.style.top = '0px';\n }\n else {\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.dlgObj.element.style.top = height + 'px';\n }\n if (!this.options.isResponsiveFilter && Browser.isDevice && window.innerWidth < 440) {\n this.dlgObj.element.style.width = '90%';\n }\n this.parent.notify(events.beforeCustomFilterOpen, { column: column, dialog: this.dialogObj });\n this.dlgObj.show();\n applyBiggerTheme(this.parent.element, this.dlgObj.element.parentElement);\n this.parent.notify(events.setCustomFilterHeader, { title: this.getLocalizedLabel('CustomFilter') });\n };\n ExcelFilterBase.prototype.renderCustomFilter = function (target, column) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-xlfl-maindiv');\n /* tslint:disable-next-line:max-line-length */\n var dlgFields = this.parent.createElement('div', { innerHTML: this.getLocalizedLabel('ShowRowsWhere'), className: 'e-xlfl-dlgfields' });\n dlgConetntEle.appendChild(dlgFields);\n //column name\n var fieldSet = this.parent.createElement('div', { innerHTML: this.options.displayName, className: 'e-xlfl-fieldset' });\n dlgConetntEle.appendChild(fieldSet);\n this.renderFilterUI(column, dlgConetntEle);\n };\n /** @hidden */\n ExcelFilterBase.prototype.filterBtnClick = function (col) {\n var isComplex = !isNullOrUndefined(col) && isComplexField(col);\n var complexFieldName = !isNullOrUndefined(col) && getComplexFieldID(col);\n var colValue = isComplex ? complexFieldName : col;\n var fValue = this.options.column.filterTemplate && isBlazor() ?\n this.dlgDiv.querySelector('.-xlfl-frstvalue').children[0].querySelector('.e-control').ej2_instances[0]\n : this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstvalue').ej2_instances[0];\n var fOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstoptr').ej2_instances[0];\n var sValue = this.options.column.filterTemplate && isBlazor() ?\n this.dlgDiv.querySelector('.-xlfl-secndvalue').children[0].querySelector('.e-control').ej2_instances[0]\n : this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndvalue').ej2_instances[0];\n var sOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndoptr').ej2_instances[0];\n var checkBoxValue;\n if (this.options.type === 'string') {\n var checkBox = this.dlgDiv.querySelector('#' + colValue + '-xlflmtcase').ej2_instances[0];\n checkBoxValue = checkBox.checked;\n }\n var andRadio = this.dlgDiv.querySelector('#' + colValue + 'e-xlfl-frstpredicate').ej2_instances[0];\n var orRadio = this.dlgDiv.querySelector('#' + colValue + 'e-xlfl-secndpredicate').ej2_instances[0];\n var predicate = (andRadio.checked ? 'and' : 'or');\n if (sValue.value === null) {\n predicate = 'or';\n }\n this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, this.options.ignoreAccent, sOperator.value, sValue.value);\n this.removeDialog();\n };\n /**\n * @hidden\n * Filters grid row by column name with given options.\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} firstOperator - Defines the first operator by how to filter records.\n * @param {string | number | Date | boolean} firstValue - Defines the first value which is used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If ignore case set to true, then filter records with exact match or else\n * filter records with case insensitive(uppercase and lowercase letters treated as same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.\n * @param {string} secondOperator - Defines the second operator by how to filter records.\n * @param {string | number | Date | boolean} secondValue - Defines the first value which is used to filter records.\n */\n ExcelFilterBase.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n var col = this.parent.getColumnByField ? this.parent.getColumnByField(fieldName) : this.options.column;\n var field = this.isForeignColumn(col) ? col.foreignKeyValue : fieldName;\n var fColl = [];\n var mPredicate;\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: firstOperator,\n value: firstValue,\n type: this.options.type\n });\n var arg = {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: firstOperator, arg3: firstValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: secondOperator, arg8: secondValue, cancel: false\n };\n this.parent.notify(events.fltrPrevent, arg);\n if (arg.cancel) {\n return;\n }\n mPredicate = new Predicate(field, firstOperator.toLowerCase(), firstValue, !matchCase, ignoreAccent);\n if (!isNullOrUndefined(secondValue) && !isNullOrUndefined(secondOperator)) {\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: secondOperator,\n value: secondValue,\n type: this.options.type\n });\n /* tslint:disable-next-line:max-line-length */\n mPredicate = mPredicate[predicate](field, secondOperator.toLowerCase(), secondValue, !matchCase, ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: mPredicate, actualPredicate: fColl\n };\n if (this.isForeignColumn(col)) {\n this.foreignKeyFilter(args, fColl, mPredicate);\n }\n else {\n this.options.handler(args);\n }\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderOperatorUI = function (column, table, elementID, predicates, isFirst) {\n var fieldElement = this.parent.createElement('tr', { className: 'e-xlfl-fields' });\n table.appendChild(fieldElement);\n var xlfloptr = this.parent.createElement('td', { className: 'e-xlfl-optr' });\n fieldElement.appendChild(xlfloptr);\n var optrDiv = this.parent.createElement('div', { className: 'e-xlfl-optrdiv' });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var optrInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementID : column + elementID });\n optrDiv.appendChild(optrInput);\n xlfloptr.appendChild(optrDiv);\n var optr = this.options.type + 'Operator';\n var dropDatasource = this.customFilterOperators[optr];\n this.optrData = dropDatasource;\n var selectedValue = this.dropSelectedVal(this.options.column, predicates, isFirst);\n //Trailing three dots are sliced.\n var menuText = '';\n if (this.menuItem) {\n menuText = this.menuItem.text.slice(0, -3);\n if (menuText !== this.getLocalizedLabel('CustomFilter')) {\n selectedValue = isFirst ? menuText : undefined;\n }\n if (menuText === this.getLocalizedLabel('Between')) {\n selectedValue = this.getLocalizedLabel(isFirst ? 'GreaterThanOrEqual' : 'LessThanOrEqual');\n }\n }\n var col = this.options.column;\n this.dropOptr = new DropDownList(extend({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n text: selectedValue,\n open: this.dropDownOpen.bind(this),\n enableRtl: this.parent.enableRtl,\n change: this.dropDownValueChange.bind(this)\n }, col.filter.params));\n this.dropOptr.appendTo(optrInput);\n var operator = this.getSelectedValue(selectedValue);\n return { fieldElement: fieldElement, operator: operator };\n };\n ExcelFilterBase.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n ExcelFilterBase.prototype.dropDownValueChange = function (args) {\n if (args.element.id.includes('-xlfl-frstoptr')) {\n this.firstOperator = args.value.toString();\n }\n else {\n this.secondOperator = args.value.toString();\n }\n };\n /**\n * @hidden\n */\n ExcelFilterBase.prototype.getFilterUIInfo = function () {\n return { firstOperator: this.firstOperator, secondOperator: this.secondOperator, field: this.options.field };\n };\n ExcelFilterBase.prototype.getSelectedValue = function (text) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('text', 'equal', text));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].value : '';\n };\n ExcelFilterBase.prototype.dropSelectedVal = function (col, predicates, isFirst) {\n var operator;\n if (predicates && predicates.length > 0) {\n operator = predicates.length === 2 ?\n (isFirst ? predicates[0].operator : predicates[1].operator) :\n (isFirst ? predicates[0].operator : undefined);\n }\n else if (isFirst && col.type === 'string' && !col.filter.operator) {\n operator = 'startswith';\n }\n else {\n operator = isFirst ? col.filter.operator || 'equal' : undefined;\n }\n return this.getSelectedText(operator);\n };\n ExcelFilterBase.prototype.getSelectedText = function (operator) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', operator));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n };\n ExcelFilterBase.prototype.renderFilterUI = function (column, dlgConetntEle) {\n var predicates = this.existingPredicate[column];\n var table = this.parent.createElement('table', { className: 'e-xlfl-table' });\n dlgConetntEle.appendChild(table);\n var colGroup = this.parent.createElement('colGroup');\n colGroup.innerHTML = '';\n table.appendChild(colGroup);\n //Renders first dropdown\n /* tslint:disable-next-line:max-line-length */\n var optr = this.renderOperatorUI(column, table, '-xlfl-frstoptr', predicates, true);\n this.firstOperator = optr.operator;\n //Renders first value\n this.renderFlValueUI(column, optr, '-xlfl-frstvalue', predicates, true);\n var predicate = this.parent.createElement('tr', { className: 'e-xlfl-predicate' });\n table.appendChild(predicate);\n //Renders first radion button\n this.renderRadioButton(column, predicate, predicates);\n //Renders second dropdown\n optr = this.renderOperatorUI(column, table, '-xlfl-secndoptr', predicates, false);\n this.secondOperator = optr.operator;\n //Renders second text box\n this.renderFlValueUI(column, optr, '-xlfl-secndvalue', predicates, false);\n };\n ExcelFilterBase.prototype.renderRadioButton = function (column, tr, predicates) {\n var td = this.parent.createElement('td', { className: 'e-xlfl-radio', attrs: { 'colSpan': '2' } });\n tr.appendChild(td);\n var radioDiv = this.parent\n .createElement('div', { className: 'e-xlfl-radiodiv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n /* tslint:disable-next-line:max-line-length */\n var frstpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-frstpredicate' : column + 'e-xlfl-frstpredicate', attrs: { 'type': 'radio' } });\n /* tslint:disable-next-line:max-line-length */\n var secndpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-secndpredicate' : column + 'e-xlfl-secndpredicate', attrs: { 'type': 'radio' } });\n //appends into div\n radioDiv.appendChild(frstpredicate);\n radioDiv.appendChild(secndpredicate);\n td.appendChild(radioDiv);\n if (this.options.type === 'string') {\n this.renderMatchCase(column, tr, td, '-xlflmtcase', predicates);\n }\n // Initialize AND RadioButton component.\n /* tslint:disable-next-line:max-line-length */\n var andRadio = new RadioButton({ label: this.getLocalizedLabel('AND'), name: 'default', cssClass: 'e-xlfl-radio-and', checked: true, enableRtl: this.parent.enableRtl });\n // Initialize OR RadioButton component.\n /* tslint:disable-next-line:max-line-length */\n var orRadio = new RadioButton({ label: this.getLocalizedLabel('OR'), name: 'default', cssClass: 'e-xlfl-radio-or', enableRtl: this.parent.enableRtl });\n var flValue = predicates && predicates.length === 2 ? predicates[1].predicate : 'and';\n if (flValue === 'and') {\n andRadio.checked = true;\n orRadio.checked = false;\n }\n else {\n orRadio.checked = true;\n andRadio.checked = false;\n }\n // Render initialized RadioButton.\n andRadio.appendTo(frstpredicate);\n orRadio.appendTo(secndpredicate);\n };\n /* tslint:disable-next-line:no-any */\n ExcelFilterBase.prototype.removeObjects = function (elements) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var obj = elements_1[_i];\n if (obj && !obj.isDestroyed) {\n obj.destroy();\n }\n }\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderFlValueUI = function (column, optr, elementId, predicates, isFirst) {\n var value = this.parent.createElement('td', { className: 'e-xlfl-value' });\n optr.fieldElement.appendChild(value);\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var valueDiv = this.parent.createElement('div', { className: 'e-xlfl-valuediv' });\n var isFilteredCol = this.options.filteredColumns.some(function (col) { return column === col.field; });\n var fltrPredicates = this.options.filteredColumns.filter(function (col) { return col.field === column; });\n if (this.options.column.filterTemplate) {\n var data = {};\n var columnObj = this.options.column;\n if (isFilteredCol && elementId) {\n data = this.getExcelFilterData(elementId, data, columnObj, predicates, fltrPredicates);\n }\n var isReactCompiler = this.parent.isReact && typeof (this.options.column.filterTemplate) !== 'string';\n var tempID = this.parent.element.id + columnObj.uid + 'filterTemplate';\n if (isReactCompiler) {\n this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n this.parent.renderTemplates();\n }\n else {\n var element = this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, element);\n }\n if (isBlazor()) {\n valueDiv.children[0].classList.add(elementId);\n if (this.dlgDiv.querySelectorAll('.e-xlfl-value').length > 1) {\n updateBlazorTemplate(tempID, 'FilterTemplate', columnObj);\n }\n }\n else {\n valueDiv.querySelector('input').id = isComplex ? complexFieldName + elementId : column + elementId;\n }\n value.appendChild(valueDiv);\n }\n else {\n var valueInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId });\n valueDiv.appendChild(valueInput);\n value.appendChild(valueDiv);\n var flValue = void 0;\n var predicate = void 0;\n if (predicates && predicates.length > 0) {\n predicate = predicates.length === 2 ?\n (isFirst ? predicates[0] : predicates[1]) :\n (isFirst ? predicates[0] : undefined);\n flValue = (predicate && predicate.operator === optr.operator) ? predicate.value : undefined;\n }\n var types = {\n 'string': this.renderAutoComplete.bind(this),\n 'number': this.renderNumericTextBox.bind(this),\n 'date': this.renderDate.bind(this),\n 'datetime': this.renderDateTime.bind(this)\n };\n types[this.options.type](this.options, column, valueInput, flValue, this.parent.enableRtl);\n }\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.getExcelFilterData = function (elementId, data, columnObj, predicates, fltrPredicates) {\n var predIndex = elementId === '-xlfl-frstvalue' ? 0 : 1;\n if (elementId === '-xlfl-frstvalue' || fltrPredicates.length > 1) {\n data = { column: predicates instanceof Array ? predicates[predIndex] : predicates };\n var indx = this.options.column.columnData && fltrPredicates.length > 1 ?\n (this.options.column.columnData.length === 1 ? 0 : 1) : predIndex;\n data[this.options.field] = columnObj.foreignKeyValue ? this.options.column.columnData[indx][columnObj.foreignKeyValue] :\n fltrPredicates[indx].value;\n if (this.options.foreignKeyValue) {\n data[this.options.foreignKeyValue] = this.options.column.columnData[indx][columnObj.foreignKeyValue];\n }\n }\n return data;\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderMatchCase = function (column, tr, matchCase, elementId, predicates) {\n /* tslint:disable-next-line:max-line-length */\n var matchCaseDiv = this.parent.createElement('div', { className: 'e-xlfl-matchcasediv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var matchCaseInput = this.parent.createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId, attrs: { 'type': 'checkbox' } });\n matchCaseDiv.appendChild(matchCaseInput);\n matchCase.appendChild(matchCaseDiv);\n var flValue = predicates && predicates.length > 0 ?\n (predicates && predicates.length === 2 ? predicates[1].matchCase : predicates[0].matchCase) :\n false;\n // Initialize Match Case check box.\n var checkbox = new CheckBox({\n label: this.getLocalizedLabel('MatchCase'),\n enableRtl: this.parent.enableRtl, checked: flValue\n });\n // Render initialized CheckBox.\n checkbox.appendTo(matchCaseInput);\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderDate = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type);\n this.datePicker = new DatePicker(extend({\n format: format,\n cssClass: 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale,\n }, options.column.filter.params));\n this.datePicker.appendTo(inputValue);\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderDateTime = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type);\n this.dateTimePicker = new DateTimePicker(extend({\n format: format,\n cssClass: 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale,\n }, options.column.filter.params));\n this.dateTimePicker.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.completeAction = function (e) {\n e.result = distinctStringValues(e.result);\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderNumericTextBox = function (options, column, inputValue, fValue, isRtl) {\n this.numericTxtObj = new NumericTextBox(extend({\n format: options.format,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n value: fValue,\n locale: this.parent.locale,\n }, options.column.filter.params));\n this.numericTxtObj.appendTo(inputValue);\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilterBase.prototype.renderAutoComplete = function (options, column, inputValue, fValue, isRtl) {\n var _this = this;\n var colObj = this.options.column;\n var isForeignColumn = this.isForeignColumn(colObj);\n var dataSource = isForeignColumn ? colObj.dataSource : options.dataSource;\n var fields = { value: isForeignColumn ? colObj.foreignKeyValue : column };\n var actObj = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n query: this.getQuery(),\n sortOrder: 'Ascending',\n locale: this.parent.locale,\n cssClass: 'e-popup-flmenu',\n autofill: true,\n focus: function () {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var columnvalue = isComplex ? complexFieldName : column;\n actObj.filterType = _this.dlgDiv.querySelector('#' + columnvalue +\n (inputValue.id === (columnvalue + '-xlfl-frstvalue') ?\n '-xlfl-frstoptr' :\n '-xlfl-secndoptr')).ej2_instances[0].value;\n actObj.ignoreCase = options.type === 'string' ?\n !_this.dlgDiv.querySelector('#' + columnvalue + '-xlflmtcase').ej2_instances[0].checked :\n true;\n actObj.filterType = !isNullOrUndefined(actObj.filterType) ? actObj.filterType :\n 'equal';\n },\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n actionComplete: function (e) {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObject) {\n return isComplex ? performComplexDataOperation(actObj.fields.value, mapObject)\n : mapObject[actObj.fields.value];\n }).indexOf(isComplex ? performComplexDataOperation(actObj.fields.value, obj) :\n obj[_this.actObj.fields.value]) === index;\n });\n },\n text: fValue\n }, colObj.filter.params));\n if (dataSource && 'result' in dataSource) {\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, this.getQuery());\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n actObj.dataSource = new DataManager(e);\n });\n }\n actObj.appendTo(inputValue);\n this.actObj = actObj;\n };\n return ExcelFilterBase;\n}(CheckBoxFilterBase));\nexport { ExcelFilterBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { ExcelFilterBase } from '../common/excel-filter-base';\nimport { CheckBoxFilter } from './checkbox-filter';\nimport * as events from '../base/constant';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilter = /** @class */ (function (_super) {\n __extends(ExcelFilter, _super);\n /**\n * Constructor for excelbox filtering module\n * @hidden\n */\n function ExcelFilter(parent, filterSettings, serviceLocator, customFltrOperators) {\n var _this = _super.call(this, parent, filterSettings, serviceLocator) || this;\n _this.parent = parent;\n _this.isresetFocus = true;\n _this.excelFilterBase = new ExcelFilterBase(parent, customFltrOperators);\n return _this;\n }\n /**\n * To destroy the excel filter.\n * @return {void}\n * @hidden\n */\n ExcelFilter.prototype.destroy = function () {\n this.excelFilterBase.closeDialog();\n };\n ExcelFilter.prototype.openDialog = function (options) {\n this.excelFilterBase.openDialog(options);\n };\n ExcelFilter.prototype.closeDialog = function () {\n this.excelFilterBase.closeDialog();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n ExcelFilter.prototype.clearCustomFilter = function (col) {\n this.excelFilterBase.clearFilter(col);\n };\n ExcelFilter.prototype.closeResponsiveDialog = function (isCustomFilter) {\n if (isCustomFilter) {\n this.excelFilterBase.removeDialog();\n }\n else {\n this.closeDialog();\n }\n };\n ExcelFilter.prototype.applyCustomFilter = function (args) {\n if (!args.isCustomFilter) {\n this.excelFilterBase.fltrBtnHandler();\n this.excelFilterBase.closeDialog();\n }\n else {\n this.excelFilterBase.filterBtnClick(args.col.field);\n }\n };\n /* tslint:disable-next-line:max-line-length */\n ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n /* tslint:disable-next-line:max-line-length */\n this.excelFilterBase.filterByColumn(fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue);\n };\n /**\n * @hidden\n */\n ExcelFilter.prototype.getFilterUIInfo = function () {\n return this.excelFilterBase.getFilterUIInfo();\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n ExcelFilter.prototype.getModuleName = function () {\n return 'excelFilter';\n };\n return ExcelFilter;\n}(CheckBoxFilter));\nexport { ExcelFilter };\n","import { EventHandler, isNullOrUndefined, extend, closest, getValue } from '@syncfusion/ej2-base';\nimport { getActualPropFromColl, isActionPrevent, getColumnByForeignKeyValue } from '../base/util';\nimport { remove, matches, isBlazor } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport { CellType, ResponsiveDialogAction } from '../base/enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport { FilterCellRenderer } from '../renderer/filter-cell-renderer';\nimport { parentsUntil } from '../base/util';\nimport { FilterMenuRenderer } from '../renderer/filter-menu-renderer';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\nimport { ExcelFilter } from '../actions/excel-filter';\n/**\n *\n * The `Filter` module is used to handle filtering action.\n */\nvar Filter = /** @class */ (function () {\n /**\n * Constructor for Grid filtering module\n * @hidden\n */\n function Filter(parent, filterSettings, serviceLocator) {\n this.predicate = 'and';\n this.contentRefresh = true;\n this.filterByMethod = true;\n this.refresh = true;\n this.values = {};\n this.operators = {};\n this.cellText = {};\n this.nextFlMenuOpen = '';\n this.type = { 'Menu': FilterMenuRenderer, 'CheckBox': CheckBoxFilter, 'Excel': ExcelFilter };\n /** @hidden */\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith'\n };\n this.fltrDlgDetails = { field: '', isOpen: false };\n /** @hidden */\n this.skipNumberInput = ['=', ' ', '!'];\n this.skipStringInput = ['>', '<', '='];\n this.actualPredicate = {};\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n this.setFullScreenDialog();\n }\n /**\n * To render filter bar when filtering enabled.\n * @return {void}\n * @hidden\n */\n Filter.prototype.render = function (e) {\n if (DataUtil.getObject('args.isFrozen', e) || (this.parent.getFrozenMode() === 'Left-Right' &&\n DataUtil.getObject('args.renderFrozenRightContent', e))) {\n return;\n }\n var gObj = this.parent;\n this.l10n = this.serviceLocator.getService('localization');\n this.getLocalizedCustomOperators();\n if (this.parent.filterSettings.type === 'FilterBar') {\n if (gObj.columns.length) {\n var fltrElem = this.parent.element.querySelector('.e-filterbar');\n if (fltrElem) {\n remove(fltrElem);\n }\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Filter, gObj);\n var row = void 0;\n var cellrender = this.serviceLocator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Filter, new FilterCellRenderer(this.parent, this.serviceLocator));\n this.valueFormatter = this.serviceLocator.getService('valueFormatter');\n rowRenderer.element = this.parent.createElement('tr', { className: 'e-filterbar' });\n row = this.generateRow();\n row.data = this.values;\n if (gObj.getFrozenMode() === 'Right') {\n var thead = gObj.getFrozenRightHeader().querySelector('thead');\n thead.appendChild(rowRenderer.element);\n }\n else {\n this.parent.getHeaderContent().querySelector('thead').appendChild(rowRenderer.element);\n }\n var rowdrag = this.parent.element.querySelector('.e-rowdragheader');\n this.element = rowRenderer.render(row, gObj.getColumns(), null, null, rowRenderer.element);\n var detail = this.element.querySelector('.e-detailheadercell');\n if (detail) {\n detail.className = 'e-filterbarcell e-mastercell';\n }\n if (rowdrag) {\n rowdrag.className = 'e-dragheadercell e-mastercell';\n }\n var gCells = [].slice.call(this.element.querySelectorAll('.e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n this.wireEvents();\n this.parent.notify(events.freezeRender, { case: 'filter' });\n }\n }\n };\n /**\n * To show the responsive custom filter dialog\n * @return {void}\n * @hidden\n */\n Filter.prototype.showCustomFilter = function () {\n this.responsiveDialogRenderer.showResponsiveDialog(this.column);\n };\n /** @hidden */\n Filter.prototype.setFilterModel = function (col) {\n var type = col.filter.type || this.parent.filterSettings.type;\n this.filterModule = new this.type[type](this.parent, this.parent.filterSettings, this.serviceLocator, this.customOperators, this);\n };\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n Filter.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.e-gridheader') && !gridElement.querySelector('.e-gridcontent'))) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.destroy();\n }\n // tslint:disable-next-line:no-any\n if (!this.parent.refreshing) {\n this.filterSettings.columns = [];\n }\n this.updateFilterMsg();\n this.removeEventListener();\n this.unWireEvents();\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n var dropdownlist = this.element.querySelectorAll('.e-filterbaroperator');\n for (var i = 0; i < dropdownlist.length; i++) {\n dropdownlist[i].ej2_instances[0].destroy();\n }\n }\n if (this.element) {\n remove(this.element);\n var filterBarElement = this.parent.getHeaderContent().querySelector('.e-filterbar');\n if (this.parent.isFrozenGrid() && filterBarElement) {\n remove(filterBarElement);\n }\n }\n };\n Filter.prototype.setFullScreenDialog = function () {\n if (this.serviceLocator) {\n this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, ResponsiveDialogAction.isFilter);\n }\n };\n Filter.prototype.generateRow = function (index) {\n var options = {};\n var row = new Row(options);\n row.cells = this.generateCells();\n return row;\n };\n Filter.prototype.generateCells = function () {\n //TODO: generate dummy column for group, detail, stacked row here for filtering;\n var cells = [];\n if (this.parent.allowGrouping) {\n for (var c = 0, len = this.parent.groupSettings.columns.length; c < len; c++) {\n cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n cells.push(this.generateCell({}, CellType.DetailHeader));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n for (var _i = 0, _a = this.parent.getColumns(); _i < _a.length; _i++) {\n var dummy = _a[_i];\n cells.push(this.generateCell(dummy));\n }\n if (this.parent.getFrozenMode() === 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n return cells;\n };\n Filter.prototype.generateCell = function (column, cellType) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'rowId': '',\n 'column': column,\n 'cellType': cellType ? cellType : CellType.Filter,\n 'attributes': { title: this.l10n.getConstant('FilterbarTitle') }\n };\n return new Cell(opt);\n };\n /**\n * To update filterSettings when applying filter.\n * @return {void}\n * @hidden\n */\n Filter.prototype.updateModel = function () {\n var col = this.parent.getColumnByField(this.fieldName);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n var arrayVal = Array.isArray(this.value) ? this.value : [this.value];\n for (var i = 0, len = arrayVal.length; i < len; i++) {\n var field = col.isForeignColumn() ? col.foreignKeyValue : this.fieldName;\n this.currentFilterObject = {\n field: field, uid: col.uid, isForeignKey: col.isForeignColumn(), operator: this.operator,\n value: arrayVal[i], predicate: this.predicate,\n matchCase: this.matchCase, ignoreAccent: this.ignoreAccent, actualFilterValue: {}, actualOperator: {}\n };\n var index = this.getFilteredColsIndexByField(col);\n if (index > -1 && !Array.isArray(this.value)) {\n this.filterSettings.columns[index] = this.currentFilterObject;\n }\n else {\n this.filterSettings.columns.push(this.currentFilterObject);\n }\n }\n this.filterSettings.columns = this.filterSettings.columns;\n this.parent.dataBind();\n };\n Filter.prototype.getFilteredColsIndexByField = function (col) {\n var cols = this.filterSettings.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].uid === col.uid || (col.isForeignColumn() && this.parent.getColumnByUid(col.uid).field === col.foreignKeyValue)) {\n return i;\n }\n }\n return -1;\n };\n /**\n * To trigger action complete event.\n * @return {void}\n * @hidden\n */\n Filter.prototype.onActionComplete = function (e) {\n if (isBlazor() && !this.parent.isJsComponent) {\n e.rows = null;\n }\n var args = !this.isRemove ? {\n currentFilterObject: this.currentFilterObject,\n /* tslint:disable:no-string-literal */\n currentFilteringColumn: !isNullOrUndefined(this.column) ? this.column.field : undefined,\n /* tslint:enable:no-string-literal */\n columns: this.filterSettings.columns, requestType: 'filtering', type: events.actionComplete\n } : {\n requestType: 'filtering', type: events.actionComplete\n };\n this.parent.trigger(events.actionComplete, extend(e, args));\n this.isRemove = false;\n };\n Filter.prototype.wireEvents = function () {\n EventHandler.add(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate, this);\n };\n Filter.prototype.unWireEvents = function () {\n EventHandler.remove(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate);\n };\n Filter.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.parent.getHeaderTable().classList.add('e-sortfilter');\n this.render();\n }\n };\n Filter.prototype.refreshFilterValue = function () {\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.columns.length &&\n !this.parent.getCurrentViewRecords().length && this.parent.enablePersistence) {\n this.initialEnd();\n this.parent.removeEventListener(events.beforeDataBound, this.refreshFilterValue);\n }\n };\n Filter.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n if (this.parent.getColumns().length && this.filterSettings.columns.length) {\n var gObj = this.parent;\n this.contentRefresh = false;\n this.initialLoad = true;\n for (var _i = 0, _a = gObj.filterSettings.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n this.filterByColumn(col.field, col.operator, col.value, col.predicate, col.matchCase, col.ignoreAccent, col.actualFilterValue, col.actualOperator);\n }\n this.initialLoad = false;\n this.updateFilterMsg();\n this.contentRefresh = true;\n }\n };\n /**\n * @hidden\n */\n Filter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.filterComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.keyPressed, this.keyUpHandler, this);\n this.parent.on(events.columnPositionChanged, this.columnPositionChanged, this);\n this.parent.on(events.headerRefreshed, this.render, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.filterMenuClose, this.filterMenuClose, this);\n EventHandler.add(document, 'click', this.clickHandler, this);\n this.parent.on(events.filterOpen, this.columnMenuFilter, this);\n this.parent.on(events.click, this.filterIconClickHandler, this);\n this.parent.on('persist-data-changed', this.initialEnd, this);\n this.parent.on(events.closeFilterDialog, this.clickHandler, this);\n this.parent.addEventListener(events.beforeDataBound, this.refreshFilterValue.bind(this));\n };\n /**\n * @hidden\n */\n Filter.prototype.removeEventListener = function () {\n EventHandler.remove(document, 'click', this.clickHandler);\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.filterComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.keyPressed, this.keyUpHandler);\n this.parent.off(events.columnPositionChanged, this.columnPositionChanged);\n this.parent.off(events.headerRefreshed, this.render);\n this.parent.off(events.filterOpen, this.columnMenuFilter);\n this.parent.off(events.filterMenuClose, this.filterMenuClose);\n this.parent.off(events.click, this.filterIconClickHandler);\n this.parent.off(events.closeFilterDialog, this.clickHandler);\n };\n Filter.prototype.filterMenuClose = function (args) {\n this.fltrDlgDetails.isOpen = false;\n };\n /**\n * Filters the Grid row by fieldName, filterOperator, and filterValue.\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value which is used to filter records.\n * @param {string} predicate - Defines the relationship of one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, then the filter records\n * the exact match or
filters records that are case insensitive (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @return {void}\n */\n Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {\n var _this = this;\n var gObj = this.parent;\n var filterCell;\n this.column = gObj.grabColumnByFieldFromAllCols(fieldName);\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n filterOperator = this.getOperatorName(fieldName);\n }\n if (!this.column) {\n return;\n }\n if (this.filterSettings.type === 'FilterBar') {\n filterCell = gObj.getHeaderContent().querySelector('[id=\\'' + this.column.field + '_filterBarcell\\']');\n }\n if (!isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: this.column.headerText });\n return;\n }\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: filterOperator, arg3: filterValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: actualFilterValue, arg8: actualOperator\n });\n return;\n }\n this.predicate = predicate ? predicate : Array.isArray(filterValue) ? 'or' : 'and';\n this.value = filterValue;\n this.matchCase = matchCase || false;\n this.ignoreAccent = this.ignoreAccent = !isNullOrUndefined(ignoreAccent) ? ignoreAccent : this.parent.filterSettings.ignoreAccent;\n this.fieldName = fieldName;\n this.operator = filterOperator;\n filterValue = !isNullOrUndefined(filterValue) && filterValue.toString();\n if (this.column.type === 'number' || this.column.type === 'date') {\n this.matchCase = true;\n }\n gObj.getColumnHeaderByField(fieldName).setAttribute('aria-filtered', 'true');\n if (filterCell && this.filterSettings.type === 'FilterBar') {\n if (filterValue.length < 1 || (!this.filterByMethod &&\n this.checkForSkipInput(this.column, filterValue))) {\n this.filterStatusMsg = filterValue.length < 1 ? '' : this.l10n.getConstant('InvalidFilterMessage');\n this.updateFilterMsg();\n return;\n }\n if (filterCell.value !== filterValue) {\n filterCell.value = filterValue;\n }\n }\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n if (this.initialLoad && this.filterSettings.type === 'FilterBar') {\n filterCell.value = this.values[this.column.field];\n }\n }\n else {\n this.values[this.column.field] = filterValue; //this line should be above updateModel\n }\n var predObj = {\n field: this.fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: this.operator,\n value: this.value,\n type: this.column.type\n };\n var filterColumn = this.parent.filterSettings.columns.filter(function (fColumn) {\n return (fColumn.field === _this.fieldName);\n });\n if (filterColumn.length > 1 && !isNullOrUndefined(this.actualPredicate[this.fieldName])) {\n this.actualPredicate[this.fieldName].push(predObj);\n }\n else {\n this.actualPredicate[this.fieldName] = [predObj];\n }\n if (this.checkAlreadyColFiltered(this.column.field)) {\n return;\n }\n this.updateModel();\n };\n Filter.prototype.applyColumnFormat = function (filterValue) {\n var getFlvalue = (this.column.type === 'date' || this.column.type === 'datetime') ?\n new Date(filterValue) : parseFloat(filterValue);\n this.values[this.column.field] = this.setFormatForFlColumn(getFlvalue, this.column);\n };\n // To skip the second time request to server while applying initial filtering - EJ2-44361\n Filter.prototype.skipUid = function (col) {\n var flag = true;\n var colLen = Object.keys((col));\n for (var i = 0; i < colLen.length; i++) {\n var key = Object.keys(col[colLen[i]]);\n if (key.length === 1 && key[0] === 'uid') {\n flag = false;\n }\n }\n return flag;\n };\n Filter.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n for (var _i = 0, _a = Object.keys(e.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'columns':\n var col = 'columns';\n var args = {\n currentFilterObject: this.currentFilterObject, currentFilteringColumn: this.column ?\n this.column.field : undefined, action: 'filter', columns: this.filterSettings.columns,\n requestType: 'filtering', type: events.actionBegin, cancel: false\n };\n if (this.contentRefresh && this.skipUid(e.properties[col])) {\n this.parent.notify(events.modelChanged, args);\n if (args.cancel) {\n if (isNullOrUndefined(this.prevFilterObject)) {\n this.filterSettings.columns.splice(this.filterSettings.columns.length - 1, 1);\n }\n else {\n this.filterSettings.columns[this.filterObjIndex] = this.prevFilterObject;\n }\n return;\n }\n this.addFilteredClass(args.currentFilteringColumn);\n this.updateFilterIcon();\n this.refreshFilterSettings();\n this.updateFilterMsg();\n this.updateFilter();\n }\n break;\n case 'showFilterBarStatus':\n if (e.properties[prop]) {\n this.updateFilterMsg();\n }\n else if (this.parent.allowPaging) {\n this.parent.updateExternalMessage('');\n }\n break;\n case 'showFilterBarOperator':\n case 'type':\n this.parent.refreshHeader();\n this.refreshFilterSettings();\n break;\n }\n }\n };\n Filter.prototype.refreshFilterSettings = function () {\n if (this.filterSettings.type === 'FilterBar') {\n for (var i = 0; i < this.filterSettings.columns.length; i++) {\n this.column = this.parent.grabColumnByUidFromAllCols(this.filterSettings.columns[i].uid);\n var filterValue = this.filterSettings.columns[i].value;\n filterValue = !isNullOrUndefined(filterValue) && filterValue.toString();\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n }\n else {\n var key = this.filterSettings.columns[i].field;\n this.values[key] = this.filterSettings.columns[i].value;\n }\n var filterElement = this.getFilterBarElement(this.column.field);\n if (filterElement) {\n if (this.cellText[this.filterSettings.columns[i].field] !== ''\n && !isNullOrUndefined(this.cellText[this.filterSettings.columns[i].field])) {\n filterElement.value = this.cellText[this.column.field];\n }\n else {\n filterElement.value = this.filterSettings.columns[i].value;\n }\n }\n }\n if (this.filterSettings.columns.length === 0) {\n var col = this.parent.getColumns();\n for (var i = 0; i < col.length; i++) {\n var filterElement = this.getFilterBarElement(col[i].field);\n if (filterElement && filterElement.value !== '') {\n filterElement.value = '';\n delete this.values[col[i].field];\n }\n }\n }\n }\n };\n Filter.prototype.updateFilterIcon = function () {\n if (this.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrIconElement = [].slice.call(this.parent.element.querySelectorAll('.e-filtered'));\n for (var i = 0, len = fltrIconElement.length; i < len; i++) {\n fltrIconElement[i].removeAttribute('aria-filtered');\n fltrIconElement[i].classList.remove('e-filtered');\n }\n }\n };\n Filter.prototype.getFilterBarElement = function (col) {\n var selector = '[id=\\'' + col + '_filterBarcell\\']';\n var filterElement;\n if (selector && !isNullOrUndefined(this.element)) {\n filterElement = this.element.querySelector(selector);\n }\n return filterElement;\n };\n /**\n * @private\n */\n Filter.prototype.refreshFilter = function () {\n this.refreshFilterSettings();\n this.updateFilterMsg();\n };\n /**\n * Clears all the filtered rows of the Grid.\n * @return {void}\n */\n Filter.prototype.clearFiltering = function (fields) {\n var _this = this;\n var cols = getActualPropFromColl(this.filterSettings.columns);\n if (!isNullOrUndefined(fields)) {\n this.refresh = false;\n fields.forEach(function (field) { _this.removeFilteredColsByField(field, false); });\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n this.parent.renderModule.refresh();\n this.refresh = true;\n return;\n }\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearFiltering });\n return;\n }\n for (var i = 0; i < cols.length; i++) {\n cols[i].uid = cols[i].uid || this.parent.getColumnByField(cols[i].field).uid;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredcols = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n this.refresh = false;\n for (var i = 0, len = filteredcols.length; i < len; i++) {\n this.removeFilteredColsByField(this.parent.getColumnByUid(filteredcols[i]).field, false);\n }\n if (isBlazor() && !this.parent.isJsComponent) {\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n }\n this.refresh = true;\n if (filteredcols.length) {\n this.parent.renderModule.refresh();\n }\n if (this.parent.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrElement = [].slice.call(this.parent.element.querySelectorAll('.e-filtered'));\n for (var i = 0, len = fltrElement.length; i < len; i++) {\n fltrElement[0].removeAttribute('aria-filtered');\n fltrElement[0].classList.remove('e-filtered');\n }\n }\n this.isRemove = true;\n this.filterStatusMsg = '';\n this.updateFilterMsg();\n };\n Filter.prototype.checkAlreadyColFiltered = function (field) {\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n if (col.field === field && col.value === this.value &&\n col.operator === this.operator && col.predicate === this.predicate) {\n return true;\n }\n }\n return false;\n };\n Filter.prototype.columnMenuFilter = function (args) {\n this.column = args.col;\n var ele = closest(args.target, '#' + args.id);\n if (args.isClose && !ele) {\n this.filterModule.closeDialog();\n }\n else if (ele) {\n this.filterDialogOpen(this.column, args.target);\n }\n };\n Filter.prototype.filterDialogOpen = function (col, target, left, top) {\n if (this.filterModule) {\n this.filterModule.closeDialog();\n }\n this.setFilterModel(col);\n this.filterModule.openDialog(this.createOptions(col, target, left, top));\n };\n /** @hidden */\n Filter.prototype.createOptions = function (col, target, left, top) {\n var gObj = this.parent;\n var dataSource = col.filter.dataSource || gObj.dataSource && 'result' in gObj.dataSource ? gObj.dataSource :\n gObj.getDataModule().dataManager;\n var type = col.filter.type || this.parent.filterSettings.type;\n var options = {\n type: col.type, field: col.field, displayName: col.headerText,\n dataSource: dataSource, format: col.format, height: 800, columns: gObj.getColumns(),\n filteredColumns: gObj.filterSettings.columns, target: target, dataManager: gObj.getDataModule().dataManager,\n formatFn: col.getFormatter(), ignoreAccent: gObj.filterSettings.ignoreAccent,\n parserFn: col.getParser(), query: gObj.query, template: col.getFilterItemTemplate(),\n hideSearchbox: isNullOrUndefined(col.filter.hideSearchbox) ? false : col.filter.hideSearchbox,\n handler: this.filterHandler.bind(this), localizedStrings: gObj.getLocaleConstants(),\n position: { X: left, Y: top }, column: col, foreignKeyValue: col.foreignKeyValue,\n actualPredicate: this.actualPredicate, localeObj: gObj.localeObj,\n isRemote: gObj.getDataModule().isRemote(), allowCaseSensitive: this.filterSettings.enableCaseSensitivity,\n isResponsiveFilter: this.parent.enableAdaptiveUI,\n operator: this.actualPredicate[col.field] && type === 'Menu' ? this.actualPredicate[col.field][0].operator : 'equal'\n };\n return options;\n };\n /**\n * Removes filtered column by field name.\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @return {void}\n * @hidden\n */\n Filter.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n var fCell;\n var cols = this.filterSettings.columns;\n if (isActionPrevent(this.parent)) {\n var args = { instance: this, handler: this.removeFilteredColsByField, arg1: field, arg2: isClearFilterBar };\n this.parent.notify(events.preventBatch, args);\n return;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredColsUid = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n var _loop_1 = function (i, len) {\n cols[i].uid = cols[i].uid || this_1.parent.getColumnByField(cols[i].field).uid;\n var len_1 = cols.length;\n var column = this_1.parent.grabColumnByUidFromAllCols(filteredColsUid[i]);\n if (column.field === field || (column.field === column.foreignKeyValue && column.isForeignColumn())) {\n var currentPred = this_1.filterSettings.columns.filter(function (e) {\n return e.uid === column.uid;\n })[0];\n if (this_1.filterSettings.type === 'FilterBar' && !isClearFilterBar) {\n var selector = '[id=\\'' + column.field + '_filterBarcell\\']';\n fCell = this_1.parent.getHeaderContent().querySelector(selector);\n if (fCell) {\n fCell.value = '';\n delete this_1.values[field];\n }\n }\n while (len_1--) {\n if (cols[len_1].uid === column.uid) {\n cols.splice(len_1, 1);\n }\n }\n var fltrElement = this_1.parent.getColumnHeaderByField(column.field);\n fltrElement.removeAttribute('aria-filtered');\n if (this_1.filterSettings.type !== 'FilterBar') {\n var iconClass = this_1.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n fltrElement.querySelector(iconClass).classList.remove('e-filtered');\n }\n this_1.isRemove = true;\n if (this_1.actualPredicate[field]) {\n delete this_1.actualPredicate[field];\n }\n if (this_1.values[field]) {\n delete this_1.values[field];\n }\n if (this_1.refresh) {\n if (isBlazor() && !this_1.parent.isJsComponent) {\n this_1.parent.setProperties({ filterSettings: { columns: this_1.filterSettings.columns } }, true);\n this_1.parent.notify(events.modelChanged, {\n requestType: 'filtering', type: events.actionBegin, currentFilterObject: {\n field: column.field, operator: this_1.operator, value: this_1.value, predicate: this_1.predicate,\n matchCase: this_1.matchCase, ignoreAccent: this_1.ignoreAccent, actualFilterValue: {}, actualOperator: {}\n }, currentFilterColumn: column\n });\n }\n else {\n this_1.parent.notify(events.modelChanged, {\n requestType: 'filtering', type: events.actionBegin, currentFilterObject: currentPred,\n currentFilterColumn: column, action: 'clearFilter'\n });\n }\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0, len = filteredColsUid.length; i < len; i++) {\n var state_1 = _loop_1(i, len);\n if (state_1 === \"break\")\n break;\n }\n this.updateFilterMsg();\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Filter.prototype.getModuleName = function () {\n return 'filter';\n };\n Filter.prototype.keyUpHandlerImmediate = function (e) {\n if (e.keyCode !== 13) {\n this.keyUpHandler(e);\n }\n };\n Filter.prototype.keyUpHandler = function (e) {\n var gObj = this.parent;\n var target = e.target;\n if (target && matches(target, '.e-filterbar input')) {\n var closeHeaderEle = closest(target, 'th.e-filterbarcell');\n this.column = gObj.getColumnByUid(closeHeaderEle.getAttribute('e-mappinguid'));\n if (!this.column) {\n return;\n }\n if (e.action === 'altDownArrow' && this.parent.filterSettings.showFilterBarOperator) {\n var dropDownListInput = closest(target, 'span').querySelector('.e-filterbaroperator');\n dropDownListInput.ej2_instances[0].showPopup();\n dropDownListInput.focus();\n }\n if ((this.filterSettings.mode === 'Immediate' || (e.keyCode === 13 &&\n !e.target.classList.contains('e-filterbaroperator')))\n && e.keyCode !== 9 && !this.column.filterTemplate) {\n this.value = target.value.trim();\n this.processFilter(e);\n }\n }\n if (e.action === 'altDownArrow' && this.filterSettings.type !== 'FilterBar') {\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n this.openMenuByField(column.field);\n this.parent.focusModule.clearIndicator();\n }\n }\n if (e.action === 'escape' && this.filterSettings.type === 'Menu' && this.filterModule) {\n this.filterModule.closeDialog();\n gObj.notify(events.restoreFocus, {});\n }\n };\n Filter.prototype.updateCrossIcon = function (element) {\n if (element.value.length) {\n element.nextElementSibling.classList.remove('e-hide');\n }\n };\n Filter.prototype.updateFilterMsg = function () {\n if (this.filterSettings.type === 'FilterBar') {\n var gObj = this.parent;\n var getFormatFlValue = void 0;\n var columns = this.filterSettings.columns;\n var formater = this.serviceLocator.getService('valueFormatter');\n var column = void 0;\n var value = void 0;\n if (!this.filterSettings.showFilterBarStatus) {\n return;\n }\n if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {\n this.filterStatusMsg = '';\n for (var index = 0; index < columns.length; index++) {\n column = gObj.grabColumnByUidFromAllCols(columns[index].uid) || gObj.grabColumnByFieldFromAllCols(columns[index].field);\n if (index) {\n this.filterStatusMsg += ' && ';\n }\n if (!isNullOrUndefined(column.format)) {\n var flValue = (column.type === 'date' || column.type === 'datetime') ?\n this.valueFormatter.fromView(this.values[column.field], column.getParser(), column.type) :\n this.values[column.field];\n if (!(column.type === 'date' || column.type === 'datetime')) {\n var formater_1 = this.serviceLocator.getService('valueFormatter');\n getFormatFlValue = formater_1.toView(flValue, column.getParser()).toString();\n }\n else {\n getFormatFlValue = this.setFormatForFlColumn(flValue, column);\n }\n this.filterStatusMsg += column.headerText + ': ' + getFormatFlValue;\n }\n else {\n this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];\n }\n }\n }\n if (gObj.allowPaging) {\n gObj.updateExternalMessage(this.filterStatusMsg);\n }\n //TODO: virtual paging \n this.filterStatusMsg = '';\n }\n };\n Filter.prototype.setFormatForFlColumn = function (value, column) {\n var formater = this.serviceLocator.getService('valueFormatter');\n return formater.toView(value, column.getFormatter()).toString();\n };\n Filter.prototype.checkForSkipInput = function (column, value) {\n var isSkip;\n if (column.type === 'number') {\n if (DataUtil.operatorSymbols[value] || this.skipNumberInput.indexOf(value) > -1) {\n isSkip = true;\n }\n }\n else if (column.type === 'string') {\n for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {\n var val = value_1[_i];\n if (this.skipStringInput.indexOf(val) > -1) {\n isSkip = true;\n }\n }\n }\n return isSkip;\n };\n Filter.prototype.processFilter = function (e) {\n this.stopTimer();\n this.startTimer(e);\n };\n Filter.prototype.startTimer = function (e) {\n var _this = this;\n this.timer = window.setInterval(function () { _this.onTimerTick(); }, e.keyCode === 13 ? 0 : this.filterSettings.immediateModeDelay);\n };\n Filter.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Filter.prototype.onTimerTick = function () {\n var selector = '[id=\\'' + this.column.field + '_filterBarcell\\']';\n var filterElement = this.element.querySelector(selector);\n if (!filterElement && this.parent.isFrozenGrid()) {\n filterElement = this.parent.getHeaderContent().querySelector(selector);\n }\n var filterValue;\n this.cellText[this.column.field] = filterElement.value;\n this.stopTimer();\n if (!isNullOrUndefined(this.column.filterBarTemplate)) {\n var templateRead = this.column.filterBarTemplate.read;\n if (typeof templateRead === 'string') {\n templateRead = getValue(templateRead, window);\n }\n if (!isNullOrUndefined(templateRead)) {\n this.value = templateRead.call(this, filterElement);\n }\n }\n else {\n filterValue = JSON.parse(JSON.stringify(filterElement.value));\n }\n if (isNullOrUndefined(this.value) || this.value === '') {\n this.removeFilteredColsByField(this.column.field);\n return;\n }\n this.validateFilterValue(this.value);\n this.filterByMethod = false;\n this.filterByColumn(this.column.field, this.operator, this.value, this.predicate, this.filterSettings.enableCaseSensitivity, this.ignoreAccent);\n this.filterByMethod = true;\n filterElement.value = filterValue;\n this.updateFilterMsg();\n };\n Filter.prototype.validateFilterValue = function (value) {\n var gObj = this.parent;\n var skipInput;\n var index;\n this.matchCase = this.filterSettings.enableCaseSensitivity;\n switch (this.column.type) {\n case 'number':\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n skipInput = ['>', '<', '=', '!'];\n for (var i = 0; i < value.length; i++) {\n if (skipInput.indexOf(value[i]) > -1) {\n index = i;\n break;\n }\n }\n this.getOperator(value.substring(index));\n if (index !== 0) {\n this.value = value.substring(0, index);\n }\n if (this.value !== '' && value.length >= 1) {\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n }\n if (isNaN(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n break;\n case 'date':\n case 'datetime':\n this.operator = this.filterOperators.equal;\n if (this.value !== '' && !(this.value instanceof Date)) {\n this.getOperator(value);\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n if (isNullOrUndefined(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n }\n break;\n case 'string':\n this.matchCase = false;\n if (value.charAt(0) === '*') {\n this.value = this.value.slice(1);\n this.operator = this.filterOperators.startsWith;\n }\n else if (value.charAt(value.length - 1) === '%') {\n this.value = this.value.slice(0, -1);\n this.operator = this.filterOperators.startsWith;\n }\n else if (value.charAt(0) === '%') {\n this.value = this.value.slice(1);\n this.operator = this.filterOperators.endsWith;\n }\n else {\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.startsWith;\n }\n }\n break;\n case 'boolean':\n if (value.toLowerCase() === 'true' || value === '1') {\n this.value = true;\n }\n else if (value.toLowerCase() === 'false' || value === '0') {\n this.value = false;\n }\n else if (value.length) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n this.operator = this.filterOperators.equal;\n break;\n default:\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n }\n };\n Filter.prototype.getOperator = function (value) {\n var singleOp = value.charAt(0);\n var multipleOp = value.slice(0, 2);\n var operators = extend({ '=': this.filterOperators.equal, '!': this.filterOperators.notEqual }, DataUtil.operatorSymbols);\n if (operators.hasOwnProperty(singleOp) || operators.hasOwnProperty(multipleOp)) {\n this.operator = operators[singleOp];\n this.value = value.substring(1);\n if (!this.operator) {\n this.operator = operators[multipleOp];\n this.value = value.substring(2);\n }\n }\n if (this.operator === this.filterOperators.lessThan || this.operator === this.filterOperators.greaterThan) {\n if (this.value.charAt(0) === '=') {\n this.operator = this.operator + 'orequal';\n this.value = this.value.substring(1);\n }\n }\n };\n Filter.prototype.columnPositionChanged = function (e) {\n if (this.parent.filterSettings.type !== 'FilterBar') {\n return;\n }\n };\n Filter.prototype.getLocalizedCustomOperators = function () {\n var numOptr = [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'greaterthan', text: this.l10n.getConstant('GreaterThan') },\n { value: 'greaterthanorequal', text: this.l10n.getConstant('GreaterThanOrEqual') },\n { value: 'lessthan', text: this.l10n.getConstant('LessThan') },\n { value: 'lessthanorequal', text: this.l10n.getConstant('LessThanOrEqual') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') }\n ];\n this.customOperators = {\n stringOperator: [\n { value: 'startswith', text: this.l10n.getConstant('StartsWith') },\n { value: 'endswith', text: this.l10n.getConstant('EndsWith') },\n { value: 'contains', text: this.l10n.getConstant('Contains') },\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') }\n ],\n numberOperator: numOptr,\n dateOperator: numOptr,\n datetimeOperator: numOptr,\n booleanOperator: [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') }\n ]\n };\n };\n ;\n /** @hidden */\n Filter.prototype.openMenuByField = function (field) {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.showCustomFilter();\n return;\n }\n var column = gObj.getColumnByField(field);\n var header = gObj.getColumnHeaderByField(field);\n var target = header.querySelector('.e-filtermenudiv');\n if (!target) {\n return;\n }\n var gClient = gObj.element.getBoundingClientRect();\n var fClient = target.getBoundingClientRect();\n this.filterDialogOpen(column, target, fClient.right - gClient.left, fClient.bottom - gClient.top);\n };\n Filter.prototype.filterIconClickHandler = function (e) {\n var target = e.target;\n if (target.classList.contains('e-filtermenudiv') && (this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel')) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));\n this.column = col;\n if (this.fltrDlgDetails.field === col.field && this.fltrDlgDetails.isOpen) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.closeDialog();\n }\n this.fltrDlgDetails = { field: col.field, isOpen: true };\n this.openMenuByField(col.field);\n }\n };\n Filter.prototype.clickHandler = function (e) {\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n if (parentsUntil(e.target, 'e-filterbarcell') &&\n e.target.classList.contains('e-input-group-icon')) {\n closest(e.target, 'div').querySelector('.e-filterbaroperator').focus();\n }\n if (e.target.classList.contains('e-list-item')) {\n var inputId = document.querySelector('.e-popup-open').getAttribute('id').replace('_popup', '');\n if (inputId.indexOf('grid-column') !== -1) {\n closest(document.getElementById(inputId), 'div').querySelector('.e-filtertext').focus();\n }\n }\n }\n if (this.filterSettings.mode === 'Immediate' || this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel') {\n var gObj = this.parent;\n var target = e.target;\n var datepickerEle = target.classList.contains('e-day'); // due to datepicker popup cause\n var dialog = parentsUntil(this.parent.element, 'e-dialog');\n var hasDialog = false;\n var popupEle = parentsUntil(target, 'e-popup');\n var hasDialogClosed = this.parent.element.querySelector('.e-filter-popup');\n if (dialog && popupEle) {\n hasDialog = dialog.id === popupEle.id;\n }\n if ((hasDialogClosed && (parentsUntil(target, 'e-excel-ascending') ||\n parentsUntil(target, 'e-excel-descending')))) {\n this.filterModule.closeDialog(target);\n }\n if (parentsUntil(target, 'e-filter-popup') || target.classList.contains('e-filtermenudiv')) {\n return;\n }\n else if (this.filterModule && (!parentsUntil(target, 'e-popup-wrapper')\n && (!closest(target, '.e-filter-item.e-menu-item'))) && !datepickerEle) {\n if ((hasDialog && (!parentsUntil(target, 'e-filter-popup'))\n && (!parentsUntil(target, 'e-popup-flmenu'))) || (!popupEle && hasDialogClosed)) {\n this.filterModule.isresetFocus = parentsUntil(target, 'e-grid') &&\n parentsUntil(target, 'e-grid').id === this.parent.element.id;\n this.filterModule.closeDialog(target);\n }\n }\n if (this.filterSettings.mode === 'Immediate' && target.classList.contains('e-clear-icon')) {\n var targetText = target.previousElementSibling;\n this.removeFilteredColsByField(targetText.id.slice(0, -14)); //Length of _filterBarcell = 14\n }\n }\n };\n Filter.prototype.filterHandler = function (args) {\n var filterIconElement;\n this.actualPredicate[args.field] = args.actualPredicate;\n var dataManager = new DataManager(this.filterSettings.columns);\n var query = new Query().where('field', this.filterOperators.equal, args.field);\n var result = dataManager.executeLocal(query);\n for (var i = 0; i < result.length; i++) {\n var index = -1;\n for (var j = 0; j < this.filterSettings.columns.length; j++) {\n if (result[i].field === this.filterSettings.columns[j].field) {\n index = j;\n break;\n }\n }\n if (index !== -1) {\n this.filterSettings.columns.splice(index, 1);\n }\n }\n if (args.action === 'clear-filter' && isBlazor() && !this.parent.isJsComponent) {\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n }\n if (this.values[args.field]) {\n delete this.values[args.field];\n }\n var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n filterIconElement = this.parent.getColumnHeaderByField(args.field).querySelector(iconClass);\n if (args.action === 'filtering') {\n this.filterSettings.columns = this.filterSettings.columns.concat(args.filterCollection);\n if (this.filterSettings.columns.length && filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (filterIconElement) {\n filterIconElement.classList.remove('e-filtered');\n }\n args.requestType = 'filtering';\n this.parent.renderModule.refresh(args); //hot-fix onpropertychanged not working for object { array } \n }\n this.parent.dataBind();\n };\n Filter.prototype.updateFilter = function () {\n var cols = this.filterSettings.columns;\n this.actualPredicate = {};\n for (var i = 0; i < cols.length; i++) {\n this.column = this.parent.getColumnByField(cols[i].field) ||\n getColumnByForeignKeyValue(cols[i].field, this.parent.getForeignKeyColumns());\n var fieldName = cols[i].field;\n if (!this.parent.getColumnByField(cols[i].field)) {\n fieldName = getColumnByForeignKeyValue(cols[i].field, this.parent.getForeignKeyColumns()).field;\n }\n /* tslint:disable-next-line:max-line-length */\n this.refreshFilterIcon(fieldName, cols[i].operator, cols[i].value, cols[i].type, cols[i].predicate, cols[i].matchCase, cols[i].ignoreAccent, cols[i].uid);\n }\n };\n /* tslint:disable-next-line:max-line-length */\n Filter.prototype.refreshFilterIcon = function (fieldName, operator, value, type, predicate, matchCase, ignoreAccent, uid) {\n var obj;\n obj = {\n field: fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: operator,\n value: value,\n type: type\n };\n this.actualPredicate[fieldName] ? this.actualPredicate[fieldName].push(obj) : this.actualPredicate[fieldName] = [obj];\n var field = uid ? this.parent.grabColumnByUidFromAllCols(uid).field : fieldName;\n this.addFilteredClass(field);\n };\n Filter.prototype.addFilteredClass = function (fieldName) {\n var filterIconElement;\n if (this.parent.showColumnMenu) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-columnmenu');\n }\n else if (this.parent.getColumnByField(fieldName)) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-icon-filter');\n }\n if (filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n };\n /**\n * @hidden\n */\n Filter.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n /**\n * @hidden\n */\n Filter.prototype.getOperatorName = function (field) {\n return document.getElementById(this.parent.getColumnByField(field).uid).ej2_instances[0].value;\n };\n /**\n * Renders checkbox items in Menu filter dialog.\n * @return {void}\n */\n Filter.prototype.renderCheckboxOnFilterMenu = function () {\n return this.filterModule.renderCheckBoxMenu();\n };\n return Filter;\n}());\nexport { Filter };\n","import { isNullOrUndefined, extend, addClass } from '@syncfusion/ej2-base';\nimport { attributes as addAttributes } from '@syncfusion/ej2-base';\nimport { rowDataBound, queryCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, getObject, extendObjWithFn } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { CellMergeRender } from './cell-merge-renderer';\n/**\n * RowRenderer class which responsible for building row content.\n * @hidden\n */\nvar RowRenderer = /** @class */ (function () {\n function RowRenderer(serviceLocator, cellType, parent) {\n this.isSpan = false;\n this.cellType = cellType;\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n this.element = this.parent.createElement('tr', { attrs: { role: 'row' } });\n }\n /**\n * Function to render the row content based on Column[] and data.\n * @param {Column[]} columns\n * @param {Object} data?\n * @param {{[x:string]:Object}} attributes?\n * @param {string} rowTemplate?\n */\n RowRenderer.prototype.render = function (row, columns, attributes, rowTemplate, cloneNode) {\n return this.refreshRow(row, columns, attributes, rowTemplate, cloneNode);\n };\n /**\n * Function to refresh the row content based on Column[] and data.\n * @param {Column[]} columns\n * @param {Object} data?\n * @param {{[x:string]:Object}} attributes?\n * @param {string} rowTemplate?\n */\n RowRenderer.prototype.refresh = function (row, columns, isChanged, attributes, rowTemplate) {\n if (isChanged) {\n row.data = extendObjWithFn({}, row.changes);\n this.refreshMergeCells(row);\n }\n var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');\n var tr = this.refreshRow(row, columns, attributes, rowTemplate, null, isChanged);\n var cells = [].slice.call(tr.cells);\n node.innerHTML = '';\n for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {\n var cell = cells_1[_i];\n node.appendChild(cell);\n }\n };\n // tslint:disable-next-line:max-func-body-length\n RowRenderer.prototype.refreshRow = function (row, columns, attributes, rowTemplate, cloneNode, isEdit) {\n var tr = !isNullOrUndefined(cloneNode) ? cloneNode : this.element.cloneNode();\n var rowArgs = { data: row.data };\n var cellArgs = { data: row.data };\n var attrCopy = extend({}, attributes, {});\n var chekBoxEnable = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox' && col.field; })[0];\n var value = false;\n if (chekBoxEnable) {\n value = getObject(chekBoxEnable.field, rowArgs.data);\n }\n if (row.isDataRow) {\n row.isSelected = this.parent.getSelectedRowIndexes().indexOf(row.index) > -1 || value;\n }\n if (row.isDataRow && this.parent.isCheckBoxSelection\n && this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {\n row.isSelected = true;\n if (this.parent.getSelectedRowIndexes().indexOf(row.index) === -1) {\n this.parent.getSelectedRowIndexes().push(row.index);\n }\n }\n this.buildAttributeFromRow(tr, row);\n addAttributes(tr, attrCopy);\n setStyleAndAttributes(tr, row.attributes);\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var _loop_1 = function (i, len) {\n var cell = row.cells[i];\n cell.isSelected = row.isSelected;\n cell.isColumnSelected = cell.column.isSelected;\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[i].cellType || CellType.Data);\n var attrs = { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' };\n if (row.isExpand && row.cells[i].cellType === CellType.DetailExpand) {\n attrs['class'] = this_1.parent.isPrinting ? 'e-detailrowcollapse' : 'e-detailrowexpand';\n }\n var td = cellRenderer.render(row.cells[i], row.data, attrs, row.isExpand, isEdit);\n if (row.cells[i].cellType !== CellType.Filter) {\n if (row.cells[i].cellType === CellType.Data || row.cells[i].cellType === CellType.CommandColumn) {\n this_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[i].foreignKeyData,\n requestType: this_1.parent.requestTypeAction\n }));\n var isRowSpanned = false;\n if (row.index > 0 && this_1.isSpan) {\n var prevRowCells = this_1.parent.groupSettings.columns.length > 0 &&\n !this_1.parent.getRowsObject()[row.index - 1].isDataRow ?\n this_1.parent.getRowsObject()[row.index].cells : this_1.parent.getRowsObject()[row.index - 1].cells;\n var uid_1 = 'uid';\n var prevRowCell = prevRowCells.filter(function (cell) {\n return cell.column.uid === row.cells[i].column[uid_1];\n })[0];\n isRowSpanned = prevRowCell.isRowSpanned ? prevRowCell.isRowSpanned : prevRowCell.rowSpanRange > 1;\n }\n if (cellArgs.colSpan > 1 || row.cells[i].cellSpan > 1 || cellArgs.rowSpan > 1 || isRowSpanned) {\n this_1.isSpan = true;\n var cellMerge = new CellMergeRender(this_1.serviceLocator, this_1.parent);\n td = cellMerge.render(cellArgs, row, i, td);\n }\n }\n if (!row.cells[i].isSpanned) {\n tr.appendChild(td);\n }\n }\n };\n var this_1 = this;\n for (var i = 0, len = row.cells.length; i < len; i++) {\n _loop_1(i, len);\n }\n var args = { row: tr, rowHeight: this.parent.rowHeight };\n if (row.isDataRow) {\n this.parent.trigger(rowDataBound, extend(rowArgs, args));\n if (this.parent.childGrid || this.parent.isRowDragable() || this.parent.detailTemplate) {\n var td = tr.querySelectorAll('.e-rowcell:not(.e-hide)')[0];\n if (td) {\n td.classList.add('e-detailrowvisible');\n }\n }\n }\n if (this.parent.enableVirtualization) {\n rowArgs.rowHeight = this.parent.rowHeight;\n }\n if (rowArgs.rowHeight) {\n tr.style.height = rowArgs.rowHeight + 'px';\n }\n else if (this.parent.rowHeight && (tr.querySelector('.e-headercell') || tr.querySelector('.e-groupcaption'))) {\n tr.style.height = this.parent.rowHeight + 'px';\n }\n if (row.cssClass) {\n tr.classList.add(row.cssClass);\n }\n if (row.lazyLoadCssClass) {\n tr.classList.add(row.lazyLoadCssClass);\n }\n var vFTable = this.parent.enableColumnVirtualization && this.parent.frozenColumns !== 0;\n if (!vFTable && this.parent.element.scrollHeight > this.parent.height && this.parent.aggregates.length) {\n for (var i = 0; i < this.parent.aggregates.length; i++) {\n var property = 'properties';\n var column = 'columns';\n if (this.parent.aggregates[i][property][column][0].footerTemplate) {\n var summarycell = tr.querySelectorAll('.e-summarycell');\n if (summarycell.length) {\n var lastSummaryCell = (summarycell[summarycell.length - 1]);\n addClass([lastSummaryCell], ['e-lastsummarycell']);\n var firstSummaryCell = (summarycell[0]);\n addClass([firstSummaryCell], ['e-firstsummarycell']);\n }\n }\n }\n }\n return tr;\n };\n RowRenderer.prototype.refreshMergeCells = function (row) {\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n cell.isSpanned = false;\n }\n return row;\n };\n /**\n * Function to check and add alternative row css class.\n * @param {Element} tr\n * @param {{[x:string]:Object}} attr\n */\n RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {\n var attr = {};\n var prop = { 'rowindex': 'aria-rowindex', 'dataUID': 'data-uid', 'ariaSelected': 'aria-selected' };\n var classes = [];\n if (row.isDataRow) {\n classes.push('e-row');\n }\n if (row.isAltRow) {\n classes.push('e-altrow');\n }\n if (!isNullOrUndefined(row.index)) {\n attr[prop.rowindex] = row.index;\n }\n if (row.rowSpan) {\n attr.rowSpan = row.rowSpan;\n }\n if (row.uid) {\n attr[prop.dataUID] = row.uid;\n }\n if (row.isSelected) {\n attr[prop.ariaSelected] = true;\n }\n if (row.visible === false) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(tr, attr);\n };\n return RowRenderer;\n}());\nexport { RowRenderer };\n","import { isNullOrUndefined, getValue, setValue, isBlazor } from '@syncfusion/ej2-base';\nimport { Row } from '../models/row';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\nimport { getUid } from '../base/util';\nimport { getForeignData } from '../../grid/base/util';\nimport * as events from '../base/constant';\n/**\n * RowModelGenerator is used to generate grid data rows.\n * @hidden\n */\nvar RowModelGenerator = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n */\n function RowModelGenerator(parent) {\n this.parent = parent;\n }\n RowModelGenerator.prototype.generateRows = function (data, args) {\n var rows = [];\n var startIndex = this.parent.enableVirtualization && args ? args.startIndex : 0;\n startIndex = this.parent.enableInfiniteScrolling && args ? this.getInfiniteIndex(args) : startIndex;\n for (var i = 0, len = Object.keys(data).length; i < len; i++, startIndex++) {\n rows[i] = this.generateRow(data[i], startIndex);\n }\n return rows;\n };\n RowModelGenerator.prototype.ensureColumns = function () {\n //TODO: generate dummy column for group, detail here;\n var cols = [];\n if (this.parent.detailTemplate || this.parent.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n cols.push(this.generateCell(args, null, CellType.DetailExpand));\n }\n if (this.parent.isRowDragable()) {\n cols.push(this.generateCell({}, null, CellType.RowDragIcon));\n }\n return cols;\n };\n RowModelGenerator.prototype.generateRow = function (data, index, cssClass, indent, pid, tIndex, parentUid) {\n var options = {};\n options.foreignKeyData = {};\n var isServerRendered = 'isServerRendered';\n options.uid = isBlazor() && this.parent[isServerRendered] ? this.parent.getRowUid('grid-row') : getUid('grid-row');\n options.data = data;\n options.index = index;\n options.indent = indent;\n options.tIndex = tIndex;\n options.isDataRow = true;\n options.parentGid = pid;\n options.parentUid = parentUid;\n if (this.parent.isPrinting) {\n if (this.parent.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (this.parent.hierarchyPrintMode === 'Expanded' && this.parent.expandedRows && this.parent.expandedRows[index]) {\n options.isExpand = this.parent.expandedRows[index].isExpand;\n }\n }\n options.cssClass = cssClass;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n if (isBlazor() && this.parent.isServerRendered && this.parent.enableVirtualization && this.parent.selectionModule.checkBoxState) {\n options.isSelected = this.parent.selectionModule.checkBoxState;\n if (options.isSelected && this.parent.selectionModule.selectedRowIndexes.indexOf(index) === -1) {\n this.parent.selectionModule.selectedRowIndexes.push(index);\n }\n }\n else {\n options.isSelected = this.parent.getSelectedRowIndexes().indexOf(index) > -1;\n }\n this.refreshForeignKeyRow(options);\n var cells = this.ensureColumns();\n var row = isBlazor() ? new Row(options) :\n new Row(options, this.parent);\n row.cells = this.parent.getFrozenMode() === 'Right' ? this.generateCells(options).concat(cells)\n : cells.concat(this.generateCells(options));\n return row;\n };\n RowModelGenerator.prototype.refreshForeignKeyRow = function (options) {\n var foreignKeyColumns = this.parent.getForeignKeyColumns();\n for (var i = 0; i < foreignKeyColumns.length; i++) {\n setValue(foreignKeyColumns[i].field, getForeignData(foreignKeyColumns[i], options.data), options.foreignKeyData);\n }\n };\n RowModelGenerator.prototype.generateCells = function (options) {\n var dummies = this.parent.getColumns();\n var tmp = [];\n for (var i = 0; i < dummies.length; i++) {\n tmp.push(this.generateCell(dummies[i], options.uid, isNullOrUndefined(dummies[i].commands) ? undefined : CellType.CommandColumn, null, i, options.foreignKeyData));\n }\n return tmp;\n };\n RowModelGenerator.prototype.generateCell = function (column, rowId, cellType, colSpan, oIndex, foreignKeyData) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(column.field || column.template),\n 'isTemplate': !isNullOrUndefined(column.template),\n 'rowID': rowId,\n 'column': column,\n 'cellType': !isNullOrUndefined(cellType) ? cellType : CellType.Data,\n 'colSpan': colSpan,\n 'commands': column.commands,\n 'isForeignKey': column.isForeignColumn && column.isForeignColumn(),\n 'foreignKeyData': column.isForeignColumn && column.isForeignColumn() && getValue(column.field, foreignKeyData)\n };\n if (opt.isDataCell || opt.column.type === 'checkbox' || opt.commands) {\n opt.index = oIndex;\n }\n return new Cell(opt);\n };\n RowModelGenerator.prototype.refreshRows = function (input) {\n for (var i = 0; i < input.length; i++) {\n this.refreshForeignKeyRow(input[i]);\n input[i].cells = this.generateCells(input[i]);\n }\n return input;\n };\n RowModelGenerator.prototype.getInfiniteIndex = function (args) {\n return args.requestType === 'infiniteScroll' || args.requestType === 'delete' || args.action === 'add'\n ? args.startIndex : 0;\n };\n return RowModelGenerator;\n}());\nexport { RowModelGenerator };\n","/**\n * Defines types of Cell\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n /** Defines CellType as DetailFooterIntent */\n CellType[CellType[\"DetailFooterIntent\"] = 15] = \"DetailFooterIntent\";\n /** Defines CellType as RowDrag */\n CellType[CellType[\"RowDragIcon\"] = 16] = \"RowDragIcon\";\n /** Defines CellType as RowDragHeader */\n CellType[CellType[\"RowDragHIcon\"] = 17] = \"RowDragHIcon\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n/**\n * Defines types of responsive dialogs\n * @hidden\n */\nexport var ResponsiveDialogAction;\n(function (ResponsiveDialogAction) {\n /** Defines dialog type as Edit */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isEdit\"] = 0] = \"isEdit\";\n /** Defines dialog type as Add */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isAdd\"] = 1] = \"isAdd\";\n /** Defines dialog type as Sort */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isSort\"] = 2] = \"isSort\";\n /** Defines dialog type as Filter */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isFilter\"] = 3] = \"isFilter\";\n})(ResponsiveDialogAction || (ResponsiveDialogAction = {}));\n/**\n * Defines responsive toolbar actions\n * @hidden\n */\nexport var ResponsiveToolbarAction;\n(function (ResponsiveToolbarAction) {\n /** Defines initial responsive toolbar buttons */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isInitial\"] = 0] = \"isInitial\";\n /** Defines responsive toolbar search */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isSearch\"] = 1] = \"isSearch\";\n})(ResponsiveToolbarAction || (ResponsiveToolbarAction = {}));\n","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 } from '@syncfusion/ej2-vue-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nexport var properties = ['content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'created'];\nexport var modelProps = [];\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) || 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.ej2Instances = new Button({});\n _this.bindProperties();\n _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;\n _this.ej2Instances.setProperties = _this.setProperties;\n return _this;\n }\n ButtonComponent.prototype.setProperties = function (prop, muteOnChange) {\n var _this = this;\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 _this.$emit('update:' + key, prop[key]);\n }\n });\n });\n }\n };\n ButtonComponent.prototype.render = function (createElement) {\n return createElement('button', this.$slots.default);\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 })\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","import { Droppable, isBlazor, addClass } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, remove, updateBlazorTemplate, removeClass } from '@syncfusion/ej2-base';\nimport { getUpdateUsingRaf, appendChildren } from '../base/util';\nimport * as events from '../base/constant';\nimport { Row } from '../models/row';\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 { getScrollBarWidth, isGroupAdaptive } from '../base/util';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar ContentRender = /** @class */ (function () {\n /**\n * Constructor for content renderer module\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.mutableData = false;\n this.rafCallback = function (args) {\n var arg = args;\n return function () {\n if (_this.parent.isFrozenGrid() && _this.parent.enableVirtualization) {\n var mContentRows = [].slice.call(_this.parent.getMovableVirtualContent().querySelectorAll('.e-row'));\n var fContentRows = [].slice.call(_this.parent.getFrozenVirtualContent().querySelectorAll('.e-row'));\n _this.isLoaded = !mContentRows ? false : mContentRows.length === fContentRows.length;\n if (_this.parent.enableColumnVirtualization && args.requestType === 'virtualscroll' && _this.isLoaded) {\n var mHdr = [].slice.call(_this.parent.getMovableVirtualHeader().querySelectorAll('.e-row'));\n var fHdr = [].slice.call(_this.parent.getFrozenVirtualHeader().querySelectorAll('.e-row'));\n _this.isLoaded = mHdr.length === fHdr.length;\n }\n }\n _this.ariaService.setBusy(_this.getPanel().querySelector('.e-content'), false);\n if (_this.parent.isDestroyed) {\n return;\n }\n var rows = _this.rows.slice(0);\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.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.mutableData = 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 ContentRender.prototype.renderPanel = function () {\n var gObj = this.parent;\n var div = this.parent.element.querySelector('.e-gridcontent');\n if (div) {\n this.ariaService.setOptions(this.parent.element.querySelector('.e-content'), { busy: false });\n this.setPanel(div);\n return;\n }\n div = this.parent.createElement('div', { className: 'e-gridcontent' });\n var innerDiv = this.parent.createElement('div', {\n className: 'e-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 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 && (!isBlazor() || (isBlazor() && !this.parent.isServerRendered))) {\n remove(virtualTable);\n remove(virtualTrack);\n }\n contentDiv.appendChild(this.createContentTable('_content_table'));\n this.setTable(contentDiv.querySelector('.e-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 * @return {Element}\n * @hidden\n */\n ContentRender.prototype.createContentTable = function (id) {\n var innerDiv = this.getPanel().firstElementChild;\n if (!isBlazor()) {\n if (this.getTable()) {\n remove(this.getTable());\n }\n }\n var table = innerDiv.querySelector('.e-table') ? innerDiv.querySelector('.e-table') :\n this.parent.createElement('table', { className: 'e-table', attrs: {\n cellspacing: '0.25px', role: 'grid',\n id: this.parent.element.id + id\n }\n });\n this.setColGroup(this.parent.getHeaderTable().querySelector('colgroup').cloneNode(true));\n table.appendChild(this.getColGroup());\n table.appendChild(this.parent.createElement('tbody'));\n innerDiv.appendChild(table);\n return innerDiv;\n };\n /**\n * Refresh the content of the Grid.\n * @return {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('tbody') : document.createDocumentFragment();\n if (!this.initialPageRecords) {\n this.initialPageRecords = extend([], dataSource);\n }\n var hdrfrag = isReact ? gObj.createElement('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 this.rowElements = [];\n this.rows = [];\n var fCont = this.getPanel().querySelector('.e-frozencontent');\n var mCont = this.getPanel().querySelector('.e-movablecontent');\n var cont = this.getPanel().querySelector('.e-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 var isServerRendered = 'isServerRendered';\n if (isBlazor() && this.parent[isServerRendered]) {\n modelData = this.generator.generateRows(dataSource, args);\n if (this.parent.enableVirtualization) {\n this.prevInfo = this.prevInfo ? this.prevInfo : args.virtualInfo;\n this.prevInfo = args.virtualInfo.sentinelInfo && args.virtualInfo.sentinelInfo.axis === 'Y' && this.currentInfo.page &&\n this.currentInfo.page !== args.virtualInfo.page ? this.currentInfo : args.virtualInfo;\n }\n this.rows = modelData;\n this.freezeRows = modelData;\n this.rowElements = [].slice.call(this.getTable().querySelectorAll('tr.e-row[data-uid]'));\n if (frzCols) {\n this.movableRows = modelData.map(function (mRow) {\n var sRow = new Row(mRow);\n sRow.cells = mRow.cells.slice(frzCols, mRow.cells.length);\n mRow.cells = mRow.cells.slice(0, frzCols);\n return sRow;\n });\n this.freezeRowElements = this.rowElements;\n }\n this.isLoaded = true;\n this.parent.hideSpinner();\n args.isFrozen = this.parent.getFrozenColumns() !== 0 && !args.isFrozen;\n var arg = extend({ rows: this.rows }, args);\n if (this.getTable().querySelector('.e-emptyrow')) {\n remove(this.getTable().querySelector('.e-emptyrow'));\n if (!isNullOrUndefined(this.getTable().querySelectorAll('.e-table > tbody')[1])) {\n remove(this.getTable().querySelectorAll('.e-table > tbody')[1]);\n }\n }\n this.parent.notify('contentcolgroup', {});\n this.rafCallback(arg)();\n if (frzCols) {\n cont.style.overflowY = 'hidden';\n fCont.style.height = ((mCont.offsetHeight) - getScrollBarWidth()) + 'px';\n mCont.style.overflowY = this.parent.height !== 'auto' ? 'scroll' : 'auto';\n fCont.style.borderRightWidth = '1px';\n this.parent.notify(events.contentReady, { rows: this.movableRows, args: extend({}, arg, { isFrozen: false }) });\n }\n if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'Multiple')\n || (!this.parent.isPersistSelection && !this.parent.enableVirtualization)) {\n var rowIndex = 'editRowIndex';\n if (this.parent.editSettings.mode === 'Normal' && !isNullOrUndefined(args[rowIndex])) {\n this.parent.selectRow(args[rowIndex]);\n }\n }\n if (this.parent.enableVirtualization && !this.parent.getHeaderContent().querySelectorAll('.e-check').length) {\n var removeClassByUid = this.parent.getRows().filter(function (x) { return x.getAttribute('aria-selected'); })\n .map(function (y) { return y.getAttribute('data-uid'); });\n var addClassByUid = this.parent.getRows().filter(function (x) { return x.getAttribute('aria-selected') === null; })\n .map(function (y) { return y.getAttribute('data-uid'); });\n for (var i = 0; i < removeClassByUid.length; i++) {\n if (!isNullOrUndefined(this.parent.getRowObjectFromUID(removeClassByUid[i])) &&\n !this.parent.getRowObjectFromUID(removeClassByUid[i]).isSelected) {\n this.parent.getRowElementByUID(removeClassByUid[i]).removeAttribute('aria-selected');\n if (!isNullOrUndefined(this.parent.getRowElementByUID(removeClassByUid[i]).querySelector('.e-check'))) {\n removeClass([this.parent.getRowElementByUID(removeClassByUid[i]).querySelector('.e-check')], ['e-check']);\n }\n for (var j = 0; j < this.parent.getRowElementByUID(removeClassByUid[i]).children.length; j++) {\n this.parent.getRowElementByUID(removeClassByUid[i])\n .children[j].classList.remove('e-selectionbackground', 'e-active');\n }\n }\n }\n for (var i = 0; i < addClassByUid.length; i++) {\n if (!isNullOrUndefined(this.parent.getRowObjectFromUID(addClassByUid[i]))\n && this.parent.getRowObjectFromUID(addClassByUid[i]).isSelected) {\n this.parent.getRowElementByUID(addClassByUid[i]).setAttribute('aria-selected', 'true');\n if (!isNullOrUndefined(this.parent.getRowElementByUID(addClassByUid[i]).querySelector('.e-frame'))) {\n addClass([this.parent.getRowElementByUID(addClassByUid[i]).querySelector('.e-frame')], ['e-check']);\n }\n for (var j = 0; j < this.parent.getRowElementByUID(addClassByUid[i]).children.length; j++) {\n this.parent.getRowElementByUID(addClassByUid[i])\n .children[j].classList.add('e-selectionbackground', 'e-active');\n }\n }\n }\n }\n return;\n }\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() === 'Left-Right' && tableName === 'frozen-right';\n /* tslint:disable:no-any */\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 /* tslint:enable:no-any */\n }\n }\n }\n this.parent.destroyTemplate(['template'], templatetoclear);\n }\n if (this.parent.isReact && args.requestType !== 'infiniteScroll' && !args.isFrozen) {\n this.parent.destroyTemplate(['columnTemplate', 'rowTemplate', 'detailTemplate', 'captionTemplate', 'commandsTemplate']);\n this.parent.renderTemplates();\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('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 args.virtualInfo.blockIndexes = m === 0 || m === 1 ? [1, 2] : [m, m + 1];\n startIndex = m === 0 || m === 1 ? 0 : (m * bSize);\n break;\n }\n else {\n args.virtualInfo.blockIndexes = m === 0 || m === 1 ? [1, 2] : [m, m + 1];\n startIndex = m === 0 || m === 1 ? 0 : (m) * bSize;\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) && this.rows.length >= (gObj.pageSettings.pageSize) && blockLoad) {\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('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 if (!isBlazor() || this.parent.isJsComponent) {\n args.rows = this.rows.slice(0);\n }\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(tbdy);\n tbdy = _this.parent.createElement('tbody');\n }\n else {\n remove(_this.tbody);\n _this.tbody = _this.parent.createElement('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('tbody');\n _this.appendContent(frCont, frag, args);\n }\n else if (!args.renderMovableContent) {\n _this.appendContent(fCont.querySelector('tbody'), frag, args);\n }\n else {\n _this.appendContent(mCont.querySelector('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() !== 'Left-Right'\n && (tableName === 'frozen-left' || tableName === 'frozen-right'))\n || (gObj.getFrozenMode() === 'Left-Right'\n && (tableName === 'frozen-left' || 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 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 === 'frozen-left' || (this.parent.getFrozenMode() === 'Right' && tableName === 'frozen-right')) {\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('aria-rowindex'), 10);\n var first = Math.ceil((index + 1) / this.parent.pageSettings.pageSize);\n index = parseInt(rows[rows.length - 1].getAttribute('aria-rowindex'), 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 * @return {Element}\n */\n ContentRender.prototype.getPanel = function () {\n return this.contentPanel;\n };\n /**\n * Set the content div element of grid\n * @param {Element} panel\n */\n ContentRender.prototype.setPanel = function (panel) {\n this.contentPanel = panel;\n };\n /**\n * Get the content table element of grid\n * @return {Element}\n */\n ContentRender.prototype.getTable = function () {\n return this.contentTable;\n };\n /**\n * Set the content table element of grid\n * @param {Element} table\n */\n ContentRender.prototype.setTable = function (table) {\n this.contentTable = table;\n };\n /**\n * Get the Row collection in the Grid.\n * @returns {Row[] | HTMLCollectionOf}\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 * @returns {Row[] | HTMLCollectionOf}\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 * @return {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 * @return {Element}\n */\n ContentRender.prototype.getMovableRowElements = function () {\n return this.rowElements;\n };\n /**\n * Get the content table data row elements\n * @return {Element}\n */\n ContentRender.prototype.setRowElements = function (elements) {\n this.rowElements = elements;\n };\n /**\n * Get the header colgroup element\n * @returns {Element}\n */\n ContentRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n * @param {Element} colgroup\n * @returns {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 * @param {Column[]} columns?\n */\n ContentRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n if (isBlazor() && gObj.isServerRendered) {\n this.parent.notify('setvisibility', columns);\n }\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() === 'Left-Right') {\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 element;\n var testRow;\n rows.some(function (r) { if (r.isDataRow) {\n testRow = r;\n } return r.isDataRow; });\n var tasks = [];\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() === 'frozen-right') {\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('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('.e-movablecontent').querySelector('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 }\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 * @hidden\n */\n ContentRender.prototype.setDisplayNone = function (tr, idx, displayVal, rows) {\n var trs = Object.keys(tr);\n for (var i = 0; i < trs.length; i++) {\n var td = tr[trs[i]].querySelectorAll('td.e-rowcell')[idx];\n if (tr[trs[i]].querySelectorAll('td.e-rowcell').length && td) {\n setStyleAttribute(tr[trs[i]].querySelectorAll('td.e-rowcell')[idx], { 'display': displayVal });\n if (tr[trs[i]].querySelectorAll('td.e-rowcell')[idx].classList.contains('e-hide')) {\n removeClass([tr[trs[i]].querySelectorAll('td.e-rowcell')[idx]], ['e-hide']);\n }\n if (this.parent.isRowDragable()) {\n var index = this.parent.getFrozenColumns() ? idx : idx + 1;\n rows[trs[i]].cells[index].visible = displayVal === '' ? true : false;\n }\n else {\n rows[trs[i]].cells[idx].visible = displayVal === '' ? true : false;\n }\n }\n }\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('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 isBlazor() ? this.parent.getHeaderTable().querySelector('colgroup').cloneNode(true) :\n this.parent.element.querySelector('.e-gridheader').querySelector('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 if (isBlazor() && !this.parent.isJsComponent && this.parent.frozenRows) {\n return;\n }\n this.getTable().appendChild(tbody);\n if (this.parent.frozenRows) {\n this.parent.getHeaderContent().querySelector('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('aria-rowindex'), 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 /** @hidden */\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('tbody');\n var dataSource = gObj.currentViewData;\n var trs = [].slice.call(this.getTable().querySelector('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.mutableData) {\n isEqual = this.objectEqualityChecker(this.prevCurrentView[i], dataSource[i]);\n }\n var tr = oldRowElements[oldRowObjs[oldIndex].uid];\n newRowObjs.push(oldRowObjs[oldIndex]);\n if (this.rowElements[i] && this.rowElements[i].getAttribute('data-uid') === newRowObjs[i].uid\n && ((hasBatch && isNullOrUndefined(batchChangeKeys[newIndexes[i]]))\n || (!hasBatch && (isEqual || this.prevCurrentView[i] === 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.mutableData && dataSource[i] !== this.prevCurrentView[oldIndex])\n || (this.mutableData && !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('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 /** @hidden */\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 isEqual = false;\n break;\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 row.isAltRow ? tr.classList.add('e-altrow') : tr.classList.remove('e-altrow');\n row.index = index;\n row.edit = undefined;\n row.isDirty = false;\n tr.setAttribute('aria-rowindex', 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, isBlazor } 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';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar HeaderRender = /** @class */ (function () {\n /**\n * Constructor for header renderer module\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 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.querySelectorAll('.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 result = void 0;\n var colIndex = gObj.getColumnIndexByField(col.field);\n 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 if (isBlazor()) {\n e.bindEvents(e.dragElement);\n }\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 HeaderRender.prototype.renderPanel = function () {\n var div = this.parent.element.querySelector('.e-gridheader');\n var isRendered = (div != null);\n div = isRendered ? div : this.parent.createElement('div', { className: 'e-gridheader' });\n var innerDiv = isRendered ? div.querySelector('.e-headercontent') :\n this.parent.createElement('div', { className: 'e-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 table\n */\n HeaderRender.prototype.renderTable = function () {\n var headerDiv = this.getPanel();\n headerDiv.appendChild(this.createHeaderTable());\n this.setTable(headerDiv.querySelector('.e-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 * @return {Element}\n */\n HeaderRender.prototype.getPanel = function () {\n return this.headerPanel;\n };\n /**\n * Set the header content div element of grid\n * @param {Element} panel\n */\n HeaderRender.prototype.setPanel = function (panel) {\n this.headerPanel = panel;\n };\n /**\n * Get the header table element of grid\n * @return {Element}\n */\n HeaderRender.prototype.getTable = function () {\n return this.headerTable;\n };\n /**\n * Set the header table element of grid\n * @param {Element} table\n */\n HeaderRender.prototype.setTable = function (table) {\n this.headerTable = table;\n };\n /**\n * Get the header colgroup element\n * @returns {Element}\n */\n HeaderRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n * @param {Element} colgroup\n * @returns {Element}\n */\n HeaderRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Get the header row element collection.\n * @return {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 * @return {Element}\n * @hidden\n */\n HeaderRender.prototype.createHeaderTable = function () {\n var skipDom = isBlazor() && this.parent.frozenRows !== 0;\n var table = this.createTable();\n var innerDiv = this.getPanel().querySelector('.e-headercontent');\n if (!skipDom) {\n innerDiv.appendChild(table);\n }\n return innerDiv;\n };\n /**\n * @hidden\n */\n HeaderRender.prototype.createHeader = function (tableEle, tableName) {\n if (tableEle === void 0) { tableEle = null; }\n var skipDom = isBlazor() && this.parent.frozenRows !== 0;\n var gObj = this.parent;\n var isFrozen = gObj.isFrozenGrid();\n if (!(isBlazor() && !gObj.isJsComponent) && this.getTable() && !isFrozen) {\n remove(this.getTable());\n }\n var columns = gObj.getColumns();\n var innerDiv = this.getPanel().querySelector('.e-headercontent');\n var table = skipDom ? tableEle || innerDiv.querySelector('.e-table') :\n this.parent.createElement('table', { className: 'e-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('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('colgroup');\n var rowBody = this.parent.createElement('tr');\n var bodyCell;\n var rows = this.rows = findHeaderRow.rows;\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, this.parent);\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 var cell = rows[i].cells[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 if (!skipDom) {\n tbody.appendChild(rowBody);\n }\n table.appendChild(this.setColGroup(colGroup));\n table.appendChild(thead);\n if (!skipDom) {\n table.appendChild(tbody);\n }\n table.appendChild(this.caption);\n this.ariaService.setOptions(table, { colcount: gObj.getColumns().length.toString() });\n return table;\n };\n /**\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 === 'Left-Right' && colFreezeMode === 'frozen-right')) {\n if (frozenMode === 'Right') {\n rows[0].cells.pop();\n }\n else {\n rows[0].cells.shift();\n }\n }\n else if (!frzCols && colFreezeMode === 'frozen-left') {\n rows[0].cells[0].column.freeze = colFreezeMode === 'frozen-left' ? 'Left' : 'Right';\n }\n else if (frozenMode === 'Right' && colFreezeMode === 'frozen-right') {\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 + '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 column;\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);\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);\n }\n return rows;\n };\n HeaderRender.prototype.appendCells = function (cols, rows, index, isFirstObj, isFirstCol, isLastCol, isMovable, tableName) {\n var lastCol = isLastCol ? '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 }));\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);\n }\n }\n if (this.lockColsRendered) {\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n var isFirstCol_1 = this.isFirstCol = cols.columns[i].visible && !this.isFirstCol && len !== 1;\n var isLaststackedCol = i === (len - 1);\n rows = this.appendCells(cols.columns[i], rows, index + 1, isFirstObj, isFirstCol_1, isLaststackedCol && isLastCol, isMovable, tableName);\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) {\n count++;\n }\n }\n return count;\n };\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 * @param {Column[]} columns?\n */\n HeaderRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var rows = [].slice.call(this.getRows()); //NodeList -> Array \n var displayVal;\n var idx;\n var className;\n var element;\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 if (isBlazor() && gObj.isServerRendered) {\n setStyleAttribute(this.getTable().querySelector('colgroup').children[idx], { 'display': displayVal });\n setStyleAttribute(this.getTable().querySelectorAll('th')[idx], { 'display': displayVal });\n }\n else {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n }\n else {\n var mTblColGrp = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('colgroup');\n var mTbl = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('table');\n setStyleAttribute(mTblColGrp.children[idx - normalizedfrzCols], { 'display': displayVal });\n if (isBlazor() && gObj.isServerRendered) {\n setStyleAttribute(mTbl.querySelectorAll('th')[idx - frzCols], { 'display': displayVal });\n }\n }\n }\n else {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n }\n this.refreshUI();\n };\n HeaderRender.prototype.colPosRefresh = function () {\n if (isBlazor() && this.parent.isServerRendered && this.parent.frozenRows && this.parent.getFrozenColumns()) {\n this.freezeReorder = true;\n }\n this.refreshUI();\n };\n /**\n * Refresh the header of the Grid.\n * @returns {void}\n */\n HeaderRender.prototype.refreshUI = function () {\n var frzCols = this.parent.isFrozenGrid();\n var isVFTable = this.parent.enableColumnVirtualization && frzCols;\n var setFrozenTable = isBlazor() && this.parent.isServerRendered && this.parent.frozenRows !== 0 && frzCols;\n var headerDiv = this.getPanel();\n this.toggleStackClass(headerDiv);\n var table = this.freezeReorder ? this.headerPanel.querySelector('.e-movableheader').querySelector('.e-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 (setFrozenTable && !isVFTable) {\n table = this.freezeReorder ? this.headerPanel.querySelector('.e-movableheader').querySelector('.e-table') :\n this.headerPanel.querySelector('.e-frozenheader').querySelector('.e-table');\n }\n if (table) {\n if (isBlazor() && this.parent.isServerRendered) {\n table.removeChild(table.querySelector('colgroup'));\n table.removeChild(table.querySelector('thead'));\n }\n else {\n remove(table);\n table.removeChild(table.firstChild);\n table.removeChild(table.childNodes[0]);\n }\n var colGroup = this.parent.createElement('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 && !setFrozenTable) {\n this.setTable(table);\n }\n if (!(isBlazor() && this.parent.isServerRendered)) {\n this.appendContent(table);\n }\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.querySelectorAll('.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, 'e-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('.e-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 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 && (gObj.allowSorting || gObj.allowFiltering)) {\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('.e-gridheader'));\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, isBlazor } 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 * @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' } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n * @returns string\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 * @param {Column} column\n * @param {Object} data\n * @param {Element}\n */\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 * @param {Cell} cell\n * @param {Element} node\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 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 = isBlazor() ? column.toJSON() : 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 * @param {Element} node\n * @param {string|Element} innerHtml\n * @returns 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 * @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 * @param {Column} column\n * @param {Object} data\n * @param {Element}\n */\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 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 * @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 * @param {Cell} cell\n * @param {Object} data\n */\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, isBlazor } 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 * @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 * @param {Cell} cell\n * @param {Object} data\n */\n GroupCaptionCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n var gObj = this.parent;\n var result;\n var helper = {};\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 (isBlazor()) {\n var tempID = gObj.element.id + 'captionTemplate';\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data, null, null, tempID);\n }\n else {\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 }\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 * @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 * @param {Cell} cell\n * @param {Object} data\n */\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 * @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 * @param {Cell} cell\n * @param {Object} data\n * @param {{ [x: string]: string }} attr\n * @param {boolean} isExpand\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 * @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 * @param {Cell} cell\n * @param {Object} data\n */\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 * @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 * @param {Cell} cell\n * @param {Object} data\n */\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 * @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 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 * @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',\n attrs: { role: 'gridcell', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n */\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 * @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 * @param {Cell} cell\n * @param {Object} data\n */\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, updateBlazorTemplate, blazorTemplates, isBlazor } 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 } 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';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\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 Render.prototype.render = function () {\n var gObj = this.parent;\n var isServerRendered = 'isServerRendered';\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 if (!(isBlazor() && this.parent[isServerRendered])) {\n this.refreshDataManager();\n }\n };\n /**\n * Refresh the entire Grid.\n * @return {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 var preventUpdate = 'preventUpdate';\n gObj.notify(e.requestType + \"-begin\", e);\n if (isBlazor()) {\n this.resetTemplates();\n }\n if (isBlazor() && gObj.isServerRendered) {\n var bulkChanges = 'bulkChanges';\n if (gObj[bulkChanges].dataSource) {\n delete gObj[bulkChanges].dataSource;\n }\n gObj.notify('blazor-action-begin', e);\n if (e.requestType === 'filtering') {\n var columns = 'columns';\n e[columns] = null;\n }\n if (e.requestType === 'sorting') {\n var target = 'target';\n e[target] = null;\n }\n if (gObj.editSettings.mode === 'Batch' && !gObj.isEdit) {\n gObj.notify('closebatch', {});\n }\n }\n var tempPreventUpdate = this.parent[preventUpdate];\n gObj.trigger(events.actionBegin, e, function (args) {\n if (args === void 0) { args = { requestType: 'refresh' }; }\n if (args.requestType === 'delete' && isBlazor() && !gObj.isJsComponent) {\n var data = 'data';\n if (isNullOrUndefined(gObj.commandDelIndex)) {\n args[data] = gObj.getSelectedRecords();\n }\n else {\n var tempSelectedRecord = args[data];\n args[data] = {};\n args[data][0] = tempSelectedRecord;\n }\n }\n if (args.cancel) {\n gObj.notify(events.cancelBegin, args);\n return;\n }\n if (isBlazor() && gObj.editSettings.mode === 'Normal' && gObj.isEdit && e.requestType !== 'infiniteScroll') {\n gObj.notify('closeinline', {});\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 if (!(currentViewData - dataLength) && count && currentViewData !== dataLength) {\n gObj.prevPageMoving = true;\n gObj.setProperties({\n pageSettings: {\n totalRecordsCount: count, currentPage: Math.ceil(count / gObj.pageSettings.pageSize)\n }\n }, true);\n gObj.pagerModule.pagerObj.totalRecordsCount = count;\n }\n }\n if (isBlazor() && _this.parent.isServerRendered) {\n if (tempPreventUpdate) {\n var bulkChanges = 'bulkChanges';\n gObj[bulkChanges] = {};\n return;\n }\n if (e.requestType === 'refresh') {\n _this.parent.notify('updateaction', args);\n }\n if (args.requestType !== 'virtualscroll') {\n _this.parent.showSpinner();\n }\n if (args.requestType === 'delete' || args.requestType === 'save') {\n _this.parent.notify(events.addDeleteAction, args);\n _this.parent.notify('add-delete-success', args);\n }\n else {\n _this.parent.allowServerDataBinding = true;\n _this.parent.serverDataBind();\n _this.parent.allowServerDataBinding = false;\n }\n }\n else 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 * @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 if (isBlazor() && !this.parent.isJsComponent) {\n e.rows = null;\n }\n this.parent.trigger(events.actionComplete, e);\n };\n /**\n * The function is used to refresh the dataManager\n * @return {void}\n */\n Render.prototype.refreshDataManager = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n if (args.requestType !== 'virtualscroll') {\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('.e-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 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 if (isBlazor() && !this.parent.isJsComponent) {\n promise.then(function (e) {\n _this.parent.notify('editsuccess', args);\n }).catch(function (e) {\n var error = 'error';\n var message = 'message';\n if (!isNullOrUndefined(e[error]) && !isNullOrUndefined(e[error][message])) {\n e[error] = e[error][message];\n }\n _this.parent.trigger(events.actionFailure, e);\n });\n }\n else {\n var query_1 = this.data.generateQuery().requiresCount();\n if (this.data.dataManager.dataSource.offline) {\n this.refreshDataManager({ requestType: 'batchsave' });\n return;\n }\n else {\n promise.then(function (e) {\n _this.data.getData(args, query_1)\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 };\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 * @return {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('tbody');\n var tr;\n if (!isNullOrUndefined(tbody)) {\n remove(tbody);\n }\n tbody = this.parent.createElement('tbody');\n var spanCount = 0;\n if (gObj.detailTemplate || gObj.childGrid) {\n ++spanCount;\n }\n 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.getColumns().length + spanCount).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 || (isBlazor() && this.parent.isServerRendered && columns[i].type === 'none')) {\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 || (isBlazor() && this.parent.isServerRendered ? 'none' : null);\n }\n var valueFormatter = new ValueFormatter();\n if (columns[i].format && (columns[i].format.skeleton || columns[i].format.format)) {\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 var isServerRendered = 'isServerRendered';\n var isServerDateMap = this.parent[isServerRendered] || this.parent.printModule.isPrintGrid();\n setFormatter(this.locator, columns[i], isServerDateMap);\n }\n else if (!columns[i].format && columns[i].type === 'number') {\n columns[i].setParser(fmtr.getParserFunction({ format: 'n2' }));\n }\n }\n };\n /** @hidden */\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 (isBlazor() && gObj.filterSettings.type === 'FilterBar'\n && (isNullOrUndefined(gObj.currentViewData) ||\n (!isNullOrUndefined(gObj.currentViewData) && !gObj.currentViewData.length))) {\n var gridColumns = gObj.getColumns();\n for (var i = 0; i < gridColumns.length; i++) {\n if (gridColumns[i].filterTemplate) {\n var tempID = gObj.element.id + gridColumns[i].uid + 'filterTemplate';\n resetBlazorTemplate(tempID, 'FilterTemplate');\n var fieldName = gridColumns[i].field;\n var filteredColumns = gObj.filterSettings.columns;\n for (var k = 0; k < filteredColumns.length; k++) {\n if (fieldName === filteredColumns[k].field) {\n blazorTemplates[tempID][0][fieldName] = filteredColumns[k].value;\n }\n }\n updateBlazorTemplate(tempID, 'FilterTemplate', gridColumns[i], false);\n }\n }\n }\n if (!len && dataArgs.count && gObj.allowPaging && args && args.requestType !== 'delete') {\n if (_this.parent.groupSettings.enableLazyLoading\n && (args.requestType === 'grouping' || args.requestType === 'ungrouping')) {\n _this.parent.notify(events.groupComplete, args);\n }\n gObj.prevPageMoving = true;\n gObj.pageSettings.totalRecordsCount = dataArgs.count;\n if (args.requestType !== 'paging') {\n gObj.pageSettings.currentPage = Math.ceil(dataArgs.count / gObj.pageSettings.pageSize);\n }\n gObj.dataBind();\n return;\n }\n if ((!gObj.getColumns().length && len || !_this.isLayoutRendered) && !isGroupAdaptive(gObj)) {\n _this.updatesOnInitialRender(dataArgs);\n }\n if (!_this.isColTypeDef && gObj.getCurrentViewRecords()) {\n if (_this.data.dataManager.dataSource.offline && 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 _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 (!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('.e-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 /** @hidden */\n Render.prototype.dataManagerFailure = function (e, args) {\n this.ariaService.setOptions(this.parent.getContent().querySelector('.e-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 var gObj = this.parent;\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 /** @hidden */\n Render.prototype.validateGroupRecords = function (e) {\n var _this = this;\n var index = e.result.length - 1;\n if (index < 0) {\n return Promise.resolve(e);\n }\n var group0 = e.result[0];\n var groupN = e.result[index];\n var predicate = [];\n var addWhere = function (input) {\n var groups = [group0, groupN];\n for (var i = 0; i < groups.length; i++) {\n predicate.push(new Predicate('field', '==', groups[i].field).and(_this.getPredicate('key', 'equal', groups[i].key)));\n }\n input.where(Predicate.or(predicate));\n };\n var query = new Query();\n addWhere(query);\n var curDm = new DataManager(e.result);\n var curFilter = curDm.executeLocal(query);\n var newQuery = this.data.generateQuery(true);\n var rPredicate = [];\n if (this.data.isRemote() || isBlazor()) {\n var groups = [group0, groupN];\n for (var i = 0; i < groups.length; i++) {\n rPredicate.push(this.getPredicate(groups[i].field, 'equal', groups[i].key));\n }\n newQuery.where(Predicate.or(rPredicate));\n }\n else {\n addWhere(newQuery);\n }\n var deferred = new Deferred();\n this.data.getData({}, newQuery).then(function (r) {\n _this.updateGroupInfo(curFilter, r.result);\n deferred.resolve(e);\n }).catch(function (e) { return deferred.reject(e); });\n return deferred.promise;\n };\n Render.prototype.getPredicate = function (key, operator, value) {\n if (value instanceof Date) {\n return getDatePredicate({ field: key, operator: operator, value: value });\n }\n return new Predicate(key, operator, value);\n };\n Render.prototype.updateGroupInfo = function (current, untouched) {\n var dm = new DataManager(untouched);\n var elements = current;\n for (var i = 0; i < elements.length; i++) {\n var uGroup = dm.executeLocal(new Query()\n .where(new Predicate('field', '==', elements[i].field).and(this.getPredicate('key', 'equal', elements[i].key))))[0];\n elements[i].count = uGroup.count;\n var itemGroup = elements[i].items;\n var uGroupItem = uGroup.items;\n if (itemGroup.GroupGuid) {\n elements[i].items = this.updateGroupInfo(elements[i].items, uGroup.items);\n }\n var rows = this.parent.aggregates;\n for (var j = 0; j < rows.length; j++) {\n var row = rows[j];\n for (var k = 0; k < row.columns.length; k++) {\n var types = row.columns[k].type instanceof Array ? (row.columns[k].type) :\n [(row.columns[k].type)];\n for (var l = 0; l < types.length; l++) {\n var key = row.columns[k].field + ' - ' + types[l].toLowerCase();\n var data = itemGroup.level ? uGroupItem.records : uGroup.items;\n var context = this.parent;\n if (types[l] === 'Custom') {\n var data_1 = itemGroup.level ? uGroupItem : uGroup;\n elements[i].aggregates[key] = row.columns[k].customAggregate ?\n row.columns[k].customAggregate\n .call(context, data_1, row.columns[k]) : '';\n }\n else {\n elements[i].aggregates[key] = DataUtil.aggregates[types[l].toLowerCase()](data, row.columns[k].field);\n }\n }\n }\n }\n }\n return current;\n };\n return Render;\n}());\nexport { Render };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\n/**\n * CellRendererFactory\n * @hidden\n */\nvar CellRendererFactory = /** @class */ (function () {\n function CellRendererFactory() {\n this.cellRenderMap = {};\n }\n CellRendererFactory.prototype.addCellRenderer = function (name, type) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[name])) {\n this.cellRenderMap[name] = type;\n }\n };\n CellRendererFactory.prototype.getCellRenderer = function (name) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[name])) {\n throw \"The cellRenderer \" + name + \" is not found\";\n }\n else {\n return this.cellRenderMap[name];\n }\n };\n return CellRendererFactory;\n}());\nexport { CellRendererFactory };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { ResponsiveDialogRenderer } from '../renderer/responsive-dialog-renderer';\n/**\n * ServiceLocator\n * @hidden\n */\nvar ServiceLocator = /** @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n ServiceLocator.prototype.register = function (name, type) {\n if (isNullOrUndefined(this.services[name])) {\n this.services[name] = type;\n }\n };\n ServiceLocator.prototype.getService = function (name) {\n if (isNullOrUndefined(this.services[name])) {\n throw \"The service \" + name + \" is not registered\";\n }\n return this.services[name];\n };\n ServiceLocator.prototype.registerAdaptiveService = function (type, isAdaptiveUI, action) {\n if (isAdaptiveUI) {\n type.responsiveDialogRenderer = new ResponsiveDialogRenderer(type.parent, type.serviceLocator);\n type.responsiveDialogRenderer.action = action;\n }\n else {\n if (type.responsiveDialogRenderer) {\n type.responsiveDialogRenderer.removeEventListener();\n type.responsiveDialogRenderer = undefined;\n }\n }\n };\n return ServiceLocator;\n}());\nexport { ServiceLocator };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\n/**\n * RendererFactory\n * @hidden\n */\nvar RendererFactory = /** @class */ (function () {\n function RendererFactory() {\n this.rendererMap = {};\n }\n RendererFactory.prototype.addRenderer = function (name, type) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n this.rendererMap[rName] = type;\n }\n };\n RendererFactory.prototype.getRenderer = function (name) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n throw \"The renderer \" + rName + \" is not found\";\n }\n else {\n return this.rendererMap[rName];\n }\n };\n return RendererFactory;\n}());\nexport { RendererFactory };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the paging behavior of the Grid.\n */\nvar PageSettings = /** @class */ (function (_super) {\n __extends(PageSettings, _super);\n function PageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(12)\n ], PageSettings.prototype, \"pageSize\", void 0);\n __decorate([\n Property(8)\n ], PageSettings.prototype, \"pageCount\", void 0);\n __decorate([\n Property(1)\n ], PageSettings.prototype, \"currentPage\", void 0);\n __decorate([\n Property()\n ], PageSettings.prototype, \"totalRecordsCount\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"enableQueryString\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"pageSizes\", void 0);\n __decorate([\n Property(null)\n ], PageSettings.prototype, \"template\", void 0);\n return PageSettings;\n}(ChildProperty));\nexport { PageSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the column chooser behavior of the Grid.\n */\nvar ColumnChooserSettings = /** @class */ (function (_super) {\n __extends(ColumnChooserSettings, _super);\n function ColumnChooserSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('startsWith')\n ], ColumnChooserSettings.prototype, \"operator\", void 0);\n return ColumnChooserSettings;\n}(ChildProperty));\nexport { ColumnChooserSettings };\n","import { extend, isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\n/**\n * The `Search` module is used to handle search action.\n */\nvar Search = /** @class */ (function () {\n /**\n * Constructor for Grid search module.\n * @hidden\n */\n function Search(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * Searches Grid records by given key.\n *\n * > You can customize the default search action by using [`searchSettings`](grid/#searchsettings/).\n * @param {string} searchString - Defines the key.\n * @return {void}\n */\n Search.prototype.search = function (searchString) {\n var gObj = this.parent;\n searchString = isNullOrUndefined(searchString) ? '' : searchString;\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.search, arg1: searchString });\n return;\n }\n if (searchString !== gObj.searchSettings.key) {\n gObj.searchSettings.key = searchString.toString();\n gObj.dataBind();\n }\n else if (this.refreshSearch) {\n gObj.refresh();\n }\n };\n /**\n * @hidden\n */\n Search.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.searchComplete, this.onSearchComplete, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.actionCompleteFunc = this.onActionComplete.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.on(events.cancelBegin, this.cancelBeginEvent, this);\n };\n /**\n * @hidden\n */\n Search.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.searchComplete, this.onSearchComplete);\n this.parent.off(events.destroy, this.destroy);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.off(events.cancelBegin, this.cancelBeginEvent);\n };\n /**\n * To destroy the print\n * @return {void}\n * @hidden\n */\n Search.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * @hidden\n */\n Search.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (!isNullOrUndefined(e.properties.key)) {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin, searchString: this.parent.searchSettings.key\n });\n }\n else {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin\n });\n }\n };\n /**\n * The function used to trigger onActionComplete\n * @return {void}\n * @hidden\n */\n Search.prototype.onSearchComplete = function (e) {\n if (isBlazor() && !this.parent.isJsComponent) {\n e.rows = null;\n }\n this.parent.trigger(events.actionComplete, extend(e, {\n searchString: this.parent.searchSettings.key, requestType: 'searching', type: events.actionComplete\n }));\n };\n Search.prototype.onActionComplete = function (e) {\n this.refreshSearch = e.requestType !== 'searching';\n };\n Search.prototype.cancelBeginEvent = function (e) {\n if (e.requestType === 'searching') {\n this.parent.setProperties({ searchSettings: { key: '' } }, true);\n }\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Search.prototype.getModuleName = function () {\n return 'search';\n };\n return Search;\n}());\nexport { Search };\n","import { isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport { iterateArrayOrObject, isGroupAdaptive } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * The `ShowHide` module is used to control column visibility.\n */\nvar ShowHide = /** @class */ (function () {\n /**\n * Constructor for the show hide module.\n * @hidden\n */\n function ShowHide(parent) {\n this.parent = parent;\n }\n /**\n * Shows a column by column name.\n * @param {string|string[]} columnName - Defines a single or collection of column names to show.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n ShowHide.prototype.show = function (columnName, showBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, showBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n for (var i = 0; i < columns.length; i++) {\n columns[i].visible = true;\n }\n this.setVisible(columns);\n };\n /**\n * Hides a column by column name.\n * @param {string|string[]} columnName - Defines a single or collection of column names to hide.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n ShowHide.prototype.hide = function (columnName, hideBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, hideBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n for (var i = 0; i < columns.length; i++) {\n columns[i].visible = false;\n }\n this.setVisible(columns);\n };\n ShowHide.prototype.getToggleFields = function (key) {\n var finalized = [];\n if (typeof key === 'string') {\n finalized = [key];\n }\n else {\n finalized = key;\n }\n return finalized;\n };\n ShowHide.prototype.getColumns = function (keys, getKeyBy) {\n var _this = this;\n var columns = iterateArrayOrObject(keys, function (key, index) {\n return iterateArrayOrObject(_this.parent.columnModel, function (item, index) {\n if (item[getKeyBy] === key) {\n return item;\n }\n return undefined;\n })[0];\n });\n return columns;\n };\n /**\n * Shows or hides columns by given column collection.\n * @private\n * @param {Column[]} columns - Specifies the columns.\n * @return {void}\n */\n ShowHide.prototype.setVisible = function (columns, changedStateColumns) {\n var _this = this;\n if (changedStateColumns === void 0) { changedStateColumns = []; }\n changedStateColumns = (changedStateColumns.length > 0) ? changedStateColumns :\n isBlazor() ? (JSON.parse(JSON.stringify(columns))) : columns;\n var args = {\n requestType: 'columnstate',\n cancel: false,\n columns: changedStateColumns\n };\n var cancel = 'cancel';\n this.parent.trigger(events.actionBegin, args, function (showHideArgs) {\n var currentViewCols = _this.parent.getColumns();\n columns = isNullOrUndefined(columns) ? currentViewCols : columns;\n if (showHideArgs[cancel]) {\n _this.parent.notify(events.resetColumns, { showHideArgs: showHideArgs });\n if (columns.length > 0) {\n columns[0].visible = true;\n }\n return;\n }\n if (isGroupAdaptive(_this.parent)) {\n _this.parent.contentModule.emptyVcRows();\n }\n if (_this.parent.allowSelection && _this.parent.getSelectedRecords().length &&\n !_this.parent.selectionSettings.persistSelection) {\n _this.parent.clearSelection();\n }\n if (_this.parent.enableColumnVirtualization) {\n var colsInCurrentView = columns.filter(function (col1) { return (currentViewCols.some(function (col2) { return col1.field === col2.field; })); });\n if (colsInCurrentView.length) {\n _this.parent.notify(events.columnVisibilityChanged, columns);\n }\n }\n else {\n _this.parent.notify(events.columnVisibilityChanged, columns);\n }\n var params = {\n requestType: 'columnstate',\n columns: changedStateColumns\n };\n _this.parent.trigger(events.actionComplete, params);\n if (_this.parent.columnQueryMode !== 'All') {\n _this.parent.refresh();\n }\n });\n };\n return ShowHide;\n}());\nexport { ShowHide };\n","import { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getScrollBarWidth, getUpdateUsingRaf } from '../base/util';\nimport { scroll, contentReady, uiUpdate, onEmpty, headerRefreshed, textWrapRefresh, virtualScrollEdit, infiniteScrollHandler, closeFilterDialog } from '../base/constant';\nimport { lazyLoadScrollHandler, checkScrollReset } from '../base/constant';\nimport { ColumnWidthService } from '../services/width-controller';\n/**\n * The `Scroll` module is used to handle scrolling behaviour.\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the Grid scrolling.\n * @hidden\n */\n function Scroll(parent) {\n this.lastScrollTop = 0;\n //To maintain scroll state on grid actions.\n this.previousValues = { top: 0, left: 0 };\n this.oneTimeReady = true;\n this.parent = parent;\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * @hidden\n */\n Scroll.prototype.setWidth = function (uiupdate) {\n this.parent.element.style.width = formatUnit(this.parent.width);\n if (uiupdate) {\n this.widthService.setWidthToColumns();\n }\n if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&\n this.parent.toolbarModule.toolbar.element) {\n this.parent.toolbarModule.toolbar.refreshOverflow();\n }\n };\n /**\n * @hidden\n */\n Scroll.prototype.setHeight = function () {\n var mHdrHeight = 0;\n var content = this.parent.getContent().querySelector('.e-content');\n var height = this.parent.height;\n if (this.parent.isFrozenGrid() && this.parent.height !== 'auto' && this.parent.height.toString().indexOf('%') < 0) {\n height = parseInt(height, 10) - Scroll.getScrollBarWidth();\n }\n if (!this.parent.enableVirtualization && this.parent.frozenRows && this.parent.height !== 'auto') {\n var tbody = this.parent.getHeaderContent().querySelector('tbody');\n mHdrHeight = tbody ? tbody.offsetHeight : 0;\n if (tbody && mHdrHeight) {\n var add = tbody.querySelectorAll('.e-addedrow').length;\n var height_1 = add * this.parent.getRowHeight();\n mHdrHeight -= height_1;\n }\n content.style.height = formatUnit(height - mHdrHeight);\n }\n else {\n content.style.height = formatUnit(height);\n }\n this.ensureOverflow(content);\n if (this.parent.isFrozenGrid()) {\n this.refresh();\n }\n };\n /**\n * @hidden\n */\n Scroll.prototype.setPadding = function () {\n var content = this.parent.getHeaderContent();\n var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();\n var cssProps = this.getCssProperties();\n var padding = this.parent.getFrozenMode() === 'Right' || this.parent.getFrozenMode() === 'Left-Right' ? '0.5px' : '1px';\n content.querySelector('.e-headercontent').style[cssProps.border] = scrollWidth > 0 ? padding : '0px';\n content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';\n };\n /**\n * @hidden\n */\n Scroll.prototype.removePadding = function (rtl) {\n var cssProps = this.getCssProperties(rtl);\n var hDiv = this.parent.getHeaderContent().querySelector('.e-headercontent');\n hDiv.style[cssProps.border] = '';\n hDiv.parentElement.style[cssProps.padding] = '';\n var footerDiv = this.parent.getFooterContent();\n if (footerDiv && footerDiv.classList.contains('e-footerpadding')) {\n footerDiv.classList.remove('e-footerpadding');\n }\n };\n /**\n * Refresh makes the Grid adoptable with the height of parent container.\n *\n * > The [`height`](grid/#height/) must be set to 100%.\n * @return\n */\n Scroll.prototype.refresh = function () {\n if (this.parent.height !== '100%') {\n return;\n }\n var content = this.parent.getContent();\n this.parent.element.style.height = '100%';\n var height = this.widthService.getSiblingsHeight(content);\n content.style.height = 'calc(100% - ' + height + 'px)'; //Set the height to the '.e-gridcontent';\n if (this.parent.isFrozenGrid()) {\n content.firstElementChild.style.height = 'calc(100% - ' + getScrollBarWidth() + 'px)';\n }\n };\n Scroll.prototype.getThreshold = function () {\n /* Some browsers places the scroller outside the content,\n * hence the padding should be adjusted.*/\n var appName = Browser.info.name;\n if (appName === 'mozilla') {\n return 0.5;\n }\n return 1;\n };\n /**\n * @hidden\n */\n Scroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(onEmpty, this.wireEvents, this);\n this.parent.on(contentReady, this.wireEvents, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n this.parent.on(textWrapRefresh, this.wireEvents, this);\n this.parent.on(headerRefreshed, this.setScrollLeft, this);\n };\n /**\n * @hidden\n */\n Scroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(onEmpty, this.wireEvents);\n this.parent.off(contentReady, this.wireEvents);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n this.parent.off(textWrapRefresh, this.wireEvents);\n this.parent.off(headerRefreshed, this.setScrollLeft);\n };\n Scroll.prototype.setScrollLeft = function () {\n if (this.parent.isFrozenGrid()) {\n this.parent.headerModule.getMovableHeader().scrollLeft = this.previousValues.left;\n }\n else {\n this.parent.getHeaderContent().querySelector('.e-headercontent').scrollLeft = this.previousValues.left;\n }\n };\n Scroll.prototype.onFrozenContentScroll = function () {\n var _this = this;\n return function (e) {\n if (_this.content.querySelector('tbody') === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling) {\n _this.parent.notify(infiniteScrollHandler, e);\n }\n _this.previousValues.top = e.target.scrollTop;\n };\n };\n Scroll.prototype.onContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n var isHeader = element.classList.contains('e-headercontent');\n return function (e) {\n if (_this.content.querySelector('tbody') === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling) {\n _this.parent.notify(infiniteScrollHandler, { target: e.target, isLeft: _this.previousValues.left !== left });\n }\n if (_this.parent.groupSettings.columns.length && _this.parent.groupSettings.enableLazyLoading) {\n var isDown = _this.previousValues.top < _this.parent.getContent().firstElementChild.scrollTop;\n _this.parent.notify(lazyLoadScrollHandler, { scrollDown: isDown });\n }\n _this.parent.notify(virtualScrollEdit, {});\n var sLimit = target.scrollWidth;\n var isFooter = target.classList.contains('e-summarycontent');\n if (_this.previousValues.left === left) {\n _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;\n return;\n }\n _this.parent.notify(closeFilterDialog, e);\n element.scrollLeft = left;\n if (isFooter) {\n _this.header.scrollLeft = left;\n }\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n };\n };\n Scroll.prototype.onCustomScrollbarScroll = function (mCont, mHdr) {\n var _this = this;\n var content = mCont;\n var header = mHdr;\n return function (e) {\n if (_this.content.querySelector('tbody') === null) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (_this.previousValues.left === left) {\n return;\n }\n content.scrollLeft = left;\n header.scrollLeft = left;\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n if (_this.parent.isDestroyed) {\n return;\n }\n };\n };\n Scroll.prototype.onTouchScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n var isFrozen = _this.parent.isFrozenGrid();\n var pageXY = _this.getPointXY(e);\n var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);\n var mHdr = isFrozen ?\n _this.parent.getHeaderContent().querySelector('.e-movableheader') :\n _this.parent.getHeaderContent().querySelector('.e-headercontent');\n var mCont = isFrozen ?\n _this.parent.getContent().querySelector('.e-movablecontent') :\n _this.parent.getContent().querySelector('.e-content');\n if (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {\n return;\n }\n e.preventDefault();\n mHdr.scrollLeft = left;\n mCont.scrollLeft = left;\n if (isFrozen) {\n var scrollBar = _this.parent.getContent().querySelector('.e-movablescrollbar');\n scrollBar.scrollLeft = left;\n }\n _this.pageXY.x = pageXY.x;\n _this.previousValues.left = left;\n };\n };\n Scroll.prototype.setPageXY = function () {\n var _this = this;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n _this.pageXY = _this.getPointXY(e);\n };\n };\n Scroll.prototype.getPointXY = function (e) {\n var pageXY = { x: 0, y: 0 };\n if (e.touches && e.touches.length) {\n pageXY.x = e.touches[0].pageX;\n pageXY.y = e.touches[0].pageY;\n }\n else {\n pageXY.x = e.pageX;\n pageXY.y = e.pageY;\n }\n return pageXY;\n };\n Scroll.prototype.wireEvents = function () {\n var _this = this;\n if (this.oneTimeReady) {\n var frzCols = this.parent.isFrozenGrid();\n this.content = this.parent.getContent().querySelector('.e-content');\n this.header = this.parent.getHeaderContent().querySelector('.e-headercontent');\n var mCont = this.content.querySelector('.e-movablecontent');\n var fCont = this.content.querySelector('.e-frozencontent');\n var mHdr = this.header.querySelector('.e-movableheader');\n var mScrollBar = this.parent.getContent().querySelector('.e-movablescrollbar');\n if (this.parent.frozenRows) {\n EventHandler.add(frzCols ? mHdr : this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(frzCols ? mHdr : this.header, 'touchmove pointermove', this.onTouchScroll(frzCols ? mCont : this.content), this);\n }\n if (this.parent.isFrozenGrid()) {\n EventHandler.add(mScrollBar, 'scroll', this.onCustomScrollbarScroll(mCont, mHdr), this);\n EventHandler.add(mCont, 'scroll', this.onCustomScrollbarScroll(mScrollBar, mHdr), this);\n EventHandler.add(mHdr, 'scroll', this.onCustomScrollbarScroll(mScrollBar, mCont), this);\n EventHandler.add(this.content, 'scroll', this.onFrozenContentScroll(), this);\n EventHandler.add(mHdr, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(mHdr, 'touchmove pointermove', this.onTouchScroll(mCont), this);\n EventHandler.add(mCont, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(mCont, 'touchmove pointermove', this.onTouchScroll(mHdr), this);\n }\n else {\n EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);\n EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);\n }\n if (this.parent.aggregates.length) {\n EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);\n }\n this.refresh();\n this.oneTimeReady = false;\n }\n var table = this.parent.getContentTable();\n var sLeft;\n var sHeight;\n var clientHeight;\n getUpdateUsingRaf(function () {\n sLeft = _this.header.scrollLeft;\n sHeight = table.scrollHeight;\n clientHeight = _this.parent.getContent().clientHeight;\n }, function () {\n var args = { cancel: false };\n _this.parent.notify(checkScrollReset, args);\n if (!_this.parent.enableVirtualization && !_this.parent.enableInfiniteScrolling) {\n if (sHeight < clientHeight) {\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n if (_this.parent.isFrozenGrid()) {\n addClass(_this.parent.getContent().querySelector('.e-movablecontent').querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n }\n }\n if (!args.cancel) {\n if ((_this.parent.frozenRows > 0 || _this.parent.isFrozenGrid()) && _this.header.querySelector('.e-movableheader')) {\n _this.header.querySelector('.e-movableheader').scrollLeft = _this.previousValues.left;\n }\n else {\n _this.header.scrollLeft = _this.previousValues.left;\n }\n _this.content.scrollLeft = _this.previousValues.left;\n _this.content.scrollTop = _this.previousValues.top;\n }\n }\n if (!_this.parent.enableColumnVirtualization) {\n _this.content.scrollLeft = sLeft;\n }\n if (_this.parent.isFrozenGrid() && _this.header.querySelector('.e-movableheader')) {\n _this.header.querySelector('.e-movableheader').scrollLeft =\n _this.content.querySelector('.e-movablecontent').scrollLeft;\n }\n });\n this.parent.isPreventScrollEvent = false;\n };\n /**\n * @hidden\n */\n Scroll.prototype.getCssProperties = function (rtl) {\n var css = {};\n var enableRtl = isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;\n css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';\n css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';\n return css;\n };\n Scroll.prototype.ensureOverflow = function (content) {\n content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n };\n Scroll.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.setPadding();\n this.oneTimeReady = true;\n if (this.parent.height === 'auto') {\n this.removePadding();\n }\n this.wireEvents();\n this.setHeight();\n var width = 'width';\n this.setWidth(!isNullOrUndefined(e.properties[width]));\n };\n /**\n * @hidden\n */\n Scroll.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.e-gridheader') && !gridElement.querySelector('.e-gridcontent'))) {\n return;\n }\n this.removeEventListener();\n //Remove padding\n this.removePadding();\n var cont = this.parent.getContent().querySelector('.e-content');\n removeClass([this.parent.getHeaderContent().querySelector('.e-headercontent')], 'e-headercontent');\n removeClass([cont], 'e-content');\n //Remove height\n cont.style.height = '';\n //Remove width\n this.parent.element.style.width = '';\n //Remove Dom event\n EventHandler.remove(cont, 'scroll', this.onContentScroll);\n };\n /**\n * Function to get the scrollbar width of the browser.\n * @return {number}\n * @hidden\n */\n Scroll.getScrollBarWidth = function () {\n return getScrollBarWidth();\n };\n return Scroll;\n}());\nexport { Scroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { compile } from '@syncfusion/ej2-base';\nimport { getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { Property, Collection, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the Grid's aggregate column.\n */\nvar AggregateColumn = /** @class */ (function (_super) {\n __extends(AggregateColumn, _super);\n function AggregateColumn() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.templateFn = {};\n return _this;\n }\n /**\n * @hidden\n */\n AggregateColumn.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.setTemplate = function (helper) {\n if (helper === void 0) { helper = {}; }\n if (this.footerTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.Summary)] = { fn: compile(this.footerTemplate, helper),\n property: 'footerTemplate' };\n }\n if (this.groupFooterTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.GroupSummary)] = { fn: compile(this.groupFooterTemplate, helper),\n property: 'groupFooterTemplate' };\n }\n if (this.groupCaptionTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.CaptionSummary)] = { fn: compile(this.groupCaptionTemplate, helper),\n property: 'groupCaptionTemplate' };\n }\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.getTemplate = function (type) {\n return this.templateFn[getEnumValue(CellType, type)];\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.setPropertiesSilent = function (prop) {\n this.setProperties(prop, true);\n };\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"columnName\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"format\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupFooterTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupCaptionTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"customAggregate\", void 0);\n return AggregateColumn;\n}(ChildProperty));\nexport { AggregateColumn };\n/**\n * Configures the aggregate rows.\n */\nvar AggregateRow = /** @class */ (function (_super) {\n __extends(AggregateRow, _super);\n function AggregateRow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], AggregateColumn)\n ], AggregateRow.prototype, \"columns\", void 0);\n return AggregateRow;\n}(ChildProperty));\nexport { AggregateRow };\n","import { Browser, remove, EventHandler, isUndefined, closest, classList, isBlazor } from '@syncfusion/ej2-base';\nimport { parentsUntil } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * The `Clipboard` module is used to handle clipboard copy action.\n */\nvar Clipboard = /** @class */ (function () {\n /**\n * Constructor for the Grid clipboard module\n * @hidden\n */\n function Clipboard(parent) {\n this.copyContent = '';\n this.isSelect = false;\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * @hidden\n */\n Clipboard.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.keyPressed, this.keyDownHandler, this);\n this.parent.on(events.click, this.clickHandler, this);\n EventHandler.add(this.parent.element, 'keydown', this.pasteHandler, this);\n };\n /**\n * @hidden\n */\n Clipboard.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.keyPressed, this.keyDownHandler);\n this.parent.off(events.contentReady, this.initialEnd);\n this.parent.off(events.click, this.clickHandler);\n EventHandler.remove(this.parent.element, 'keydown', this.pasteHandler);\n };\n Clipboard.prototype.clickHandler = function (e) {\n var target = e.target;\n target = parentsUntil(target, 'e-rowcell');\n };\n Clipboard.prototype.pasteHandler = function (e) {\n var _this = this;\n var grid = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (e.keyCode === 86 && (e.ctrlKey || (isMacLike && e.metaKey)) && !grid.isEdit) {\n var target = closest(document.activeElement, '.e-rowcell');\n if (!target || !grid.editSettings.allowEditing || grid.editSettings.mode !== 'Batch' ||\n grid.selectionSettings.mode !== 'Cell' || grid.selectionSettings.cellSelectionMode === 'Flow') {\n return;\n }\n this.activeElement = document.activeElement;\n this.clipBoardTextArea.value = '';\n var x_1 = window.scrollX;\n var y_1 = window.scrollY;\n this.clipBoardTextArea.focus();\n setTimeout(function () {\n _this.activeElement.focus();\n window.scrollTo(x_1, y_1);\n _this.paste(_this.clipBoardTextArea.value, _this.parent.getSelectedRowCellIndexes()[0].rowIndex, _this.parent.getSelectedRowCellIndexes()[0].cellIndexes[0]);\n }, 10);\n }\n };\n /**\n * Paste data from clipboard to selected cells.\n * @param {boolean} data - Specifies the date for paste.\n * @param {boolean} rowIndex - Specifies the row index.\n * @param {boolean} colIndex - Specifies the column index.\n */\n Clipboard.prototype.paste = function (data, rowIndex, colIndex) {\n var grid = this.parent;\n var cIdx = colIndex;\n var rIdx = rowIndex;\n var col;\n var value;\n var isAvail;\n if (!grid.editSettings.allowEditing || grid.editSettings.mode !== 'Batch' ||\n grid.selectionSettings.mode !== 'Cell' || grid.selectionSettings.cellSelectionMode === 'Flow') {\n return;\n }\n var rows = data.split('\\n');\n var cols;\n var dataRows = grid.getDataRows();\n var mRows;\n var frRows;\n var isFrozen = this.parent.isFrozenGrid();\n if (isFrozen) {\n mRows = grid.getMovableDataRows();\n if (grid.getFrozenRightColumnsCount()) {\n frRows = grid.getFrozenRightDataRows();\n }\n }\n for (var r = 0; r < rows.length; r++) {\n cols = rows[r].split('\\t');\n cIdx = colIndex;\n if ((r === rows.length - 1 && rows[r] === '') || isUndefined(grid.getRowByIndex(rIdx))) {\n cIdx++;\n break;\n }\n for (var c = 0; c < cols.length; c++) {\n isAvail = grid.getCellFromIndex(rIdx, cIdx);\n if (isFrozen) {\n var fTr = dataRows[rIdx];\n var mTr = mRows[rIdx];\n isAvail = !fTr.querySelector('[aria-colindex=\"' + cIdx + '\"]') ?\n mTr.querySelector('[aria-colindex=\"' + cIdx + '\"]') : true;\n if (frRows && !isAvail) {\n var frTr = frRows[rIdx];\n isAvail = frTr.querySelector('[aria-colindex=\"' + cIdx + '\"]');\n }\n }\n if (!isAvail) {\n cIdx++;\n break;\n }\n col = grid.getColumnByIndex(cIdx);\n value = col.getParser() ? col.getParser()(cols[c]) : cols[c];\n if (col.allowEditing && !col.isPrimaryKey && !col.template) {\n var args = {\n column: col,\n data: value,\n rowIndex: rIdx\n };\n this.parent.trigger(events.beforePaste, args);\n rIdx = args.rowIndex;\n if (!args.cancel) {\n if (grid.editModule) {\n if (col.type === 'number') {\n this.parent.editModule.updateCell(rIdx, col.field, parseFloat(args.data));\n }\n else {\n grid.editModule.updateCell(rIdx, col.field, args.data);\n }\n }\n }\n }\n cIdx++;\n }\n rIdx++;\n }\n grid.selectionModule.selectCellsByRange({ rowIndex: rowIndex, cellIndex: colIndex }, { rowIndex: rIdx - 1, cellIndex: cIdx - 1 });\n var cell = this.parent.getCellFromIndex(rIdx - 1, cIdx - 1);\n if (cell) {\n classList(cell, ['e-focus', 'e-focused'], []);\n }\n };\n Clipboard.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n this.clipBoardTextArea = this.parent.createElement('textarea', {\n className: 'e-clipboard',\n styles: 'opacity: 0',\n attrs: { tabindex: '-1', 'aria-label': 'clipboard' }\n });\n this.parent.element.appendChild(this.clipBoardTextArea);\n };\n Clipboard.prototype.keyDownHandler = function (e) {\n if (e.action === 'ctrlPlusC') {\n this.copy();\n }\n else if (e.action === 'ctrlShiftPlusH') {\n this.copy(true);\n }\n };\n Clipboard.prototype.setCopyData = function (withHeader) {\n if (window.getSelection().toString() === '') {\n var isFrozen = this.parent.isFrozenGrid();\n this.clipBoardTextArea.value = this.copyContent = '';\n var mRows = void 0;\n var frRows = void 0;\n var rows = this.parent.getRows();\n if (isFrozen) {\n mRows = this.parent.getMovableDataRows();\n if (this.parent.getFrozenMode() === 'Left-Right') {\n frRows = this.parent.getFrozenRightRows();\n }\n }\n if (this.parent.selectionSettings.mode !== 'Cell') {\n var selectedIndexes = this.parent.getSelectedRowIndexes().sort(function (a, b) { return a - b; });\n if (withHeader) {\n var headerTextArray = [];\n for (var i = 0; i < this.parent.getVisibleColumns().length; i++) {\n headerTextArray[i] = this.parent.getVisibleColumns()[i].headerText;\n }\n this.getCopyData(headerTextArray, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < selectedIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[selectedIndexes[i]].\n querySelectorAll('.e-rowcell:not(.e-hide)'));\n if (isFrozen) {\n cells.push.apply(cells, [].slice.call(mRows[selectedIndexes[i]].querySelectorAll('.e-rowcell:not(.e-hide)')));\n if (frRows) {\n cells.push.apply(cells, [].slice.call(frRows[selectedIndexes[i]].querySelectorAll('.e-rowcell:not(.e-hide)')));\n }\n }\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n var obj = this.checkBoxSelection();\n if (obj.status) {\n if (withHeader) {\n var headers = [];\n for (var i = 0; i < obj.colIndexes.length; i++) {\n headers.push(this.parent.getColumnHeaderByIndex(obj.colIndexes[i]));\n }\n this.getCopyData(headers, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < obj.rowIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[obj.rowIndexes[i]].\n querySelectorAll('.e-cellselectionbackground'));\n if (isFrozen) {\n cells.push.apply(cells, [].slice.call(mRows[obj.rowIndexes[i]]\n .querySelectorAll('.e-cellselectionbackground')));\n if (frRows) {\n cells.push.apply(cells, [].slice.call(frRows[obj.rowIndexes[i]]\n .querySelectorAll('.e-cellselectionbackground')));\n }\n }\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n this.getCopyData([].slice.call(this.parent.element.querySelectorAll('.e-cellselectionbackground')), true, '\\n', withHeader);\n }\n }\n var args = {\n data: this.copyContent,\n cancel: false,\n };\n this.parent.trigger(events.beforeCopy, args);\n if (args.cancel) {\n return;\n }\n this.clipBoardTextArea.value = this.copyContent = args.data;\n if (!Browser.userAgent.match(/ipad|ipod|iphone/i)) {\n this.clipBoardTextArea.select();\n }\n else {\n this.clipBoardTextArea.setSelectionRange(0, this.clipBoardTextArea.value.length);\n }\n this.isSelect = true;\n }\n };\n Clipboard.prototype.getCopyData = function (cells, isCell, splitKey, withHeader) {\n var isElement = typeof cells[0] !== 'string';\n for (var j = 0; j < cells.length; j++) {\n if (withHeader && isCell) {\n this.copyContent += this.parent.getColumns()[parseInt(cells[j].getAttribute('aria-colindex'), 10)].headerText + '\\n';\n }\n if (isElement) {\n if (!cells[j].classList.contains('e-hide')) {\n if (isBlazor()) {\n if ((!cells[j].classList.contains('e-gridchkbox')) &&\n Object.keys(cells[j].querySelectorAll('.e-check')).length) {\n this.copyContent += true;\n }\n else if ((!cells[j].classList.contains('e-gridchkbox')) &&\n Object.keys(cells[j].querySelectorAll('.e-uncheck')).length) {\n this.copyContent += false;\n }\n else {\n this.copyContent += cells[j].innerText;\n }\n }\n else {\n this.copyContent += cells[j].innerText;\n }\n }\n }\n else {\n this.copyContent += cells[j];\n }\n if (j < cells.length - 1) {\n this.copyContent += splitKey;\n }\n }\n };\n /**\n * Copy selected rows or cells data into clipboard.\n * @param {boolean} withHeader - Specifies whether the column header data need to be copied or not.\n */\n Clipboard.prototype.copy = function (withHeader) {\n if (document.queryCommandSupported('copy')) {\n this.setCopyData(withHeader);\n document.execCommand('copy');\n this.clipBoardTextArea.blur();\n }\n if (this.isSelect) {\n window.getSelection().removeAllRanges();\n this.isSelect = false;\n }\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Clipboard.prototype.getModuleName = function () {\n return 'clipboard';\n };\n /**\n * To destroy the clipboard\n * @return {void}\n * @hidden\n */\n Clipboard.prototype.destroy = function () {\n this.removeEventListener();\n if (this.clipBoardTextArea) {\n remove(this.clipBoardTextArea);\n }\n };\n Clipboard.prototype.checkBoxSelection = function () {\n var gridObj = this.parent;\n var obj = { status: false };\n if (gridObj.selectionSettings.mode === 'Cell') {\n var rowCellIndxes = gridObj.getSelectedRowCellIndexes();\n var str = void 0;\n var isBox = void 0;\n var rowIndexes = [];\n var i = void 0;\n for (i = 0; i < rowCellIndxes.length; i++) {\n if (rowCellIndxes[i].cellIndexes.length) {\n rowIndexes.push(rowCellIndxes[i].rowIndex);\n }\n if (rowCellIndxes[i].cellIndexes.length) {\n if (!str) {\n str = JSON.stringify(rowCellIndxes[i].cellIndexes.sort());\n }\n if (str !== JSON.stringify(rowCellIndxes[i].cellIndexes.sort())) {\n break;\n }\n }\n }\n rowIndexes.sort(function (a, b) { return a - b; });\n if (i === rowCellIndxes.length && rowIndexes[rowIndexes.length - 1] - rowIndexes[0] === rowIndexes.length - 1) {\n obj = { status: true, rowIndexes: rowIndexes, colIndexes: rowCellIndxes[0].cellIndexes };\n }\n }\n return obj;\n };\n return Clipboard;\n}());\nexport { Clipboard };\n","import { Observer, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { Row } from '../models/row';\nimport { AriaService } from '../services/aria-service';\nimport { Cell } from '../models/cell';\nimport { CellType } from '../base/enum';\nimport { DataUtil } from '@syncfusion/ej2-data';\nexport var gridObserver = new Observer();\n/**\n * BlazorAction is used for performing Blazor related Grid Actions.\n * @hidden\n */\nvar BlazorAction = /** @class */ (function () {\n function BlazorAction(parent) {\n this.aria = new AriaService();\n this.actionArgs = {};\n this.virtualHeight = 0;\n this.parent = parent;\n this.addEventListener();\n }\n BlazorAction.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('detailclick', this.onDetailRowClick, this);\n this.parent.on('add-delete-success', this.addDeleteSuccess, this);\n this.parent.on('editsuccess', this.editSuccess, this);\n this.parent.on('setvisibility', this.setColumnVisibility, this);\n this.parent.on('offset', this.setServerOffSet, this);\n this.parent.on('updateaction', this.modelChanged, this);\n this.parent.on(events.modelChanged, this.modelChanged, this);\n this.parent.on('group-expand-collapse', this.onGroupClick, this);\n this.parent.on('setcolumnstyles', this.setColVTableWidthAndTranslate, this);\n this.parent.on('refresh-virtual-indices', this.invokeServerDataBind, this);\n this.parent.on('contentcolgroup', this.contentColGroup, this);\n this.parent.on(events.dataSourceModified, this.dataSourceModified, this);\n };\n BlazorAction.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('detailclick', this.onDetailRowClick);\n this.parent.off('add-delete-success', this.addDeleteSuccess);\n this.parent.off('editsuccess', this.editSuccess);\n this.parent.off('setvisibility', this.setColumnVisibility);\n this.parent.off('offset', this.setServerOffSet);\n this.parent.off('updateaction', this.modelChanged);\n this.parent.off(events.modelChanged, this.modelChanged);\n this.parent.off('group-expand-collapse', this.onGroupClick);\n this.parent.off('setcolumnstyles', this.setColVTableWidthAndTranslate);\n this.parent.off('refresh-virtual-indices', this.invokeServerDataBind);\n this.parent.off('contentcolgroup', this.contentColGroup);\n this.parent.off(events.dataSourceModified, this.dataSourceModified);\n };\n BlazorAction.prototype.getModuleName = function () { return 'blazor'; };\n ;\n BlazorAction.prototype.modelChanged = function (args) {\n this.actionArgs = args;\n this.parent.currentAction = args;\n };\n BlazorAction.prototype.addDeleteSuccess = function (args) {\n var _this = this;\n var editArgs;\n var action = 'action';\n var data = 'data';\n var index = 'index';\n editArgs = {\n requestType: args.requestType,\n data: args[data],\n action: args[action]\n };\n if (!isNullOrUndefined(args[index])) {\n editArgs[index] = args[index];\n }\n args.promise.then(function (e) { return _this.editSuccess(editArgs); }).catch(function (e) {\n if (isBlazor() && _this.parent.isServerRendered) {\n var error = 'error';\n var message = 'message';\n if (!isNullOrUndefined(e[error]) && !isNullOrUndefined(e[error][message])) {\n e[error] = e[error][message];\n }\n }\n _this.parent.trigger(events.actionFailure, ((isBlazor() && e instanceof Array) ? e[0] : e));\n _this.parent.hideSpinner();\n _this.parent.log('actionfailure', { error: e });\n });\n };\n BlazorAction.prototype.editSuccess = function (args) {\n this.parent.renderModule.resetTemplates();\n this.invokeServerDataBind(args);\n };\n BlazorAction.prototype.invokeServerDataBind = function (args) {\n this.actionArgs = args;\n this.parent.currentAction = args;\n this.parent.allowServerDataBinding = true;\n this.parent.serverDataBind();\n this.parent.allowServerDataBinding = false;\n };\n BlazorAction.prototype.onDetailRowClick = function (target) {\n var gObj = this.parent;\n var adaptor = 'interopAdaptor';\n var rIndex = 'rowIndex';\n var invokeMethodAsync = 'invokeMethodAsync';\n var tr = target.parentElement;\n var uid = tr.getAttribute('data-uid');\n var rowObj = gObj.getRowObjectFromUID(uid);\n var args = {\n uid: uid, classList: target.classList[0], index: tr.getAttribute('aria-rowindex'),\n rowIndex: gObj.getRowsObject().indexOf(rowObj), colSpan: this.parent.getVisibleColumns().length\n };\n gObj[adaptor][invokeMethodAsync]('OnDetailClick', args);\n if (target.classList.contains('e-detailrowcollapse')) {\n var rows = gObj.getRowsObject();\n var rowData = rowObj.data;\n var gridRowId = this.parent.getRowUid('grid-row');\n var len = gObj.groupSettings.columns.length;\n var gridRow = new Row({\n isDataRow: true,\n isExpand: true,\n uid: gridRowId,\n isDetailRow: true,\n cells: [new Cell({ cellType: CellType.Indent }), new Cell({ isDataCell: true, visible: true })]\n });\n for (var i = 0; i < len; i++) {\n gridRow.cells.unshift(new Cell({ cellType: CellType.Indent }));\n }\n rows.splice(args[rIndex] + 1, 0, gridRow);\n gObj.trigger(events.detailDataBound, { data: rowData });\n gObj.notify(events.detailDataBound, { rows: gObj.getRowsObject() });\n rowObj.isExpand = true;\n this.aria.setExpand(target, true);\n }\n else {\n gObj.getRowsObject().splice(args[rIndex] + 1, 1);\n gObj.notify(events.detailDataBound, { rows: gObj.getRowsObject() });\n rowObj.isExpand = false;\n this.aria.setExpand(target, false);\n }\n };\n BlazorAction.prototype.setColumnVisibility = function (columns) {\n var visible = {};\n var adaptor = 'interopAdaptor';\n var invokeMethodAsync = 'invokeMethodAsync';\n for (var i = 0; i < columns.length; i++) {\n visible[columns[i].uid] = columns[i].visible;\n }\n this.parent[adaptor][invokeMethodAsync]('setColumnVisibility', { visible: visible });\n };\n BlazorAction.prototype.dataSuccess = function (args) {\n if (this.parent.enableVirtualization && Object.keys(this.actionArgs).length === 0) {\n this.actionArgs.requestType = 'virtualscroll';\n }\n var startIndex = 'startIndex';\n var endIndex = 'endIndex';\n this.actionArgs[startIndex] = args[startIndex];\n this.actionArgs[endIndex] = args[endIndex];\n if (this.parent.enableVirtualization) {\n this.virtualContentModule = this.parent.contentModule;\n if (this.virtualContentModule.activeKey === 'downArrow' || this.virtualContentModule.activeKey === 'upArrow') {\n var row = this.parent.getRowByIndex(this.virtualContentModule.blzRowIndex);\n if (row) {\n this.parent.selectRow(parseInt(row.getAttribute('aria-rowindex'), 10));\n // tslint:disable-next-line:no-any\n row.cells[0].focus({ preventScroll: true });\n }\n }\n this.virtualContentModule.blazorDataLoad = false;\n }\n if (args.foreignColumnsData) {\n var columns = this.parent.getColumns();\n for (var i = 0; i < columns.length; i++) {\n if (args.foreignColumnsData[columns[i].field]) {\n columns[i].columnData = args.foreignColumnsData[columns[i].field];\n }\n }\n }\n if (this.parent.allowGrouping && this.parent.groupSettings.columns) {\n var agg = [];\n var aggRows = this.parent.aggregates;\n for (var i = 0; i < aggRows.length; i++) {\n var aggRow = aggRows[i];\n for (var j = 0; j < aggRow.columns.length; j++) {\n var aggr = {};\n var type = aggRow.columns[j].type.toString();\n aggr = { type: type.toLowerCase(), field: aggRow.columns[j].field };\n agg.push(aggr);\n }\n }\n var data = void 0;\n var aggrds = void 0;\n var groupedCols = this.parent.groupSettings.columns;\n for (var k = 0; k < groupedCols.length; k++) {\n aggrds = data ? data : args.result;\n data = DataUtil.group(aggrds, groupedCols[k], agg, null, null);\n }\n args.result = data ? data : args.result;\n }\n var rowUid = 'rowUid';\n var offsetTime = 'offsetTime';\n var off = 'offset';\n this.parent[rowUid] = args[rowUid];\n args[off] = Math.sign(args[off]) === 1 ? -Math.abs(args[off]) : Math.abs(args[off]);\n this.parent[offsetTime] = args[off];\n if (this.parent[offsetTime] !== new Date().getTimezoneOffset() / 60) {\n if (this.parent.editSettings.mode !== 'Batch') {\n var action = 'action';\n var rowIndex = 'rowIndex';\n var index = 'index';\n if (this.actionArgs[action] === 'edit') {\n this.setClientOffSet(args, this.actionArgs[rowIndex]);\n }\n else if (this.actionArgs[action] === 'add') {\n this.setClientOffSet(args, this.actionArgs[index]);\n }\n }\n else if (this.parent.editSettings.mode === 'Batch') {\n var changes = 'changes';\n var changedRecords = 'changedRecords';\n var addedRecords = 'addedRecords';\n var keyField = this.parent.getPrimaryKeyFieldNames()[0];\n var batchChanges = this.actionArgs[changes] || { changedRecords: [], addedRecords: [] };\n for (var i = 0; i < batchChanges[changedRecords].length; i++) {\n for (var j = 0; j < args.result.length; j++) {\n if (batchChanges[changedRecords][i][keyField] === args.result[j][keyField]) {\n this.setClientOffSet(args, j);\n }\n }\n }\n for (var i = 0; i < batchChanges[addedRecords].length; i++) {\n for (var j = 0; j < args.result.length; j++) {\n if (batchChanges[addedRecords][i][keyField] === args.result[j][keyField]) {\n this.setClientOffSet(args, j);\n }\n }\n }\n }\n }\n this.parent.renderModule.dataManagerSuccess(args, this.actionArgs);\n this.parent.getMediaColumns();\n if (this.parent.enableVirtualization) {\n this.virtualContentModule = this.parent.contentModule;\n this.setColVTableWidthAndTranslate();\n if (this.parent.groupSettings.columns.length) {\n this.virtualContentModule.setVirtualHeight(this.virtualHeight);\n }\n }\n this.actionArgs = this.parent.currentAction = {};\n };\n BlazorAction.prototype.removeDisplayNone = function () {\n var renderedContentRows = this.parent.getContentTable().querySelectorAll('tr');\n for (var i = 0; i < renderedContentRows.length; i++) {\n var renderedContentCells = renderedContentRows[i].querySelectorAll('td');\n for (var j = 0; j < renderedContentCells.length; j++) {\n renderedContentCells[j].style.display = '';\n }\n }\n };\n BlazorAction.prototype.setVirtualTrackHeight = function (args) {\n this.virtualHeight = args.VisibleGroupedRowsCount * this.parent.getRowHeight();\n this.virtualContentModule.setVirtualHeight(this.virtualHeight);\n };\n BlazorAction.prototype.setColVTableWidthAndTranslate = function (args) {\n if (this.parent.enableColumnVirtualization && this.virtualContentModule.prevInfo &&\n (JSON.stringify(this.virtualContentModule.currentInfo.columnIndexes) !==\n JSON.stringify(this.virtualContentModule.prevInfo.columnIndexes)) || ((args && args.refresh))) {\n var translateX = this.virtualContentModule.getColumnOffset(this.virtualContentModule.startColIndex - 1);\n var width = this.virtualContentModule.getColumnOffset(this.virtualContentModule.endColIndex - 1) - translateX + '';\n this.virtualContentModule.header.virtualEle.setWrapperWidth(width);\n this.virtualContentModule.virtualEle.setWrapperWidth(width);\n this.virtualContentModule.header.virtualEle.adjustTable(translateX, 0);\n this.parent.getContentTable().parentElement.style.width = width + 'px';\n }\n if (this.dataSourceChanged) {\n this.virtualContentModule.getPanel().firstElementChild.scrollTop = 0;\n this.virtualContentModule.getPanel().firstElementChild.scrollLeft = 0;\n if (this.virtualContentModule.header.virtualEle) {\n this.virtualContentModule.header.virtualEle.adjustTable(0, 0);\n }\n this.parent.getContentTable().parentElement.style.transform = 'translate(0px,0px)';\n this.virtualContentModule.refreshOffsets();\n this.virtualContentModule.refreshVirtualElement();\n this.dataSourceChanged = false;\n }\n };\n BlazorAction.prototype.dataSourceModified = function () {\n this.dataSourceChanged = true;\n };\n BlazorAction.prototype.setClientOffSet = function (args, index) {\n var timeZone = DataUtil.serverTimezoneOffset;\n DataUtil.serverTimezoneOffset = 0;\n args.result[index] = DataUtil.parse.parseJson(JSON.stringify(args.result[index]));\n DataUtil.serverTimezoneOffset = timeZone;\n };\n BlazorAction.prototype.setServerOffSet = function (args) {\n var serverTimeZone = DataUtil.serverTimezoneOffset;\n var offsetTime = 'offsetTime';\n var data = 'data';\n var timeZone = new Date().getTimezoneOffset() / 60 * 2 + this.parent[offsetTime];\n DataUtil.serverTimezoneOffset = timeZone;\n args[data] = DataUtil.parse.parseJson(JSON.stringify(args[data]));\n DataUtil.serverTimezoneOffset = serverTimeZone;\n };\n BlazorAction.prototype.onGroupClick = function (args) {\n var _this = this;\n var adaptor = 'interopAdaptor';\n var content = 'contentModule';\n var invokeMethodAsync = 'invokeMethodAsync';\n var exactTopIndex = 'exactTopIndex';\n args[exactTopIndex] = Math.round((this.parent.element.querySelector('.e-content').scrollTop) / this.parent.getRowHeight());\n var rowHeight = 'rowHeight';\n args[rowHeight] = this.parent.getRowHeight();\n this.parent[adaptor][invokeMethodAsync]('OnGroupExpandClick', args).then(function () {\n _this.parent[content].rowElements = [].slice.call(_this.parent.getContentTable().querySelectorAll('tr.e-row[data-uid]'));\n });\n };\n BlazorAction.prototype.setPersistData = function (args) {\n var gObj = this.parent;\n gObj.mergePersistGridData(args);\n var bulkChanges = 'bulkChanges';\n if (gObj[bulkChanges].columns) {\n delete gObj[bulkChanges].columns;\n }\n gObj.headerModule.refreshUI();\n gObj.notify('persist-data-changed', {});\n gObj.notify(events.columnVisibilityChanged, gObj.getColumns());\n };\n ;\n BlazorAction.prototype.resetPersistData = function (args) {\n var gObj = this.parent;\n var bulkChanges = 'bulkChanges';\n var parseArgs = JSON.parse(args);\n var persistArgs = { filterSettings: parseArgs.filterSettings,\n groupSettings: parseArgs.groupSettings, pageSettings: parseArgs.pageSettings, sortSettings: parseArgs.sortSettings,\n searchSettings: parseArgs.searchSettings, columns: parseArgs.columns };\n if (!persistArgs.sortSettings.columns) {\n persistArgs.sortSettings.columns = [];\n }\n if (!persistArgs.groupSettings.columns) {\n persistArgs.groupSettings.columns = [];\n }\n if (!persistArgs.pageSettings.currentPage) {\n gObj.pageSettings.currentPage = 1;\n }\n for (var i = 0; i < gObj.columns.length; i++) {\n if (gObj.groupSettings.columns.indexOf(gObj.columns[i].field) > -1) {\n gObj.columns[i].visible = true;\n }\n }\n gObj.mergePersistGridData(persistArgs);\n gObj.notify('persist-data-changed', {});\n if (gObj[bulkChanges].columns) {\n delete gObj[bulkChanges].columns;\n }\n gObj.headerModule.refreshUI();\n for (var i = 0; i < gObj.columns.length; i++) {\n gObj.columns[i].editType = gObj.columns[i].editType.toLowerCase();\n }\n gObj.setProperties({ filterSettings: { columns: [] } }, true);\n };\n BlazorAction.prototype.contentColGroup = function () {\n var gObj = this.parent;\n var contentTable = gObj.getContent().querySelector('.e-table');\n contentTable.insertBefore(contentTable.querySelector(\"#content-\" + gObj.element.id + \"colGroup\"), contentTable.querySelector('tbody'));\n if (gObj.frozenRows) {\n var headerTable = gObj.getHeaderContent().querySelector('.e-table');\n headerTable.insertBefore(headerTable.querySelector(\"#\" + gObj.element.id + \"colGroup\"), headerTable.querySelector('tbody'));\n }\n if (gObj.getFrozenColumns() !== 0) {\n var movableContentTable = gObj.getContent().querySelector('.e-movablecontent').querySelector('.e-table');\n movableContentTable.insertBefore(movableContentTable.querySelector(\"#\" + gObj.element.id + \"colGroup\"), movableContentTable.querySelector('tbody'));\n if (gObj.frozenRows) {\n var movableHeaderTable = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('.e-table');\n movableHeaderTable.insertBefore(movableHeaderTable.querySelector(\"#\" + gObj.element.id + \"colGroup\"), movableHeaderTable.querySelector('tbody'));\n }\n }\n };\n BlazorAction.prototype.dataFailure = function (args) {\n this.parent.renderModule.dataManagerFailure(args, this.actionArgs);\n this.actionArgs = this.parent.currentAction = {};\n };\n BlazorAction.prototype.destroy = function () {\n this.removeEventListener();\n };\n return BlazorAction;\n}());\nexport { BlazorAction };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, setValue, getValue, isBlazor, blazorTemplates } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, append, remove, updateBlazorTemplate, classList, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { Property, Collection, Complex, Event, NotifyPropertyChanges, L10n } from '@syncfusion/ej2-base';\nimport { EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { DataManager, DataUtil, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';\nimport { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, isGroupAdaptive, refreshForeignData } from './util';\nimport { getRowHeight, setColumnIndex, Global, ispercentageWidth, renderMovable, getNumberFormat } from './util';\nimport { setRowElements, resetRowIndex, compareChanges, getCellByColAndRowIndex, performComplexDataOperation } from './util';\nimport * as events from '../base/constant';\nimport { Render } from '../renderer/render';\nimport { RenderType } from './enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { CellRendererFactory } from '../services/cell-render-factory';\nimport { ServiceLocator } from '../services/service-locator';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RendererFactory } from '../services/renderer-factory';\nimport { ColumnWidthService } from '../services/width-controller';\nimport { AriaService } from '../services/aria-service';\nimport { FocusStrategy } from '../services/focus-strategy';\nimport { PageSettings } from '../models/page-settings';\nimport { ColumnChooserSettings } from '../models/column-chooser-settings';\nimport { Selection } from '../actions/selection';\nimport { Search } from '../actions/search';\nimport { ShowHide } from '../actions/show-hide';\nimport { Scroll } from '../actions/scroll';\nimport { Print } from '../actions/print';\nimport { AggregateRow } from '../models/aggregate';\nimport { Clipboard } from '../actions/clipboard';\nimport { gridObserver } from '../actions/blazor-action';\nimport { RowModelGenerator } from '../services/row-model-generator';\n/**\n * Represents the field name and direction of sort column.\n */\nvar SortDescriptor = /** @class */ (function (_super) {\n __extends(SortDescriptor, _super);\n function SortDescriptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"direction\", void 0);\n __decorate([\n Property(false)\n ], SortDescriptor.prototype, \"isFromGroup\", void 0);\n return SortDescriptor;\n}(ChildProperty));\nexport { SortDescriptor };\n/**\n * Configures the sorting behavior of Grid.\n */\nvar SortSettings = /** @class */ (function (_super) {\n __extends(SortSettings, _super);\n function SortSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], SortDescriptor)\n ], SortSettings.prototype, \"columns\", void 0);\n __decorate([\n Property(true)\n ], SortSettings.prototype, \"allowUnsort\", void 0);\n return SortSettings;\n}(ChildProperty));\nexport { SortSettings };\n/**\n * Represents the predicate for the filter column.\n */\nvar Predicate = /** @class */ (function (_super) {\n __extends(Predicate, _super);\n function Predicate() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Predicate.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"operator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"matchCase\", void 0);\n __decorate([\n Property(false)\n ], Predicate.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"predicate\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualFilterValue\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualOperator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"ejpredicate\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"uid\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"isForeignKey\", void 0);\n return Predicate;\n}(ChildProperty));\nexport { Predicate };\n/**\n * Configures the infinite scroll behavior of Grid.\n */\nvar InfiniteScrollSettings = /** @class */ (function (_super) {\n __extends(InfiniteScrollSettings, _super);\n function InfiniteScrollSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], InfiniteScrollSettings.prototype, \"enableCache\", void 0);\n __decorate([\n Property(3)\n ], InfiniteScrollSettings.prototype, \"maxBlocks\", void 0);\n __decorate([\n Property(3)\n ], InfiniteScrollSettings.prototype, \"initialBlocks\", void 0);\n return InfiniteScrollSettings;\n}(ChildProperty));\nexport { InfiniteScrollSettings };\n/**\n * Configures the filtering behavior of the Grid.\n */\nvar FilterSettings = /** @class */ (function (_super) {\n __extends(FilterSettings, _super);\n function FilterSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], Predicate)\n ], FilterSettings.prototype, \"columns\", void 0);\n __decorate([\n Property('FilterBar')\n ], FilterSettings.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], FilterSettings.prototype, \"showFilterBarStatus\", void 0);\n __decorate([\n Property(1500)\n ], FilterSettings.prototype, \"immediateModeDelay\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"operators\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"enableCaseSensitivity\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"showFilterBarOperator\", void 0);\n return FilterSettings;\n}(ChildProperty));\nexport { FilterSettings };\n/**\n * Configures the selection behavior of the Grid.\n */\nvar SelectionSettings = /** @class */ (function (_super) {\n __extends(SelectionSettings, _super);\n function SelectionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Row')\n ], SelectionSettings.prototype, \"mode\", void 0);\n __decorate([\n Property('Flow')\n ], SelectionSettings.prototype, \"cellSelectionMode\", void 0);\n __decorate([\n Property('Single')\n ], SelectionSettings.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"checkboxOnly\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"persistSelection\", void 0);\n __decorate([\n Property('Default')\n ], SelectionSettings.prototype, \"checkboxMode\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"enableSimpleMultiRowSelection\", void 0);\n __decorate([\n Property(true)\n ], SelectionSettings.prototype, \"enableToggle\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"allowColumnSelection\", void 0);\n return SelectionSettings;\n}(ChildProperty));\nexport { SelectionSettings };\n/**\n * Configures the search behavior of the Grid.\n */\nvar SearchSettings = /** @class */ (function (_super) {\n __extends(SearchSettings, _super);\n function SearchSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property([])\n ], SearchSettings.prototype, \"fields\", void 0);\n __decorate([\n Property('')\n ], SearchSettings.prototype, \"key\", void 0);\n __decorate([\n Property('contains')\n ], SearchSettings.prototype, \"operator\", void 0);\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], SearchSettings.prototype, \"ignoreAccent\", void 0);\n return SearchSettings;\n}(ChildProperty));\nexport { SearchSettings };\n/**\n * Configures the row drop settings of the Grid.\n */\nvar RowDropSettings = /** @class */ (function (_super) {\n __extends(RowDropSettings, _super);\n function RowDropSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], RowDropSettings.prototype, \"targetID\", void 0);\n return RowDropSettings;\n}(ChildProperty));\nexport { RowDropSettings };\n/**\n * Configures the text wrap settings of the Grid.\n */\nvar TextWrapSettings = /** @class */ (function (_super) {\n __extends(TextWrapSettings, _super);\n function TextWrapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Both')\n ], TextWrapSettings.prototype, \"wrapMode\", void 0);\n return TextWrapSettings;\n}(ChildProperty));\nexport { TextWrapSettings };\n/**\n * Configures the resize behavior of the Grid.\n */\nvar ResizeSettings = /** @class */ (function (_super) {\n __extends(ResizeSettings, _super);\n function ResizeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Normal')\n ], ResizeSettings.prototype, \"mode\", void 0);\n return ResizeSettings;\n}(ChildProperty));\nexport { ResizeSettings };\n/**\n * Configures the group behavior of the Grid.\n */\nvar GroupSettings = /** @class */ (function (_super) {\n __extends(GroupSettings, _super);\n function GroupSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showDropArea\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"allowReordering\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showToggleButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showGroupedColumn\", void 0);\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showUngroupButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"disablePageWiseAggregates\", void 0);\n __decorate([\n Property([])\n ], GroupSettings.prototype, \"columns\", void 0);\n __decorate([\n Property()\n ], GroupSettings.prototype, \"captionTemplate\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"enableLazyLoading\", void 0);\n return GroupSettings;\n}(ChildProperty));\nexport { GroupSettings };\n/**\n * Configures the edit behavior of the Grid.\n */\nvar EditSettings = /** @class */ (function (_super) {\n __extends(EditSettings, _super);\n function EditSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowAdding\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowDeleting\", void 0);\n __decorate([\n Property('Normal')\n ], EditSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"allowEditOnDblClick\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"showConfirmDialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"showDeleteConfirmDialog\", void 0);\n __decorate([\n Property('')\n ], EditSettings.prototype, \"template\", void 0);\n __decorate([\n Property('')\n ], EditSettings.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property('')\n ], EditSettings.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property('Top')\n ], EditSettings.prototype, \"newRowPosition\", void 0);\n __decorate([\n Property({})\n ], EditSettings.prototype, \"dialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowNextRowEdit\", void 0);\n return EditSettings;\n}(ChildProperty));\nexport { EditSettings };\n/**\n * Represents the Grid component.\n * ```html\n * \n * \n * ```\n */\nvar Grid = /** @class */ (function (_super) {\n __extends(Grid, _super);\n /**\n * Constructor for creating the component\n * @hidden\n */\n function Grid(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPreventScrollEvent = false;\n _this.inViewIndexes = [];\n _this.keyA = false;\n _this.frozenRightCount = 0;\n _this.frozenLeftCount = 0;\n _this.tablesCount = 1;\n _this.movableCount = 0;\n _this.visibleFrozenLeft = 0;\n _this.visibleFrozenRight = 0;\n _this.visibleMovable = 0;\n _this.frozenLeftColumns = [];\n _this.frozenRightColumns = [];\n _this.movableColumns = [];\n _this.media = {};\n _this.isFreezeRefresh = false;\n /** @hidden */\n _this.tableIndex = 0;\n _this.componentRefresh = Component.prototype.refresh;\n /** @hidden */\n _this.isVirtualAdaptive = false;\n /** @hidden */\n _this.vRows = [];\n /** @hidden */\n _this.vcRows = [];\n /** @hidden */\n _this.vGroupOffsets = {};\n /** @hidden */\n _this.rowUid = 0;\n /**\n * Gets the currently visible records of the Grid.\n */\n _this.currentViewData = [];\n /** @hidden */\n _this.lockcolPositionCount = 0;\n /** @hidden */\n _this.prevPageMoving = false;\n /** @hidden */\n _this.pageTemplateChange = false;\n /** @hidden */\n _this.isAutoGen = false;\n _this.mediaBindInstance = {};\n /** @hidden */\n _this.commandDelIndex = undefined;\n /** @hidden */\n _this.asyncTimeOut = 50;\n // enable/disable logger for MVC & Core\n _this.enableLogger = true;\n _this.needsID = true;\n Grid_1.Inject(Selection);\n setValue('mergePersistData', _this.mergePersistGridData, _this);\n return _this;\n }\n Grid_1 = Grid;\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n */\n Grid.prototype.getPersistData = function () {\n var keyEntity = ['pageSettings', 'sortSettings',\n 'filterSettings', 'groupSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'scrollPosition'];\n var ignoreOnPersist = {\n pageSettings: ['template', 'pageSizes', 'enableQueryString', 'totalRecordsCount', 'pageCount'],\n filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent'],\n groupSettings: ['showDropArea', 'showToggleButton', 'showGroupedColumn', 'showUngroupButton',\n 'disablePageWiseAggregates', 'hideCaptionCount'],\n searchSettings: ['fields', 'operator', 'ignoreCase'],\n sortSettings: [], columns: [], selectedRowIndex: [], scrollPosition: []\n };\n var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',\n 'commandTemplate', 'commands', 'dataSource', 'headerText'];\n for (var i = 0; i < keyEntity.length; i++) {\n var currentObject = this[keyEntity[i]];\n for (var _i = 0, _a = ignoreOnPersist[keyEntity[i]]; _i < _a.length; _i++) {\n var val = _a[_i];\n delete currentObject[val];\n }\n }\n this.pageSettings.template = undefined;\n /* tslint:disable-next-line:no-any */\n if (this.isAngular) {\n /* tslint:disable:no-string-literal */\n delete this.groupSettings['properties']['captionTemplate'];\n }\n this.pageTemplateChange = !isNullOrUndefined(this.pagerTemplate);\n return this.addOnPersist(keyEntity);\n };\n /**\n * To provide the array of modules needed for component rendering\n * @return {ModuleDeclaration[]}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Grid.prototype.requiredModules = function () {\n this.setFrozenCount();\n var modules = [];\n if (this.isDestroyed) {\n return modules;\n }\n if (this.allowFiltering) {\n modules.push({\n member: 'filter',\n args: [this, this.filterSettings, this.serviceLocator]\n });\n }\n if (this.allowExcelExport) {\n modules.push({\n member: 'ExcelExport',\n args: [this, this.serviceLocator]\n });\n }\n if (this.allowPdfExport) {\n modules.push({\n member: 'PdfExport',\n args: [this]\n });\n }\n if (this.allowSorting) {\n modules.push({\n member: 'sort',\n args: [this, this.sortSettings, this.sortedColumns, this.serviceLocator]\n });\n }\n if (this.allowPaging) {\n modules.push({\n member: 'pager',\n args: [this, this.pageSettings]\n });\n }\n if (this.allowSelection) {\n modules.push({\n member: 'selection',\n args: [this, this.selectionSettings, this.serviceLocator]\n });\n }\n modules.push({\n member: 'resize',\n args: [this]\n });\n if (this.allowReordering) {\n modules.push({\n member: 'reorder',\n args: [this]\n });\n }\n if (this.allowRowDragAndDrop) {\n modules.push({\n member: 'rowDragAndDrop',\n args: [this]\n });\n }\n if (this.allowGrouping) {\n modules.push({\n member: 'group',\n args: [this, this.groupSettings, this.sortedColumns, this.serviceLocator]\n });\n }\n if (this.aggregates.length) {\n modules.push({ member: 'aggregate', args: [this, this.serviceLocator] });\n }\n if (this.isDetail()) {\n modules.push({\n member: 'detailRow',\n args: [this, this.serviceLocator]\n });\n }\n if (this.toolbar || this.toolbarTemplate) {\n modules.push({\n member: 'toolbar',\n args: [this, this.serviceLocator]\n });\n }\n if (this.enableVirtualization || this.enableColumnVirtualization) {\n modules.push({\n member: 'virtualscroll',\n args: [this, this.serviceLocator]\n });\n }\n if (this.getFrozenColumns() || this.frozenRows || this.frozenRightCount || this.frozenLeftCount) {\n modules.push({ member: 'freeze', args: [this, this.serviceLocator] });\n }\n if (this.isCommandColumn(this.columns)) {\n modules.push({\n member: 'commandColumn',\n args: [this, this.serviceLocator]\n });\n }\n if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {\n modules.push({\n member: 'edit',\n args: [this, this.serviceLocator]\n });\n }\n this.extendRequiredModules(modules);\n return modules;\n };\n Grid.prototype.extendRequiredModules = function (modules) {\n if (this.enableInfiniteScrolling) {\n modules.push({\n member: 'infiniteScroll',\n args: [this, this.serviceLocator]\n });\n }\n if (this.groupSettings.enableLazyLoading) {\n modules.push({\n member: 'lazyLoadGroup',\n args: [this, this.serviceLocator]\n });\n }\n if (this.contextMenuItems) {\n modules.push({\n member: 'contextMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.showColumnMenu) {\n modules.push({\n member: 'columnMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.showColumnChooser) {\n modules.push({\n member: 'columnChooser',\n args: [this, this.serviceLocator]\n });\n }\n if (this.isForeignKeyEnabled(this.columns)) {\n modules.push({ member: 'foreignKey', args: [this, this.serviceLocator] });\n }\n if (this.enableLogger) {\n modules.push({ member: 'logger', args: [this] });\n }\n if (isBlazor()) {\n modules.push({ member: 'blazor', args: [this] });\n }\n };\n /**\n * For internal use only - Initialize the event handler;\n * @private\n */\n Grid.prototype.preRender = function () {\n this.serviceLocator = new ServiceLocator;\n this.initProperties();\n this.initializeServices();\n };\n Grid.prototype.initProperties = function () {\n /* tslint:disable */\n this.isInitial = true;\n this.sortedColumns = [];\n this.inViewIndexes = [];\n this.mediaCol = [];\n this.isInitialLoad = false;\n this.allowServerDataBinding = false;\n this.ignoreCollectionWatch = true;\n if (isBlazor() && this.enableVirtualization && this.allowGrouping) {\n var isExpanded = 'isExpanded';\n this[isExpanded] = false;\n }\n this.mergeCells = {};\n this.isEdit = false;\n this.checkAllRows = 'None';\n this.isCheckBoxSelection = false;\n this.isPersistSelection = false;\n this.componentRefresh = Component.prototype.refresh;\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith'\n };\n this.defaultLocale = {\n EmptyRecord: 'No records to display',\n True: 'true',\n False: 'false',\n InvalidFilterMessage: 'Invalid Filter Data',\n GroupDropArea: 'Drag a column header here to group its column',\n UnGroup: 'Click here to ungroup',\n UnGroupButton: 'Click here to ungroup',\n GroupDisable: 'Grouping is disabled for this column',\n FilterbarTitle: '\\'s filter bar cell',\n EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',\n // Toolbar Items\n Add: 'Add',\n Edit: 'Edit',\n Cancel: 'Cancel',\n Update: 'Update',\n Delete: 'Delete',\n Print: 'Print',\n Pdfexport: 'PDF Export',\n Excelexport: 'Excel Export',\n Wordexport: 'Word Export',\n Csvexport: 'CSV Export',\n Search: 'Search',\n Columnchooser: 'Columns',\n Save: 'Save',\n Item: 'item',\n Items: 'items',\n EditOperationAlert: 'No records selected for edit operation',\n DeleteOperationAlert: 'No records selected for delete operation',\n SaveButton: 'Save',\n OKButton: 'OK',\n CancelButton: 'Cancel',\n EditFormTitle: 'Details of ',\n AddFormTitle: 'Add New Record',\n BatchSaveConfirm: 'Are you sure you want to save changes?',\n BatchSaveLostChanges: 'Unsaved changes will be lost. Are you sure you want to continue?',\n ConfirmDelete: 'Are you sure you want to Delete Record?',\n CancelEdit: 'Are you sure you want to Cancel the changes?',\n ChooseColumns: 'Choose Column',\n SearchColumns: 'search columns',\n Matchs: 'No Matches Found',\n FilterButton: 'Filter',\n ClearButton: 'Clear',\n StartsWith: 'Starts With',\n EndsWith: 'Ends With',\n Contains: 'Contains',\n Equal: 'Equal',\n NotEqual: 'Not Equal',\n LessThan: 'Less Than',\n LessThanOrEqual: 'Less Than Or Equal',\n GreaterThan: 'Greater Than',\n GreaterThanOrEqual: 'Greater Than Or Equal',\n ChooseDate: 'Choose a Date',\n EnterValue: 'Enter the value',\n Copy: 'Copy',\n Group: 'Group by this column',\n Ungroup: 'Ungroup by this column',\n autoFitAll: 'Autofit all columns',\n autoFit: 'Autofit this column',\n AutoFitAll: 'Autofit all columns',\n AutoFit: 'Autofit this column',\n Export: 'Export',\n FirstPage: 'First Page',\n LastPage: 'Last Page',\n PreviousPage: 'Previous Page',\n NextPage: 'Next Page',\n SortAscending: 'Sort Ascending',\n SortDescending: 'Sort Descending',\n EditRecord: 'Edit Record',\n DeleteRecord: 'Delete Record',\n FilterMenu: 'Filter',\n SelectAll: 'Select All',\n Blanks: 'Blanks',\n FilterTrue: 'True',\n FilterFalse: 'False',\n NoResult: 'No Matches Found',\n ClearFilter: 'Clear Filter',\n Clear: 'Clear',\n NumberFilter: 'Number Filters',\n TextFilter: 'Text Filters',\n DateFilter: 'Date Filters',\n DateTimeFilter: 'DateTime Filters',\n MatchCase: 'Match Case',\n Between: 'Between',\n CustomFilter: 'Custom Filter',\n CustomFilterPlaceHolder: 'Enter the value',\n CustomFilterDatePlaceHolder: 'Choose a date',\n AND: 'AND',\n OR: 'OR',\n ShowRowsWhere: 'Show rows where:',\n FilterMenuDialogARIA: 'Filter menu dialog',\n ExcelFilterDialogARIA: 'Excel filter dialog',\n DialogEditARIA: 'Edit dialog',\n ColumnChooserDialogARIA: 'Column chooser dialog',\n ColumnMenuDialogARIA: 'Column menu dialog',\n CustomFilterDialogARIA: 'Customer filter dialog',\n SortAtoZ: 'Sort A to Z',\n SortZtoA: 'Sort Z to A',\n SortByOldest: 'Sort by Oldest',\n SortByNewest: 'Sort by Newest',\n SortSmallestToLargest: 'Sort Smallest to Largest',\n SortLargestToSmallest: 'Sort Largest to Smallest',\n Sort: 'Sort'\n };\n this.keyConfigs = {\n downArrow: 'downarrow',\n upArrow: 'uparrow',\n rightArrow: 'rightarrow',\n leftArrow: 'leftarrow',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftRight: 'shift+rightarrow',\n shiftLeft: 'shift+leftarrow',\n home: 'home',\n end: 'end',\n escape: 'escape',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n ctrlAltPageUp: 'ctrl+alt+pageup',\n ctrlAltPageDown: 'ctrl+alt+pagedown',\n altPageUp: 'alt+pageup',\n altPageDown: 'alt+pagedown',\n altDownArrow: 'alt+downarrow',\n altUpArrow: 'alt+uparrow',\n ctrlDownArrow: 'ctrl+downarrow',\n ctrlUpArrow: 'ctrl+uparrow',\n ctrlPlusA: 'ctrl+A',\n ctrlPlusP: 'ctrl+P',\n insert: 'insert',\n delete: 'delete',\n f2: 'f2',\n enter: 'enter',\n ctrlEnter: 'ctrl+enter',\n shiftEnter: 'shift+enter',\n tab: 'tab',\n shiftTab: 'shift+tab',\n space: 'space',\n ctrlPlusC: 'ctrl+C',\n ctrlShiftPlusH: 'ctrl+shift+H',\n ctrlSpace: 'ctrl+space',\n ctrlLeftArrow: 'ctrl+leftarrow',\n ctrlRightArrow: 'ctrl+rightarrow'\n };\n /* tslint:enable */\n };\n /**\n * For internal use only - To Initialize the component rendering.\n * @private\n */\n Grid.prototype.render = function () {\n this.log(['module_missing', 'promise_enabled', 'locale_missing', 'check_datasource_columns']);\n this.ariaService.setOptions(this.element, { role: 'grid' });\n if (isBlazor()) {\n this.renderComplete();\n }\n createSpinner({ target: this.element }, this.createElement);\n this.renderModule = new Render(this, this.serviceLocator);\n this.searchModule = new Search(this);\n this.scrollModule = new Scroll(this);\n this.notify(events.initialLoad, {});\n if (this.getDataModule().dataManager.dataSource.offline === true || this.getDataModule().dataManager.dataSource.url === undefined) {\n this.isVirtualAdaptive = true;\n }\n this.trigger(events.load);\n prepareColumns(this.columns, this.enableColumnVirtualization, this);\n if (this.enablePersistence) {\n this.notify(events.columnsPrepared, {});\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.getMediaColumns();\n setColumnIndex(this.columns);\n }\n this.checkLockColumns(this.columns);\n this.getColumns();\n this.processModel();\n this.gridRender();\n this.wireEvents();\n this.addListener();\n this.updateDefaultCursor();\n this.updateStackedFilter();\n this.showSpinner();\n this.notify(events.initialEnd, {});\n if (isBlazor() && this.isServerRendered) {\n gridObserver.notify(events.componentRendered, { id: this.element.id, grid: this });\n }\n };\n /**\n * By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.\n */\n Grid.prototype.showSpinner = function () {\n showSpinner(this.element);\n };\n /**\n * Manually showed spinner needs to hide by `hideSpinnner`.\n */\n Grid.prototype.hideSpinner = function () {\n hideSpinner(this.element);\n };\n Grid.prototype.updateStackedFilter = function () {\n if (this.allowFiltering && this.filterSettings.type === 'FilterBar' &&\n this.getHeaderContent().querySelectorAll('.e-stackedheadercell').length) {\n this.getHeaderContent().classList.add('e-stackedfilter');\n }\n else {\n this.getHeaderContent().classList.remove('e-stackedfilter');\n }\n };\n Grid.prototype.getMediaColumns = function () {\n if (!this.enableColumnVirtualization) {\n var gcol = this.getColumns();\n this.getShowHideService = this.serviceLocator.getService('showHideService');\n if (!isNullOrUndefined(gcol)) {\n for (var index = 0; index < gcol.length; index++) {\n if (!isNullOrUndefined(gcol[index].hideAtMedia) && (isNullOrUndefined(gcol[index].visible) || gcol[index].visible)) {\n this.pushMediaColumn(gcol[index], index);\n }\n }\n }\n }\n };\n Grid.prototype.pushMediaColumn = function (col, index) {\n this.mediaCol.push(col);\n this.media[col.uid] = window.matchMedia(col.hideAtMedia);\n this.mediaQueryUpdate(index, this.media[col.uid]);\n this.mediaBindInstance[index] = this.mediaQueryUpdate.bind(this, index);\n this.media[col.uid].addListener(this.mediaBindInstance[index]);\n };\n /**\n * @hidden\n */\n Grid.prototype.updateMediaColumns = function (col) {\n if (!this.enableColumnVirtualization) {\n var index = this.getColumnIndexByUid(col.uid);\n for (var i = 0; i < this.mediaCol.length; i++) {\n if (col.uid === this.mediaCol[i].uid) {\n this.mediaCol.splice(i, 1);\n return;\n }\n }\n this.pushMediaColumn(col, index);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.mediaQueryUpdate = function (columnIndex, e) {\n var col = this.getColumns()[columnIndex];\n if (this.mediaCol.some(function (mediaColumn) { return mediaColumn.uid === col.uid; })) {\n col.visible = e.matches;\n if (this.isInitialLoad) {\n this.invokedFromMedia = true;\n if (col.visible) {\n this.showHider.show(col.headerText, 'headerText');\n }\n else {\n this.showHider.hide(col.headerText, 'headerText');\n }\n }\n }\n };\n Grid.prototype.refreshMediaCol = function () {\n this.isInitialLoad = true;\n var footerContent = this.element.querySelector('.e-gridfooter');\n if (this.aggregates.length && this.element.scrollHeight > this.height && footerContent) {\n addClass([footerContent], ['e-footerpadding']);\n }\n var checkboxColumn = this.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length && this.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n this.isCheckBoxSelection = false;\n }\n if (this.rowRenderingMode === 'Vertical') {\n if (this.enableHover) {\n this.setProperties({ enableAdaptiveUI: true, enableHover: false }, true);\n removeClass([this.element], 'e-gridhover');\n }\n }\n };\n Grid.prototype.removeMediaListener = function () {\n for (var i = 0; i < this.mediaCol.length; i++) {\n this.media[this.mediaCol[i].uid].removeListener(this.mediaBindInstance[this.mediaCol[i].index]);\n }\n };\n /**\n * For internal use only - Initialize the event handler\n * @private\n */\n Grid.prototype.eventInitializer = function () {\n //eventInitializer\n };\n /**\n * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).\n * @method destroy\n * @return {void}\n */\n Grid.prototype.destroy = function () {\n var gridElement = this.element;\n if (!gridElement) {\n return;\n }\n var hasGridChild = gridElement.querySelector('.e-gridheader') &&\n gridElement.querySelector('.e-gridcontent') ? true : false;\n if (hasGridChild) {\n this.unwireEvents();\n }\n this.removeListener();\n this.removeMediaListener();\n this.notify(events.destroy, {});\n this.destroyDependentModules();\n if (hasGridChild) {\n _super.prototype.destroy.call(this);\n }\n this.toolTipObj.destroy();\n var modules = ['renderModule', 'headerModule', 'contentModule', 'valueFormatterService',\n 'serviceLocator', 'ariaService', 'keyboardModule', 'widthService', 'searchModule', 'showHider',\n 'scrollModule', 'printModule', 'clipboardModule', 'focusModule'];\n for (var i = 0; i < modules.length; i++) {\n if (this[modules[i]]) {\n this[modules[i]] = null;\n }\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.element.innerHTML = '';\n }\n else {\n this.element.style.display = 'none';\n }\n classList(this.element, [], ['e-rtl', 'e-gridhover', 'e-responsive', 'e-default', 'e-device', 'e-grid-min-height']);\n if (this.isAngular && !this.isFreezeRefresh) {\n this.element = null;\n }\n this.isFreezeRefresh = false;\n };\n Grid.prototype.destroyDependentModules = function () {\n var gridElement = this.element;\n if (!gridElement || (!gridElement.querySelector('.e-gridheader') && !gridElement.querySelector('.e-gridcontent'))) {\n return;\n }\n this.scrollModule.destroy();\n this.keyboardModule.destroy();\n this.focusModule.destroy();\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Grid.prototype.getModuleName = function () {\n return 'grid';\n };\n Grid.prototype.enableBoxSelection = function () {\n if (this.enableAutoFill) {\n this.selectionSettings.cellSelectionMode = 'BoxWithBorder';\n this.element.classList.add('e-afenabled');\n }\n else {\n this.element.classList.remove('e-afenabled');\n }\n };\n /**\n * Called internally if any of the property value changed.\n * @hidden\n */\n /* tslint:disable-next-line:max-line-length */\n // tslint:disable-next-line:max-func-body-length\n Grid.prototype.onPropertyChanged = function (newProp, oldProp) {\n var requireRefresh = false;\n var requireGridRefresh = false;\n var freezeRefresh = false;\n var checkCursor;\n var args = { requestType: 'refresh' };\n if (this.isDestroyed) {\n return;\n }\n this.log('module_missing');\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n var properties = Object.keys(newProp);\n if (properties.indexOf('columns') > -1) {\n this.updateColumnObject();\n requireGridRefresh = true;\n }\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var prop = properties_1[_i];\n switch (prop) {\n case 'allowPaging':\n this.notify(events.uiUpdate, { module: 'pager', enable: this.allowPaging });\n requireRefresh = true;\n break;\n case 'pageSettings':\n if (this.pageTemplateChange) {\n this.pageTemplateChange = false;\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n break;\n }\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n if (isNullOrUndefined(newProp.pageSettings.currentPage) && isNullOrUndefined(newProp.pageSettings.pageSize)\n && isNullOrUndefined(newProp.pageSettings.totalRecordsCount)\n || !isNullOrUndefined(oldProp.pageSettings) &&\n ((newProp.pageSettings.currentPage !== oldProp.pageSettings.currentPage)\n && !this.enableColumnVirtualization && !this.enableVirtualization\n && this.pageSettings.totalRecordsCount <= this.pageSettings.pageSize)) {\n requireRefresh = true;\n }\n break;\n case 'allowSorting':\n this.notify(events.uiUpdate, { module: 'sort', enable: this.allowSorting });\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'allowFiltering':\n this.updateStackedFilter();\n this.notify(events.uiUpdate, { module: 'filter', enable: this.allowFiltering });\n requireRefresh = true;\n if (this.filterSettings.type !== 'FilterBar') {\n this.refreshHeader();\n }\n break;\n case 'height':\n case 'width':\n this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });\n break;\n case 'allowReordering':\n this.headerModule.refreshUI();\n checkCursor = true;\n break;\n case 'allowRowDragAndDrop':\n this.notify(events.uiUpdate, { module: 'rowDragAndDrop', enable: this.allowRowDragAndDrop });\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'allowSelection':\n this.notify(events.uiUpdate, { module: 'selection', enable: this.allowSelection });\n break;\n case 'enableAutoFill':\n if (this.selectionModule) {\n this.enableBoxSelection();\n this.selectionModule.updateAutoFillPosition();\n }\n break;\n case 'rowTemplate':\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n requireRefresh = true;\n break;\n case 'detailTemplate':\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n requireRefresh = true;\n break;\n case 'allowGrouping':\n this.notify(events.uiUpdate, { module: 'group', enable: this.allowGrouping });\n this.headerModule.refreshUI();\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'enableInfiniteScrolling':\n case 'childGrid':\n requireRefresh = true;\n break;\n case 'toolbar':\n this.notify(events.uiUpdate, { module: 'toolbar' });\n break;\n case 'groupSettings':\n this.notify(events.inBoundModelChanged, {\n module: 'group', properties: newProp.groupSettings,\n oldProperties: oldProp.groupSettings\n });\n break;\n case 'aggregates':\n if (!this.aggregates.length && this.allowGrouping && this.groupSettings.columns.length) {\n requireRefresh = true;\n }\n this.notify(events.uiUpdate, { module: 'aggregate', properties: newProp });\n break;\n case 'frozenColumns':\n case 'frozenRows':\n case 'enableVirtualization':\n case 'currencyCode':\n case 'locale':\n this.log('frozen_rows_columns');\n freezeRefresh = true;\n requireGridRefresh = true;\n break;\n case 'query':\n if (!this.getDataModule().isQueryInvokedFromData) {\n requireRefresh = true;\n }\n this.getDataModule().isQueryInvokedFromData = false;\n break;\n default:\n this.extendedPropertyChange(prop, newProp, requireGridRefresh);\n }\n }\n if (checkCursor) {\n this.updateDefaultCursor();\n }\n if (requireGridRefresh) {\n if (freezeRefresh || this.getFrozenColumns() || this.frozenRows) {\n if (!(isBlazor() && this.isServerRendered)) {\n this.freezeRefresh();\n }\n }\n else {\n this.refresh();\n }\n }\n else if (requireRefresh) {\n this.notify(events.modelChanged, args);\n requireRefresh = false;\n this.maintainSelection(newProp.selectedRowIndex);\n }\n };\n /* tslint:disable */\n Grid.prototype.extendedPropertyChange = function (prop, newProp, requireGridRefresh) {\n switch (prop) {\n case 'enableRtl':\n this.updateRTL();\n if (this.allowPaging) {\n this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;\n this.element.querySelector('.e-gridpager').ej2_instances[0].dataBind();\n }\n if (this.height !== 'auto') {\n this.scrollModule.removePadding(!newProp.enableRtl);\n this.scrollModule.setPadding();\n }\n if (this.toolbar && this.toolbarModule) {\n this.toolbarModule.getToolbar().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.toolbarModule.getToolbar().ej2_instances[0].dataBind();\n }\n if (this.contextMenuItems && this.contextMenuModule) {\n this.contextMenuModule.getContextMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.contextMenuModule.getContextMenu().ej2_instances[0].dataBind();\n }\n if (this.showColumnMenu && this.columnMenuModule) {\n this.columnMenuModule.getColumnMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.columnMenuModule.getColumnMenu().ej2_instances[0].dataBind();\n }\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n this.refreshHeader();\n }\n this.notify(events.rtlUpdated, {});\n break;\n case 'enableAltRow':\n this.renderModule.refresh();\n break;\n case 'allowResizing':\n this.headerModule.refreshUI();\n this.updateResizeLines();\n break;\n case 'rowHeight':\n if (this.rowHeight) {\n addClass([this.element], 'e-grid-min-height');\n }\n else {\n removeClass([this.element], 'e-grid-min-height');\n }\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'gridLines':\n this.updateGridLines();\n break;\n case 'showColumnMenu':\n this.headerModule.refreshUI();\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: true });\n break;\n case 'columnMenuItems':\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: this.columnMenuItems });\n break;\n case 'contextMenuItems':\n this.notify(events.uiUpdate, { module: 'contextMenu', enable: this.contextMenuItems });\n break;\n case 'showColumnChooser':\n this.notify(events.uiUpdate, { module: 'columnChooser', enable: this.showColumnChooser });\n break;\n case 'filterSettings':\n this.updateStackedFilter();\n this.notify(events.inBoundModelChanged, { module: 'filter', properties: newProp.filterSettings });\n break;\n case 'searchSettings':\n this.notify(events.inBoundModelChanged, { module: 'search', properties: newProp.searchSettings });\n break;\n case 'sortSettings':\n this.notify(events.inBoundModelChanged, { module: 'sort' });\n break;\n case 'selectionSettings':\n this.notify(events.inBoundModelChanged, { module: 'selection', properties: newProp.selectionSettings });\n break;\n case 'editSettings':\n this.notify(events.inBoundModelChanged, { module: 'edit', properties: newProp.editSettings });\n break;\n case 'allowTextWrap':\n case 'textWrapSettings':\n if (this.allowTextWrap) {\n this.applyTextWrap();\n }\n else {\n this.removeTextWrap();\n }\n this.notify(events.freezeRender, { case: 'textwrap', isModeChg: (prop === 'textWrapSettings') });\n break;\n case 'dataSource':\n var pending_1 = this.getDataModule().getState();\n if (Object.getPrototypeOf(newProp).deepWatch) {\n var pKeyField = this.getPrimaryKeyFieldNames()[0];\n for (var i = 0, props = Object.keys(newProp.dataSource); i < props.length; i++) {\n this.setRowData(getValue(pKeyField, this.dataSource[props[i]]), this.dataSource[props[i]]);\n }\n }\n else if (pending_1.isPending) {\n var gResult = !isNullOrUndefined(this.dataSource) ? this.dataSource.result : [];\n var names = (pending_1.group || []);\n for (var i = 0; i < names.length; i++) {\n gResult = DataUtil.group(gResult, names[i], pending_1.aggregates || []);\n }\n this.dataSource = {\n result: gResult, count: this.dataSource.count,\n aggregates: this.dataSource.aggregates\n };\n this.getDataModule().setState({});\n pending_1.resolver(this.dataSource);\n }\n else {\n this.getDataModule().setState({ isDataChanged: false });\n this.notify(events.dataSourceModified, {});\n if (!requireGridRefresh) {\n this.renderModule.refresh();\n if (this.isCheckBoxSelection) {\n this.notify(events.beforeRefreshOnDataChange, {});\n }\n }\n }\n this.scrollRefresh();\n break;\n case 'enableHover':\n var action = newProp.enableHover ? addClass : removeClass;\n action([this.element], 'e-gridhover');\n break;\n case 'selectedRowIndex':\n if (!this.isSelectedRowIndexUpdating) {\n this.selectRow(newProp.selectedRowIndex);\n }\n this.isSelectedRowIndexUpdating = false;\n break;\n case 'resizeSettings':\n this.widthService.setWidthToTable();\n break;\n case 'enableAdaptiveUI':\n this.notify(events.setFullScreenDialog, {});\n break;\n case 'rowRenderingMode':\n this.enableVerticalRendering();\n this.notify(events.rowModeChange, {});\n this.refresh();\n break;\n }\n };\n Grid.prototype.maintainSelection = function (index) {\n var _this = this;\n if (index !== -1) {\n var fn_1 = function () {\n _this.selectRow(index);\n _this.off(events.contentReady, fn_1);\n };\n this.on(events.contentReady, fn_1, this);\n }\n };\n /**\n * @private\n */\n Grid.prototype.setProperties = function (prop, muteOnChange) {\n _super.prototype.setProperties.call(this, prop, muteOnChange);\n var filterSettings = 'filterSettings';\n if (prop[filterSettings] && this.filterModule && muteOnChange) {\n this.filterModule.refreshFilter();\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.setTablesCount = function () {\n var frozenCols = this.getFrozenColumns();\n var frozenLeft = this.getFrozenLeftColumnsCount();\n var frozenRight = this.getFrozenRightColumnsCount();\n if (frozenCols && !frozenLeft && !frozenRight) {\n this.tablesCount = 2;\n }\n else if (!frozenCols && (frozenLeft || frozenRight)) {\n if ((frozenLeft && !frozenRight) || (frozenRight && !frozenLeft)) {\n this.tablesCount = 2;\n }\n else if (frozenLeft && frozenRight) {\n this.tablesCount = 3;\n }\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getTablesCount = function () {\n return this.tablesCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.updateDefaultCursor = function () {\n var headerCells = [].slice.call(this.getHeaderContent().querySelectorAll('.e-headercell:not(.e-stackedheadercell)'));\n var stdHdrCell = [].slice.call(this.getHeaderContent().querySelectorAll('.e-stackedheadercell'));\n var cols = this.getColumns();\n if (this.enableColumnVirtualization && this.getFrozenColumns()) {\n var cells = this.contentModule.getHeaderCells();\n headerCells = cells.length ? cells : headerCells;\n }\n for (var i = 0; i < headerCells.length; i++) {\n var cell = headerCells[i];\n if (this.allowGrouping || this.allowReordering || this.allowSorting) {\n if (!cols[i].allowReordering || !cols[i].allowSorting || !cols[i].allowGrouping) {\n cell.classList.add('e-defaultcursor');\n }\n else {\n cell.classList.add('e-mousepointer');\n }\n }\n }\n for (var count = 0; count < stdHdrCell.length; count++) {\n if (this.allowReordering) {\n stdHdrCell[count].classList.add('e-mousepointer');\n }\n }\n };\n Grid.prototype.updateColumnModel = function (columns) {\n for (var i = 0, len = columns.length; i < len; i++) {\n if (columns[i].columns) {\n this.updateColumnModel(columns[i].columns);\n }\n else {\n this.columnModel.push(columns[i]);\n }\n }\n this.updateColumnLevelFrozen();\n this.updateFrozenColumns();\n this.updateLockableColumns();\n };\n Grid.prototype.updateColumnLevelFrozen = function () {\n var cols = this.columnModel;\n var leftCols = [];\n var rightCols = [];\n var movableCols = [];\n if (this.frozenLeftCount || this.frozenRightCount) {\n for (var i = 0, len = cols.length; i < len; i++) {\n /* tslint:disable-next-line:no-any */\n var col = cols[i];\n if (col.freeze === 'Left') {\n col.freezeTable = 'frozen-left';\n leftCols.push(col);\n }\n else if (col.freeze === 'Right') {\n col.freezeTable = 'frozen-right';\n rightCols.push(col);\n }\n else {\n col.freezeTable = 'movable';\n movableCols.push(col);\n }\n }\n this.columnModel = leftCols.concat(movableCols).concat(rightCols);\n }\n };\n Grid.prototype.updateFrozenColumns = function () {\n if (this.frozenLeftCount || this.frozenRightCount) {\n return;\n }\n var cols = this.columnModel;\n var directFrozenCount = this.frozenColumns;\n var totalFrozenCount = this.getFrozenColumns();\n var count = 0;\n for (var i = 0, len = cols.length; i < len; i++) {\n /* tslint:disable-next-line:no-any */\n var col = cols[i];\n if (directFrozenCount) {\n if (i < directFrozenCount) {\n col.freezeTable = 'frozen-left';\n }\n else {\n col.freezeTable = 'movable';\n }\n }\n if (col.isFrozen && i >= directFrozenCount) {\n col.freezeTable = 'frozen-left';\n cols.splice(this.frozenColumns + count, 0, cols.splice(i, 1)[0]);\n count++;\n }\n else if (totalFrozenCount && !directFrozenCount) {\n col.freezeTable = 'movable';\n }\n }\n };\n Grid.prototype.getFrozenLeftCount = function () {\n return this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n };\n Grid.prototype.isFrozenGrid = function () {\n return this.getFrozenColumns() !== 0 || this.getFrozenLeftColumnsCount() !== 0 || this.getFrozenRightColumnsCount() !== 0;\n };\n Grid.prototype.getFrozenMode = function () {\n return this.frozenName;\n };\n Grid.prototype.updateLockableColumns = function () {\n var cols = this.columnModel;\n var frozenCount = 0;\n var movableCount = 0;\n var frozenColumns = this.getFrozenColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].lockColumn) {\n if (i < frozenColumns) {\n cols.splice(frozenCount, 0, cols.splice(i, 1)[0]);\n frozenCount++;\n }\n else {\n cols.splice(frozenColumns + movableCount, 0, cols.splice(i, 1)[0]);\n movableCount++;\n }\n }\n }\n };\n Grid.prototype.checkLockColumns = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].columns) {\n this.checkLockColumns(cols[i].columns);\n }\n else if (cols[i].lockColumn) {\n this.lockcolPositionCount++;\n }\n }\n };\n /**\n * Gets the columns from the Grid.\n * @return {Column[]}\n * @blazorType List\n */\n Grid.prototype.getColumns = function (isRefresh) {\n var _this = this;\n var inview = this.inViewIndexes.map(function (v) { return v - _this.groupSettings.columns.length; }).filter(function (v) { return v > -1; });\n var vLen = inview.length;\n if (!this.enableColumnVirtualization || isNullOrUndefined(this.columnModel) || this.columnModel.length === 0 || isRefresh) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n var columns = vLen === 0 ? this.columnModel :\n this.columnModel.slice(inview[0], inview[vLen - 1] + 1);\n if (this.contentModule && this.enableColumnVirtualization && this.isFrozenGrid() && inview.length\n && inview[0] > 0) {\n var frozenCols = this.contentModule.ensureFrozenCols(columns);\n columns = frozenCols;\n }\n return columns;\n };\n /**\n * @private\n */\n Grid.prototype.getStackedHeaderColumnByHeaderText = function (stackedHeader, col) {\n for (var i = 0; i < col.length; i++) {\n var individualColumn = col[i];\n if (individualColumn.field === stackedHeader || individualColumn.headerText === stackedHeader) {\n this.stackedColumn = individualColumn;\n break;\n }\n else if (individualColumn.columns) {\n this.getStackedHeaderColumnByHeaderText(stackedHeader, individualColumn.columns);\n }\n }\n return this.stackedColumn;\n };\n /**\n * @private\n */\n Grid.prototype.getColumnIndexesInView = function () {\n return this.inViewIndexes;\n };\n /**\n * @private\n */\n Grid.prototype.getQuery = function () {\n return this.query;\n };\n /**\n * @private\n */\n Grid.prototype.getLocaleConstants = function () {\n return this.defaultLocale;\n };\n /**\n * @private\n */\n Grid.prototype.setColumnIndexesInView = function (indexes) {\n this.inViewIndexes = indexes;\n };\n /**\n * Gets the visible columns from the Grid.\n * @return {Column[]}\n * @blazorType List\n */\n Grid.prototype.getVisibleColumns = function () {\n var cols = [];\n for (var _i = 0, _a = this.columnModel; _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.visible) {\n cols.push(col);\n }\n }\n return cols;\n };\n /**\n * Gets the header div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getHeaderContent = function () {\n return this.headerModule.getPanel();\n };\n /**\n * Sets the header div of the Grid to replace the old header.\n * @param {Element} element - Specifies the Grid header.\n * @return {void}\n */\n Grid.prototype.setGridHeaderContent = function (element) {\n this.headerModule.setPanel(element);\n };\n /**\n * Gets the content table of the Grid.\n * @return {Element}\n */\n Grid.prototype.getContentTable = function () {\n return this.contentModule.getTable();\n };\n /**\n * Sets the content table of the Grid to replace the old content table.\n * @param {Element} element - Specifies the Grid content table.\n * @return {void}\n */\n Grid.prototype.setGridContentTable = function (element) {\n this.contentModule.setTable(element);\n };\n /**\n * Gets the content div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * Sets the content div of the Grid to replace the old Grid content.\n * @param {Element} element - Specifies the Grid content.\n * @return {void}\n */\n Grid.prototype.setGridContent = function (element) {\n this.contentModule.setPanel(element);\n };\n /**\n * Gets the header table element of the Grid.\n * @return {Element}\n */\n Grid.prototype.getHeaderTable = function () {\n return this.headerModule.getTable();\n };\n /**\n * Sets the header table of the Grid to replace the old one.\n * @param {Element} element - Specifies the Grid header table.\n * @return {void}\n */\n Grid.prototype.setGridHeaderTable = function (element) {\n this.headerModule.setTable(element);\n };\n /**\n * Gets the footer div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getFooterContent = function () {\n this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];\n return this.footerElement;\n };\n /**\n * Gets the footer table element of the Grid.\n * @return {Element}\n */\n Grid.prototype.getFooterContentTable = function () {\n this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];\n return this.footerElement.firstChild.firstChild;\n };\n /**\n * Gets the pager of the Grid.\n * @return {Element}\n */\n Grid.prototype.getPager = function () {\n return this.gridPager; //get element from pager\n };\n /**\n * Sets the pager of the Grid to replace the old pager.\n * @param {Element} element - Specifies the Grid pager.\n * @return {void}\n */\n Grid.prototype.setGridPager = function (element) {\n this.gridPager = element;\n };\n /**\n * Gets a row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getRowByIndex = function (index) {\n return this.contentModule.getRowByIndex(index);\n };\n /**\n * Gets a movable tables row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getMovableRowByIndex = function (index) {\n return this.contentModule.getMovableRowByIndex(index);\n };\n /**\n * Gets a frozen tables row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRowByIndex = function (index) {\n return this.getFrozenDataRows()[index];\n };\n /**\n * Gets all the data rows of the Grid.\n * @return {Element[]}\n */\n Grid.prototype.getRows = function () {\n return this.contentModule.getRowElements();\n };\n /**\n * Gets a frozen right tables row element by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRightRowByIndex = function (index) {\n return this.contentModule.getFrozenRightRowByIndex(index);\n };\n /**\n * Get a row information based on cell\n * @param {Element}\n * @return RowInfo\n */\n Grid.prototype.getRowInfo = function (target) {\n var ele = target;\n var args = { target: target };\n if (!isNullOrUndefined(target) && isNullOrUndefined(parentsUntil(ele, 'e-detailrowcollapse')\n && isNullOrUndefined(parentsUntil(ele, 'e-recordplusexpand')))) {\n var cell = closest(ele, '.e-rowcell');\n if (!cell) {\n var row = closest(ele, '.e-row');\n if (!isNullOrUndefined(row)) {\n var rowObj = this.getRowObjectFromUID(row.getAttribute('data-uid'));\n var rowIndex = parseInt(row.getAttribute('aria-rowindex'), 10);\n args = { row: row, rowData: rowObj.data, rowIndex: rowIndex };\n }\n return args;\n }\n var cellIndex = parseInt(cell.getAttribute('aria-colindex'), 10);\n if (!isNullOrUndefined(cell) && !isNaN(cellIndex)) {\n var row_1 = closest(cell, '.e-row');\n var rowIndex = parseInt(row_1.getAttribute('aria-rowindex'), 10);\n var frzCols = this.getFrozenColumns();\n var tableName = this.columnModel[cellIndex].getFreezeTableName();\n var rows = this.contentModule.getRows();\n var index = cellIndex + this.getIndentCount();\n if (this.isFrozenGrid()) {\n if (tableName === 'frozen-left') {\n rows = this.contentModule.getRows();\n }\n else if (tableName === 'movable') {\n index = cellIndex - frzCols - this.frozenLeftCount;\n rows = this.contentModule.getMovableRows();\n }\n else if (tableName === 'frozen-right') {\n index = cellIndex - (this.frozenLeftCount + this.movableCount);\n rows = this.contentModule.getFrozenRightRows();\n }\n }\n var rowsObject = rows.filter(function (r) { return r.uid === row_1.getAttribute('data-uid'); });\n var rowData = {};\n var column = void 0;\n if (Object.keys(rowsObject).length) {\n rowData = rowsObject[0].data;\n column = rowsObject[0].cells[index].column;\n }\n args = { cell: cell, cellIndex: cellIndex, row: row_1, rowIndex: rowIndex, rowData: rowData, column: column, target: target };\n }\n }\n return args;\n };\n /**\n * Gets the Grid's movable content rows from frozen grid.\n * @return {Element[]}\n */\n Grid.prototype.getMovableRows = function () {\n return this.contentModule.getMovableRowElements();\n };\n /**\n * Gets the Grid's frozen right content rows from frozen grid.\n * @return {Element[]}\n */\n Grid.prototype.getFrozenRightRows = function () {\n return this.contentModule.getFrozenRightRowElements();\n };\n /**\n * Gets all the Grid's data rows.\n * @return {Element[]}\n */\n Grid.prototype.getDataRows = function () {\n return this.getAllDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllDataRows = function (includeAdd) {\n if (isNullOrUndefined(this.getContentTable().querySelector('tbody'))) {\n return [];\n }\n var tbody = this.isFrozenGrid() ? this.getFrozenLeftContentTbody() : this.getContentTable().querySelector('tbody');\n var rows = [].slice.call(tbody.children);\n if (this.frozenRows) {\n var hdrTbody = this.isFrozenGrid() ? this.getHeaderContent().querySelector('.e-frozenheader').querySelector('tbody')\n : this.getHeaderTable().querySelector('tbody');\n var freezeRows = [].slice.call(hdrTbody.children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * @hidden\n */\n Grid.prototype.addMovableRows = function (fRows, mrows) {\n for (var i = 0, len = mrows.length; i < len; i++) {\n fRows.push(mrows[i]);\n }\n return fRows;\n };\n Grid.prototype.generateDataRows = function (rows, includAdd) {\n var dRows = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n if (rows[i].classList.contains('e-row') && (!rows[i].classList.contains('e-hiddenrow') || includAdd)) {\n if (this.isCollapseStateEnabled()) {\n dRows[parseInt(rows[i].getAttribute(\"aria-rowindex\"))] = rows[i];\n }\n else {\n dRows.push(rows[i]);\n }\n }\n }\n return dRows;\n };\n /**\n * Gets all the Grid's movable table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getMovableDataRows = function () {\n return this.getAllMovableDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllMovableDataRows = function (includeAdd) {\n if (!this.isFrozenGrid()) {\n return [];\n }\n var rows = [].slice.call(this.getContent().querySelector('.e-movablecontent').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-movableheader').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * Gets all the Grid's frozen table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getFrozenDataRows = function () {\n return this.getAllFrozenDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllFrozenDataRows = function (includeAdd) {\n var rows = [].slice.call(this.getContent().querySelector('.e-frozencontent').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-frozenheader').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * Gets all the Grid's frozen right table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getFrozenRightDataRows = function () {\n return this.getAllFrozenRightDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllFrozenRightDataRows = function (includeAdd) {\n if (this.getFrozenMode() !== 'Right' && this.getFrozenMode() !== 'Left-Right') {\n return [];\n }\n var rows = [].slice.call(this.getContent().querySelector('.e-frozen-right-content').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-frozen-right-header').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * Updates particular cell value based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {string } field - Specifies the field name which you want to update.\n * @param {string | number | boolean | Date} value - To update new value for the particular cell.\n */\n Grid.prototype.setCellValue = function (key, field, value) {\n var cells = 'cells';\n var rowData = 'data';\n var rowIdx = 'index';\n var rowuID = 'uid';\n var fieldIdx;\n var col;\n var tr;\n var mTr;\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var cell = new CellRenderer(this, this.serviceLocator);\n var selectedRow = {};\n var movableSelectedRow = {};\n var rowObjects = this.contentModule.getRows();\n var movableRowObjects = this.contentModule.getMovableRows();\n fieldIdx = this.getColumnIndexByField(field);\n if (this.groupSettings.columns.length) {\n fieldIdx = fieldIdx + this.groupSettings.columns.length;\n }\n if (this.childGrid || this.detailTemplate) {\n fieldIdx++;\n }\n if (this.isRowDragable()) {\n fieldIdx++;\n }\n col = this.getColumnByField(field);\n selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n movableSelectedRow = movableRowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n tr = !isNullOrUndefined(selectedRow) ? this.element.querySelector('[data-uid=' + selectedRow[rowuID] + ']') : null;\n mTr = !isNullOrUndefined(movableSelectedRow) ? this.element.querySelector('[data-uid=' + movableSelectedRow[rowuID] + ']') : null;\n if (!isNullOrUndefined(tr)) {\n setValue(field, value, selectedRow[rowData]);\n var td = !isNullOrUndefined(tr[cells][fieldIdx]) ?\n tr[cells][fieldIdx] : mTr[cells][fieldIdx - this.frozenColumns];\n if (!isNullOrUndefined(td)) {\n var sRow = selectedRow[cells][fieldIdx];\n var mRow = void 0;\n if (this.frozenColumns) {\n mRow = movableSelectedRow[cells][fieldIdx - this.frozenColumns];\n }\n cell.refreshTD(td, !isNullOrUndefined(sRow) ? sRow : mRow, selectedRow[rowData], { index: selectedRow[rowIdx] });\n if (this.aggregates.length > 0) {\n this.notify(events.refreshFooterRenderer, {});\n if (this.groupSettings.columns.length > 0) {\n this.notify(events.groupAggregates, {});\n }\n }\n /* tslint:disable:no-string-literal */\n if (!isNullOrUndefined(movableSelectedRow) && !isNullOrUndefined(movableSelectedRow['changes'])) {\n movableSelectedRow['changes'][field] = value;\n }\n /* tslint:disable:no-string-literal */\n this.trigger(events.queryCellInfo, {\n cell: td, column: col, data: selectedRow[rowData]\n });\n }\n }\n else {\n return;\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.refreshReactColumnTemplateByUid = function (columnUid) {\n var _this = this;\n if (this.isReact) {\n //tslint:disable-next-line:no-any\n this.clearTemplate(['columnTemplate'], undefined, function () {\n var cells = 'cells';\n var rowIdx = 'index';\n var rowsObj = _this.getRowsObject();\n var indent = _this.getIndentCount();\n var cellIndex = _this.getNormalizedColumnIndex(columnUid);\n for (var j = 0; j < rowsObj.length; j++) {\n if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {\n var cell = rowsObj[j][cells][cellIndex];\n var cellRenderer = new CellRenderer(_this, _this.serviceLocator);\n var td = _this.getCellFromIndex(rowsObj[j].index, cellIndex - indent);\n cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });\n }\n }\n });\n }\n };\n /**\n * Updates and refresh the particular row values based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {Object} rowData - To update new data for the particular row.\n */\n Grid.prototype.setRowData = function (key, rowData) {\n var rwdata = 'data';\n var rowuID = 'uid';\n var rowObjects = this.contentModule.getRows();\n var selectedRow;\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var rowRenderer = new RowRenderer(this.serviceLocator, null, this);\n if (this.groupSettings.columns.length > 0 && this.aggregates.length > 0) {\n rowObjects = rowObjects.filter(function (row) { return row.isDataRow; });\n }\n selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n if (!isNullOrUndefined(selectedRow) && this.element.querySelectorAll('[data-uid=' + selectedRow[rowuID] + ']').length) {\n selectedRow.changes = rowData;\n refreshForeignData(selectedRow, this.getForeignKeyColumns(), selectedRow.changes);\n rowRenderer.refresh(selectedRow, this.getColumns(), true);\n if (this.aggregates.length > 0) {\n this.notify(events.refreshFooterRenderer, {});\n if (this.groupSettings.columns.length > 0) {\n this.notify(events.groupAggregates, {});\n }\n }\n }\n else {\n return;\n }\n };\n /**\n * Gets a cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getCellFromIndex = function (rowIndex, columnIndex) {\n var col = this.getColumnByIndex(columnIndex);\n return getCellByColAndRowIndex(this, col, rowIndex, columnIndex);\n };\n /**\n * Gets a movable table cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getMovableCellFromIndex = function (rowIndex, columnIndex) {\n if (this.frozenName === 'Left-Right' && columnIndex >= this.movableCount) {\n return undefined;\n }\n var index = this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n return this.getMovableDataRows()[rowIndex] &&\n this.getMovableDataRows()[rowIndex].querySelectorAll('.e-rowcell')[columnIndex - index];\n };\n /**\n * Gets a frozen right table cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRightCellFromIndex = function (rowIndex, columnIndex) {\n var index = this.getFrozenLeftColumnsCount() + this.getMovableColumnsCount();\n var rows = this.getFrozenRightDataRows();\n return rows[rowIndex] && rows[rowIndex].querySelectorAll('.e-rowcell')[columnIndex - index];\n };\n /**\n * Gets a column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByIndex = function (index) {\n return this.getHeaderTable().querySelectorAll('.e-headercell')[index];\n };\n /**\n * Gets a movable column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getMovableColumnHeaderByIndex = function (index) {\n var left = this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n return this.getMovableVirtualHeader().querySelectorAll('.e-headercell')[index - left];\n };\n /**\n * Gets a frozen right column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRightColumnHeaderByIndex = function (index) {\n var left = this.getFrozenLeftColumnsCount() + this.getMovableColumnsCount();\n return this.getFrozenRightHeader().querySelectorAll('.e-headercell')[index - left];\n };\n /**\n * Gets a frozen left column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getFrozenLeftColumnHeaderByIndex = function (index) {\n return this.getFrozenVirtualHeader().querySelectorAll('.e-headercell')[index];\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowObjectFromUID = function (uid, isMovable, isFrozenRight) {\n var rows = this.contentModule.getRows();\n var row = this.rowObject(rows, uid);\n if (this.isFrozenGrid()) {\n if (!row || isMovable || isFrozenRight) {\n row = this.rowObject(this.contentModule.getMovableRows(), uid);\n if ((!row && this.getFrozenMode() === 'Left-Right') || isFrozenRight) {\n row = this.rowObject(this.contentModule.getFrozenRightRows(), uid);\n }\n return row;\n }\n }\n if (isNullOrUndefined(row) && this.enableVirtualization && this.groupSettings.columns.length > 0) {\n row = this.rowObject(this.vRows, uid);\n return row;\n }\n return row;\n };\n Grid.prototype.rowObject = function (rows, uid) {\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.uid === uid) {\n return row;\n }\n }\n return null;\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowsObject = function () {\n return this.contentModule.getRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableRowsObject = function () {\n var rows = [];\n if (this.isFrozenGrid()) {\n rows = this.contentModule.getMovableRows();\n }\n return rows;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenRightRowsObject = function () {\n var rows = [];\n if (this.getFrozenMode() === 'Right' || this.getFrozenMode() === 'Left-Right') {\n rows = this.contentModule.getFrozenRightRows();\n }\n return rows;\n };\n /**\n * Gets a column header by column name.\n * @param {string} field - Specifies the column name.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByField = function (field) {\n var column = this.getColumnByField(field);\n return column ? this.getColumnHeaderByUid(column.uid) : undefined;\n };\n /**\n * Gets a column header by UID.\n * @param {string} field - Specifies the column uid.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByUid = function (uid) {\n var element = this.getHeaderContent().querySelector('[e-mappinguid=' + uid + ']');\n return element ? element.parentElement : undefined;\n };\n /**\n * @hidden\n * @blazorType GridColumn\n */\n Grid.prototype.getColumnByIndex = function (index) {\n var column;\n this.getColumns().some(function (col, i) {\n column = col;\n return i === index;\n });\n return column;\n };\n /**\n * Gets a Column by column name.\n * @param {string} field - Specifies the column name.\n * @return {Column}\n * @blazorType GridColumn\n */\n Grid.prototype.getColumnByField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.field === field) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets a column index by column name.\n * @param {string} field - Specifies the column name.\n * @return {number}\n */\n Grid.prototype.getColumnIndexByField = function (field) {\n var cols = this.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].field === field) {\n return i;\n }\n }\n return -1;\n };\n /**\n * Gets a column by UID.\n * @param {string} uid - Specifies the column UID.\n * @return {Column}\n * @blazorType GridColumn\n */\n Grid.prototype.getColumnByUid = function (uid) {\n return iterateArrayOrObject(this.getColumns().concat(this.getStackedColumns(this.columns)), function (item, index) {\n if (item.uid === uid) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * @hidden\n */\n Grid.prototype.getStackedColumns = function (columns, stackedColumn) {\n if (stackedColumn === void 0) { stackedColumn = []; }\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (column.columns) {\n stackedColumn.push(column);\n this.getStackedColumns(column.columns, stackedColumn);\n }\n }\n return stackedColumn;\n };\n /**\n * Gets a column index by UID.\n * @param {string} uid - Specifies the column UID.\n * @return {number}\n */\n Grid.prototype.getColumnIndexByUid = function (uid) {\n var index = iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.uid === uid) {\n return index;\n }\n return undefined;\n })[0];\n return !isNullOrUndefined(index) ? index : -1;\n };\n /**\n * Gets UID by column name.\n * @param {string} field - Specifies the column name.\n * @return {string}\n */\n Grid.prototype.getUidByColumnField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.field === field) {\n return item.uid;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets TH index by column uid value.\n * @private\n * @param {string} uid - Specifies the column uid.\n * @return {number}\n */\n Grid.prototype.getNormalizedColumnIndex = function (uid) {\n var index = this.getColumnIndexByUid(uid);\n return index + this.getIndentCount();\n };\n /**\n * Gets indent cell count.\n * @private\n * @return {number}\n */\n Grid.prototype.getIndentCount = function () {\n var index = 0;\n if (this.allowGrouping) {\n index += this.groupSettings.columns.length;\n }\n if (this.isDetail()) {\n index++;\n }\n if (this.isRowDragable() && isNullOrUndefined(this.rowDropSettings.targetID)) {\n index++;\n }\n /**\n * TODO: index normalization based on the stacked header, grouping and detailTemplate\n * and frozen should be handled here\n */\n return index;\n };\n /**\n * Gets the collection of column fields.\n * @return {string[]}\n */\n Grid.prototype.getColumnFieldNames = function () {\n var columnNames = [];\n var column;\n for (var i = 0, len = this.getColumns().length; i < len; i++) {\n column = this.getColumns()[i];\n if (column.visible) {\n columnNames.push(column.field);\n }\n }\n return columnNames;\n };\n /**\n * Gets a compiled row template.\n * @return {Function}\n * @private\n */\n Grid.prototype.getRowTemplate = function () {\n return this.rowTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getDetailTemplate = function () {\n return this.detailTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getEditTemplate = function () {\n return this.editTemplateFn;\n };\n /**\n * Gets a compiled dialog edit header template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getEditHeaderTemplate = function () {\n return this.editHeaderTemplateFn;\n };\n /**\n * Gets a compiled dialog edit footer template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getEditFooterTemplate = function () {\n return this.editFooterTemplateFn;\n };\n /**\n * Get the names of the primary key columns of the Grid.\n * @return {string[]}\n */\n Grid.prototype.getPrimaryKeyFieldNames = function () {\n var keys = [];\n for (var k = 0; k < this.columnModel.length; k++) {\n if (this.columnModel[k].isPrimaryKey) {\n keys.push(this.columnModel[k].field);\n }\n }\n return keys;\n };\n /**\n * Refreshes the Grid header and content.\n */\n Grid.prototype.refresh = function () {\n if (!this.isDestroyed) {\n this.headerModule.refreshUI();\n this.updateStackedFilter();\n this.renderModule.refresh();\n }\n };\n /**\n * Refreshes the Grid header.\n */\n Grid.prototype.refreshHeader = function () {\n this.headerModule.refreshUI();\n };\n /**\n * Gets the collection of selected rows.\n * @return {Element[]}\n */\n Grid.prototype.getSelectedRows = function () {\n return this.selectionModule ? this.selectionModule.selectedRecords : [];\n };\n /**\n * Gets the collection of selected row indexes.\n * @return {number[]}\n */\n Grid.prototype.getSelectedRowIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowIndexes : [];\n };\n /**\n * Gets the collection of selected row and cell indexes.\n * @return {number[]}\n */\n Grid.prototype.getSelectedRowCellIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowCellIndexes : [];\n };\n /**\n * Gets the collection of selected records.\n * @return {Object[]}\n * @isGenericType true\n */\n Grid.prototype.getSelectedRecords = function () {\n return this.selectionModule ? this.selectionModule.getSelectedRecords() : [];\n };\n /**\n * Gets the collection of selected columns uid.\n * @return {string[]}\n * @isGenericType true\n */\n Grid.prototype.getSelectedColumnsUid = function () {\n var _this = this;\n var uid = [];\n if (this.selectionModule) {\n this.selectionModule.selectedColumnsIndexes.filter(function (i) { return uid.push(_this.getColumns()[i].uid); });\n }\n return uid;\n };\n /**\n * Gets the data module.\n * @return {Data}\n */\n Grid.prototype.getDataModule = function () {\n return this.renderModule.data;\n };\n /**\n * Shows a column by its column name.\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n Grid.prototype.showColumns = function (keys, showBy) {\n showBy = showBy ? showBy : 'headerText';\n this.showHider.show(keys, showBy);\n };\n /**\n * Hides a column by column name.\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n Grid.prototype.hideColumns = function (keys, hideBy) {\n hideBy = hideBy ? hideBy : 'headerText';\n this.showHider.hide(keys, hideBy);\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenColumns = function () {\n return this.frozenColumns + this.getFrozenCount(this.columns, 0, 0);\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenRightColumnsCount = function () {\n return this.frozenRightCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenLeftColumnsCount = function () {\n return this.frozenLeftCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableColumnsCount = function () {\n return this.movableCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.setFrozenCount = function () {\n this.frozenLeftCount = this.frozenRightCount = this.movableCount = 0;\n this.visibleFrozenLeft = this.visibleFrozenRight = this.visibleMovable = 0;\n this.frozenLeftColumns = [];\n this.frozenRightColumns = [];\n this.movableColumns = [];\n this.splitFrozenCount(this.columns);\n if (this.frozenColumns && (this.frozenLeftCount || this.frozenRightCount)) {\n this.setProperties({ frozenColumns: 0 }, true);\n }\n this.setTablesCount();\n if (this.frozenLeftCount && !this.frozenRightCount) {\n this.frozenName = 'Left';\n }\n else if (this.frozenRightCount && !this.frozenLeftCount) {\n this.frozenName = 'Right';\n }\n else if (this.frozenLeftCount && this.frozenRightCount) {\n this.frozenName = 'Left-Right';\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleFrozenLeftCount = function () {\n return this.visibleFrozenLeft;\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleFrozenRightCount = function () {\n return this.visibleFrozenRight;\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleMovableCount = function () {\n return this.visibleMovable;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenRightColumns = function () {\n return this.frozenRightColumns;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenLeftColumns = function () {\n return this.frozenLeftColumns;\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableColumns = function () {\n return this.movableColumns;\n };\n Grid.prototype.splitFrozenCount = function (columns) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].columns) {\n this.splitFrozenCount(columns[i].columns);\n }\n else {\n if (columns[i].freeze === 'Right') {\n if (columns[i].visible !== false) {\n this.visibleFrozenRight++;\n }\n ;\n this.frozenRightColumns.push(columns[i]);\n this.frozenRightCount++;\n }\n else if (columns[i].freeze === 'Left') {\n if (columns[i].visible !== false) {\n this.visibleFrozenLeft++;\n }\n ;\n this.frozenLeftColumns.push(columns[i]);\n this.frozenLeftCount++;\n }\n else {\n if (columns[i].visible !== false) {\n this.visibleMovable++;\n }\n ;\n this.movableColumns.push(columns[i]);\n this.movableCount++;\n }\n }\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleFrozenColumns = function () {\n return this.getVisibleFrozenColumnsCount() + this.getVisibleFrozenCount(this.columns, 0);\n };\n /**\n * Get the current Filter operator and field.\n * @return {Object}\n */\n Grid.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n Grid.prototype.getVisibleFrozenColumnsCount = function () {\n var visibleFrozenColumns = 0;\n var columns = this.columnModel;\n for (var i = 0; i < this.frozenColumns; i++) {\n if (columns[i].visible) {\n visibleFrozenColumns++;\n }\n }\n if (this.frozenLeftCount || this.frozenRightCount) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].visible && (columns[i].freeze === 'Left' || columns[i].freeze === 'Right')) {\n visibleFrozenColumns++;\n }\n }\n }\n return visibleFrozenColumns;\n };\n Grid.prototype.getVisibleFrozenCount = function (cols, cnt) {\n if (!this.frozenLeftCount && !this.frozenRightCount) {\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].columns) {\n cnt = this.getVisibleFrozenCount(cols[i].columns, cnt);\n }\n else {\n if (cols[i].isFrozen && cols[i].visible) {\n cnt++;\n }\n }\n }\n }\n return cnt;\n };\n Grid.prototype.getFrozenCount = function (cols, cnt, index) {\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].columns) {\n cnt = this.getFrozenCount(cols[i].columns, cnt, index);\n }\n else {\n if (cols[i].isFrozen && index > this.frozenColumns - 1) {\n cnt++;\n }\n index++;\n }\n }\n return cnt;\n };\n /**\n * Navigates to the specified target page.\n * @param {number} pageNo - Defines the page number to navigate.\n * @return {void}\n */\n Grid.prototype.goToPage = function (pageNo) {\n if (this.pagerModule) {\n this.pagerModule.goToPage(pageNo);\n }\n };\n /**\n * Defines the text of external message.\n * @param {string} message - Defines the message to update.\n * @return {void}\n */\n Grid.prototype.updateExternalMessage = function (message) {\n if (this.pagerModule) {\n this.pagerModule.updateExternalMessage(message);\n }\n };\n /**\n * Sorts a column with the given options.\n * @param {string} columnName - Defines the column name to be sorted.\n * @param {SortDirection} direction - Defines the direction of sorting field.\n * @param {boolean} isMultiSort - Specifies whether the previous sorted columns are to be maintained.\n * @return {void}\n */\n Grid.prototype.sortColumn = function (columnName, direction, isMultiSort) {\n if (this.sortModule) {\n this.sortModule.sortColumn(columnName, direction, isMultiSort);\n }\n };\n /**\n * Clears all the sorted columns of the Grid.\n * @return {void}\n */\n Grid.prototype.clearSorting = function () {\n if (this.sortModule) {\n this.sortModule.clearSorting();\n }\n };\n /**\n * Remove sorted column by field name.\n * @param {string} field - Defines the column field name to remove sort.\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeSortColumn = function (field) {\n if (this.sortModule) {\n this.sortModule.removeSortColumn(field);\n }\n };\n /**\n * Filters grid row by column name with the given options.\n * @param {string} fieldName - Defines the field name of the column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query and another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, the grid filters the records with exact match. if false, it filters case\n * insensitive records (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true,\n * then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @return {void}\n */\n Grid.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {\n if (this.filterModule) {\n this.filterModule.filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator);\n }\n };\n /**\n * Clears all the filtered rows of the Grid.\n * @return {void}\n */\n Grid.prototype.clearFiltering = function (fields) {\n if (this.filterModule) {\n this.filterModule.clearFiltering(fields);\n }\n };\n /**\n * Removes filtered column by field name.\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n if (this.filterModule) {\n this.filterModule.removeFilteredColsByField(field, isClearFilterBar);\n }\n };\n /**\n * Selects a row by given index.\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Grid.prototype.selectRow = function (index, isToggle) {\n if (this.selectionModule) {\n this.selectionModule.selectRow(index, isToggle);\n }\n };\n /**\n * Selects a collection of rows by indexes.\n * @param {number[]} rowIndexes - Specifies the row indexes.\n * @return {void}\n */\n Grid.prototype.selectRows = function (rowIndexes) {\n if (this.selectionModule) {\n this.selectionModule.selectRows(rowIndexes);\n }\n };\n /**\n * Deselects the current selected rows and cells.\n * @return {void}\n */\n Grid.prototype.clearSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearSelection();\n }\n };\n /**\n * Selects a cell by the given index.\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Grid.prototype.selectCell = function (cellIndex, isToggle) {\n if (this.selectionModule) {\n this.selectionModule.selectCell(cellIndex, isToggle);\n }\n };\n /**\n * Selects a range of cells from start and end indexes.\n * @param {IIndex} startIndex - Specifies the row and column's start index.\n * @param {IIndex} endIndex - Specifies the row and column's end index.\n * @return {void}\n */\n Grid.prototype.selectCellsByRange = function (startIndex, endIndex) {\n this.selectionModule.selectCellsByRange(startIndex, endIndex);\n };\n /**\n * Searches Grid records using the given key.\n * You can customize the default search option by using the\n * [`searchSettings`](./#searchsettings/).\n * @param {string} searchString - Defines the key.\n * @return {void}\n */\n Grid.prototype.search = function (searchString) {\n if (this.searchModule) {\n this.searchModule.search(searchString);\n }\n };\n /**\n * By default, prints all the pages of the Grid and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./#printmode).\n * @return {void}\n */\n Grid.prototype.print = function () {\n if (this.printModule) {\n this.printModule.print();\n }\n };\n /**\n * Delete a record with Given options. If fieldname and data is not given then grid will delete the selected record.\n * > `editSettings.allowDeleting` should be true.\n * @param {string} fieldname - Defines the primary key field, 'Name of the column'.\n * @param {Object} data - Defines the JSON data of the record to be deleted.\n */\n Grid.prototype.deleteRecord = function (fieldname, data) {\n if (this.editModule) {\n this.editModule.deleteRecord(fieldname, data);\n }\n };\n /**\n * Starts edit the selected row. At least one row must be selected before invoking this method.\n * `editSettings.allowEditing` should be true.\n * {% codeBlock src='grid/startEdit/index.md' %}{% endcodeBlock %}\n * @return {void}\n */\n Grid.prototype.startEdit = function () {\n if (this.editModule) {\n this.editModule.startEdit();\n }\n };\n /**\n * If Grid is in editable state, you can save a record by invoking endEdit.\n */\n Grid.prototype.endEdit = function () {\n if (this.editModule) {\n this.editModule.endEdit();\n }\n };\n /**\n * Cancels edited state.\n */\n Grid.prototype.closeEdit = function () {\n if (this.editModule) {\n this.editModule.closeEdit();\n }\n };\n /**\n * Adds a new record to the Grid. Without passing parameters, it adds empty rows.\n * > `editSettings.allowEditing` should be true.\n * @param {Object} data - Defines the new add record data.\n * @param {number} index - Defines the row index to be added\n */\n Grid.prototype.addRecord = function (data, index) {\n if (this.editModule) {\n this.editModule.addRecord(data, index);\n }\n };\n /**\n * Delete any visible row by TR element.\n * @param {HTMLTableRowElement} tr - Defines the table row element.\n */\n Grid.prototype.deleteRow = function (tr) {\n if (this.editModule) {\n this.editModule.deleteRow(tr);\n }\n };\n /**\n * Changes a particular cell into edited state based on the row index and field name provided in the `batch` mode.\n * @param {number} index - Defines row index to edit a particular cell.\n * @param {string} field - Defines the field name of the column to perform batch edit.\n */\n Grid.prototype.editCell = function (index, field) {\n if (this.editModule) {\n this.editModule.editCell(index, field);\n }\n };\n /**\n * Saves the cell that is currently edited. It does not save the value to the DataSource.\n * {% codeBlock src='grid/saveCell/index.md' %}{% endcodeBlock %}\n */\n Grid.prototype.saveCell = function () {\n if (this.editModule) {\n this.editModule.saveCell();\n }\n };\n /**\n * To update the specified cell by given value without changing into edited state.\n * @param {number} rowIndex Defines the row index.\n * @param {string} field Defines the column field.\n * @param {string | number | boolean | Date} value - Defines the value to be changed.\n */\n Grid.prototype.updateCell = function (rowIndex, field, value) {\n if (this.editModule) {\n this.editModule.updateCell(rowIndex, field, value);\n }\n };\n /**\n * To update the specified row by given values without changing into edited state.\n * @param {number} index Defines the row index.\n * @param {Object} data Defines the data object to be updated.\n * {% codeBlock src='grid/updateRow/index.md' %}{% endcodeBlock %}\n */\n Grid.prototype.updateRow = function (index, data) {\n if (this.editModule) {\n this.editModule.updateRow(index, data);\n }\n };\n /**\n * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.\n * @return {Object}\n */\n Grid.prototype.getBatchChanges = function () {\n if (this.editModule) {\n return this.editModule.getBatchChanges();\n }\n return {};\n };\n /**\n * Enables or disables ToolBar items.\n * @param {string[]} items - Defines the collection of itemID of ToolBar items.\n * @param {boolean} isEnable - Defines the items to be enabled or disabled.\n * @return {void}\n */\n Grid.prototype.enableToolbarItems = function (items, isEnable) {\n if (this.toolbarModule) {\n this.toolbarModule.enableItems(items, isEnable);\n }\n };\n /**\n * Copy the selected rows or cells data into clipboard.\n * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.\n */\n Grid.prototype.copy = function (withHeader) {\n if (this.clipboardModule) {\n this.clipboardModule.copy(withHeader);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.recalcIndentWidth = function () {\n var _this = this;\n if (!this.getHeaderTable().querySelector('.e-emptycell')) {\n return;\n }\n if ((!this.groupSettings.columns.length && !this.isDetail() && !this.isRowDragable()) ||\n this.getHeaderTable().querySelector('.e-emptycell').getAttribute('indentRefreshed') ||\n !this.getContentTable()) {\n return;\n }\n var indentWidth = this.getHeaderTable().querySelector('.e-emptycell').parentElement.offsetWidth;\n var headerCol = [].slice.call(this.getHeaderTable().querySelector('colgroup').childNodes);\n var contentCol = [].slice.call(this.getContentTable().querySelector('colgroup').childNodes);\n var perPixel = indentWidth / 30;\n var i = this.getFrozenMode() === 'Right' ? this.frozenRightCount : 0;\n var parentOffset = this.element.offsetWidth;\n var applyWidth = function (index, width) {\n if (ispercentageWidth(_this)) {\n var newWidth = (width / parentOffset * 100).toFixed(1) + '%';\n headerCol[index].style.width = newWidth;\n contentCol[index].style.width = newWidth;\n }\n else {\n headerCol[index].style.width = width + 'px';\n contentCol[index].style.width = width + 'px';\n }\n _this.notify(events.columnWidthChanged, { index: index, width: width });\n };\n if (perPixel >= 1) {\n indentWidth = (30 / perPixel);\n }\n if (this.enableColumnVirtualization || this.isAutoGen) {\n indentWidth = 30;\n }\n while (i < this.groupSettings.columns.length) {\n applyWidth(i, indentWidth);\n i++;\n }\n if (this.isDetail()) {\n applyWidth(i, indentWidth);\n i++;\n }\n if (this.isRowDragable()) {\n applyWidth(i, indentWidth);\n }\n this.isAutoGen = false;\n this.getHeaderTable().querySelector('.e-emptycell').setAttribute('indentRefreshed', 'true');\n };\n /**\n * @hidden\n */\n Grid.prototype.resetIndentWidth = function () {\n if (ispercentageWidth(this)) {\n this.getHeaderTable().querySelector('.e-emptycell').removeAttribute('indentRefreshed');\n this.widthService.setWidthToColumns();\n this.recalcIndentWidth();\n }\n if ((this.width === 'auto' || typeof (this.width) === 'string' && this.width.indexOf('%') !== -1)\n && this.getColumns().filter(function (col) { return (!col.width || col.width === 'auto') && col.minWidth; }).length > 0) {\n var tgridWidth = this.widthService.getTableWidth(this.getColumns());\n this.widthService.setMinwidthBycalculation(tgridWidth);\n }\n if (this.isFrozenGrid() && this.widthService) {\n this.widthService.refreshFrozenScrollbar();\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.isRowDragable = function () {\n return this.allowRowDragAndDrop && !this.rowDropSettings.targetID;\n };\n /**\n * Changes the Grid column positions by field names.\n * @param {string} fromFName - Defines the origin field name.\n * @param {string} toFName - Defines the destination field name.\n * @return {void}\n */\n Grid.prototype.reorderColumns = function (fromFName, toFName) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumns(fromFName, toFName);\n }\n };\n /**\n * Changes the Grid column positions by field index. If you invoke reorderColumnByIndex multiple times,\n * then you won't get the same results every time.\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n * @return {void}\n */\n Grid.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumnByIndex(fromIndex, toIndex);\n }\n };\n /**\n * Changes the Grid column positions by field index. If you invoke reorderColumnByTargetIndex multiple times,\n * then you will get the same results every time.\n * @param {string} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n * @return {void}\n */\n Grid.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumnByTargetIndex(fieldName, toIndex);\n }\n };\n /**\n * Changes the Grid Row position with given indexes.\n * @param {number} fromIndexes - Defines the origin Indexes.\n * @param {number} toIndex - Defines the destination Index.\n * @return {void}\n */\n Grid.prototype.reorderRows = function (fromIndexes, toIndex) {\n if (this.rowDragAndDropModule) {\n this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.refreshDataSource = function (e, args) {\n this.notify('refreshdataSource', e);\n };\n /**\n * @hidden\n */\n Grid.prototype.disableRowDD = function (enable) {\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n var headerRows = headerTable.querySelectorAll('th.e-rowdragheader, th.e-mastercell');\n var rows = this.getRows();\n var disValue = enable ? 'none' : '';\n setStyleAttribute(headerTable.querySelector('colgroup').childNodes[0], { 'display': disValue });\n setStyleAttribute(contentTable.querySelector('colgroup').childNodes[0], { 'display': disValue });\n for (var i = 0; i < this.getRows().length; i++) {\n var ele = rows[i].firstElementChild;\n enable ? addClass([ele], 'e-hide') : removeClass([ele], ['e-hide']);\n }\n for (var j = 0; j < headerTable.querySelectorAll('th.e-rowdragheader, th.e-mastercell').length; j++) {\n var ele = headerRows[j];\n enable ? addClass([ele], 'e-hide') : removeClass([ele], ['e-hide']);\n }\n };\n /**\n * Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.\n * > * This method ignores the hidden columns.\n * > * Uses the `autoFitColumns` method in the `dataBound` event to resize at initial rendering.\n * @param {string |string[]} fieldNames - Defines the column names.\n * @return {void}\n *\n *\n * ```typescript\n * \n * \n * ```\n *\n */\n Grid.prototype.autoFitColumns = function (fieldNames) {\n if (this.resizeModule) {\n this.resizeModule.autoFitColumns(fieldNames);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.createColumnchooser = function (x, y, target) {\n if (this.columnChooserModule) {\n this.columnChooserModule.renderColumnChooser(x, y, target);\n }\n };\n Grid.prototype.initializeServices = function () {\n this.serviceLocator.register('widthService', this.widthService = new ColumnWidthService(this));\n this.serviceLocator.register('cellRendererFactory', new CellRendererFactory);\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n this.serviceLocator.register('localization', this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale));\n this.serviceLocator.register('valueFormatter', this.valueFormatterService = new ValueFormatter(this.locale));\n this.serviceLocator.register('showHideService', this.showHider = new ShowHide(this));\n this.serviceLocator.register('ariaService', this.ariaService = new AriaService());\n this.serviceLocator.register('focus', this.focusModule = new FocusStrategy(this));\n };\n Grid.prototype.processModel = function () {\n var gCols = this.groupSettings.columns;\n var sCols = this.sortSettings.columns;\n var flag;\n var j;\n if (this.allowGrouping) {\n var _loop_1 = function (i, len) {\n j = 0;\n for (var sLen = sCols.length; j < sLen; j++) {\n if (sCols[j].field === gCols[i]) {\n flag = true;\n break;\n }\n }\n if (!flag) {\n sCols.push({ field: gCols[i], direction: 'Ascending', isFromGroup: true });\n }\n else {\n if (this_1.allowSorting) {\n this_1.sortedColumns.push(sCols[j].field);\n }\n else {\n sCols[j].direction = 'Ascending';\n }\n }\n if (!this_1.groupSettings.showGroupedColumn) {\n var column = this_1.enableColumnVirtualization ?\n this_1.columns.filter(function (c) { return c.field === gCols[i]; })[0] : this_1.getColumnByField(gCols[i]);\n if (column) {\n column.visible = false;\n }\n else {\n this_1.log('initial_action', { moduleName: 'group', columnName: gCols[i] });\n }\n }\n };\n var this_1 = this;\n for (var i = 0, len = gCols.length; i < len; i++) {\n _loop_1(i, len);\n }\n }\n if (!gCols.length) {\n for (var i = 0; i < sCols.length; i++) {\n this.sortedColumns.push(sCols[i].field);\n }\n }\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n this.editTemplateFn = templateCompiler(this.editSettings.template);\n this.editHeaderTemplateFn = templateCompiler(this.editSettings.headerTemplate);\n this.editFooterTemplateFn = templateCompiler(this.editSettings.footerTemplate);\n if (!isNullOrUndefined(this.parentDetails)) {\n var value = isNullOrUndefined(this.parentDetails.parentKeyFieldValue) ? 'undefined' :\n this.parentDetails.parentKeyFieldValue;\n this.query.where(this.queryString, 'equal', value, true);\n }\n this.initForeignColumn();\n };\n Grid.prototype.initForeignColumn = function () {\n if (this.isForeignKeyEnabled(this.getColumns())) {\n this.notify(events.initForeignKeyColumn, this.getForeignKeyColumns());\n }\n };\n Grid.prototype.enableVerticalRendering = function () {\n if (this.rowRenderingMode === 'Vertical') {\n this.element.classList.add('e-row-responsive');\n }\n else {\n this.element.classList.remove('e-row-responsive');\n }\n };\n Grid.prototype.gridRender = function () {\n this.updateRTL();\n if (this.rowRenderingMode === 'Vertical') {\n this.element.classList.add('e-row-responsive');\n }\n if (this.enableHover) {\n this.element.classList.add('e-gridhover');\n }\n if (Browser.isDevice) {\n this.element.classList.add('e-device');\n }\n if (this.rowHeight) {\n this.element.classList.add('e-grid-min-height');\n }\n classList(this.element, ['e-responsive', 'e-default'], []);\n var rendererFactory = this.serviceLocator.getService('rendererFactory');\n this.headerModule = rendererFactory.getRenderer(RenderType.Header);\n this.contentModule = rendererFactory.getRenderer(RenderType.Content);\n this.printModule = new Print(this, this.scrollModule);\n this.clipboardModule = new Clipboard(this);\n this.renderModule.render();\n this.eventInitializer();\n this.createGridPopUpElement();\n this.widthService.setWidthToColumns();\n this.updateGridLines();\n this.applyTextWrap();\n this.createTooltip(); //for clip mode ellipsis\n this.enableBoxSelection();\n };\n Grid.prototype.dataReady = function () {\n this.scrollModule.setWidth();\n this.scrollModule.setHeight();\n if (this.height !== 'auto') {\n this.scrollModule.setPadding();\n }\n };\n Grid.prototype.updateRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n Grid.prototype.createGridPopUpElement = function () {\n var popup = this.createElement('div', { className: 'e-gridpopup', styles: 'display:none;' });\n var content = this.createElement('div', { className: 'e-content', attrs: { tabIndex: '-1' } });\n append([content, this.createElement('div', { className: 'e-uptail e-tail' })], popup);\n content.appendChild(this.createElement('span'));\n append([content, this.createElement('div', { className: 'e-downtail e-tail' })], popup);\n this.element.appendChild(popup);\n };\n Grid.prototype.updateGridLines = function () {\n classList(this.element, [], ['e-verticallines', 'e-horizontallines', 'e-hidelines', 'e-bothlines']);\n switch (this.gridLines) {\n case 'Horizontal':\n this.element.classList.add('e-horizontallines');\n break;\n case 'Vertical':\n this.element.classList.add('e-verticallines');\n break;\n case 'None':\n this.element.classList.add('e-hidelines');\n break;\n case 'Both':\n this.element.classList.add('e-bothlines');\n break;\n }\n this.updateResizeLines();\n };\n Grid.prototype.updateResizeLines = function () {\n if (this.allowResizing &&\n !(this.gridLines === 'Vertical' || this.gridLines === 'Both')) {\n this.element.classList.add('e-resize-lines');\n }\n else {\n this.element.classList.remove('e-resize-lines');\n }\n };\n /**\n * The function is used to apply text wrap\n * @return {void}\n * @hidden\n */\n Grid.prototype.applyTextWrap = function () {\n if (this.allowTextWrap) {\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n switch (this.textWrapSettings.wrapMode) {\n case 'Header':\n wrap(this.element, false);\n wrap(this.getContent(), false);\n wrap(headerRows, true);\n break;\n case 'Content':\n wrap(this.getContent(), true);\n wrap(this.element, false);\n wrap(headerRows, false);\n break;\n default:\n wrap(this.element, true);\n wrap(this.getContent(), false);\n wrap(headerRows, false);\n }\n if (this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n }\n };\n /**\n * The function is used to remove text wrap\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeTextWrap = function () {\n wrap(this.element, false);\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n wrap(headerRows, false);\n wrap(this.getContent(), false);\n if (this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n };\n /**\n * The function is used to add Tooltip to the grid cell that has ellipsiswithtooltip clip mode.\n * @return {void}\n * @hidden\n */\n Grid.prototype.createTooltip = function () {\n this.toolTipObj = new Tooltip({ opensOn: 'custom', content: '' }, this.element);\n };\n /** @hidden */\n Grid.prototype.freezeRefresh = function () {\n this.isFreezeRefresh = true;\n if (this.enableVirtualization) {\n this.pageSettings.currentPage = 1;\n }\n this.componentRefresh();\n };\n Grid.prototype.getTooltipStatus = function (element) {\n var width;\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n var headerDivTag = 'e-gridheader';\n var contentDivTag = 'e-gridcontent';\n var htable = this.createTable(headerTable, headerDivTag, 'header');\n var ctable = this.createTable(headerTable, headerDivTag, 'content');\n var td = element;\n var table = element.classList.contains('e-headercell') ? htable : ctable;\n var ele = element.classList.contains('e-headercell') ? 'th' : 'tr';\n table.querySelector(ele).className = element.className;\n table.querySelector(ele).innerHTML = element.innerHTML;\n width = table.querySelector(ele).getBoundingClientRect().width;\n document.body.removeChild(htable);\n document.body.removeChild(ctable);\n if (width > element.getBoundingClientRect().width) {\n return true;\n }\n return false;\n };\n Grid.prototype.mouseMoveHandler = function (e) {\n if (this.isEllipsisTooltip()) {\n var element = parentsUntil(e.target, 'e-ellipsistooltip');\n if (this.prevElement !== element || e.type === 'mouseout') {\n this.toolTipObj.close();\n }\n var tagName = e.target.tagName;\n var elemNames = ['A', 'BUTTON', 'INPUT'];\n if (element && e.type !== 'mouseout' && !(Browser.isDevice && elemNames.indexOf(tagName) !== -1)) {\n if (element.getAttribute('aria-describedby')) {\n return;\n }\n if (this.getTooltipStatus(element)) {\n if (element.getElementsByClassName('e-headertext').length) {\n this.toolTipObj.content = element.getElementsByClassName('e-headertext')[0].innerText;\n }\n else {\n this.toolTipObj.content = element.innerText;\n }\n this.prevElement = element;\n this.toolTipObj.open(element);\n }\n }\n }\n this.hoverFrozenRows(e);\n };\n /** @hidden */\n Grid.prototype.hoverFrozenRows = function (e) {\n if (this.isFrozenGrid()) {\n var row = parentsUntil(e.target, 'e-row');\n if ([].slice.call(this.element.querySelectorAll('.e-frozenhover')).length && e.type === 'mouseout') {\n var rows = [].slice.call(this.element.querySelectorAll('.e-frozenhover'));\n for (var i = 0; i < rows.length; i++) {\n rows[i].classList.remove('e-frozenhover');\n }\n }\n else if (row) {\n var rows = [].slice.call(this.element.querySelectorAll('tr[aria-rowindex=\"' + row.getAttribute('aria-rowindex') + '\"]'));\n rows.splice(rows.indexOf(row), 1);\n for (var i = 0; i < rows.length; i++) {\n if (row.getAttribute('aria-selected') != 'true' && rows[i]) {\n rows[i].classList.add('e-frozenhover');\n }\n else if (rows[i]) {\n rows[i].classList.remove('e-frozenhover');\n }\n }\n }\n }\n };\n Grid.prototype.isEllipsisTooltip = function () {\n var cols = this.getColumns();\n if (this.clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n }\n return false;\n };\n Grid.prototype.scrollHandler = function () {\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n };\n /**\n * To create table for ellipsiswithtooltip\n * @hidden\n */\n Grid.prototype.createTable = function (table, tag, type) {\n var myTableDiv = this.createElement('div');\n myTableDiv.className = this.element.className;\n myTableDiv.style.cssText = 'display: inline-block;visibility:hidden;position:absolute';\n var mySubDiv = this.createElement('div');\n mySubDiv.className = tag;\n var myTable = this.createElement('table');\n myTable.className = table.className;\n myTable.style.cssText = 'table-layout: auto;width: auto';\n var ele = (type === 'header') ? 'th' : 'td';\n var myTr = this.createElement('tr');\n var mytd = this.createElement(ele);\n myTr.appendChild(mytd);\n myTable.appendChild(myTr);\n mySubDiv.appendChild(myTable);\n myTableDiv.appendChild(mySubDiv);\n document.body.appendChild(myTableDiv);\n return myTableDiv;\n };\n Grid.prototype.onKeyPressed = function (e) {\n if (e.action === 'tab' || e.action === 'shiftTab') {\n this.toolTipObj.close();\n }\n };\n /**\n * Binding events to the element while component creation.\n * @hidden\n */\n Grid.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'touchend', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'dblclick', this.dblClickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyPressHandler, this);\n /* tslint:disable-next-line:no-any */\n EventHandler.add(window, 'resize', this.resetIndentWidth, this);\n if (this.allowKeyboard) {\n this.element.tabIndex = this.element.tabIndex === -1 ? 0 : this.element.tabIndex;\n }\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n EventHandler.add(this.getContent().firstElementChild, 'scroll', this.scrollHandler, this);\n EventHandler.add(this.element, 'mousemove', this.mouseMoveHandler, this);\n EventHandler.add(this.element, 'mouseout', this.mouseMoveHandler, this);\n EventHandler.add(this.getContent(), 'touchstart', this.tapEvent, this);\n EventHandler.add(document.body, 'keydown', this.keyDownHandler, this);\n };\n /**\n * Unbinding events from the element while component destroy.\n * @hidden\n */\n Grid.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.mouseClickHandler);\n EventHandler.remove(this.element, 'touchend', this.mouseClickHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'dblclick', this.dblClickHandler);\n EventHandler.remove(this.getContent().firstElementChild, 'scroll', this.scrollHandler);\n EventHandler.remove(this.element, 'mousemove', this.mouseMoveHandler);\n EventHandler.remove(this.element, 'mouseout', this.mouseMoveHandler);\n EventHandler.remove(this.element, 'keydown', this.keyPressHandler);\n EventHandler.remove(this.getContent(), 'touchstart', this.tapEvent);\n EventHandler.remove(document.body, 'keydown', this.keyDownHandler);\n /* tslint:disable-next-line:no-any */\n EventHandler.remove(window, 'resize', this.resetIndentWidth);\n };\n /**\n * @hidden\n */\n Grid.prototype.addListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.on(events.dataReady, this.dataReady, this);\n this.on(events.contentReady, this.recalcIndentWidth, this);\n this.on(events.headerRefreshed, this.recalcIndentWidth, this);\n this.dataBoundFunction = this.refreshMediaCol.bind(this);\n this.addEventListener(events.dataBound, this.dataBoundFunction);\n this.on(events.keyPressed, this.onKeyPressed, this);\n this.on(events.contentReady, this.blazorTemplate, this);\n };\n /**\n * @hidden\n */\n Grid.prototype.removeListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.off(events.dataReady, this.dataReady);\n this.off(events.contentReady, this.recalcIndentWidth);\n this.off(events.headerRefreshed, this.recalcIndentWidth);\n this.removeEventListener(events.dataBound, this.dataBoundFunction);\n this.off(events.keyPressed, this.onKeyPressed);\n };\n Grid.prototype.blazorTemplate = function () {\n if (isBlazor()) {\n if (this.pageSettings.template) {\n updateBlazorTemplate(this.element.id + \"_template\", 'Template', this.pageSettings);\n }\n for (var i = 0; i < this.columnModel.length; i++) {\n if (this.columnModel[i].template) {\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid, 'Template', this.columnModel[i], false);\n }\n if (this.columnModel[i].headerTemplate) {\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid + 'headerTemplate', 'HeaderTemplate', this.columnModel[i], false);\n }\n if (this.filterSettings.type == 'FilterBar' && this.columnModel[i].filterTemplate) {\n var fieldName = this.columnModel[i].field;\n var tempID = this.element.id + this.columnModel[i].uid + 'filterTemplate';\n var filteredColumns = this.filterSettings.columns;\n for (var k = 0; k < filteredColumns.length; k++) {\n if (fieldName == filteredColumns[k].field) {\n blazorTemplates[tempID][0][fieldName] = filteredColumns[k].value;\n }\n }\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid + 'filterTemplate', 'FilterTemplate', this.columnModel[i], false);\n }\n if (this.filterSettings.type != 'FilterBar' && this.columnModel[i].filterTemplate) {\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid + 'filterTemplate', 'FilterTemplate', this.columnModel[i]);\n }\n }\n if (this.groupSettings.captionTemplate) {\n updateBlazorTemplate(this.element.id + 'captionTemplate', 'CaptionTemplate', this.groupSettings);\n }\n var guid = 'guid';\n for (var k = 0; k < this.aggregates.length; k++) {\n for (var j = 0; j < this.aggregates[k].columns.length; j++) {\n if (this.aggregates[k].columns[j].footerTemplate) {\n updateBlazorTemplate(this.element.id + this.aggregates[k].columns[j][guid] + 'footerTemplate', 'FooterTemplate', this.aggregates[k].columns[j]);\n }\n if (this.aggregates[k].columns[j].groupFooterTemplate) {\n updateBlazorTemplate(this.element.id + this.aggregates[k].columns[j][guid] + 'groupFooterTemplate', 'GroupFooterTemplate', this.aggregates[k].columns[j]);\n }\n if (this.aggregates[k].columns[j].groupCaptionTemplate) {\n updateBlazorTemplate(this.element.id + this.aggregates[k].columns[j][guid] + 'groupCaptionTemplate', 'GroupCaptionTemplate', this.aggregates[k].columns[j]);\n }\n }\n }\n }\n };\n /**\n * Get current visible data of grid.\n * @return {Object[]}\n * @isGenericType true\n */\n Grid.prototype.getCurrentViewRecords = function () {\n if (isGroupAdaptive(this)) {\n return isNullOrUndefined(this.currentViewData.records) ?\n this.currentViewData : this.currentViewData.records;\n }\n if (this.groupSettings.enableLazyLoading) {\n return this.currentViewData;\n }\n ;\n return (this.allowGrouping && this.groupSettings.columns.length && this.currentViewData.length && this.currentViewData.records) ?\n this.currentViewData.records : this.currentViewData;\n };\n Grid.prototype.mouseClickHandler = function (e) {\n if (this.isChildGrid(e) || (parentsUntil(e.target, 'e-gridpopup') && e.touches) ||\n this.element.querySelectorAll('.e-cloneproperties').length || this.checkEdit(e)) {\n return;\n }\n if (((!this.allowRowDragAndDrop && (parentsUntil(e.target, 'e-gridcontent') ||\n e.target.tagName === 'TD')) || (!(this.allowGrouping || this.allowReordering) &&\n parentsUntil(e.target, 'e-gridheader'))) && e.touches) {\n return;\n }\n if (parentsUntil(e.target, 'e-gridheader') && this.allowRowDragAndDrop &&\n !(parentsUntil(e.target, 'e-filterbarcell'))) {\n e.preventDefault();\n }\n var args = this.getRowInfo(e.target);\n var cancel = 'cancel';\n args[cancel] = false;\n var isDataRow = false;\n var tr = closest(e.target, 'tr');\n if (tr && tr.getAttribute('data-uid')) {\n var rowObj = this.getRowObjectFromUID(tr.getAttribute('data-uid'));\n isDataRow = rowObj ? rowObj.isDataRow : false;\n }\n if (isBlazor()) {\n var clonedColumn = extend({}, args.column);\n args = { rowData: args.rowData, rowIndex: args.rowIndex,\n cellIndex: args.cellIndex, column: clonedColumn };\n }\n if (isDataRow) {\n this.trigger(events.recordClick, args);\n }\n this.notify(events.click, e);\n };\n Grid.prototype.checkEdit = function (e) {\n var tr = parentsUntil(e.target, 'e-row');\n var isEdit = this.editSettings.mode !== 'Batch' &&\n this.isEdit && tr && (tr.classList.contains('e-editedrow') || tr.classList.contains('e-addedrow'));\n return !parentsUntil(e.target, 'e-unboundcelldiv') && (isEdit || (parentsUntil(e.target, 'e-rowcell') &&\n parentsUntil(e.target, 'e-rowcell').classList.contains('e-editedbatchcell')));\n };\n Grid.prototype.dblClickHandler = function (e) {\n var grid = parentsUntil(e.target, 'e-grid');\n if (isNullOrUndefined(grid) || grid.id !== this.element.id || closest(e.target, '.e-unboundcelldiv')) {\n return;\n }\n var dataRow = false;\n var tr = closest(e.target, 'tr');\n if (tr && tr.getAttribute('data-uid')) {\n var rowObj = this.getRowObjectFromUID(tr.getAttribute('data-uid'));\n dataRow = rowObj ? rowObj.isDataRow : false;\n }\n var args = this.getRowInfo(e.target);\n args.target = e.target;\n if (dataRow) {\n this.trigger(events.recordDoubleClick, args);\n }\n this.notify(events.dblclick, e);\n };\n Grid.prototype.focusOutHandler = function (e) {\n if (this.isChildGrid(e)) {\n return;\n }\n if (!parentsUntil(e.target, 'e-grid')) {\n this.element.querySelector('.e-gridpopup').style.display = 'None';\n }\n var filterClear = this.element.querySelector('.e-cancel:not(.e-hide)');\n if (filterClear) {\n filterClear.classList.add('e-hide');\n }\n var relatedTarget = e.relatedTarget;\n var ariaOwns = relatedTarget ? relatedTarget.getAttribute('aria-owns') : null;\n if ((!relatedTarget || (!parentsUntil(relatedTarget, 'e-grid') &&\n (!isNullOrUndefined(ariaOwns) &&\n (ariaOwns)) !== e.target.getAttribute('aria-owns')))\n && !this.keyPress && this.isEdit && !Browser.isDevice) {\n if (this.editSettings.mode === 'Batch') {\n this.editModule.saveCell();\n this.notify(events.editNextValCell, {});\n }\n if (this.editSettings.mode === 'Normal') {\n this.editModule.editFormValidate();\n }\n }\n this.keyPress = false;\n };\n Grid.prototype.isChildGrid = function (e) {\n var gridElement = parentsUntil(e.target, 'e-grid');\n if (gridElement && gridElement.id !== this.element.id) {\n return true;\n }\n return false;\n };\n /**\n * @hidden\n */\n Grid.prototype.mergePersistGridData = function (persistedData) {\n var data = this.getLocalData();\n if (!(isNullOrUndefined(data) || (data === '')) || !isNullOrUndefined(persistedData)) {\n var dataObj = !isNullOrUndefined(persistedData) ? persistedData : JSON.parse(data);\n if (this.enableVirtualization) {\n dataObj.pageSettings.currentPage = 1;\n }\n var keys = Object.keys(dataObj);\n this.isProtectedOnChange = true;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if ((typeof this[key] === 'object') && !isNullOrUndefined(this[key])) {\n if (Array.isArray(this[key]) && key === 'columns') {\n if (!(isBlazor() && this.isServerRendered)) {\n setColumnIndex(this[key]);\n }\n this.mergeColumns(dataObj[key], this[key]);\n this[key] = dataObj[key];\n }\n else {\n extend(this[key], dataObj[key]);\n }\n }\n else {\n this[key] = dataObj[key];\n }\n }\n this.isProtectedOnChange = false;\n }\n };\n Grid.prototype.mergeColumns = function (storedColumn, columns) {\n var storedColumns = storedColumn;\n var _loop_2 = function (i) {\n var localCol = columns.filter(function (tCol) { return tCol.index === storedColumns[i].index; })[0];\n if (!isNullOrUndefined(localCol)) {\n if (localCol.columns && localCol.columns.length) {\n this_2.mergeColumns(storedColumns[i].columns, localCol.columns);\n storedColumns[i] = extend(localCol, storedColumns[i], {}, true);\n }\n else {\n if (isBlazor()) {\n var guid = 'guid';\n storedColumns[i][guid] = localCol[guid];\n storedColumns[i].uid = localCol.uid;\n }\n storedColumns[i] = extend(localCol, storedColumns[i], {}, true);\n }\n }\n };\n var this_2 = this;\n for (var i = 0; i < storedColumns.length; i++) {\n _loop_2(i);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.isDetail = function () {\n return !isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.childGrid);\n };\n Grid.prototype.isCommandColumn = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this.isCommandColumn(col.columns);\n }\n return !!(col.commands || col.commandsTemplate);\n });\n };\n Grid.prototype.isForeignKeyEnabled = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this.isForeignKeyEnabled(col.columns);\n }\n return !!(col.dataSource && col.foreignKeyValue);\n });\n };\n Grid.prototype.keyPressHandler = function (e) {\n var presskey = extend(e, { cancel: false, });\n this.trigger(\"keyPressed\", presskey);\n if (presskey.cancel === true) {\n e.stopImmediatePropagation();\n }\n };\n Grid.prototype.keyDownHandler = function (e) {\n if (e.altKey) {\n if (e.keyCode === 74) { //alt j\n if (this.keyA) { //alt A J\n this.notify(events.groupCollapse, { target: e.target, collapse: false });\n this.keyA = false;\n }\n else {\n this.focusModule.focusHeader();\n this.focusModule.addOutline();\n }\n }\n if (e.keyCode === 87) { //alt w\n this.focusModule.focusContent();\n this.focusModule.addOutline();\n }\n if (e.keyCode === 65) { //alt A\n this.keyA = true;\n }\n if (e.keyCode === 72 && this.keyA) { //alt A H\n this.notify(events.groupCollapse, { target: e.target, collapse: true });\n this.keyA = false;\n }\n }\n if (e.keyCode === 13) {\n this.notify(events.enterKeyHandler, e);\n }\n };\n Grid.prototype.keyActionHandler = function (e) {\n if (this.isChildGrid(e) ||\n (this.isEdit && e.action !== 'escape' && e.action !== 'enter' && e.action !== 'shiftEnter'\n && e.action !== 'tab' && e.action !== 'shiftTab')) {\n return;\n }\n else {\n this.keyPress = true;\n }\n if (this.allowKeyboard) {\n if (e.action === 'ctrlPlusP') {\n e.preventDefault();\n this.print();\n }\n this.notify(events.keyPressed, e);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.setInjectedModules = function (modules) {\n this.injectedModules = modules;\n };\n Grid.prototype.updateColumnObject = function () {\n prepareColumns(this.columns, this.enableColumnVirtualization, this);\n if (!(isBlazor() && this.isServerRendered)) {\n setColumnIndex(this.columns);\n }\n this.initForeignColumn();\n this.notify(events.autoCol, {});\n };\n /**\n * Gets the foreign columns from Grid.\n * @return {Column[]}\n * @blazorType List\n */\n Grid.prototype.getForeignKeyColumns = function () {\n return this.getColumns().filter(function (col) {\n return col.isForeignColumn();\n });\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowHeight = function () {\n return this.rowHeight ? this.rowHeight : getRowHeight(this.element);\n };\n /**\n * Refreshes the Grid column changes.\n */\n Grid.prototype.refreshColumns = function () {\n this.setFrozenCount();\n var fCnt = this.getContent().querySelector('.e-frozen-left-content');\n var frCnt = this.getContent().querySelector('.e-frozen-right-content');\n var isColFrozen = !this.frozenRightCount && !this.frozenLeftCount;\n var isFrozen = this.getFrozenColumns() !== 0;\n if (!isFrozen && ((!fCnt && this.frozenLeftCount) || (!frCnt && this.frozenRightCount) || (fCnt && !this.frozenLeftCount)\n || (frCnt && !this.frozenRightCount))) {\n this.tableIndex = 0;\n this.tablesCount = 1;\n if (this.enableColumnVirtualization) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n this.freezeRefresh();\n }\n else if (isColFrozen && ((this.getFrozenColumns() === 1 && !fCnt) || (this.getFrozenColumns() === 0 && fCnt))) {\n this.tableIndex = 0;\n this.tablesCount = 1;\n if (this.enableColumnVirtualization) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n this.freezeRefresh();\n }\n else {\n this.isPreventScrollEvent = true;\n this.updateColumnObject();\n this.checkLockColumns(this.getColumns());\n this.refresh();\n if (this.isFrozenGrid()) {\n var mTbl = this.contentModule.getMovableContent().querySelector('.e-table');\n remove(mTbl.querySelector('colgroup'));\n var colGroup = ((this.getHeaderContent()\n .querySelector('.e-movableheader').querySelector('colgroup')).cloneNode(true));\n mTbl.insertBefore(colGroup, mTbl.querySelector('tbody'));\n if (this.getFrozenMode() === 'Left-Right') {\n var frTbl = this.contentModule.getFrozenRightContent().querySelector('.e-table');\n remove(frTbl.querySelector('colgroup'));\n var colGrp = ((this.getHeaderContent()\n .querySelector('.e-frozen-right-header').querySelector('colgroup')).cloneNode(true));\n frTbl.insertBefore(colGrp, frTbl.querySelector('tbody'));\n }\n }\n }\n if (this.isFrozenGrid()) {\n var left = this.getContent().querySelector('.e-movablescrollbar').scrollLeft;\n this.headerModule.getMovableHeader().scrollLeft = left;\n this.contentModule.getMovableContent().scrollLeft = left;\n }\n };\n /**\n * Export Grid data to Excel file(.xlsx).\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n * @blazorType void\n */\n Grid.prototype.excelExport = function (excelExportProperties, isMultipleExport, \n /* tslint:disable-next-line:no-any */\n workbook, isBlob) {\n if (isBlazor()) {\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, false, isBlob);\n return null;\n }\n return this.excelExportModule ?\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, false, isBlob) : null;\n };\n /**\n * Export Grid data to CSV file.\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n * @blazorType void\n */\n Grid.prototype.csvExport = function (excelExportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, workbook, isBlob) {\n if (isBlazor()) {\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, true, isBlob);\n return null;\n }\n return this.excelExportModule ?\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, true, isBlob) : null;\n };\n /**\n * Export Grid data to PDF document.\n * @param {pdfExportProperties} PdfExportProperties - Defines the export properties of the Grid.\n * @param {isMultipleExport} isMultipleExport - Define to enable multiple export.\n * @param {pdfDoc} pdfDoc - Defined the Pdf Document if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n * @blazorType void\n */\n Grid.prototype.pdfExport = function (pdfExportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, pdfDoc, isBlob) {\n if (isBlazor()) {\n this.pdfExportModule.Map(this, pdfExportProperties, isMultipleExport, pdfDoc, isBlob);\n return null;\n }\n return this.pdfExportModule ? this.pdfExportModule.Map(this, pdfExportProperties, isMultipleExport, pdfDoc, isBlob) : null;\n };\n /**\n * Groups a column by column name.\n * @param {string} columnName - Defines the column name to group.\n * @return {void}\n */\n Grid.prototype.groupColumn = function (columnName) {\n if (this.groupModule) {\n this.groupModule.groupColumn(columnName);\n }\n };\n /**\n * Expands all the grouped rows of the Grid.\n * @return {void}\n */\n Grid.prototype.groupExpandAll = function () {\n if (this.groupModule) {\n this.groupModule.expandAll();\n }\n };\n /**\n * Collapses all the grouped rows of the Grid.\n * @return {void}\n */\n Grid.prototype.groupCollapseAll = function () {\n if (this.groupModule) {\n this.groupModule.collapseAll();\n }\n };\n /**\n * Expands or collapses grouped rows by target element.\n * @param {Element} target - Defines the target element of the grouped row.\n * @return {void}\n */\n // public expandCollapseRows(target: Element): void {\n // if (this.groupModule) {\n // this.groupModule.expandCollapseRows(target);\n // }\n // }\n /**\n * Clears all the grouped columns of the Grid.\n * @return {void}\n */\n Grid.prototype.clearGrouping = function () {\n if (this.groupModule) {\n this.groupModule.clearGrouping();\n }\n };\n /**\n * Ungroups a column by column name.\n * @param {string} columnName - Defines the column name to ungroup.\n * {% codeBlock src='grid/ungroupColumn/index.md' %}{% endcodeBlock %}\n * @return {void}\n */\n Grid.prototype.ungroupColumn = function (columnName) {\n if (this.groupModule) {\n this.groupModule.ungroupColumn(columnName);\n }\n };\n /**\n * Column chooser can be displayed on screen by given position(X and Y axis).\n * @param {number} X - Defines the X axis.\n * @param {number} Y - Defines the Y axis.\n * @return {void}\n */\n Grid.prototype.openColumnChooser = function (x, y) {\n if (this.columnChooserModule) {\n this.columnChooserModule.openColumnChooser(x, y);\n }\n };\n Grid.prototype.scrollRefresh = function () {\n var _this = this;\n var refresh = function () {\n _this.scrollModule.refresh();\n _this.off(events.contentReady, refresh);\n };\n this.on(events.contentReady, refresh, this);\n };\n /**\n * Collapses a detail row with the given target.\n * @param {Element} target - Defines the expanded element to collapse.\n * @return {void}\n */\n // public detailCollapse(target: number | Element): void {\n // if (this.detailRowModule) {\n // this.detailRowModule.collapse(target);\n // }\n // }\n /**\n * Collapses all the detail rows of the Grid.\n * @return {void}\n */\n Grid.prototype.detailCollapseAll = function () {\n if (this.detailRowModule) {\n this.detailRowModule.collapseAll();\n }\n };\n /**\n * Expands a detail row with the given target.\n * @param {Element} target - Defines the collapsed element to expand.\n * @return {void}\n */\n // public detailExpand(target: number | Element): void {\n // if (this.detailRowModule) {\n // this.detailRowModule.expand(target);\n // }\n // }\n /**\n * Expands all the detail rows of the Grid.\n * @return {void}\n */\n Grid.prototype.detailExpandAll = function () {\n if (this.detailRowModule) {\n this.detailRowModule.expandAll();\n }\n };\n /**\n * Deselects the currently selected cells.\n * @return {void}\n */\n Grid.prototype.clearCellSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearCellSelection();\n }\n };\n /**\n * Deselects the currently selected rows.\n * @return {void}\n */\n Grid.prototype.clearRowSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearRowSelection();\n }\n };\n /**\n * Selects a collection of cells by row and column indexes.\n * @param {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.\n * @return {void}\n */\n Grid.prototype.selectCells = function (rowCellIndexes) {\n if (this.selectionModule) {\n this.selectionModule.selectCells(rowCellIndexes);\n }\n };\n /**\n * Selects a range of rows from start and end row indexes.\n * @param {number} startIndex - Specifies the start row index.\n * @param {number} endIndex - Specifies the end row index.\n * @return {void}\n */\n Grid.prototype.selectRowsByRange = function (startIndex, endIndex) {\n if (this.selectionModule) {\n this.selectionModule.selectRowsByRange(startIndex, endIndex);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.isContextMenuOpen = function () {\n return this.contextMenuModule && this.contextMenuModule.isOpen;\n };\n /**\n * @hidden\n */\n Grid.prototype.ensureModuleInjected = function (module) {\n return this.getInjectedModules().indexOf(module) >= 0;\n };\n /**\n * Destroys the given template reference.\n * @param {string[]} propertyNames - Defines the collection of template name.\n */\n //tslint:disable-next-line:no-any\n Grid.prototype.destroyTemplate = function (propertyNames, index) {\n this.clearTemplate(propertyNames, index);\n };\n /**\n * @hidden\n * @private\n */\n Grid.prototype.log = function (type, args) {\n this.loggerModule ? this.loggerModule.log(type, args) : (function () { return 0; })();\n };\n /**\n * @hidden\n */\n Grid.prototype.applyBiggerTheme = function (element) {\n if (this.element.classList.contains('e-bigger')) {\n element.classList.add('e-bigger');\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getPreviousRowData = function () {\n var previousRowData = this.getRowsObject()[this.getRows().length - 1].data;\n return previousRowData;\n };\n /**\n * Hides the scrollbar placeholder of Grid content when grid content is not overflown.\n * @return {void}\n */\n Grid.prototype.hideScroll = function () {\n var content = this.getContent().querySelector('.e-content');\n var scrollBar = this.getContent().querySelector('.e-scrollbar');\n if (content.scrollHeight <= content.clientHeight) {\n this.scrollModule.removePadding();\n content.style.overflowY = 'auto';\n }\n if (this.isFrozenGrid() && scrollBar) {\n var mvblScrollBar = this.getContent().querySelector('.e-movablescrollbar');\n var mvblChild = this.getContent().querySelector('.e-movablechild');\n scrollBar.style.display = 'flex';\n if (mvblScrollBar.offsetWidth >= mvblChild.offsetWidth) {\n scrollBar.style.display = 'none';\n this.notify(events.frozenHeight, 0);\n }\n }\n };\n /**\n * Get row index by primary key or row data.\n * @param {string} value - Defines the primary key value.\n * @param {Object} value - Defines the row data.\n */\n Grid.prototype.getRowIndexByPrimaryKey = function (value) {\n var pkName = this.getPrimaryKeyFieldNames()[0];\n value = typeof value === 'object' ? value[pkName] : value;\n for (var i = 0; i < this.getRowsObject().length; i++) {\n var pKvalue = this.getRowsObject()[i].data[pkName];\n if (pkName.split('.').length > 1) {\n pKvalue = performComplexDataOperation(pkName, this.getRowsObject()[i].data);\n }\n if (pKvalue === value) {\n return this.getRowsObject()[i].index;\n }\n }\n return -1;\n };\n ;\n /**\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n Grid.prototype.grabColumnByFieldFromAllCols = function (field) {\n var column;\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n var gCols = this.columnModel;\n for (var i = 0; i < gCols.length; i++) {\n if (field === gCols[i].field) {\n column = gCols[i];\n }\n }\n return column;\n };\n /**\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n Grid.prototype.grabColumnByUidFromAllCols = function (uid) {\n var column;\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n var gCols = this.columnModel;\n for (var i = 0; i < gCols.length; i++) {\n if (uid === gCols[i].uid) {\n column = gCols[i];\n }\n }\n return column;\n };\n /**\n * Get all filtered records from the Grid and it returns array of objects for the local dataSource, returns a promise object if the Grid has remote data.\n * @return {Object[] | Promise